/* ─────────────────────────────────────────────────────────────────────
   Steward — hotel operations · unified design system
   ────────────────────────────────────────────────────────────────────
   One product, one accent. Three domains (Consumable / Asset / Rotable)
   live inside one system; their colours appear only on domain chips
   and chart series, never as full-page theme overrides.
─────────────────────────────────────────────────────────────────────── */

:root {
  /* neutrals */
  --bg:       oklch(98.5% 0.003 250);
  --surface:  oklch(100% 0 0);
  --surface-2:oklch(96.5% 0.005 250);
  --fg:       oklch(20% 0.018 250);
  --muted:    oklch(50% 0.014 250);
  --faint:    oklch(70% 0.010 250);
  --border:   oklch(91% 0.006 250);
  --border-2: oklch(86% 0.008 250);

  /* brand + status */
  --accent:   oklch(52% 0.15 235);   /* focal blue */
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
  --accent-ink:  oklch(38% 0.18 235);

  --success:  oklch(58% 0.13 155);
  --success-soft: color-mix(in oklch, var(--success) 14%, transparent);
  --warn:     oklch(72% 0.16 75);
  --warn-soft: color-mix(in oklch, var(--warn) 18%, transparent);
  --danger:   oklch(58% 0.20 25);
  --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent);
  --info:     oklch(56% 0.10 220);
  --info-soft: color-mix(in oklch, var(--info) 14%, transparent);
  --violet:   oklch(54% 0.16 295);
  --violet-soft: color-mix(in oklch, var(--violet) 14%, transparent);

  /* type */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-meta: 13px;
  --fs-body: 14px;
  --fs-lg: 16px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-h1: 28px;
  --fs-display: 34px;

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --side-w: 240px;
  --topbar-h: 56px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10);

  /* ─── domain accents (chips + chart series only, never page theme) ─── */
  --dom-c:        oklch(52% 0.15 235);  /* Consumable — focal blue */
  --dom-c-soft:   color-mix(in oklch, var(--dom-c) 14%, transparent);
  --dom-c-ink:    oklch(36% 0.16 235);
  --dom-a:        oklch(54% 0.16 280);  /* Asset — indigo/violet */
  --dom-a-soft:   color-mix(in oklch, var(--dom-a) 14%, transparent);
  --dom-a-ink:    oklch(38% 0.17 280);
  --dom-r:        oklch(56% 0.13 195);  /* Rotable — teal */
  --dom-r-soft:   color-mix(in oklch, var(--dom-r) 14%, transparent);
  --dom-r-ink:    oklch(38% 0.14 215);
}

/* ─── domain chip — appears in lists, rows, headers, ledger lines ─── */
.dom-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 18px; padding: 0 7px 0 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.dom-chip::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 3px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: white;
}
.dom-chip.c        { background: var(--dom-c-soft); color: var(--dom-c-ink); }
.dom-chip.c::before { background: var(--dom-c); content: 'C'; padding-top: 1px; }
.dom-chip.a        { background: var(--dom-a-soft); color: var(--dom-a-ink); }
.dom-chip.a::before { background: var(--dom-a); content: 'A'; padding-top: 1px; }
.dom-chip.r        { background: var(--dom-r-soft); color: var(--dom-r-ink); }
.dom-chip.r::before { background: var(--dom-r); content: 'R'; padding-top: 1px; }
.dom-chip.lg { height: 22px; font-size: 11px; }
.dom-chip.lg::before { width: 18px; height: 18px; font-size: 10px; }
.dom-chip.compact { padding: 0; height: 16px; width: 16px; justify-content: center; gap: 0; }
.dom-chip.compact::before { width: 16px; height: 16px; border-radius: 3px; font-size: 10px; }
.dom-chip.compact > .name { display: none; }

/* sidebar domain group icons — outlined with domain colour, not filled */
.side-link.dom-c .ico { color: var(--dom-c); }
.side-link.dom-a .ico { color: var(--dom-a); }
.side-link.dom-r .ico { color: var(--dom-r); }

/* domain row dot — for compact ledger rows */
.dom-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
  flex: none;
}
.dom-dot.c { background: var(--dom-c); }
.dom-dot.a { background: var(--dom-a); }
.dom-dot.r { background: var(--dom-r); }

/* persona selector chip (workspace + mobile login) */
.persona-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; color: var(--muted);
  background: var(--surface);
}
.persona-chip:hover { border-color: var(--border-2); color: var(--fg); }
.persona-chip.active { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 500; }
.persona-chip .avatar { width: 22px; height: 22px; font-size: 10px; }

/* ─── reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── app shell ─────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }

/* sidebar */
.side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.side-brand .mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-ink));
  display: grid; place-items: center; color: white;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.side-brand .name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.side-brand .role { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }

.property-switch {
  margin: 12px 12px 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  background: var(--bg);
}
.property-switch .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.property-switch .name { font-weight: 500; }
.property-switch .meta { color: var(--muted); margin-left: auto; font-family: var(--font-mono); font-size: 11px; }

.side-nav { padding: 14px 10px; overflow-y: auto; flex: 1; }
.side-group { margin-bottom: 18px; }
.side-group-label {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--faint);
  padding: 0 10px 6px;
}
/* Domain sub-groups under Domains — each gets a 2px coloured top divider
   matching its domain so Consumables / Assets / Rotable read as one section
   without renaming the platform or re-introducing module brands. */
.side-group.dom-c { border-top: 2px solid var(--dom-c); padding-top: 10px; margin-top: 4px; }
.side-group.dom-a { border-top: 2px solid var(--dom-a); padding-top: 10px; margin-top: 4px; }
.side-group.dom-r { border-top: 2px solid var(--dom-r); padding-top: 10px; margin-top: 4px; }
.side-group.dom-c .side-group-label { color: var(--dom-c-ink); }
.side-group.dom-a .side-group-label { color: var(--dom-a-ink); }
.side-group.dom-r .side-group-label { color: var(--dom-r-ink); }
.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
}
.side-link:hover { background: var(--bg); color: var(--fg); }
.side-link.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.side-link.active .ico { color: var(--accent); }
.side-link .ico { width: 16px; height: 16px; flex: none; color: var(--faint); }
.side-link.active .ico { color: var(--accent); }
.side-link .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  background: var(--bg); padding: 1px 6px; border-radius: 999px; color: var(--muted);
}
.side-link.active .count { background: rgba(255,255,255,0.5); color: var(--accent-ink); }
.side-link .count.danger { background: var(--danger-soft); color: var(--danger); }
.side-link .count.warn { background: var(--warn-soft); color: oklch(40% 0.14 70); }

