/* ==========================================================================
   ROULO GLACE — components. Instrument archetype.
   Prototype chrome (device frames, bar, toasts, tour) + the library.
   Every shape value reads a token. Nothing here hardcodes a radius, a border
   weight, a shadow, a control height or a card padding.
   ========================================================================== */

/* =========================  DEVICE FRAMES  ============================== */
.phone-stage {
  --phone-fit: 1;
  height: 100dvh; overflow: hidden;
  display: grid; place-content: center; place-items: center;
  padding: var(--s-4) var(--gutter) calc(var(--pocbar-h) + var(--s-4));
  background:
    radial-gradient(680px 480px at 50% 6%, oklch(0.805 0.155 79 / 0.09), transparent 66%),
    var(--bg);
}
.phone {
  --app-gutter: var(--s-4);
  width: 390px; height: 844px; flex: none;
  transform: scale(var(--phone-fit));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  border: 10px solid oklch(0.255 0.008 74);
  border-radius: 52px;
  box-shadow: 0 50px 100px -30px oklch(0 0 0 / 0.9),
              0 0 0 1px oklch(0.42 0.014 76),
              inset 0 1px 0 oklch(1 0 0 / 0.06);
}
.phone::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 34px; background: oklch(0.255 0.008 74);
  border-radius: 20px; z-index: 5;
}
.phone-status { height: 54px; padding: 12px 28px 0; flex: none; }
.phone-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; background: var(--bg); }
.phone-scroll::-webkit-scrollbar { display: none; }
.phone-scroll > * { flex-shrink: 0; }
.phone-tabbar {
  display: grid; grid-auto-flow: column; height: 84px; padding: 8px 8px 24px; flex: none;
  border-top: var(--rule); background: var(--surface);
}
.phone-tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; min-height: 44px; color: var(--muted-2); text-decoration: none;
  border-radius: var(--r-ctl); transition: color var(--dur-1) var(--ease);
}
.phone-tabbar a .ico { width: 24px; height: 24px; }
.phone-tabbar a:hover { color: var(--ink-2); }
.phone-tabbar a[aria-current="page"] { color: var(--primary); }
.phone-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; background: oklch(0.55 0.01 74); border-radius: 3px; z-index: 4;
}
.phone-caption { display: none; max-width: 34ch; color: var(--muted); font-size: var(--t-14);
  line-height: var(--lh-body); }
.phone-caption strong { display: block; font-family: var(--font-display); font-size: var(--t-22);
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--s-3); }
@media (min-width: 1100px) {
  .phone-stage { grid-template-columns: auto minmax(280px, 36ch); gap: var(--s-8); }
  .phone-caption { display: block; }
}
@media (max-height: 940px) { .phone-stage { --phone-fit: .95; } }
@media (max-height: 880px) { .phone-stage { --phone-fit: .90; } }
@media (max-height: 820px) { .phone-stage { --phone-fit: .84; } }
@media (max-height: 770px) { .phone-stage { --phone-fit: .78; } }
@media (max-height: 700px) { .phone-stage { --phone-fit: .72; } }
@media (max-height: 640px) { .phone-stage { --phone-fit: .66; } }
@media (max-width: 600px) {
  .phone-stage { --phone-fit: 1; padding: 0; grid-template-columns: 1fr; background: var(--bg); }
  .phone { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .phone::before, .phone-status, .phone-home { display: none; }
  body.has-pocbar .phone-stage, body.has-pocbar .phone { height: calc(100dvh - var(--pocbar-h)); }
  .phone-tabbar { padding-bottom: 8px; height: 64px; }
  .phone-caption { display: none; }
}
.tablet-stage { --tablet-fit: 1; display: grid; place-items: center; height: 100dvh;
  padding: var(--s-4); overflow: hidden; background: var(--bg); }
.tablet { width: 1024px; height: 768px; transform: scale(var(--tablet-fit));
  border: 12px solid oklch(0.255 0.008 74); border-radius: 28px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--bg); }
.tablet-scroll { flex: 1; overflow-y: auto; }
@media (max-width: 1140px) { .tablet-stage { --tablet-fit: .82; } }
@media (max-width: 940px)  { .tablet-stage { --tablet-fit: .66; } }
@media (max-width: 760px)  { .tablet-stage { --tablet-fit: .50; } }

/* Bottom sheet — modals read as web, sheets read as native. */
.sheet-scrim { position: fixed; inset: 0; background: oklch(0.08 0.01 70 / 0.72);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease); z-index: var(--z-layer); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: var(--rule); box-shadow: var(--elev-modal);
  transform: translateY(100%); transition: transform var(--dur-3) var(--ease-out);
  z-index: calc(var(--z-layer) + 1); display: flex; flex-direction: column; }
.sheet::before { content: ""; width: 36px; height: 4px; border-radius: 2px;
  background: var(--line-strong); margin: var(--s-3) auto var(--s-2); flex: none; }
.sheet-body { padding: var(--s-4) var(--app-gutter, var(--s-4)) var(--s-6); overflow-y: auto; }
body.layer-open .sheet-scrim { opacity: 1; pointer-events: auto; }
body.layer-open .sheet { transform: translateY(0); }

