/* Rōvn Readiness consumes @rovn/ui/tokens.css before this file. This stylesheet
   owns only the seeded V2 layout and interaction skin, never a second token set. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
html, body { margin: 0; padding: 0; }
/* Target-section pulse — gives feedback when sidebar nav scrolls you there */
:target {
  animation: ledger-target-pulse 1.6s ease-out;
  scroll-margin-top: 24px;
}
@keyframes ledger-target-pulse {
  0%   { box-shadow: 0 0 0 4px var(--teal-tint), 0 0 0 5px var(--teal); }
  60%  { box-shadow: 0 0 0 4px var(--teal-tint), 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.six-card:target { border-radius: 10px; }
section:target { border-radius: 14px; }
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
/* Thin Rōvn brand rail at top of page — single 2px teal-deep line, the only chrome on the whole shell */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-deep) 0%, var(--teal) 50%, var(--teal-deep) 100%);
  z-index: 100;
  pointer-events: none;
}

/* ----- Top frame ----- */
.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-banner);
  color: var(--amber-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--amber-line);
}
.demo-chip .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 3px rgba(147, 84, 10, 0.12);
}

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

/* ----- Sidebar ----- */
.sidebar {
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-canvas) 100%);
  padding: 22px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-sub {
  font-size: 10.5px;
  color: var(--teal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.brand-doctrine {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  color: var(--text-secondary);
  padding: 0 28px 16px 12px;
  margin: -8px 0 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  position: relative;
}
.brand-doctrine .dismiss {
  position: absolute;
  top: -2px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  padding: 0;
}
.brand-doctrine:hover .dismiss,
.brand-doctrine:focus-within .dismiss { opacity: 1; }
.brand-doctrine .dismiss:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
body.doctrine-hidden .brand-doctrine { display: none; }

/* Footer restore link, only visible when doctrine is hidden */
.restore-doctrine {
  display: none;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
  padding-bottom: 1px;
  cursor: pointer;
}
.restore-doctrine:hover { color: var(--teal-deep); border-color: var(--teal); }
body.doctrine-hidden .restore-doctrine { display: inline-block; }
.nav-section { margin-bottom: 18px; }
.nav-label {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 10px 8px;
  font-weight: 500;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-item.active {
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-weight: 600;
}
/* Active marker — a 3px teal spine, the editorial cue for "you are here" */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--teal);
}
.nav-item .count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elevated);
  padding: 1px 7px;
  border-radius: 999px;
}
.nav-item.active .count { background: #FFFFFF; color: var(--teal-deep); }

/* ----- Main ----- */
.main {
  padding: 28px 36px 80px;
  max-width: 1280px;
  /* CRITICAL: as a 1fr grid child of .shell, the track's min-width defaults to
     `auto` (content-based) and refuses to shrink below the intrinsic min-width
     of its widest child (the stat grid). min-width:0 lets the column — and every
     fluid grid inside it — actually collapse to the viewport at 390/768. */
  min-width: 0;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 360px;
  color: var(--text-muted);
  font-size: 13px;
}
.search:focus-within { border-color: var(--teal); }

/* ----- Hero ----- */
.hero {
  margin-bottom: 32px;
  padding-left: 18px;
  border-left: 3px solid var(--teal);
}
.hero-eyebrow {
  font-size: 11px;
  color: var(--teal-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow .when {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
.hero-line {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw + 16px, 40px);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  line-height: 1.18;
  margin: 0 0 14px;
  max-width: 960px;
}
.hero-line .em {
  color: var(--teal-deep);
  font-weight: 500;
  font-style: italic;
}
.hero-meta {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.hero-meta .sep { color: var(--border-strong); margin: 0 10px; }

/* ----- Six-question summary ----- */
/* minmax(0,1fr) — NOT 1fr. A bare 1fr track has an implicit auto min-width, so
   the grid floors at the content's intrinsic size and pushes the column wide.
   minmax(0,...) lets each card shrink so the strip stays inside the viewport. */
.six {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.six-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 15px 15px 13px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  min-width: 0;   /* allow the card (and its number row) to shrink with the track */
}
/* Each card carries a 2px top accent in its own color — gives Rōvn rhythm without filling the card */
.six-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--text-muted);
  opacity: 0.8;
}
.six-card.start::before, .six-card.practice::before, .six-card.bill::before { background: var(--green); }
.six-card.expiring::before { background: var(--amber); }
.six-card.rovn::before { background: var(--teal); }
.six-card.decide::before { background: var(--blue); }
.six-card .q {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.six-card .q .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
}
.six-card.start .q .dot { background: var(--green); }
.six-card.practice .q .dot { background: var(--green); }
.six-card.bill .q .dot { background: var(--green); }
.six-card.expiring .q .dot { background: var(--amber); }
.six-card.rovn .q .dot { background: var(--teal); }
.six-card.decide .q .dot { background: var(--blue); }
.six-card .n {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.six-card.rovn .n { color: var(--teal-deep); }
.six-card.decide .n { color: var(--blue-deep); }
.six-card .meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.six-card .pill-red {
  background: var(--red-tint);
  color: var(--red-deep);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 600;
}
.six-card .pill-amber {
  background: var(--amber-tint);
  color: var(--amber-deep);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 5px;
  font-weight: 600;
}

/* ----- Two-column grid below hero ----- */
.cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

/* ----- Section card ----- */
.section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
}
/* Rōvn-claimed sections get a faint teal-wash and a thin left rail */
.section.rovn-claimed {
  background: var(--bg-teal-wash);
  border-color: var(--teal-line, #C9E2E0);
}
.section.rovn-claimed::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--teal);
}
.section.rovn-claimed .row,
.section.rovn-claimed .log-row,
.section.rovn-claimed .exp-row { border-top-color: #D2E2E1; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px 13px;
  gap: 12px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.012em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.section-title.blue .dot { background: var(--blue); }
.section-title.teal .dot { background: var(--teal); }
.section-title.amber .dot { background: var(--amber); }
.section-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
}
.section-link {
  color: var(--teal-deep);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 3px 4px;
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.section-link:hover { color: var(--teal-950); background: var(--teal-soft); }

/* ----- Row ----- */
.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 15px 18px 15px 16px;
  border-top: 1px solid var(--border);
  position: relative;
  transition: background var(--dur) var(--ease);
}
/* Left accent rail appears on hover/focus — editorial "this is the one" cue */
.row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: transparent;
  transition: background var(--dur) var(--ease);
}
.row:hover { background: var(--bg-elevated); }
.row:hover::before, .row:focus-within::before { background: var(--blue); }
.row .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.row .body {
  min-width: 0;
}
.row .name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 2px;
}
.row .reason {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 6px;
}
.row .evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}
.row .evidence .src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.row .evidence .receipt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.row .evidence .fresh {
  color: var(--text-muted);
}
.row .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 80ms var(--ease);
}
.btn:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.btn:active { transform: translateY(0.5px); box-shadow: none; }
.btn.primary {
  background: var(--blue);
  color: #FFFFFF;
  border-color: var(--blue-deep);
  box-shadow: var(--shadow-sm);
}
.btn.primary:hover { background: var(--blue-deep); }
.row .tag {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ----- Action queue (the daily Operator lane) ----- */
/* Priority chip — reuses status tokens; critical=red, high=amber, routine/low=muted. */
.priority-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-secondary); white-space: nowrap;
}
.priority-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); }
.priority-chip.critical { color: var(--red-deep); border-color: var(--red-line); background: var(--red-tint); }
.priority-chip.critical .dot { background: var(--red); box-shadow: 0 0 0 3px rgba(176, 39, 27, 0.14); }
.priority-chip.high { color: var(--amber-deep); border-color: var(--amber-line); background: var(--amber-tint); }
.priority-chip.high .dot { background: var(--amber); }
.priority-chip.routine { color: var(--text-secondary); }
.priority-chip.routine .dot { background: var(--text-secondary); }
.priority-chip.low { color: var(--text-muted); opacity: 0.85; }