.side-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
  display: flex; gap: 10px; align-items: center;
}
.side-foot .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: oklch(70% 0.04 250);
  color: white; display: grid; place-items: center; font-size: 11px; font-weight: 600;
}

/* topbar */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
  display: flex; align-items: center;
  padding: 0 var(--sp-7); gap: var(--sp-5);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur { color: var(--fg); font-weight: 500; }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px; font-size: 13px; color: var(--muted);
  min-width: 280px;
}
.topbar-search:hover { border-color: var(--border-2); }
.topbar-search .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--faint); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--radius); color: var(--muted);
  position: relative;
}
.icon-btn:hover { background: var(--surface); color: var(--fg); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger);
}

/* page area */
.page {
  padding: var(--sp-7);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-head h1 {
  font-size: var(--fs-h1); letter-spacing: -0.02em;
}
.page-head .sub {
  color: var(--muted); font-size: 13px; margin-top: 4px;
}
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ─── buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, transform 60ms;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 14px; height: 14px; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--fg); }
.btn-secondary:hover { border-color: var(--border-2); background: var(--bg); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface); color: var(--fg); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: color-mix(in oklch, var(--danger) 90%, black); }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn-lg { padding: 9px 16px; font-size: 14px; }

/* ─── card / surface ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.card-pad { padding: var(--sp-5); }
.card-pad-lg { padding: var(--sp-6); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 14px var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: var(--fs-h3); }
.card-head .sub { color: var(--muted); font-size: 12px; }

/* KPI tile */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kpi .label {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase;
}
.kpi .value {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.kpi .value .unit { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.kpi .delta {
  font-family: var(--font-mono); font-size: 11px;
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--danger); }
.kpi .delta.flat { color: var(--muted); }
.kpi .spark { margin-top: 6px; }

/* ─── pills / badges / status ───────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; }
.pill.success { background: var(--success-soft); color: oklch(40% 0.10 155); }
.pill.success .dot { background: var(--success); }
.pill.warn    { background: var(--warn-soft); color: oklch(38% 0.13 70); }
.pill.warn .dot { background: var(--warn); }
.pill.danger  { background: var(--danger-soft); color: var(--danger); }
.pill.danger .dot { background: var(--danger); }
.pill.info    { background: var(--info-soft); color: var(--accent-ink); }
.pill.info .dot { background: var(--info); }
.pill.violet  { background: var(--violet-soft); color: oklch(40% 0.15 295); }
.pill.violet .dot { background: var(--violet); }
.pill.neutral { background: var(--surface-2); color: var(--muted); }
.pill.neutral .dot { background: var(--faint); }
.pill.ghost { background: transparent; border-color: var(--border); color: var(--muted); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 4px;
  font-size: 11px;
  background: var(--surface-2);
  color: var(--muted);
}
.tag.solid { background: var(--fg); color: var(--surface); }

/* ─── data table ────────────────────────────────────────────────── */
.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
  position: sticky; top: var(--topbar-h);
}
.dt tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dt tbody tr:hover td { background: color-mix(in oklch, var(--accent) 4%, transparent); }
.dt .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dt th.num { text-align: right; }
.dt .qty-low { color: var(--danger); font-weight: 500; }
.dt .qty-warn { color: oklch(40% 0.14 70); }
.dt .strong { font-weight: 500; color: var(--fg); }
.dt .sub { color: var(--muted); font-size: 11px; }
.dt .row-link { color: var(--fg); }
.dt .row-link:hover { color: var(--accent); text-decoration: underline; }
.dt-compact tbody td { padding: 7px 10px; }
.dt-compact thead th { padding: 7px 10px; }
.dt-row-tinted { background: color-mix(in oklch, var(--warn) 7%, transparent); }
.dt-row-tinted-danger { background: color-mix(in oklch, var(--danger) 6%, transparent); }

/* ─── form controls ─────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.input, .select, .textarea {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px; font-size: 13px;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.input[readonly] { background: var(--bg); color: var(--muted); }
.textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.input-group .btn-secondary { border-radius: 0 var(--radius) var(--radius) 0; }

.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.checkbox input { accent-color: var(--accent); }

/* search bar combo */
.filter-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.filter-bar .search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
}
.filter-bar .search input {
  border: 0; background: transparent; outline: 0; width: 100%; font-size: 13px;
}
.filter-bar .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 12px; color: var(--muted);
}
.filter-bar .chip.active { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.filter-bar .chip .x { color: var(--faint); }

/* ─── tabs ──────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tabs .tab {
  padding: 9px 14px; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs .tab:hover { color: var(--fg); }
.tabs .tab.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 500; }
.tabs .tab .count { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-left: 5px; }
.tabs .tab.active .count { color: var(--accent); }

/* ─── stepper (state machine) ───────────────────────────────────── */
.stepper { display: flex; align-items: center; gap: 0; }
.stepper .step {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.stepper .step .bullet {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  flex: none;
}
.stepper .step.done .bullet { background: var(--success); border-color: var(--success); color: white; }
.stepper .step.cur  .bullet { background: var(--accent); border-color: var(--accent); color: white; }
.stepper .step .label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stepper .step.done .label { color: var(--fg); }
.stepper .step.cur .label { color: var(--fg); font-weight: 500; }
.stepper .step .bar {
  flex: 1; height: 1px; background: var(--border); margin: 0 8px;
}
.stepper .step.done .bar { background: var(--success); }

/* ─── alert banner ──────────────────────────────────────────────── */
.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid;
}
.banner.warn { background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 30%, transparent); color: oklch(35% 0.13 70); }
.banner.danger { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 30%, transparent); color: oklch(36% 0.16 25); }
.banner.info { background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 30%, transparent); color: var(--accent-ink); }
.banner.success { background: var(--success-soft); border-color: color-mix(in oklch, var(--success) 30%, transparent); color: oklch(36% 0.10 155); }
.banner .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.banner h4 { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.banner p { font-size: 12px; opacity: 0.85; }

/* ─── side drawer (right) ───────────────────────────────────────── */
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 460px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  z-index: 20;
}
.drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ─── empty state ───────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--muted);
}
.empty .ico { width: 38px; height: 38px; margin: 0 auto 12px; color: var(--faint); }
.empty h3 { color: var(--fg); margin-bottom: 4px; font-size: 15px; }