/* Push notification, inside the frame. */
.push { position: absolute; top: 62px; left: 12px; right: 12px; z-index: 6;
  background: var(--surface-2); border: var(--rule); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); box-shadow: var(--elev-pop);
  transform: translateY(-140%); transition: transform var(--dur-3) var(--ease-out); }
.push.in { transform: translateY(0); }
.push b { display: block; font-size: var(--t-13); font-weight: 600; }
.push span { display: block; font-size: var(--t-12); color: var(--muted); margin-top: 2px; }

/* =========================  PROTOTYPE BAR  ============================== */
.pocbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--pocbar-h); z-index: var(--z-pocbar);
  display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-4);
  background: oklch(0.115 0.008 70 / 0.92); backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid oklch(0.32 0.012 72); color: var(--ink-2); font-size: var(--t-12);
}
.pocbar .tagword { font-family: var(--font-mono); font-size: var(--t-11); font-weight: 600;
  letter-spacing: 0.1em; color: var(--primary); }
.pocbar .roles { display: flex; gap: 2px; }
.pocbar .roles a { padding: 5px var(--s-3); border-radius: var(--r-ctl); text-decoration: none;
  color: var(--muted); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.pocbar .roles a:hover { background: oklch(1 0 0 / 0.06); color: var(--ink); }
.pocbar .roles a[aria-current="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.pocbar .mods { display: flex; gap: 4px; }
.pocbar .tag-module { font-family: var(--font-mono); font-size: var(--t-11); padding: 2px 6px;
  border: 1px solid oklch(0.36 0.012 72); border-radius: 6px; color: var(--muted); text-decoration: none; }
.pocbar .tag-module:hover { border-color: var(--primary); color: var(--primary); }
.pocbar .spacer { flex: 1; }
.pocbar button.link { color: var(--muted); padding: 5px var(--s-2); border-radius: var(--r-ctl);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.pocbar button.link:hover { color: var(--primary); background: oklch(1 0 0 / 0.06); }
body.has-pocbar { padding-bottom: 0; }
@media (max-width: 720px) { .pocbar .mods { display: none; } }
@media (max-width: 420px) { .pocbar .tagword { display: none; } .pocbar { gap: var(--s-2); padding-inline: var(--s-2); } }

/* Module map overlay */
body.show-sow [data-modules]::after { content: attr(data-modules); }

/* =========================  TOASTS  ===================================== */
.toaster { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--pocbar-h) + var(--s-4)); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; }
.toast { background: var(--surface-2); color: var(--ink); border: var(--rule);
  border-radius: var(--r-full); padding: var(--s-3) var(--s-5); font-size: var(--t-13);
  box-shadow: var(--elev-pop); animation: toast-in var(--dur-3) var(--ease-out);
  max-width: min(90vw, 520px); text-align: center; }
.toast.ok  { border-color: var(--success); box-shadow: var(--elev-pop), 0 0 0 1px var(--success-soft); }
.toast.err { border-color: var(--danger);  box-shadow: var(--elev-pop), 0 0 0 1px var(--danger-soft); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* =========================  TOUR  ======================================= */
.tour-scrim { position: fixed; inset: 0; background: oklch(0.08 0.01 70 / 0.74);
  backdrop-filter: blur(2px); z-index: var(--z-tour); }
.tour-hole { position: fixed; z-index: calc(var(--z-tour) + 1); border-radius: var(--r-card);
  box-shadow: 0 0 0 9999px oklch(0.08 0.01 70 / 0.74), 0 0 0 2px var(--primary), var(--elev-gold);
  pointer-events: none; transition: all var(--dur-3) var(--ease-out); }
.tour-pop { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--pocbar-h) + var(--s-5)); z-index: calc(var(--z-tour) + 2);
  width: min(92vw, 460px); background: var(--surface-2); border: var(--rule-strong);
  border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--elev-modal);
  animation: toast-in var(--dur-3) var(--ease-out); }
.tour-pop .step { font-family: var(--font-mono); font-size: var(--t-11); color: var(--primary); }
.tour-pop h3 { font-size: var(--t-22); margin: var(--s-2) 0 var(--s-3); }
.tour-pop p { font-size: var(--t-14); color: var(--muted); line-height: var(--lh-body); }
.tour-pop .row { margin-top: var(--s-5); }

/* =========================  REVEALS  ====================================
   Markup renders VISIBLE; JS opts into hiding. A failsafe reveals everything
   regardless, so a headless render or a hidden tab never ships a blank page. */
.rv.pre { opacity: 0; transform: translateY(18px); }
.rv.in  { opacity: 1; transform: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 999; background: var(--primary);
  color: var(--on-primary); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); }

/* ==========================================================================
   DENSITY SCOPE — the phone relaxes, the ledger tightens.
   ========================================================================== */
.phone { --h-ctl: 52px; --h-ctl-sm: 40px; --h-row: 60px; --pad-card: var(--s-4); }
.deck  { --h-ctl: 40px; --h-ctl-sm: 32px; --h-row: 48px; }