/* Owner tag — who the next action belongs to. */
.owner-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted);
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.owner-tag.rovn { color: var(--teal-deep); border-color: var(--teal-line, #C9E2E0); background: var(--teal-soft); font-weight: 600; }

/* The imperative next-action line — THE focal sentence in each queue row.
   "What to do today" must read first: larger, full ink, tight leading. */
.row .next-action {
  font-size: 14.5px; font-weight: 600; color: var(--text-primary);
  line-height: 1.32;
  margin: 3px 0 6px;
  letter-spacing: -0.005em;
}
.row .action-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.row .action-title {
  font-weight: 600; color: var(--text-secondary); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* by_type summary pills under the section head. */
.action-summary {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 18px 2px;
}
.action-summary .sum-pill {
  font-size: 11px; color: var(--text-secondary);
  padding: 2px 9px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  white-space: nowrap;
}

/* ----- Rōvn Work Log ----- */
.log {
  padding: 4px 0;
}
.log-row {
  display: grid;
  grid-template-columns: 14px 70px 1fr auto;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
}
.log-row:first-of-type { border-top: 0; }
.log-row .verb-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-left: 4px;
}
.log-row .verb {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--teal-deep);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
}
.log-row .what {
  color: var(--text-secondary);
}
.log-row .what .name {
  color: var(--text-primary);
  font-weight: 500;
}
.log-row .receipt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ----- Expirables compact panel ----- */
.exp-ladder {
  padding: 4px 0;
}
.exp-row {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.exp-row:first-of-type { border-top: 0; }
.exp-row .bar {
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--border-strong);
}
.exp-row.r7 .bar { background: var(--red); }
.exp-row.r30 .bar { background: var(--amber); }
.exp-row.r90 .bar { background: var(--border-strong); }
.exp-row .who {
  font-size: 13px;
  color: var(--text-primary);
}
.exp-row .who .what {
  color: var(--text-secondary);
}
.exp-row .when {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.exp-row.r7 .when { color: var(--red); font-weight: 500; }

/* ----- Footer telemetry ----- */
.tele {
  margin-top: 40px;
  padding: 18px 0 0;
  background: transparent;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 28px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
}
.tele .item {
  display: flex; align-items: center; gap: 6px;
}
.tele .num {
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tele a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px dotted var(--border-strong); }
.tele .stamp {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--teal-deep);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-left: auto;
}
.tele .stamp .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); margin: 0 6px 2px; vertical-align: middle; }
.tele .stamp .sub { color: var(--text-muted); font-family: var(--font-ui); font-size: 11px; font-weight: 400; font-style: normal; letter-spacing: 0; }

/* ----- Status legend (persistent, prominent — on every view) ----- */
.status-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0 0 22px;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.status-legend .legend-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 2px;
}
.status-legend .legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.status-legend .legend-item .sw {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
  position: relative;
  top: 1px;
}
.status-legend .legend-item .term {
  font-weight: 700;
  color: var(--text-primary);
}
.status-legend .legend-item.ready  .sw { background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.status-legend .legend-item.watch  .sw { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); }
.status-legend .legend-item.atrisk .sw { background: var(--red);   box-shadow: 0 0 0 3px var(--red-tint); }
.status-legend .legend-item.decide .sw { background: var(--blue);  box-shadow: 0 0 0 3px var(--blue-tint); }

/* ----- Readiness verdict (one-glance can-we-proceed summary; the facility decides) ----- */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  white-space: nowrap;
}
.verdict .vdot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-muted); }
.verdict.yes    { background: var(--green-tint); border-color: var(--green-line); color: var(--green-deep); }
.verdict.yes .vdot    { background: var(--green); }
.verdict.no     { background: var(--red-tint); border-color: var(--red-line); color: var(--red-deep); }
.verdict.no .vdot     { background: var(--red); }
.verdict.review { background: var(--blue-tint); border-color: var(--blue-line); color: var(--blue-deep); }
.verdict.review .vdot { background: var(--blue); }

/* Verdict as a prominent banner inside the provider detail drawer.
   Stacked: eyebrow label (frames this as a readiness summary, not an AI decision),
   then the one-glance word, then a one-line reason. */
.verdict-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  margin-bottom: 16px;
}
.verdict-banner .vb-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.verdict-banner .vb-mark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.verdict-banner .vb-sub { font-size: 12px; color: var(--text-secondary); }
.verdict-banner.yes    { background: var(--green-tint); border-color: var(--green-line); }
.verdict-banner.yes .vb-mark    { color: var(--green-deep); }
.verdict-banner.no     { background: var(--red-tint); border-color: var(--red-line); }
.verdict-banner.no .vb-mark     { color: var(--red-deep); }
.verdict-banner.review { background: var(--blue-tint); border-color: var(--blue-line); }
.verdict-banner.review .vb-mark { color: var(--blue-deep); }

