/* GOAT Work · tokens.css — every colour, size and typeface in one place.
 *
 * DESIGN DIRECTION: "The Registry".
 * A financial planning file earns trust by being legible and well kept, not by being
 * decorated. So the visual language is a professional register: pale stock, navy ink,
 * hairline rules, and a claret spine. Status is the only colour that moves.
 *
 * THE SIGNATURE DEVICE is the file stripe: a 3px rule down the left edge of every
 * client and document row. Its colour is not decoration — it is the review state
 * (forest = current, ochre = due soon, claret = overdue). One glance down a column of
 * stripes reads the health of the whole register. The same stripe marks the active
 * item in the sidebar, so the device means both "where you are" and "what state this is in".
 *
 * To rebrand, change the six colours in the PALETTE block and the two font families.
 * Nothing else hardcodes a colour — if you find a hex outside this file, it is a bug.
 */

:root {
  /* ── PALETTE ────────────────────────────────────────────────────────────── */
  --ink:        #141B2D;   /* navy-slate: all primary text, the sidebar ground   */
  --paper:      #F4F6F3;   /* pale slate-green stock: the page                   */
  --card:       #FFFFFF;   /* raised surfaces                                    */
  --claret:     #8E2C3B;   /* the accent, and the alarm. Overdue is the brand.   */
  --forest:     #2F6B4F;   /* current, complete, signed off                      */
  --ochre:      #B4741C;   /* due soon, awaiting action                          */

  /* Derived neutrals — never introduce a new grey, lean on these */
  --slate:      #5A6472;   /* secondary text, labels                             */
  --slate-soft: #8A929E;   /* tertiary: placeholders, disabled                   */
  --rule:       #DBE0D9;   /* hairlines. The structure of the register.          */
  --rule-soft:  #EAEDE8;
  --sunk:       #EEF1EC;   /* inset fields, table header bands                   */

  /* Tints, for status pills and row washes. Kept very pale on purpose. */
  --claret-tint: #F6EAEC;
  --forest-tint: #E9F1EC;
  --ochre-tint:  #F8F0E2;
  --ink-tint:    #ECEEF2;

  /* ── TYPE ───────────────────────────────────────────────────────────────── */
  /* Spectral is a document serif — it belongs on advice, not on buttons, so it is
     used only for page titles and the landing headline. IBM Plex Sans carries the
     interface. IBM Plex Mono carries every date, reference and status, because a
     register is read in columns and columns need fixed widths. */
  --display: Spectral, Georgia, "Times New Roman", serif;
  --ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display: 600 clamp(28px, 3.2vw, 42px)/1.12 var(--display);
  --t-title:   600 22px/1.25 var(--display);
  --t-section: 600 13px/1.3 var(--ui);
  --t-body:    400 14px/1.55 var(--ui);
  --t-strong:  500 14px/1.5 var(--ui);
  --t-small:   400 12.5px/1.5 var(--ui);
  --t-label:   500 10.5px/1.2 var(--data);   /* uppercase eyebrows, tracked */
  --t-data:    400 13px/1.45 var(--data);
  --t-num:     500 13px/1.4 var(--data);

  --track-label: .09em;   /* the only letter-spacing in the app */

  /* ── SPACE, SHAPE, DEPTH ───────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --r:      4px;   /* restrained on purpose: a register is squared off, not soft */
  --r-chip: 2px;
  --stripe: 3px;   /* the file stripe */

  /* One shadow, used sparingly. Depth is not how this product signals importance. */
  --lift: 0 1px 2px rgba(20, 27, 45, .06), 0 4px 14px rgba(20, 27, 45, .05);
  --lift-lg: 0 8px 40px rgba(20, 27, 45, .16);

  --sidebar: 232px;
  --measure: 1180px;   /* content max width */

  --focus: 2px solid var(--claret);
  --ease: 160ms cubic-bezier(.3, .7, .4, 1);

  color-scheme: light;
}

/* ── DARK ────────────────────────────────────────────────────────────────────
   Not an inversion. The same register, printed on dark stock: the greens stay
   green, the claret lifts enough to survive on a dark ground, and the paper keeps
   its faint green cast so the product still feels like itself at night. */
:root[data-theme="dark"] {
  --ink:        #E7EBE5;
  --paper:      #111614;
  --card:       #181E1B;
  --claret:     #D2697C;
  --forest:     #55A37A;
  --ochre:      #D8A055;

  --slate:      #9BA49B;
  --slate-soft: #6C766D;
  --rule:       #2A322C;
  --rule-soft:  #212823;
  --sunk:       #1E251F;

  --claret-tint: #2A1A1E;
  --forest-tint: #17251D;
  --ochre-tint:  #262017;
  --ink-tint:    #222925;

  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --lift-lg: 0 8px 40px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  font: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }
img { max-width: 100%; }

/* A visible focus ring is not optional in a product staff use all day on a keyboard. */
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--r-chip); }
:focus:not(:focus-visible) { outline: none; }

/* Every number in this product sits in a column. Line them up. */
.num, td .num, .t-data { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PART TWO · LAYOUT AND COMPONENTS
   Everything above is the palette and type scale. Everything below uses them and
   introduces no new colour of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · TYPE HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */
.eyebrow {
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate);
}
.page-title { font: var(--t-title); letter-spacing: -.01em; }
.display { font: var(--t-display); letter-spacing: -.02em; }
.section-title { font: var(--t-section); }
.muted { color: var(--slate); }
.small { font: var(--t-small); color: var(--slate); }
.data { font: var(--t-data); font-variant-numeric: tabular-nums; }
.strong { font: var(--t-strong); }
.lede { font: 400 16px/1.6 var(--ui); color: var(--slate); max-width: 58ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · APP SHELL — fixed sidebar, sticky topbar, one content column
   ═══════════════════════════════════════════════════════════════════════════ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: none;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: var(--s5) 0 var(--s4);
  z-index: 40;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--s5) var(--s6);
}
.sidebar .brand-name { font: 600 16px/1 var(--display); letter-spacing: .01em; }
.sidebar .brand-tag {
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: .55;
  margin-top: 3px;
}
.nav { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--s3); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: var(--t-strong);
  color: var(--paper);
  opacity: .68;
  padding: 9px 12px;
  border-radius: var(--r);
  border-left: var(--stripe) solid transparent;
  transition: opacity var(--ease), background var(--ease);
}
.nav-item:hover { opacity: 1; background: rgba(255, 255, 255, .05); }
.nav-item.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, .07);
  border-left-color: var(--claret);
}
.nav-item .ic { width: 16px; height: 16px; flex: none; opacity: .9; }
.nav-spacer { flex: 1; }
.sidebar-foot { padding: var(--s4) var(--s5) 0; font: var(--t-label); opacity: .45; line-height: 1.6; }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topbar .crumb { font: var(--t-small); color: var(--slate); flex: 1; min-width: 0; }
.topbar .crumb b { color: var(--ink); font-weight: 500; }

