/* Pathways to Potential - admin dashboard.

   The tokens are copied from ../src/styles/global.css rather than imported. This app is served on its own,
   from its own folder, with no build step, so it cannot reach into the site's source tree, and it will
   eventually be deployed somewhere else entirely. Copying thirty lines is the smaller problem. If the site's
   palette changes, change it here too.

   Everything below the tokens is deliberately tighter than the public site. The site is a brochure and can
   afford 17px body text and 100px of air between bands. This is a tool somebody scans forty rows in, so the
   type is smaller, the rows are shorter, and the chunky offset shadow is kept for outer containers only,
   where it still reads as the same brand rather than as decoration in the way.

   Every view depends on the primitives in here - .card, .btn, .chip, .tag, .row, .stack, .kpi, .scroll-x and
   the table and form styles. Renaming one of them breaks a screen written by somebody else. Add freely,
   rename never. */

/* ---------------------------------------------------------------------------
   1. Tokens

   The dark theme inverts two families and nothing else. --ink, --plum and --teal are always foreground; the
   rest - --cream, --card, --band and the five pastels - are always a surface that foreground sits on. Invert
   both families together and every pairing a view can write stays legible in both themes, including the ones
   nobody thought to test.
--------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --ink: #1B1410;
  --cream: #FEFAE7;
  --card: #FFFDF2;
  --band: #FBF3D9;
  --plum: #431027;
  --teal: #1E7691;
  --yellow: #FCE366;
  --mint: #BFE8C4;
  --pink: #F0BEDC;
  --lilac: #C7C2E3;
  --sky: #CDE9F2;
  --muted: #8A7E72;

  --teal-accent: #52B3CD;
  --magenta: #D26CAA;

  /* Quieter versions of the pastels, for large fills where a full-strength one would shout. */
  --tint-yellow: #FDF3C4;
  --tint-mint: #E5F5E7;
  --tint-pink: #F9E2EF;
  --tint-lilac: #E7E4F3;
  --tint-sky: #E3F1F7;

  --text-2: #4A4038;
  --field: #FFFFFF;
  --line: rgba(27, 20, 16, 0.16);
  --line-strong: rgba(27, 20, 16, 0.32);
  --shadow: 6px 6px 0 rgba(27, 20, 16, 0.13);
  --shadow-sm: 3px 3px 0 rgba(27, 20, 16, 0.14);

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --rail: 226px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ink: #F5EFE4;
    --cream: #17120E;
    --card: #211A15;
    --band: #2B221B;
    --plum: #F2AECB;
    --teal: #7FC9DF;
    --yellow: #6E5C18;
    --mint: #20503A;
    --pink: #5E2542;
    --lilac: #3D3663;
    --sky: #1C4657;
    --muted: #A79A8D;

    --teal-accent: #7FC9DF;
    --magenta: #E79BC9;

    --tint-yellow: #3A3113;
    --tint-mint: #1B3A2A;
    --tint-pink: #3B1E2E;
    --tint-lilac: #2A2646;
    --tint-sky: #16323E;

    --text-2: #CFC4B7;
    --field: #14100D;
    --line: rgba(245, 239, 228, 0.18);
    --line-strong: rgba(245, 239, 228, 0.38);
    --shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
    --shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.45);
  }
}

/* ---------------------------------------------------------------------------
   2. Base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--plum); }

::selection { background: var(--yellow); color: var(--ink); }

/* Always visible, never removed. Keyboard focus that cannot be seen is the same as no focus at all. */
*:focus-visible {
  outline: 3px solid var(--teal-accent);
  outline-offset: 2px;
  border-radius: 5px;
}

/* Several primitives below set display: flex, which beats the browser's own [hidden] rule. Same reason the
   site's global.css carries this line. Do not remove it. */
[hidden] { display: none !important; }

img, svg { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--ink);
  border-radius: 999px; padding: 10px 18px; font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------------------
   3. The prototype banner

   Sticky at the top of every screen, on every route, and it cannot be dismissed. The whole risk with a
   convincing prototype is somebody eight weeks from now believing a number on it.
--------------------------------------------------------------------------- */
.mockbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--yellow);
  border-bottom: 1.5px solid var(--ink);
  padding: 9px 22px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.mockbar strong {
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   4. Shell
--------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }

.rail {
  position: sticky; top: 41px; height: calc(100vh - 41px);
  border-right: 1.5px solid var(--ink);
  background: var(--band);
  padding: 24px 16px;
  display: flex; flex-direction: column; gap: 24px;
}

