/*
  Bihar Scholars CRM — the same design language as the marketing site, adapted
  for a tool rather than a page. Same tokens, same type ladder, same corner radii.

  Two things differ on purpose, because this is something counsellors look at for
  hours rather than once: the type scale starts smaller and climbs less, and the
  colour fields are quieter. A marketing page is allowed to be loud; a work screen
  that is loud becomes tiring by eleven in the morning.

  Sized from 320px upward. Every layout rule is a min-width, so the narrow case is
  the default rather than an afterthought.
*/
:root {
  --ink: #112250; --ink-deep: #0c1940; --ink-2: #4e597f; --ink-3: #616c85;
  --royal: #1b3c91; --royal-deep: #142c6b; --royal-lift: #2a52b4;
  --brass: #bd5317; --brass-lift: #f5ab71; --brass-tint: #ffdfcc; --rust: #9a3906;
  --leaf: #41694f;
  --paper: #fff; --paper-deep: #eff6ff; --mist: #e1f3ff; --cream: #ffeedc; --blush: #ffeae3;
  --rule: rgb(17 34 80 / 0.11); --rule-strong: rgb(17 34 80 / 0.2);
  /* The marketing site uses 13px, which suits a page you read once. A work screen
     is denser and is looked at for hours, and a soft corner on a data row reads as
     unserious at that size - which is why every CRM in the category, Pipedrive
     included, sits at 4-8px. The brand's colours and mark are unchanged; only the
     geometry is tuned for the job. */
  --r-lg: 8px; --r-md: 6px; --r-sm: 4px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --shell: 0 0 0 1px rgb(17 34 80 / 0.07), 0 10px 26px -14px rgb(17 34 80 / 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.55;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased;
}
/* heavier and tighter than the website: a tool's headings are signposts, not voice */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.021em; line-height: 1.18; margin: 0; }
h1 { font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); font-weight: 700; }
h2 { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); font-weight: 700; }
h3 { font-size: 0.9375rem; font-weight: 700; }
a { color: var(--rust); text-underline-offset: 2px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: 0.875rem; }

/* ---- the sign-in screen -------------------------------------------------
   An open, centred column on a tinted field rather than a small box on grey.
   The field carries three lights, the same way the marketing site's sections
   do: cool from the upper left, the terracotta accent warm from the upper
   right, settling to white at the foot. Nothing here is a card, because a
   card would make the page feel like a form rather than a front door. */
.signin {
  min-height: 100svh; display: grid; place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 5vw, 2rem);
  /* Lifted verbatim from the marketing site's .wash: white underneath, with a
     cool light from the upper left and the terracotta accent warm from the upper
     right. The first version ramped from pale blue to white, which is why it read
     cold and looked like a different company. */
  background:
    radial-gradient(62% 58% at 10% -10%, rgb(27 60 145 / 0.086), transparent 62%),
    radial-gradient(52% 50% at 97% 2%, rgb(189 83 23 / 0.072), transparent 66%),
    radial-gradient(70% 60% at 50% 108%, rgb(27 60 145 / 0.05), transparent 70%),
    #ffffff;
}
.signin-col { width: 100%; max-width: 26rem; text-align: center; }

.lockup { display: inline-block; margin-bottom: clamp(1.75rem, 5vw, 2.75rem); }
/* the lockup is 3.47:1; sizing by height keeps it crisp at any width */
.lockup img { display: block; height: clamp(34px, 7vw, 46px); width: auto; }

.signin-h {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  line-height: 1.1; letter-spacing: -0.021em; color: var(--ink);
  text-wrap: balance;
}
.signin-h { font-weight: 700; }
.signin-h .accent { color: var(--rust); }
.signin-sub {
  margin: 0.9rem auto 0; max-width: 24rem;
  color: var(--ink-2); font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.5;
}

