/* =====================================================================
   MAJESTY BOARD PACK STUDIO — APP DESIGN SYSTEM  ("Guided steps")
   One stylesheet for every screen. Printed pages live in print.css.

   WHO IT IS FOR: the CEO's assistant, who is not a computer person.
   Every screen must make it obvious what they are looking at, what state
   things are in, and what to press next.

   THE RULES THIS FILE ENFORCES
   - Numbers: LINING + TABULAR figures everywhere (same height, same width;
     an "8" never stands taller than a "0"). Set once on *, never undone.
     Fonts: IBM Plex Sans (text) + Source Serif 4 (headings, big figures).
     Georgia / Constantia / Corbel / Candara are banned.
   - Text: base 18px; nothing smaller than 15px (--fs-xs is the floor).
   - Click targets: 52px normal, 44px absolute minimum (.btn.sm).
   - ONE filled button per area = "press me" (.btn.primary). Everything
     else is outlined (.btn.secondary / .btn) or a link (.btn.quiet).
   - Status is always icon + word + colour, never colour alone.
   - Striped "still needed" fill so progress reads in greyscale and for
     colour-blind users.

   CONTENTS
     1  fonts                 12  page pictures, strips, stamps
     2  tokens                13  document cards
     3  base + typography     14  steps, wizard, progress
     4  layout shell + nav    15  BEFORE / AFTER compare
     5  page header           16  sticky bars (slim print bar, filter, decision)
     6  buttons               17  dialogs, full screen, viewer, busy
     7  status badges         18  toasts, empty states, help callouts
     8  cards                 19  tables
     9  grids + utilities     20  legacy classes (older screens)
    10  forms                 21  responsive (1920 / 1366 / 1024 / narrow)
    11  chips + search        22  print (app screens)
   ===================================================================== */

/* ---------------------------------------------------------------- 1 fonts
   SIL Open Font License — see static/fonts/README.txt. Variable fonts, latin subset, offline. */
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-VF-latin.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Italic-VF-latin.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/SourceSerif4-VF-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/SourceSerif4-Italic-VF-latin.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------- 2 tokens */
:root {
  /* Brand — Majesty Oil Mills (red + gold are accents: logo, rules, markers) */
  --mj-red: #C4302B;
  --mj-red-text: #A3241F;       /* red that passes 4.5:1 as text */
  --mj-red-deep: #8F1E1A;
  --mj-red-tint: #FBEDEA;
  --mj-gold: #D9B21F;
  --mj-gold-deep: #B48C0C;
  --mj-gold-text: #735600;      /* gold that passes 4.5:1 as text */
  --mj-gold-line: #E6CB63;
  --mj-gold-tint: #FAF3DA;

  /* Ink + warm paper */
  --ink: #16233A;               /* text; 14.9:1 on paper */
  --ink-2: #34425B;             /* secondary text; 9.6:1 */
  --ink-3: #535D70;             /* smallest grey allowed for text; 6.1:1 on paper */
  --paper: #F7F4EC;             /* app background */
  --paper-2: #EFEADF;           /* the "desk" behind page pictures, sunken areas */
  --paper-3: #E6DFCF;
  --surface: #FFFFFF;           /* cards, dialogs */
  --surface-2: #FBFAF6;         /* quiet band inside a card */
  --line: #E2DBCB;              /* warm hairline */
  --line-strong: #CFC6B2;
  --edge: #8A93A5;              /* control edges: 3:1 against white */

  /* Navigation (deep navy; the reverse logo is drawn for this colour) */
  --nav-bg: #16233A;
  --nav-bg-2: #1D2D49;          /* hover, month card */
  --nav-current: #26395C;
  --nav-line: #2E3F5E;
  --nav-text: #F5F2EA;
  --nav-sub: #C3CBDA;           /* 9:1 on the nav */

  /* The ONE action colour. Filled = "press me". A deeper, bluer navy than the
     nav so it never blends into it, with a Majesty-gold ledge underneath. */
  --action: #1F3A63;            /* 11.6:1 with white text */
  --action-hover: #172D4E;
  --action-press: #10213B;
  --action-tint: #E7ECF4;
  --action-line: #9DAECB;
  --action-ledge: var(--mj-gold-deep);
  --focus: #1F5FBF;             /* keyboard focus ring (gold on the navy nav) */

  /* Status: ALWAYS with an icon and a word */
  --ready-fg: #16633A;   --ready-bg: #E3F2E8;   --ready-line: #86C59C;   --ready-solid: #1A7A43;   /* 5.4:1 with white text (AFTER tag, Done) */
  --needed-fg: #874600;  --needed-bg: #FFF0D2;  --needed-line: #E9A23F;  --needed-solid: #D9822B;  --needed-stripe: #EDA75E;
  --kept-fg: #32485F;    --kept-bg: #EAEFF4;    --kept-line: #B3C1D1;    --kept-solid: #5D7590;
  --typed-fg: #634B00;   --typed-bg: #FBF4DA;   --typed-line: #E1C35A;   --typed-solid: #C99F12;
  --problem-fg: #9E1D18; --problem-bg: #FCE9E6; --problem-line: #EA958E; --problem-solid: #C4302B;
  --info-fg: #1D3F73;    --info-bg: #E8EEF8;    --info-line: #A9C0E4;

  /* Type */
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Source Serif 4", Cambria, "Segoe UI", serif;
  --numbers: lining-nums tabular-nums;
  --fs-xs: 15px;      /* the floor: captions, fine print */
  --fs-sm: 16px;      /* secondary text, small buttons */
  --fs-base: 18px;    /* body */
  --fs-md: 20px;      /* card titles, big button labels */
  --fs-lg: 24px;      /* section titles */
  --fs-xl: 30px;      /* sub-headings, big numbers */
  --fs-2xl: 38px;     /* page title */
  --fs-3xl: 52px;     /* hero numbers */
  --lh-tight: 1.2;
  --lh: 1.5;

  /* Space (4-pt grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  /* Shape + depth */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22, 35, 58, .06), 0 1px 1px rgba(22, 35, 58, .03);
  --shadow-2: 0 2px 6px rgba(22, 35, 58, .07), 0 12px 30px -10px rgba(22, 35, 58, .18);
  --shadow-3: 0 4px 10px rgba(22, 35, 58, .10), 0 30px 70px -20px rgba(22, 35, 58, .40);
  --shadow-page: 0 0 0 1px rgba(22, 35, 58, .10), 0 2px 3px rgba(22, 35, 58, .10), 0 10px 22px -10px rgba(22, 35, 58, .35);

  /* Targets + layout */
  --tap-sm: 44px; --tap: 52px; --tap-lg: 60px; --tap-xl: 72px;
  --nav-w: 288px;
  --main-pad-x: 40px;
  --main-pad-top: 32px;
  --content-max: 1440px;
  --slim-h: 76px;       /* height of the slim print bar */
  --stripes: repeating-linear-gradient(-45deg, var(--needed-solid) 0 8px, var(--needed-stripe) 8px 16px);

  /* legacy names used by older screens (inline styles in templates) */
  --muted: var(--ink-3); --line-2: #EFEADF; --bg: var(--paper); --card: var(--surface);
  --brand: var(--mj-red); --brand-2: var(--mj-red-deep); --gold: var(--mj-gold);
  --ok: var(--ready-fg); --ok-bg: var(--ready-bg); --warn: var(--needed-fg); --warn-bg: var(--needed-bg);
  --bad: var(--problem-fg); --bad-bg: var(--problem-bg); --blue: var(--action); --blue-bg: var(--action-tint);
  --radius: var(--r); --sans: var(--font-ui); --serif: var(--font-display);
}