/* =========================  SURFACES  =================================== */
.sheet-p {
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--elev-card);
  overflow: hidden;
}
.sheet-p > .sheet-head, .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--pad-card);
  border-bottom: var(--rule);
  min-height: var(--h-row);
}
.sheet-b { padding: var(--pad-card); }
.sheet-f { padding: var(--s-3) var(--pad-card); border-top: var(--rule); }
.well {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent);
  background-color: var(--surface-2);
  border: var(--rule); border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
}
.drench { background: var(--drench); color: var(--on-drench); }
.drench .muted, .drench .muted-2 { color: var(--on-drench-muted); }
.drench .rubric { color: oklch(0.52 0.135 62); }
.drench hr, .drench .divider { border-color: var(--drench-line); }

/* =========================  CONTROLS  =================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--h-ctl); padding: 0 var(--s-5);
  border: var(--bw) solid transparent; border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: var(--t-14); font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 17px; height: 17px; flex: none; }

/* Gold is the primary action. It is the brand and it is the money. */
.btn-primary {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary-strong);
  box-shadow: var(--elev-gold), inset 0 1px 0 oklch(1 0 0 / 0.3);
}
.btn-primary:hover {
  background: var(--primary-strong);
  box-shadow: 0 14px 38px -10px var(--primary-glow), inset 0 1px 0 oklch(1 0 0 / 0.36);
}

/* Accept is the money button. It is the only control in the product that gets
   a ring, because taking a load is the only irreversible thing a carrier does
   in one tap. */
.btn-accept {
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  color: var(--on-primary); border-color: var(--primary-strong);
  box-shadow: 0 0 0 4px var(--primary-glow), var(--elev-gold), inset 0 1px 0 oklch(1 0 0 / 0.34);
  font-weight: 700; letter-spacing: -0.015em;
}
.btn-accept:hover {
  background: var(--primary-strong);
  box-shadow: 0 0 0 6px var(--primary-glow), 0 16px 42px -10px var(--primary-glow),
              inset 0 1px 0 oklch(1 0 0 / 0.4);
}
.btn-accept:disabled { background: var(--surface-2); box-shadow: none; }
.btn-quiet { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong);
  box-shadow: var(--lift); }
.btn-quiet:hover { background: var(--surface-3); border-color: var(--muted-2); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: oklch(1 0 0 / 0.06); color: var(--ink); }
.btn-danger { background: var(--danger); color: oklch(0.15 0.02 22); border-color: var(--danger); }
.btn-danger:hover { filter: brightness(1.1); }
.btn-sm { min-height: var(--h-ctl-sm); padding: 0 var(--s-3); font-size: var(--t-13); }
.btn-lg { min-height: var(--h-ctl-lg); padding: 0 var(--s-6); font-size: var(--t-16); border-radius: var(--r-ctl); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface-2); color: var(--muted-2); border-color: var(--line);
  box-shadow: none; opacity: 1; cursor: not-allowed; pointer-events: none;
}
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid var(--on-primary); border-top-color: transparent;
  border-radius: var(--r-full); animation: spin 620ms linear infinite;
}
.btn-quiet.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--ink); border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-icon { min-height: var(--h-ctl); min-width: var(--h-ctl); padding: 0; }
@media (pointer: coarse) { .btn, .btn-icon, .tabs a, .rail a { min-height: 44px; min-width: 44px; } }

/* ---- Fields ---- */
.field { display: block; }
.field + .field { margin-top: var(--s-4); }
.field > label:not(.toggle):not(.check), .lab {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--t-13); font-weight: 500; color: var(--ink-2);
}
.input, .select, .textarea {
  width: 100%; min-height: var(--h-ctl); padding: var(--s-2) var(--s-4);
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r-ctl);
  font-size: var(--t-15);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              background var(--dur-1) var(--ease);
}
.textarea { min-height: calc(var(--h-ctl) * 2.2); resize: vertical; line-height: var(--lh-body); padding-top: var(--s-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px var(--primary-glow); background: var(--surface-2);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 14px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--s-8);
}
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: var(--danger); }
.err { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2);
  font-size: var(--t-13); color: var(--danger-ink); }
.err .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.hint { margin-top: var(--s-2); font-size: var(--t-13); color: var(--muted); }

.check { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; font-size: var(--t-14); }
.check input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }

.toggle { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track { width: 46px; height: 26px; flex: none; background: var(--surface-3);
  border: var(--rule); border-radius: var(--r-full); position: relative;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: var(--muted); border-radius: var(--r-full);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease); }
.toggle input:checked + .track { background: var(--primary); border-color: var(--primary-strong); }
.toggle input:checked + .track::after { transform: translateX(20px); background: var(--on-primary); }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--primary-glow); }

.seg { display: inline-flex; background: var(--surface); border: var(--rule);
  border-radius: var(--r-ctl); padding: 3px; gap: 3px; }
.seg button, .seg a {
  min-height: calc(var(--h-ctl) - 10px); padding: 0 var(--s-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--t-13); font-weight: 600; color: var(--muted);
  border-radius: calc(var(--r-ctl) - 3px); text-decoration: none;
  transition: background var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.seg button:hover, .seg a:hover { color: var(--ink); }
.seg [aria-pressed="true"], .seg [aria-current="page"], .seg [aria-current="true"] {
  background: var(--surface-3); color: var(--ink); box-shadow: var(--lift);
}

/* =========================  STATUS  =====================================
   Colour is never the only indicator: every pill carries a dot and a word. */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-3); border-radius: var(--r-full);
  font-size: var(--t-12); font-weight: 600; letter-spacing: -0.005em;
  border: var(--bw) solid transparent; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: currentColor; flex: none; box-shadow: 0 0 8px currentColor; }
