/* =============================================================================
   THE DESK — shell, panel, tabs and compact tables (2026-10-01).

   Loaded last, after application.css, and built only from tokens.css. The
   owner's direction: a left-hand nav bar, less scrolling, one right-hand panel
   for every detail, buttons with icons rather than links, and far less text.
   docs/ui-guide.md, "Desk conventions", says how each piece is meant to be used.
   ========================================================================== */

/* ---------- the shell ---------- */

.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-8); }
.wrap--bare { max-width: 480px; padding-top: var(--space-8); }

/* ---------- the sidebar ---------- */

.side {
  position: sticky; top: 0; height: 100vh; flex: none; z-index: var(--layer-side);
  width: var(--side-w); display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--surface); border-right: 1px solid var(--border);
}
/* Animated only while the person folds it, never on a resize. */
.shell.is-folding .side { transition: width var(--motion) var(--ease); }
.side-top { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-1); }
.brand {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1;
  color: var(--ink); text-decoration: none; font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight); font-size: var(--text-md);
}
.brand-mark { flex: none; display: block; border-radius: var(--radius-md); }
.side-fold {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--radius-md); color: var(--ink-faint);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.side-fold:hover { background: var(--surface-sunk); color: var(--ink); }
.side-fold .icon { --icon-size: 16px; }
.side-fold .fold-open { display: none; }

.side-nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; min-height: 0; margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1); }
.side-l {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-semi); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: var(--tracking-label); white-space: nowrap;
}
.side-l:first-child { padding-top: 0; }
/* Sidebar links are ghost buttons: no ground until hover, filled when current. */
.side-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 34px;
  padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--ink-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
  white-space: nowrap; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.side-link .icon { --icon-size: 17px; color: var(--ink-faint); }
.side-link:hover { background: var(--surface-sunk); color: var(--ink); }
.side-link:hover .icon { color: var(--ink-muted); }
.side-link:active { background: var(--border-soft); }
.side-link.is-on { background: var(--accent-tint); color: var(--accent); font-weight: var(--weight-semi); }
.side-link.is-on .icon { color: var(--accent); }
.side-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-n { margin-left: auto; font-size: var(--text-2xs); color: var(--ink-faint); }

/* The commodity switcher, at the top of the sidebar. */
.cswitch { position: relative; }
.cswitch > summary {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--ground); white-space: nowrap;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.cswitch > summary:hover { border-color: var(--border-strong); }
.cswitch[open] > summary { border-color: var(--accent); box-shadow: var(--focus-ring); }
.cs-icon { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--accent); }
.cs-icon .icon { --icon-size: 18px; }
.cs-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.cs-name { font-weight: var(--weight-semi); font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.cs-meta { font-size: var(--text-2xs); color: var(--ink-faint); }
.cs-flag { color: var(--caution); display: inline-flex; }
.cs-flag .icon { --icon-size: 13px; }
.cs-chev { --icon-size: 14px; color: var(--ink-faint); }
.cs-menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--layer-menu);
  width: 300px; max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
  padding: var(--space-2);
}
.cs-head {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint);
}
.cs-head .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.cs-group {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint);
  border-top: 1px solid var(--border-soft);
}
.cs-item {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: baseline;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: inherit; font-size: var(--text-sm);
}
.cs-item:hover { background: var(--surface-sunk); }
/* The commodity on screen: a tick in the gutter and the name in weight, on a
   fill — not a coloured bar. */
.cs-item.is-on, .cs-item.is-on[aria-current="true"] { background: var(--surface-sunk); font-weight: var(--weight-semi); }
.cs-i-on { --icon-size: 14px; align-self: center; color: var(--accent); }
.cs-i-vol { font-size: var(--text-xs); color: var(--ink-faint); }
.cs-i-warn { font-size: var(--text-2xs); color: var(--critical); font-weight: var(--weight-semi); }

/* You, at the foot: the theme and signing out, behind your name. */
.acct { position: relative; }
.acct > summary {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2);
  border-radius: var(--radius-md); white-space: nowrap;
  transition: background var(--motion-fast) var(--ease);
}
.acct > summary:hover, .acct[open] > summary { background: var(--surface-sunk); }
.acct-av {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-tint-strong); color: var(--accent); font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.acct-who { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.acct-who b { font-size: var(--text-sm); font-weight: var(--weight-semi); overflow: hidden; text-overflow: ellipsis; }
.acct-who small { font-size: var(--text-2xs); color: var(--ink-faint); }
.acct-chev { --icon-size: 14px; color: var(--ink-faint); }
.acct-menu {
  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: var(--layer-menu);
  width: 248px; padding: var(--space-2);
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
}
.acct-card { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-2); }
.acct-card b { display: block; font-size: var(--text-sm); }
.acct-card span { display: block; font-size: var(--text-xs); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.acct-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--ink); text-decoration: none; text-align: left;
  transition: background var(--motion-fast) var(--ease);
}
.acct-item .icon { --icon-size: 15px; color: var(--ink-faint); }
.acct-item:hover { background: var(--surface-sunk); }
.acct-sep { height: 1px; background: var(--border-soft); margin: var(--space-2) 0; }
.acct-theme { padding: var(--space-2) var(--space-3); }
.acct-theme .label { display: block; margin-bottom: var(--space-2); }
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; background: var(--surface-sunk); border-radius: var(--radius-md); }
.theme-seg button { padding: var(--space-2) 0; border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--ink-muted);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.theme-seg button:hover { color: var(--ink); }
.theme-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); font-weight: var(--weight-semi); box-shadow: var(--shadow-card); }

/* Collapsed to icons: the labels go, their tooltips arrive (shell controller). */
:root[data-side="collapsed"] .side { width: var(--side-w-icons); padding-left: var(--space-2); padding-right: var(--space-2); }
:root[data-side="collapsed"] .side .side-t,
:root[data-side="collapsed"] .side .side-n { display: none; }
:root[data-side="collapsed"] .side-top { flex-direction: column; gap: var(--space-2); }
:root[data-side="collapsed"] .brand { flex: none; }
:root[data-side="collapsed"] .side-fold .fold-close { display: none; }
:root[data-side="collapsed"] .side-fold .fold-open { display: inline-flex; }
:root[data-side="collapsed"] .side-l { padding: var(--space-3) 0 var(--space-1); text-align: center; font-size: 0; }
:root[data-side="collapsed"] .side-l::before { content: ""; display: block; height: 1px; background: var(--border-soft); margin: 0 var(--space-2); }
:root[data-side="collapsed"] .side-l:first-child { display: none; }
:root[data-side="collapsed"] .side-link { justify-content: center; padding: 0; }
:root[data-side="collapsed"] .cswitch > summary { justify-content: center; padding: var(--space-2) 0; }
:root[data-side="collapsed"] .cs-menu { left: calc(100% + var(--space-3)); top: 0; }
:root[data-side="collapsed"] .acct > summary { justify-content: center; }

/* ---------- the strip ---------- */