/* ---------------------------------------------------------------- 3 base + typography */
*, *::before, *::after { box-sizing: border-box; }
/* Finance-friendly digits on EVERYTHING. !important so no `font:` shorthand can undo it. */
* { font-variant-numeric: lining-nums tabular-nums !important; }
html, body { margin: 0; min-height: 100%; }        /* min-height, NOT height:100% — keeps the sticky nav working */
body {
  font: 400 var(--fs-base)/var(--lh) var(--font-ui);
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); align-items: start; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
h1 { font-family: var(--font-display); font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; }
:where(a) { color: var(--action); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:where(a):hover { color: var(--action-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .9em; background: var(--paper-2); padding: 1px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
::selection { background: var(--mj-gold-line); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.serif { font-family: var(--font-display); }
.num { white-space: nowrap; }                                     /* keep "1,234,567" on one line */
.big-number { font: 600 var(--fs-3xl)/1 var(--font-display); letter-spacing: -.01em; }

/* Icons: <svg class="ico"><use href="#i-home"/></svg> — sprite lives in base.html, icon() in app.js */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
.ico.sm { width: 20px; height: 20px; vertical-align: -4px; }
.ico.lg { width: 28px; height: 28px; }
.ico.xl { width: 36px; height: 36px; }
.ico.xxl { width: 48px; height: 48px; stroke-width: 1.6; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 12px 18px; border-radius: var(--r); box-shadow: var(--shadow-2); }
.skip-link:focus { left: 8px; }

/* ---------------------------------------------------------------- 4 layout shell + navigation
   The nav is sticky + 100vh and scrolls on its own, so it NEVER scrolls away with the page. */
.nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--nav-bg); color: var(--nav-text);
  padding: var(--s4) var(--s3) var(--s4);
  scrollbar-width: thin; scrollbar-color: var(--nav-line) transparent;
  z-index: 30;
}
.nav :focus-visible { outline-color: var(--mj-gold); }
.nav-brand {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--nav-text);
  padding: var(--s2) var(--s2) var(--s4); margin-bottom: var(--s1); border-bottom: 1px solid var(--nav-line); border-radius: var(--r) var(--r) 0 0;
}
.nav-brand picture { display: block; }
.nav-logo { display: block; width: 156px; height: auto; }
.app-name { font: 600 var(--fs-md)/1.2 var(--font-display); letter-spacing: .01em; color: var(--nav-text); }
.app-name b { color: var(--mj-gold); font-weight: 600; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--nav-line); }
.nav-item {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: var(--s3);
  min-height: 58px; padding: 7px var(--s3); border-radius: var(--r);
  color: var(--nav-text); text-decoration: none;
}
.nav-item .ico { width: 26px; height: 26px; color: var(--mj-gold-line); }
.nav-item b { display: block; font-size: var(--fs-base); font-weight: 600; line-height: 1.25; }
.nav-item small { display: block; font-size: var(--fs-xs); color: var(--nav-sub); line-height: 1.3; margin-top: 1px; }
.nav-item .nav-short { display: none; }
.nav-item:hover { background: var(--nav-bg-2); color: #fff; }
.nav-item[aria-current="page"], .nav-item.is-parent { background: var(--nav-current); }
.nav-item[aria-current="page"]::before, .nav-item.is-parent::before {
  content: ""; position: absolute; left: calc(-1 * var(--s3)); top: 10px; bottom: 10px; width: 6px; border-radius: 0 4px 4px 0; background: var(--mj-gold);
}
.nav-item[aria-current="page"] .ico, .nav-item.is-parent .ico { color: var(--mj-gold); }
.nav-here {
  display: inline-block; margin: 2px 0; padding: 1px 9px; border-radius: var(--r-pill); vertical-align: 2px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; letter-spacing: .01em; white-space: nowrap;
  background: var(--mj-gold); color: var(--ink);
}
/* a sub-step under the current page, e.g. Home > "Swapping a document" */
.nav-sub {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 4px 52px; padding: 8px 12px; min-height: 44px;
  border-radius: var(--r); background: var(--nav-current); color: #fff; font-weight: 600; font-size: var(--fs-sm); line-height: 1.25;
}
.nav-sub::before { content: ""; position: absolute; left: -20px; top: -8px; width: 14px; height: 30px; border-left: 2px solid var(--nav-line); border-bottom: 2px solid var(--nav-line); border-radius: 0 0 0 8px; }
.nav-sub .nav-here { margin-left: 0; }
.nav-foot {   /* sticks to the bottom of the nav, so the month card never scrolls or gets pushed out of view */
  position: sticky; bottom: calc(-1 * var(--s4)); z-index: 2; margin-top: auto;
  margin-bottom: calc(-1 * var(--s4)); padding: var(--s3) 0 var(--s4);
  background: var(--nav-bg); box-shadow: 0 -14px 14px -10px var(--nav-bg);
}
.nav-month { background: var(--nav-bg-2); border: 1px solid var(--nav-line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; color: var(--nav-text); text-decoration: none; }
.nav-month small { font-size: var(--fs-xs); color: var(--nav-sub); }
.nav-month b { font: 600 var(--fs-md)/1.2 var(--font-display); color: #fff; }
.nav-month .progress { align-self: stretch; background: #0E1728; box-shadow: none; }
.nav-month .nm-short { display: none; }
.nav-month.is-offline { border-color: #C9867F; background: #3A2330; }
.nav-month.is-offline b { font: 600 var(--fs-base)/1.25 var(--font-ui); color: #fff; }
.nav-month.is-offline small { color: #F2D4CF; }

main { min-width: 0; padding: var(--main-pad-top) var(--main-pad-x) var(--s10); }   /* element selector on purpose: screens may override */
.wrap { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s7); }
.wrap.narrow { max-width: 960px; }
.wrap.tight { gap: var(--s5); }
.section { display: flex; flex-direction: column; gap: var(--s5); scroll-margin-top: calc(var(--slim-h) + var(--s4)); }
.section-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-xl); font-weight: 700; }
.section-head p { color: var(--ink-2); flex-basis: 100%; margin: 0; font-size: var(--fs-md); }

/* ---------------------------------------------------------------- 5 page header */
.page-head, .page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); flex-wrap: wrap; margin-bottom: var(--s6); }
.wrap > .page-head { margin-bottom: 0; }
.kicker { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mj-red-text); margin: 0 0 4px; }
.page-title, .page-h h1 { font: 600 var(--fs-2xl)/1.15 var(--font-display); letter-spacing: -.01em; margin: 0; }
.lede, .page-h p { font-size: var(--fs-md); color: var(--ink-2); margin: var(--s2) 0 0; max-width: 64ch; }
.page-actions, .actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-sm); font-weight: 600; margin-bottom: var(--s3); }