/* ----- Reduced motion — disable/minimize animation for users who ask -----
   Universal guard FIRST (covers all 13 transitions, both keyframe animations,
   and the infinite skeleton shimmer — vestibular-safe), then a few targeted
   overrides so specific surfaces settle into their resting state cleanly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;   /* stop the infinite skeleton-shimmer loop */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  :target { animation: none; }
  .six-card:hover { transform: none; box-shadow: none; }
  .toast { transition: opacity 1ms linear; transform: none; }
  /* Skeletons must not pulse at all — freeze to a flat resting fill. */
  .skeleton { animation: none !important; background: var(--bg-elevated); }
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  /* minmax(0,1fr) — NOT a bare 1fr: a bare 1fr track has an implicit min-width:auto,
     so it grows to the content min-width of its widest child (the .tele strip),
     forcing .main to ~712px and silently clipping it under body overflow-x:hidden.
     minmax(0,1fr) + min-width:0 on the item let the column shrink to the viewport. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .main { padding: 20px 24px 64px; min-width: 0; max-width: 100%; }
  .tele { flex-wrap: wrap; row-gap: 6px; }
  .six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; }
  /* Tablet topbar — search + preview controls together exceed the row width once
     the sidebar is gone, so let the bar wrap and the controls flow onto a second
     line instead of pushing the page wider. */
  .topbar { flex-wrap: wrap; gap: 12px; }
  .topbar .search { flex: 1 1 240px; min-width: 0; }
  .topbar-controls { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 640px) {
  .main { padding: 16px 16px 48px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar .search { display: none; }
  .topbar > div:last-child { flex-wrap: wrap; gap: 8px; width: 100%; justify-content: flex-start; }
  .density-toggle { display: none !important; }            /* hide density on mobile; touch users default to comfortable */
  .demo-chip { font-size: 11px; padding: 3px 8px; }
  .hero-line { font-size: 24px; }
  .hero { padding-left: 12px; }
  .six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .six-card .n { font-size: 28px; }
  .row { grid-template-columns: 28px 1fr; padding: 12px 14px; }
  .row .avatar { width: 28px; height: 28px; font-size: 11px; }
  .row .right { grid-column: 2 / 3; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .log-row { grid-template-columns: 14px 64px 1fr; padding: 10px 14px; }
  .log-row .receipt { display: none; }
  .exp-row { padding: 10px 14px; }
  .macron-rule { margin: 22px 0 18px; }
  .empty-state { padding: 22px 18px; gap: 14px; }
  .empty-state .glyph { font-size: 44px; }
  /* Legend wraps to a tidy two-up grid instead of a cramped single row */
  .status-legend { gap: 8px 14px; padding: 11px 14px; }
  .status-legend .legend-item { font-size: 12px; }
  .hero-meta .sep { margin: 0 7px; }
  .section-head { flex-wrap: wrap; }
}

/* Very small phones (≤390) — guarantee no overflow and keep the queue legible */
@media (max-width: 390px) {
  .main { padding: 14px 12px 44px; }
  .six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .six-card { padding: 12px 11px 10px; }
  .six-card .n { font-size: 26px; }
  .hero-line { font-size: 22px; }
  .row { padding: 13px 12px 13px 12px; }
  .row .next-action { font-size: 13.5px; }
  .section-title { font-size: 17px; }
  .toast-host { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .toast { max-width: none; }
}

/* Visually-hidden helper for a11y */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----- Loading skeletons -----
   Real shimmer placeholders so the dashboard reads as "fetching live data",
   not a blank wired demo. announced via aria-live where they replace content. */
.skeleton {
  display: block;
  background: linear-gradient(100deg, var(--bg-elevated) 30%, var(--bg-sunken) 50%, var(--bg-elevated) 70%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skeleton-shimmer 1.3s var(--ease) infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line { height: 11px; margin: 6px 0; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-circle { width: 30px; height: 30px; border-radius: 50%; flex: none; }
/* A skeleton roster row mirrors the real roster-row rhythm */
.skeleton-row {
  display: grid;
  grid-template-columns: 30px 2.2fr 1.1fr 1fr;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.skeleton-row:first-child { border-top: 0; }
/* A skeleton queue row for the "Do these today" lane */
.skeleton-queue-row {
  display: grid; grid-template-columns: 32px 1fr 80px;
  gap: 14px; align-items: start;
  padding: 15px 18px; border-top: 1px solid var(--border);
}
.skeleton-queue-row:first-child { border-top: 0; }
.skeleton-stack { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-elevated); }
}

/* ----- Macron motif — single ambient ō glyph as a section separator ----- */
.macron-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 24px;
  color: var(--border-strong);
}
.macron-rule::before,
.macron-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.macron-rule .glyph {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--teal);
  opacity: 0.55;
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
}

/* ----- Density toggle ----- */
.density-toggle {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  font-size: 12px;
}
.density-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}
.density-toggle button.active {
  background: var(--teal-tint);
  color: var(--teal-deep);
}

/* Compact density — applied by JS, drops row + card padding ~30% */
body.compact .six-card { padding: 10px 12px 9px; }
body.compact .six-card .n { font-size: 30px; margin-bottom: 4px; }
body.compact .row { padding: 10px 16px; }
body.compact .log-row { padding: 7px 16px; }
body.compact .exp-row { padding: 8px 16px; }
body.compact .section-head { padding: 12px 16px 10px; }
body.compact .hero { margin-bottom: 22px; }
body.compact .hero-line { font-size: 30px; }
body.compact .six { gap: 8px; margin-bottom: 20px; }
body.compact .cols { gap: 18px; margin-bottom: 20px; }

/* ----- Empty / inbox-zero state ----- */
.empty-state {
  padding: 36px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.empty-state .glyph {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.9;
  color: var(--teal);
  opacity: 0.85;
  user-select: none;
}
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.empty-state h3 em { color: var(--teal-deep); font-style: italic; }
.empty-state p {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 520px;
}
.empty-state .meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.empty-state .meta strong { color: var(--text-primary); font-weight: 500; }

/* ----- Provider drawer (six-card click + row click) ----- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 34, 32, 0.32);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 200;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 520px;
  max-width: 100vw;
  background: var(--bg-canvas);
  border-left: 1px solid var(--border-strong);
  box-shadow: -24px 0 60px rgba(14, 26, 25, 0.16);
  transform: translateX(100%);
  transition: transform 280ms var(--ease);
  z-index: 201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 8px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-canvas) 100%);
}
.drawer-back, .drawer-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  padding: 5px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}
.drawer-back:hover, .drawer-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.drawer-close { margin-left: auto; padding: 5px 9px; font-size: 16px; line-height: 1; }
.drawer-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.drawer-title em { color: var(--teal-deep); font-style: italic; font-weight: 500; }
.drawer-sub {
  padding: 0 22px 14px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-canvas);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 24px;
}

/* List view rows */
.drawer-list-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
  border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
}
.drawer-list-row:hover { background: var(--bg-elevated); }
.drawer-list-row .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.drawer-list-row .info .name { font-weight: 500; }
.drawer-list-row .info .meta { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.drawer-list-row .status {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.drawer-list-row .status .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.drawer-list-row .status .pill .dot { width: 5px; height: 5px; border-radius: 50%; }
.drawer-list-row .status .pill.ready .dot { background: var(--green); }
.drawer-list-row .status .pill.watch .dot { background: var(--amber); }
.drawer-list-row .status .pill.atrisk .dot { background: var(--red); }
.drawer-list-row .status .pill.decide .dot { background: var(--blue); }
.drawer-list-row .status .pill.atrisk { color: var(--red); }

/* Detail view */
.detail {
  padding: 20px 22px 24px;
}
.detail-hero {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.detail-hero .av {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
}
.detail-hero h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 2px;
}
.detail-hero .role {
  font-size: 13px;
  color: var(--text-secondary);
}
.detail-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.detail-three .cell {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 12px 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.detail-three .cell::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--text-muted);
}
.detail-three .cell.ready::before { background: var(--green); }
.detail-three .cell.watch::before { background: var(--amber); }
.detail-three .cell.atrisk::before { background: var(--red); }
.detail-three .cell.decide::before { background: var(--blue); }
.detail-three .cell .k { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.detail-three .cell .v {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.detail-three .cell .v .dot { width: 7px; height: 7px; border-radius: 50%; }
.detail-three .cell.ready .v .dot { background: var(--green); }
.detail-three .cell.watch .v .dot { background: var(--amber); }
.detail-three .cell.atrisk .v .dot { background: var(--red); }
.detail-three .cell.decide .v .dot { background: var(--blue); }

.detail-section { margin-bottom: 22px; }
.detail-section h3 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 8px;
}
.detail-fact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  align-items: baseline;
}
.detail-fact:first-of-type { border-top: 0; padding-top: 4px; }
.detail-fact .label { color: var(--text-secondary); }
.detail-fact .value { color: var(--text-primary); font-weight: 500; text-align: right; }
.detail-fact .receipt { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); display: block; font-weight: 400; margin-top: 2px; }
.detail-fact .value.warn { color: var(--red); }
.detail-fact .value.amber { color: var(--amber); }
.detail-fact .value.ok { color: var(--green); }

.detail-actions {
  display: flex; gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.detail-actions .btn-d {
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.detail-actions .btn-d:hover { background: var(--bg-elevated); }
.detail-actions .btn-d.primary {
  background: var(--blue);
  color: #FFFDF8;
  border-color: var(--blue);
}
.detail-actions .btn-d.primary:hover { background: #1A4F97; }

/* Make six-cards + busy-queue rows look clickable */
.six-card { cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; }
.six-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20, 34, 32, 0.06); }
#busy-queue .row { cursor: pointer; }
#all-providers tbody tr { cursor: pointer; transition: background 120ms ease; }
#all-providers tbody tr:hover { background: var(--bg-elevated); }

/* ----- Reason prompt modal (sits above the drawer) ----- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 34, 32, 0.40);
  display: none;
  align-items: center; justify-content: center;
  z-index: 300;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 440px; max-width: 92vw;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(20, 34, 32, 0.18);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue);
}
.modal h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.modal .ctx {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-style: italic;
}
.modal label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 10px 0 4px;
  letter-spacing: 0.02em;
}
.modal input, .modal textarea, .modal select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  resize: vertical;
}
.modal textarea { min-height: 70px; }
.modal input:focus, .modal textarea:focus, .modal select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint);
}
.modal .hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.modal .actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.modal .actions button {
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
}
.modal .actions button:hover { background: var(--bg-elevated); }
.modal .actions button.primary {
  background: var(--blue); color: #FFFDF8; border-color: var(--blue);
}
.modal .actions button.primary:hover { background: #1A4F97; }
.modal .actions button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ----- Toast ----- */
.toast-host {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 400;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(20, 34, 32, 0.14);
  max-width: 380px;
  font-size: 13px;
  color: var(--text-primary);
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 12px;
  align-items: start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .bar { width: 3px; height: 100%; min-height: 28px; border-radius: 2px; background: var(--text-muted); }
.toast.ok .bar    { background: var(--green); }
.toast.warn .bar  { background: var(--amber); }
.toast.err .bar   { background: var(--red); }
.toast.info .bar  { background: var(--blue); }
.toast .body strong { display: block; font-weight: 600; margin-bottom: 2px; }
.toast .body .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  word-break: break-all;
}

/* ----- Real search input + result dropdown ----- */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 360px;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
.search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.search input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
  border: 0;
  background: transparent;
  outline: none;
  padding: 2px 0;
  min-width: 0;
}
.search input::placeholder { color: var(--text-muted); }
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
#search-results {
  position: absolute;
  z-index: 90;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(20, 34, 32, 0.10);
  max-width: 420px;
  width: 360px;
  max-height: 380px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 4px 0;
}
#search-results[hidden] { display: none; }
#search-results .res {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px;
  background: transparent; border: 0;
  font-family: inherit; font-size: 13px; color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
#search-results .res:last-child { border-bottom: 0; }
#search-results .res:hover, #search-results .res[aria-selected="true"] { background: var(--bg-elevated); }
#search-results .res .role { color: var(--text-muted); font-size: 11px; margin-left: 8px; }
#search-results .empty {
  padding: 14px; color: var(--text-muted); font-size: 12px; font-style: italic; text-align: center;
}

