/* APTRYK Field — FOUNDATIONS v5 · reset to industry standard
 *
 * Light only. No themes, no dark mode, until this is right.
 *
 * The bar is enterprise CRM and field-service software — Salesforce, HubSpot, the field tools
 * built on them. What they share, and what this sheet follows:
 *   · White work surfaces on a light grey page. Structure comes from cards, header rows, and
 *     1px borders — not from glow, gradient or glass.
 *   · One brand blue for actions, links and the selected state. Nothing else is blue.
 *   · Semantic colour only in small status badges: red for overdue, amber for due or needs
 *     review, green for complete. Never as large fills, never decorative.
 *   · AI is marked the way enterprise products mark it: a light blue panel with a sparkle icon,
 *     a plain confidence percentage with a small meter, the source, and an Override control.
 *   · A neutral, highly legible sans with tabular figures. Clear type sizes. 8px card radius.
 *
 * The approved layout, copy and Dual structure (field entry beside AI analysis, override always
 * available) are unchanged. Only the visual language was reset.
 */

:root {
  /* ---------- page and surfaces ---------- */
  --bg:            #F3F4F6;
  --surface:       #FFFFFF;
  --plate:         #FFFFFF;
  --raised:        #FFFFFF;
  --sunk:          #F9FAFB;
  --tile:          #F9FAFB;
  --hover:         #F5F7FA;

  --line:          #E5E7EB;
  --line-2:        #D1D5DB;
  --line-3:        #9CA3AF;

  /* ---------- text ---------- */
  --text:          #111827;
  --muted:         #4B5563;
  --faint:         #636A76;

  /* ---------- brand ---------- */
  --accent:        #1D5FD6;          /* APTRYK blue: actions, links, selection */
  --accent-hover:  #174DB0;
  --accent-on:     #FFFFFF;
  --accent-bg:     #EEF4FE;
  --accent-line:   #C7DAFA;
  --accent-text:   #1A55BF;

  /* ---------- AI ---------- */
  --machine:       #1A55BF;
  --machine-field: #F3F7FE;
  --machine-line:  #D6E3FB;
  --machine-bg:    #E8F0FD;
  --human-field:   #FFFFFF;

  /* ---------- status (badges only) ---------- */
  --bad:           #B42318;
  --bad-bg:        #FEF3F2;
  --bad-line:      #FECDCA;
  --warn:          #B54708;
  --warn-bg:       #FFFAEB;
  --warn-line:     #FEDF89;
  --good:          #067647;
  --good-bg:       #ECFDF3;
  --good-line:     #ABEFC6;
  --info:          var(--accent);
  --human:         var(--muted);

  --r:             8px;
  --r-s:           6px;
  --r-l:           12px;
  --shadow:        0 1px 2px rgba(16, 24, 40, .05);
  --shadow-lg:     0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);

  --font:          'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:          'Inter', ui-sans-serif, system-ui, sans-serif;   /* tabular figures, not a code face */

  --t-page:        600 24px/1.25 var(--font);
  --t-kpi:         600 28px/1.1 var(--font);
  --t-title:       600 16px/1.35 var(--font);
  --t-body:        400 14px/1.5 var(--font);
  --t-small:       400 13px/1.45 var(--font);
  --t-value:       500 13px/1.4 var(--font);
  --t-label:       600 11px/1.3 var(--font);
  --t-readout:     var(--t-kpi);
  --t-head:        var(--t-title);
  --track:         .04em;

  --gap:           12px;
  --pad:           16px;
  --tap:           46px;

  color-scheme: light;
}

body { background: var(--bg); color: var(--text); font: var(--t-body);
  font-feature-settings: 'tnum' 1, 'cv11' 1; -webkit-font-smoothing: antialiased; }

/* ---------- primitives ---------- */
.du-label { font: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); }
.du-val   { font: var(--t-value); font-variant-numeric: tabular-nums; }
.du-unit  { color: var(--faint); margin-left: 3px; font-weight: 400; }
.du-ref   { font: var(--t-value); color: var(--muted); }
.du-icon  { width: 16px; height: 16px; fill: currentColor; flex: none; }
.du-icon.lg { width: 20px; height: 20px; }