/* ---------------------------------------------------------------- 6 buttons
   .btn             outlined, neutral (the everyday button)
   .btn.primary     FILLED — the one thing to press in this area
   .btn.secondary   outlined in the action colour — the second choice
   .btn.quiet       looks like a link (also .btn.ghost)
   .btn.danger      removes something (red outline); .btn.danger.primary = filled red, only inside a confirm dialog
   sizes: .btn.sm (44px) · default (52px) · .btn.lg (60px) · .btn.xl (72px);  .btn.block = full width
   hyphen aliases (.btn-primary, .btn-lg …) work too. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 22px; border-radius: var(--r);
  font: 600 var(--fs-base)/1.2 var(--font-ui); text-align: center; text-decoration: none; white-space: nowrap;
  border: 2px solid var(--edge); background: var(--surface); color: var(--ink);
  cursor: pointer; user-select: none;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 24px; height: 24px; vertical-align: 0; }
.btn.primary, .btn-primary {
  background: var(--action); border-color: var(--action); color: #fff;
  box-shadow: 0 3px 0 var(--action-ledge);
}
.btn.primary:hover, .btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn.primary:active, .btn-primary:active { background: var(--action-press); box-shadow: 0 1px 0 var(--action-ledge); transform: translateY(2px); }
.btn.secondary, .btn-secondary { border-color: var(--action); color: var(--action); background: var(--surface); }
.btn.secondary:hover, .btn-secondary:hover { background: var(--action-tint); color: var(--action-hover); }
.btn.quiet, .btn.ghost, .btn-quiet {
  border-color: transparent; background: transparent; color: var(--action);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; padding: 0 12px;
}
.btn.quiet:hover, .btn.ghost:hover, .btn-quiet:hover { background: var(--action-tint); border-color: transparent; color: var(--action-hover); }
.btn.danger, .btn-danger { border-color: var(--problem-line); color: var(--problem-fg); background: var(--surface); }
.btn.danger:hover, .btn-danger:hover { background: var(--problem-bg); border-color: var(--problem-fg); color: var(--problem-fg); }
.btn.danger.primary { background: var(--problem-fg); border-color: var(--problem-fg); color: #fff; box-shadow: 0 3px 0 #5E100D; }
.btn.danger.primary:hover { background: #7E1511; border-color: #7E1511; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.sm, .btn-sm { min-height: var(--tap-sm); padding: 0 16px; font-size: var(--fs-sm); border-radius: 10px; gap: 8px; }
.btn.sm .ico, .btn-sm .ico { width: 20px; height: 20px; }
.btn.lg, .btn-lg { min-height: var(--tap-lg); padding: 0 28px; font-size: var(--fs-md); border-radius: 14px; }
.btn.xl, .btn-xl { min-height: var(--tap-xl); padding: 0 34px; font-size: 22px; border-radius: 16px; }
.btn.lg .ico, .btn.xl .ico, .btn-lg .ico, .btn-xl .ico { width: 28px; height: 28px; }
.btn.block, .btn-block { display: flex; width: 100%; }
.btn.icon-only { padding: 0; width: var(--tap); }
.btn.sm.icon-only { width: var(--tap-sm); }
.btn.stack { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 10px; padding-bottom: 10px; text-align: left; white-space: normal; }
.btn .sub { display: block; font-size: var(--fs-xs); font-weight: 400; opacity: .92; }
.btn.wrap-text { white-space: normal; text-align: left; line-height: 1.25; padding-top: 8px; padding-bottom: 8px; }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled,
.btn.btn.btn:is(:disabled, [aria-disabled="true"], .is-disabled),
.btn.btn.btn:is(:disabled, [aria-disabled="true"], .is-disabled):hover {   /* also buttons inside a disabled <fieldset> */
  background: var(--paper-2); border-color: var(--line-strong); color: var(--ink-3); box-shadow: none; cursor: not-allowed; transform: none; text-decoration: none;
}
.btn.is-busy { cursor: progress; }
.btn.is-busy::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------------------------------------------------------------- 7 status badges (icon + word + colour)
   <span class="status ready"><svg class="ico"><use href="#i-check-circle"/></svg>Ready</span>
   ready = this month's copy is in · needed = still has last month's copy · same = stays the same
   typed = figures typed in here · problem = no file / broken · now = doing now · wait = later · done */
.status {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 3px 14px 3px 10px;
  border-radius: var(--r-pill); border: 1.5px solid; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  color: var(--ink-2); background: var(--surface); border-color: var(--line-strong);
}
.status .ico { width: 20px; height: 20px; stroke-width: 2.4; vertical-align: 0; }
.status.lg { min-height: 42px; font-size: var(--fs-base); padding: 4px 18px 4px 12px; }
.status.lg .ico { width: 24px; height: 24px; }
.status.ready, .status-ready     { color: var(--ready-fg);   background: var(--ready-bg);   border-color: var(--ready-line); }
.status.needed, .status-needed   { color: var(--needed-fg);  background: var(--needed-bg);  border-color: var(--needed-line); }
.status.same, .status.kept, .status-kept { color: var(--kept-fg); background: var(--kept-bg); border-color: var(--kept-line); }
.status.typed, .status-typed     { color: var(--typed-fg);   background: var(--typed-bg);   border-color: var(--typed-line); }
.status.problem, .status-problem { color: var(--problem-fg); background: var(--problem-bg); border-color: var(--problem-line); }
.status.info                     { color: var(--info-fg);    background: var(--info-bg);    border-color: var(--info-line); }
.status.now, .status-now         { color: #fff; background: var(--action); border-color: var(--action); }
.status.wait, .status-wait       { color: var(--ink-2); background: var(--surface); border-color: var(--line-strong); }
.status.done, .status-done       { color: #fff; background: var(--ready-solid); border-color: var(--ready-solid); }

/* ---------------------------------------------------------------- 8 cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card.pad, .card-pad { padding: var(--s6); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s4) var(--s6); border-bottom: 1px solid var(--line); }
.card-h h2, .card-h h3 { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.card-h .ico { color: var(--ink-2); }
.card-b { padding: var(--s5) var(--s6); }
.card-f { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding: var(--s4) var(--s6); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.card.is-now { border: 3px solid var(--action); box-shadow: 0 0 0 5px var(--action-tint), var(--shadow-2); }
.card.is-needed { border: 2px solid var(--needed-line); box-shadow: 0 0 0 3px var(--needed-bg), var(--shadow-1); }
.card.is-ready { border: 2px solid var(--ready-line); }
.card.is-problem { border: 2px solid var(--problem-line); }
.card.flat { box-shadow: none; }
.card.sunken { background: var(--paper-2); border-color: transparent; box-shadow: none; }

/* "Do this next": the single most important card on a screen (one per screen) */
.next-up { background: var(--surface); border: 3px solid var(--action); border-radius: var(--r-xl); box-shadow: 0 0 0 6px var(--action-tint), var(--shadow-2); overflow: hidden; }
.next-flag { display: flex; align-items: center; gap: 10px; background: var(--action); color: #fff; font-weight: 700; font-size: var(--fs-md); padding: 10px var(--s6); }
.next-flag .count { margin-left: auto; font-weight: 600; font-size: var(--fs-sm); background: rgba(255, 255, 255, .16); border-radius: var(--r-pill); padding: 3px 14px; }
.next-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s7); padding: var(--s6); align-items: start; }
.next-body { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; min-width: 0; }
.next-title { font: 600 var(--fs-xl)/1.2 var(--font-display); }
.next-text { font-size: var(--fs-md); color: var(--ink-2); max-width: 52ch; }

/* ---------------------------------------------------------------- 9 grids + utilities */
.grid-2 { display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--s5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(var(--min, 320px), 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack.sm { gap: var(--s2); } .stack.lg { gap: var(--s7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.fine { font-size: var(--fs-xs); }
.lead { font-size: var(--fs-md); }
.strong { font-weight: 600; }
.center { text-align: center; }
.right, .r { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden, [hidden] { display: none !important; }
.sr-only, .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s2); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: var(--s4); }
.text-ready { color: var(--ready-fg); } .text-needed { color: var(--needed-fg); } .text-problem { color: var(--problem-fg); }
.divider-line { height: 1px; background: var(--line); border: 0; margin: 0; }
.meta-list, .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: var(--fs-base); }
.meta-list dt, .facts dt { color: var(--ink-3); }
.meta-list dd, .facts dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 10 forms
   <div class="field"><label for=x>Label</label><input class="input" id=x><p class="hint">Plain help</p></div> */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { font-weight: 600; font-size: var(--fs-base); }
.field .hint, .hint { font-size: var(--fs-sm); color: var(--ink-3); margin: 0; }
.field .error { font-size: var(--fs-sm); color: var(--problem-fg); font-weight: 600; }
.input, .select, .textarea, .in {
  width: 100%; min-height: var(--tap); padding: 0 16px;
  border: 2px solid var(--edge); border-radius: var(--r); background: var(--surface); color: var(--ink);
  font-size: var(--fs-base); line-height: 1.3;
}
.textarea, textarea.in { padding: 12px 16px; min-height: 120px; resize: vertical; line-height: var(--lh); }
.input:hover, .select:hover, .in:hover { border-color: var(--ink-2); }
.input:focus, .select:focus, .textarea:focus, .in:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 4px var(--action-tint); }
.input[aria-invalid="true"] { border-color: var(--problem-fg); }
.select, select.in {
  appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316233A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 22px;
}
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--action); flex: none; cursor: pointer; margin: 0; }
.check { display: flex; gap: 12px; align-items: center; min-height: var(--tap-sm); margin: var(--s1) 0; cursor: pointer; font-size: var(--fs-base); }
.check small { display: block; color: var(--ink-3); font-size: var(--fs-sm); }
/* big choice rows (radio buttons you can't miss). <label class="choice"><input type=radio name=m><span>…</span></label> */
.choices { display: flex; flex-direction: column; gap: var(--s2); }
.choices.row-wise { flex-direction: row; flex-wrap: wrap; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap-lg); padding: 10px 20px;
  border: 2px solid var(--edge); border-radius: var(--r); background: var(--surface); font-weight: 600; cursor: pointer;
}
.choice > span::before { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--edge); background: #fff; flex: none; }
.choice > span small { font-weight: 400; color: var(--ink-3); font-size: var(--fs-sm); margin-left: auto; }
.choice:hover > span { border-color: var(--ink-2); }
.choice input:checked + span { border-color: var(--action); background: var(--action-tint); box-shadow: 0 0 0 3px var(--action-tint); }
.choice input:checked + span::before { border-color: var(--action); background: var(--action); box-shadow: inset 0 0 0 4px #fff; }
.choice input[type="checkbox"] + span::before { border-radius: 6px; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); text-align: center;
  min-height: 180px; padding: var(--s7) var(--s6); border: 3px dashed var(--edge); border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-md); cursor: pointer;
}
.dropzone .ico { width: 44px; height: 44px; color: var(--action); stroke-width: 1.8; }
.dropzone b { color: var(--ink); }
.dropzone:hover { border-color: var(--action); background: var(--action-tint); }
.dropzone.drop, .dropzone.is-over { border-color: var(--action); border-style: solid; background: var(--action-tint); color: var(--action); box-shadow: 0 0 0 5px var(--action-tint); }