/* ─── tree (location hierarchy) ─────────────────────────────────── */
.tree { font-size: 13px; }
.tree-node {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
}
.tree-node:hover { background: var(--bg); }
.tree-node .twist { width: 14px; height: 14px; color: var(--faint); }
.tree-node .twist.empty { visibility: hidden; }
.tree-node .label { flex: 1; }
.tree-node .label .name { font-weight: 500; }
.tree-node .label .role { color: var(--muted); font-size: 11px; }
.tree-node .level {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--faint);
}
.tree-node .par {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  white-space: nowrap;
}
.tree-node .par .fill { color: var(--success); }
.tree-node .par .gap  { color: var(--danger); }
.tree > .tree-node { font-weight: 600; }
.tree-child { padding-left: 24px; border-left: 1px dashed var(--border); margin-left: 14px; }

/* progress bar */
.bar {
  height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
  position: relative;
}
.bar > span {
  display: block; height: 100%;
  background: var(--accent); border-radius: 999px;
}
.bar.success > span { background: var(--success); }
.bar.warn > span { background: var(--warn); }
.bar.danger > span { background: var(--danger); }

/* ─── layout helpers ────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: var(--sp-4); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.col { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-4); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-5); }
.grid-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-5); }

.spacer { flex: 1; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.right { text-align: right; }
.center { text-align: center; }
.divider { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
.divider-strong { border: 0; border-top: 1px solid var(--fg); margin: var(--sp-5) 0; }

/* tiny avatar */
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: oklch(70% 0.04 250);
  color: white; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 600;
  flex: none;
}
.avatar.sm { width: 18px; height: 18px; font-size: 9px; }
.avatar.lg { width: 32px; height: 32px; font-size: 12px; }
.avatar.blue { background: oklch(60% 0.14 230); }
.avatar.green { background: oklch(58% 0.13 155); }
.avatar.amber { background: oklch(72% 0.16 75); color: white; }
.avatar.violet { background: oklch(56% 0.15 295); }
.avatar.pink { background: oklch(64% 0.15 10); }

/* code/key */
.kbd {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border); border-bottom-width: 2px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface); color: var(--muted);
}

/* ─── mobile frame (iPhone 15 Pro · 393×852) ────────────────────── */
.phone-stage {
  background:
    radial-gradient(circle at 30% 0%, oklch(95% 0.012 250), var(--bg) 60%);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-9) var(--sp-5);
  gap: var(--sp-9);
  flex-wrap: wrap;
}
.phone-meta {
  max-width: 360px;
  color: var(--fg);
}
.phone-meta .role-pill {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-soft); padding: 4px 10px; border-radius: 999px;
}
.phone-meta h1 {
  font-size: 26px; letter-spacing: -0.02em; margin-top: 16px;
}
.phone-meta .lead { color: var(--muted); margin-top: 10px; line-height: 1.55; font-size: 14px; }
.phone-meta .specs { margin-top: 20px; display: grid; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.phone-meta .specs b { color: var(--fg); font-weight: 500; }

.phone {
  width: 393px;
  height: 852px;
  background: #0b1117;
  border-radius: 56px;
  padding: 12px;
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,255,255,0.04) inset;
  position: relative;
  flex: none;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.phone-island {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 35px; background: #000;
  border-radius: 24px; z-index: 50;
}
.phone-status {
  height: 54px; padding: 18px 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--fg);
}
.phone-status .right { display: flex; align-items: center; gap: 5px; }
.phone-content { flex: 1; overflow-y: auto; }
.phone-tabbar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 12px 24px;
  display: flex; justify-content: space-around;
}
.phone-tab {
  flex: 1; text-align: center;
  font-size: 10px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.phone-tab.active { color: var(--accent); }
.phone-tab .ico { width: 22px; height: 22px; }
.phone-home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 4px; border-radius: 999px;
  background: var(--fg); opacity: 0.85;
}

/* mobile-only inner widgets */
.m-header {
  padding: 10px 18px 14px;
  display: flex; align-items: center; gap: 10px;
}
.m-header .back { color: var(--muted); }
.m-header .title { font-weight: 600; font-size: 16px; flex: 1; }
.m-section { padding: 16px 18px; }
.m-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.m-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.m-row:last-child { border-bottom: 0; }
.m-row .swatch {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted);
  flex: none;
}
.m-row .swatch.accent { background: var(--accent-soft); color: var(--accent-ink); }
.m-row .swatch.success { background: var(--success-soft); color: oklch(36% 0.10 155); }
.m-row .swatch.warn { background: var(--warn-soft); color: oklch(36% 0.13 70); }
.m-row .label { flex: 1; min-width: 0; }
.m-row .label .name { font-weight: 500; font-size: 14px; }
.m-row .label .meta { color: var(--muted); font-size: 12px; }
.m-row .qty {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500;
  text-align: right;
}
.m-row .qty .delta { color: var(--success); font-size: 11px; display: block; margin-top: 2px; }
.m-row .qty .delta.down { color: var(--danger); }

.m-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  background: var(--accent); color: white;
  font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.m-btn.secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.m-btn.danger { background: var(--danger); }