/* state-toggle now uses <button> — restyle */
.state-toggle button {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.state-toggle button:hover { background: var(--bg-elevated); }
.state-toggle button.active { color: var(--teal-deep); border-color: var(--teal-tint); background: var(--teal-tint); }

/* demo-chip subtitle — make the "not connected" framing clearer when present */
.demo-chip { white-space: nowrap; }
.demo-chip.live { background: #DFEFE9; border-color: #B7DDD0; color: #06502E; }
.demo-chip.live .dot { background: var(--green); }

/* Modal — required field markers + better required UX */
.modal label .req { color: var(--red); margin-left: 3px; }
.modal label .opt { color: var(--text-muted); font-weight: 400; margin-left: 4px; font-size: 11px; }
.modal .field { margin-top: 12px; }
.modal .field:first-child { margin-top: 0; }
.modal .field-error {
  font-size: 11px; color: var(--red); margin-top: 4px; min-height: 14px;
}

/* No overflow-x:hidden crutch — the layout genuinely fits the viewport now
   (.main{min-width:0} + fluid minmax(0,1fr) grids). The All-providers table
   keeps its OWN horizontal-scroll wrapper (.all-providers-scroll) so a wide
   table scrolls inside its card, never the page. */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .search { width: 100%; }
  .topbar > div:last-child { flex-wrap: wrap; gap: 8px; width: 100%; }
  .demo-chip { white-space: normal; font-size: 11px; }
  .demo-chip .demo-chip-label { display: inline; }
  .drawer { width: 100vw; box-shadow: none; }
  .drawer-list-row { padding: 12px 14px; grid-template-columns: 28px 1fr auto; }
  .modal { width: 92vw; padding: 18px 18px; }
  .detail { padding: 16px 14px 22px; }
  .detail-three { grid-template-columns: 1fr; gap: 8px; }
  .detail-fact { grid-template-columns: 1fr; gap: 2px; }
  .detail-fact .value { text-align: left; }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-actions .btn-d { text-align: center; }
  #search-results { width: calc(100vw - 32px); max-width: 100vw; }
  /* Prevent decision rows from overflowing */
  #busy-queue .row { grid-template-columns: 28px 1fr; }
  #busy-queue .row .right { grid-column: 2; align-items: flex-start; }
  /* All-providers table mobile — scroll the table inside its own padded wrapper,
     not the whole page. The wrapper is the scroll viewport; the table keeps a
     min-width so columns stay legible and scroll horizontally within it. */
  .all-providers-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .all-providers-scroll table { min-width: 560px; }
}

/* Accessibility — proper inert on closed drawer + modal */
.drawer[aria-hidden="true"] { visibility: hidden; }
.drawer.open { visibility: visible; }
.modal-overlay[aria-hidden="true"] { display: none; }
/* Visible focus rings — 2px teal ring + soft halo, AA-visible on cream and white */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 5px;
  box-shadow: 0 0 0 4px var(--teal-tint);
}
.six-card:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 2px var(--teal-tint); }
/* Full-bleed rows: inset the ring so it doesn't clip at the card edge */
.row:focus-visible,
.roster-row:focus-visible,
.drawer-list-row:focus-visible,
#all-providers tbody tr:focus-visible {
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px var(--teal-tint);
}
/* Remove default focus ring only when focus-visible is supported (keyboard users keep it) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) { outline: none; }

/* Muted meta text inherits the AA-safe --text-muted (#5E6866). The old local
   #6F756F was tuned to a retired tan canvas (#F7F3EC) and is now too light on
   the current cream — let these contexts use the darker token instead. */
.row .evidence, .log-row .receipt, .exp-row .when {
  color: var(--text-muted);
}

/* =====================================================================
   FILTERED VIEW PAGES
   When the URL is /readiness/<something> (not /readiness), hide the
   homepage chrome (six-cards + cols + telemetry footer) and render a
   focused roster instead. The .view-page class is set on <body>.
   ===================================================================== */
body.view-page .hero,
body.view-page .six,
body.view-page .cols,
body.view-page .tele,
body.view-page .macron-rule {
  display: none;
}
body.view-page .view-shell { display: block; }
body:not(.view-page) .view-shell { display: none; }

.view-shell { padding: 8px 0 0; }
.view-hero {
  padding-left: 16px;
  border-left: 2px solid var(--teal);
  margin-bottom: 22px;
}
.view-hero .eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.view-hero .eyebrow .crumb-sep { color: var(--border-strong); }
.view-hero h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 8px;
  max-width: 920px;
}
.view-hero h1 em { color: var(--teal-deep); font-style: italic; font-weight: 500; }
.view-hero .lede {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
  max-width: 760px;
}

/* Status summary strip (1–4 cards depending on view) */
.view-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.view-sum-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.view-sum-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--text-muted);
}
.view-sum-card.ready::before  { background: var(--green); }
.view-sum-card.watch::before  { background: var(--amber); }
.view-sum-card.atrisk::before { background: var(--red); }
.view-sum-card.decide::before { background: var(--blue); }
.view-sum-card.rovn::before   { background: var(--teal); }
.view-sum-card .k { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: 0.01em; }
.view-sum-card .v { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.view-sum-card .meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Roster table — main content of every view page */
.roster {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.roster-head {
  display: grid;
  grid-template-columns: 30px 2.2fr 1fr 1.1fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
  padding: 11px 18px;
  font-size: 10.5px;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.roster-row {
  display: grid;
  grid-template-columns: 30px 2.2fr 1fr 1.1fr 0.9fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
  padding: 12px 18px;
  align-items: center;
  border-top: 1px solid var(--border);
  cursor: pointer;
  width: 100%;
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
}
.roster-row:first-of-type { border-top: 0; }
.roster-row:hover { background: var(--bg-elevated); }
.roster-row .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.roster-row .who .name { font-weight: 500; }
.roster-row .who .role { color: var(--text-secondary); font-size: 11px; margin-top: 1px; }
.roster-row .pill-cell {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border); white-space: nowrap;
}
.roster-row .pill-cell .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.roster-row .pill-cell.ready  { color: var(--green-deep); background: var(--green-tint); border-color: var(--green-line); }
.roster-row .pill-cell.ready  .dot { background: var(--green); }
.roster-row .pill-cell.watch  { color: var(--amber-deep); background: var(--amber-tint); border-color: var(--amber-line); }
.roster-row .pill-cell.watch  .dot { background: var(--amber); }
.roster-row .pill-cell.atrisk { color: var(--red-deep);   background: var(--red-tint);   border-color: var(--red-line); }
.roster-row .pill-cell.atrisk .dot { background: var(--red); }
.roster-row .pill-cell.decide { color: var(--blue-deep);  background: var(--blue-tint);  border-color: var(--blue-line); }
.roster-row .pill-cell.decide .dot { background: var(--blue); }
.roster-row .pill-cell.na     { color: var(--text-muted); }
.roster-row .pill-cell.na .dot { background: var(--text-muted); }
.roster-row .exp-cell { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-secondary); }
.roster-row .exp-cell.warn { color: var(--red); font-weight: 500; }
.roster-row .exp-cell.amber { color: var(--amber); font-weight: 500; }

.roster-empty {
  padding: 40px 36px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}
.roster-empty strong {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 19px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
/* Subtle macron watermark above an empty roster — keeps the brand present */
.roster-empty::before {
  content: "ō";
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--teal);
  opacity: 0.35;
  line-height: 1;
  margin-bottom: 14px;
}

/* In-view roster search/filter */
.roster-toolbar {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.roster-toolbar input[type="search"] {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-canvas);
  color: var(--text-primary);
  outline: none;
}
.roster-toolbar input[type="search"]:focus { border-color: var(--teal); }
.roster-toolbar .count { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

/* Work-log view variant — log rows instead of table rows */
.view-shell .log-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.view-shell .log-card.rovn-claimed {
  background: var(--bg-teal-wash);
  border-color: #D2E2E1;
}

/* Mobile — roster collapses to two-row layout */
@media (max-width: 900px) {
  .roster-head { display: none; }
  .roster-row {
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 12px 14px;
    row-gap: 4px;
  }
  .roster-row .who { grid-column: 2; }
  .roster-row .verdict-cell,
  .roster-row .scope-cell,
  .roster-row .start-cell,
  .roster-row .practice-cell,
  .roster-row .bill-cell,
  .roster-row .exp-cell {
    grid-column: 2;
    font-size: 11px;
    color: var(--text-secondary);
  }
  .roster-row .verdict-cell { margin: 2px 0; }
  .roster-row .scope-cell::before { content: "Scope: "; color: var(--text-muted); }
  .roster-row .start-cell::before { content: "Start: "; color: var(--text-muted); }
  .roster-row .practice-cell::before { content: "Practice: "; color: var(--text-muted); }
  .roster-row .bill-cell::before { content: "Bill: "; color: var(--text-muted); }
  .roster-row .exp-cell::before { content: "Expires: "; color: var(--text-muted); }
}

/* State preview toggle in topbar (so the user can flip between busy/empty) */
.state-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 12px;
}
.state-toggle a {
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-surface);
}
.state-toggle a.active { color: var(--teal-deep); border-color: var(--teal-tint); background: var(--teal-tint); }