/* ---------------------------------------------------------------- 11 chips + search */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-sm); padding: 0 16px;
  border-radius: var(--r-pill); border: 2px solid var(--edge); background: var(--surface);
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; text-decoration: none;
  /* a long document name wraps inside its chip instead of pushing the whole page sideways */
  max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px;
}
.chip:hover { border-color: var(--ink-2); }
.fold-note > span, .doc-title, .fold-name b { min-width: 0; overflow-wrap: anywhere; }   /* long names never widen the page */
.chip[aria-pressed="true"], .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .n { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font-size: var(--fs-xs); }
.chip[aria-pressed="true"] .n, .chip.on .n { background: rgba(255, 255, 255, .2); color: #fff; }
.chip.needed { border-color: var(--needed-line); background: var(--needed-bg); color: var(--needed-fg); }   /* "still needed" jump chips */
.chip.needed:hover { border-color: var(--needed-fg); }
.chip .ico { width: 20px; height: 20px; vertical-align: 0; }
.search { position: relative; display: flex; align-items: center; min-width: 260px; }
.search .ico { position: absolute; left: 14px; color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; min-height: var(--tap-sm); padding: 0 16px 0 46px; border: 2px solid var(--edge); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-base); }
.search input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 4px var(--action-tint); }

/* ---------------------------------------------------------------- 12 page pictures, strips, stamps
   A .page-pic is a white "sheet of paper" with a soft shadow; put it on a .desk.
   All page images come from /thumb?key=…&p=N&w=W (see thumbUrl / pageStrip in app.js). */
.desk { position: relative; display: grid; place-items: center; background: var(--paper-2); border-radius: var(--r); padding: 16px; }
.page-pic {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; border-radius: 3px;
  box-shadow: var(--shadow-page); overflow: hidden; cursor: zoom-in; aspect-ratio: 210 / 297;
}
.page-pic.land { aspect-ratio: 297 / 210; }
.page-pic.auto { aspect-ratio: auto; }
.page-pic img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center; background: #fff; }
.page-pic:hover { box-shadow: 0 0 0 3px var(--action), var(--shadow-page); }
.page-pic:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.page-pic.stack { overflow: visible; }
.page-pic.stack::before, .page-pic.stack::after { content: ""; position: absolute; inset: 0; background: #fff; border-radius: 3px; box-shadow: var(--shadow-page); z-index: 0; }
.page-pic.stack::before { transform: translate(8px, 8px); }
.page-pic.stack::after { transform: translate(4px, 4px); }
.page-pic.stack img { position: relative; z-index: 1; border-radius: 3px; }
.page-pic.is-blank::after { content: "Blank page"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-sm); }
.page-pic.is-loading { background: linear-gradient(100deg, #fff 30%, #F3F0E8 50%, #fff 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.thumb-count {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  background: rgba(22, 35, 58, .88); color: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
  padding: 2px 10px; border-radius: var(--r-pill);
}
/* rubber stamp over a stale picture — small, near the bottom edge, so the page stays recognisable */
.stamp {
  position: absolute; left: 50%; bottom: 14%; z-index: 4; transform: translateX(-50%) rotate(-5deg);
  display: flex; flex-direction: column; align-items: center; padding: 3px 12px 4px;
  border: 2.5px solid var(--needed-fg); border-radius: 6px; background: rgba(255, 248, 235, .94);
  color: var(--needed-fg); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(135, 70, 0, .18);
}
.stamp small { font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; text-transform: none; }   /* same floor size; lighter + lower-case so the month still leads */
.stamp.problem { border-color: var(--problem-fg); color: var(--problem-fg); background: rgba(252, 233, 230, .95); }

/* strip of page thumbnails: pageStrip() in app.js. --w sets the picture width. */
.page-strip { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s3); align-items: flex-start; }
.page-strip.scroll { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px 14px; scroll-snap-type: x proximity; }
.strip-page { margin: 0; flex: none; width: var(--w, 132px); display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-snap-align: start; }
.strip-page figcaption { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.strip-more {
  flex: none; width: var(--w, 132px); aspect-ratio: 210 / 297; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--edge); border-radius: 4px; color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); text-align: center; padding: 8px;
  background: transparent; cursor: pointer;
}
.strip-more b { font: 600 var(--fs-lg)/1 var(--font-display); color: var(--ink); }
.strip-more:hover { border-color: var(--action); color: var(--action); }
/* tiny pages for folded sections */
.mini-pages { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; }
.mini-page { width: 34px; height: 48px; flex: none; background: #fff; border-radius: 2px; box-shadow: var(--shadow-page); overflow: hidden; }
.mini-page.land { width: 48px; height: 34px; }
.mini-page img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mini-page.is-needed { outline: 3px solid var(--needed-solid); outline-offset: 1px; }
.mini-more { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); white-space: nowrap; padding-left: 4px; }

/* ---------------------------------------------------------------- 13 document cards
   <article class="doc-card is-needed">
     <button class="doc-thumb desk" data-open-viewer …><span class="page-pic stack"><img …></span>
       <span class="stamp">August copy<small>last month</small></span><span class="thumb-count">3 pages</span></button>
     <div class="doc-body"><p class="doc-group">…</p><h3 class="doc-title">…</h3><span class="status needed">…</span>
       <p class="doc-facts">In the pack now: <b>August 2026 copy</b></p><div class="doc-actions">…</div></div>
   </article>
   Only the ONE "do this next" document gets a filled button; other still-needed cards use .btn.secondary. */