.pill-open      { background: var(--primary-soft);  color: var(--primary);     border-color: var(--primary-soft-2); }
.pill-assigned  { background: var(--info-soft);     color: var(--info-ink);    border-color: oklch(0.42 0.08 234); }
.pill-transit   { background: var(--surface-3);     color: var(--ink-2);       border-color: var(--line-strong); }
.pill-delivered { background: var(--success-soft);  color: var(--success-ink); border-color: oklch(0.42 0.09 158); }
.pill-exception { background: var(--warning-soft);  color: var(--warning-ink); border-color: oklch(0.44 0.10 45); }
.pill-damage, .pill-blocked, .pill-expired {
  background: var(--danger-soft); color: var(--danger-ink); border-color: oklch(0.44 0.12 22); }
.pill-verified  { background: var(--success-soft);  color: var(--success-ink); border-color: oklch(0.42 0.09 158); }
.pill-pending   { background: var(--surface-3);     color: var(--muted);       border-color: var(--line-strong); }

/* =========================  DATA  ======================================= */
.ledger-wrap { overflow-x: auto; border: var(--rule); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--elev-card); }
table.ledger { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
table.ledger th {
  text-align: left; padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border-bottom: var(--rule);
  font-size: var(--t-12); font-weight: 600; color: var(--muted);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
table.ledger td { padding: var(--s-3) var(--s-4); border-bottom: var(--row-rule);
  height: var(--h-row); vertical-align: middle; }
table.ledger tbody tr:last-child td { border-bottom: 0; }
table.ledger tbody tr { transition: background var(--dur-1) var(--ease); }
table.ledger tbody tr:hover { background: oklch(1 0 0 / 0.035); }
table.ledger tbody tr[aria-selected="true"] { background: var(--primary-soft); }
table.ledger td.num, table.ledger th.num { text-align: right; }
.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--ink); }
.sortable[aria-sort]::after { content: ""; display: inline-block; margin-left: var(--s-2);
  border: 4px solid transparent; }
.sortable[aria-sort="ascending"]::after  { border-bottom-color: var(--primary); margin-bottom: 4px; }
.sortable[aria-sort="descending"]::after { border-top-color: var(--primary); margin-top: 4px; }

.bulkbar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--primary); color: var(--on-primary); border-radius: var(--r-card);
  font-size: var(--t-14); font-weight: 500; box-shadow: var(--elev-gold); }
.bulkbar .btn-quiet { background: oklch(0 0 0 / 0.16); border-color: oklch(0 0 0 / 0.28); color: var(--on-primary); }
.bulkbar .btn-quiet:hover { background: oklch(0 0 0 / 0.26); }
.bulkbar .btn-ghost { color: var(--on-primary); opacity: 0.75; }
.bulkbar .btn-ghost:hover { background: oklch(0 0 0 / 0.18); color: var(--on-primary); opacity: 1; }

/* Ruled rows — the mobile form of a table. */
.lrows { display: flex; flex-direction: column; }
.lrow {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--h-row); padding: var(--s-4) var(--pad-card);
  border-bottom: var(--row-rule); background: transparent;
  text-decoration: none; color: inherit; position: relative;
  transition: background var(--dur-1) var(--ease);
}
.lrow:last-child { border-bottom: 0; }
a.lrow, .lrow[data-href] { cursor: pointer; }
a.lrow::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary); opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
a.lrow:hover, .lrow[data-href]:hover { background: oklch(1 0 0 / 0.04); }
a.lrow:hover::after { opacity: 1; }
.lrow-main { flex: 1; min-width: 0; }
.lrow-t { display: block; font-weight: 600; font-size: var(--t-15); letter-spacing: -0.012em; }
.lrow-s { display: block; font-size: var(--t-13); color: var(--muted); margin-top: 2px; }
.lrow-end { text-align: right; flex: none; }

/* =========================  NAVIGATION  ================================= */
.deck { display: flex; min-height: 100vh; }
.rail {
  width: 74px; flex: none; display: flex; flex-direction: column; align-items: center;
  padding: var(--s-4) 0; gap: var(--s-1);
  background: oklch(0.115 0.008 70); border-right: var(--rule);
  position: sticky; top: 0; height: 100vh;
}
.rail .mark { margin-bottom: var(--s-5); color: var(--ink); }
.rail a {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--r-ctl); color: var(--muted); text-decoration: none; position: relative;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rail a:hover { background: oklch(1 0 0 / 0.08); color: var(--ink); }
.rail a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
.rail a[aria-current="page"]::before {
  content: ""; position: absolute; left: -13px; top: 12px; bottom: 12px; width: 3px;
  background: var(--primary); border-radius: var(--r-full); box-shadow: 0 0 12px var(--primary-glow);
}
.rail .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.rail .spread { flex: 1; }

.deck-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.deck-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-6); border-bottom: var(--rule);
  background: oklch(0.145 0.008 70 / 0.86); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: var(--z-sticky); min-height: 68px;
}
.deck-main { flex: 1; padding: var(--s-6); padding-bottom: calc(var(--pocbar-h) + var(--s-7)); }