.content { padding: var(--s6); max-width: var(--measure); margin: 0 auto; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.page-head .head-text { min-width: 0; }
.page-head .lede { margin-top: 6px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: var(--s5);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.card.is-flush { padding: 0; overflow: hidden; }
.card.is-flush .card-head { padding: var(--s4) var(--s5); margin: 0; border-bottom: 1px solid var(--rule); }

.grid { display: grid; gap: var(--s4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s5); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row.is-tight { gap: var(--s2); }
.row.is-end { justify-content: flex-end; }

/* Metric tile. Deliberately not a big gradient number: the label leads, because
   "3 reviews overdue" is a task, and the count is only how big the task is. */
.tile {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: var(--stripe) solid var(--rule);
  border-radius: var(--r);
  padding: var(--s4);
  display: block;
  width: 100%;
  text-align: left;
  transition: border-color var(--ease), transform var(--ease);
}
.tile:hover { transform: translateY(-1px); }
.tile .tile-label {
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate);
}
.tile .tile-value {
  font: 600 26px/1.1 var(--data);
  font-variant-numeric: tabular-nums;
  margin-top: 10px;
  display: block;
}
.tile .tile-note { font: var(--t-small); color: var(--slate); margin-top: 4px; }
.tile.tone-ok { border-left-color: var(--forest); }
.tile.tone-due { border-left-color: var(--ochre); }
.tile.tone-late { border-left-color: var(--claret); }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · THE REGISTER — the table pattern, and the file stripe
   ═══════════════════════════════════════════════════════════════════════════ */
.register { width: 100%; }
.register thead th {
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate);
  text-align: left;
  padding: 10px var(--s4);
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  position: sticky;
  top: 57px;   /* clears the sticky topbar */
  z-index: 5;
}
.register tbody td {
  padding: 12px var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.register tbody tr { transition: background var(--ease); }
.register tbody tr:hover { background: var(--sunk); cursor: pointer; }
.register tbody tr:last-child td { border-bottom: 0; }

/* The stripe. Applied as a left border on the first cell so it hugs the row and
   survives horizontal scrolling. Status classes are declared after the base. */
.register tbody td:first-child { border-left: var(--stripe) solid var(--rule); }
.register tr.state-current td:first-child { border-left-color: var(--forest); }
.register tr.state-due td:first-child { border-left-color: var(--ochre); }
.register tr.state-overdue td:first-child { border-left-color: var(--claret); }

.register .cell-name { font: var(--t-strong); }
.register .cell-sub { font: var(--t-small); color: var(--slate); margin-top: 2px; }
.register .cell-data { font: var(--t-data); color: var(--slate); white-space: nowrap; }
.register .col-tight { width: 1%; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Status pill. Reads as a stamp, not a badge. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: var(--r-chip);
  border: 1px solid var(--rule);
  color: var(--slate);
  background: var(--ink-tint);
  white-space: nowrap;
}
.pill.tone-ok { color: var(--forest); background: var(--forest-tint); border-color: transparent; }
.pill.tone-due { color: var(--ochre); background: var(--ochre-tint); border-color: transparent; }
.pill.tone-late { color: var(--claret); background: var(--claret-tint); border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: var(--t-strong);
  padding: 9px 15px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), opacity var(--ease);
}
.btn:hover { background: var(--sunk); }
.btn .ic { width: 15px; height: 15px; }
.btn.is-primary { background: var(--claret); border-color: var(--claret); color: #fff; }
.btn.is-primary:hover { opacity: .9; background: var(--claret); }
.btn.is-quiet { border-color: transparent; background: transparent; color: var(--slate); }
.btn.is-quiet:hover { background: var(--sunk); color: var(--ink); }
.btn.is-danger { color: var(--claret); border-color: var(--rule); }
.btn.is-danger:hover { background: var(--claret-tint); }
.btn.is-small { font: var(--t-small); font-weight: 500; padding: 6px 10px; }
.btn.is-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ═══════════════════════════════════════════════════════════════════════════
   6 · FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.field { display: block; margin-bottom: var(--s4); }
.field > .field-label {
  display: block;
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%;
  font: var(--t-body);
  padding: 9px 11px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-soft); }
.input::placeholder, .textarea::placeholder { color: var(--slate-soft); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.field-help { font: var(--t-small); color: var(--slate); margin-top: 6px; }
.field-error { font: var(--t-small); color: var(--claret); margin-top: 6px; }
/* 16px on touch, or iOS Safari zooms into the field and never zooms back out. */
@media (pointer: coarse) {
  .input, .select, .textarea { font-size: 16px; }
}

.search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0 11px;
  min-width: 0;
  flex: 1;
  max-width: 340px;
}
.search .ic { width: 15px; height: 15px; color: var(--slate); flex: none; }
.search input {
  border: 0;
  background: none;
  padding: 9px 0;
  width: 100%;
  min-width: 0;
  outline: none;
}

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  font: var(--t-small);
  font-weight: 500;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--card);
  color: var(--slate);
  transition: all var(--ease);
}
.chip:hover { border-color: var(--slate-soft); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · STATES — empty, loading, error. Each one says what to do next.
   ═══════════════════════════════════════════════════════════════════════════ */
.state {
  text-align: center;
  padding: var(--s8) var(--s5);
  border: 1px dashed var(--rule);
  border-radius: var(--r);
  background: var(--card);
}
.state .state-title { font: var(--t-title); font-size: 18px; margin-bottom: 8px; }
.state .state-body { font: var(--t-body); color: var(--slate); max-width: 46ch; margin: 0 auto var(--s4); }
.state.is-error { border-style: solid; border-left: var(--stripe) solid var(--claret); text-align: left; padding: var(--s5); }
.state.is-error .state-title { color: var(--claret); }
.state .state-detail {
  font: var(--t-data);
  color: var(--slate);
  background: var(--sunk);
  border-radius: var(--r);
  padding: var(--s3);
  margin-top: var(--s3);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.skeleton { display: flex; flex-direction: column; gap: 1px; }
.skeleton i {
  display: block;
  height: 44px;
  background: linear-gradient(90deg, var(--sunk) 25%, var(--rule-soft) 50%, var(--sunk) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   8 · TOAST + MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.toast-layer {
  position: fixed;
  bottom: var(--s5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--paper);
  font: var(--t-strong);
  padding: 10px 16px;
  border-radius: var(--r);
  box-shadow: var(--lift-lg);
  border-left: var(--stripe) solid var(--forest);
  animation: rise var(--ease) both;
  max-width: 90vw;
}
.toast.tone-late { border-left-color: var(--claret); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s6) var(--s4);
  overflow-y: auto;
  background: rgba(20, 27, 45, .38);
  backdrop-filter: blur(2px);
}
.modal-layer.is-open { display: flex; }
.sheet {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--lift-lg);
  width: 100%;
  max-width: 520px;
  animation: rise var(--ease) both;
}
.sheet .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule);
}
.sheet .sheet-body { padding: var(--s5); }
.sheet .sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--rule);
}
.sheet.is-wide { max-width: 760px; }