.brand { display: block; text-decoration: none; color: var(--ink); }
.brand .name {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: -0.02em; line-height: 1.15;
}
.brand .sub {
  display: inline-block; margin-top: 7px; padding: 3px 9px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

.nav { display: flex; flex-direction: column; gap: 4px; }
.navlink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.navlink:hover { background: var(--card); border-color: var(--line); color: var(--ink); }
.navlink[aria-current='page'] {
  background: var(--card); border-color: var(--ink); box-shadow: var(--shadow-sm);
}
.navcount {
  min-width: 22px; text-align: center;
  background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0 7px; font-size: 11.5px; font-weight: 700; line-height: 19px;
}

.rail-foot { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.rail-foot p { margin: 0 0 8px; }
.rail-foot p:last-child { margin-bottom: 0; }

.main { padding: 28px 32px 96px; min-width: 0; }

/* ---------------------------------------------------------------------------
   5. Type
--------------------------------------------------------------------------- */
.kicker {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--plum);
}
h1 {
  margin: 8px 0 6px;
  font-family: var(--display); font-weight: 780; font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -0.025em; line-height: 1.1;
}
h1:focus { outline: none; }
h1:focus-visible { outline: 3px solid var(--teal-accent); }
h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 750; font-size: 19px; letter-spacing: -0.015em; }
h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; }
h4 {
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum);
}

.lede { margin: 0 0 20px; color: var(--text-2); max-width: 70ch; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }

hr, .rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0; height: 0; }