.split-view { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; }
.split-list { border-right: var(--rule); min-height: 60vh; }
.split-detail { padding: var(--s-6); min-width: 0; }
@media (max-width: 960px) {
  .split-view { grid-template-columns: 1fr; }
  .split-list { border-right: 0; border-bottom: var(--rule); min-height: 0; }
  .split-detail { padding: var(--s-4); }
}
@media (max-width: 760px) {
  .deck { flex-direction: column; }
  .rail { width: 100%; height: auto; position: sticky; top: 0; z-index: var(--z-sticky);
    flex-direction: row; padding: var(--s-2) var(--s-3); overflow-x: auto; border-right: 0;
    border-bottom: var(--rule); }
  .rail .mark { margin: 0 var(--s-3) 0 0; }
  .rail a[aria-current="page"]::before { left: 10px; right: 10px; top: auto; bottom: -8px;
    width: auto; height: 3px; }
  .deck-main, .deck-head { padding-inline: var(--s-4); }
}

.tabs { display: flex; gap: var(--s-5); border-bottom: var(--rule); overflow-x: auto; }
.tabs a, .tabs button {
  padding: var(--s-3) 0; font-size: var(--t-14); font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }

/* =========================  FIGURES & FEEDBACK  ========================= */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.fig { padding: var(--s-5); background: var(--surface); border: var(--rule);
  border-radius: var(--r-card); box-shadow: var(--elev-card);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.fig:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.fig-n { font-family: var(--font-display); font-feature-settings: "tnum" 1;
  font-size: var(--t-32); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.fig-l { margin-top: var(--s-3); font-size: var(--t-13); color: var(--muted); }

.empty { padding: var(--s-8) var(--s-5); text-align: center;
  border: var(--bw) dashed var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.empty .ico { width: 30px; height: 30px; margin: 0 auto var(--s-4); color: var(--muted-2); }
.empty h3 { font-size: var(--t-22); margin-bottom: var(--s-2); }
.empty p { color: var(--muted); font-size: var(--t-14); max-width: 44ch; margin: 0 auto var(--s-5); }

.skel { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%; border-radius: var(--r-ctl); animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.banner { display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border: var(--rule); border-radius: var(--r-card);
  background: var(--surface); font-size: var(--t-14); line-height: var(--lh-body); }
.banner .ico { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.banner-warn   { background: var(--warning-soft); border-color: oklch(0.42 0.10 45); color: var(--warning-ink); }
.banner-danger { background: var(--danger-soft);  border-color: oklch(0.42 0.12 22); color: var(--danger-ink); }
.banner-ok     { background: var(--success-soft); border-color: oklch(0.40 0.09 158); color: var(--success-ink); }
.banner-info   { background: var(--primary-soft); border-color: var(--primary-soft-2); color: var(--primary); }
.banner strong { font-weight: 700; }
.banner a { color: inherit; text-underline-offset: 3px; }

.divider { border: 0; border-top: var(--rule); margin: var(--s-5) 0; }

.avatar { width: 38px; height: 38px; flex: none; border-radius: var(--r-full);
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
  font-size: var(--t-13); font-weight: 700; overflow: hidden; border: var(--rule); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: var(--t-18); }

.prog { height: 7px; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; }
.prog span { display: block; height: 100%; background: var(--primary); border-radius: var(--r-full);
  box-shadow: 0 0 12px var(--primary-glow); }

.tl { position: relative; padding-left: var(--s-6); }
.tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--primary-soft-2), var(--line)); border-radius: 1px; }
.tl-item { position: relative; padding-bottom: var(--s-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: calc(var(--s-6) * -1); top: 4px;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--surface); border: 2px solid var(--line-strong); }
.tl-item.is-done::before { background: var(--success); border-color: var(--success); }
.tl-item.is-now::before  { background: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 0 5px var(--primary-glow); }
.tl-t { font-weight: 600; font-size: var(--t-15); }
.tl-s { font-size: var(--t-13); color: var(--muted); margin-top: 2px; }

/* =========================  SITE CHROME  ================================ */
.sitebar { display: flex; align-items: center; gap: var(--s-4); min-height: 74px; }
.brandlink { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-18); letter-spacing: -0.03em; }
.brandlink em { font-style: normal; color: var(--primary); }
.sitenav { display: flex; gap: var(--s-5); }
.sitenav a { font-size: var(--t-14); color: var(--muted); text-decoration: none;
  transition: color var(--dur-1) var(--ease); }
.sitenav a:hover { color: var(--primary); }
#site-header { border-bottom: var(--rule); background: oklch(0.145 0.008 70 / 0.82);
  backdrop-filter: blur(14px); position: sticky; top: 0; z-index: var(--z-sticky); }
#site-footer { border-top: var(--rule); margin-top: var(--section-tight); background: oklch(0.115 0.008 70); }
.sitefoot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-6);
  padding-block: var(--s-7) calc(var(--pocbar-h) + var(--s-6)); }