.doc-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
.doc-grid.tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.doc-card {
  position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s5);
  padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  scroll-margin-top: calc(var(--slim-h) + 80px);
}
.doc-card.is-needed { border: 2px solid var(--needed-line); box-shadow: 0 0 0 3px var(--needed-bg), var(--shadow-1); }
.doc-card.is-problem { border: 2px solid var(--problem-line); }
.doc-card.is-now { border: 3px solid var(--action); box-shadow: 0 0 0 5px var(--action-tint), var(--shadow-2); }
.doc-card.is-flash { animation: flash 1.6s ease-out 1; }
.doc-thumb { position: relative; align-self: start; display: grid; place-items: center; padding: 16px 20px 20px 14px; border: 0; background: var(--paper-2); border-radius: var(--r); cursor: zoom-in; min-height: 200px; }
.doc-thumb .page-pic { width: 100%; }
.doc-thumb:hover .page-pic { box-shadow: 0 0 0 3px var(--action), var(--shadow-page); }
.doc-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: flex-start; }
.doc-group { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.doc-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; margin: 0; }
.doc-facts { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; margin: 0; }
.doc-facts b { color: var(--ink); }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; width: 100%; }
.doc-actions .btn { min-height: 48px; padding: 0 16px; font-size: var(--fs-sm); }
/* tile variant: picture on top */
.doc-card.tile { grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; }
.doc-card.tile .doc-thumb { border-radius: 0; height: 250px; padding: 16px; }
.doc-card.tile .doc-thumb .page-pic { height: 100%; width: auto; }
.doc-card.tile .doc-thumb .page-pic.land { height: auto; width: 88%; }
.doc-card.tile .doc-body { padding: var(--s4); }

/* folding section of documents: <details class="fold" open><summary>…</summary><div class="fold-body">…</div></details> */
.fold { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.fold.has-needed { border-left: 6px solid var(--needed-solid); }
.fold > summary {
  list-style: none; display: grid; grid-template-columns: auto minmax(180px, 1.2fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4);
  padding: 14px var(--s5); min-height: 84px; cursor: pointer; border-radius: var(--r-lg);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--surface-2); }
.fold[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.fold-num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-weight: 700; }
.fold-name b { display: block; font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.fold-name small { color: var(--ink-3); font-size: var(--fs-sm); }
.fold-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-sm); padding: 0 16px; border: 2px solid var(--edge); border-radius: var(--r); font-weight: 600; font-size: var(--fs-sm); background: var(--surface); }
.fold-toggle .ico { transition: transform .15s; }
.fold[open] .fold-toggle .ico { transform: rotate(180deg); }
.fold .when-open, .fold[open] .when-closed { display: none; }
.fold[open] .when-open { display: inline; }
.fold[open] > summary .mini-pages { visibility: hidden; }
.fold-body { padding: var(--s5); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ---------------------------------------------------------------- 14 steps, wizard, progress
   The 3-step routine: <ol class="steps"><li class="step is-now">…</li>…</ol>
   .step-when says WHEN in words: "Doing now" / "Step 2 — after step 1" / "Step 3 — at the end". */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.step { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border-radius: var(--r-lg); background: var(--surface); border: 2px solid var(--line); min-width: 0; }
.step-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 700 26px/1 var(--font-ui); background: var(--surface); color: var(--ink-2); border: 2.5px solid var(--edge);
}
.step h3 { font-size: var(--fs-md); font-weight: 700; }
.step p { color: var(--ink-2); margin: 0; }
.step-when { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); background: var(--surface); }
.step-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: var(--s2); }
.step-actions .btn { white-space: normal; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
.step.is-now { border-color: var(--action); box-shadow: 0 0 0 4px var(--action-tint), var(--shadow-2); }
.step.is-now .step-num { background: var(--mj-gold); border-color: var(--mj-gold); color: var(--ink); }
.step.is-now .step-when { background: var(--action); border-color: var(--action); color: #fff; }
.step.is-done .step-num { background: var(--ready-solid); border-color: var(--ready-solid); color: #fff; }
.step.is-done .step-when { background: var(--ready-bg); border-color: var(--ready-line); color: var(--ready-fg); }
.step + .step::before { content: ""; position: absolute; left: -15px; top: 42px; width: 12px; height: 12px; border-top: 2.5px solid var(--edge); border-right: 2.5px solid var(--edge); transform: rotate(45deg); }

/* in-task progress: <ol class="wizard"><li class="done"><span class="dot">✓</span>Choose the new file</li><li class="now">…</li><li>…</li></ol> */
.wizard { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.wizard li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-3); }
.wizard li + li::before { content: ""; width: 44px; height: 3px; border-radius: 2px; background: var(--line-strong); margin-right: 2px; }
.wizard li.done + li::before { background: var(--ready-solid); }
.wizard .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--edge); background: var(--surface); font-size: 17px; color: var(--ink-2); flex: none; }
.wizard .dot .ico { width: 20px; height: 20px; stroke-width: 3; vertical-align: 0; }
.wizard li.done { color: var(--ready-fg); }
.wizard li.done .dot { background: var(--ready-solid); border-color: var(--ready-solid); color: #fff; }
.wizard li.now { color: var(--ink); }
.wizard li.now .dot { background: var(--mj-gold); border-color: var(--mj-gold); color: var(--ink); }

/* progress meter: <div class="progress xl"><span class="p-ready" style="width:86%"></span><span class="p-needed" style="width:14%"></span></div>
   The "still needed" part is striped so it reads without colour. <div class="progress"><i></i></div> = "working…" */
.progress { position: relative; display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--paper-3); box-shadow: inset 0 0 0 1px rgba(22, 35, 58, .08); }
.progress.mini { height: 10px; }
.progress.lg { height: 22px; }
.progress.xl { height: 30px; }
.progress > span { display: block; height: 100%; flex: none; transition: width .4s ease; }
.progress .p-ready { background: var(--ready-solid); }
.progress .p-needed { background: var(--stripes); }
.progress .p-typed { background: var(--typed-solid); }
.progress .p-same { background: var(--kept-solid); }
.progress .p-action { background: var(--action); }
.progress > i { display: block; height: 100%; width: 40%; background: var(--action); border-radius: var(--r-pill); animation: slide 1.1s infinite ease-in-out; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-base); margin: 0; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.swatch.ready { background: var(--ready-solid); }
.swatch.needed { background: repeating-linear-gradient(-45deg, var(--needed-solid) 0 4px, var(--needed-stripe) 4px 8px); }
.swatch.same { background: var(--kept-solid); }
.swatch.typed { background: var(--typed-solid); }
.count-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xl); font-weight: 600; line-height: 1.15; }
.count-big .n { font: 600 var(--fs-3xl)/1 var(--font-display); }

/* ---------------------------------------------------------------- 15 BEFORE / AFTER compare
   <div class="compare">
     <section class="compare-side before"><header class="compare-h"><span class="side-tag">Before</span><div><h2>In the pack now</h2><p>This copy comes out of the pack</p></div></header>
       <div class="compare-pages">…page pictures…</div><p class="compare-safe">…Kept safe under Older copies — it is not deleted.</p><dl class="facts">…</dl></section>
     <div class="compare-arrow"><span><svg class="ico"><use href="#i-arrow-right"/></svg></span><b>replaced by</b></div>
     <section class="compare-side after">…</section>
   </div>
   Row-by-row matching (same scale): .compare-rows > .compare-row (before page · arrow · after page); .page-missing = dashed "No page 2 in the old copy". */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); align-items: stretch; }