/* ---------- card ---------- */
.du-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.du-sheet + .du-sheet { margin-top: var(--gap); }
.du-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.du-head h2 { font: var(--t-title); margin: 0; }
/* every sheet's header is a compartment band, so a page of sheets reads as named compartments, not one surface */
.du-sheet > .du-head:first-child { background: var(--sunk); border-radius: var(--r) var(--r) 0 0; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
.du-sheet > .du-head:first-child h2 { font: 600 14.5px/1.3 var(--font); }

/* ---------- page header ---------- */
.du-page { display: grid; gap: 4px; }
.du-page h1 { font: var(--t-page); letter-spacing: -.01em; margin: 0; }
.du-page p  { margin: 0; font: var(--t-small); color: var(--muted); }

/* ---------- KPI tiles ---------- */
.du-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 720px) { .du-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.du-kpi { background: var(--surface); padding: 14px var(--pad); display: grid; gap: 6px; }
.du-kpi span { font: var(--t-small); color: var(--muted); }
.du-kpi b { font: var(--t-kpi); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.du-kpi b small { font: 500 14px var(--font); color: var(--faint); margin-left: 2px; }
.du-kpi.alert b { color: var(--bad); }

/* ---------- toolbar: sort ---------- */
.du-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.du-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; }
.du-seg button { padding: 8px 14px; font: 500 13px var(--font); color: var(--muted); border-right: 1px solid var(--line-2); white-space: nowrap; }
.du-seg button:last-child { border-right: 0; }
.du-seg button:hover { background: var(--hover); color: var(--text); }
.du-seg button[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-text); font-weight: 600; }

/* ---------- record header ---------- */
.du-rec { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--pad) 12px; }
.du-rank { width: 28px; height: 28px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line);
  display: grid; place-items: center; font: 600 13px var(--font); color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.du-rank.top { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.du-rec .who { flex: 1; min-width: 0; display: grid; gap: 3px; }
.du-rec .who > b { font: var(--t-title); }
.du-rec .who > small { font: var(--t-small); color: var(--muted); }
.du-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: var(--t-small); color: var(--faint); }
.du-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.du-meta b { color: var(--muted); font-weight: 500; }

/* ---------- badges ---------- */
.du-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  font: 500 12px/18px var(--font); white-space: nowrap; border: 1px solid var(--line);
  background: var(--sunk); color: var(--muted); }
.du-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.du-tag.bad   { color: var(--bad);  background: var(--bad-bg);  border-color: var(--bad-line); }
.du-tag.warn  { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.du-tag.good  { color: var(--good); background: var(--good-bg); border-color: var(--good-line); }
.du-tag.machine, .du-tag.info { color: var(--accent-text); background: var(--accent-bg); border-color: var(--accent-line); }
.du-tag.plain, .du-tag.human { color: var(--muted); }
.du-stale { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font); color: var(--warn); }

/* ---------- law 1 · field entry beside AI analysis ---------- */
.du-split { display: grid; }
.du-side { padding: 12px var(--pad); min-width: 0; }
.du-side + .du-side { padding-top: 0; }
.du-side > .du-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.du-side.obs p { margin: 0; font: var(--t-body); color: var(--text); }
.du-side.inf { padding: 0 var(--pad) 12px; }
.du-ai { background: var(--machine-field); border: 1px solid var(--machine-line); border-radius: var(--r-s); padding: 12px 14px; display: grid; gap: 8px; }
.du-ai .hd { display: flex; align-items: center; gap: 6px; color: var(--machine); font: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; }
.du-ai p { margin: 0; font: 500 14px/1.45 var(--font); color: var(--text); }
.du-ai .ft { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; font: var(--t-small); color: var(--muted); }
.du-src { font: var(--t-small); color: var(--faint); }

/* confidence: a percentage and a small meter — the standard way */
.du-conf { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.du-conf i { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--machine-bg); overflow: hidden; }
.du-conf i b { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

.du-overrule { margin-left: auto; padding: 4px 10px; border-radius: var(--r-s); border: 1px solid var(--line-2);
  background: var(--surface); font: 500 13px var(--font); color: var(--text); }
.du-overrule:hover { background: var(--hover); }
.du-overruled { font: 500 12px var(--font); color: var(--accent-text); }

/* ---------- record footer ---------- */
.du-foot { display: flex; align-items: center; gap: 8px; padding: 10px var(--pad); border-top: 1px solid var(--line); background: var(--sunk);
  border-radius: 0 0 var(--r) var(--r); }
.du-foot .eta { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.du-btn { min-height: 36px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font: 500 14px var(--font); display: inline-flex; align-items: center; gap: 6px; }
.du-btn:hover { background: var(--hover); }
.du-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600; }
.du-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.du-btn.link { border-color: transparent; background: transparent; color: var(--accent-text); padding: 0 6px; }
.du-btn.link:hover { text-decoration: underline; background: transparent; }
.du-btn.block { width: 100%; justify-content: center; min-height: var(--tap); font-size: 15px; }
.du-btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* focus and selection change one line, the control's own border; never a second box, ring, glow or rail */
.du-btn:focus-visible, .du-seg button:focus-visible, .du-overrule:focus-visible { outline: none; border-color: var(--accent); }
.du-btn.primary:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); }

/* law 4 · the one action, pinned in reach */
.du-dock { position: sticky; bottom: 0; z-index: 5; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, rgba(243, 244, 246, 0)); display: grid; gap: 6px; }
.du-dock .du-label { text-align: center; text-transform: none; letter-spacing: 0; font: var(--t-small); color: var(--muted); }

/* ---------- lists ---------- */
.du-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 10px var(--pad); width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--line); color: inherit; }
.du-row:first-child { border-top: 0; }
.du-row:hover { background: var(--hover); }
.du-row .grow { flex: 1; min-width: 0; }
.du-row b { display: block; font: 500 14px/1.4 var(--font); }
.du-row small { display: block; font: var(--t-small); color: var(--muted); }

.du-meter { height: 6px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.du-meter i { display: block; height: 100%; background: var(--accent); }

/* ---------- states ---------- */
.du-empty, .du-error, .du-offline { padding: 40px var(--pad); text-align: center; display: grid; gap: 10px; justify-items: center; }
.du-empty b, .du-error b, .du-offline b { font: 600 18px var(--font); }
.du-empty p, .du-error p, .du-offline p { margin: 0; font: var(--t-body); color: var(--muted); max-width: 40ch; }
.du-skel { background: linear-gradient(90deg, #EEF0F3 0%, #F6F7F9 50%, #EEF0F3 100%); background-size: 220% 100%; border-radius: 4px; height: 12px; }
.du-skel.lg { height: 28px; } .du-skel.sm { height: 9px; }
@media (prefers-reduced-motion: no-preference) {
  .du-skel { animation: duSweep 1.4s ease-in-out infinite; }
  @keyframes duSweep { 0% { background-position: 140% 0 } 100% { background-position: -40% 0 } }
}

/* ---------- tables, for the manager side ---------- */
.du-table { width: 100%; border-collapse: collapse; font: var(--t-body); }
.du-table th { font: var(--t-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 10px var(--pad); background: var(--sunk); border-bottom: 1px solid var(--line); }
.du-table td { padding: 12px var(--pad); border-bottom: 1px solid var(--line); vertical-align: top; }
.du-table td.inf { background: var(--machine-field); }
.du-table td.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- map card (field tools always show the route) ---------- */
.du-map { position: relative; height: 220px; background: #EEF1F5; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.du-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =====================================================================================
 * DETAIL LAYER — v5.1
 * The base stays clean and standard. What separates this from every CRM it resembles is in
 * the details and in what each element visibly does: trends on every figure, evidence behind
 * every AI claim, a feedback loop on every inference, a cadence meter on every store, and
 * keyboard-first desktop. Restraint in colour; ambition in information.
 * ===================================================================================== */

.du-icon.sm { width: 14px; height: 14px; }
.du-icon.xl { width: 22px; height: 22px; }

/* ---------- KPI tiles with an icon, a delta and a 7-day trend ---------- */
.du-kpi { position: relative; grid-template-columns: 1fr auto; align-items: end; gap: 4px 10px; }
.du-kpi .top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.du-kpi .glyph { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--sunk); color: var(--muted); border: 1px solid var(--line); box-sizing: border-box; flex: none; }
.du-kpi .glyph.blue { background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent-line); box-sizing: border-box; }
.du-kpi .glyph.red  { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); box-sizing: border-box; }
.du-kpi .delta { grid-column: 1 / -1; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font: 500 12px var(--font); color: var(--faint); }
.du-kpi .delta.up { color: var(--bad); } .du-kpi .delta.good { color: var(--good); }
.du-spark { grid-column: 2; grid-row: 2; width: 76px; height: 28px; align-self: end; }
.du-kpi .bar { grid-column: 2; grid-row: 2; width: 76px; align-self: center; }
@media (max-width: 480px) { .du-spark, .du-kpi .bar { width: 58px; } .du-kpi { padding: 13px 14px; } }

/* ---------- store tile: the record's type glyph, never a retailer logo ---------- */
.du-tile { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: linear-gradient(180deg, #FFFFFF, var(--sunk)); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .05); position: relative; }
.du-tile .n { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--surface); color: var(--muted); font: 600 11px/18px var(--font); text-align: center;
  border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.du-tile .n.top { background: var(--accent); border-color: var(--accent); color: #fff; }

.du-more { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--faint); flex: none; }
.du-more:hover { background: var(--hover); color: var(--text); }

/* ---------- badges carry an icon, not just a dot ---------- */
.du-tag.ic::before { display: none; }
.du-tag .du-icon { width: 12px; height: 12px; }

/* ---------- cadence meter: days since the last visit against the store's cadence ---------- */
.du-cad { display: grid; gap: 5px; }
.du-cad .lbl { display: flex; justify-content: space-between; font: 500 12px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.du-cad .lbl b { color: var(--text); font-weight: 600; }
.du-cad .lbl .over { color: var(--bad); }
.du-cad .trk { position: relative; height: 6px; border-radius: 3px; background: var(--sunk); border: 1px solid var(--line); box-sizing: border-box; }
.du-cad .trk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.du-cad .trk i.warn { background: #E8A13A; } .du-cad .trk i.bad { background: var(--bad); }
.du-cad .trk s { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--text); opacity: .55; }

/* ---------- attribution: who, with an avatar, and when ---------- */
.du-by { display: inline-flex; align-items: center; gap: 7px; font: var(--t-small); color: var(--faint); }
.du-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #E0E7FF; color: #3730A3; font: 600 9.5px var(--font); letter-spacing: .02em; }
.du-ref { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 5px;
  background: var(--sunk); border: 1px solid var(--line); box-sizing: border-box; font: 500 12px var(--font); color: var(--muted); }
.du-ref .du-icon { width: 12px; height: 12px; color: var(--faint); }

/* ---------- AI analysis, with its evidence and a feedback loop ---------- */
.du-ai .hd { justify-content: space-between; }
.du-ai .hd > span { display: inline-flex; align-items: center; gap: 6px; }
.du-ai .body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.du-evi { width: 112px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--machine-line); box-sizing: border-box; }
.du-evi svg { display: block; width: 112px; height: 72px; }
.du-evi span { display: block; padding: 3px 6px; font: 500 10.5px var(--font); color: var(--muted); border-top: 1px solid var(--machine-line); white-space: nowrap; }
.du-seg5 { display: inline-flex; gap: 2px; vertical-align: middle; }
.du-seg5 i { width: 6px; height: 10px; border-radius: 1.5px; background: var(--machine-bg); border: 1px solid var(--machine-line); box-sizing: border-box; }
.du-seg5 i.on { background: var(--accent); border-color: var(--accent); }
.du-confl { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font); color: var(--muted); text-transform: none; letter-spacing: 0; }
.du-confl b { color: var(--text); font-weight: 600; }
.du-ai .acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 2px; border-top: 1px dashed var(--machine-line); margin-top: 2px; padding-top: 10px; }
.du-ai .acts .du-btn { min-height: 30px; padding: 0 10px; font-size: 13px; background: #fff; }
.du-ai .acts .du-btn.ok { color: var(--good); border-color: var(--good-line); }
.du-ai .acts .du-btn.ok:hover { background: var(--good-bg); }
.du-ai .acts .src { margin-left: auto; font: var(--t-small); color: var(--faint); display: inline-flex; align-items: center; gap: 5px; }

/* ---------- keyboard-first desktop ---------- */
.du-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface);
  font: 500 11px var(--font); color: var(--faint); }
.du-btn.primary .du-kbd { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- sync status: offline-first, shown ---------- */
.du-sync { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--font); color: var(--muted); }
.du-sync i { width: 7px; height: 7px; border-radius: 50%; background: #12B76A; }
.du-sync.off i { background: #F79009; }

/* ---------- map furniture ---------- */
.du-mapctl { position: absolute; right: 10px; top: 10px; display: grid; background: #fff; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line-2), 0 2px 4px rgba(16,24,40,.06); overflow: hidden; }
.du-mapctl button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); }
.du-mapctl button + button { border-top: 1px solid var(--line); }
.du-scale { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px;
  font: 500 10.5px var(--font); color: var(--muted); background: rgba(255,255,255,.85); padding: 3px 7px; border-radius: 4px; }
.du-scale i { width: 40px; height: 4px; border: 1.5px solid var(--muted); border-top: 0; }

.du-sheet.lift { transition: box-shadow .18s, border-color .18s; }
.du-sheet.lift:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); }