.strip {
  position: sticky; top: 0; z-index: var(--layer-strip);
  display: flex; align-items: center; gap: var(--space-4); min-height: var(--strip-h);
  padding: var(--space-2) var(--space-6);
  background: var(--ground); border-bottom: 1px solid var(--border);
}
.strip-menu { display: none; }
.strip-where { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; }
.strip-h { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); white-space: nowrap; }
.strip-h > span { overflow: hidden; text-overflow: ellipsis; }
.strip-h .icon { --icon-size: 18px; color: var(--accent); }
.brand-mark { flex: none; display: inline-block; border-radius: 4px; vertical-align: -0.15em; }
.strip-sub { font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.strip-tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.strip-acts { display: flex; align-items: center; gap: var(--space-2); }
.strip-acts form { display: contents; }
.strip .btn { min-height: 32px; font-size: var(--text-sm); padding: 6px var(--space-4); }
.strip .btn--icon { padding: 6px 8px; }
.strip .btn .icon { --icon-size: 15px; }

/* The week, in the strip: commodity, ‹ W41 ›, its state and season. */
.anchor { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); min-width: 0; }
.anchor strong { font-size: var(--text-lg); font-weight: var(--weight-bold); padding: 0 var(--space-1); }
.anchor-cm { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semi); color: var(--ink-muted); margin-right: var(--space-2); white-space: nowrap; }
.anchor-cm .icon { --icon-size: 16px; color: var(--accent); }
.anchor-season { color: var(--ink-faint); font-size: var(--text-xs); white-space: nowrap; }
.anchor-step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px;
  padding: 0 var(--space-2); color: var(--ink-muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.anchor-step .icon { --icon-size: 15px; }
.anchor-step:hover { background: var(--surface-sunk); border-color: var(--border-strong); color: var(--ink); }
.anchor-step:active { transform: translateY(1px); }
.anchor-step--turn { border-style: dashed; border-color: var(--accent); }
.anchor-turn { margin-left: .3em; font-size: var(--text-2xs); }

.lockclock { margin-left: 0; padding: var(--space-1) var(--space-3); min-height: 32px; }

/* ---------- narrow: the sidebar becomes a drawer ---------- */

.side-scrim { display: none; }
@media (max-width: 1240px) {
  .anchor-season, .lockclock .lc-date { display: none; }
}
@media (max-width: 1080px) {
  .anchor-cm-t { display: none; }
  .strip .btn .btn-t { display: none; }
}
@media (max-width: 900px) {
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: min(280px, 84vw);
    transform: translateX(-100%); box-shadow: var(--shadow-panel);
    transition: transform var(--motion) var(--ease);
  }
  :root[data-side="collapsed"] .side { width: min(280px, 84vw); padding: var(--space-3); }
  :root[data-side="collapsed"] .side .side-t, :root[data-side="collapsed"] .side .side-n { display: revert; }
  :root[data-side="collapsed"] .side-top { flex-direction: row; }
  :root[data-side="collapsed"] .side-link { justify-content: flex-start; padding: 0 var(--space-3); }
  :root[data-side="collapsed"] .side-l { font-size: var(--text-2xs); text-align: left; padding: var(--space-4) var(--space-3) var(--space-2); }
  :root[data-side="collapsed"] .side-l::before { display: none; }
  :root[data-side="collapsed"] .cs-menu { left: 0; top: calc(100% + var(--space-2)); }
  :root[data-side="collapsed"] .side-fold .fold-close { display: inline-flex; }
  :root[data-side="collapsed"] .side-fold .fold-open { display: none; }
  .shell.is-open .side { transform: none; }
  .shell.is-open .side-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--layer-side) - 1); animation: fade-in var(--motion) var(--ease) both; }
  .strip-menu { display: inline-flex; }
  .strip { padding: var(--space-2) var(--space-4); gap: var(--space-3); flex-wrap: wrap; }
  .wrap { padding: var(--space-4) var(--space-4) var(--space-7); }
  .cs-menu { width: min(300px, calc(84vw - 2 * var(--space-3))); }
  /* Without script there is no menu button to open it, so it stays in the flow. */
  .shell:not(.is-scripted) { flex-direction: column; }
  .shell:not(.is-scripted) .side { position: static; transform: none; width: auto; height: auto; box-shadow: none; }
}
@media (max-width: 640px) {
  .strip-where { flex-basis: calc(100% - 48px); }
  .strip-tools { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .lockclock .lc-l { display: none; }
  .anchor-state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* ---------- the right-hand panel ----------
   One component for every detail: block, line, decision, vessel, lot, holder,
   inspection, MRL result. A header that stays put (title, chips, an action,
   close) over a body of sections that scrolls on its own. Overlaid over a
   scrim; on a wide screen docked beside the content instead, so the rows it
   came from stay readable and clickable. */

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--panel-w), 100vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-panel);
  z-index: var(--layer-panel);
  animation: drawer-in var(--motion) var(--ease) both;
}
.panel:focus { outline: none; }
/* The grip on the panel's left edge: drag it, or focus it and use the arrow
   keys; double-click puts the width back (panel_size_controller). */
.panel-grip { position: absolute; top: 0; bottom: 0; left: 0; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; }
.panel-grip::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 44px; margin-top: -22px;
                     border-radius: var(--radius-pill); background: var(--border-strong); opacity: 0;
                     transition: opacity var(--motion-fast) var(--ease); }
.panel-grip:hover::after, .panel-grip:focus-visible::after, .panel.is-resizing .panel-grip::after { opacity: 1; background: var(--accent); }
.panel-grip:focus-visible { outline: none; }
.panel.is-resizing { user-select: none; }
.panel.is-resizing * { pointer-events: none; }
@media (max-width: 640px) { .panel-grip { display: none; } }
.panel-head {
  flex: none; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.panel-title { min-width: 0; flex: 1; }
.panel-title h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); line-height: 1.25; overflow-wrap: anywhere; }
.panel-title h2 .icon { --icon-size: 17px; color: var(--accent); flex: none; }
.panel-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-muted); }
.panel-acts { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.panel-acts form { display: contents; }
.panel .d-close { margin-left: 0; padding: 5px 7px; font-size: var(--text-xs); }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-5) var(--space-7); overscroll-behavior: contain; }
.panel-body > .d-sec:first-child { margin-top: var(--space-4); }
.panel .d-sec { margin-top: var(--space-5); }
.panel .d-sec > h3 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.panel .d-sec > h3 .icon { --icon-size: 12px; }
.panel-body > .vpanel-facts:first-child { margin-top: var(--space-4); }

@media (min-width: 1600px) {
  .shell:has(> .main .panel) .main { padding-right: var(--panel-w); }
  .shell:has(> .main .panel) .scrim { display: none; }
  .panel { box-shadow: none; }
}
@media (max-width: 640px) {
  .panel-head { padding: var(--space-3) var(--space-4); }
  .panel-body { padding: 0 var(--space-4) var(--space-6); }
}

/* A row that opens the panel says so: the whole row is the link, it washes on
   hover, and the open one is filled a step deeper than the hover wash.
   SELECTION IS A FILL, NEVER A STRIPE: no accent bar on an edge, here or
   anywhere (Reghardt, 2026-10-12: "that little accent … do it properly"). */
.is-on[aria-current="true"], [aria-current="true"].dt-row { background: var(--accent-tint-strong); }

/* ---------- compact tables ----------
   One line per row, chips and numbers. `.dtable` is a div grid like the admin
   tables; each use sets its columns with a modifier. */

.dtable { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.dt-row {
  display: grid; align-items: center; gap: var(--space-3); min-height: var(--row-h);
  grid-template-columns: 90px minmax(0, 1fr) 72px 56px 110px 56px;
  padding: var(--space-1) var(--space-4); border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm); color: inherit; text-decoration: none;
  transition: background var(--motion-fast) var(--ease);
}
.dtable--cm .dt-row { grid-template-columns: 130px 80px minmax(0, 1fr) 72px 56px 110px 56px; }
/* Stock: what is written on the pallets, beside the counts. Narrower windows drop
   inventory code, then brand, then pack and count, before the essentials. */
