/* ==========================================================================
   Marlbourne — application shell & component library
   Shared by every mockup screen. Designed at 1440×900.

   This is the *client's* visual identity, deliberately distinct from the
   blueprint page that frames it: light, dense, conservative — the way real
   property-management software looks. Single-mode by design.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand — Marlbourne */
  --brand:            #1a4a3c;
  --brand-deep:       #133629;
  --brand-tint:       #e8f0ed;
  --brass:            #a98039;

  /* Surfaces */
  --page:             #f4f6f7;
  --card:             #ffffff;
  --sunken:           #f8fafb;
  --line:             #e2e7ea;
  --line-soft:        #eef1f3;

  /* Ink */
  --ink:              #1a222b;
  --ink-2:            #5a6672;
  --ink-3:            #69737e;

  /* Status — fixed roles, never used for series identity */
  --good:             #0ca30c;
  --warning:          #fab219;
  --serious:          #ec835a;
  --critical:         #d03b3b;
  --good-bg:          #e7f6e7;
  --warning-bg:       #fdf3dd;
  --serious-bg:       #fdeee7;
  --critical-bg:      #fae8e8;
  --info-bg:          #e7f0fb;
  --info-ink:         #1c5cab;

  /* Chart series — validated (see README) */
  --series-1:         #2a78d6;
  --series-2:         #eb6834;
  --ramp-1:           #86b6ef;
  --ramp-2:           #5598e7;
  --ramp-3:           #2a78d6;
  --ramp-4:           #184f95;
  --grid:             #e9edf0;
  --axis:             #cdd5db;

  --radius:           8px;
  --radius-sm:        5px;
  --shadow:           0 1px 2px rgba(26, 34, 43, .06), 0 1px 3px rgba(26, 34, 43, .04);
  --shadow-pop:       0 8px 28px rgba(26, 34, 43, .14);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.rail {
  background: var(--brand-deep);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.rail-mark { flex: none; }

.rail-name {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.15;
}

.rail-name span {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-top: 2px;
}

.rail-nav { padding: 12px 10px; overflow-y: auto; flex: 1; }

.rail-group {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  padding: 14px 10px 6px;
}

.rail-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  font-size: 13.5px;
  transition: background .12s, color .12s;
}

.rail-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.rail-nav a.is-active {
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--brass);
}

.rail-nav svg { flex: none; opacity: .8; }
.rail-nav a.is-active svg { opacity: 1; }

.rail-count {
  margin-left: auto;
  font: 500 11px/1 var(--mono);
  padding: 3px 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
}