/* phone: controls never break across lines */
.du-btn, .du-ref, .du-tag { white-space: nowrap; }
.du-issue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: var(--t-small); color: var(--muted); }
.du-issue > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }

/* ==========================================================================================================
 * Compartments — the structure that keeps a dense screen readable.
 *
 * A screen is built from zones (what part of the job this is) holding compartments (one task each). Every
 * compartment has a header band that names the task, its step in the work if it has one, and its state; the body
 * holds only that task. Zones are spaced wider than compartments, so the eye groups them before reading them.
 * The Smart compartment is where the model works next to the person: its own ground, the AI mark, and a thin
 * intelligence strip that moves only while the model is reading.
 * ========================================================================================================== */
.du-zone { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.du-zone::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.du-zone b { font-weight: 600; color: var(--muted); }

.du-comp { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 76px; }
.du-comp-h { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; background: var(--sunk); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.du-comp-h h2 { margin: 0; font: 600 14.5px/1.3 var(--font); color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.du-comp-h .du-comp-meta { margin-left: auto; font: var(--t-small); color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.du-comp-b { padding: 14px 16px; }
.du-comp-b.flush { padding: 0; }
.du-comp-sub { padding: 12px 16px; border-top: 1px solid var(--line); }
.du-comp-sub > h3 { margin: 0 0 8px; font: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); display: flex; align-items: center; gap: 8px; }

/* the step a compartment is in the work: number while to do, ring while current, check once done */
.du-step { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 11.5px var(--font);
  color: var(--muted); background: var(--surface); border: 1.5px solid var(--line-2); box-sizing: border-box; font-variant-numeric: tabular-nums; }
.du-step.now { color: var(--accent-text); border: 2px solid var(--accent); box-sizing: border-box; }
.du-step.done { color: var(--accent-on); background: var(--accent); border-color: var(--accent); }
.du-step.done svg { width: 12px; height: 12px; }

/* the AI mark: one small, solid sign wherever the model is at work */
.du-aimark { flex: none; width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-on); }
.du-aimark svg { width: 13px; height: 13px; }

.du-comp.smart { border-color: var(--machine-line); }
.du-comp.smart > .du-comp-h { background: var(--machine-field); border-bottom-color: var(--machine-line); }
.du-comp.smart > .du-comp-h h2 { color: var(--accent-text); }
/* no accent bar at rest: a Smart box is marked by its tinted header and the AI mark alone. While the model is working,
 * a thin progress line runs under the header — a loading indicator, gone when the reading lands. */
.du-comp.smart.reading::after { content: ''; position: absolute; left: 0; top: 47px; height: 2px; width: 28%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .du-comp.smart.reading::after { animation: du-scan 1.4s ease-in-out infinite; }
  @keyframes du-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } }
}