/* ===========================================================
   Facility login + auth controls + write-action UI (real-tenant)
   =========================================================== */

/* ----- Login overlay ----- */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(11, 15, 18, 0.55);
  backdrop-filter: blur(3px);
  padding: 24px;
}
.login-overlay.open { display: flex; }
.login-card {
  width: 100%; max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
/* Teal brand accent across the top of the sign-in card */
.login-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), var(--teal-deep));
}
.login-brand { display: flex; align-items: baseline; gap: 8px; }
.login-brand .brand-mark { font-family: var(--font-display); font-size: 22px; color: var(--teal-deep); }
.login-brand .brand-sub { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.login-title { font-family: var(--font-display); font-size: 21px; color: var(--text-primary); margin: 4px 0 0; font-weight: 500; }
.login-lede { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 4px; line-height: 1.5; }
.login-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.login-field input {
  font-family: var(--font-ui); font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-canvas); color: var(--text-primary);
}
.login-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.login-error { color: var(--red); font-size: 12.5px; min-height: 16px; }
.login-submit {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
  cursor: pointer; margin-top: 4px;
}
.login-submit:hover { background: var(--teal-deep); }
.login-submit:disabled { opacity: 0.6; cursor: default; }
.login-foot { text-align: center; }
.login-demo-link {
  background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font-size: 12px; text-decoration: underline;
  text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.login-demo-link:hover { color: var(--teal-deep); }
.login-doctrine { text-align: center; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.02em; }
body.login-active { overflow: hidden; }

/* ----- Header auth controls (identity + logout + import) ----- */
.auth-controls { display: inline-flex; align-items: center; gap: 8px; }
.auth-who { font-size: 12px; color: var(--text-secondary); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-primary); cursor: pointer;
}
.auth-btn:hover { background: var(--bg-elevated); }
.auth-btn.import-btn { border-color: var(--teal-line, #C9E2E0); color: var(--teal-deep); background: var(--teal-soft); font-weight: 600; }
.auth-btn.import-btn:hover { background: var(--teal-tint); border-color: var(--teal); }

/* ----- Record-a-decision card (worker drawer) ----- */
.decision-card {
  border: 1px solid var(--blue-line); background: var(--blue-tint);
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 10px;
  position: relative; box-shadow: var(--shadow-xs);
}
.decision-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: var(--r) 0 0 var(--r); background: var(--blue);
}
.decision-card .dc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.decision-card .dc-kind { font-weight: 700; font-size: 13px; color: var(--blue-deep); text-transform: capitalize; }
.decision-card .dc-blocker { font-size: 12px; color: var(--text-secondary); }
.decision-card .dc-doctrine { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.45; }

/* ----- Blocker card + resolve/dismiss controls (worker drawer) ----- */
.blocker-card { border: 1px solid var(--border); border-radius: var(--r); padding: 11px 13px; margin-bottom: 8px; background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.blocker-card.fcra { border-color: var(--amber-line); background: var(--amber-tint); }
.blocker-actions { display: flex; gap: 8px; margin-top: 10px; }
.fcra-notice {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--amber-line); background: var(--amber-tint);
  border-radius: var(--r-sm); padding: 10px 12px; margin: 9px 0 2px;
  font-size: 12px; color: var(--amber-deep); line-height: 1.5;
}
.fcra-notice strong { color: var(--amber-deep); font-weight: 700; }
.fcra-link {
  color: var(--teal-deep); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--teal-tint); text-underline-offset: 3px; font-size: 12px;
}

/* ----- Import errors panel ----- */
.import-errors {
  margin-top: 10px; max-width: 360px;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); box-shadow: 0 12px 32px rgba(11,15,18,0.18);
  padding: 12px 14px; font-size: 12px;
  pointer-events: auto; /* re-enable inside the pointer-events:none toast host */
}
.import-errors .ie-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.import-errors .ie-close { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--text-muted); }
.import-errors .ie-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.import-errors .ie-list li { padding: 4px 0; border-top: 1px solid var(--border); color: var(--text-secondary); }
.import-errors .ie-row { font-family: var(--font-mono); color: var(--red); margin-right: 6px; }
.import-errors .ie-more { color: var(--text-muted); font-style: italic; }

/* =====================================================================
   A+ DESIGN PASS — intentional hierarchy, depth, semantic color.
   Layered cream surfaces, an operator-grade action lane, a stat strip
   that reads at a glance, and a roster table that feels designed.
   This block is the source of truth for the surfaces below; it cascades
   over the base rules above on purpose.
   ===================================================================== */

/* ---- Canvas depth: a faint top wash so cards float on something, not nothing ---- */
.main {
  background:
    radial-gradient(120% 70% at 0% -8%, rgba(14,138,138,0.045) 0%, rgba(14,138,138,0) 46%),
    var(--bg-canvas);
}

/* ---- Sidebar active state — stronger, with a teal-wash plate + bolder spine ---- */
.nav-item.active {
  background: linear-gradient(90deg, var(--teal-soft) 0%, rgba(234,243,242,0.4) 100%);
  box-shadow: inset 0 0 0 1px var(--teal-line);
}
.nav-item.active::before {
  left: -12px; top: 4px; bottom: 4px;
  width: 3.5px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
  box-shadow: 0 0 0 0.5px rgba(10,84,84,0.25);
}
.nav-item:active { transform: translateY(0.5px); }

/* =====================================================================
   1 · STAT STRIP — the six readiness numbers, legible + semantic.
   Bigger/darker labels, a number↔label unit, semantic number color so
   the at-a-glance reading carries meaning (good=ink, expiring=amber,
   decide=blue, surveyed=teal). 78% bill gate flagged amber as the lagging one.
   ===================================================================== */
.six { gap: 14px; margin-bottom: 30px; }
.six-card {
  padding: 16px 16px 14px;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FDFDFB 100%);
}
.six-card::before { height: 3px; opacity: 1; }
/* Label — bigger, darker, reads as the unit header (not a faint caption) */
.six-card .q {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.six-card .q .dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
/* Number + unit on one baseline so they read as one object */
.six-card .n-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.six-card .n { font-size: 40px; margin-bottom: 0; line-height: 0.9; }
.six-card .of {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Semantic number color — the headline figure carries the status read */
.six-card.start .n, .six-card.practice .n { color: var(--green-deep); }
.six-card.bill .n { color: var(--amber-deep); }     /* lagging gate — flagged */
.six-card.expiring .n { color: var(--amber-deep); }
.six-card.rovn .n { color: var(--teal-deep); }
.six-card.decide .n { color: var(--blue-deep); }
/* Meta rate chip */
.six-card .meta { font-size: 11.5px; }
.six-card .rate {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; font-size: 11px; padding: 1px 8px; border-radius: 6px;
}
.six-card .rate.good  { color: var(--green-deep); background: var(--green-tint); }
.six-card .rate.watch { color: var(--amber-deep); background: var(--amber-tint); }
.six-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* =====================================================================
   3 · DEPTH — make the action lane the dominant, lifted surface.
   The "Do these today" card sits higher than its neighbors with a
   stronger shadow + a hairline teal-blue top edge; the right-rail cards
   sit one step down. Clear figure/ground.
   ===================================================================== */
.cols { grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
.section.lane-primary {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.section.lane-primary::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--teal) 100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.section.lane-primary .section-head { padding-top: 19px; }
.section.lane-primary .section-title { font-size: 21px; }

/* =====================================================================
   2 · ACTION QUEUE ROWS — action-led, prioritized, scannable.
   Reads: WHAT to do (next-action, leading) → priority+type (chip row) →
   FOR WHOM (demoted name/role) → WHY/evidence. Priority left-rail by class.
   ===================================================================== */
#busy-queue .row {
  grid-template-columns: 34px 1fr auto;
  gap: 15px;
  padding: 16px 18px 16px 18px;
  align-items: start;
}
/* Persistent priority left-rail (not only on hover) — the at-a-glance triage cue */
#busy-queue .row::before { width: 3px; background: var(--border); opacity: 1; }
#busy-queue .row.prio-critical::before { background: var(--red); }
#busy-queue .row.prio-high::before     { background: var(--amber); }
#busy-queue .row.prio-routine::before  { background: var(--border-strong); }
#busy-queue .row:hover {
  background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(241,242,239,0.5) 100%);
  box-shadow: inset 0 0 0 1px var(--border);
}
#busy-queue .row:hover::before { width: 4px; }
#busy-queue .row.prio-critical:hover { background: linear-gradient(90deg, #FCEEEB 0%, rgba(252,238,235,0.4) 100%); }