.m-stepper {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 14px;
}
.m-stepper button {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); color: var(--fg);
  display: grid; place-items: center; font-size: 18px;
}
.m-quant { flex: 1; text-align: center; font-size: 22px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   Merged from former assets/vault.css — Asset-identity components.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── identity tag (asset tag chip) ─────────────────────────────────── */
.identity-tag {
  display: inline-flex; align-items: stretch;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.identity-tag .scope {
  padding: 2px 6px;
  color: white;
  background: var(--muted);
  text-transform: uppercase;
}
.identity-tag .id { padding: 2px 7px; color: var(--fg); }
.identity-tag.lg { font-size: 13px; }
.identity-tag.lg .scope { padding: 3px 8px; }
.identity-tag.lg .id { padding: 3px 9px; }
.identity-tag.xl { font-size: 16px; font-weight: 600; }
.identity-tag.xl .scope { padding: 5px 10px; letter-spacing: 0.05em; }
.identity-tag.xl .id { padding: 5px 12px; }

/* asset-class palette for the scope chip */
.scope.eng   { background: oklch(40% 0.14 30);  } /* engineering — terracotta */
.scope.tool  { background: oklch(42% 0.14 60);  } /* tools — amber-brown */
.scope.it    { background: oklch(40% 0.16 270); } /* IT — indigo */
.scope.fur   { background: oklch(38% 0.10 200); } /* furniture — teal-slate */
.scope.loan  { background: oklch(42% 0.14 320); } /* guest loanable — magenta */
.scope.staff { background: oklch(40% 0.14 155); } /* staff devices — forest */
.scope.unif  { background: oklch(40% 0.12 85);  } /* uniform/keys — olive */
.scope.av    { background: oklch(40% 0.10 230); } /* AV equipment — slate-blue */
.scope.fb    { background: oklch(42% 0.13 15);  } /* F&B kitchen — burnt orange */
.scope.misc  { background: oklch(45% 0.02 250); }

/* small dot tag — used when row is dense */
.tag-dot {
  width: 7px; height: 7px; border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  flex: none;
}
.tag-dot.eng { background: oklch(55% 0.14 30); }
.tag-dot.tool { background: oklch(58% 0.14 60); }
.tag-dot.it { background: oklch(55% 0.16 270); }
.tag-dot.fur { background: oklch(52% 0.10 200); }
.tag-dot.loan { background: oklch(55% 0.14 320); }
.tag-dot.staff { background: oklch(55% 0.14 155); }
.tag-dot.unif { background: oklch(55% 0.12 85); }
.tag-dot.av { background: oklch(55% 0.10 230); }
.tag-dot.fb { background: oklch(58% 0.13 15); }
.tag-dot.misc { background: var(--muted); }

/* ─── asset card (visual: photo + tag + status + custodian) ─────────── */
.asset-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 120ms, box-shadow 120ms;
}
.asset-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-2); }
.asset-card .photo {
  height: 132px;
  background:
    repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px,
                              color-mix(in oklch, var(--surface-2) 65%, var(--bg)) 6px,
                              color-mix(in oklch, var(--surface-2) 65%, var(--bg)) 12px);
  position: relative;
}
.asset-card .photo.has-img { background: var(--surface-2); }
.asset-card .photo .glyph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--faint);
}
.asset-card .photo .pin {
  position: absolute; top: 10px; left: 10px;
  display: flex; align-items: center; gap: 4px;
}
.asset-card .photo .badge {
  position: absolute; top: 10px; right: 10px;
}
.asset-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.asset-card .body .name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.asset-card .body .model { color: var(--muted); font-size: 12px; }
.asset-card .body .row-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.asset-card .body .custody {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted);
}

/* ─── condition grade ───────────────────────────────────────────────── */
.condition {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.condition .bars {
  display: inline-flex; gap: 2px;
}
.condition .bars i {
  display: block; width: 8px; height: 4px; border-radius: 1px;
  background: var(--border-2);
}
.condition.good .bars i:nth-child(-n+5),
.condition.fair .bars i:nth-child(-n+3),
.condition.poor .bars i:nth-child(-n+2),
.condition.repair .bars i:nth-child(-n+1) { background: currentColor; }
.condition.good   { color: var(--success); }
.condition.fair   { color: oklch(58% 0.14 95); }
.condition.poor   { color: var(--warn); }
.condition.repair { color: var(--danger); }
.condition.retired { color: var(--muted); }
.condition.retired .bars i { background: var(--border-2); }

/* ─── lifecycle stepper (horizontal) ────────────────────────────────── */
.lifecycle {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.lifecycle .phase {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  position: relative;
  min-width: 0;
}
.lifecycle .phase:last-child { border-right: 0; }
.lifecycle .phase .step-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint);
}
.lifecycle .phase .step-name {
  font-size: 13px; font-weight: 500; margin-top: 2px;
}
.lifecycle .phase .step-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  margin-top: 2px;
}
.lifecycle .phase.done { background: color-mix(in oklch, var(--success) 8%, transparent); }
.lifecycle .phase.done .step-label { color: var(--success); }
.lifecycle .phase.cur  { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.lifecycle .phase.cur  .step-label { color: var(--accent); }
.lifecycle .phase.cur::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
}