.signin-form { margin-top: clamp(1.75rem, 4vw, 2.25rem); text-align: left; }
.signin-note { margin: 1.5rem auto 0; max-width: 23rem; color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.signin-foot { margin-top: 0.75rem; color: var(--ink-3); font-size: 0.8125rem; }

.field { margin-top: 0.9rem; }
.field label { display: block; font-size: 0.8125rem; font-weight: 650; margin-bottom: 0.35rem; color: var(--ink); }
.field input {
  width: 100%; min-height: 3.125rem; padding: 0 1rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: #fff; border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgb(17 34 80 / 0.04);
  transition: border-color .15s var(--ease-ui), box-shadow .15s var(--ease-ui);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus-visible {
  outline: none; border-color: var(--royal);
  box-shadow: 0 0 0 3px rgb(27 60 145 / 0.17);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: 0 1.25rem;
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  color: #fff; border: 0; border-radius: var(--r-md); text-decoration: none;
  background: linear-gradient(168deg, var(--royal-lift) 0%, var(--royal) 55%, var(--royal-deep) 100%);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.22), 0 10px 24px -12px rgb(17 34 80 / 0.7);
  transition: transform .15s var(--ease-ui), box-shadow .15s var(--ease-ui);
}
.btn-lg { width: 100%; min-height: 3.125rem; margin-top: 1.5rem; font-size: 1.0625rem; }
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.28), 0 14px 28px -12px rgb(17 34 80 / 0.75); }
.btn:active { transform: translateY(0); }
.alert {
  margin-top: 1.25rem; padding: 0.75rem 0.9rem; border-radius: var(--r-md); text-align: left;
  background: var(--blush); color: var(--rust); font-size: 0.9375rem;
  box-shadow: inset 0 0 0 1px rgb(154 57 6 / 0.22);
}

/* ---- application shell -------------------------------------------------- */
.shell { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem clamp(0.85rem, 3vw, 1.5rem);
  background: rgb(255 255 255 / 0.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.topbar nav a {
  padding: 0.45rem 0.7rem; border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
}
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--ink); background: var(--mist); }
.app-field {
  background:
    radial-gradient(58% 40% at 8% 0%, rgb(27 60 145 / 0.055), transparent 62%),
    radial-gradient(46% 34% at 98% 0%, rgb(189 83 23 / 0.045), transparent 64%),
    #fff;
}
.main { padding: clamp(1rem, 3vw, 2rem) clamp(0.85rem, 3vw, 1.5rem); max-width: 1400px; width: 100%; margin-inline: auto; }

.cards { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shell); padding: 1.1rem 1.15rem; }
.card .k { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.card .v { font-family: var(--display); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
           font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin-top: 0.3rem;
           font-variant-numeric: tabular-nums; }
.card.warn .v { color: var(--rust); }

.panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shell); margin-top: 1.25rem; overflow: hidden; }
.panel > header { padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); }
.empty { padding: 2.5rem 1.15rem; text-align: center; color: var(--ink-2); }