/* Avatar — slightly larger, soft ring */
#busy-queue .row .avatar {
  width: 34px; height: 34px; font-size: 12px; font-weight: 600;
  background: var(--bg-sunken); color: var(--text-secondary);
}

/* Action head: priority chip + type label */
#busy-queue .action-head { margin-bottom: 6px; }
#busy-queue .action-title {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.055em;
}

/* THE leading line — what to do today. Largest text in the row. */
#busy-queue .next-action {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  line-height: 1.34; letter-spacing: -0.006em;
  margin: 2px 0 5px;
}
#busy-queue .next-action em { color: var(--teal-deep); font-style: normal; font-weight: 700; }

/* WHY — demoted to a quiet secondary line */
#busy-queue .reason {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.45;
  margin-bottom: 7px;
}
#busy-queue .reason em { color: var(--text-primary); font-style: normal; font-weight: 600; }

/* Evidence: who + owner + source + receipt, smallest tier */
#busy-queue .evidence { gap: 8px; font-size: 11px; }
#busy-queue .evidence .src:first-child { color: var(--text-primary); font-weight: 600; }
#busy-queue .evidence .dotsep { color: var(--border-strong); }

/* Right column: button + age */
#busy-queue .right { gap: 8px; padding-top: 1px; }
#busy-queue .row .btn { min-width: 78px; justify-content: center; }
#busy-queue .row .tag { font-size: 10.5px; letter-spacing: 0.02em; }

/* Make EVERY Decide button the consistent primary action (no silent two-tier styling).
   Critical/high rows get a filled blue; routine rows get a quieter outline-but-teal. */
#busy-queue .row.prio-routine .btn.primary,
#busy-queue .row .btn:not(.primary) {
  background: var(--bg-surface); color: var(--blue-deep);
  border-color: var(--blue-line); box-shadow: var(--shadow-xs);
}
#busy-queue .row.prio-routine .btn.primary:hover,
#busy-queue .row .btn:not(.primary):hover { background: var(--blue-tint); border-color: var(--blue); }

/* by-type summary pills under the head — make the critical one carry color */
.action-summary { padding: 12px 18px 4px; gap: 7px; }
.action-summary .sum-pill { font-weight: 600; font-size: 11px; }
.action-summary .sum-pill.critical {
  color: var(--red-deep); background: var(--red-tint); border-color: var(--red-line);
}

/* =====================================================================
   SECTION AFFORDANCES — "Open all" reads as a real teal control.
   ===================================================================== */
.section-link.strong {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--teal-deep); font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.section-link.strong .arrow { transition: transform var(--dur) var(--ease); }
.section-link.strong:hover {
  background: var(--teal-soft); color: var(--teal-950);
  border-color: var(--teal-line);
}
.section-link.strong:hover .arrow { transform: translateX(2px); }

/* =====================================================================
   RIGHT-RAIL CARDS — one depth step below the action lane, with a touch
   more presence than a hairline box. Expiring ladder rows get fuller bars.
   ===================================================================== */
#expirables-section, #worklog-section { box-shadow: var(--shadow-sm); }
.exp-row { padding: 11px 18px; }
.exp-row .bar { width: 4px; height: 26px; border-radius: 3px; }
.exp-row.r7 .bar  { box-shadow: 0 0 0 3px var(--red-tint); }
.exp-row.r30 .bar { box-shadow: 0 0 0 3px var(--amber-tint); }
.exp-row .who strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-primary); }
.exp-row .when {
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 1px 8px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary);
}
.exp-row.r7 .when  { color: var(--red-deep); background: var(--red-tint); }
.exp-row.r30 .when { color: var(--amber-deep); background: var(--amber-tint); }
.exp-row:hover { background: var(--bg-elevated); }
.log-row:hover { background: rgba(234,243,242,0.5); }

/* =====================================================================
   4 · ALL-PROVIDERS TABLE — class-based, designed, readable.
   Taller rows, strong sticky-feeling header, zebra + hover, the
   "Can we proceed?" verdict promoted as the primary column. Status pills
   replace bare dot+label so the grid scans as colored chips, not grey text.
   ===================================================================== */
/* The roster table is the one genuinely wide surface. Make its wrapper a
   permanent horizontal-scroll viewport (at every width, not only mobile) so a
   wide table scrolls INSIDE its card and never pushes the page horizontally. */
.all-providers-scroll {
  padding: 6px 18px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.rtable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.rtable thead th {
  text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
  padding: 11px 12px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.rtable thead th:first-child { padding-left: 14px; border-radius: var(--r-sm) 0 0 0; }
.rtable thead th.col-num { text-align: right; }
.rtable thead th:last-child { border-radius: 0 var(--r-sm) 0 0; }
.rtable thead th.col-verdict { color: var(--teal-deep); }
.rtable tbody td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.rtable tbody td:first-child { padding-left: 14px; }
.rtable tbody tr:last-child td { border-bottom: 0; }
/* Zebra + hover */
.rtable tbody tr:nth-child(even) { background: rgba(244,245,242,0.45); }
#all-providers .rtable tbody tr { cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
#all-providers .rtable tbody tr:hover { background: var(--bg-elevated); box-shadow: inset 3px 0 0 var(--teal); }
.rtable .cell-provider { font-weight: 600; color: var(--text-primary); }
.rtable .cell-role { color: var(--text-secondary); }
.rtable .cell-num { text-align: right; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.rtable .cell-exp { color: var(--text-secondary); }
.rtable .cell-exp.warn  { color: var(--red-deep); font-weight: 600; }
.rtable .cell-exp.amber { color: var(--amber-deep); font-weight: 600; }
/* The promoted verdict column — bolder chip, the primary read */
.rtable .cell-verdict .verdict { font-size: 11.5px; font-weight: 700; padding: 4px 11px; }
/* Status pills inside the grid — colored chips, not grey dot+text */
.rtable .scell {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
  white-space: nowrap;
}
.rtable .scell .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.rtable .scell.ready  { color: var(--green-deep); background: var(--green-tint); border-color: var(--green-line); }
.rtable .scell.ready  .dot { background: var(--green); }
.rtable .scell.watch  { color: var(--amber-deep); background: var(--amber-tint); border-color: var(--amber-line); }
.rtable .scell.watch  .dot { background: var(--amber); }
.rtable .scell.atrisk { color: var(--red-deep);   background: var(--red-tint);   border-color: var(--red-line); }
.rtable .scell.atrisk .dot { background: var(--red); }
.rtable .scell.decide { color: var(--blue-deep);  background: var(--blue-tint);  border-color: var(--blue-line); }
.rtable .scell.decide .dot { background: var(--blue); }
.rtable-foot { padding: 14px 2px 2px; color: var(--text-muted); font-size: 12px; }
.tlink { color: var(--teal-deep); text-decoration: underline; text-decoration-color: var(--teal-tint); text-underline-offset: 3px; }
.tlink:hover { text-decoration-color: var(--teal); }

/* =====================================================================
   5 · FOCAL HIERARCHY — strengthen the hero entry point.
   ===================================================================== */
.hero { border-left-width: 4px; padding-left: 20px; }
.hero-line { line-height: 1.16; }
.hero-line .em { font-weight: 600; }

/* =====================================================================
   DRAWER POLISH — lift the verdict banner + the three readiness cells.
   ===================================================================== */
.verdict-banner { box-shadow: var(--shadow-sm); padding: 14px 16px; }
.verdict-banner .vb-mark { font-size: 22px; }
.detail-three .cell { box-shadow: var(--shadow-sm); padding: 13px 13px 11px; }
.detail-three .cell::before { height: 3px; }
.detail-three .cell .v { font-size: 16px; }

/* =====================================================================
   RESPONSIVE — keep the new structure clean at 768 / 390.
   ===================================================================== */
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  .section.lane-primary { box-shadow: var(--shadow-md); }
}
@media (max-width: 640px) {
  .six-card .n { font-size: 30px; }
  .six-card .n-row { gap: 6px; }
  #busy-queue .row { grid-template-columns: 30px 1fr; padding: 14px 14px 14px 15px; }
  #busy-queue .row .right { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-top: 4px; }
  #busy-queue .next-action { font-size: 14px; }
  .action-summary { padding: 10px 14px 2px; }
  /* Table stays in its horizontal-scroll wrapper (set above); just keep header sticky off on mobile */
  .rtable thead th { position: static; }
}
@media (max-width: 390px) {
  .six-card { padding: 13px 12px 11px; }
  .six-card .n { font-size: 28px; }
  #busy-queue .next-action { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .six-card:hover { transform: none; }
  .section-link.strong:hover .arrow { transform: none; }
}

/* ============================================================
   FACILITY BATCH (2026-06-22) — staging-feedback build
   Sort control · "what's blocking" popover · row restructure
   (sibling buttons, no nested-interactive) · icon back-arrow.
   Appended last so it overrides earlier rules where noted.
   ============================================================ */

/* Roster row is now a non-interactive <div> container; the open-file control
   and the verdict chip are SIBLING <button>s (never nested-interactive). */
.roster-row .who {
  appearance: none; background: transparent; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 0;
}
.roster-row .who:hover .name,
.roster-row .who:focus-visible .name {
  text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 2px;
}
button.verdict-cell {
  appearance: none; background: transparent; border: 0; margin: 0; padding: 0;
  font: inherit; cursor: pointer; text-align: left; justify-self: start;
}
button.verdict-cell.chip-pop .verdict,
button.verdict-cell.chip-pop .pill-cell { transition: box-shadow 150ms ease; }
button.verdict-cell.chip-pop:hover .verdict,
button.verdict-cell.chip-pop:hover .pill-cell {
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--blue-line);
}
/* Keyboard focus ring must clear 3:1 (WCAG 2.2 SC 1.4.11/2.4.11) — use ink, not the
   ~1.5:1 light --blue-line, and on every verdict color (red/amber/blue chips). */
button.verdict-cell.chip-pop:focus-visible { outline: none; }
button.verdict-cell.chip-pop:focus-visible .verdict,
button.verdict-cell.chip-pop:focus-visible .pill-cell {
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-primary);
}
button.verdict-cell.chip-pop::after {
  content: "▾"; font-size: 9px; color: var(--text-muted); margin-left: 5px; vertical-align: middle;
}