/* ─── custody chain timeline ────────────────────────────────────────── */
.custody-chain { display: flex; flex-direction: column; gap: 0; }
.custody-event {
  display: grid;
  grid-template-columns: 90px 28px 1fr auto;
  align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
}
.custody-event:last-child { border-bottom: 0; }
.custody-event .when {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding-top: 4px;
}
.custody-event .dot-col {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.custody-event .dot-col::before {
  content: ''; position: absolute; top: -14px; bottom: -14px; left: 50%; width: 1px;
  background: var(--border);
}
.custody-event:first-child .dot-col::before { top: 50%; }
.custody-event:last-child .dot-col::before  { bottom: 50%; }
.custody-event .dot-col i {
  position: relative; z-index: 1;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  margin-top: 6px;
}
.custody-event.out  .dot-col i { border-color: var(--warn); }
.custody-event.in   .dot-col i { border-color: var(--success); }
.custody-event.repair .dot-col i { border-color: var(--danger); }
.custody-event.acq  .dot-col i { border-color: var(--accent); }
.custody-event.transit .dot-col i { border-color: var(--info); }
.custody-event .body { min-width: 0; }
.custody-event .body .head {
  display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap;
}
.custody-event .body .head .verb { font-weight: 600; }
.custody-event .body .head .arrow { color: var(--faint); }
.custody-event .body .meta {
  margin-top: 4px; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.custody-event .body .meta b { color: var(--fg); font-weight: 500; }
.custody-event .body .note {
  margin-top: 6px; font-size: 12px; padding: 7px 10px;
  background: var(--surface-2); border-radius: var(--radius); color: var(--muted);
}
.custody-event .ref { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding-top: 4px; }

/* ─── work-order status stepper (vertical compact) ──────────────────── */
.wo-status {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.wo-status .seg {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-right: 0;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}
.wo-status .seg:first-child { border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius); }
.wo-status .seg:last-child  { border-right: 1px solid var(--border); border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.wo-status .seg.done { background: color-mix(in oklch, var(--success) 12%, var(--surface)); color: oklch(36% 0.10 155); border-color: color-mix(in oklch, var(--success) 30%, var(--border)); }
.wo-status .seg.cur  { background: var(--accent); color: white; border-color: var(--accent); font-weight: 500; }
.wo-status .seg.hold { background: var(--warn-soft); color: oklch(38% 0.13 70); border-color: color-mix(in oklch, var(--warn) 30%, var(--border)); }

/* WO type ribbon */
.wo-type {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
}
.wo-type.pm   { background: var(--info-soft); color: var(--accent-ink); }
.wo-type.reac { background: var(--danger-soft); color: var(--danger); }
.wo-type.cal  { background: var(--violet-soft); color: oklch(40% 0.15 295); }

/* priority */
.priority {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase;
}
.priority i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.priority.p1 i { background: var(--danger); }
.priority.p2 i { background: var(--warn); }
.priority.p3 i { background: var(--info); }
.priority.p4 i { background: var(--faint); }
.priority.p1 { color: var(--danger); }
.priority.p2 { color: oklch(38% 0.13 70); }
.priority.p3 { color: var(--accent-ink); }
.priority.p4 { color: var(--muted); }

/* ─── depreciation curve mini ───────────────────────────────────────── */
.dep-mini {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 8px;
}
.dep-mini svg { width: 100%; height: 64px; display: block; }
.dep-axis-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  margin-top: 4px;
}

/* ─── tree (parent-child asset hierarchy) ───────────────────────────── */
.asset-tree { font-size: 13px; }
.asset-tree-node {
  display: grid; grid-template-columns: 16px 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
}
.asset-tree-node:hover { background: var(--bg); }
.asset-tree-node .name { font-weight: 500; }
.asset-tree-node .loc { color: var(--muted); font-size: 11px; }
.asset-tree-node .twist { color: var(--faint); }
.asset-tree-children { padding-left: 26px; border-left: 1px dashed var(--border); margin-left: 10px; }

/* ─── KPI tile variants for finance ─────────────────────────────────── */
.kpi-stack {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.kpi-stack .label {
  font-size: 11px; color: var(--muted);
  font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.kpi-stack .row1 {
  display: flex; align-items: baseline; gap: 10px;
}
.kpi-stack .row1 .value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
}
.kpi-stack .row1 .vs {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.kpi-stack .breakdown {
  display: flex; align-items: stretch; height: 6px;
  border-radius: 999px; overflow: hidden;
  margin-top: 6px;
}
.kpi-stack .breakdown span {
  display: block; height: 100%;
}
.kpi-stack .legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.kpi-stack .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }

/* ─── calendar (PM schedule) ────────────────────────────────────────── */
.calendar {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden;
}
.calendar .dow {
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.cal-cell {
  min-height: 96px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 7px;
  display: flex; flex-direction: column;
  gap: 3px;
  font-size: 11px;
}
.cal-cell:nth-child(7n+7) { border-right: 0; }
.cal-cell .date {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-align: right;
}
.cal-cell.today .date { color: var(--accent); font-weight: 600; }
.cal-cell.out { color: var(--faint); background: var(--bg); }
.cal-task {
  font-size: 10.5px;
  padding: 2px 6px; border-radius: 3px;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-task.pm   { background: var(--info-soft); color: var(--accent-ink); }
.cal-task.reac { background: var(--danger-soft); color: var(--danger); }
.cal-task.cal  { background: var(--violet-soft); color: oklch(40% 0.15 295); }
.cal-task.done { background: var(--success-soft); color: oklch(36% 0.10 155); text-decoration: line-through; opacity: 0.7; }
.cal-task i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* ─── signature box ─────────────────────────────────────────────────── */
.sig {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.sig .line {
  height: 36px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 12px, var(--surface-2) 12px, var(--surface-2) 13px);
  position: relative;
}
.sig .scribble {
  position: absolute; inset: 4px 12px;
  font-family: 'Brush Script MT', cursive; font-size: 22px;
  color: oklch(28% 0.10 250);
}
.sig .meta { font-family: var(--font-mono); font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; }

/* ─── QR/barcode placeholder ────────────────────────────────────────── */
.qr {
  width: 84px; height: 84px;
  background:
    linear-gradient(90deg, var(--fg) 0 12%, transparent 12% 18%, var(--fg) 18% 22%, transparent 22% 30%, var(--fg) 30% 44%, transparent 44% 50%, var(--fg) 50% 56%, transparent 56% 64%, var(--fg) 64% 70%, transparent 70% 78%, var(--fg) 78% 88%, transparent 88% 100%),
    linear-gradient(0deg,  var(--fg) 0 12%, transparent 12% 22%, var(--fg) 22% 32%, transparent 32% 42%, var(--fg) 42% 56%, transparent 56% 64%, var(--fg) 64% 72%, transparent 72% 80%, var(--fg) 80% 88%, transparent 88% 100%),
    var(--surface);
  background-blend-mode: multiply;
  border-radius: 6px;
  padding: 6px;
  position: relative;
  border: 1px solid var(--border);
}
.qr::before, .qr::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 4px solid var(--fg);
}
.qr::before { top: 6px; left: 6px; }
.qr::after  { top: 6px; right: 6px; }
.qr.sm { width: 56px; height: 56px; }
.qr.lg { width: 120px; height: 120px; }

/* ─── attachment chip ───────────────────────────────────────────────── */
.attach {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--fg);
}
.attach svg { width: 14px; height: 14px; color: var(--muted); }
.attach .size { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.attach.pdf    svg { color: var(--danger); }
.attach.image  svg { color: var(--info); }
.attach.sheet  svg { color: var(--success); }

/* ─── photo placeholder (asset images) ──────────────────────────────── */
.ph-asset {
  background: var(--surface-2);
  background-image:
    radial-gradient(circle at 30% 35%, oklch(85% 0.02 250) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in oklch, var(--surface-2) 70%, var(--bg)) 8px 9px);
  position: relative;
}
.ph-asset svg {
  position: absolute; inset: 0; margin: auto;
  width: 40%; height: 40%;
  color: var(--faint);
}

/* compact row identity cell */
.id-cell { display: flex; align-items: center; gap: 10px; }
.id-cell .thumb {
  width: 38px; height: 38px;
  background: var(--surface-2);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--faint);
  font-family: var(--font-mono); font-size: 10px;
  flex: none;
}
.id-cell .thumb.eng   { background: color-mix(in oklch, oklch(55% 0.14 30) 14%, var(--surface)); color: oklch(40% 0.14 30); }
.id-cell .thumb.tool  { background: color-mix(in oklch, oklch(58% 0.14 60) 14%, var(--surface)); color: oklch(42% 0.14 60); }
.id-cell .thumb.it    { background: color-mix(in oklch, oklch(55% 0.16 270) 14%, var(--surface)); color: oklch(40% 0.16 270); }
.id-cell .thumb.fur   { background: color-mix(in oklch, oklch(52% 0.10 200) 14%, var(--surface)); color: oklch(38% 0.10 200); }
.id-cell .thumb.loan  { background: color-mix(in oklch, oklch(55% 0.14 320) 14%, var(--surface)); color: oklch(42% 0.14 320); }
.id-cell .thumb.staff { background: color-mix(in oklch, oklch(55% 0.14 155) 14%, var(--surface)); color: oklch(40% 0.14 155); }
.id-cell .thumb.av    { background: color-mix(in oklch, oklch(55% 0.10 230) 14%, var(--surface)); color: oklch(40% 0.10 230); }
.id-cell .thumb.unif  { background: color-mix(in oklch, oklch(55% 0.12 85) 14%, var(--surface)); color: oklch(40% 0.12 85); }
.id-cell .name { font-weight: 500; }
.id-cell .meta { color: var(--muted); font-size: 11px; }


/* ═══════════════════════════════════════════════════════════════════
   Merged from former assets/park.css — Rotable-circulation components.
   ═══════════════════════════════════════════════════════════════════ */

/* park brand colour scale — cyan-teal, conjures water + circulation */
:root {
  --park:        oklch(58% 0.13 195);
  --park-ink:    oklch(40% 0.14 215);
  --park-soft:   oklch(95% 0.022 195);
  --park-tint:   oklch(92% 0.04 195);

  /* 3-Par state palette */
  --st-use:      oklch(55% 0.13 240);   /* In Use — focused blue */
  --st-use-soft: oklch(94% 0.025 240);
  --st-lndry:    oklch(58% 0.13 195);   /* In Laundry — park teal */
  --st-lndry-soft: oklch(94% 0.03 195);
  --st-stor:     oklch(55% 0.10 155);   /* In Storage — calm green */
  --st-stor-soft: oklch(94% 0.025 155);
  --st-soil:     oklch(45% 0.06 60);    /* Soiled — neutral brown */
  --st-soil-soft: oklch(94% 0.018 60);
  --st-rej:      oklch(58% 0.18 28);    /* Rejected — rust */
  --st-rej-soft: oklch(94% 0.04 28);
  --st-lost:     oklch(45% 0.04 280);   /* Written off — slate */
  --st-lost-soft: oklch(94% 0.018 280);
}

/* Park's module-switcher styles removed; one product, no switching. */

/* ─── circulation state pill ──────────────────────────────────────── */
.state {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;
}
.state i { width: 6px; height: 6px; border-radius: 50%; }
.state.use   { background: var(--st-use-soft);   color: var(--st-use);   border-color: color-mix(in oklch, var(--st-use) 22%, transparent); }
.state.use i   { background: var(--st-use); }
.state.lndry { background: var(--st-lndry-soft); color: var(--st-lndry); border-color: color-mix(in oklch, var(--st-lndry) 22%, transparent); }
.state.lndry i { background: var(--st-lndry); }
.state.stor  { background: var(--st-stor-soft);  color: var(--st-stor);  border-color: color-mix(in oklch, var(--st-stor) 22%, transparent); }
.state.stor i  { background: var(--st-stor); }
.state.soil  { background: var(--st-soil-soft);  color: var(--st-soil);  border-color: color-mix(in oklch, var(--st-soil) 22%, transparent); }
.state.soil i  { background: var(--st-soil); }
.state.rej   { background: var(--st-rej-soft);   color: var(--st-rej);   border-color: color-mix(in oklch, var(--st-rej) 22%, transparent); }
.state.rej i   { background: var(--st-rej); }
.state.lost  { background: var(--st-lost-soft);  color: var(--st-lost);  border-color: color-mix(in oklch, var(--st-lost) 22%, transparent); }
.state.lost i  { background: var(--st-lost); }

/* ─── 3-Par ring (the signature visual) ────────────────────────────
   Conic-gradient ring split into 3 segments — use / laundry / storage.
   Hole shows the par-compliance %. */
.par-ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
  --use: 33; --lndry: 33; --stor: 34;
  background:
    conic-gradient(
      from -90deg,
      var(--st-use)   0  calc(var(--use) * 1%),
      var(--st-lndry) calc(var(--use) * 1%) calc((var(--use) + var(--lndry)) * 1%),
      var(--st-stor)  calc((var(--use) + var(--lndry)) * 1%) 100%
    );
}
.par-ring::before {
  content: '';
  position: absolute; inset: 12px;
  background: var(--surface);
  border-radius: 50%;
}
.par-ring .hole {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  font-family: var(--font-mono);
}
.par-ring .hole .pct { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.par-ring .hole .lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.par-ring.sm { width: 64px; height: 64px; }
.par-ring.sm::before { inset: 8px; }
.par-ring.sm .hole .pct { font-size: 13px; }
.par-ring.sm .hole .lbl { font-size: 8px; }
.par-ring.lg { width: 140px; height: 140px; }
.par-ring.lg::before { inset: 16px; }
.par-ring.lg .hole .pct { font-size: 26px; }
.par-ring.lg .hole .lbl { font-size: 10px; }
.par-ring.short::before { inset: 12px; background: color-mix(in oklch, var(--danger) 8%, var(--surface)); }
.par-ring.short .hole .pct { color: var(--danger); }

/* ─── flow-bar — same data as ring, horizontal ─────────────────────── */
.flow-bar {
  display: flex; height: 8px;
  border-radius: 999px; overflow: hidden;
  background: var(--surface-2);
}
.flow-bar > span { display: block; height: 100%; }
.flow-bar > span.use   { background: var(--st-use); }
.flow-bar > span.lndry { background: var(--st-lndry); }
.flow-bar > span.stor  { background: var(--st-stor); }
.flow-bar > span.gap   { background: var(--danger); }
.flow-bar.tall { height: 14px; }
.flow-bar.thin { height: 4px; }
.flow-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.flow-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }

/* ─── par compliance bar ──────────────────────────────────────────── */
.par-compliance {
  position: relative;
  height: 22px;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: visible;
}
.par-compliance .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, color-mix(in oklch, var(--success) 18%, var(--surface)), color-mix(in oklch, var(--success) 32%, var(--surface)));
  border-radius: var(--radius);
}
.par-compliance.warn .fill { background: linear-gradient(90deg, color-mix(in oklch, var(--warn) 18%, var(--surface)), color-mix(in oklch, var(--warn) 32%, var(--surface))); }
.par-compliance.short .fill { background: linear-gradient(90deg, color-mix(in oklch, var(--danger) 18%, var(--surface)), color-mix(in oklch, var(--danger) 38%, var(--surface))); }
.par-compliance .target {
  position: absolute; top: -3px; bottom: -3px;
  border-left: 2px dashed var(--fg);
  z-index: 1;
}
.par-compliance .target::after {
  content: 'target';
  position: absolute; top: -16px; left: -22px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}