.compare-side { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); }
.compare-side.after { border: 3px solid var(--ready-solid); box-shadow: 0 0 0 5px var(--ready-bg), var(--shadow-2); }
.compare-h { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.compare-side.after .compare-h { background: var(--ready-bg); border-bottom-color: var(--ready-line); }
.compare-h h2 { font-size: var(--fs-lg); font-weight: 700; }
.compare-h p { color: var(--ink-2); margin: 2px 0 0; }
.side-tag { flex: none; font-size: var(--fs-base); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--r-sm); background: var(--ink-2); color: #fff; }
.compare-side.after .side-tag { background: var(--ready-solid); }
.compare-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s4); padding: var(--s4) var(--s5); background: var(--paper-2); flex: 1; align-content: start; }
.compare-pages figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.compare-pages figcaption { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.compare-side.before .page-pic img { filter: saturate(.85); }
.compare-safe { display: flex; align-items: center; gap: 10px; margin: 0; padding: var(--s3) var(--s5); background: var(--ready-bg); color: var(--ready-fg); font-weight: 600; border-top: 1px solid var(--ready-line); }
.compare-side .facts { padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); }
.compare-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-2); padding: 0 6px; }
.compare-arrow span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.compare-arrow b { font-size: var(--fs-xs); text-align: center; line-height: 1.2; }
.compare-rows { display: flex; flex-direction: column; gap: var(--s4); }
.compare-rowhead, .compare-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.compare-rowhead { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: var(--s2) 0; font-weight: 700; }
.compare-row > figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.compare-row > figure .page-pic { width: min(100%, var(--pw, 360px)); }
.compare-row .compare-arrow span { width: 44px; height: 44px; }
.page-missing {
  width: min(100%, var(--pw, 360px)); aspect-ratio: 210 / 297; margin: 0 auto; display: grid; place-items: center; text-align: center; padding: var(--s4);
  border: 3px dashed var(--edge); border-radius: 4px; color: var(--ink-2); font-weight: 600; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(22, 35, 58, .03) 14px 28px);
}
.page-change { font-weight: 600; color: var(--ink-2); }          /* "2 pages (was 1)" */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.checks li { display: grid; grid-template-columns: 84px 1fr; gap: var(--s3); align-items: start; }
.checks b { display: block; }
.checks small { display: block; color: var(--ink-2); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- 16 sticky bars
   .slim-bar   — fixed to the top of the content; slides in once the big card scrolls away (revealOnScroll in app.js)
   .filter-bar — sticks under it: "Show: Everything / Still needed / …" chips + "Find a document"
   .decision-bar — sticks to the bottom on confirm screens so the answer is always in reach */
.slim-bar {
  position: fixed; top: 0; left: var(--nav-w); right: 0; z-index: 25; height: var(--slim-h);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: nowrap; padding: 0 var(--main-pad-x);
  background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px -12px rgba(22, 35, 58, .3);
  transform: translateY(-110%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
}
.slim-bar.show { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
.slim-bar .sb-month { font: 600 var(--fs-md)/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.slim-bar .sb-count { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 600; white-space: nowrap; flex: none; }
.slim-bar .progress { width: 120px; }
.slim-bar .btn-row { margin-left: auto; flex-wrap: nowrap; flex: none; }
.slim-bar .btn { min-height: 48px; padding: 0 18px; font-size: 17px; }
.filter-bar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--s2)); padding: var(--s3) var(--s2); background: var(--paper); border-bottom: 1px solid var(--line);
  transition: top .22s ease;
}
.filter-bar .fb-label { font-weight: 600; color: var(--ink-2); }
.filter-bar .search { margin-left: auto; }
body.slim-on .filter-bar { top: var(--slim-h); }
.decision-bar {
  position: sticky; bottom: 0; z-index: 20;
  margin: var(--s6) calc(-1 * var(--main-pad-x)) calc(-1 * var(--s10)); padding: var(--s4) var(--main-pad-x) var(--s5);
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 26px -12px rgba(22, 35, 58, .25);
}
.decision-inner { max-width: var(--content-max); margin: 0 auto; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
/* Put .decision-bar as the LAST CHILD OF <main> (after .wrap) so it spans the full width.
   <div class="decision-inner"><div class="decision-summary"><span class="page-pic">…</span><div>Put <b>…</b> into the pack as …
     <p class="decision-note">…Nothing has changed yet.</p></div></div> [Yes button] [Cancel — keep the … copy]</div> */
.decision-summary { display: flex; align-items: center; gap: var(--s3); flex: 1 1 420px; min-width: 0; font-size: var(--fs-base); line-height: 1.35; }
.decision-summary .page-pic { width: 44px; flex: none; cursor: default; }
.decision-summary b { font-weight: 700; overflow-wrap: anywhere; }
.decision-note { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); margin: 4px 0 0; }
.decision-inner > .decision-note { flex-basis: 100%; margin: 0; }
.decision-bar .btn.xl { min-height: 64px; padding: 0 26px; font-size: var(--fs-md); }
.decision-bar .btn.lg { min-height: 64px; padding: 0 22px; }

/* ---------------------------------------------------------------- 17 dialogs, full screen, viewer, busy
   modal()/confirmDialog()/fullScreen()/openViewer()/busy() in app.js build these. */
.modal-bg, .dialog-bg {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--s6);
  background: rgba(16, 26, 44, .58); animation: fade-in .15s ease-out;
}
.modal, .dialog {
  display: flex; flex-direction: column; width: min(720px, 100%); max-height: calc(100vh - 48px);
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; animation: pop-in .16s ease-out;
}
.modal.wide, .dialog.wide { width: min(1100px, 100%); }
.modal.narrow, .dialog.narrow { width: min(560px, 100%); }
.modal-h, .dialog-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.modal-h h2, .modal-h h3, .dialog-h h2 { font: 600 var(--fs-lg)/1.2 var(--font-display); margin: 0; flex: 1; min-width: 0; }
.modal-h .ico-badge { flex: none; }
.modal-b, .dialog-b { padding: var(--s6); overflow: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s4); }
.modal-b > p { font-size: var(--fs-md); color: var(--ink-2); margin: 0; }
.modal-f, .dialog-f { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding: var(--s4) var(--s6) var(--s5); background: var(--surface-2); border-top: 1px solid var(--line); flex: none; }
.modal-f:empty { display: none; }
.modal-f .note { color: var(--ink-2); font-size: var(--fs-sm); margin-left: auto; display: flex; align-items: center; gap: 8px; }
.modal-close { margin-left: auto; }
.ico-badge { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--action-tint); color: var(--action); }
.ico-badge.danger { background: var(--problem-bg); color: var(--problem-fg); }
.ico-badge.ready { background: var(--ready-bg); color: var(--ready-fg); }
.ico-badge.needed { background: var(--needed-bg); color: var(--needed-fg); }
/* full screen dialog (big confirmations, previews) */
.modal-bg.full { padding: 0; }
.modal.full { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.modal.full .modal-b { padding: var(--s6) var(--s8); }
.modal.full .modal-f { padding: var(--s4) var(--s8) var(--s5); }
body.has-modal { overflow: hidden; }

/* big page viewer */
.viewer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #4A4F59; animation: fade-in .15s ease-out; }
.viewer-bar { display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; padding: 10px var(--s6); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 1; }
.viewer-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.viewer-title small { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.viewer-title b { font: 600 var(--fs-md)/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-count { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; padding: 0 var(--s2); }
.viewer-count b { font-size: inherit; font-weight: 700; }   /* same size as "Page … of …": no digit stands taller */
.viewer-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.viewer-zoom { display: inline-flex; gap: var(--s2); }
.viewer-tools .btn.sm { padding: 0 13px; gap: 7px; }   /* keeps the whole bar on one line on a 1366px laptop */
.viewer-pages { flex: 1; overflow: auto; padding: var(--s7) var(--s6) var(--s10); display: flex; flex-direction: column; align-items: center; gap: var(--s7); scroll-behavior: smooth; }
.viewer-page { margin: 0; width: min(100%, var(--vw, 900px)); display: flex; flex-direction: column; align-items: center; gap: 10px; scroll-margin-top: var(--s5); }
.viewer-page .page-pic { cursor: default; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -12px rgba(0, 0, 0, .5); }
.viewer-page .page-pic:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -12px rgba(0, 0, 0, .5); }
.viewer-page figcaption { color: #F1EEE7; font-size: var(--fs-sm); font-weight: 600; }
.viewer-page.is-land { width: min(100%, calc(var(--vw, 900px) * 1.41)); }
/* busy overlay */
.busy-bg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s6); background: rgba(247, 244, 236, .82); backdrop-filter: blur(2px); animation: fade-in .2s ease-out; }
.busy-card { display: flex; align-items: center; gap: var(--s5); max-width: 560px; padding: var(--s6) var(--s7); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); border: 1px solid var(--line); }
.busy-card b { display: block; font-size: var(--fs-md); }
.busy-card p { margin: 4px 0 0; color: var(--ink-2); }
.busy-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.busy-bg.has-actions .busy-card { align-items: flex-start; max-width: 680px; }
.spinner { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 5px solid var(--action-tint); border-top-color: var(--action); animation: spin .9s linear infinite; }
.spinner.sm { width: 24px; height: 24px; border-width: 3px; }