.rail-count.is-alert { background: var(--critical); color: #fff; }

.rail-foot {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rail-foot .who { color: #fff; font-size: 12.5px; font-weight: 500; }
.rail-foot .who span { display: block; color: rgba(255, 255, 255, .5); font-weight: 400; font-size: 11px; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.crumbs b { color: var(--ink); font-weight: 500; }
.crumbs .sep { color: var(--ink-3); opacity: .6; }

.search {
  margin-left: auto;
  position: relative;
  width: 264px;
}

.search input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  font: 400 13px var(--sans);
  color: var(--ink);
}

.search input::placeholder { color: var(--ink-3); }
.search input:focus { background: #fff; border-color: var(--series-1); outline: none; }
.search svg { position: absolute; left: 10px; top: 9px; color: var(--ink-3); }

.content { padding: 22px; flex: 1; }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.page-head h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.2px; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* --------------------------------------------------------------------------
   Buttons & controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: 500 13px var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}

.btn:hover { background: var(--sunken); border-color: #d3dade; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.chip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink-2);
  font: 500 12.5px var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
}

.chip:hover { border-color: #cfd6db; color: var(--ink); }

.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.chip .n { font: 500 11px var(--mono); opacity: .65; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.toolbar .spacer { margin-left: auto; }

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card);
}

.seg button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font: 500 12.5px var(--sans);
  color: var(--ink-2);
  cursor: pointer;
  border-right: 1px solid var(--line);
}

.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--sunken); }
.seg button.is-on { background: var(--ink); color: #fff; }

/* --------------------------------------------------------------------------
   Cards & layout
   -------------------------------------------------------------------------- */

/* Flex column so that when a grid stretches a card to match its neighbour,
   the body takes the slack and the footer stays pinned to the bottom edge. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.card-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card-head p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.card-head { flex: none; }
.card-head .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-body { padding: 16px; flex: 1; }
.card-body.tight { padding: 0; }

.card-foot {
  flex: none;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--sunken);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.grid { display: grid; gap: 14px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 1fr) 320px; }
.mb { margin-bottom: 14px; }
.mb-lg { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Stat tiles — the number is the chart
   -------------------------------------------------------------------------- */

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.stat .label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat .value {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.6px;
  margin-top: 7px;
  line-height: 1.1;
}

.stat .value small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.stat .sub { font-size: 12px; color: var(--ink-2); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.stat.is-critical { border-left: 3px solid var(--critical); }
.stat.is-warning { border-left: 3px solid var(--warning); }
.stat.is-good { border-left: 3px solid var(--good); }

.delta { font-weight: 500; display: inline-flex; align-items: center; gap: 3px; }
.delta.up { color: #006300; }
.delta.down { color: #a32a2a; }

/* --------------------------------------------------------------------------
   Status pills — always icon + label, never colour alone
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.35;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pill-good     { background: var(--good-bg);     color: #0a6b0a; }
.pill-warning  { background: var(--warning-bg);  color: #8a6008; }
.pill-serious  { background: var(--serious-bg);  color: #a54a25; }
.pill-critical { background: var(--critical-bg); color: #9e2b2b; }
.pill-info     { background: var(--info-bg);     color: var(--info-ink); }
.pill-neutral  { background: #eef1f3;            color: var(--ink-2); }

/*  A bare square marker, used in tables and lists where a full pill would be
    too heavy. It carries no ::before, so it needs its own box — and it takes
    the status colour from `color`, not the pale pill tint behind it.  */
.pill-sq {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }

.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 14px;
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .1s; }
.table tbody tr[data-drawer-open] { cursor: pointer; }
.table tbody tr:hover { background: var(--sunken); }
.table .strong { font-weight: 500; }
.table .muted { color: var(--ink-3); }
.table .mono { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.table .ref { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.table tr.is-hidden { display: none; }

.cell-stack { display: flex; flex-direction: column; gap: 2px; }
.cell-stack .sec { font-size: 11.5px; color: var(--ink-3); }

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  letter-spacing: .02em;
}

.avatar.lg { width: 34px; height: 34px; font-size: 12px; }
.avatar.brass { background: #f5ecd9; color: #7d5c22; }

.who-cell { display: flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2);
  align-items: center;
}

.legend i {
  width: 9px; height: 9px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;
}

/* Grouped horizontal bars — budget vs actual */
.hbars { display: flex; flex-direction: column; gap: 13px; }
.hbar-row { display: grid; grid-template-columns: 140px 1fr 84px; gap: 12px; align-items: center; }
.hbar-label { font-size: 12.5px; color: var(--ink-2); }
.hbar-track { display: flex; flex-direction: column; gap: 2px; }

.hbar {
  height: 9px;
  border-radius: 0 4px 4px 0;
  min-width: 2px;
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}

.hbar.s1 { background: var(--series-1); }
.hbar.s2 { background: var(--series-2); }
.hbar-value { font: 500 12px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.hbar-value .over { color: #a32a2a; }

/* Ordinal ramp bars — arrears ageing.
   Bar heights are set in px (not %) so the caption above each bar cannot
   push the column past its container. */
.vbars { display: flex; align-items: flex-end; gap: 10px; padding-top: 6px; }
.vbar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.vbar { border-radius: 4px 4px 0 0; min-height: 3px; transition: height .5s cubic-bezier(.2, .7, .3, 1); }
.vbar-cap { font: 500 12px var(--mono); text-align: center; font-variant-numeric: tabular-nums; }
.vbar-axis { display: flex; gap: 10px; border-top: 1px solid var(--axis); padding-top: 7px; margin-top: 0; }
.vbar-axis span { flex: 1; text-align: center; font-size: 11.5px; color: var(--ink-3); }

/* Single-row stacked status bar */
.statusbar { display: flex; gap: 2px; height: 26px; border-radius: 4px; overflow: hidden; }
/* min-width keeps a 1.6% segment visible and hoverable; the key below the
   bar carries the exact counts, so nothing depends on reading the sliver. */
.statusbar > div { transition: flex-grow .5s ease; position: relative; min-width: 9px; }
.statusbar-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }

.statusbar-key div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  min-width: 128px;
}

.statusbar-key b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: auto; font-weight: 600; }
.statusbar-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* Meters */
.meter { height: 7px; background: var(--line-soft); border-radius: 20px; overflow: hidden; }
.meter > div { height: 100%; border-radius: 20px; transition: width .5s ease; }
.meter-row { display: grid; grid-template-columns: 1fr 52px; gap: 10px; align-items: center; }

/* SVG line chart */
.linechart { width: 100%; display: block; }
.linechart .grid-line { stroke: var(--grid); stroke-width: 1; }
.linechart .axis-line { stroke: var(--axis); stroke-width: 1; }
.linechart .series { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .area { fill: var(--series-1); opacity: .08; }
.linechart .tick { font: 11px var(--sans); fill: var(--ink-3); }
.linechart .dot { fill: var(--series-1); stroke: #fff; stroke-width: 2; }
.linechart .endlabel { font: 500 12px var(--sans); fill: var(--ink); }

/* Chart ↔ table twin */
[data-view-panel="table"] { display: none; }
.card.show-table [data-view-panel="chart"] { display: none; }
.card.show-table [data-view-panel="table"] { display: block; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mini-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--sunken); }
.mini-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.mini-table td:first-child { font-variant-numeric: normal; }
.mini-table th.num, .mini-table td.num { text-align: right; }

/* Tooltip */
.tip {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transition: opacity .1s;
  max-width: 220px;
}

.tip.is-on { opacity: 1; }
.tip b { font-weight: 600; }
.tip .k { color: rgba(255, 255, 255, .62); }

/* --------------------------------------------------------------------------
   The statutory clock — Section 20 consultation stages.
   The signature component: a sequence with a legal deadline on each step.
   -------------------------------------------------------------------------- */

.clock { display: flex; gap: 2px; }

.clock-stage {
  flex: 1;
  border: 1px solid var(--line);
  border-left-width: 0;
  background: var(--card);
  padding: 11px 13px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background .12s;
}

.clock-stage:first-child { border-left-width: 1px; border-radius: var(--radius) 0 0 var(--radius); }
.clock-stage:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.clock-stage:hover { background: var(--sunken); }

.clock-stage .st-n {
  font: 500 10.5px var(--mono);
  color: var(--ink-3);
  letter-spacing: .06em;
}

.clock-stage .st-name { font-size: 12.5px; font-weight: 500; margin-top: 3px; line-height: 1.3; }
.clock-stage .st-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-variant-numeric: tabular-nums; }

.clock-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 3px;
  background: var(--line);
}

.clock-stage.done::after { background: var(--good); }
.clock-stage.live::after { background: var(--warning); }
.clock-stage.late::after { background: var(--critical); }
.clock-stage.done { background: #fbfdfb; }
.clock-stage.live { background: #fffdf6; }
.clock-stage.late { background: #fffafa; }

/* Selection is a ring; the stage's statutory state keeps its own colour. */
.clock-stage.is-sel { box-shadow: inset 0 0 0 2px var(--brand); z-index: 2; }

/* Read-only variant — the leaseholder sees the same clock, without controls */
.clock.is-static .clock-stage { cursor: default; }
.clock.is-static .clock-stage:hover { background: var(--card); }
.clock.is-static .clock-stage.done:hover { background: #fbfdfb; }
.clock.is-static .clock-stage.live:hover { background: #fffdf6; }

/* Compact five-segment version for list rows */
.mini-clock { display: inline-flex; gap: 2px; vertical-align: middle; }
.mini-clock i { width: 16px; height: 5px; border-radius: 2px; background: var(--line); display: block; }
.mini-clock i.done { background: var(--good); }
.mini-clock i.live { background: var(--warning); }
.mini-clock i.late { background: var(--critical); }

.clock-days { font: 600 13px var(--mono); font-variant-numeric: tabular-nums; }
.clock-days.warn { color: #8a6008; }
.clock-days.crit { color: #9e2b2b; }
.clock-days.ok { color: #0a6b0a; }

/* Vertical timeline / audit trail */
.trail { list-style: none; margin: 0; padding: 0; }

.trail li {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 1px solid var(--line);
  margin-left: 5px;
}

.trail li:last-child { border-left-color: transparent; padding-bottom: 0; }

.trail li::before {
  content: "";
  position: absolute;
  left: -4.5px; top: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--axis);
}

.trail li.done::before { background: var(--good); border-color: var(--good); }
.trail li.live::before { background: var(--warning); border-color: var(--warning); }
.trail .t-title { font-size: 13px; font-weight: 500; }
.trail .t-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }

.tabs button {
  border: 0;
  background: transparent;
  padding: 9px 14px;
  font: 500 13px var(--sans);
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs button:hover { color: var(--ink); }
.tabs button.is-on { color: var(--brand); border-bottom-color: var(--brand); }
[data-panel] { display: none; }
[data-panel].is-on { display: block; }
[data-stage-panel] { display: none; }
[data-stage-panel].is-on { display: block; }

/* --------------------------------------------------------------------------
   Drawer
   -------------------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 26, 34, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 90;
}

.scrim.is-on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 460px;
  max-width: 92vw;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.3, .8, .3, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.drawer.is-on { transform: none; }

.drawer-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.drawer-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.drawer-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }
.drawer-body { padding: 18px; overflow-y: auto; flex: 1; }

.drawer-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--sunken);
  display: flex;
  gap: 8px;
}

.x-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
  flex: none;
}

.x-btn:hover { background: var(--line-soft); color: var(--ink); }

/* --------------------------------------------------------------------------
   Definition lists, documents, notes
   -------------------------------------------------------------------------- */

.dl { display: grid; grid-template-columns: 132px 1fr; gap: 9px 14px; font-size: 13px; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; color: var(--ink); }
.dl dd.mono { font-family: var(--mono); font-size: 12px; }

.doc-list { list-style: none; margin: 0; padding: 0; }

.doc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.doc-list li:last-child { border-bottom: 0; }
.doc-list li:hover { background: var(--sunken); }
.doc-list .d-name { display: block; font-weight: 500; }
.doc-list .d-meta { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.doc-list .d-icon { color: var(--ink-3); flex: none; }

.note {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

.note.warn { background: var(--warning-bg); border-color: #f2dfae; color: #6d4c06; }
.note.crit { background: var(--critical-bg); border-color: #f0c8c8; color: #8a2626; }
.note.info { background: var(--info-bg); border-color: #cfe0f6; color: #17497f; }
.note strong { color: inherit; }

.kv-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { color: var(--ink-2); }
.kv-row .v { font-weight: 500; font-variant-numeric: tabular-nums; }

.empty { text-align: center; padding: 34px 20px; color: var(--ink-3); font-size: 13px; }
.empty b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; }

.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 9px;
  animation: toast-in .22s cubic-bezier(.2, .8, .3, 1);
}

.toast svg { color: #6ee06e; flex: none; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.u-mono { font-family: var(--mono); }
.u-num { font-variant-numeric: tabular-nums; }
.u-muted { color: var(--ink-3); }
.u-sec { color: var(--ink-2); }
.u-right { text-align: right; }
.u-sm { font-size: 12px; }
.u-b { font-weight: 600; }
.u-flex { display: flex; align-items: center; gap: 8px; }
.u-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Triage panels

   The first thing on a dashboard: three panels, ordered by how much time is
   left. Each row leads with the count as a figure rather than burying it in a
   sentence, carries what it is worth, and ends with the clock. Heat descends
   left to right — what is late, what is coming, what somebody else is holding.
   -------------------------------------------------------------------------- */

.triage {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.triage.is-overdue { border-top-color: var(--critical); }
.triage.is-soon    { border-top-color: var(--warning); }
.triage.is-waiting { border-top-color: var(--ink-3); }

.triage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 11px;
}
.triage-tag {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 10.5px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.triage-tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--ink-3);
  flex: none;
}
.triage.is-overdue .triage-tag::before { background: var(--critical); }
.triage.is-soon    .triage-tag::before { background: var(--warning); }
.triage-n {
  margin-left: auto;
  font: 600 15px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.triage-sum {
  padding: 0 16px 15px;
  border-bottom: 1px solid var(--line);
}
.triage-sum b {
  display: block;
  font: 600 25px/1.1 var(--sans);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.triage-sum span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.triage-list { flex: 1; padding: 3px 0 5px; }

.triage-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
  transition: background .12s;
}
.triage-row + .triage-row { border-top: 1px solid var(--line-soft); }
.triage-row:hover { background: var(--sunken); }

.triage-row .t-n {
  font: 600 17px var(--sans);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-3);
}
.triage.is-overdue .t-n { color: var(--critical); }
.triage.is-soon    .t-n { color: var(--warning); }

.triage-row .t-what { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.triage-row .t-why  { display: block; font-size: 11px; line-height: 1.45; color: var(--ink-3); margin-top: 2px; }
.triage-row .t-when {
  font: 500 10px var(--mono);
  letter-spacing: .02em;
  color: var(--ink-3);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.triage-row:hover .t-when { background: var(--card); }

@media (max-width: 1100px) {
  .triage-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   Triage lead

   One figure above the three panels. The panels sort by how much time is left,
   which means the most urgent column carries the fewest items and the smallest
   sum — so the total goes on top, and each panel reads as a share of it rather
   than a claim about importance.
   -------------------------------------------------------------------------- */

.triage-lead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.triage-lead .fig {
  font: 600 34px/1 var(--sans);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.triage-lead .say {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.triage-lead .say strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .triage-lead { grid-template-columns: 1fr; gap: 8px; }
}