.dtable--stock .dt-row { grid-template-columns: 80px minmax(110px, 1fr) 56px 52px 118px 88px 128px 96px 40px 56px; }
.dtable--stock.dtable--cm .dt-row { grid-template-columns: 120px 80px minmax(110px, 1fr) 56px 52px 118px 88px 128px 96px 40px 56px; }
.dtable--stock .is-warn { color: var(--caution); font-weight: var(--weight-semi); }
@media (max-width: 1400px) {
  .dtable--stock .dt-inv { display: none; }
  .dtable--stock .dt-row { grid-template-columns: 80px minmax(110px, 1fr) 56px 52px 118px 88px 128px 96px 56px; }
  .dtable--stock.dtable--cm .dt-row { grid-template-columns: 120px 80px minmax(110px, 1fr) 56px 52px 118px 88px 128px 96px 56px; }
}
@media (max-width: 1240px) {
  .dtable--stock .dt-brand { display: none; }
  .dtable--stock .dt-row { grid-template-columns: 80px minmax(110px, 1fr) 56px 52px 118px 88px 128px 56px; }
  .dtable--stock.dtable--cm .dt-row { grid-template-columns: 120px 80px minmax(110px, 1fr) 56px 52px 118px 88px 128px 56px; }
}
@media (max-width: 1080px) {
  .dtable--stock .dt-pack { display: none; }
  .dtable--stock .dt-row { grid-template-columns: 80px minmax(110px, 1fr) 56px 52px 118px 88px 56px; }
  .dtable--stock.dtable--cm .dt-row { grid-template-columns: 120px 80px minmax(110px, 1fr) 56px 52px 118px 88px 56px; }
}
.depot-decide { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
a.dt-row:hover { background: var(--surface-sunk); }
a.dt-row:active { background: var(--accent-tint-strong); }
.dt-row:last-child { border-bottom: 0; }
.dt-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-row .num { text-align: right; }
.dt-head { min-height: 30px; background: var(--surface-sunk); font-size: var(--text-2xs); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: var(--weight-semi); }
.dt-group { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); background: var(--ground); border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); }
.dt-group .icon { --icon-size: 14px; color: var(--ink-faint); }
.dt-group-n { font-size: var(--text-xs); color: var(--ink-muted); }
.dt-group-n b { color: var(--ink); }
.dt-go .icon { --icon-size: 14px; color: var(--border-strong); }
a.dt-row:hover .dt-go .icon { color: var(--accent); }
.dt-cm { display: inline-flex; align-items: center; gap: var(--space-2); }
.dt-cm .icon { --icon-size: 14px; color: var(--accent); }
.aim-chip .cc { border: 0; background: transparent; padding: 0; min-width: 0; color: inherit; }
@media (max-width: 760px) {
  .dt-head { display: none; }
  .dt-row, .dtable--cm .dt-row { grid-template-columns: minmax(0, 1fr) auto 48px 16px; }
  .dt-row > :nth-child(n+5):not(.dt-go) { display: none; }
  .dtable--cm .dt-row > :first-child { display: none; }
  .dtable--cm .dt-row { grid-template-columns: 70px minmax(0, 1fr) 48px 16px; }
  .dtable--cm .dt-row > :nth-child(5), .dtable--cm .dt-row > :nth-child(6) { display: none; }
}

/* How fresh a live view is: a clock and words, the caution tint once old. */
.fresh { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; align-self: center;
  font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }
.fresh .icon { --icon-size: 13px; }
.fresh.is-stale { color: var(--caution); }

/* One compact filter row, everywhere. */
.afilters { margin-bottom: var(--space-4); }

/* ---------- cards: one surface, one compact heading ---------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.card-h {
  display: flex; align-items: center; gap: var(--space-2); margin: 0; min-height: 40px;
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm); font-weight: var(--weight-semi); white-space: nowrap;
}
.card-h > .icon { --icon-size: 14px; color: var(--ink-faint); }
.card-sub { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.card-sub b { color: var(--ink); font-weight: var(--weight-semi); }
.card-sub b.is-open { color: var(--caution); }
.empty-act { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--ink-muted); }
.empty-act .icon { --icon-size: 14px; color: var(--ink-faint); }

/* ---------- the week ---------- */

.week > * + * { margin-top: var(--space-4); }
.week > .stalebar + .glance { margin-top: var(--space-2); }
.stalebar { margin: 0; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); align-items: center; }

.glance { padding: var(--space-3) var(--space-4) var(--space-4); box-shadow: none; }
.gl-top { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.glance h1 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); line-height: 1.3; cursor: help; }
.gl-clock { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }
.gl-clock .icon { --icon-size: 13px; }
.glance--locking .gl-clock { color: var(--accent); }
.gl-top .gl-actions { margin: 0 0 0 auto; }
.gl-figs { margin-top: var(--space-3); }
.gl-fig { padding: var(--space-2) var(--space-3); flex-basis: 110px; }
.gl-fig--wide { flex: 1.6 1 190px; }
.gl-fig dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-1); }
.gl-fig dd b { font-size: var(--text-lg); }
.gl-fig dd small { display: inline; margin-left: var(--space-2); }
.gl-fig dd .gl-meter { flex-basis: 100%; margin: var(--space-1) 0 0; height: 4px; }

.wk-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.wk-main--solo { grid-template-columns: minmax(0, 1fr); }
.wk-main .dbook { margin: 0; padding: 0; }
.wk-rows { min-width: 0; container-type: inline-size; }
@media (max-width: 1360px) {
  .wk-main { grid-template-columns: minmax(0, 1fr); }
  .wk-main .dbook { order: -1; }
}

/* Who is waiting: one line per customer. */
.dbook .dbook-list { padding: var(--space-1) var(--space-4) var(--space-3); gap: 0; }
.dbook .dbook-row { grid-template-columns: minmax(0, 1fr) auto 44px 92px; gap: var(--space-3); min-height: 30px;
  border-bottom: 1px solid var(--border-soft); font-size: var(--text-xs); }