.par-compliance .label {
  position: absolute; top: 50%; left: 10px;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.par-compliance .right {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
  white-space: nowrap;
}

/* ─── circulation card (SKU at-a-glance) ──────────────────────────── */
.circ-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  transition: border-color 120ms, box-shadow 120ms;
}
.circ-card:hover { border-color: var(--park); box-shadow: var(--shadow-2); }
.circ-card .name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.circ-card .sub { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.circ-card .par-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; }
.circ-card .par-row .cell { display: flex; flex-direction: column; gap: 1px; }
.circ-card .par-row .cell .v { font-size: 14px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.circ-card .par-row .cell .l { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.circ-card .par-row .cell.use .v   { color: var(--st-use); }
.circ-card .par-row .cell.lndry .v { color: var(--st-lndry); }
.circ-card .par-row .cell.stor .v  { color: var(--st-stor); }

/* ─── linen thumb (small fabric swatch) ────────────────────────────── */
.linen-thumb {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in oklch, var(--park) 14%, transparent) 4px 5px),
    var(--park-tint);
  border: 1px solid color-mix(in oklch, var(--park) 14%, var(--border));
  display: grid; place-items: center;
  color: var(--park-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  flex: none;
}
.linen-thumb.cgs {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklch, oklch(75% 0.06 90) 70%, var(--surface)), color-mix(in oklch, oklch(85% 0.04 90) 30%, var(--surface)));
  border-color: color-mix(in oklch, oklch(60% 0.10 90) 20%, var(--border));
  color: oklch(40% 0.08 90);
}
.linen-thumb.unif {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in oklch, oklch(40% 0.10 250) 14%, transparent) 3px 4px),
    color-mix(in oklch, oklch(75% 0.06 250) 40%, var(--surface));
  border-color: color-mix(in oklch, oklch(50% 0.10 250) 20%, var(--border));
  color: oklch(40% 0.10 250);
}
.linen-thumb.lg { width: 64px; height: 64px; font-size: 11px; }
.linen-thumb.sm { width: 32px; height: 32px; font-size: 8px; }