.sitefoot nav { display: flex; flex-direction: column; gap: var(--s-3); }
.sitefoot nav a { font-size: var(--t-14); color: var(--muted); text-decoration: none; }
.sitefoot nav a:hover { color: var(--primary); }
.sitefoot .buildline { grid-column: 1 / -1; padding-top: var(--s-5); border-top: var(--rule); }
@media (max-width: 760px) { .sitefoot { grid-template-columns: 1fr; } .sitenav { display: none; } }

/* =========================  RATE GUIDANCE  ============================== */
.rateband { margin-top: var(--s-4); }
.rb-track { position: relative; height: 10px; border-radius: var(--r-full);
  background: linear-gradient(90deg, oklch(0.45 0.14 22), oklch(0.55 0.14 45) 38%,
              var(--primary) 62%, oklch(0.62 0.13 158));
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.5); }
.rb-mark { position: absolute; top: -5px; width: 4px; height: 20px; background: var(--ink);
  border-radius: var(--r-full); transform: translateX(-2px);
  box-shadow: 0 0 0 2px var(--bg), 0 2px 8px oklch(0 0 0 / 0.7);
  transition: left var(--dur-3) var(--ease-out); }
.rb-legend { display: flex; justify-content: space-between; margin-top: var(--s-3);
  font-size: var(--t-12); color: var(--muted); }
.rb-verdict.rb-danger { color: var(--danger-ink); }
.rb-verdict.rb-warn { color: var(--warning-ink); }
.rb-verdict.rb-ok { color: var(--success-ink); }

/* =========================  COMMUNITY  ================================== */
.post { border-bottom: var(--row-rule); padding: var(--pad-card); }
.post-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.post-who { font-weight: 600; font-size: var(--t-15); }
.post-meta { font-size: var(--t-12); color: var(--muted); }
.post-body { font-size: var(--t-15); line-height: var(--lh-body); }
.post-photo { margin-top: var(--s-4); border-radius: var(--r-card); overflow: hidden;
  border: var(--rule); }
.post-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-acts { display: flex; gap: var(--s-5); margin-top: var(--s-4); }
.post-acts button { display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-13); color: var(--muted); min-height: 36px;
  transition: color var(--dur-1) var(--ease); }
.post-acts button:hover { color: var(--primary); }
.post-kind { font-size: var(--t-12); font-weight: 600; color: var(--primary);
  background: var(--primary-soft); padding: 3px var(--s-3); border-radius: var(--r-full); }

.msg { max-width: 78%; padding: var(--s-3) var(--s-4); border-radius: var(--r-card);
  font-size: var(--t-14); margin-bottom: var(--s-3); line-height: var(--lh-body); }
.msg-in  { background: var(--surface-2); border: var(--rule); border-bottom-left-radius: 6px; }
.msg-out { background: var(--primary); color: var(--on-primary); margin-left: auto;
  border-bottom-right-radius: 6px; box-shadow: var(--elev-gold); }
.msg-t { font-size: var(--t-11); opacity: 0.65; margin-top: 3px; }

/* =========================  DRIVER FIELD TOOLS  ========================= */
.scanbox { position: relative; aspect-ratio: 4/3; background: oklch(0.09 0.006 70);
  border-radius: var(--r-card); overflow: hidden; display: grid; place-items: center;
  border: var(--rule); }
.scanbox .frame { width: 76%; height: 34%; border: 2px solid var(--primary);
  border-radius: var(--r-ctl); box-shadow: 0 0 0 9999px oklch(0.09 0.006 70 / 0.72),
  0 0 30px var(--primary-glow); }
.scanbox .laser { position: absolute; left: 12%; right: 12%; height: 2px; background: var(--primary);
  box-shadow: 0 0 14px var(--primary); animation: sweep 2.2s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { top: 36%; } 50% { top: 62%; } }
@media (prefers-reduced-motion: reduce) { .scanbox .laser { animation: none; top: 50%; } }

.panelmap { position: relative; background: var(--surface-2); border: var(--rule);
  border-radius: var(--r-card); padding: var(--s-5); }
.panelmap svg { width: 100%; height: auto; display: block; }
.panelmap img { border-radius: var(--r-ctl); }
.dmg-pin { position: absolute; width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--danger); color: oklch(0.15 0.02 22); display: grid; place-items: center;
  font-size: var(--t-13); font-weight: 700; border: 2px solid var(--surface); cursor: pointer;
  transform: translate(-50%, -50%); box-shadow: 0 4px 14px oklch(0 0 0 / 0.7);
  transition: transform var(--dur-2) var(--ease); }
.dmg-pin:hover { transform: translate(-50%, -50%) scale(1.12); }
.dmg-pin.is-new { background: var(--primary); color: var(--on-primary); }

.sigpad { border: var(--bw-strong) dashed var(--line-strong); border-radius: var(--r-card);
  background: var(--surface); height: 170px; position: relative; touch-action: none; cursor: crosshair;
  transition: border-color var(--dur-2) var(--ease); }
.sigpad:hover { border-color: var(--primary-dim); }
.sigpad canvas { width: 100%; height: 100%; display: block; }
.sigpad .ph { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: var(--t-14); pointer-events: none; }
.sigpad.has-ink { border-style: solid; border-color: var(--primary); }
.sigpad.has-ink .ph { display: none; }

/* The eBOL. Bilingual side by side — Loi 96. Rendered as a light document on
   the dark app, because that is what it is: a piece of paper. */