/* a table on a phone becomes a list of cards; nothing scrolls sideways */
.rows { display: grid; }
.row { display: grid; gap: 0.2rem 1rem; padding: 0.9rem 1.15rem; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; }
@media (min-width: 46rem) {
  .row { grid-template-columns: 7rem 1fr 9rem 7rem; align-items: center; }
}
.ref { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 650; white-space: nowrap;
}
.pill-stage { background: var(--mist); color: var(--ink); }
.pill-late  { background: var(--blush); color: var(--rust); }
.pill-ok    { background: #e3f3e8; color: var(--leaf); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- signed-in chrome ---------------------------------------------------- */
.topbar .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; }
.topbar .brand b { font-family: var(--display); font-size: .9375rem; font-weight: 700; letter-spacing: -.012em; }
.who { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.who-name { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.who-out { font-size: .875rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.who-out:hover { color: var(--rust); }
.topbar nav { margin-left: 0; }
.main.wide { max-width: none; }

.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 1.25rem; }
.page-head p { margin: .25rem 0 0; font-size: .9375rem; }
.btn-sm { min-height: 2.375rem; width: auto; margin: 0; padding: 0 .9rem; font-size: .9375rem; }
.search { display: flex; gap: .5rem; }
.search input {
  min-height: 2.375rem; padding: 0 .75rem; font: inherit; font-size: .9375rem; min-width: 0; width: min(18rem, 60vw);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: #fff;
}
.search input:focus-visible { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgb(27 60 145 / .16); }
.unassigned { color: var(--ink-3); font-style: normal; }

/* ---- the board ----------------------------------------------------------
   Seven columns is too many for any phone, so below 60rem it becomes a single
   scrolling column list rather than a horizontal scroller nobody can use with
   a thumb. Above that it scrolls sideways with each column holding its width. */
.board { display: grid; gap: .75rem; }
@media (min-width: 60rem) {
  .board {
    grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr);
    overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity;
  }
  .col { scroll-snap-align: start; }
}
.col { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shell); display: flex; flex-direction: column; min-width: 0; }
.col-h { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
.col-h h2 { font-size: .8125rem; font-weight: 700; letter-spacing: -.008em; flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-n { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none;
         border-radius: var(--r-sm); background: var(--mist); color: var(--ink);
         font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.col-c { font-size: .75rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.col-body { padding: .6rem; display: grid; gap: .5rem; align-content: start; }
.col-empty { margin: 0; padding: .9rem .3rem; font-size: .8125rem; color: var(--ink-3); text-align: center; }

.deal {
  display: grid; gap: .22rem; padding: .7rem .75rem; text-decoration: none; color: inherit;
  background: #fff; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px rgb(17 34 80 / .05);
  transition: box-shadow .15s var(--ease-ui), transform .15s var(--ease-ui);
}
.deal:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgb(189 83 23 / .35), 0 6px 14px -6px rgb(17 34 80 / .25); }
.deal.is-late { box-shadow: inset 0 0 0 1px rgb(154 57 6 / .35), inset 3px 0 0 0 var(--brass); }
.deal-name { font-weight: 650; font-size: .9375rem; line-height: 1.3; }
.deal-meta { font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.deal-next { margin-top: .25rem; font-size: .75rem; line-height: 1.35; padding: .25rem .4rem; border-radius: var(--r-sm); }
.owner-student { background: var(--cream); color: var(--rust); }
.owner-us { background: var(--mist); color: var(--ink-2); }
.deal-foot { margin-top: .2rem; display: flex; align-items: center; justify-content: space-between;
             gap: .5rem; font-size: .75rem; color: var(--ink-2); }

@media (min-width: 46rem) {
  .row { grid-template-columns: 7rem 1fr 11rem 8rem 6rem; }
}

/* ---- one applicant ------------------------------------------------------ */
.crumb { margin: 0 0 .75rem; font-size: .8125rem; color: var(--ink-3); }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--rust); }

.detail { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 62rem) { .detail { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.detail-main, .detail-side { display: grid; gap: 1rem; align-content: start; }
.panel > .pad { padding: 1rem 1.15rem; }
.panel > header h2 { margin: 0; }
.empty.small { padding: 1.25rem 1.15rem; font-size: .875rem; }

/* the stage rail. On a phone it stacks; there is no horizontal scrolling,
   because a control you have to drag to reach is a control nobody uses. */
.rail-panel { padding: 1rem 1.15rem 1.15rem; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
@media (min-width: 52rem) { .rail { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; } }
.rail-step form { margin: 0; }
.rail-step button {
  width: 100%; display: flex; align-items: center; gap: .5rem; text-align: left;
  padding: .55rem .6rem; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md);
  color: var(--ink-2); transition: border-color .15s var(--ease-ui), background .15s var(--ease-ui);
}
@media (min-width: 52rem) { .rail-step button { flex-direction: column; align-items: flex-start; gap: .35rem; } }
.rail-step button:hover { border-color: var(--royal); background: var(--mist); }
.rail-dot {
  flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem;
  border-radius: 999px; background: var(--paper-deep); color: var(--ink-3);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rail-label { font-size: .75rem; font-weight: 650; line-height: 1.25; }
.rail-step.is-done .rail-dot { background: var(--brass); color: #fff; }
.rail-step.is-done button { color: var(--ink); }
.rail-step.is-now button { border-color: var(--royal); background: var(--mist); color: var(--ink); box-shadow: inset 0 0 0 1px var(--royal); }
.rail-step.is-now .rail-dot { background: var(--royal); color: #fff; }
.rail-note { margin: .85rem 0 0; font-size: .8125rem; color: var(--ink-3); }

.field textarea {
  width: 100%; padding: .6rem .75rem; font: inherit; font-size: .9375rem; line-height: 1.5;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: #fff; resize: vertical;
}
.field select {
  width: 100%; min-height: 2.75rem; padding: 0 .75rem; font: inherit; font-size: .9375rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: #fff;
}
.field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgb(27 60 145 / .16);
}
.owner-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .85rem; font-size: .875rem; }
.owner-row label { display: inline-flex; align-items: center; gap: .4rem; }
.owner-row .btn { margin-left: auto; }

.timeline { list-style: none; margin: 0; padding: 0 1.15rem 1.15rem; display: grid; gap: .85rem; }
.tl-item { padding-left: .9rem; border-left: 2px solid var(--rule); }
.tl-item.tl-stage_change { border-left-color: var(--brass); }
.tl-item.tl-note { border-left-color: var(--royal); }
.tl-body { font-size: .9375rem; line-height: 1.5; }
.tl-meta { margin-top: .2rem; font-size: .75rem; color: var(--ink-3); }
.tl-seen { color: var(--leaf); font-weight: 650; }

.docs { list-style: none; margin: 0; padding: 0; }
.docs .doc { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
             padding: .7rem 1.15rem; border-top: 1px solid var(--rule); font-size: .875rem; }
.docs .doc:first-child { border-top: 0; }
.doc-state { font-size: .75rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.doc.is-checked .doc-state { color: var(--leaf); }
.doc.is-with_us .doc-state { color: var(--royal); }
.doc.is-needed .doc-state { color: var(--rust); }

.facts { margin: 0; padding: .35rem 1.15rem 1.15rem; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .875rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; text-align: right; }
.unreplied { color: var(--rust); font-weight: 650; }

/* ---- the public front page ----------------------------------------------
   Same field as the marketing site: white with a cool light upper-left and the
   terracotta accent upper-right. Sections alternate white and a faint tint so
   the page has a rhythm rather than being one long scroll of the same surface. */
.pubbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  background: rgb(255 255 255 / .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.pubbar .brand img { display: block; height: clamp(26px, 4vw, 32px); width: auto; }
.pubbar nav { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.pubbar nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 600; }
.pubbar nav a:not(.btn):hover { color: var(--rust); }

.pub {
  background:
    radial-gradient(62% 48% at 10% -6%, rgb(27 60 145 / .086), transparent 62%),
    radial-gradient(52% 42% at 97% 1%, rgb(189 83 23 / .072), transparent 66%),
    #fff;
}
.eyebrow {
  margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rust);
}

.pub-hero { max-width: 48rem; margin: 0 auto; padding: clamp(3rem, 9vw, 6.5rem) clamp(1rem, 5vw, 2rem) clamp(2.5rem, 6vw, 4rem); text-align: center; }
.pub-hero h1 {
  margin-top: .9rem; font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
.pub-hero h1 .accent { color: var(--rust); }
.pub-hero .lede { margin: 1.1rem auto 0; max-width: 36rem; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); line-height: 1.55; color: var(--ink-2); }
.pub-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.pub-cta .btn { width: auto; margin: 0; min-width: 10rem; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--royal); }

.pub-rows { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2rem) clamp(2rem, 5vw, 3rem); display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.pub-row { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 56rem) {
  .pub-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pub-row.reverse .pub-txt { order: 2; }
}
.pub-txt h2 { margin-top: .6rem; font-size: clamp(1.3125rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; }
.pub-txt p { margin: .75rem 0 0; color: var(--ink-2); line-height: 1.6; max-width: 34ch; }
.pub-art {
  background: #fff; border-radius: var(--r-lg); padding: clamp(1.1rem, 3vw, 1.75rem);
  box-shadow: 0 0 0 1px rgb(17 34 80 / .07), 0 18px 40px -22px rgb(17 34 80 / .35);
}

.mini-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mini-rail li { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: var(--r-md); font-size: .875rem; color: var(--ink-3); }
.mini-rail .mr-dot { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: none;
  border-radius: 999px; background: var(--paper-deep); color: var(--ink-3); font-size: .75rem; font-weight: 700; }
.mini-rail .is-done { color: var(--ink); } .mini-rail .is-done .mr-dot { background: var(--brass); color: #fff; }
.mini-rail .is-now { color: var(--ink); background: var(--mist); box-shadow: inset 0 0 0 1px var(--royal); }
.mini-rail .is-now .mr-dot { background: var(--royal); color: #fff; }

.mini-next .mn-k { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--rust); }
.mini-next .mn-v { margin: .5rem 0 0; font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.mini-next .mn-n { margin: .5rem 0 0; color: var(--ink-2); font-size: .9375rem; }

.mini-docs { list-style: none; margin: 0; padding: 0; }
.mini-docs li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--rule); font-size: .875rem; }
.mini-docs li:first-child { border-top: 0; }
.mini-docs b { font-size: .75rem; font-weight: 700; }
.mini-docs .is-checked b { color: var(--leaf); }
.mini-docs .is-with_us b { color: var(--royal); }
.mini-docs .is-needed b { color: var(--rust); }

.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mini-stats > div { padding: .7rem .6rem; border-radius: var(--r-md); background: var(--paper-deep); }
.mini-stats .ms-k { display: block; font-size: .6875rem; font-weight: 650; color: var(--ink-2); }
.mini-stats .ms-v { display: block; margin-top: .2rem; font-family: var(--display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-stats .warn { background: var(--blush); } .mini-stats .warn .ms-v { color: var(--rust); }
.ms-note { margin: .6rem 0 0; font-size: .6875rem; color: var(--ink-3); }

.pub-end { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 2rem); background: var(--paper-deep); }
.pub-end h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); }
.pub-end p { margin: .75rem auto 1.5rem; max-width: 34rem; color: var(--ink-2); }
.pub-end .btn { width: auto; margin: 0; min-width: 11rem; }
.pubfoot { padding: 1.5rem clamp(1rem, 5vw, 2rem); text-align: center; font-size: .8125rem; color: var(--ink-3); }
.pubfoot a { color: var(--ink-2); }