/* Sort control in the roster toolbar */
.roster-toolbar .toolbar-right { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.roster-toolbar .sort-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 700;
}
.roster-toolbar .view-sort {
  font-family: var(--font-ui); font-size: 12.5px; padding: 6px 26px 6px 10px;
  border: 1px solid var(--border); border-radius: 6px; background-color: var(--bg-canvas);
  color: var(--text-primary); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6B73' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.roster-toolbar .view-sort:focus { border-color: var(--teal); outline: none; }

/* "What's blocking" popover — read-only to-do list of open blockers + owner */
.blocker-pop {
  position: fixed; z-index: 200; width: 320px; max-width: calc(100vw - 24px);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(11,15,18,0.16), 0 2px 8px rgba(11,15,18,0.08);
  overflow: hidden; font-family: var(--font-ui);
}
.blocker-pop .bp-head { display: flex; align-items: baseline; gap: 6px; padding: 12px 14px 6px; }
.blocker-pop .bp-h-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.blocker-pop .bp-h-name { font-family: var(--font-display); font-size: 15px; color: var(--text-primary); font-weight: 600; }
.blocker-pop .bp-close { margin-left: auto; appearance: none; border: 0; background: transparent; color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; }
.blocker-pop .bp-close:hover { color: var(--text-primary); }
.blocker-pop .bp-status { padding: 0 14px 8px; }
.blocker-pop .bp-body { padding: 4px 14px 10px; max-height: 280px; overflow-y: auto; }
.blocker-pop .bp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blocker-pop .bp-item { display: flex; gap: 8px; align-items: flex-start; }
.blocker-pop .bp-check { width: 13px; height: 13px; margin-top: 2px; border: 1.5px solid var(--amber); border-radius: 3px; flex: none; }
.blocker-pop .bp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.blocker-pop .bp-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.blocker-pop .bp-owner { font-size: 11px; color: var(--teal-deep); font-weight: 600; }
.blocker-pop .bp-fcra { font-size: 10px; font-weight: 700; color: var(--amber-deep); text-transform: uppercase; letter-spacing: 0.04em; }
.blocker-pop .bp-item.fcra .bp-check { border-color: var(--amber-deep); background: var(--amber-tint); }
.blocker-pop .bp-why { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.blocker-pop .bp-empty { font-size: 12.5px; color: var(--text-secondary); padding: 4px 0 8px; }
.blocker-pop .bp-loading { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.blocker-pop .bp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--bg-sunken); }
.blocker-pop .bp-openfile { appearance: none; border: 0; background: transparent; color: var(--teal-deep); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.blocker-pop .bp-openfile:hover { text-decoration: underline; }
.blocker-pop .bp-doctrine { font-size: 10px; color: var(--text-muted); }

/* Icon back-arrow (was a bordered "← Back" button — founder nice-to-have) */
.drawer-back {
  border: 0; background: transparent; color: var(--text-secondary);
  font-size: 19px; line-height: 1; padding: 4px 8px; border-radius: var(--r-sm);
}
.drawer-back:hover { background: var(--bg-elevated); color: var(--text-primary); }

@media (max-width: 900px) {
  .roster-toolbar { flex-wrap: wrap; }
  .roster-toolbar .toolbar-right { width: 100%; justify-content: space-between; }
}

/* ===========================================================
   ORG VIEW (spec 2026-07-12 §5) — org → facility → file
   Critical banner, org roll-up, facility cards, the Dr. Chen
   showcase, per-facility file panels, reason tree, attestation.
   =========================================================== */

/* ---- BILL_WITHOUT_PRACTICE critical banner — unmissable ---- */
#critical-banner { margin: 14px 28px 0; }
.critical-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--red-tint); border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  border-radius: var(--r-md, 10px); padding: 12px 16px;
}
.critical-banner .cb-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: #fff; background: var(--red); padding: 3px 9px; border-radius: 5px; white-space: nowrap;
}
.critical-banner .cb-text { flex: 1 1 320px; font-size: 13px; color: var(--text-primary); line-height: 1.45; }
.critical-banner .cb-open {
  appearance: none; border: 1px solid var(--red); background: #fff; color: var(--red-deep);
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; white-space: nowrap;
}
.critical-banner .cb-open:hover { background: var(--red); color: #fff; }

/* ---- Attestation chips — the spec's exact words ---- */
.att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
  white-space: nowrap;
}
.att-chip.att-clear       { background: var(--green-tint); border-color: var(--green-line); color: var(--green-deep); }
.att-chip.att-ready       { background: #EEF3FB; border-color: #C9D8EE; color: #24518F; }
.att-chip.att-stale       { background: var(--amber-tint); border-color: var(--amber-line); color: var(--amber-deep); }
.att-chip.att-expired     { background: var(--red-tint); border-color: var(--red-line); color: var(--red-deep); }
.att-chip.att-unavailable { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-muted); }
.att-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-left: 7px; }
.att-dot.att-clear { background: var(--green); }
.att-dot.att-ready { background: #24518F; }
.att-dot.att-stale { background: var(--amber); }
.att-dot.att-expired { background: var(--red); }
.att-dot.att-unavailable { background: var(--border-strong); }

/* Legend swatches for attestation words */
.legend-item.att-ready .sw { background: #24518F; }
.legend-item.att-stale .sw { background: var(--amber); }
.legend-item.att-unavailable .sw { background: var(--border-strong); }

/* ---- Org roll-up + facility cards ---- */
.org-rollup { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.org-rollup .orp {
  font-size: 12px; color: var(--text-secondary);
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px;
}
.org-rollup .orp strong { color: var(--text-primary); font-weight: 650; margin-right: 3px; }
.org-rollup .orp.ready strong { color: var(--teal-deep); }
.org-rollup .orp.decide strong { color: #24518F; }
.org-rollup .orp.watch strong { color: var(--amber-deep); }
.org-rollup .orp.atrisk strong { color: var(--red-deep); }
.org-rollup .orp.critical { background: var(--red-tint); border-color: var(--red-line); }
.org-rollup .orp.critical strong { color: var(--red-deep); }

.org-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fac-card {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md, 10px); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  font-family: var(--font-ui);
}
.fac-card:hover { border-color: var(--teal-line); box-shadow: 0 2px 10px rgba(14, 138, 138, 0.08); transform: translateY(-1px); }
.fac-card.has-critical { border-color: var(--red-line); box-shadow: inset 3px 0 0 var(--red); }
.fac-card .fc-name { font-weight: 650; font-size: 13.5px; color: var(--text-primary); }
.fac-card .fc-meta { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.fac-card .fc-attester { font-size: 11.5px; color: var(--text-secondary); }
.fac-card .fc-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.fac-card .fcc {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border);
}
.fac-card .fcc.ready  { background: var(--teal-soft); border-color: var(--teal-line); color: var(--teal-deep); }
.fac-card .fcc.decide { background: #EEF3FB; border-color: #C9D8EE; color: #24518F; }
.fac-card .fcc.watch  { background: var(--amber-tint); border-color: var(--amber-line); color: var(--amber-deep); }
.fac-card .fcc.atrisk { background: var(--red-tint); border-color: var(--red-line); color: var(--red-deep); }
.fac-card .fcc.critical { background: var(--red); border-color: var(--red); color: #fff; }
.fac-card .fc-note { font-size: 10.5px; color: var(--amber-deep); background: var(--amber-tint); border-radius: 6px; padding: 3px 8px; align-self: flex-start; }

/* ---- The Dr. Chen showcase ---- */
.chen-portable {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-teal-wash); border: 1px solid var(--teal-line);
  border-radius: var(--r-md, 10px); padding: 10px 14px; margin: 4px 0 14px;
  font-size: 12.5px; color: var(--text-secondary);
}
.chen-portable .cp-k {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal-deep);
  background: #fff; border: 1px solid var(--teal-line); border-radius: 5px; padding: 2px 8px;
}
.chen-portable .cp-v { font-weight: 550; color: var(--text-primary); }
.chen-portable .cp-r { color: var(--text-muted); font-size: 11.5px; margin-left: auto; }
.chen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.chen-card {
  appearance: none; text-align: left; cursor: pointer; font-family: var(--font-ui);
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md, 10px); padding: 13px 14px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.chen-card:hover { border-color: var(--teal-line); box-shadow: 0 2px 10px rgba(14, 138, 138, 0.08); transform: translateY(-1px); }
.chen-card.wrong { border-color: var(--red-line); }
.chen-card .cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.chen-card .cc-fac { font-weight: 650; font-size: 13px; color: var(--text-primary); }
.chen-card .cc-lic { font-size: 11.5px; color: var(--text-secondary); font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.chen-card .cc-lic.wrong { color: var(--red-deep); }
.chen-card .cc-lic.wrong strong { font-weight: 700; }
.chen-card .cc-lic.stale { color: var(--amber-deep); }
.chen-card .cc-states { display: flex; flex-direction: column; gap: 5px; }
.chen-card .ccs { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-muted); }
.chen-card .ccs .k { min-width: 52px; }
.chen-card .cc-why { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; border-top: 1px dashed var(--border); padding-top: 8px; }
.chen-foot { margin-top: 12px; font-size: 12px; color: var(--text-muted); }

/* ---- Per-facility file panel (drawer) ---- */
.fs-doctrine { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 10px; }
.file-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.file-tab {
  appearance: none; cursor: pointer; font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 13px; display: inline-flex; align-items: center;
}
.file-tab:hover { border-color: var(--teal-line); color: var(--teal-deep); }
.file-tab.active { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.file-tab.active .att-dot { outline: 1.5px solid #fff; }

.file-panel { border: 1px solid var(--border); border-radius: var(--r-md, 10px); padding: 14px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 12px; }
.file-panel .fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.file-panel .fp-fac strong { font-size: 13.5px; color: var(--text-primary); display: block; }
.file-panel .fp-fac span { font-size: 11.5px; color: var(--text-muted); }
.file-panel .fp-policy { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.file-panel .fp-critical {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--red-tint); border: 1px solid var(--red-line); border-left: 4px solid var(--red);
  border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--text-primary); line-height: 1.45;
}
.file-panel .fp-critical .cb-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 10px; font-weight: 600;
  color: #fff; background: var(--red); padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.file-panel .fp-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.file-panel .fp-state { border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; background: var(--bg-sunken); }
.file-panel .fp-state.ready { border-color: var(--teal-line); background: var(--teal-soft); }
.file-panel .fp-state.atrisk { border-color: var(--red-line); background: var(--red-tint); }
.file-panel .fp-state.watch { border-color: var(--amber-line); background: var(--amber-tint); }
.file-panel .fp-k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 5px; }
.file-panel .fp-note { font-size: 11px; color: var(--text-secondary); line-height: 1.4; margin-top: 5px; }
.file-panel .fp-att { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 9px 12px; }
.file-panel .fp-att-meta { font-size: 11.5px; color: var(--text-secondary); flex: 1 1 220px; line-height: 1.4; }
.file-panel .fp-licence { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--teal-line); padding: 4px 0 4px 12px; }
.file-panel .fp-licence .k { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.file-panel .fp-licence .v { font-size: 13px; font-weight: 600; color: var(--text-primary); font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.file-panel .fp-licence .v .flag { color: var(--red-deep); font-size: 11px; margin-left: 6px; }
.file-panel .fp-licence .n { font-size: 11px; color: var(--text-muted); }
.file-panel .fp-licence.wrong { border-left-color: var(--red); }
.file-panel .fp-licence.wrong .v { color: var(--red-deep); }
.file-panel .fp-licence.stale { border-left-color: var(--amber); }
.file-panel .fp-billscope { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.file-panel .fp-billscope .k {
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal-deep);
  background: var(--teal-soft); border: 1px solid var(--teal-line); border-radius: 4px; padding: 1px 6px; margin-right: 7px;
}
.file-panel .fp-npdb { font-size: 10.5px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 8px; }

/* ---- Reason tree ---- */
.rt-wrap { overflow-x: auto; }
.reason-tree { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.reason-tree th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-strong); background: var(--bg-sunken);
}
.reason-tree td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); }
.reason-tree .rt-req { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.reason-tree .rt-out { min-width: 180px; }
.reason-tree .rt-mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--border-strong); }
.reason-tree tr.rt-met .rt-mark { background: var(--teal); }
.reason-tree tr.rt-notmet .rt-mark { background: var(--red); }
.reason-tree tr.rt-notmet .rt-out { color: var(--red-deep); font-weight: 550; }
.reason-tree tr.rt-decide .rt-mark { background: #24518F; }
.reason-tree tr.rt-decide .rt-out { color: #24518F; }
.reason-tree tr.rt-expiring .rt-mark { background: var(--amber); }
.reason-tree tr.rt-expiring .rt-out { color: var(--amber-deep); }
.reason-tree tr.rt-na .rt-mark { background: var(--border-strong); }
.reason-tree .rt-fresh, .reason-tree .rt-owner { white-space: nowrap; color: var(--text-muted); }
.reason-tree .rt-receipt .receipt { font-size: 10px; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .org-cards, .chen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #critical-banner { margin: 12px 16px 0; }
  .org-cards, .chen-grid { grid-template-columns: 1fr; }
  .file-panel .fp-states { grid-template-columns: 1fr; }
  .chen-portable .cp-r { margin-left: 0; }
}

/* ===========================================================
   ORG VIEW pass 2 (2026-07-13): bulletproof wordmark macron,
   view-page scoping, legibility upgrade (bigger type, more air).
   =========================================================== */

/* Wordmark macron drawn by CSS, centered over the o — deterministic in every
   font and browser. Markup: <span class="wm">R<span class="wm-o">o</span>vn</span> */
.wm .wm-o { position: relative; display: inline-block; }
.wm .wm-o::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: -0.11em;
  height: 0.075em; background: currentColor; border-radius: 2px;
}

/* View pages: org surfaces step aside; the critical banner stays (unmissable). */
body.view-page .org-section, body.view-page .org-demo { display: none; }