/* ─── reason-code chip (loss causes) ──────────────────────────────── */
.cause {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.cause i { width: 6px; height: 6px; border-radius: 1px; }
.cause.stained { background: color-mix(in oklch, oklch(60% 0.13 60) 12%, var(--surface)); color: oklch(40% 0.13 60); border-color: color-mix(in oklch, oklch(60% 0.13 60) 25%, transparent); }
.cause.stained i { background: oklch(58% 0.13 60); }
.cause.torn { background: color-mix(in oklch, oklch(58% 0.16 28) 12%, var(--surface)); color: oklch(40% 0.16 28); border-color: color-mix(in oklch, oklch(58% 0.16 28) 25%, transparent); }
.cause.torn i { background: oklch(58% 0.16 28); }
.cause.lost { background: color-mix(in oklch, oklch(50% 0.05 280) 12%, var(--surface)); color: oklch(36% 0.05 280); border-color: color-mix(in oklch, oklch(50% 0.05 280) 25%, transparent); }
.cause.lost i { background: oklch(50% 0.05 280); }
.cause.worn { background: color-mix(in oklch, oklch(55% 0.10 90) 12%, var(--surface)); color: oklch(40% 0.10 90); border-color: color-mix(in oklch, oklch(55% 0.10 90) 25%, transparent); }
.cause.worn i { background: oklch(55% 0.10 90); }
.cause.guest { background: color-mix(in oklch, oklch(55% 0.14 320) 12%, var(--surface)); color: oklch(40% 0.14 320); border-color: color-mix(in oklch, oklch(55% 0.14 320) 25%, transparent); }
.cause.guest i { background: oklch(55% 0.14 320); }
.cause.broken { background: color-mix(in oklch, oklch(50% 0.06 240) 12%, var(--surface)); color: oklch(36% 0.06 240); border-color: color-mix(in oklch, oklch(50% 0.06 240) 25%, transparent); }
.cause.broken i { background: oklch(50% 0.06 240); }

/* ─── wash-cycle meter ─────────────────────────────────────────────── */
.cycle-meter {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
}
.cycle-meter .bar {
  flex: 1; height: 6px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden; position: relative;
}
.cycle-meter .bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--success), oklch(60% 0.13 100), var(--warn), var(--danger));
  border-radius: 999px;
}
.cycle-meter .v { color: var(--fg); min-width: 60px; text-align: right; }
.cycle-meter.young .bar .fill { background: var(--success); }
.cycle-meter.warn  .bar .fill { background: var(--warn); }
.cycle-meter.old   .bar .fill { background: var(--danger); }