/* ═══════════════════════════════════════════════════════════════════════════
   9 · CLIENT FILE — tabbed divider pattern
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); overflow-x: auto; }
.tab {
  font: var(--t-strong);
  color: var(--slate);
  padding: 10px var(--s4);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--ease), border-color var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--claret); }
.tab .tab-count { font: var(--t-label); color: var(--slate-soft); margin-left: 6px; }

.deflist { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 10px var(--s4); }
.deflist dt { font: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--slate); padding-top: 3px; }
.deflist dd { font: var(--t-body); }
.deflist dd.is-data { font: var(--t-data); }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · AUTH PAGE — one column, centred, no chrome
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: var(--s5); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s6); }
.auth-card .brand-name { font: 600 20px/1 var(--display); }
.auth-card h1 { font: var(--t-title); margin-bottom: 6px; }
.auth-switch { font: var(--t-small); color: var(--slate); margin-top: var(--s5); text-align: center; }
.auth-switch button { color: var(--claret); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.notice {
  font: var(--t-small);
  padding: var(--s3);
  border-radius: var(--r);
  border-left: var(--stripe) solid var(--forest);
  background: var(--forest-tint);
  color: var(--ink);
  margin-bottom: var(--s4);
}
.notice.tone-late { border-left-color: var(--claret); background: var(--claret-tint); }
.notice.tone-due { border-left-color: var(--ochre); background: var(--ochre-tint); }

/* ═══════════════════════════════════════════════════════════════════════════
   11 · LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  max-width: var(--measure);
  margin: 0 auto;
}
.site-head .brand { display: flex; align-items: center; gap: 10px; }
.site-head .brand-name { font: 600 17px/1 var(--display); }

.hero { max-width: var(--measure); margin: 0 auto; padding: var(--s8) var(--s6) var(--s7); }
.hero .display { max-width: 20ch; }
.hero .display em { font-style: normal; color: var(--claret); }
.hero .lede { margin: var(--s4) 0 var(--s5); }

/* The hero specimen: the product's own register, shown rather than described. */
.specimen {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--s6) var(--s8);
}
.specimen .frame {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--lift);
  overflow: hidden;
}
.specimen .frame-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate);
}
.specimen .register tbody tr { cursor: default; }
.specimen .register tbody tr:hover { background: transparent; }
.specimen .register thead th { position: static; }
.specimen .reveal { opacity: 0; animation: reveal 420ms var(--ease) both; }

@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.band { border-top: 1px solid var(--rule); }
.band-inner { max-width: var(--measure); margin: 0 auto; padding: var(--s8) var(--s6); }
.feature { border-left: var(--stripe) solid var(--rule); padding-left: var(--s4); }
.feature h3 { font: var(--t-section); font-size: 15px; margin-bottom: 6px; }
.feature p { font: var(--t-small); color: var(--slate); line-height: 1.65; }
.feature.tone-ok { border-left-color: var(--forest); }
.feature.tone-due { border-left-color: var(--ochre); }
.feature.tone-late { border-left-color: var(--claret); }

.site-foot {
  border-top: 1px solid var(--rule);
  padding: var(--s5) var(--s6);
  max-width: var(--measure);
  margin: 0 auto;
  font: var(--t-small);
  color: var(--slate);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · UTILITIES + RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { height: 1px; background: var(--rule); margin: var(--s5) 0; }
.mark { width: 26px; height: 26px; flex: none; }
.sidebar-toggle { display: none; }

@media (max-width: 1000px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* The sidebar becomes a drawer. It is off-canvas by default so the register
     gets the full width, which is what actually matters on a phone. */
  .sidebar { transform: translateX(-100%); transition: transform var(--ease); box-shadow: var(--lift-lg); }
  .sidebar.is-open { transform: none; }
  .main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .content { padding: var(--s4); }
  .topbar { padding: var(--s3) var(--s4); }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .deflist { grid-template-columns: minmax(0, 1fr); gap: 2px var(--s4); }
  .deflist dd { margin-bottom: var(--s3); }
  .register thead { display: none; }
  .register tbody td { display: block; padding: 4px var(--s4); border-bottom: 0; }
  .register tbody td:first-child { padding-top: var(--s3); }
  .register tbody td:last-child { padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-soft); }
  .hero { padding: var(--s6) var(--s4) var(--s5); }
  .specimen, .band-inner, .site-head, .site-foot { padding-left: var(--s4); padding-right: var(--s4); }
  .band-inner { padding-top: var(--s6); padding-bottom: var(--s6); }
}