/* ---------------------------------------------------------------- 18 toasts, empty states, help callouts */
#toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; pointer-events: none; }
#toast > div {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; max-width: 480px; padding: 14px 18px 14px 16px;
  background: var(--ink); color: #fff; border-radius: var(--r); box-shadow: var(--shadow-3); font-size: var(--fs-base); line-height: 1.4;
  border-left: 6px solid var(--mj-gold); animation: toast-in .2s ease-out;
}
#toast > div .ico { color: var(--mj-gold); margin-top: 1px; }
#toast > div.ok { border-left-color: #5FC08A; }
#toast > div.ok .ico { color: #7BD3A0; }
#toast > div.err { background: var(--problem-fg); border-left-color: #FFB4AD; }
#toast > div.err .ico { color: #fff; }
#toast > div button { margin-left: 8px; background: none; border: 0; color: #fff; text-decoration: underline; font-weight: 600; cursor: pointer; min-height: 32px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; padding: var(--s9) var(--s6); color: var(--ink-2); font-size: var(--fs-md); }
.empty-state .ico-badge { width: 72px; height: 72px; background: var(--paper-2); color: var(--ink-2); }
.empty-state .ico-badge .ico { width: 36px; height: 36px; }
.empty-state h3 { font: 600 var(--fs-lg)/1.2 var(--font-display); color: var(--ink); }
.empty-state p { max-width: 52ch; margin: 0; }
/* callouts: <div class="callout safe"><svg class="ico">…</svg><div><b>You can always switch back</b><p>…</p></div></div> */
.callout { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4) var(--s5); border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.callout > .ico { width: 30px; height: 30px; margin-top: 1px; }
.callout > div > b:first-child { display: block; font-size: var(--fs-md); margin-bottom: 2px; }
.callout p { margin: 4px 0 0; color: var(--ink); }
.callout.info  { background: var(--info-bg);    border-color: var(--info-line); }    .callout.info > .ico  { color: var(--info-fg); }
.callout.safe  { background: var(--ready-bg);   border-color: var(--ready-line); }   .callout.safe > .ico  { color: var(--ready-fg); }
.callout.warn  { background: var(--needed-bg);  border-color: var(--needed-line); }  .callout.warn > .ico  { color: var(--needed-fg); }
.callout.problem { background: var(--problem-bg); border-color: var(--problem-line); } .callout.problem > .ico { color: var(--problem-fg); }
.callout.big { padding: var(--s5) var(--s6); }
/* errorCallout() in app.js: plain words, Try again, and the technical message folded away */
.err-callout .err-actions { margin: var(--s3) 0 0; }
.err-callout .err-tech { margin-top: var(--s3); }
.err-callout .err-tech > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); min-height: var(--tap-sm); display: flex; align-items: center; gap: 6px; }
.err-callout .err-tech > summary::-webkit-details-marker { display: none; }
.err-callout .err-tech > summary::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid currentColor; border-right: 0; transition: transform .15s; }
.err-callout .err-tech[open] > summary::before { transform: rotate(90deg); }
.err-callout .err-tech pre { margin: var(--s2) 0 0; padding: var(--s3); max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.45 Consolas, "Cascadia Mono", monospace; background: var(--surface); border: 1px solid var(--problem-line); border-radius: var(--r-sm); color: var(--ink); }
.tip { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
.tip .ico { width: 20px; height: 20px; color: var(--action); margin-top: 2px; }
/* "How does this work?" — <details class="help"><summary>How does this work?</summary><div>…</div></details> */
details.help { border: 1.5px solid var(--info-line); border-radius: var(--r); background: var(--surface); }
details.help > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: var(--tap-sm); padding: 8px 16px; cursor: pointer; font-weight: 600; color: var(--info-fg); }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary::before { content: "?"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--info-fg); color: #fff; font-weight: 700; font-size: 16px; }
details.help[open] > summary { border-bottom: 1px solid var(--info-line); }
details.help > div { padding: var(--s4); }
.how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); counter-reset: how; }
.how-list li { display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); color: var(--ink-2); counter-increment: how; }
.how-list li::before { content: counter(how); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--edge); font-weight: 700; color: var(--ink); }
.how-list li b { display: block; color: var(--ink); }

/* ---------------------------------------------------------------- 19 tables (screens) */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th { text-align: left; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--surface-2); white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table .r, .table .num { text-align: right; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tr.is-current td { background: var(--ready-bg); }
.table tr.is-current td:first-child { box-shadow: inset 5px 0 0 var(--ready-solid); }
.table .neg { color: var(--ink); }
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }

/* ---------------------------------------------------------------- 20 legacy classes (older screens keep working until rebuilt) */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--ink-2); background: var(--surface); }
.badge.current { color: var(--ready-fg); background: var(--ready-bg); border-color: var(--ready-line); }
.badge.stale { color: var(--needed-fg); background: var(--needed-bg); border-color: var(--needed-line); }
.badge.ok { color: var(--kept-fg); background: var(--kept-bg); border-color: var(--kept-line); }
.badge.empty { color: var(--problem-fg); background: var(--problem-bg); border-color: var(--problem-line); }
.badge.designed { color: var(--typed-fg); background: var(--typed-bg); border-color: var(--typed-line); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4) var(--s5); border-top: 4px solid var(--mj-gold); box-shadow: var(--shadow-1); }
.stat b { display: block; font: 600 var(--fs-xl)/1.1 var(--font-display); }
.stat span { color: var(--ink-3); font-size: var(--fs-sm); }
.stat.alert { border-top-color: var(--needed-solid); }
.group { margin-bottom: var(--s5); }
.group-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 4px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mj-red-text); }
.group-h .ln { flex: 1; height: 1px; background: var(--line); }
.sec { display: grid; grid-template-columns: 28px 80px minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); margin-bottom: var(--s2); box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; }
.sec.drop { border-color: var(--action); box-shadow: 0 0 0 4px var(--action-tint); background: #FBFCFE; }
.sec.dragging { opacity: .4; }
.sec.excluded { opacity: .6; }
.sec.drop-above { box-shadow: 0 -4px 0 var(--action); }
.grip { cursor: grab; color: var(--ink-3); font-size: 20px; user-select: none; text-align: center; }
.thumb { width: 80px; height: 106px; border-radius: 3px; background: #fff center / contain no-repeat; box-shadow: var(--shadow-page); cursor: zoom-in; }
.sec-t { font-weight: 700; font-size: var(--fs-md); }
.sec-d { color: var(--ink-3); font-size: var(--fs-sm); margin: 2px 0 6px; }
.sec-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); }
.sec > .grip, .sec > .thumb { grid-row: span 2; }
.sec-act { grid-column: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s6); align-items: start; }
.split > .side { position: sticky; top: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }   /* only the legacy two-column layout */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; padding: 12px var(--s6); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.list li:last-child { border-bottom: 0; }
label.f { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin: var(--s4) 0 6px; }
.in { min-height: var(--tap-sm); padding: 0 14px; font-size: var(--fs-base); }
.row { display: flex; gap: var(--s4); }
.row > * { flex: 1; min-width: 0; }
.versions { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.versions td, .versions th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.versions th { font-weight: 600; color: var(--ink-2); background: var(--surface-2); }
.versions tr.cur td { background: var(--ready-bg); }
.preview-img { width: 100%; border: 1px solid var(--line); box-shadow: var(--shadow-page); }

/* ---------------------------------------------------------------- keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 8px var(--mj-gold-line), var(--shadow-2); } 100% { box-shadow: var(--shadow-1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- 21 responsive
   1920: more room · 1366: the common laptop · 1180: nav becomes an icon rail · 760: nav on top */
@media (min-width: 1700px) {
  :root { --main-pad-x: 48px; }
  .next-grid { grid-template-columns: 290px minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  :root { --nav-w: 268px; }
}
@media (max-width: 1366px) {
  :root { --main-pad-x: 32px; }
  .slim-bar .progress { display: none; }
  .doc-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  .doc-card { grid-template-columns: 160px minmax(0, 1fr); }
}
/* short screens (768px laptops, browser toolbars): the compact logo lock-up keeps the month card in view.
   base.html swaps in logo-header-reverse.svg with the same media query. */
@media (max-height: 800px) and (min-width: 1181px) {
  .nav-logo { width: 216px; }
  .nav-brand { padding-top: 2px; padding-bottom: 10px; gap: 2px; }
  .app-name { font-size: var(--fs-base); }
  .nav-item { min-height: 54px; padding-top: 5px; padding-bottom: 5px; }
  .nav-month { gap: 4px; padding: 10px 12px; }
}
@media (max-height: 680px) and (min-width: 1181px) {
  .nav-item small { display: none; }
  .nav-item { min-height: 46px; }
}
/* 1181–1280px: the nav is narrower, so labels wrap onto two lines sooner — drop the small lines earlier */
@media (max-height: 740px) and (min-width: 1181px) and (max-width: 1280px) {
  .nav-item small { display: none; }
  .nav-item { min-height: 48px; }
}
@media (max-width: 1180px) {
  :root { --nav-w: 104px; --main-pad-x: 24px; --main-pad-top: 24px; }
  .nav { padding: var(--s3) var(--s2); align-items: stretch; }
  .nav-brand { padding: 4px 0 10px; }
  .nav-logo { width: 64px; }
  .app-name { display: none; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; min-height: 72px; padding: 8px 2px; }
  .nav-item .nav-text { display: none; }
  .nav-item .nav-short { display: block; font-size: var(--fs-xs); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; overflow-wrap: anywhere; }
  .nav-item[aria-current="page"]::before, .nav-item.is-parent::before { left: calc(-1 * var(--s2)); }
  .nav-sub { margin: 2px 0 4px; justify-content: center; text-align: center; font-size: var(--fs-xs); padding: 6px 4px; overflow-wrap: anywhere; }
  .nav-sub::before { display: none; }
  .nav-sub .nav-here, .nav-item .nav-here { display: none; }
  .nav-month { padding: 10px 8px; align-items: center; text-align: center; }
  .nav-month .nm-long { display: none; }
  .nav-month .nm-short { display: block; font-size: var(--fs-xs); font-weight: 600; color: #fff; line-height: 1.25; }
  .nav-foot { margin-bottom: calc(-1 * var(--s3)); padding-bottom: var(--s3); bottom: calc(-1 * var(--s3)); }
  .split { grid-template-columns: 1fr; }
  .split > .side { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .next-grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); }
  .doc-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .fold > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fold > summary .mini-pages, .fold > summary .fold-status { display: none; }
  .slim-bar .sb-month { display: none; }
}
/* short windows with the icon rail (e.g. a 1024 x 641 browser window): tighter items keep the month card in view */
@media (max-width: 1180px) and (max-height: 800px) {
  .nav-item { min-height: 64px; }
}
@media (max-width: 1180px) and (max-height: 700px) {
  .nav { gap: 4px; }
  .nav-brand { padding: 2px 0 6px; }
  .nav-logo { width: 52px; }
  .nav-item { min-height: 58px; padding: 5px 2px; row-gap: 2px; }
  .nav-group + .nav-group { margin-top: 4px; padding-top: 4px; }
  .nav-month { padding: 8px 6px; gap: 4px; }
}
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
  .compare-arrow span { width: 44px; height: 44px; }
  .compare-pages { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .doc-card { grid-template-columns: 140px minmax(0, 1fr); }
  .viewer-bar { padding: 8px var(--s4); }
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step + .step::before { display: none; }
}
@media (max-width: 760px) {
  :root { --nav-w: 0px; --main-pad-x: 16px; }
  body.app { grid-template-columns: 1fr; }
  .nav { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; gap: 4px; }
  .nav-brand { border: 0; padding: 0 8px 0 0; }
  .nav-logo { width: 52px; }
  .nav-group { flex-direction: row; }
  .nav-group + .nav-group { margin: 0; padding: 0 0 0 4px; border-top: 0; border-left: 1px solid var(--nav-line); }
  .nav-item { min-width: 84px; }
  .nav-item[aria-current="page"]::before, .nav-item.is-parent::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 4px; border-radius: 4px 4px 0 0; }
  .nav-sub, .nav-foot { display: none; }
  .slim-bar { left: 0; }
  .grid-2, .grid-3, .compare, .compare-row, .compare-rowhead { grid-template-columns: 1fr; }
  .compare-arrow { flex-direction: row; padding: var(--s3) 0; }
  .compare-arrow span { transform: rotate(90deg); }
  .doc-grid, .doc-grid.tiles { grid-template-columns: 1fr; }
  .doc-card { grid-template-columns: 1fr; }
  .sec { grid-template-columns: 28px 1fr; } .sec .thumb { display: none; } .sec > .grip { grid-row: auto; } .sec-act { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .search { min-width: 0; width: 100%; }
  .decision-bar .btn { width: 100%; }
}

/* ---------------------------------------------------------------- 22 print (printing an app screen itself) */
@media print {
  @page { size: A4; margin: 14mm; }
  body, body.app { display: block; background: #fff; font-size: 11pt; color: #000; }
  .nav, #toast, .slim-bar, .filter-bar, .decision-bar, .busy-bg, .skip-link, .no-print, .btn, .modal-bg, .viewer { display: none !important; }
  main { padding: 0; }
  .card, .doc-card, .fold, .step, .compare-side, .next-up { box-shadow: none !important; break-inside: avoid; border-color: #bbb; }
  .page-pic { box-shadow: 0 0 0 1px #bbb; }
  .desk, .doc-thumb, .compare-pages, .fold-body { background: #fff; }
  a { color: inherit; text-decoration: none; }
}