/* ─── sankey-style circulation flow (the hero viz on circulation page) */
.sankey {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 0;
  padding: 24px 0 40px;
  position: relative;
}
.sankey-node {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; z-index: 2;
}
.sankey-node .pillar {
  width: 56px; border-radius: var(--radius);
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
}
.sankey-node .pillar .qty {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: white;
  background: var(--fg); padding: 2px 6px; border-radius: 3px;
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.sankey-node .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.sankey-node .sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  font-family: var(--font-mono);
}
.sankey-node.stor .pillar { background: color-mix(in oklch, var(--st-stor) 12%, var(--surface)); border-color: var(--st-stor); }
.sankey-node.use  .pillar { background: color-mix(in oklch, var(--st-use) 12%, var(--surface));  border-color: var(--st-use); }
.sankey-node.soil .pillar { background: color-mix(in oklch, var(--st-soil) 14%, var(--surface)); border-color: var(--st-soil); }
.sankey-node.lndry .pillar { background: color-mix(in oklch, var(--st-lndry) 12%, var(--surface)); border-color: var(--st-lndry); }
.sankey-node.stor .pillar .qty { background: var(--st-stor); }
.sankey-node.use  .pillar .qty { background: var(--st-use); }
.sankey-node.soil .pillar .qty { background: var(--st-soil); }
.sankey-node.lndry .pillar .qty { background: var(--st-lndry); }
.sankey-flow {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.sankey-flow svg { width: 100%; height: 100%; }
.sankey-flow .ann {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted); white-space: nowrap;
  z-index: 3;
}
.sankey-flow .ann.loss { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, var(--border)); background: var(--danger-soft); }

/* ─── vendor scorecard ────────────────────────────────────────────── */
.vendor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.vendor-card .head { display: flex; align-items: center; gap: 12px; }
.vendor-card .logo {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--park), var(--park-ink));
  color: white; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
}
.vendor-card .head .col { flex: 1; min-width: 0; }
.vendor-card .head .col .name { font-size: 15px; font-weight: 600; }
.vendor-card .head .col .meta { color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); }
.vendor-card .score-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vendor-card .score { display: flex; flex-direction: column; gap: 2px; }
.vendor-card .score .v { font-family: var(--font-mono); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.vendor-card .score .l { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.vendor-card .score.good .v { color: var(--success); }
.vendor-card .score.warn .v { color: var(--warn); }
.vendor-card .score.bad  .v { color: var(--danger); }
.vendor-card .score.neutral .v { color: var(--fg); }

/* ─── dispatch note (printable-feel laundry slip) ──────────────────── */
.note-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  font-family: var(--font-mono);
}
.note-paper::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(45deg, var(--park), var(--park) 8px, var(--park-ink) 8px, var(--park-ink) 16px);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.note-paper .nh { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px dashed var(--border); margin-bottom: 14px; }
.note-paper .nh .label { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.note-paper .nh .ref { font-size: 18px; font-weight: 600; }
.note-paper .nbody table { width: 100%; border-collapse: collapse; font-size: 12px; }
.note-paper .nbody th { text-align: left; padding: 6px 8px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--border); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.note-paper .nbody td { padding: 8px; border-bottom: 1px dashed var(--border); }
.note-paper .ntotals { display: flex; justify-content: flex-end; gap: 28px; padding: 14px 0 8px; border-bottom: 1px dashed var(--border); }
.note-paper .ntotals .grp { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.note-paper .ntotals .grp .l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.note-paper .ntotals .grp .v { font-size: 16px; font-weight: 600; }
.note-paper .nsig { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }

/* ─── floor heatmap (loss origin) ──────────────────────────────────── */
.heatmap { display: grid; grid-template-columns: 80px repeat(7, 1fr); gap: 0; font-family: var(--font-mono); font-size: 11px; }
.heatmap .head { padding: 6px 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; }
.heatmap .row-label { padding: 6px 8px; color: var(--muted); align-self: center; }
.heatmap .cell {
  padding: 8px 4px; text-align: center; border: 1px solid var(--surface);
  background: var(--surface-2); color: var(--fg);
}
.heatmap .cell.l0 { background: color-mix(in oklch, var(--park) 4%, var(--surface)); color: var(--faint); }
.heatmap .cell.l1 { background: color-mix(in oklch, var(--success) 14%, var(--surface)); }
.heatmap .cell.l2 { background: color-mix(in oklch, var(--warn) 18%, var(--surface)); }
.heatmap .cell.l3 { background: color-mix(in oklch, var(--warn) 32%, var(--surface)); }
.heatmap .cell.l4 { background: color-mix(in oklch, var(--danger) 30%, var(--surface)); color: white; font-weight: 600; }
.heatmap .cell.l5 { background: var(--danger); color: white; font-weight: 600; }

/* ─── circulation legend (compact) ─────────────────────────────────── */
.ci-legend { display: inline-flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.ci-legend .x { display: inline-flex; align-items: center; gap: 4px; }
.ci-legend .x i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ci-legend .x.use i { background: var(--st-use); }
.ci-legend .x.lndry i { background: var(--st-lndry); }
.ci-legend .x.stor i { background: var(--st-stor); }
.ci-legend .x.soil i { background: var(--st-soil); }
.ci-legend .x.rej i  { background: var(--st-rej); }
.ci-legend .x.lost i { background: var(--st-lost); }

/* ─── trolley quick row ────────────────────────────────────────────── */
.trolley {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.trolley .ico-cart {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--park-ink);
}
.trolley .col { flex: 1; min-width: 0; }
.trolley .col .name { font-weight: 500; font-size: 13px; }
.trolley .col .meta { color: var(--muted); font-size: 11px; font-family: var(--font-mono); }

/* ─── breakage strip (banquet quality control) ─────────────────────── */
.break-strip {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
}
.break-strip .b {
  height: 38px; border-radius: 6px;
  background: color-mix(in oklch, var(--success) 16%, var(--surface));
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: oklch(36% 0.10 155);
  position: relative;
}
.break-strip .b.broken {
  background: color-mix(in oklch, var(--danger) 22%, var(--surface));
  color: var(--danger);
}
.break-strip .b.broken::before {
  content: '✕'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 18px; color: var(--danger); opacity: 0.4;
}
.break-strip .b.empty { background: var(--bg); color: var(--faint); border: 1px dashed var(--border); }

/* ─── seasonal multiplier line ─────────────────────────────────────── */
.seasonal {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  padding: 10px 0;
}
.seasonal .m {
  height: 40px;
  border-radius: 3px;
  background: var(--surface-2);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 4px 0;
  position: relative;
}
.seasonal .m .bar {
  width: 60%; background: var(--park);
  border-radius: 2px;
  opacity: 0.85;
}
.seasonal .m .mo {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.seasonal .m.peak .bar { background: var(--accent); }


/* ═══════════════════════════════════════════════════════════════════
   Helpers (deduped from former vault.css + park.css)
   ═══════════════════════════════════════════════════════════════════ */
.hairline { border-bottom: 1px solid var(--border); }
.muted-lc { color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.kbd-row { display: flex; flex-wrap: wrap; gap: 8px; }