.bol { background: var(--drench); color: var(--on-drench); border-radius: var(--r-card);
  overflow: hidden; box-shadow: var(--elev-modal); }
.bol .rubric { color: oklch(0.52 0.135 62); }
.bol-head { padding: var(--s-5); border-bottom: 1px solid var(--drench-line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.bol-grid { display: grid; grid-template-columns: 1fr 1fr; }
.bol-cell { padding: var(--s-4); border-bottom: 1px solid var(--drench-line);
  border-right: 1px solid var(--drench-line); }
.bol-cell:nth-child(2n) { border-right: 0; }
.bol-cell p { font-size: var(--t-14); }
.bol .muted, .bol .lrow-s { color: var(--on-drench-muted); }
.bol .sheet-b { padding: var(--s-5); }
.bol .lrows { border-top: 1px solid var(--drench-line); }
.bol .lrow { border-bottom: 1px solid var(--drench-line); }
.bol-foot { padding: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.bol-sig { border-top: 1.5px solid var(--on-drench); padding-top: var(--s-2); font-size: var(--t-13); }
.bol-sig .ink { font-family: var(--font-display); font-size: var(--t-22); font-style: italic;
  font-weight: 500; }
@media (max-width: 620px) { .bol-grid, .bol-foot { grid-template-columns: 1fr; }
  .bol-cell { border-right: 0; } }

/* =========================  APP CHROME  ================================= */
.app-head { padding: var(--s-5) var(--app-gutter, var(--s-4)) var(--s-4);
  border-bottom: var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 2; }
.app-title { font-family: var(--font-display); font-size: var(--t-28); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.05; }
.app-sub { font-size: var(--t-13); color: var(--muted); margin-top: var(--s-2); }
.app-pad { padding: var(--s-5) var(--app-gutter, var(--s-4)); }
.backlink { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-13);
  color: var(--muted); text-decoration: none; min-height: 40px;
  transition: color var(--dur-1) var(--ease); }
.backlink:hover { color: var(--primary); }
.deckslots { display: inline-flex; gap: 3px; }
.deckslots i { width: 22px; height: 28px; border: 1.5px solid var(--line-strong);
  border-radius: 4px; background: transparent; }
.deckslots i.full { background: var(--primary); border-color: var(--primary); }
.deckslots i.book { background: var(--primary-soft); border-color: var(--primary-dim); }

/* ==========================================================================
   DESK & ADMIN — data-dense panels, charts, work queues.
   ========================================================================== */

/* ---- Dashboard grid. Panels span columns explicitly, so the page reads as a
   composed layout rather than a stack of identical boxes. ---- */
.dash { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); align-items: start; }
.sp-3 { grid-column: span 3; } .sp-4 { grid-column: span 4; } .sp-5 { grid-column: span 5; }
.sp-6 { grid-column: span 6; } .sp-7 { grid-column: span 7; } .sp-8 { grid-column: span 8; }
.sp-9 { grid-column: span 9; } .sp-12 { grid-column: span 12; }
@media (max-width: 1200px) { .sp-3, .sp-4, .sp-5 { grid-column: span 6; } .sp-7, .sp-8, .sp-9 { grid-column: span 12; } }
@media (max-width: 780px)  { .dash > * { grid-column: span 12 !important; } }

/* ---- The panel. A real header with a title, a subtitle, live meta and its
   own actions — that is what separates a product from a bordered div. ---- */
.panel {
  background: var(--surface); border: var(--rule); border-radius: var(--r-card);
  box-shadow: var(--elev-card); overflow: hidden; display: flex; flex-direction: column;
}
.panel-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: var(--rule);
  background: linear-gradient(180deg, oklch(1 0 0 / 0.03), transparent);
}
.panel-h .ttl { font-family: var(--font-display); font-size: var(--t-16); font-weight: 600;
  letter-spacing: -0.02em; }
.panel-h .sub { font-size: var(--t-13); color: var(--muted); margin-top: 3px; }
.panel-h .acts { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.panel-b { padding: var(--s-5); flex: 1; }
.panel-b.flush { padding: 0; }
.panel-f { padding: var(--s-3) var(--s-5); border-top: var(--rule);
  background: oklch(0 0 0 / 0.16); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s-3); font-size: var(--t-13); color: var(--muted); }
.panel-f a { color: var(--primary); text-decoration: none; font-weight: 600; }
.panel-f a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- KPI tile: value, label, delta and a sparkline. ---- */
.kpi { background: var(--surface); border: var(--rule); border-radius: var(--r-card);
  box-shadow: var(--elev-card); padding: var(--s-5); position: relative; overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.kpi:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.kpi .k-l { font-size: var(--t-13); color: var(--muted); }
.kpi .k-v { font-family: var(--font-display); font-feature-settings: "tnum" 1;
  font-size: var(--t-32); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
  margin-top: var(--s-2); }
.kpi .k-d { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-3);
  font-size: var(--t-12); font-weight: 600; padding: 2px var(--s-2); border-radius: var(--r-full); }
.kpi .k-d.up   { color: var(--success-ink); background: var(--success-soft); }
.kpi .k-d.down { color: var(--danger-ink);  background: var(--danger-soft); }
.kpi .k-d.flat { color: var(--muted); background: var(--surface-3); }
.kpi .spark { position: absolute; right: 0; bottom: 0; width: 46%; height: 46px; opacity: 0.5; }
.kpi.is-alert { border-color: oklch(0.42 0.10 45); }