.dbook .dbook-row:last-child { border-bottom: 0; }
.dbook .dbook-who { flex-direction: row; align-items: baseline; gap: var(--space-2); overflow: hidden; white-space: nowrap; }
.dbook .dbook-who b { font-weight: var(--weight-semi); overflow: hidden; text-overflow: ellipsis; }
.dbook .dbook-mkt { flex-wrap: nowrap; gap: var(--space-1); }
.dbook .dbook-bar { height: 5px; }
.dbook .dbook-qty { font-size: var(--text-xs); white-space: nowrap; }
.dbook .dbook-qty small { display: inline; }
.dbook-untold { text-decoration: none; }
.wk-main .dbook-row { opacity: 1; }
.wk-main .dbook-row.is-full, .wk-main .dbook-row.is-over { color: var(--ink-muted); }
@media (max-width: 1360px) {
  .wk-main .dbook .dbook-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .wk-main .dbook .dbook-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (max-width: 760px) {
  .wk-main .dbook .dbook-list { grid-template-columns: minmax(0, 1fr); }
  .dbook .dbook-row { grid-template-columns: minmax(0, 1fr) auto 84px; }
  .dbook .dbook-bar { display: none; }
}

/* The estimate rows: compact, one line of evidence each. */
.elines { margin: 0; }
.el-table .el-head, .el-table .el-row {
  grid-template-columns: minmax(160px, 1.5fr) 96px 52px minmax(180px, 1.6fr) 112px;
  gap: var(--space-3); padding: var(--space-1) var(--space-4); min-height: var(--row-h);
}
.el-table--packing .el-head, .el-table--packing .el-row {
  grid-template-columns: minmax(160px, 1.5fr) 96px 44px 64px minmax(170px, 1.4fr) 104px;
}
.el-table .el-head { min-height: 28px; border-top: 0; background: var(--surface-sunk); border-bottom: 1px solid var(--border-soft); }
.el-row { font-size: var(--text-sm); }
.el-row .vcell { flex-direction: row; align-items: center; gap: var(--space-1); }
.el-grower .mono { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-evidence { flex-wrap: nowrap; gap: var(--space-2); overflow: hidden; }
.el-belief { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.el-belief .bgauge { flex: 0 0 40px; min-width: 40px; height: 5px; }
.el-belief .bgauge > i { height: 5px; }
.el-belief .pct { font-size: var(--text-xs); font-weight: var(--weight-semi); min-width: 3ch; margin-right: var(--space-1); }
.el-none { flex: none; font-size: var(--text-2xs); }
.el-ico { display: inline-flex; color: var(--ink-faint); }
.el-ico .icon { --icon-size: 13px; }
.el-ico--good { color: var(--positive); }
.el-evidence .cert-chip { flex: none; }
.el-decided { display: grid; grid-template-columns: auto 40px; align-items: center; justify-content: end; gap: 2px var(--space-2); }
.el-decided .el-chips { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: nowrap; overflow: hidden; }
.el-dec-n { font-size: var(--text-xs); white-space: nowrap; }
.el-meter { width: 40px; }
.el-row .num small { font-size: var(--text-2xs); }
@container (max-width: 760px) {
  .el-table .el-head { display: none; }
  .el-table .el-row, .el-table--packing .el-row { grid-template-columns: minmax(0, 1fr) auto 64px; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4); }
  .el-table .el-row .el-grower { grid-column: 1; grid-row: 1; }
  .el-table .el-row .vcell { grid-column: 2; grid-row: 1; }
  .el-table .el-row > .num:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .el-table .el-row .el-evidence { grid-column: 1 / 3; grid-row: 2; }
  .el-table .el-row .el-decided { grid-column: 3; grid-row: 2; text-align: right; }
  .el-table--packing .el-row > .num:nth-of-type(4) { display: none; }
}

/* ---------- tabs ---------- */

.tabs { margin-top: var(--space-5); }
.tab-bar { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + 1px); margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--ink-muted); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap;
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.tab .icon { --icon-size: 14px; color: var(--ink-faint); }
.tab:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: var(--weight-semi); }
.tab[aria-selected="true"] .icon { color: var(--accent); }
/* A count beside a label is a number, not a bubble. */
.tab-n { font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tab-pane { padding-top: var(--space-4); }
.tab-pane[hidden] { display: none; }
.tab-lead { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.tab-lead > .icon { --icon-size: 14px; color: var(--ink-faint); }
.tab-lead .fresh { margin-left: var(--space-2); }
.tab-lead-act { margin-left: auto; }

/* The context panes are plain now: no box around a box. */
.tab-pane .book, .tab-pane .rwx, .tab-pane .shipbox { margin: 0; }
.tab-pane .book { padding: var(--space-4); }
.tab-pane .rwx { background: none; border: 0; padding: 0; }
.tab-pane .rwx-row:first-of-type { margin-top: 0; }
.tab-pane .shipbox .ships { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); border-top: 1px solid var(--border); }
.tab-pane .ship { padding: var(--space-2) var(--space-4); color: inherit; text-decoration: none; }
.ships > li:last-child > .ship { border-bottom: 0; }
a.ship:hover { background: var(--surface-sunk); }
.ship.is-link .ship-name b { border-bottom: 1px dotted var(--border-strong); }
.tab-pane .history { border-top: 1px solid var(--border); padding-top: 0; }

/* The ledger: one line per decision, the whole row opens its panel. */
.dtable--ledger .dt-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 64px 220px minmax(0, 1fr); min-height: 40px; }
.tab-pane .decbox { margin: 0; border: 0; background: none; overflow: visible; }
.dledger-flags { flex-wrap: nowrap; overflow: hidden; }
.dledger-row { color: inherit; }
.dledger-row .dledger-name { font-weight: var(--weight-semi); }
.dledger-to .icon { --icon-size: 12px; color: var(--ink-faint); }
.dledger-who { font-size: var(--text-xs); }
.dledger-flags { display: flex; justify-content: flex-end; gap: var(--space-1); }
.dledger-flags .badge, .why-t { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .dtable--ledger .dt-row { grid-template-columns: minmax(0, 1fr) 56px; }
  .dtable--ledger .dt-row > .dledger-to { grid-column: 1; }
  .dtable--ledger .dt-row > .dledger-who, .dtable--ledger .dt-row > .dledger-flags { display: none; }
}

/* Chips in a panel header and a hero. */
.el-from { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.panel .el-facts dd small { display: block; }

/* Inspections: one row each, the card in the panel. */
.dtable--insp { list-style: none; margin: 0; padding: 0; max-width: none; }
.dtable--insp > li { padding: 0; border: 0; background: none; border-radius: 0; }
.dtable--insp .dt-row { grid-template-columns: 88px 44px minmax(0, 1fr) minmax(0, 1fr) 90px minmax(0, 1.3fr) 44px 16px; }
.dtable--insp > li:last-child .dt-row { border-bottom: 0; }
.dtable--insp > li.is-withdrawn .dt-row { color: var(--ink-muted); }
@media (max-width: 900px) {
  .dtable--insp .dt-row { grid-template-columns: 76px minmax(0, 1fr) 40px 16px; }
  .dtable--insp .dt-row > :nth-child(2), .dtable--insp .dt-row > :nth-child(4),
  .dtable--insp .dt-row > :nth-child(5), .dtable--insp .dt-row > :nth-child(6) { display: none; }
}

/* ---------- small pieces the sweep asked for ---------- */

.el-evidence .el-certs { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: var(--space-2); margin: 0; min-width: 0; overflow: hidden; }
.el-cert-ok { font-size: var(--text-2xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A segmented control in the strip: two or three views of one page. */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-md); }
.seg-b { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.seg-b .icon { --icon-size: 14px; }
.seg-b:hover { color: var(--ink); }
.seg-b[aria-current="true"] { background: var(--surface-raised); color: var(--ink); font-weight: var(--weight-semi); box-shadow: var(--shadow-card); }

/* An admin row that opens a panel. */
a.arow { color: inherit; text-decoration: none; transition: background var(--motion-fast) var(--ease); }
a.arow:hover { background: var(--surface-sunk); }
a.arow.is-exceed:hover { background: var(--critical-strong-tint); }
.arow[aria-current="true"] { background: var(--accent-tint-strong); }
.arow { min-height: var(--row-h); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.arow--head { min-height: 30px; }
.atable--mrl .arow { grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1fr) 100px 100px 130px minmax(0, 1fr) 16px; }
.atable.atable--mrl .arow { min-width: 820px; }

/* Certifications: one row per holder, schemes as chips. */
.atable--holders .arow { grid-template-columns: 200px minmax(0, 1fr) 64px 150px 16px; }
.atable.atable--holders .arow { min-width: 640px; }
.cert-holder { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cert-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.atable--holders .num.is-bad { color: var(--critical); font-weight: var(--weight-semi); }
.hold-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cert-standing { display: flex; gap: var(--space-2); margin: 0 0 var(--space-4); }
.panel .cert-log-list li { font-size: var(--text-xs); }

/* A disclosure inside a row of buttons. */
.ahow--inline { margin: 0; position: relative; }
.ahow--inline > summary { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-weight: var(--weight-semi); }
.ahow--inline[open] .bandactions { position: absolute; z-index: var(--layer-menu); top: calc(100% + var(--space-2)); left: 0; width: 360px; padding: var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); }

/* Page-level empty states sit in a card. */
.empty { padding: var(--space-6) var(--space-5); }
.wx-src { margin-top: var(--space-2); }
.ledger-actions { padding: var(--space-3) var(--space-5); }
.score-verdict { display: flex; align-items: baseline; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); }
.score .ahow { margin: 0 var(--space-5) var(--space-4); }
.auth .lede { margin-bottom: var(--space-5); }
.wrap--bare .auth { margin-top: 0; }

/* The block rows, inside their card: one surface, no box in a box. */
.history.card { padding: 0; }
.history.card > .kpis { border: 0; border-radius: 0; margin: 0; border-bottom: 1px solid var(--border-soft); }
.history.card .kpi { padding: var(--space-2) var(--space-4); }
.history.card .kpi .v { font-size: var(--text-lg); }
.history.card > .notes { margin: var(--space-3) var(--space-4) 0; }
.history.card > .controls { margin: 0; padding: var(--space-2) var(--space-4); }
.history.card > .board { border: 0; border-radius: 0; border-top: 1px solid var(--border-soft); }
.history.card #ledger .ledger { margin: 0; border: 0; border-radius: 0; border-top: 1px solid var(--border); }
.brow { min-height: var(--row-h); padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.b-head { padding: var(--space-2) var(--space-4); }
.brow .vcell { flex-direction: row; align-items: center; }
.ghead { padding: var(--space-2) var(--space-4); }

/* The sidebar's surface runs the full height of a long page too. */
.shell { background: linear-gradient(to right, var(--surface) calc(var(--side-w) - 1px), var(--border) 0, var(--border) var(--side-w), transparent 0); }
:root[data-side="collapsed"] .shell { background: linear-gradient(to right, var(--surface) calc(var(--side-w-icons) - 1px), var(--border) 0, var(--border) var(--side-w-icons), transparent 0); }
@media (max-width: 900px) { .shell, :root[data-side="collapsed"] .shell { background: none; } }
.atable--holders .arow > .a-dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afilters--row .afilter input[type="text"], .afilters--row .afilter select { height: 32px; padding-top: 0; padding-bottom: 0; }

/* Sailings: one table, a group row per market. */
.arow--group { display: flex; justify-content: space-between; align-items: center; min-height: 32px;
  background: var(--ground); font-size: var(--text-xs); color: var(--ink-muted); }
.arow--group .icon { --icon-size: 13px; color: var(--accent); }
.arow--group b { color: var(--ink); margin-right: var(--space-2); }
.sail-market:last-child > .arow:last-child { border-bottom: 0; }
.sail-market > .arow:last-child { border-bottom: 1px solid var(--border-soft); }
.sail-none { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0 0; font-size: var(--text-xs); }
.sail-none .cg-n { display: none; }
@media (max-width: 640px) {
  .atable.atable--routes .arow.arow--group { display: flex; }
}
/* Eleven weeks in a column each; on a narrow screen they scroll inside the
   pane rather than widening the page. */
.tab-pane .book-bars { height: 230px; grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; }

.el-todo { white-space: nowrap; }
@media (max-width: 640px) {
  .dbook .dbook-row .dbook-who, .dbook .dbook-row .dbook-mkt, .dbook .dbook-row .dbook-qty { grid-row: auto; grid-column: auto; }
}

/* ---------- pills, and what is not one ----------
   The owner's rule (2026-10-02): a pill marks a STATE somebody might act on —
   week state, a certification that needs chasing, an MRL exceedance, over
   estimate, unpriced — at most one or two to a row. Everything else is words:
   metadata `·`-separated in muted ink, numbers in tabular figures, a standing
   that is fine as a dot and a word, where something came from as an icon. */

.meta { color: var(--ink-muted); font-size: var(--text-xs); }
.meta .icon { --icon-size: 11px; vertical-align: -1px; }
.panel-chips .meta { font-size: inherit; }

/* "● certified": the dot carries the tone, the word stays readable. */
.stand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); white-space: nowrap; color: var(--ink-muted); }
.stand::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.stand--good::before { background: var(--positive); }
.stand--warn::before { background: var(--caution); }
.stand--bad::before { background: var(--critical); }