/* ---------------------------------------------------------------------------
   6. Surfaces
--------------------------------------------------------------------------- */
.card, .panel {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.card.flush, .panel.flush { padding: 0; overflow: hidden; }
.card.quiet { box-shadow: none; border-color: var(--line-strong); }
.card.band { background: var(--band); }
.card > :last-child { margin-bottom: 0; }

.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.card-head h2, .card-head h3 { margin: 0; }

.callout {
  background: var(--band); border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px;
}
.callout p { margin: 0 0 8px; max-width: 70ch; }
.callout p:last-child { margin-bottom: 0; }
.callout.mint { background: var(--tint-mint); }
.callout.sky { background: var(--tint-sky); }
.callout.lilac { background: var(--tint-lilac); }
.callout.pink { background: var(--tint-pink); }
.callout.yellow { background: var(--tint-yellow); }

/* One calm factual line about special category data. Not a hazard panel: a left rule, plain words, and no
   triangle. Somebody's diagnosis is not an error state. */
.note-legal {
  border-left: 4px solid var(--plum);
  background: var(--tint-pink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px; margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 74ch;
}
.note-legal strong { color: var(--plum); }

.empty {
  padding: 40px 22px; text-align: center; color: var(--text-2);
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--band);
}
.empty p { margin: 0 0 10px; }
.empty p:last-child { margin-bottom: 0; }

.pre {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre; margin: 0;
  background: var(--band); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
}

.quote {
  margin: 0; background: var(--band); border: 1.5px solid var(--line-strong);
  border-radius: 14px; padding: 15px 17px;
  font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   7. Layout helpers
--------------------------------------------------------------------------- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 7px; }
.row.loose { gap: 20px; }
.row.top { align-items: flex-start; }
.row.baseline { align-items: baseline; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.row.nowrap { flex-wrap: nowrap; }

.stack { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.stack.tight { gap: 6px; }
.stack.loose { gap: 22px; }

.spacer { flex: 1 1 auto; }

/* minmax(min(Npx, 100%), 1fr) rather than minmax(Npx, 1fr): the bare form cannot shrink below N, so the
   track stays wider than a 380px viewport and the page scrolls sideways. Identical above N. */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid.narrow { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid > * { min-width: 0; }

.split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); align-items: start; }
.split.even { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Wide content lives inside one of these rather than pushing the page sideways. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  max-width: 100%;
}
.scroll-x:focus-visible { outline-offset: -3px; }

/* ---------------------------------------------------------------------------
   8. Buttons

   Bare <button> gets the same treatment as .btn, so a view that forgets the class still looks right. The chip
   and tag rules come after this block on purpose: a <button class="chip"> should read as a chip.
--------------------------------------------------------------------------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; text-align: center;
  min-height: 44px; padding: 10px 17px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--card); color: var(--ink);
  transition: transform .15s, background .15s, box-shadow .15s, border-color .15s;
}
button:hover, .btn:hover { background: var(--band); color: var(--ink); transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); }

button.primary, .btn.primary { background: var(--ink); color: var(--cream); }
button.primary:hover, .btn.primary:hover { background: var(--plum); color: var(--cream); box-shadow: var(--shadow-sm); }

button.ghost, .btn.ghost { background: transparent; border-color: var(--line-strong); font-weight: 600; }
button.ghost:hover, .btn.ghost:hover { background: var(--band); border-color: var(--ink); }

button.small, .btn.small { min-height: 36px; padding: 6px 13px; font-size: 13px; }
button.block, .btn.block { width: 100%; }

button[aria-pressed='true'], .btn[aria-pressed='true'] {
  background: var(--yellow); border-color: var(--ink); box-shadow: var(--shadow-sm);
}
button[disabled], .btn[disabled], button[aria-disabled='true'] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* A button that behaves like a link: used for a row that opens a record. */
button.linkish, .btn.linkish {
  border: 0; background: none; padding: 0; min-height: 0; border-radius: 4px;
  color: var(--teal); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
}
button.linkish:hover, .btn.linkish:hover { background: none; color: var(--plum); transform: none; }

/* ---------------------------------------------------------------------------
   9. Chips and tags

   .tag is a label on a thing (a stage, a service). .chip is something you press (a filter). Both take a tone
   class named after a colour token, so a view can write class="tag ${stage.tone}" straight from the data.
--------------------------------------------------------------------------- */
.tag, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 2px 11px; font-size: 11.5px; font-weight: 700; line-height: 20px;
  white-space: nowrap; background: var(--card); color: var(--ink);
  box-shadow: none;
}
.tag { min-height: 0; }

.chip {
  cursor: pointer; min-height: 34px; padding: 4px 13px; font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.chip:hover { background: var(--band); transform: none; }
.chip[aria-pressed='true'], .chip.on {
  background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: none;
}

.tag.band, .chip.band { background: var(--band); border-color: var(--line-strong); }
.tag.sky, .chip.sky { background: var(--sky); border-color: var(--line-strong); }
.tag.lilac, .chip.lilac { background: var(--lilac); border-color: var(--line-strong); }
.tag.yellow, .chip.yellow { background: var(--yellow); border-color: var(--ink); }
.tag.pink, .chip.pink { background: var(--pink); border-color: var(--line-strong); }
.tag.mint, .chip.mint { background: var(--mint); border-color: var(--ink); }
.tag.cream, .chip.cream { background: var(--cream); border-color: var(--line-strong); }
.tag.muted, .chip.muted { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.tag.plum, .chip.plum { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.tag.teal, .chip.teal { background: var(--teal); color: var(--cream); border-color: var(--teal); }
.tag.ink, .chip.ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tag.outline { background: transparent; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* A dot for anything that must not rely on colour alone; pair it with the word. */
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; flex: none; }
.dot.mint { background: var(--mint); }
.dot.yellow { background: var(--yellow); }
.dot.sky { background: var(--sky); }
.dot.pink { background: var(--pink); }
.dot.lilac { background: var(--lilac); }
.dot.band { background: var(--band); }
.dot.muted { background: transparent; border-color: var(--muted); }

/* ---------------------------------------------------------------------------
   10. Numbers
--------------------------------------------------------------------------- */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-bottom: 20px; }
.kpis > * { min-width: 0; }

.kpi {
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; text-decoration: none; color: var(--ink);
}
a.kpi:hover, button.kpi:hover { background: var(--band); transform: translateY(-1px); }
.kpi .n, .kpi > strong {
  font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.05;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.kpi .n.sm { font-size: 24px; }
.kpi .l { font-size: 13px; font-weight: 600; color: var(--text-2); margin-top: 5px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.mint { background: var(--tint-mint); }
.kpi.yellow { background: var(--tint-yellow); }
.kpi.pink { background: var(--tint-pink); }
.kpi.lilac { background: var(--tint-lilac); }
.kpi.sky { background: var(--tint-sky); }
.kpi.band { background: var(--band); }

/* Bars are CSS, not a charting library. Five rows of counts do not justify a dependency, and this version
   still reads correctly with the stylesheet off. */
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.bars .track { background: var(--band); border: 1.5px solid var(--line-strong); border-radius: 999px; height: 18px; overflow: hidden; }
.bars .fill { display: block; height: 100%; background: var(--teal-accent); min-width: 2px; }
.bars .fill.alt { background: var(--magenta); }
.bars .fill.mint { background: var(--mint); }
.bars .fill.lilac { background: var(--lilac); }
.bars .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   11. Tables

   Tables stay tables at every width and scroll inside a .scroll-x. Turning them into stacked cards on a phone
   sounds kind and loses the column headings, which is what the row was for.
--------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
caption { text-align: left; padding: 0 0 10px; color: var(--text-2); font-size: 13px; }
thead th {
  text-align: left; padding: 11px 16px;
  background: var(--band); border-bottom: 1.5px solid var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum);
  white-space: nowrap;
}
thead th.right, td.right { text-align: right; }
tbody th { text-align: left; font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover > * { background: var(--tint-yellow); }
tfoot td, tfoot th { padding: 12px 16px; border-top: 1.5px solid var(--ink); font-weight: 700; }

/* Name over organisation, the shape most rows in this app want. */
.who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.who a, .who .primary-name { font-weight: 700; color: var(--ink); text-decoration-thickness: 2px; }
.who a:hover { color: var(--plum); }
.who .org { font-size: 12.5px; color: var(--muted); }

.dl { margin: 0; display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr); gap: 8px 16px; font-size: 14px; }
.dl dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); padding-top: 3px; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.dl dd.none { color: var(--muted); }

/* ---------------------------------------------------------------------------
   12. Forms
--------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum);
}
.field .hint { font-size: 12px; color: var(--muted); }

input[type='text'], input[type='search'], input[type='email'], input[type='number'], input[type='date'],
select, textarea {
  font-family: var(--body); font-size: 14.5px; color: var(--ink); background: var(--field);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; min-height: 44px; width: 100%; max-width: 100%;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
select { cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--teal-accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }

input[type='range'] { width: 100%; min-height: 44px; accent-color: var(--teal); }
input[type='checkbox'], input[type='radio'] { width: 18px; height: 18px; min-height: 0; accent-color: var(--teal); }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { margin-top: 2px; flex: none; }

/* Safety net: no white fields in the dark theme.
   Some views set their own form controls to a literal #FFFFFF, which in the dark theme is a white box holding
   near-white text - an unreadable control rather than a slightly-off one. The right fix is `var(--field)` in
   those files and this rule can go the day they all do it. The repeated :root is what it takes to outrank a
   two-class selector in a stylesheet that is appended to the document after this one. */
@media (prefers-color-scheme: dark) {
  :root:root:root input:not([type='checkbox']):not([type='radio']):not([type='range']),
  :root:root:root select,
  :root:root:root textarea { background-color: var(--field); }
}

.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px;
}
.filters .field { flex: 0 1 auto; }
.filters .field.grow { flex: 1 1 240px; }

.resultline { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }

/* ---------------------------------------------------------------------------
   13. Responsive

   The rail becomes a horizontal bar below 900px and still works: same links, same current marker, scrolls
   sideways inside itself rather than pushing the page around.
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* Static, not sticky. The banner above it is sticky and wraps to four lines on a phone, so a rail pinned to
     a fixed offset below it would either overlap the content or float in a gap. The navigation sits at the
     top of the page instead, which is where a phone user looks for it. */
  .rail {
    position: static;
    height: auto; border-right: 0; border-bottom: 1.5px solid var(--ink);
    flex-direction: row; align-items: center; gap: 14px;
    padding: 10px 16px; flex-wrap: nowrap;
  }
  .brand { flex: none; }
  .brand .sub { display: none; }
  .nav {
    flex-direction: row; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    padding: 2px; margin: -2px;
  }
  .navlink { white-space: nowrap; padding: 8px 13px; }
  .rail-foot { display: none; }
  .main { padding: 22px 18px 72px; }
}

/* Below this the brand and six links cannot share a line without the links being pushed off it, so the rail
   becomes two rows and the navigation gets the full width to scroll in. */
@media (max-width: 640px) {
  .rail { flex-direction: column; align-items: stretch; gap: 10px; }
  .brand .sub { display: inline-block; }
  .nav { width: 100%; }
}

@media (max-width: 520px) {
  body { font-size: 14px; }
  .main { padding: 18px 13px 64px; }
  .card, .panel { padding: 16px 15px; border-radius: 15px; }
  .mockbar { padding: 8px 13px; font-size: 12px; gap: 6px; }
  .rail { padding: 10px 13px; }
  .brand .name { font-size: 15px; }
  .brand .sub { margin-top: 5px; font-size: 10px; }
  .kpi .n, .kpi > strong { font-size: 28px; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .dl dd { margin-bottom: 10px; }
  thead th, tbody td, tbody th { padding: 10px 12px; }
}

/* ---------------------------------------------------------------------------
   14. Motion
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  button:hover, .btn:hover, .kpi:hover { transform: none; }
}