/* SKUBA design language — reference prototype.
   Tokens follow 02-design-dictionary.md §A. Values marked [observed] were read
   from live Linear; the rest are the dictionary's proposals. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* A1–A2 type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --w-normal: 450;
  --w-medium: 500;
  --w-semibold: 600;
  --fs-micro: 11px;
  --fs-meta: 12px;
  --fs-ui: 13px;
  --fs-body: 15px;
  --fs-heading: 15px;
  --fs-title: 24px;

  /* A3 neutral scale — one faint hue [observed: LCH hue 282] */
  --nh: 90;              /* neutral hue: 90 leans warm/natural; 282 is Linear's cool */
  --nc: 1.1;             /* neutral chroma, kept near grey */
  --text-1: lch(9.8% 0.4 var(--nh));
  --text-2: lch(19.6% var(--nc) var(--nh));
  --text-nav: lch(37.8% var(--nc) var(--nh));   /* [observed] Linear sidebar ink */
  --text-3: lch(39.2% var(--nc) var(--nh));
  --text-4: lch(64.6% var(--nc) var(--nh));
  --bg-canvas: lch(98% 0.6 var(--nh));
  --bg-chrome: lch(94.6% 0.9 var(--nh));
  --bg-hover: lch(92.6% 1 var(--nh));
  --bg-pressed: lch(90.9% 1.1 var(--nh));
  --bg-raised: lch(100% 0 var(--nh));
  --line-1: lch(92.6% 0.6 var(--nh));
  --line-2: lch(88.5% 0.8 var(--nh));
  --line-3: lch(84.4% 0.8 var(--nh));

  /* A4 interaction colour: forest green, five roles (the dictionary's A4).
     Chrome only: focus, selection, the primary action, active controls.
     Never a meaning in the data: not "good", "done" or "available". */
  --accent: lch(28% 20 146);                       /* 1. the mark: workspace mark, active chrome */
  --accent-hover: color-mix(in lch, var(--accent), white 10%);
  --accent-fill: lch(50% 34 148);                  /* 2. the primary button's fill */
  --accent-fill-hover: lch(46% 37 148);
  --accent-fill-press: lch(43% 34 148);
  --accent-soft: color-mix(in lch, var(--accent) 11%, transparent);  /* 3. a selected row's tint */
  --accent-ring: color-mix(in lch, var(--accent), white 22%);        /* 4. focus ring */
  --accent-ring-soft: lch(66% 30 146);             /*    the thin ring on a selected cell or tile */
  /* Keyboard focus on a row, list or table, and on a group band: one 1px accent edge at the row's start,
     with the hover fill (A12; one focus style, 6 Oct 2026, after kaizen-app #609). Never a ring round the row. */
  --focus-edge: inset 1px 0 0 var(--accent-ring);
  --accent-press: lch(93.5% 9 146);                /* 5. pressed in: the selected cell or card */
  --accent-press-edit: lch(92% 11 146);
  --accent-press-range: lch(64% 42 146 / 0.16);    /*    see-through: a range is drawn over its cells */
  --accent-press-shadow: inset 1px 1.5px 3px lch(20% 12 146 / 0.24);

  /* A5 operational colour — what the data means. Independent of the brand. */
  --op-critical: lch(46% 62 32);       /* emergencies only */
  --op-warning: lch(56% 62 66);        /* needs a person; shortfall glyph */
  --op-warning-ink: lch(46% 50 68);    /* shortfall numbers */
  --op-progress: lch(78% 70 88);       /* fill only; never the sole mark */
  --op-ready: lch(58% 52 132);         /* available / packed — a leaf green, not the brand */
  --op-done: lch(47% 42 290);          /* complete / shipped / sent */
  --op-ended: lch(62% 2 var(--nh));
  /* aliases used by the marks */
  --danger: var(--op-critical);
  --warning: var(--op-warning);
  /* The ERP status sign (Nicholas, 9 Oct 2026: green / red / yellow): in sync, differs, not in Visma. Dotted stays grey. */
  --erp-ok: lch(55% 44 148);
  --erp-differs: lch(52% 66 32);
  --erp-missing: lch(72% 82 88);
  --warning-ink: var(--op-warning-ink);
  --progress: var(--op-progress);
  --success: var(--op-ready);
  --neutral: var(--op-ended);

  /* A5b categorical colour (decided 3 Oct 2026, Nicholas): categorical colour
     identifies; operational colour judges. One palette, taken in order, never
     on a semantic hue (amber 55–80, red 20–45, leaf 120–145, done 280–305).
     pale = a fill (layers, bands, notes) · mark = a bar, line or dot (≥ 3:1 on
     the canvas) · deep = an edge, or a label on a pale fill. Marks differ in
     lightness as well as hue, so they stay apart for colour-blind readers
     (ΔE ≥ 7.8 under deuteranopia and protanopia). Values: 10-visual-system-report.md §7.3. */
  --cat-blue-pale: lch(82% 16 245);
  --cat-blue-mark: lch(56% 36 250);
  --cat-blue-deep: lch(38% 30 250);
  --cat-teal-pale: lch(90% 12 190);
  --cat-teal-mark: lch(38% 30 190);
  --cat-teal-deep: lch(28% 24 190);
  --cat-plum-pale: lch(88% 14 318);
  --cat-plum-mark: lch(46% 36 318);
  --cat-plum-deep: lch(32% 28 318);
  --cat-rose-pale: lch(82% 18 345);
  --cat-rose-mark: lch(58% 30 0);
  --cat-rose-deep: lch(40% 26 0);
  /* Fills only: these sit beside a semantic hue, so they are never a mark.
     -edge outlines its own pale fill (a TimeBands top edge), nothing else. */
  --cat-lavender-pale: lch(90.5% 13 300);
  --cat-lavender-edge: lch(55% 16 300);
  --cat-sand-pale: lch(84.5% 19 72);
  --cat-sand-edge: lch(55% 18 72);
  --cat-sage-pale: lch(92% 14 138);
  --cat-sage-edge: lch(55% 14 138);
  /* The paler repeats of the first two layers (layers 5 and 6). */
  --cat-blue-faint: lch(91% 8 245);
  --cat-lavender-faint: lch(94% 7 300);
  /* Roles, as aliases. A screen takes a role, never a hue. */
  --series-1: var(--cat-blue-mark);   /* chart series, in order; past four, "Other" in ink */
  --series-2: var(--cat-teal-mark);
  --series-3: var(--cat-plum-mark);
  --series-4: var(--cat-rose-mark);
  --bar-ink: var(--cat-blue-mark);            /* BarChart: a single series */
  --bar-ink-current: var(--cat-blue-deep);    /* the current period */

  /* A7 radii [observed] */
  --r-control: 8px;
  --r-group: 10px;
  --r-surface: 12px;
  --r-block: 6px;
  --r-pill: 9999px;

  /* A9 elevation [observed] */
  --shadow-raised: 0 6px 18px lch(0 0 0 / 0.04), 0 3px 9px lch(0 0 0 / 0.06), 0 1px 1px lch(0 0 0 / 0.05);
  /* A work card under a row (WorkPanel): lifted less than a popover. */
  --shadow-card: 0 4px 12px lch(0 0 0 / 0.04), 0 1px 2px lch(0 0 0 / 0.05);

  /* A11 density */
  --h-control: 28px;
  --h-menu-item: 32px;
  --h-list-row: 44px;
  --h-band: 36px;
  --h-table-row: 32px;

  /* E. Button (Nicholas, 30 Sep 2026): one action language. The primary is
     the Weekly run's "Send for shipment…" refined: a solid, medium SKUBA green
     pill with a little depth, never the heavy dark forest fill; neutral white
     secondaries; quiet text actions; destructive apart. */
  --btn-h: 28px;                 /* standard: panels, dialogs, page actions */
  --btn-h-compact: 22px;         /* compact: hover cards, list rows, inline */
  --btn-px: 12px;
  --btn-px-compact: 9px;
  --btn-r: var(--r-pill);        /* softly round; a panel keeps its own radius */
  --btn-weight: var(--w-medium);
  --btn-primary-fill: var(--accent-fill);
  --btn-primary-fill-hover: var(--accent-fill-hover);
  --btn-primary-fill-press: var(--accent-fill-press);
  --btn-primary-text: #fff;
  --btn-primary-depth: 0 1px 2px lch(20% 20 148 / 0.22);
  --btn-press-shadow: inset 0 1px 2px lch(10% 10 148 / 0.28);
  --btn-focus: color-mix(in oklab, var(--accent-ring-soft) 60%, transparent);  /* one restrained ring, not a double outline */

  /* A13 motion [observed tokens] */
  --t-quick: 100ms;
  --t-regular: 250ms;
  --ease: cubic-bezier(.25, .46, .45, .94);

  --sidebar-w: 244px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: var(--w-medium) var(--fs-ui)/1.4 var(--font);
  font-feature-settings: normal;
  color: var(--text-1);
  background: var(--bg-chrome);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: default; }
:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
input, textarea { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.page-body:focus { outline: none; }
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- B. AppFrame ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; }
.canvas {
  margin: 8px 8px 8px 0; min-width: 0; min-height: 0;
  background: var(--bg-canvas);
  border: 0.5px solid var(--line-2); border-radius: var(--r-surface);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.app.focus { grid-template-columns: 0 1fr; }

/* Sidebar */
.sidebar { display: flex; flex-direction: column; padding: 8px 12px 10px; gap: 2px; overflow: auto; }
.ws { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; }
.ws-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; display: grid; place-items: center; letter-spacing: .02em; }
.ws-name { font-weight: var(--w-medium); flex: 1; }
.ws .iconbtn { width: 26px; height: 26px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; height: var(--h-control);
  padding: 0 8px; border-radius: var(--r-control); color: var(--text-nav);
  text-decoration: none; transition: background var(--t-quick) var(--ease);
}
.nav-item .ico { color: var(--text-3); }
.nav-item:hover { background: var(--bg-hover); }
.nav-item[aria-current="page"] { background: var(--bg-pressed); color: var(--text-1); }
.nav-item[aria-current="page"] .ico { color: var(--text-2); }
.nav-item .n { margin-left: auto; color: var(--text-nav); font-weight: var(--w-normal); }
.nav-sub { padding-left: 18px; }
.side-head { display: flex; align-items: center; gap: 4px; height: 28px; margin-top: 12px; padding: 0 8px;
  color: var(--text-3); font-size: var(--fs-meta); }
.side-head .caret { width: 10px; height: 10px; }
.side-foot { margin-top: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.fresh { font-size: var(--fs-meta); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.acct { display: flex; align-items: center; gap: 8px; height: 32px; color: var(--text-nav); }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-pressed); color: var(--text-2);
  font-size: 11px; font-weight: 600; display: grid; place-items: center; flex: none; }

/* Page header [observed 43.5px] */
.page-header {
  height: 44px; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 12px 0 20px; border-bottom: 0.5px solid var(--line-1);
}
.crumb { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.crumb a { color: var(--text-3); text-decoration: none; }
.crumb a:hover { color: var(--text-1); }
.crumb .sep { color: var(--text-4); }
.crumb .here { color: var(--text-1); }
.page-header .spacer { flex: 1; }
.page-body { flex: 1; min-height: 0; overflow: auto; }

/* ---------- F. ViewBar ---------- */
.viewbar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 8px 16px;
}
.viewbar .spacer { flex: 1; }
.tab {
  height: var(--h-control); padding: 0 11px; border-radius: var(--r-pill);
  border: 0.5px solid var(--line-2); background: var(--bg-raised); color: var(--text-3);
  font-size: var(--fs-meta); display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--text-1); background: var(--bg-canvas); }
.tab[aria-selected="true"] { background: var(--bg-pressed); border-color: transparent; color: var(--text-1); }
.tab .n { color: var(--text-3); font-weight: var(--w-normal); }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--bg-chrome); gap: 2px; }
.seg button { height: 24px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--text-3); font-size: var(--fs-meta); }
.seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-1); box-shadow: 0 1px 2px lch(0 0 0 / .08); }

.iconbtn {
  width: var(--h-control); height: var(--h-control); border-radius: var(--r-pill);
  border: 0.5px solid var(--line-2); background: var(--bg-raised); color: var(--text-2);
  display: inline-grid; place-items: center; padding: 0; position: relative;
}
.iconbtn.bare { border-color: transparent; background: none; }
/* Busy (5 Oct 2026, Refresh from Visma): the icon turns while the act runs; still and dimmed under reduced motion. */
.iconbtn[aria-busy="true"] { cursor: progress; color: var(--text-1); }
.iconbtn[aria-busy="true"] .ico { animation: iconbtn-turn .9s linear infinite; }
@keyframes iconbtn-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .iconbtn[aria-busy="true"] .ico { animation: none; opacity: .5; } }
.iconbtn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-1); }
.iconbtn[aria-expanded="true"], .iconbtn[aria-pressed="true"] { background: var(--bg-pressed); color: var(--text-1); }
.iconbtn .badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 8px 16px; }
.chip {
  display: inline-flex; align-items: stretch; height: 26px; border-radius: var(--r-control);
  border: 0.5px solid var(--line-2); background: var(--bg-raised); font-size: var(--fs-meta); overflow: hidden;
}
.chip > span, .chip > button { display: inline-flex; align-items: center; padding: 0 8px; gap: 5px; }
.chip > span + span, .chip > span + button { border-left: 0.5px solid var(--line-1); }
.chip .k { color: var(--text-2); }
.chip .op { color: var(--text-3); font-weight: var(--w-normal); }
.chip .v { color: var(--text-1); }
.chip button { border: 0; background: none; color: var(--text-3); padding: 0 7px; }
.chip button:hover { background: var(--bg-hover); color: var(--text-1); }
.chips .clear { border: 0; background: none; color: var(--text-3); font-size: var(--fs-meta); padding: 0 6px; height: 26px; }
.chips .clear:hover { color: var(--text-1); }

/* ---------- G. Popover / Menu / Picker ---------- */
.popover {
  position: fixed; z-index: 50; min-width: 220px; max-width: 340px;
  background: var(--bg-raised); border: 0.5px solid var(--line-2);
  border-radius: var(--r-surface); box-shadow: var(--shadow-raised);
  padding: 4px 0; animation: pop var(--t-quick) var(--ease);
  /* Never taller than the window (P6, 6 Oct 2026): the body scrolls, openMenu places it. */
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
}
/* A form in a popover: the menu's own 14px side padding, fields on one grid. */
.popover .menu-form { display: grid; gap: 8px; padding: 4px 14px 8px; }
/* A form's actions in a popover: they stay at the bottom while the body scrolls. */
.popover .menu-foot { position: sticky; bottom: 0; margin-bottom: -4px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; background: var(--bg-raised); border-top: 0.5px solid var(--line-1); }
@keyframes pop { from { opacity: 0; transform: translateY(-2px); } }
.popover[hidden] { display: none; }
.menu-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 14px;
  border-bottom: 0.5px solid var(--line-1); margin-bottom: 4px; }
.menu-search input { border: 0; outline: 0; background: none; flex: 1; font-weight: var(--w-normal); min-width: 0; }
.menu-search input::placeholder { color: var(--text-4); }
.menu-item {
  display: flex; align-items: center; gap: 10px; height: var(--h-menu-item);
  margin: 0 4px; padding: 0 10px; border-radius: var(--r-control);
  font-weight: 400; color: var(--text-1); width: calc(100% - 8px); border: 0; background: none; text-align: left;
}
.menu-item .ico { color: var(--text-3); }
.menu-item .end { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-meta); }
.menu-item.active, .menu-item:hover { background: var(--bg-hover); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .ico { color: var(--danger); }
.menu-item input[type=checkbox] { margin: 0; }
.menu-sep { height: 0.5px; background: var(--line-1); margin: 4px 0; }
.menu-label { padding: 6px 14px 2px; color: var(--text-3); font-size: var(--fs-meta); }
.caret-r { width: 12px; height: 12px; color: var(--text-4); }

/* DisplayMenu */
.display { width: 320px; padding: 12px; max-width: none; }
.display .row { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: 12px; }
.display .row > span { color: var(--text-2); }
.display .select { height: 26px; min-width: 128px; padding: 0 8px; border-radius: var(--r-control);
  border: 0.5px solid var(--line-2); background: var(--bg-raised); display: inline-flex; align-items: center;
  justify-content: space-between; gap: 6px; font-size: var(--fs-meta); }
.display hr { border: 0; border-top: 0.5px solid var(--line-1); margin: 10px -12px; }
.props { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prop { height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-meta);
  border: 0.5px solid var(--line-2); background: var(--bg-raised); color: var(--text-3); }
.prop[aria-pressed="true"] { background: var(--bg-pressed); border-color: transparent; color: var(--text-1); }
.display .seg { width: 100%; }
.display .seg button { flex: 1; }

/* ---------- E. Controls ---------- */
/* Button (design dictionary E, `Button`): one construction for every action.
   Variants: primary (the solid SKUBA green, one per surface), secondary (the
   default, neutral white), ghost (quiet text action), destructive (danger,
   filled only once armed). Sizes: standard and compact. A long label ellipses
   inside `.btn-l` and keeps its full text in the title. */
.btn {
  height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--btn-r);
  border: 0.5px solid var(--line-2); background: var(--bg-raised); color: var(--text-1);
  font: var(--btn-weight) var(--fs-ui)/1 var(--font);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%;
  cursor: default; user-select: none;
  transition: background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.btn:hover { background: var(--bg-hover); }
.btn:active:not(:disabled) { box-shadow: var(--btn-press-shadow); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--btn-focus); }
.btn[aria-pressed="true"] { background: var(--bg-hover); border-color: var(--line-3); }
.btn .btn-l { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.btn .ico { width: 13px; height: 13px; flex: none; }
.btn.compact, .btn.small { height: var(--btn-h-compact); padding: 0 var(--btn-px-compact); font-size: var(--fs-meta); gap: 5px; }
.btn.compact .ico, .btn.small .ico { width: 12px; height: 12px; }
.btn.primary { background: var(--btn-primary-fill); border-color: transparent; color: var(--btn-primary-text); box-shadow: var(--btn-primary-depth); }
.btn.primary:hover { background: var(--btn-primary-fill-hover); }
.btn.primary:active:not(:disabled) { background: var(--btn-primary-fill-press); box-shadow: var(--btn-press-shadow); }
.btn.primary:focus-visible { box-shadow: var(--btn-primary-depth), 0 0 0 2px var(--btn-focus); }
.btn.primary .ico { color: inherit; }
/* A key on a filled button reads as Linear's: an outlined key, not a tinted block. */
.btn.primary .kbd { background: color-mix(in srgb, #fff 10%, transparent); color: #fff; border: 1px solid color-mix(in srgb, #fff 45%, transparent); }
.btn.primary .then { color: color-mix(in srgb, #fff 80%, transparent); }
.btn.ghost { border-color: transparent; background: none; color: var(--text-2); padding: 0 8px; }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text-1); }
.btn.compact.ghost, .btn.small.ghost { padding: 0 6px; }
/* Destructive stays its own: danger text, filled only once armed. */
.btn.destructive { color: var(--danger); }
.btn.armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled, .btn:disabled:hover { color: var(--text-4); background: var(--bg-canvas); border-color: var(--line-1); box-shadow: none; }

.kbd { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 4px; border: 0.5px solid var(--line-2); background: var(--bg-canvas);
  color: var(--text-3); font-size: 11px; font-weight: var(--w-medium); line-height: 1; }
.then { color: var(--text-3); font-size: 11px; font-weight: var(--w-normal); }

.field { height: 30px; padding: 0 10px; border-radius: var(--r-control); border: 0.5px solid var(--line-2);
  background: var(--bg-raised); font-weight: var(--w-normal); min-width: 300px; }
.field::placeholder { color: var(--text-4); }
.toggle { width: 26px; height: 16px; border-radius: 8px; background: var(--line-3); position: relative; border: 0; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; transition: transform var(--t-quick) var(--ease); }
.toggle[aria-checked="true"] { background: var(--accent); }
.toggle[aria-checked="true"]::after { transform: translateX(10px); }
input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }

/* ---------- D. Semantic marks ---------- */
.glyph { width: 14px; height: 14px; flex: none; display: block; }
.mark { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.attn .ico { width: 14px; height: 14px; }
.attn.emergency .ico { color: var(--danger); }
.attn.needs .ico { color: var(--warning); }
.attn.question .ico { color: var(--text-3); }
.absent { color: var(--text-3); font-weight: var(--w-normal); }
.absent.action { color: var(--text-3); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.absent.action:hover { color: var(--text-1); text-decoration: underline; }
.src { color: var(--text-3); font-weight: var(--w-normal); font-size: var(--fs-meta); }
.trust { color: var(--text-3); font-weight: var(--w-normal); }
.q-neg { color: var(--warning-ink); }
.was { text-decoration: line-through; color: var(--text-4); font-weight: var(--w-normal); }
.delta { color: var(--text-3); font-weight: var(--w-normal); }

/* EntityRef */
.ref { color: inherit; text-decoration: none; border-radius: 3px; }
.ref:hover { text-decoration: underline; text-decoration-color: var(--text-4); text-underline-offset: 2px; }
.ref.id { color: var(--text-3); font-weight: var(--w-normal); letter-spacing: -0.01em; }

/* ---------- C. ObjectList ---------- */
.list { padding: 0 8px 24px; }
.band {
  height: var(--h-band); display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 10px; margin: 2px 0; border-radius: var(--r-control);
  background: var(--bg-chrome); color: var(--text-2);
}
.band .chev { width: 12px; height: 12px; color: var(--text-4); }
.band .n { color: var(--text-3); font-weight: var(--w-normal); }
.band .add { margin-left: auto; }
.band { user-select: none; }
.band.collapsed .chev { transform: rotate(-90deg); }
.crumb .sep { width: 12px; height: 12px; }
.row .mv { width: 12px; height: 12px; vertical-align: -1px; }
.row {
  height: var(--h-list-row); display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 10px; border-radius: var(--r-control); color: var(--text-1); text-decoration: none;
  position: relative; outline: none;
}
.row .sel { width: 16px; display: grid; place-items: center; opacity: 0; }
.row.focused .sel, .row.selected .sel { opacity: 1; }
.row:focus, .row:focus-visible { outline: none; }
.row.focused { background: var(--bg-hover); }
.row.focused.kbd-focus { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.row.ctx { box-shadow: inset 0 0 0 1px var(--line-3); }
.row.selected { background: var(--accent-soft); }
.row .id { width: 104px; flex: none; white-space: nowrap; }
.row .title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { color: var(--text-3); font-weight: var(--w-normal); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row .gap { flex: 1; min-width: 12px; }
.row .meta { color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); white-space: nowrap; }
.row .meta.w { width: 64px; text-align: right; }
.row.ended .title, .row.ended .sub { color: var(--text-3); }

/* ---------- C. DataTable ---------- */
.table-wrap { overflow: auto; flex: 1; min-height: 0; margin: 0 8px; }
table.dt { border-collapse: separate; border-spacing: 0; font-size: var(--fs-meta); width: max-content; min-width: 100%; }
.dt th, .dt td { height: var(--h-table-row); padding: 0 12px; white-space: nowrap; text-align: left; }
/* StableColumns: fixed layout, widths from the colgroup; text that does not fit is cut, the full text on hover. */
table.dt.fixed { table-layout: fixed; width: 100%; }
.dt.fixed th, .dt.fixed td { overflow: hidden; text-overflow: ellipsis; }
.dt.fixed td.tick, .dt.fixed th.tick, .dt.fixed tr.gband td { overflow: visible; }
.dt th {
  position: sticky; top: 0; z-index: 2; background: var(--bg-canvas);
  font-weight: var(--w-medium); color: var(--text-3); height: 34px;
  border-bottom: 0.5px solid var(--line-2);
}
.dt th.sorted { color: var(--text-1); }
.dt th .arrow { width: 11px; height: 11px; vertical-align: -1px; margin-left: 3px; }
.dt th:hover { color: var(--text-1); }
.dt td { font-weight: var(--w-normal); color: var(--text-1); border-bottom: 0.5px solid var(--line-1); }
.dt .num, .row .meta.w, .n, .badge, .kbd { font-variant-numeric: tabular-nums; }
.dt .num { text-align: right; }
.dt th.num { text-align: right; }
.dt th:first-child, .dt td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-canvas); padding-left: 10px; }
.dt th:first-child { z-index: 3; }
.dt td:first-child { font-weight: var(--w-medium); }
.dt.scrolled td:first-child, .dt.scrolled th:first-child { box-shadow: 1px 0 0 var(--line-2); }
.dt tbody tr { outline: none; }
.dt tbody tr.focused td { background: var(--bg-hover); }
.dt tbody tr.focused.kbd-focus td:first-child { box-shadow: var(--focus-edge); }
.dt td .mark, .dt td .glyph { vertical-align: middle; }
.dt th:last-child, .dt td:last-child { padding-right: 20px; }
.dt tbody tr.selected td { background: color-mix(in srgb, var(--accent) 7%, var(--bg-canvas)); }
.dt .desc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.dt .cell2 { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.dt .cell2 .src { font-size: var(--fs-micro); }
.dt tr.two td { height: 40px; }
.dt tfoot td { position: sticky; bottom: 0; background: var(--bg-canvas); border-top: 0.5px solid var(--line-2);
  border-bottom: 0; color: var(--text-2); font-weight: var(--w-medium); z-index: 1; }
.dt.nested { width: 100%; }
.dt.nested th { position: static; background: none; }
.dt.nested th:first-child, .dt.nested td:first-child { position: static; background: none; }
.table-caption { padding: 0 16px 8px; color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); }

/* ---------- G. Peek ---------- */
.peek {
  position: absolute; top: 96px; right: 16px; width: 420px; z-index: 40;
  background: var(--bg-raised); border: 0.5px solid var(--line-2); border-radius: var(--r-surface);
  box-shadow: var(--shadow-raised); padding: 18px 20px 18px; animation: pop var(--t-regular) var(--ease);
}
.peek[hidden] { display: none; }
.peek .pid { color: var(--text-3); font-weight: var(--w-normal); }
.peek h3 { margin: 4px 0 10px; font-size: 17px; font-weight: var(--w-semibold); letter-spacing: -0.01em; }
.factline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-2); }
.factline .dot { color: var(--text-4); }
.peek .intervene { margin-top: 14px; }
.peek .kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-top: 14px; font-size: var(--fs-meta); }
.peek .kv span:nth-child(odd) { color: var(--text-3); }
.peek .kv span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.peek .foot { margin-top: 14px; display: flex; gap: 6px; align-items: center; color: var(--text-3); font-size: var(--fs-meta); }

/* ---------- G. ObjectView ---------- */
.objview { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 100%; }
.doc { padding: 36px 48px 64px 56px; max-width: 900px; }
.doc h1 { font-size: var(--fs-title); font-weight: var(--w-semibold); letter-spacing: -0.015em; margin: 0 0 6px; }
.doc .lede { font-size: var(--fs-body); font-weight: var(--w-normal); line-height: 1.6; color: var(--text-2); margin: 10px 0 0; max-width: 64ch; }
.doc section { margin-top: 32px; }
.doc h2 { font-size: var(--fs-heading); font-weight: var(--w-semibold); margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; }
.doc h2 .n { color: var(--text-3); font-weight: var(--w-normal); font-size: var(--fs-ui); }
.rail { border-left: 0.5px solid var(--line-1); padding: 28px 16px 40px 20px; }
.rail h3 { margin: 18px 0 6px; font-size: var(--fs-ui); color: var(--text-3); font-weight: var(--w-medium); }
.rail h3:first-child { margin-top: 0; }
.prow { display: flex; align-items: center; gap: 8px; min-height: var(--h-control); padding: 0 6px; margin: 0 -6px;
  border-radius: var(--r-control); color: var(--text-2); }
.prow.edit:hover { background: var(--bg-hover); color: var(--text-1); }
.prow .ico, .prow .glyph { color: var(--text-3); }
.prow .v { font-variant-numeric: tabular-nums; }
.prow .src { margin-left: auto; }
.activity { list-style: none; padding: 0; margin: 0; }
.activity li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; color: var(--text-2); font-weight: var(--w-normal); }
.activity li .avatar { margin-top: 1px; }
.activity b { font-weight: var(--w-medium); color: var(--text-1); }
.activity .when { color: var(--text-3); }
.activity li.sys .avatar { background: var(--accent-soft); color: var(--accent); }

/* Intervention */
.intervene { padding: 2px 0; }
.intervene .fact { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-ui); line-height: 1.5; }
.intervene .fact .ico { margin-top: 2px; }
.intervene .fact b { font-weight: var(--w-semibold); }
.intervene .q { color: var(--text-2); font-weight: var(--w-normal); }
.intervene .opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 22px; align-items: center; }
.intervene .quiet { color: var(--text-3); background: none; border: 0; font-size: var(--fs-meta); padding: 0 6px; height: 28px; }
.intervene .quiet:hover { color: var(--text-1); }

/* ---------- J. States ---------- */
.empty { display: grid; place-items: center; text-align: center; padding: 48px 24px; }
.empty .art { width: 56px; height: 56px; color: var(--text-4); stroke-width: 1; }
.empty h3 { margin: 14px 0 6px; font-size: var(--fs-ui); font-weight: var(--w-semibold); }
.empty p { margin: 0 auto; max-width: 42ch; color: var(--text-3); font-weight: var(--w-normal); line-height: 1.55; }
.empty .acts { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.inline-error { color: var(--danger); font-weight: var(--w-normal); display: flex; gap: 6px; align-items: center; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  /* At least 40px; a longer message wraps inside it (it overflowed the pill at 390px, 5 Oct 2026). */
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 8px 8px 14px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--text-1); color: #fff; border-radius: var(--r-group); box-shadow: var(--shadow-raised);
  font-weight: var(--w-normal); animation: pop var(--t-regular) var(--ease);
}
.toast[hidden] { display: none; }
.toast .btn { height: 26px; background: transparent; border-color: color-mix(in srgb, #fff 25%, transparent); color: #fff; }
.toast .btn:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.skel { height: 10px; border-radius: 5px; background: var(--bg-chrome); }

/* ---------- Reference page (controls catalogue) ---------- */
.ref-page { padding: 28px 40px 64px; max-width: 1080px; }
.ref-page h1 { font-size: var(--fs-title); font-weight: var(--w-semibold); letter-spacing: -0.015em; margin: 0; }
.ref-page > p { color: var(--text-3); font-weight: var(--w-normal); margin: 6px 0 0; max-width: 60ch; }
.spec { margin-top: 36px; }
.spec h2 { font-size: var(--fs-heading); font-weight: var(--w-semibold); margin: 0 0 4px; }
.spec > p { margin: 0 0 14px; color: var(--text-3); font-weight: var(--w-normal); max-width: 60ch; }
.spec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-top: 0.5px solid var(--line-1); }
.spec-row .src { max-width: 60ch; }
.spec-row > .lbl { width: 150px; flex: none; color: var(--text-3); font-size: var(--fs-meta); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; width: 100%; }
.sw { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); color: var(--text-2); }
.sw i { display: block; height: 36px; border-radius: var(--r-control); border: 0.5px solid var(--line-2); }
.sw span { color: var(--text-3); font-weight: var(--w-normal); }
.typescale div { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; }
.typescale code { width: 170px; flex: none; font: var(--w-normal) var(--fs-meta) var(--mono); color: var(--text-3); }
.demo-list { width: 100%; max-width: 760px; border-radius: var(--r-group); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.panel-demo { border-top: 0.5px solid var(--line-1); }
.panel-demo.raised { border: 0.5px solid var(--line-2); border-radius: var(--r-group); background: var(--bg-raised); }
.static-pop { position: static; animation: none; box-shadow: var(--shadow-raised); }

/* ---------- Pass 2 ---------- */

/* Baseline is quiet: a covered row says so in words, without colour. */
.quiet { color: var(--text-3); font-weight: var(--w-normal); }
.row .logi { color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row .who2 { color: var(--text-3); font-weight: var(--w-normal); white-space: nowrap; }

/* Peek: a logistics block */
.peek .block { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--line-1); }
.peek .block h4 { margin: 0 0 6px; font-size: var(--fs-meta); font-weight: var(--w-medium); color: var(--text-3); }
.peek .pk { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; font-size: var(--fs-meta); font-weight: var(--w-normal); font-variant-numeric: tabular-nums; }
.peek .pk span:nth-child(3n+1) { color: var(--text-2); }
.peek .pk span:nth-child(3n+2), .peek .pk span:nth-child(3n) { text-align: right; }

/* Accent chooser + in-context specimens */
.chooser { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.cand { flex: 1 1 220px; border: 0.5px solid var(--line-2); border-radius: var(--r-group); background: var(--bg-raised); padding: 14px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.cand[aria-pressed="true"] { border-color: var(--accent-ring); box-shadow: 0 0 0 1px var(--accent-ring); }
.cand .nm { display: flex; align-items: center; gap: 8px; font-weight: var(--w-medium); }
.cand .chip-sw { width: 16px; height: 16px; border-radius: 5px; background: var(--c); }
.cand .code { color: var(--text-3); font: var(--w-normal) var(--fs-micro) var(--mono); margin-left: auto; }
.cand .spec-mini { display: flex; flex-direction: column; gap: 8px; }
.cand .spec-mini .line { display: flex; align-items: center; gap: 8px; }
.cand .b { height: 26px; padding: 0 10px; border-radius: var(--r-control); background: var(--c); color: #fff; display: inline-flex; align-items: center; font-size: var(--fs-meta); }
.cand .rowsel { height: 28px; border-radius: var(--r-control); background: color-mix(in lch, var(--c) 11%, transparent); display: flex; align-items: center; padding: 0 8px; gap: 8px; font-size: var(--fs-meta); }
.cand .ring { height: 26px; padding: 0 10px; border-radius: var(--r-control); border: 0.5px solid var(--line-2); outline: 1px solid color-mix(in lch, var(--c), white 22%); outline-offset: 1px; display: inline-flex; align-items: center; font-size: var(--fs-meta); }
.cand .tg { width: 26px; height: 16px; border-radius: 8px; background: var(--c); position: relative; }
.cand .tg::after { content: ""; position: absolute; top: 2px; left: 12px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.cand .ws { width: 22px; height: 22px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.pair > div { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.pair h3 { margin: 0; font-size: var(--fs-ui); font-weight: var(--w-semibold); }
.pair p { margin: 0; color: var(--text-3); font-weight: var(--w-normal); max-width: 52ch; }

/* ---------- Grouped rows: library and configuration surfaces (Data, Settings; 28 Sep) ----------
   Boxed grouped rows are fine on library and configuration surfaces; avoid them on
   operational work queues (Nicholas, 28 Sep). Markup: ui.js rowGroup(), groupRow(). */
.rowgroup { background: var(--bg-raised); border: 0.5px solid var(--line-2); border-radius: var(--r-group); overflow: hidden; }
.rowgroup .row { height: auto; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-radius: 0; color: var(--text-1); text-decoration: none; }
.rowgroup .row + .row { box-shadow: inset 0 0.5px 0 var(--line-1); }
.rowgroup .row.focused { background: var(--bg-hover); }
.rowgroup .row.focused.kbd-focus { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.rowgroup .row.quiet .gr-name { color: var(--text-2); }
.tile { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); background: var(--bg-hover); color: var(--text-2); }
.tile .ico { width: 16px; height: 16px; }
.rowgroup .row.focused .tile { background: var(--bg-pressed); }
.rowgroup .row.child.focused .tile { background: none; }
.gr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gr-name { font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-sub { color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-meta { flex: none; color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); font-variant-numeric: tabular-nums; text-align: right; }
.gr-meta b { color: var(--text-1); font-weight: var(--w-medium); }
.gr-meta .mark { font-size: var(--fs-meta); }
.gr-chev { flex: none; width: 14px; height: 14px; color: var(--text-4); }
.gr-off .gr-meta { color: var(--text-4); }
.header-act { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: var(--text-2); padding: 0 8px; height: var(--h-control); border-radius: var(--r-control); cursor: default; text-decoration: none; }
.header-act:hover { background: var(--bg-hover); color: var(--text-1); }
.header-act .ico { width: 14px; height: 14px; }
.header-act .kbd { margin-left: 2px; }
.rowgroup .row.choice { cursor: default; }
.rowgroup .row.choice[aria-checked="true"] { background: var(--accent-soft); }
.rowgroup .row.choice[aria-disabled="true"] .gr-name { color: var(--text-3); }
.radio { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-3); }
.row.choice[aria-checked="true"] .radio { border: 4px solid var(--accent); }
@media (max-width: 760px) {
  .rowgroup .row { padding: 8px 12px;}
}
.rowgroup.compact .row { min-height: 40px; padding: 4px 16px; }
.rowgroup.compact .tile { width: 24px; height: 24px; margin: 0 4px; border-radius: var(--r-block); }
.rowgroup.compact .gr-main { flex-direction: row; align-items: baseline; gap: 12px; }
.rowgroup.compact .gr-name { flex: none; width: 128px; }
.rowgroup.compact .gr-sub { font-size: var(--fs-ui); }
.rowgroup .row.child { min-height: 40px; padding: 4px 16px; }
.rowgroup .row.child .tile { background: none; color: var(--text-3); }
.rowgroup .row.child .gr-main { flex-direction: row; align-items: baseline; gap: 10px; }
.rowgroup .row.child .gr-name { font-weight: var(--w-normal); }
.rowgroup-label { padding: 10px 16px 4px 60px; font-size: var(--fs-meta); color: var(--text-3); font-weight: var(--w-normal); box-shadow: inset 0 0.5px 0 var(--line-1); }
.rowgroup-label + .row { box-shadow: none; }
@media (max-width: 760px) {
  .rowgroup.compact .gr-main, .rowgroup .row.child .gr-main { flex-direction: column; align-items: stretch; gap: 2px;}
  .rowgroup.compact .gr-name { width: auto;}
  .rowgroup.compact .gr-sub { font-size: var(--fs-meta);}
  .rowgroup.compact .row, .rowgroup .row.child { padding-left: 12px; padding-right: 12px;}
  .rowgroup-label { padding-left: 56px;}
}

/* ---------- TriCheck, DrillMenu, multi-value paste (frontend, 7 Oct 2026) ---------- */
/* A bulk-edit checkbox: on, off, or mixed (on for some of the selected objects). Mixed is the accent
   with a dash, never grey: grey reads as disabled. */
.tri { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: default; text-align: left; min-width: 0; }
.tri-box { position: relative; width: 14px; height: 14px; flex: none; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--line-3); background: var(--bg-raised); }
.tri[aria-checked="true"] .tri-box, .tri[aria-checked="mixed"] .tri-box { background: var(--accent); border-color: var(--accent); }
.tri[aria-checked="true"] .tri-box::after { content: ""; position: absolute; left: 3.5px; top: 2.5px; width: 6px; height: 3.5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.tri[aria-checked="mixed"] .tri-box::after { content: ""; position: absolute; left: 2.5px; top: 5.25px; width: 7px; height: 1.5px; border-radius: 1px; background: #fff; }
.tri-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tri-n { color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tri.menu-item .tri-n { margin-left: auto; }
.tri:not(.menu-item):focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; }
/* DrillMenu: layer 1 rows (box | name … n of m ›), drilled in place; layer 2 has a Back row. */
.dm-row { display: flex; align-items: center; }
.dm-row .tri.menu-item { flex: 1 1 auto; width: auto; margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dm-row .dm-in { flex: none; width: auto; margin-left: 0; padding: 0 8px 0 6px; gap: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--text-3); }
.dm-row .dm-in .end { margin-left: 0; }
.dm-row:hover .tri.menu-item, .dm-row:hover .dm-in { background: var(--bg-hover); }
.dm-back .ico { color: var(--text-3); }
.dm-h .n { margin-left: 4px; font-variant-numeric: tabular-nums; }
/* BulkMenu (8 Oct 2026): a read-only item (set by the source data) is quiet and takes no click; the add
   row's box is dashed with a +; a rename button sits at the row's end, shown on hover and focus. */
.tri[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.tri[aria-disabled="true"] .tri-box { opacity: .55; }
.menu-item.tri[aria-disabled="true"]:hover { background: none; }
.tri-box.add { border-style: dashed; border-color: var(--line-3); background: none; }
.tri-box.add::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; line-height: 1; color: var(--text-3); }
.dm-irow { position: relative; }
.dm-irow .dm-ren { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; }
/* On hover or focus the rename button takes the note's place at the row's end (Linear's row actions). */
.dm-irow:hover .dm-ren, .dm-irow:focus-within .dm-ren, .dm-ren:focus-visible { opacity: 1; }
.dm-irow:hover .tri-n, .dm-irow:focus-within .tri-n { visibility: hidden; }
/* On touch the button always shows, beside the note. */
@media (hover: none) { .dm-irow .dm-ren { opacity: 1; } .dm-irow .tri.menu-item { padding-right: 40px; } .dm-irow:focus-within .tri-n, .dm-irow:hover .tri-n { visibility: visible; } }
.dm-rename { display: grid; gap: 4px; padding: 4px 14px 6px; }
.dm-rename .field { width: 100%; box-sizing: border-box; }
.dm-rename .menu-note { margin: 0; }
/* The menu's foot (BulkMenu's "3 changes · Review…"); the same rule as #611's sticky foot, here without it. */
.popover .menu-foot { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 0.5px solid var(--line-1); }
.menu-foot .spacer { flex: 1; }
/* Multi-value paste: one quiet line, the values not found behind it. */
.fm-paste { display: block; }
.fm-paste .linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; cursor: default; }
.fm-paste .linkish:hover { color: var(--text-1); }
.fm-nf { max-height: 120px; overflow: auto; user-select: text; font-variant-numeric: tabular-nums; color: var(--text-2); }
.hc-vals { max-width: 320px; white-space: normal; overflow-wrap: anywhere; }

/* ---------- Offer, Field, DateField (frontend, 5 Oct 2026) ---------- */
/* An Offer: supplier · deliveries · price · lateness, on one grid, so offers line up and compare. */
.offer { display: grid; position: relative; grid-template-columns: var(--of-name, 168px) minmax(116px, max-content) 84px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 8px 0; border-top: 0.5px solid var(--line-1); font-size: var(--fs-ui); font-weight: var(--w-normal); color: var(--text-1); }
.offer:first-child { border-top: 0; }
.of-name { font-weight: var(--w-medium); }
.of-parcels { display: grid; gap: 2px; }
.of-p { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.of-q { min-width: 34px; text-align: right; }
.of-d { color: var(--text-2); }
.of-price { font-variant-numeric: tabular-nums; }
.of-late, .of-meta { color: var(--text-3); font-size: var(--fs-meta); }
.of-total { color: var(--text-3); font-size: var(--fs-meta); text-align: right; }
.of-state { grid-column: 2 / -1; }
.of-state.none { color: var(--text-3); }
.of-state.none .st-mark { margin-left: 10px; vertical-align: baseline; }
.of-state.none .st-mark .st-word, .of-state.none .attn { color: var(--text-1); }
.of-note { grid-column: 2 / -1; color: var(--text-2); font-size: var(--fs-meta); }
.of-act { position: absolute; right: 0; top: 6px; opacity: 0; transition: opacity var(--t-quick) var(--ease); }
.offer:hover .of-act, .offer:focus-within .of-act, .of-act:focus-within { opacity: 1; }
@media (hover: none) { .of-act { opacity: 1; } }
@media (max-width: 760px) {
  .offer { grid-template-columns: 1fr auto; row-gap: 2px; }
  .of-name { grid-column: 1; } .of-act { opacity: 1; }
  .of-parcels, .of-price, .of-late, .of-state, .of-note, .of-meta { grid-column: 1 / -1; }
}
/* A Field: label above, control, then one line of help or error. */
.fld { display: grid; gap: 4px; align-content: start; min-width: 0; }
.fld-l { color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); }
.fld-h { color: var(--text-3); font-size: var(--fs-meta); }
.fld-err { color: var(--danger); font-size: var(--fs-meta); }
.fld .field { min-width: 0; width: 100%; box-sizing: border-box; }
.fld.bad .field, .field[aria-invalid="true"] { border-color: var(--danger); }
.dfield { display: grid; gap: 3px; }
.df-read { color: var(--text-3); font-size: var(--fs-meta); min-height: 15px; }

/* ---------- ValueButton (frontend, 6 Oct 2026): a table value that opens its popover ---------- */
.vbtn { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 2px 6px; margin: -2px -6px; font: inherit; color: inherit; line-height: inherit; text-align: inherit; border-radius: var(--r-control); cursor: default; white-space: nowrap; }
.vbtn:hover, .vbtn[aria-expanded="true"] { background: var(--bg-pressed); }
.vbtn:focus-visible { outline: 1px solid var(--accent-ring); outline-offset: 0; }
.vbtn .ico { width: 12px; height: 12px; color: var(--text-2); }

/* ---------- Deliveries (frontend, 6 Oct 2026): Quantity · Date rows, + Add delivery, the balance ---------- */
.dl { display: grid; gap: 8px; }
.dl-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; gap: 6px 8px; align-items: start; }
.dl-row, .dl-rest { display: contents; }
.dl-qh { text-align: right; padding-right: 10px; }
.dl .field.num { text-align: right; font-variant-numeric: tabular-nums; }
.dl-rq, .dl-rd { line-height: 30px; color: var(--text-3); }
.dl-rq { text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
.dl-rd { padding-left: 10px; }
.dl-foot { display: flex; align-items: center; gap: 8px; margin-left: -6px; }
.dl-bal { margin-left: auto; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }

/* ---------- ExpandRow (frontend, 6 Oct 2026; the hierarchy in the gutter, 6 Oct, after #609 and Nicholas's review) ---------- */
.dt tr.xr { cursor: pointer; }
.dt tr.xr:hover td, .dt tr.xr:focus-visible td, .dt tr.dt-child:focus-visible td { background: var(--bg-hover); }
.dt tr.dt-child:hover td { background-color: var(--bg-hover); }
/* Focus is the shared 1px edge, never a ring round the row (a ring is cut by the frozen columns). */
.dt tr.xr:focus-visible, .dt tr.dt-child:focus-visible { outline: none; }
.dt tr.xr:focus-visible td:first-child, .dt tr.dt-child:focus-visible td:first-child { box-shadow: var(--focus-edge); }
/* The gutter. A table with parent or child rows gives every identifying cell (and its header) a
   20px leading gutter. The hierarchy lives there: the caret on a parent, a faint guide on a child.
   The data, the identifier included, starts at the same x on every row (Nicholas, 6 Oct: indent the
   hierarchy, not the data). The identifying cell is frozen (sticky), so it places the marks. */
.dt:has(tr.xr, tr.dt-child) .dt-id,
.dt tr.xr > td:has(> .xr-car),
.dt:has(tr.xr > td:first-child > .xr-car) thead th:first-child { padding-left: 32px; }
/* In a record page (ObjectView `.doc`), the gutter hangs in the page margin (7 Oct 2026, supplier-po
   #615): the identifier lines up with the section heading, as every ObjectView table does, and the
   caret and the guide sit left of it, in the margin. The table's scroll box reaches into the margin
   so they are not clipped. */
.doc .dt:has(tr.xr, tr.dt-child) .dt-id,
.doc .dt tr.xr > td:has(> .xr-car),
.doc .dt:has(tr.xr > td:first-child > .xr-car) thead th:first-child { padding-left: 0; }
.doc .dt .xr-car { left: -22px; }
.doc .dt tbody td.dt-under::before { left: -14px; }
.doc .table-wrap:has(> .dt tr.xr, > .dt tr.dt-child) { margin-left: -28px; padding-left: 28px; }
/* Groups too (Nicholas, 7 Oct 2026: indent the hierarchy, not the data). A group band is hierarchy: its
   chevron sits in the same leading gutter (or over the tick column), and its label starts where the
   identifying column's content starts (`--dt-lead`). A row's data never moves right because it is in
   a group, or in a group and under a parent: every identifier, and every column, stays under its
   header. A table without ticks gives its identifying column the gutter as soon as it has groups. */
.skuba-dt:has(tr.gband):not(:has(thead th.tick)) .dt-id { padding-left: 32px; }
.skuba-dt { --dt-lead: 10px; }
.skuba-dt:has(tr.gband), .skuba-dt:has(tr.xr, tr.dt-child) { --dt-lead: 32px; }
.skuba-dt:has(thead th.tick) { --dt-lead: 50px; }
.skuba-dt:has(thead th.tick):has(tr.xr, tr.dt-child) { --dt-lead: 70px; }
/* The band's chevron (16px with its margins) and gap (10px) come before the label. */
.skuba-dt tr.gband .band { padding-left: max(6px, calc(var(--dt-lead) - 26px)); }
.xr-car { position: absolute; left: 12px; top: 0; bottom: 0; width: 16px; display: grid; place-items: center; color: var(--text-4); transition: transform var(--t-quick) var(--ease), color var(--t-quick) var(--ease); }
.xr-car .ico { width: 12px; height: 12px; }
.dt tr.xr:hover .xr-car, .dt tr.xr:focus-visible .xr-car { color: var(--text-2); }
.dt tr.xr[aria-expanded="true"] .xr-car { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .xr-car { transition: none; } }
/* ChildRows, the column-continuation rollout (type 1): the parent's own rows, under it, on the same
   column grid. No card, no fill, no elevation, no indent of the data. The child reads as a child by
   its text-2 identifier and one faint guide line in the gutter, under the parent's caret. Hover,
   focus and selected are the table's own. */
.dt tbody td.dt-under { color: var(--text-2); font-weight: var(--w-normal); }
/* The guide is a pseudo-element, so the row's hover, focus and selected fills never hide it. */
.dt tbody td.dt-under::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: var(--line-2); pointer-events: none; }
.dt tbody td.dt-under a.ref { font-weight: var(--w-normal); }
.dt tr.xd > td, .dt tr.xd > td:first-child { position: static; background: var(--bg-canvas); height: auto; padding: 2px 12px 16px 44px; white-space: normal; border-bottom: 0.5px solid var(--line-1); }
/* ---------- WorkPanel, the work-card rollout (type 2; frontend, 6 Oct 2026) ----------
   A richer workspace that folds out under an ExpandRow row: its own sections and controls, which do
   not map to the parent's columns. A light card (Linear's inline sub-issue composer): hairline edge,
   a soft shadow, its own padding, the actions at the bottom right. The card is not indented: it
   spans the table's row bounds (4px in), and its own edge and padding say "nested workspace"
   (Nicholas, 6 Oct). Never used for rows that continue the parent's columns: that is ChildRows. */
.dt tr.xd.xd-card > td, .dt tr.xd.xd-card > td:first-child { padding: 4px 4px 12px; background: var(--bg-canvas); border-bottom: 0.5px solid var(--line-1); }
.wp { display: grid; gap: 12px; padding: 14px 16px; background: var(--bg-raised); border: 0.5px solid var(--line-2); border-radius: var(--r-group); box-shadow: var(--shadow-card); white-space: normal; font-weight: var(--w-normal); color: var(--text-1); }
.wp-h { display: flex; align-items: baseline; gap: 8px; font-weight: var(--w-medium); }
.wp-h .src { font-weight: var(--w-normal); }
.wp-b { display: grid; gap: 12px; min-width: 0; max-width: 960px; }
.wp-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 0.5px solid var(--line-1); }
.wp-note { color: var(--text-3); font-size: var(--fs-meta); }
.wp-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .dt tr.xd > td, .dt tr.xd > td:first-child { padding-left: 12px; } .dt tr.xd > td > * { position: sticky; left: 12px; max-width: calc(100vw - 48px); }
  .dt tr.xd.xd-card > td, .dt tr.xd.xd-card > td:first-child { padding-left: 4px; } .dt tr.xd.xd-card > td > .wp { left: 4px; max-width: calc(100vw - 64px); }
  .wp-foot { flex-wrap: wrap; row-gap: 8px; } .wp-note { flex: 1 1 100%; }
}

/* ---- PeekPanel (dictionary, 9 Oct 2026): a wide Peek, floating inset on the canvas's right; the list stays live ---- */
.peek-host { position: absolute; top: 8px; right: 8px; bottom: 8px; width: clamp(560px, 52%, 760px); z-index: 30; pointer-events: none; display: flex; }
.peek-panel { pointer-events: auto; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-raised); border: 0.5px solid var(--line-2); border-radius: var(--r-surface); box-shadow: var(--shadow-raised); overflow: hidden; outline: none; }
.pk-h { display: flex; align-items: flex-start; gap: 8px; padding: 14px 14px 6px 18px; }
.pk-t { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pk-t b { font-size: var(--fs-body); font-weight: var(--w-semibold); color: var(--text-1); }
.pk-sub { color: var(--text-3); font-size: var(--fs-ui); font-weight: var(--w-normal); }
.pk-facts { margin: 0; padding: 0 18px 8px; color: var(--text-3); font-size: var(--fs-ui); font-weight: var(--w-normal); }
.pk-facts .sep { color: var(--text-4); }
.pk-facts b { color: var(--text-1); font-weight: var(--w-medium); }
.pk-tabs { padding: 4px 18px 8px; }
.pk-body { flex: 1; min-height: 0; overflow: auto; padding: 0 10px 8px 10px; }
.pk-f { display: flex; gap: 16px; padding: 10px 18px; border-top: 0.5px solid var(--line-1); font-size: var(--fs-ui); }
@media (max-width: 900px) { .peek-host { left: 8px; width: auto; } }
.pk-f a { color: var(--text-2); text-decoration: none; }
.pk-f a:hover { color: var(--text-1); text-decoration: underline; text-decoration-color: var(--text-4); text-underline-offset: 2px; }
/* ---------- Still to buy (Purchasing recut, P1, 8 Oct 2026) ---------- */
.stb .stb-fam { font-weight: var(--w-semibold); }
.stb .stb-n.short { color: var(--warning-ink); font-weight: var(--w-semibold); }
.stb .stb-over { margin-left: 8px; color: var(--text-3); font-size: var(--fs-meta); font-weight: var(--w-normal); }
.stb .stb-due { display: inline-flex; align-items: flex-end; gap: 8px; }
.stb .stb-spark { display: block; fill: var(--bar-ink); opacity: 0.85; overflow: visible; }
.stb .stb-spark .stb-hit { fill: transparent; }
.stb .stb-spark .stb-hit:hover { fill: var(--bar-ink); opacity: 0.12; }
.stb td.num .stb-over { display: inline-block; min-width: 0; }
.hovercard .stb-hc-row { display: flex; justify-content: space-between; gap: 18px; padding: 1px 0; }
/* Inside lead time (Nicholas, 9 Oct 2026): the red dot in the info panel that names the marked cells. */
.stb-lead-dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--danger); vertical-align: 1px; }
.stb-sep { margin: 0 8px; color: var(--text-3); }

/* ERP status sign: a quiet glyph, 14px in a row, 13px beside a word; ink one step darker only for "differs". */
.erp-sign { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); vertical-align: middle; }
.erp-sign .ico { width: 14px; height: 14px; }
.erp-sign.with-word { font-size: var(--fs-ui); font-weight: var(--w-normal); }
.erp-sign.with-word .ico { width: 13px; height: 13px; }
.erp-sign .ico { color: var(--text-3); }
.erp-sign.check .ico { color: var(--erp-ok); }
.erp-sign.half .ico { color: var(--erp-differs); }
.erp-sign.dashed .ico { color: var(--erp-missing); }
.erp-sign.with-word > span { color: var(--text-2); }

/* To buy: the tick column and the caret gutter are tight (Nicholas, 10 Oct 2026: "the space between the tick marks and
   the first column narrower"). Scoped to this screen; the shared table keeps its gutter elsewhere. */
.stb .skuba-dt col:first-child { width: 30px !important; }
.stb .skuba-dt td.tick, .stb .skuba-dt th.tick { width: 30px; padding-left: 10px; }
.stb .skuba-dt td:nth-child(2), .stb .skuba-dt th:nth-child(2) { left: 30px; }
.stb .skuba-dt:has(tr.xr, tr.dt-child) .dt-id { padding-left: 22px; }
.stb .skuba-dt .xr-car { left: 3px; }