/* the plan: the order of the work, where you are in it, one tap to each step */
.du-plan { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.du-plan > button { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-align: left; min-width: 0; }
.du-plan > button + button { border-left: 1px solid var(--line); }
.du-plan > button:hover { background: var(--hover); }
.du-plan > button[aria-current="step"] { background: var(--accent-bg); }
.du-plan > button[aria-current="step"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
.du-plan .t { display: grid; gap: 1px; min-width: 0; }
.du-plan .t b { font: 600 13px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-plan .t small { font: 12px/1.3 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .du-plan { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .du-plan > * { padding: 10px 12px !important; border-left: 0 !important; border-top: 1px solid var(--line); }
  .du-plan > *:nth-child(-n+2) { border-top: 0; }
  .du-plan > *:nth-child(2n) { border-left: 1px solid var(--line) !important; }
}

/* a queue: many rows read at a glance, one opened in place */
.du-queue { display: grid; }
.du-qhead, .du-qrow { display: grid; align-items: center; gap: 12px; padding: 0 16px; }
.du-qhead { min-height: 34px; font: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); border-bottom: 1px solid var(--line); background: var(--surface); }
.du-qrow { box-sizing: border-box; min-width: 0; min-height: 56px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.du-qrow:hover { background: var(--hover); }
.du-qrow[aria-expanded="true"] { background: var(--accent-bg); }
.du-qrow .num { font: 600 12px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.du-qdetail { border-bottom: 1px solid var(--line); background: var(--surface); }
.du-zone span { font: var(--t-small); text-transform: none; letter-spacing: 0; color: var(--faint); }

/* 'Show n more' at the foot of a compartment (phone): a full-width quiet row, not a button shape */
.du-showmore { display: block; width: 100%; padding: 12px 16px; text-align: left; font: 600 13.5px var(--font); color: var(--accent-text); border-top: 1px solid var(--line); background: var(--surface); }
.du-showmore:hover { background: var(--hover); }