/* Markets as words: "GB R129 · NL R160". */
.mks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-faint); }
.mk { font-weight: var(--weight-semi); color: var(--ink-muted); }

/* An icon that says what a word used to: our reading (?), the book, the team. */
.q-ico, .src-ico { display: inline-flex; color: var(--ink-faint); }
.q-ico .icon, .src-ico .icon { --icon-size: 12px; }
.q-ico:hover, .src-ico:hover { color: var(--ink-muted); }
.src-ico--warn, .src-ico--warn:hover { color: var(--caution); }
.src-icos { display: inline-flex; align-items: center; gap: var(--space-2); }
.dbook-code { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--ink-muted); }
/* A reason somebody typed: their words, muted, cut short (whole on hover). */
.why-t { display: inline-block; vertical-align: bottom; font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }
/* A lane's standing trait: an icon and a word in its tone, never a pill. */
.trait { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); color: var(--ink-muted); white-space: nowrap; }
.trait .icon { --icon-size: 11px; }
.trait--good { color: var(--positive); }
.trait--warn { color: var(--caution); }
.trait--bad { color: var(--critical); }
.aim-chip--ok { font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }

/* A lot's panel: what is on its pallets, then the pallets, folded. */
.lot-tally dd { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); }
.lot-v { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.lot-v small { font-size: var(--text-2xs); }
.lot-pallets > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-size: var(--text-sm); }
.lot-pallets > summary::-webkit-details-marker { display: none; }
.lot-pallets > summary .icon { --icon-size: 14px; color: var(--ink-faint); transition: transform var(--motion-fast) var(--ease); transform: rotate(-90deg); }
.lot-pallets[open] > summary .icon { transform: none; }
.lot-pl { margin-top: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-md); max-height: 50vh; overflow: auto; font-size: var(--text-xs); }
.lot-pl-row { display: grid; grid-template-columns: var(--lot-cols); gap: var(--space-2);
  align-items: center; padding: 4px var(--space-2) 4px var(--space-3); border-bottom: 1px solid var(--border-soft); }
.lot-pl-row:last-child { border-bottom: 0; }
.lot-pl-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-pl-row .num { text-align: right; }
.lot-pl-head { position: sticky; top: 0; z-index: 1; background: var(--surface-sunk); color: var(--ink-faint); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: .04em; }
.lot-sscc { display: inline-flex; align-items: center; gap: var(--space-1); }
.lot-pl-row.is-on { background: var(--accent-tint); }
.lot-qc { text-decoration: none; }
.lot-pl .is-warn { color: var(--caution); font-weight: var(--weight-semi); }
.el-facts .is-warn { color: var(--caution); font-weight: var(--weight-semi); }

/* A lot above its decision (stock/_lot_brief): life, pallets, arrival, the way out. */
.lb { display: grid; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); }
.lb h4 { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-1); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.lb h4 .a-dim { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lb h4 .icon, .lb-life-h .icon { --icon-size: 13px; }
.lb-life-h { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lb-life-h b { display: inline-flex; align-items: center; gap: var(--space-1); }
.lb .is-warn { color: var(--caution); font-weight: var(--weight-semi); }
.lb .is-bad { color: var(--critical); font-weight: var(--weight-semi); }
.lb-bar { position: relative; height: 8px; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.lb-bar i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--ink-faint); }
.lb-bar i.is-warn { background: var(--caution); }
.lb-third { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); }
.lb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.lb-facts dt { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.lb-facts dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 2px var(--space-2); }
.lb-link { display: inline-flex; align-items: center; gap: var(--space-1); }
.lb-link .icon { --icon-size: 11px; }
.lb-arrive ul, .lb-leave ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-xs); }
.lb-arrive li { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; gap: var(--space-3); align-items: baseline; }
.lb-arrive li b { text-align: right; }
.lb-leave li { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.lb-leave li > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-ship a { color: var(--ink); font-weight: var(--weight-semi); text-decoration: none; }
.lb-ship a:hover { text-decoration: underline; }
.lb-unplaced { margin: 0; font-size: var(--text-xs); }

/* The week's Stock tab: what the packed stock asks of the week, then the lots. */
.stk-lead { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-2); margin: 0 0 var(--space-3); }
.stk-fig { display: grid; gap: 1px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.stk-fig > span { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.stk-fig b { font-size: var(--text-lg); letter-spacing: -.02em; }
.stk-fig b small { font-size: var(--text-xs); color: var(--ink-faint); font-weight: 400; }
.stk-fig b.is-warn { color: var(--caution); }
.stk-fig em { font-style: normal; font-size: var(--text-2xs); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-fig--act { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: var(--space-1); border: 0; background: none; }
@media (max-width: 900px) { .stk-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stk-fig--act { align-items: flex-start; } }

/* ---------- dashboards ----------
   Altus's daily quality summary as a table (dashboards/show): many columns,
   so it scrolls sideways inside its card rather than squeezing. The grade is
   the row's one pill; the readings are plain figures. */

.grade { display: inline-block; white-space: nowrap; font-size: var(--text-2xs); font-weight: var(--weight-semi);
  padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--ink-muted); }
.grade--good { background: var(--positive-tint); color: var(--positive); }
.grade--warn { background: var(--caution-tint); color: var(--caution); }
.grade--bad { background: var(--critical-tint); color: var(--critical); }

.dtable--dash .dt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 110px 56px 16px; }

.dash-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dash-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dash-table th { position: sticky; top: 0; background: var(--surface); text-align: left; white-space: nowrap;
  font-size: var(--text-2xs); font-weight: var(--weight-semi); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--ink-faint); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.dash-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-soft); white-space: nowrap; vertical-align: middle; }
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover { background: var(--surface-sunk); }
.dash-table tr[aria-current="true"] { background: var(--accent-tint-strong); }
.dash-table .num { text-align: right; }
.dash-table .dash-note { min-width: 160px; max-width: 320px; color: var(--ink-muted); font-size: var(--text-xs); }
.dash-table .dash-cut { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.dash-open { color: inherit; font-weight: var(--weight-semi); }

.dash-codes { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.aform .dash-code { display: inline-flex; align-items: center; gap: var(--space-2); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--ink); }
.dash-screen { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.dash-screen h3 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.dash-link { display: flex; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.dash-link input { flex: 1; min-width: 0; font-size: var(--text-xs); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunk); color: var(--ink-muted); }

/* One inspection on its own page, where a QR code lands on a phone. */
.insp-page { max-width: 720px; display: grid; gap: var(--space-4); padding: var(--space-5); overflow: visible; }

/* ---------- a dashboard's distributions ----------
   Single hue (--series-1) for every reading and defect: one series each, so
   colour carries no identity and the grade keeps the status colours to
   itself. Marks are thin, columns square at the baseline and rounded at the
   top, 2px apart; a dot carries a ring in the surface colour so overlapping
   readings stay countable. Hidden with the chart button ([data-dist=off]). */

:root[data-dist="off"] .tl-dist, :root[data-dist="off"] .spread { display: none; }

.dd-stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--ink-muted); }
.dd-stats b { color: var(--ink); font-weight: var(--weight-semi); }
.dd-axis { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--ink-faint); margin-top: calc(-1 * var(--space-2)); }
.dd-off { font-size: var(--text-2xs); }
.dd-off .icon { --icon-size: 11px; color: var(--caution); vertical-align: -1px; }

.spread--hist { display: block; width: 100%; height: 44px; }
.spread .hg-hit { fill: transparent; }
.spread .hg-bar { fill: var(--series-1); }
.spread .hg-col.is-lit .hg-bar { fill: var(--accent-hover); }
.spread .hg-col.is-lit .hg-hit { fill: var(--surface-sunk); }
.spread .hg-base { stroke: var(--border-strong); stroke-width: 1; }

.spread--strip { display: block; width: 120px; height: 16px; overflow: visible; }
.spread--wide { width: 100%; height: 30px; }
.spread .sp-track { stroke: var(--border); stroke-width: 1; }
.spread .sp-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 1.5; fill-opacity: .8; }
.spread .sp-dot.is-off { fill: var(--surface); stroke: var(--series-1); stroke-width: 1.5; }
.spread .sp-mean { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.spread--strip.is-lit .sp-dot { fill-opacity: 1; }

.dd-grade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.dd-grade { display: flex; justify-content: flex-start; gap: var(--space-2); width: 100%; padding: 1px var(--space-2);
  border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--ink); text-decoration: none; }
.dd-grade:hover { background: var(--surface-sunk); }
.dd-grade.is-on { background: var(--accent-tint-strong); }
.dd-grade b { margin-left: auto; font-weight: var(--weight-semi); }

.dd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.dd-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(24px, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: 1px var(--space-2); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--ink); text-decoration: none; }
.dd-bar:hover { background: var(--surface-sunk); }
.dd-bar.is-on { background: var(--accent-tint-strong); }
.dd-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-bar-track { height: 8px; }
.dd-bar-track i { display: block; height: 100%; width: var(--w); min-width: 2px; background: var(--series-1); border-radius: 0 4px 4px 0; }
.dd-bar-n { text-align: right; font-weight: var(--weight-semi); }
.dd-more { font-size: var(--text-2xs); }

/* ---------- the table's bar, heads and filters ---------- */

.dash-bar { display: flex; align-items: center; gap: var(--space-3) var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.dash-bar .dash-q { margin-left: auto; }
/* An active filter: a button that removes it. */
.dash-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 1px var(--space-2) 1px var(--space-3);
  border: 1px solid var(--accent-border); border-radius: var(--radius-pill); background: var(--accent-tint);
  font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--ink); text-decoration: none; }
.dash-chip .icon { --icon-size: 12px; color: var(--ink-muted); }
.dash-chip:hover { background: var(--accent-tint-strong); }
.dash-clear { font-size: var(--text-xs); }
.dash-count { font-size: var(--text-sm); color: var(--ink-muted); }
.dash-count b { color: var(--ink); }
.dash-q { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); color: var(--ink-faint); }
.dash-q .icon { --icon-size: 13px; }
.dash-q input { border: 0; background: none; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--ink); width: 14em; outline: none; }

.dash-sort { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; text-decoration: none; }
.dash-sort .icon { --icon-size: 11px; opacity: .35; }
.dash-sort:hover .icon, .dash-sort.is-on .icon { opacity: 1; }
.dash-sort.is-on { color: var(--ink); }
.dash-spread-h { min-width: 130px; }
.dash-axis { margin-left: var(--space-2); font-weight: var(--weight-normal); text-transform: none; letter-spacing: 0; color: var(--ink-faint); }

.dash-table thead tr.dash-filters td { background: var(--surface); padding: 0 var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border); }
.dash-f { width: 100%; min-width: 72px; max-width: 160px; font-size: var(--text-xs); padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-muted); }
.dash-f.is-set { border-color: var(--accent-border); background: var(--accent-tint); color: var(--ink); font-weight: var(--weight-semi); }

.dash-table tbody tr[data-href] { cursor: pointer; }
.dash-spread { min-width: 130px; }
.dash-spread > * { display: inline-block; vertical-align: middle; }
.dash-mean { width: 2.6em; font-weight: var(--weight-semi); }
.dash-spread .spread--strip { width: 90px; height: 14px; }
.dash-defects { min-width: 140px; max-width: 220px; font-size: var(--text-xs); }
.dash-defect { display: inline-block; margin-right: var(--space-3); color: var(--ink-muted); }
.dash-defect b { color: var(--ink); }
.dash-none { text-align: center; color: var(--ink-faint); padding: var(--space-6) !important; }

/* ---------- the quick view ---------- */

.qv { position: relative; }
.qv h3 { font-size: var(--text-sm); font-weight: var(--weight-semi); margin-bottom: var(--space-3); }
.qv-why p { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-sunk); font-size: var(--text-sm); }
.qv-why .icon { --icon-size: 14px; flex: none; margin-top: 2px; color: var(--ink-muted); }
.qv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.qv-facts dt { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); }
.qv-facts dd { margin: 0; font-size: var(--text-sm); }
.qv-read { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.qv-read-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.qv-read-stats { margin-left: auto; font-size: var(--text-xs); color: var(--ink-muted); }
.qv-read-stats b { color: var(--ink); }
.qv-values { font-size: var(--text-2xs); word-spacing: 2px; }
.qv-defects { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.qv-defects td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.qv-defects tr:last-child td { border-bottom: 0; }
.qv-defects .num { text-align: right; white-space: nowrap; }

/* The tooltip over a card's spread strips (chart_tip_controller). */
.insp { position: relative; }
.insp-finds dd .spread--strip { margin-top: var(--space-1); }


/* ---------- a dashboard on one screen ----------
   The band of tiles keeps its height and the table scrolls in its own
   pane, heads and filters pinned, so the page itself never scrolls on a
   desktop. A phone, or a window too short for it, scrolls as usual. */

.dash-page { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-4); }
.dash-form { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dash-scroll { min-height: 0; overflow: auto; }
.dash-table thead { position: sticky; top: 0; z-index: 2; }
.dash-table thead th, .dash-table thead td { background: var(--surface); }
.dash-table th { position: static; }
.dash-table td { padding-top: 5px; padding-bottom: 5px; }

@media (min-width: 900px) and (min-height: 640px) {
  .wrap:has(> .dash-page) { height: calc(100dvh - var(--strip-h)); display: flex; flex-direction: column; padding-bottom: var(--space-4); }
  .wrap:has(> .dash-page) > .dash-page { flex: 1; min-height: 0; }
}

/* The band: one row of tiles, the same height, scrolling sideways if a
   dashboard has more readings than fit. */
/* Stock and ships get wider columns than the rest; every column has a
   floor its tile can live in, so a narrower page (the sidebar open) scrolls
   the band sideways rather than letting tiles run into each other. */
.dash-tiles { display: grid; grid-auto-flow: column; grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.4fr);
  grid-auto-columns: minmax(150px, 1fr); gap: var(--space-3); overflow-x: auto; }
.tl-tile { min-width: 0; height: 172px; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); align-content: start; overflow: hidden; }
.tl-sync { margin-left: auto; font-size: var(--text-2xs); color: var(--ink-faint); }
.tl-sync.is-stale { color: var(--caution); font-weight: var(--weight-semi); }
.dash-count .tl-sync { margin-left: 0; }
.dash-scope { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); }
.dash-scope .icon { --icon-size: 11px; }
.tl-head { display: flex; align-items: center; gap: var(--space-2); }
.tl-head h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semi); white-space: nowrap; }
.tl-head h3 .icon { --icon-size: 13px; color: var(--ink-muted); }
.tl-head h3 .a-dim { font-weight: var(--weight-normal); }
.tl-n { font-size: var(--text-2xs); }
.tl-go { display: inline-flex; color: var(--ink-faint); }
.tl-go .icon { --icon-size: 13px; }
.tl-go:hover { color: var(--accent); }
.tl-big { font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }
.tl-big b { font-size: var(--text-xl); color: var(--ink); font-weight: var(--weight-bold); font-variant-numeric: proportional-nums; margin-right: 2px; }
.tl-line { font-size: var(--text-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); }
.tl-line .icon { --icon-size: 11px; vertical-align: -1px; }
.tl-none { font-size: var(--text-xs); }
.pl-old { color: var(--caution); font-weight: var(--weight-semi); }

.tl-ages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); height: 52px; align-items: end; }
.tl-ages > div { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; gap: 2px; }
.tl-age-bar { align-self: end; width: 100%; max-width: 22px; height: var(--h); background: var(--series-1); border-radius: 4px 4px 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.tl-age-bar i { display: block; height: var(--h); background: var(--caution); border-top: 2px solid var(--surface); }
.tl-age-l { font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.tl-ages > div.is-lit .tl-age-bar { filter: brightness(1.1); }

.tl-ships { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tl-ships li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 40px auto; align-items: center; gap: var(--space-2); font-size: var(--text-2xs);
  padding: 1px var(--space-1); border-radius: var(--radius-sm); }
.tl-ships li.is-lit { background: var(--surface-sunk); }
.tl-ship { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semi); color: var(--ink); }
.tl-ships .badge { padding: 0 var(--space-2); }
.pl-track { position: relative; height: 4px; border-radius: var(--radius-pill); background: var(--border); }
.pl-track i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: var(--radius-pill); background: var(--series-1); }
.pl-track i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--series-1); box-shadow: 0 0 0 2px var(--surface); }
.tl-dist .dd-stats { gap: var(--space-1) var(--space-3); }

/* ---------- where an inspection was done, and on what (inspections/_facts) ----------
   The PUC leads; "noted" marks a PUC QMob did not carry and the inspector
   wrote in the grade's comment: a fact about the source, in muted words. */

.insp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.insp-facts dt { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); }
.insp-facts dd { margin: 0; font-size: var(--text-sm); }
.insp-facts .insp-fact--wide { grid-column: span 2; }
.insp-facts--more { margin-top: var(--space-3); }
.insp .insp-facts { margin: var(--space-2) 0 var(--space-3); }
.insp-noted { margin-left: var(--space-2); font-size: var(--text-2xs); color: var(--ink-faint); font-style: italic; }
.dash-fmt { color: var(--ink-faint); }

/* ---------- feedback and requests ----------
   The box at the foot of the sidebar, and the requests page. A status is a
   pill, toned only for what someone acts on: Ready for you (the author's
   move) in the caution tint, Done quiet green; the rest neutral. The count
   on the sidebar is the accent: news for you. */

.fb { position: relative; margin-bottom: var(--space-2); }
.fb > summary { list-style: none; cursor: pointer; }
.fb > summary::-webkit-details-marker { display: none; }
.fb[open] > summary { background: var(--surface-sunk); }
.fb-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--ink-on-accent); font-size: var(--text-2xs); font-weight: var(--weight-bold); }
:root[data-side="collapsed"] .fb-summary { position: relative; }
:root[data-side="collapsed"] .fb-summary .fb-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; }
.seg-b .fb-badge { margin-left: var(--space-1); }

.fb-menu { position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: var(--layer-menu); width: 320px; padding: var(--space-4);
  background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover);
  display: grid; gap: var(--space-3); font-size: var(--text-sm); }
:root[data-side="collapsed"] .fb-menu { left: calc(100% + var(--space-2)); bottom: 0; }
.fb-news { list-style: none; margin: 0 0 var(--space-1); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--border-soft); display: grid; gap: var(--space-1); }
.fb-news a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: var(--text-xs); }
.fb-news a:hover { background: var(--surface-sunk); }
.fb-news a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-form { display: grid; gap: var(--space-3); }
.fb-kinds { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunk); border: 1px solid var(--border); border-radius: var(--radius-md); justify-self: start; }
.fb-kinds label { position: relative; }
.fb-kinds input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-kinds span { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--ink-muted); }
.fb-kinds input:checked + span { background: var(--surface); color: var(--ink); font-weight: var(--weight-semi); box-shadow: var(--shadow-card); }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--accent); }
.fb-form textarea, .fb-reply textarea, .fb-decide textarea, .fb-team textarea {
  width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--text-sm); resize: vertical; }
.fb-from { font-size: var(--text-2xs); margin: calc(-1 * var(--space-2)) 0 0 !important; }
.fb-menu .pop-acts { margin-top: 0; }

.fb-status { display: inline-block; white-space: nowrap; font-size: var(--text-2xs); font-weight: var(--weight-semi); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--ink-muted); }
.fb-status--ready { background: var(--caution-tint); color: var(--caution); }
.fb-status--done { background: var(--positive-tint); color: var(--positive); }
.fb-status--closed { background: none; color: var(--ink-faint); border: 1px solid var(--border); }

.dtable--fb .dt-row { grid-template-columns: 110px minmax(0, 1fr) 70px 110px 50px 56px 16px; }
.dtable--fb .dt-row.is-news { background: var(--accent-tint); }
.fb-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.fb-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semi); }
.fb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dtable--fb .icon { --icon-size: 12px; vertical-align: -1px; }
@media (max-width: 760px) {
  .dtable--fb .dt-row { grid-template-columns: 100px minmax(0, 1fr) 16px; }
  .dtable--fb .dt-row > :nth-child(n+3):not(.dt-go) { display: none; }
}

.fb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; font-size: var(--text-2xs); }
.fb-steps li { padding: var(--space-2) var(--space-2) 0; border-top: 3px solid var(--border); color: var(--ink-faint); }
.fb-steps li.is-past { border-top-color: var(--series-1); color: var(--ink-muted); }
.fb-steps li.is-now { border-top-color: var(--series-1); color: var(--ink); font-weight: var(--weight-semi); }
.fb-steps.is-closed li { border-top-color: var(--border); color: var(--ink-faint); }

.fb-decide { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--caution-tint); }
.fb-decide-form { display: flex; gap: var(--space-3); align-items: flex-start; }
.fb-reject textarea { flex: 1; }

.fb-msg { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.fb-msg:last-child { border-bottom: 0; }
.fb-msg-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); margin-bottom: var(--space-1); }
.fb-body { font-size: var(--text-sm); line-height: var(--leading-normal); }
.fb-msg--status .fb-body, .fb-msg--accepted .fb-body, .fb-msg--rejected .fb-body { color: var(--ink-muted); }
.fb-kind { font-size: var(--text-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.fb-msg--rejected .fb-kind { color: var(--critical); }
.fb-msg--accepted .fb-kind { color: var(--positive); }
.fb-page { margin-left: auto; font-size: var(--text-2xs); }
.fb-page .icon { --icon-size: 11px; }
.fb-reply { display: grid; gap: var(--space-2); }
.fb-team { display: grid; gap: var(--space-3); }
.fb-team h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.fb-team-form { display: grid; gap: var(--space-2); }
.fb-team-row { display: flex; gap: var(--space-3); }
.fb-team-row select { flex: 1; font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }

/* Writing feedback: the box grows when you click into it, and the panel
   widens with it; files dropped on the form light it up. */
.fb-form textarea, .fb-reply textarea, .fb-reject textarea, .fb-team textarea { min-height: 72px; transition: min-height var(--motion) var(--ease); }
/* Large while you are writing at all, not just while the text has focus:
   the box must not shrink under the pointer when you pick a type. */
.fb-form.is-writing textarea, .fb-form:focus-within textarea, .fb-form textarea:not(:placeholder-shown),
.fb-form:has(.fb-files:not([hidden])) textarea { min-height: 220px; }
.fb-reply:focus-within textarea, .fb-reply textarea:not(:placeholder-shown), .fb-reject textarea:focus, .fb-reject textarea:not(:placeholder-shown),
.fb-team textarea:focus, .fb-team textarea:not(:placeholder-shown) { min-height: 160px; }
.fb-menu { transition: width var(--motion) var(--ease); }
.fb-menu:focus-within, .fb-menu:has(.fb-form.is-writing), .fb-menu:has(textarea:not(:placeholder-shown)) { width: min(460px, calc(100vw - var(--space-6))); }
.fb-acts-r { display: inline-flex; align-items: center; gap: var(--space-2); }
.fb-form.is-dropping, .fb-reply.is-dropping { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius-md); }

.fb-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fb-files li { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: 2px var(--space-1) 2px 2px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-2xs); }
.fb-files img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); }
.fb-files span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-files button { font-size: var(--text-md); line-height: 1; color: var(--ink-faint); padding: 0 var(--space-1); }
.fb-files button:hover { color: var(--critical); }
.fb-attach-msg { font-size: var(--text-2xs); color: var(--critical); }

.fb-shots { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fb-shots a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); }
.fb-shots img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.fb-shots a:hover img { border-color: var(--accent); }
/* A draft waiting in this browser: a word beside Feedback. */
.fb-draft { display: none; font-size: var(--text-2xs); font-style: italic; color: var(--ink-faint); }
.fb.has-draft .fb-draft { display: inline; }
.fb.has-draft:not([open]) .fb-summary { color: var(--ink); }

/* ---------- the week board's bar, and stepping through lines ----------
   Which lines (a segmented control, counts as words), a search that
   narrows as you type, the order behind a quiet button, and the keys in a
   tooltip. The panel's arrows step through the same view. */

.el-bar { display: flex; align-items: center; gap: var(--space-3) var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft); }
.el-q { flex: 1; min-width: 160px; max-width: 320px; }
.el-q input { width: 100%; }
.el-sort { position: relative; }
.el-sort > summary { list-style: none; }
.el-sort > summary::-webkit-details-marker { display: none; }
.el-sort-menu { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--layer-menu); min-width: 200px; padding: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); }
.el-sort-i { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--ink); text-decoration: none; }
.el-sort-i:hover { background: var(--surface-sunk); }
.el-sort-i.is-on { background: var(--accent-tint); }
.el-sort-on { --icon-size: 13px; color: var(--accent); }
.el-keys { margin-left: auto; display: inline-flex; }
.el-keys .icon { --icon-size: 16px; }
.el-empty { padding: var(--space-5) var(--space-4); font-size: var(--text-sm); }
.el-table .el-row[hidden] { display: none; }
.lx-step { display: inline-flex; gap: 2px; margin-left: var(--space-3); }
.lx-step .is-off { opacity: .35; cursor: default; }

/* ---------- Today, the front page ----------
   Cards of next steps, each line a link to where it is done; the commodities
   with nothing open fold to one line. Numbers are words; ageing stock and
   bad inspections take the caution and critical ink, nothing is a pill but
   an inspection's grade. */

.td { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
@media (max-width: 980px) { .td { grid-template-columns: minmax(0, 1fr); } }
.td-main { display: grid; gap: var(--space-4); }
.td-lead { font-size: var(--text-lg); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-2); }
.td-lead b { color: var(--ink); font-size: var(--text-xl); }
.td-lead .icon { --icon-size: 18px; color: var(--positive); }
.td-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.td-card { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); align-content: start; overflow: visible; }
.td-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.td-name { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; font-size: var(--text-md); }
.td-name .icon { --icon-size: 16px; color: var(--ink-muted); }
.td-meter { height: 6px; border-radius: var(--radius-pill); background: var(--border-soft); overflow: hidden; }
.td-meter i { display: block; height: 100%; width: var(--p); background: var(--series-1); border-radius: var(--radius-pill); }
.td-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.td-items a { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2);
  margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-size: var(--text-sm); }
.td-items a:hover { background: var(--surface-sunk); }
.td-items .icon { --icon-size: 14px; color: var(--ink-faint); }
.td-warn { color: var(--caution); }
.td-bad { color: var(--critical); }
.td-quiet { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.td-quiet .icon { --icon-size: 14px; color: var(--positive); }
.td-side { display: grid; gap: var(--space-4); }
.td-box { padding: var(--space-4); display: grid; gap: var(--space-2); font-size: var(--text-sm); overflow: visible; }
.td-box h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semi); }
.td-box h3 .icon { --icon-size: 14px; color: var(--ink-muted); }
.td-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.td-list a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: var(--text-xs); }
.td-list a:hover { background: var(--surface-sunk); }
.td-list a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-more { font-size: var(--text-xs); justify-self: start; }

/* ---------- Dole's growers and PUCs (Admin → Growers & PUCs) ----------
   One row per grower and PUC; an inactive row (shown only when asked) is
   dimmed rather than marked with colour. */
.atable--pucs .arow {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 120px 130px;
  gap: var(--space-3);
}
.atable--pucs .arow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.atable--pucs .arow.is-inactive { color: var(--ink-faint); }
.pop-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); margin-top: var(--space-3); }
@media (max-width: 900px) {
  .atable--pucs .arow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .atable--pucs .arow--head { display: none; }
}