.spark polyline { fill: none; stroke: var(--primary); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark.down polyline { stroke: var(--danger); }
.spark.up polyline { stroke: var(--success); }

/* ---- Charts ---- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .c-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .c-base { stroke: var(--line-strong); stroke-width: 1; }
.chart .c-axis { font-family: var(--font-body); font-size: 13px; fill: var(--muted); }
.chart .c-name { font-size: 13.5px; fill: var(--ink-2); }
.chart .c-val  { font-family: var(--font-mono); font-size: 12.5px; fill: var(--muted);
  opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.chart .c-bar:hover .c-val, .chart .c-pt:hover .c-val { opacity: 1; }
.chart .c-bar rect { transition: filter var(--dur-1) var(--ease); cursor: default; }
.chart .c-bar:hover rect { filter: brightness(1.18); }
.chart .c-track { fill: var(--surface-3); }
.chart .c-line { fill: none; stroke: var(--primary); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; }
.chart .c-area { fill: var(--primary); opacity: 0.10; }
.chart .c-dot { fill: var(--bg); stroke: var(--primary); stroke-width: 2.5;
  transition: r var(--dur-1) var(--ease); }
.chart .c-pt:hover .c-dot { r: 6.5; }
.c-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4);
  font-size: var(--t-13); color: var(--muted); }
.c-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.c-legend i { width: 11px; height: 11px; border-radius: 3px; }

/* ---- Filter bar ---- */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--surface); border: var(--rule);
  border-radius: var(--r-card); box-shadow: var(--elev-card); }
.filterbar .input, .filterbar .select { min-height: 40px; }
.chip { min-height: 36px; padding: 0 var(--s-4); display: inline-flex; align-items: center;
  gap: var(--s-2); font-size: var(--t-13); font-weight: 600; border: var(--rule);
  border-radius: var(--r-full); background: var(--surface); color: var(--muted);
  white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease); }
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary);
  border-color: var(--primary-strong); }
.chip .n { font-family: var(--font-mono); font-size: var(--t-11); opacity: 0.75; }

/* ---- Work queue: the thing an operator actually does all day ---- */
.queue { display: flex; flex-direction: column; }
.q-item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3) var(--s-4);
  align-items: start; padding: var(--s-4) var(--s-5); border-bottom: var(--row-rule);
  transition: background var(--dur-1) var(--ease); }
.q-item > .q-acts { grid-column: 2; }
.q-item:last-child { border-bottom: 0; }
.q-item:hover { background: oklch(1 0 0 / 0.035); }
.q-ico { width: 40px; height: 40px; border-radius: var(--r-ctl); display: grid; place-items: center; }
.q-ico.warn { background: var(--warning-soft); color: var(--warning-ink); }
.q-ico.dang { background: var(--danger-soft);  color: var(--danger-ink); }
.q-ico.info { background: var(--primary-soft); color: var(--primary); }
.q-ico.ok   { background: var(--success-soft); color: var(--success-ink); }
.q-t { display: block; font-weight: 600; font-size: var(--t-15); line-height: 1.35; }
.q-s { display: block; font-size: var(--t-13); color: var(--muted); margin-top: var(--s-2);
  line-height: var(--lh-body); }
.q-acts { display: flex; gap: var(--s-2); flex: none; }
/* Wide columns can put the action back on the same line. */
@media (min-width: 1400px) {
  .sp-6 .q-item, .sp-7 .q-item, .sp-8 .q-item, .sp-12 .q-item {
    grid-template-columns: 40px 1fr auto; align-items: center; }
  .sp-6 .q-item > .q-acts, .sp-7 .q-item > .q-acts,
  .sp-8 .q-item > .q-acts, .sp-12 .q-item > .q-acts { grid-column: 3; }
}

/* ---- Activity feed ---- */
.act { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: var(--row-rule); font-size: var(--t-13); }
.act:last-child { border-bottom: 0; }
.act .dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--muted-2);
  margin-top: 7px; }
.act .dot.gold { background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); }
.act .dot.ok { background: var(--success); }
.act .dot.bad { background: var(--danger); }
.act .who { font-weight: 600; color: var(--ink); }
.act .when { color: var(--muted-2); font-family: var(--font-mono); font-size: var(--t-11);
  white-space: nowrap; }

/* ---- Leaderboard rows ---- */
.lead-row { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s-3);
  align-items: center; padding: var(--s-3) var(--s-5); border-bottom: var(--row-rule); }
.lead-row:last-child { border-bottom: 0; }
.lead-row .rank { font-family: var(--font-mono); font-size: var(--t-13); color: var(--muted-2); }
.lead-row .bar { height: 5px; border-radius: var(--r-full); background: var(--surface-3);
  margin-top: 6px; overflow: hidden; }
.lead-row .bar i { display: block; height: 100%; background: var(--primary); border-radius: var(--r-full); }

/* Selection checkbox column in a ledger */
table.ledger td.sel, table.ledger th.sel { width: 44px; }
table.ledger td .mono { white-space: nowrap; }
table.ledger input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }