/* PIF Ambassador Dashboard — layout. Tokens do the identity; this file only
   arranges the header, hero, board columns, cards, drawer, and footer. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--pif-fog);
  font-family: var(--pif-font-body);
  color: var(--pif-navy);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* -------------------------------------------------------------------- login */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--pif-5);
  background: radial-gradient(1200px 600px at 50% -10%, #0a1a6b 0%, var(--pif-navy) 55%, var(--pif-navy-hi) 100%);
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--pif-paper);
  border-radius: var(--pif-r-card);
  box-shadow: var(--pif-shadow);
  overflow: hidden;
}
.auth-card .cap { height: 4px; background: var(--pif-gold); }
.auth-card .body { padding: var(--pif-6) var(--pif-5) var(--pif-5); }
.auth-card .brand { font-family: var(--pif-font-display); font-weight: 600; font-size: 20px; color: var(--pif-navy); margin: 0 0 2px; }
.auth-card .sub { margin: 0 0 var(--pif-5); }
.auth-card label {
  display: block; font-family: var(--pif-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--pif-slate); margin: var(--pif-4) 0 var(--pif-1);
}
.auth-card .actions { margin-top: var(--pif-5); }
.auth-card .pif-btn { width: 100%; }
.auth-card .link-row { margin-top: var(--pif-4); text-align: center; }
.auth-card .linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate); text-decoration: underline;
}
.auth-card .linkbtn:hover { color: var(--pif-navy); }
.msg { margin-top: var(--pif-4); padding: var(--pif-3); border-radius: var(--pif-r-ctrl); font-size: 13px; line-height: 1.4; }
.msg--error { background: #fdeceb; color: var(--pif-danger); }
.msg--ok    { background: #e7f5ef; color: var(--pif-success); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pif-5) var(--pif-6); }

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

.app-head {
  background: var(--pif-navy);
  color: #fff;
  border-bottom: 3px solid var(--pif-gold);
}
.app-head .wrap { padding-top: var(--pif-4); padding-bottom: 0; }
.head-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pif-4); flex-wrap: wrap; }
.head-id { display: flex; align-items: baseline; gap: var(--pif-3); flex-wrap: wrap; }
.head-id .inst { font-family: var(--pif-font-display); font-size: 20px; font-weight: 600; color: #fff; }
.head-id .sub  { font-family: var(--pif-font-body); font-size: 13px; color: #b9c0d6; }
.head-who { font-family: var(--pif-font-body); font-size: 13px; color: #d5dae9; display: flex; align-items: center; gap: var(--pif-3); }
.head-who b { color: #fff; font-weight: 600; }
/* The ADMIN badge is a button — it opens the admin section. Gold TEXT is fine
   here and only here: the rule is that gold never sits on a LIGHT background,
   and this is on the navy header. */
.head-who .role {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px;
  border-radius: var(--pif-r-badge); background: rgba(255,210,48,0.16); color: var(--pif-gold);
  border: 1px solid rgba(255,210,48,0.34); cursor: pointer;
}
.head-who .role:hover { background: rgba(255,210,48,0.28); border-color: var(--pif-gold); }
/* Open: solid gold with navy on it — the same inversion an active section pill
   uses, so "where am I" reads the same wherever you look. */
.head-who .role.is-active {
  background: var(--pif-gold); color: var(--pif-navy); border-color: var(--pif-gold);
}
/* The member-export count. A solid gold block with navy on it — the one way
   gold is allowed to carry meaning. Gold as TEXT at 10px would disappear even
   here. Absent entirely at zero; a grey 0 trains you to stop looking. */
.head-who .role .role-count {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--pif-gold); color: var(--pif-navy); font-variant-numeric: tabular-nums;
}
/* With the admin section open the badge is itself gold, so the count inverts
   rather than vanishing into its own background. */
.head-who .role.is-active .role-count {
  background: var(--pif-navy); color: var(--pif-gold);
}
/* The notification-centre chip. Solid gold with navy on it — the one approved
   way gold carries meaning, and the loudest thing in the header on purpose:
   it is the only control that says something is waiting for HQ. Sits beside
   the ADMIN badge rather than inside it (a button can't contain a button, and
   the count needed its own click target). */
.head-who .role--alerts {
  background: var(--pif-gold); color: var(--pif-navy); border-color: var(--pif-gold);
  font-variant-numeric: tabular-nums;
}
.head-who .role--alerts:hover { background: #ffdb57; border-color: #ffdb57; }

/* ---------------------------------------------------- notification centre */
/* Anchored under the header rather than floated over the page: it belongs to
   the chip, and a centred modal for a five-item list would be theatre. */
.alert-pop {
  /* 65: above the sticky header and nav row (both z-60), below the toast (70).
     The header is sticky at top:0, so anything at 60 or less gets painted
     under it the moment the page is scrolled. */
  position: fixed; top: 64px; right: var(--pif-4); z-index: 65; width: min(420px, calc(100vw - 32px));
  background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card);
  box-shadow: 0 12px 32px rgba(2,12,69,0.18); overflow: hidden;
}
/* The orders rule, same as every injected panel in PIF Pro. */
.alert-pop::before { content: ""; display: block; height: 3px; background: var(--pif-gold); }
.alert-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pif-3) var(--pif-3) var(--pif-2);
}
.alert-x {
  background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--pif-slate); padding: 0 2px;
}
.alert-x:hover { color: var(--pif-navy); }
.alert-list { list-style: none; margin: 0; padding: 0 0 var(--pif-2); }
.alert-row { border-top: 1px solid var(--pif-rule); padding: var(--pif-2) var(--pif-3); }
.alert-row:first-child { border-top: 0; }
/* The whole label is the button — a small arrow is a smaller target than the
   sentence next to it, and this list exists to save clicks. */
.alert-main {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pif-2);
  width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy);
}
.alert-row.is-external .alert-main { cursor: default; }
button.alert-main:hover .alert-label { text-decoration: underline; }
.alert-label { font-weight: 600; }
.alert-go { color: var(--pif-slate); flex: none; display: flex; }
/* "In PIF Pro" — this row can be counted here but only resolved there, so it
   deliberately does NOT get an arrow that would promise a screen. */
.alert-where {
  flex: none; font-family: var(--pif-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-badge); padding: 2px 6px;
}
.alert-hint { margin-top: 3px; font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); }
.alert-foot { margin-top: 5px; }
.alert-snooze {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate);
  text-decoration: underline; text-underline-offset: 2px;
}
.alert-snooze:hover { color: var(--pif-navy); }
/* A snoozed row stays visible but steps back, so she can always change her
   mind — there is no permanent dismiss anywhere in this centre. */
.alert-row.is-snoozed { background: var(--pif-fog); }
.alert-row.is-snoozed .alert-label { font-weight: 400; color: var(--pif-slate); }
.alert-empty {
  margin: 0; padding: 0 var(--pif-3) var(--pif-3);
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate);
}

.head-who .pif-btn--quiet { color: #fff; border-color: rgba(255,255,255,0.32); padding: 6px var(--pif-3); }
.head-who .pif-btn--quiet:hover:not(:disabled) { background: rgba(255,255,255,0.10); }

.preview-note {
  margin-top: var(--pif-3); font-family: var(--pif-font-body); font-size: 12px;
  color: #cdd4e8; transition: color 120ms ease;
}
.preview-note b { color: var(--pif-gold); font-weight: 600; }
.preview-note.is-saving { color: var(--pif-gold); }
.preview-note.is-saved  { color: #7ee0b4; font-weight: 600; }
.preview-note.is-error  { color: #ff9b8f; font-weight: 600; }

/* bucket tabs */
.tabs { display: flex; gap: var(--pif-1); margin-top: var(--pif-4); }
.tab {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: #c3c9dc;
  font-family: var(--pif-font-display); font-size: 14px; font-weight: 600;
  padding: var(--pif-3) var(--pif-4);
  border-radius: var(--pif-r-ctrl) var(--pif-r-ctrl) 0 0;
  border-bottom: 3px solid transparent;
  display: flex; align-items: center; gap: var(--pif-2);
}
.tab:hover { color: #fff; }
.tab.is-active { background: var(--pif-fog); color: var(--pif-navy); border-bottom-color: var(--pif-gold); }
.tab .cnt {
  font-family: var(--pif-font-body); font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.14); color: #fff;
  border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.tab.is-active .cnt { background: var(--pif-navy); color: #fff; }

/* ---------------------------------------------------------- outcome sub-filter */

.subfilter { display: flex; gap: var(--pif-2); flex-wrap: wrap; padding: var(--pif-4) 0 0; }
.chip {
  appearance: none; cursor: pointer;
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: 999px; padding: 6px var(--pif-3);
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--pif-slate); }
.chip.is-active { background: var(--pif-navy); color: #fff; border-color: var(--pif-navy); }
.chip .n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pif-slate); }
.chip.is-active .n { color: var(--pif-gold); }

/* --------------------------------------------------------------------- hero */

.hero { display: grid; grid-template-columns: auto 1fr; gap: var(--pif-5); align-items: center; padding: var(--pif-5) 0 var(--pif-4); }
.hero-num { font-family: var(--pif-font-body); font-size: 64px; font-weight: 700; line-height: 0.9; color: var(--pif-navy); font-variant-numeric: tabular-nums; }
.hero-num small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate); margin-top: var(--pif-2); }
.hero-support { font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); }
.hero-support .dot { color: var(--pif-rule); margin: 0 6px; }
.hero-support b { font-weight: 600; }

/* outcome mix bar */
.mixbar { margin-top: var(--pif-3); }
.mixbar .bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--pif-rule); }
.mixbar .seg { height: 100%; }
.mixbar .key { display: flex; gap: var(--pif-4); flex-wrap: wrap; margin-top: var(--pif-2); }
.mixbar .key span { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); display: inline-flex; align-items: center; gap: 6px; }
.mixbar .key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* -------------------------------------------------------------------- board */

/* A second, top-mounted scrollbar for .board — see renderBoard()'s own
   comment for why. Plain overflow-x:auto on a thin strip, synced by JS to
   .board's real scrollLeft; the track div inside just needs to be as wide
   as .board's content so a scrollbar of the right proportions appears. */
.board-scrollbar {
  overflow-x: auto; overflow-y: hidden;
  height: 14px; margin-bottom: var(--pif-2);
}
.board-scrollbar-track { height: 1px; }

/* "There are more stages this way." The scrollbar above can't say this, and on
   a machine with overlay scrollbars it isn't drawn at all until something is
   already being scrolled — so an ambassador never learns the columns continue.
   See renderBoard()'s own comment. No gradient fade and no shadow: the design
   system has neither, and a control beats decoration anyway. */
.board-wrap { position: relative; }
.board-more {
  text-align: right; margin-bottom: 4px;
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
}
.board-arrow {
  position: absolute; top: 30px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--pif-paper); color: var(--pif-navy);
  border: 1px solid var(--pif-rule);
}
/* ⛔ MUST come after the display:flex above. An author `display` rule beats the
   UA stylesheet's `[hidden] { display: none }`, so without this the arrows are
   drawn even when the JS has hidden them — the left one sat permanently over
   the first column. Caught in review 2026-09-18. */
.board-arrow[hidden], .board-more[hidden] { display: none; }
.board-arrow:hover { background: var(--pif-gold); border-color: var(--pif-gold); }
/* Gold as a focus ring is one of the four approved uses. */
.board-arrow:focus-visible { outline: 3px solid var(--pif-gold); outline-offset: 2px; }
.board-arrow--left  { left: -6px; }
.board-arrow--right { right: -6px; }

.board {
  display: flex; gap: var(--pif-3); overflow-x: auto; padding-bottom: var(--pif-4);
  scroll-snap-type: x proximity;
}
.col { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
.col.is-empty { flex-basis: 300px; opacity: 0.72; }
.col-head {
  position: sticky; top: 0;
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card) var(--pif-r-card) 0 0;
  border-bottom: none; padding: var(--pif-3);
}
.col.is-empty .col-head { background: var(--pif-fog); }
.col-head .top { display: flex; align-items: baseline; gap: var(--pif-2); }
.col-head .num { font-family: var(--pif-font-display); font-size: 12px; font-weight: 700; color: var(--pif-slate); font-variant-numeric: tabular-nums; }
.col-head .nm { font-family: var(--pif-font-display); font-size: 14px; font-weight: 600; color: var(--pif-navy); }
.col-head .meta { display: flex; align-items: center; gap: var(--pif-2); margin-top: 6px; }
.col-head .meta .c { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); }
.col-head .meta .v { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); margin-left: auto; font-variant-numeric: tabular-nums; }
.col-head .today-badge { font-family: var(--pif-font-display); font-size: 10px; font-weight: 700; background: var(--pif-gold); color: var(--pif-navy); border-radius: var(--pif-r-badge); padding: 2px 6px; }
.col-body {
  background: var(--pif-fog); border: 1px solid var(--pif-rule); border-top: none;
  border-radius: 0 0 var(--pif-r-card) var(--pif-r-card);
  padding: var(--pif-2); display: flex; flex-direction: column; gap: var(--pif-2);
  min-height: 80px; flex: 1;
}
.col-note { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-warning); padding: var(--pif-3); text-align: center; }

/* unsorted grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pif-3); }

/* --------------------------------------------------------------------- card */

.card {
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-card); padding: var(--pif-3);
  cursor: pointer; position: relative; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.card:hover { border-color: var(--pif-slate); }
.card.is-today { box-shadow: inset 3px 0 0 var(--pif-gold); }
.card.is-parked { opacity: 0.78; }
/* Joined Savvy — a light gold wash across the whole card (Lauren, 2026-09-18).
   The cue is "this family has considered buying", so it has to be readable
   while scanning a column, not one badge among six.

   ⚠️ This deliberately reuses --pif-gold-tint, which is also the selected-row
   surface. Gold as a BACKGROUND with navy on top is ~12:1 and fine; what is
   never allowed is gold as text. Selection keeps its own 3px orders rule, and
   the sheet's selected row gained a gold band (below) so it still reads on an
   already-tinted row. */
.card.is-savvy { background: var(--pif-gold-tint); }
/* A slight blue tint (Lauren, 2026-09-05) — a card sourced from a VA Snapshot,
   never the gold "orders rule" (that means active/selected elsewhere).
   ⚠️ Declared AFTER .is-savvy on purpose. A family who joined Savvy AND came in
   through a VA Snapshot keeps the blue: both tints say "has thought about
   buying", and the snapshot is the further-along, rarer one, so it wins the one
   surface rather than being painted over. */
.card.is-va-snapshot { background: #eef5ff; }
.card .nm { font-family: var(--pif-font-display); font-size: 15px; font-weight: 600; color: var(--pif-navy); }
.card .route { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); margin-top: 2px; }
.card .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--pif-2); }
.card .flag { font-family: var(--pif-font-body); font-size: 12px; margin-top: var(--pif-2); display: flex; align-items: center; gap: 5px; }
.card .flag.skipped, .card .flag.silent, .card .flag.email { color: var(--pif-danger); }
.card .flag::before { content: "▲"; font-size: 9px; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--pif-3); gap: var(--pif-2); }
.dots { display: flex; gap: 3px; align-items: center; }
.dots i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dots i.done { background: var(--pif-success); }
.dots i.skipped { background: var(--pif-gold); }
.dots i.todo { background: var(--pif-rule); }
.dots i.na { background: transparent; border: 1px dashed var(--pif-rule); }
.clock { text-align: right; }
.clock .v { font-family: var(--pif-font-body); font-size: 15px; font-weight: 700; color: var(--pif-navy); font-variant-numeric: tabular-nums; line-height: 1; }
.clock.is-urgent .v { color: var(--pif-danger); }
.clock .l { font-family: var(--pif-font-body); font-size: 10px; color: var(--pif-slate); text-transform: uppercase; letter-spacing: 0.04em; }

/* ------------------------------------------------- engagement (warm / hot) */
/* Hybrid, approved 2026-08-29: WARM is tinted, HOT is filled. Escalation is a
   change in WEIGHT as well as hue, so it reads without colour — greyscale
   print, colour-blind vision — and a board that is a third hot stays calm.
   ⛔ Mirrored in src/content/panel.css; keep the two in step. */
.eng {
  font-family: var(--pif-font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  display: inline-block; white-space: nowrap;
}
.eng--warm { background: #fdf6ea; color: var(--pif-warning); }
.eng--hot  { background: var(--pif-danger); color: #fff; }
/* Set by hand rather than derived. A dotted underline is the quietest mark that
   still says "somebody decided this" — it must not compete with the tier. */
.eng.is-manual { text-decoration: underline dotted; text-underline-offset: 2px; }

/* In the All members grid the badge sits on its OWN LINE inside the Member cell,
   never as a new column. ⛔ That table runs 1190px in a 1190px viewport with zero
   side scroll — a new column would break it, and a header word sets a column's
   minimum width regardless of what you put in the `th` (see CLAUDE.md). A badge
   is narrower than the email address already in this cell, so it costs height
   and no width at all. */
.sheet-eng { margin: 2px 0; }
.sheet-eng .eng { font-size: 10px; padding: 1px 6px; }

/* small outcome tag colors */
.tag-outcome { background: var(--pif-navy); color: #fff; }
.tag-tbd { background: var(--pif-fog); color: var(--pif-warning); border: 1px solid var(--pif-warning); }

/* ------------------------------------------------------------------- footer */

.analytics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pif-4); margin-top: var(--pif-5); }
/* Incoming and outgoing render no panels (renderAnalytics returns early). An
   empty grid is still 0px tall but its margin-top would leave a gap under the
   board, so collapse it outright. */
.analytics:empty { display: none; }
.panel { background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card); border-top: 3px solid var(--pif-gold); padding: var(--pif-4); }
.panel h3 { font-family: var(--pif-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate); margin: 0 0 var(--pif-3); }
.panel .big { font-family: var(--pif-font-body); font-size: 30px; font-weight: 700; color: var(--pif-navy); font-variant-numeric: tabular-nums; line-height: 1; }
.panel .line { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate); margin-top: var(--pif-2); }
.panel .line b { color: var(--pif-navy); font-weight: 600; }

/* ---------------------------------------------------------------- view as */
/* Deliberately loud and pinned to the top of the window. The failure this mode
   invites is FORGETTING you are in it, so it is not a subtle chip — and it
   renders outside the role gating, so viewing as an ambassador (who has no
   Admin badge) still leaves an obvious way back. */
#viewas-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--pif-3); flex-wrap: wrap;
  padding: var(--pif-2) var(--pif-4);
  background: var(--pif-navy); color: #fff;
  border-bottom: 3px solid var(--pif-gold);
  font-family: var(--pif-font-body); font-size: 13px;
}
#viewas-bar .va-label {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pif-gold);
}
#viewas-bar .va-name { font-weight: 700; }
#viewas-bar .va-note { color: rgba(255,255,255,0.72); }
/* Her own bases, when she has 2+ — the toggle her own login gets (0051). */
#viewas-bar .va-pick {
  font-family: var(--pif-font-body); font-size: 13px; font-weight: 700;
  color: var(--pif-navy); background: var(--pif-paper);
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl);
  padding: 4px var(--pif-2); cursor: pointer; max-width: 60vw;
}
#viewas-bar .va-exit {
  margin-left: auto; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 5px var(--pif-3); border-radius: var(--pif-r-ctrl);
  background: var(--pif-gold); color: var(--pif-navy); border: none;
}
#viewas-bar .va-exit:hover { background: #f2c318; }

/* View as is read-only, so nothing on the board should look clickable-to-edit.
   The guard in commit() is what actually enforces it; this only removes the
   invitation. */
body.is-viewas .pif-input,
body.is-viewas .pif-select,
body.is-viewas textarea { opacity: 0.75; }

.user-viewas { margin-top: var(--pif-2); }

/* ------------------------------------------------------------- working as */
/* A VA or team member acting for an ambassador. Same weight as View as, and
   deliberately a different colour: View as is HQ LOOKING at someone's board and
   saves nothing; this is the person's actual job and every write lands on a real
   family's record. Two modes that behave differently must not look the same.
   The picker is IN the bar rather than in a menu — whose members are on screen
   is the question this bar exists to answer, so changing the answer belongs
   next to it. */
#workingas-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--pif-3); flex-wrap: wrap;
  padding: var(--pif-2) var(--pif-4);
  background: var(--pif-paper); color: var(--pif-navy);
  border-bottom: 3px solid var(--pif-gold);
  font-family: var(--pif-font-body); font-size: 13px;
}
#workingas-bar .wa-label {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pif-slate);
}
#workingas-bar .wa-pick {
  font-family: var(--pif-font-body); font-size: 13px; font-weight: 700;
  color: var(--pif-navy); background: var(--pif-paper);
  border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl);
  padding: 4px var(--pif-2); cursor: pointer; max-width: 60vw;
}
#workingas-bar .wa-where { color: var(--pif-slate); }
#workingas-bar .wa-name { font-weight: 700; }
#workingas-bar .wa-note { margin-left: auto; color: var(--pif-slate); }

/* ------------------------------------------------------------- handoff note */
/* Unseen destination-base handoffs (migration 0052). Quiet and inline — a
   heads-up, not a mode she's in, so unlike View as / Working as it is NOT a
   sticky body-level bar; it lives in the header flow and scrolls away like
   the rest of it. The gold rule on the left is the one signature accent
   (CLAUDE.md's "orders rule"), reserved here because this genuinely is new,
   actionable information, not decoration. */
.handoff-note {
  display: flex; align-items: center; gap: var(--pif-3); flex-wrap: wrap;
  margin: var(--pif-2) 0; padding: var(--pif-2) var(--pif-3);
  background: var(--pif-fog); border-left: 3px solid var(--pif-gold);
  border-radius: var(--pif-r-ctrl);
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
}
.handoff-count {
  font-family: var(--pif-font-display); font-weight: 700; font-size: 13px;
  background: var(--pif-navy); color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.handoff-text { flex: 1 1 auto; }
.handoff-seen { margin-left: auto; }

/* -------------------------------------------------------------- admin tabs */

.admin-tabs { display: flex; gap: var(--pif-2); margin: var(--pif-3) 0 var(--pif-4); flex-wrap: wrap; }
.admin-tab {
  font-family: var(--pif-font-body); font-size: 13px; font-weight: 600;
  padding: 6px var(--pif-3); border-radius: 999px; cursor: pointer;
  background: var(--pif-paper); color: var(--pif-navy); border: 1px solid var(--pif-rule);
}
.admin-tab:hover { border-color: var(--pif-slate); }
.admin-tab.is-active { background: var(--pif-navy); color: #fff; border-color: var(--pif-navy); }
.admin-lede { font-size: 13px; color: var(--pif-slate); margin: 0 0 var(--pif-3); max-width: 62ch; }

/* -------------------------------------------------------------- admin users */

.user-list, .bin-list { list-style: none; margin: 0; padding: 0; }
.user-item { padding: var(--pif-3) 0; border-bottom: 1px solid var(--pif-rule); }
.user-item:last-child { border-bottom: none; }
.user-main, .bin-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--pif-4);
}
.bin-row { padding: var(--pif-3) 0; border-bottom: 1px solid var(--pif-rule); }
.bin-row:last-child { border-bottom: none; }
.user-who, .bin-who { min-width: 0; }
.user-name, .bin-title { font-size: 14px; font-weight: 600; color: var(--pif-navy); }
.user-sub, .bin-sub { font-size: 12px; color: var(--pif-slate); margin-top: 2px; }
/* Your own row. A quiet marker, not a badge — it is a fact, not a status. */
.user-you {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
}
.user-role { flex: 0 0 auto; width: 220px; max-width: 46%; text-align: right; }
.user-role .pif-select { width: 100%; }
.user-role .pif-select:disabled { opacity: 0.55; cursor: not-allowed; }
.user-hint { font-size: 11px; color: var(--pif-slate); margin-top: 4px; line-height: 1.35; }

/* ------------------------------------------------------------ admin access */

/* The scope half of a login. It is the ACTIVE part of the row — the thing being
   edited — so it carries the orders rule and the gold tint, the same signature
   an active row on the board gets. Gold as a surface with navy on top, never
   gold type. */
.user-access {
  margin-top: var(--pif-3);
  padding: var(--pif-3);
  background: var(--pif-gold-tint);
  border-left: 3px solid var(--pif-gold);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0;
}
.user-access .pif-eyebrow { display: block; margin-bottom: var(--pif-2); }
.grant-line { display: flex; align-items: baseline; gap: var(--pif-2); margin-bottom: var(--pif-2); flex-wrap: wrap; }
.grant-kind {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
  flex: 0 0 auto; min-width: 84px;
}
.grant-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pif-2); }
.grant-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-navy);
}
.grant-x {
  border: none; background: none; cursor: pointer; line-height: 1;
  font-size: 15px; color: var(--pif-slate); padding: 0 3px; border-radius: 999px;
}
.grant-x:hover { color: var(--pif-navy); background: var(--pif-fog); }
.grant-add { display: flex; gap: var(--pif-2); flex-wrap: wrap; margin-top: var(--pif-2); }
.grant-add .pif-select { flex: 1 1 200px; min-width: 0; }
.grant-empty, .grant-note, .grant-meaning {
  font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate);
  margin: 0; line-height: 1.4;
}
.grant-meaning { margin-top: var(--pif-2); }

@media (max-width: 720px) {
  .user-main, .bin-row { flex-direction: column; gap: var(--pif-2); }
  .user-role { width: 100%; max-width: none; text-align: left; }
}

/* ------------------------------------------------------------- admin access */

.acc-users { list-style: none; margin: var(--pif-4) 0 0; padding: 0; }
.acc-user { padding: var(--pif-3) 0; border-bottom: 1px solid var(--pif-rule); }
.acc-user:last-child { border-bottom: none; }
.acc-head { display: flex; align-items: baseline; gap: var(--pif-2); }
.acc-person { font-size: 14px; font-weight: 600; color: var(--pif-navy); }
.acc-role {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
}
.acc-list { list-style: none; margin: var(--pif-2) 0 0; padding: 0; }

/* One grant. The orders rule on the left carries the state — gold for a working
   grant, the same signature an active row gets; red only when it reaches
   nothing. ⛔ The state is ALSO carried by the words in .acc-who ("matches
   nothing"), never by colour alone. */
.acc-row {
  display: flex; align-items: baseline; gap: var(--pif-3);
  padding: 6px var(--pif-3); margin-bottom: 4px;
  border-left: 3px solid var(--pif-gold); background: var(--pif-fog);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0;
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
}
.acc-row.is-empty { border-left-color: var(--pif-rule); }
.acc-row.is-dead  { border-left-color: #b3261e; background: #fdf3f2; }
.acc-kind {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
  flex: 0 0 76px;
}
.acc-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.acc-count { color: var(--pif-slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-who { color: var(--pif-slate); flex: 0 0 auto; max-width: 34%; text-align: right; }
.acc-row.is-dead .acc-who { color: #b3261e; font-weight: 600; }
.acc-none { font-size: 12px; color: var(--pif-slate); margin: var(--pif-2) 0 0; }

@media (max-width: 720px) {
  .acc-row { flex-wrap: wrap; gap: var(--pif-2); }
  .acc-name { flex: 1 1 100%; }
  .acc-who { max-width: none; text-align: left; }
}

/* ------------------------------------------------------------- admin health */

/* The verdict block. Status is carried by the LABEL WORD first and the colour
   second — never colour alone (colour-blind readers, greyscale screenshots).
   The 3px left rule is the orders rule, same signature as an active row. */
.health-verdict {
  border: 1px solid var(--pif-rule);
  border-left: 3px solid var(--pif-slate);
  border-radius: var(--pif-r-card);
  background: var(--pif-paper);
  padding: var(--pif-4) var(--pif-5);
  margin-top: var(--pif-4);
}
.health-verdict .hv-label {
  font-family: var(--pif-font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pif-slate);
  margin-bottom: var(--pif-2);
}
.health-verdict .hv-line {
  font-size: 18px; font-weight: 600; color: var(--pif-navy); margin: 0;
}
.health-verdict .hv-hint {
  font-size: 13px; color: var(--pif-slate); margin: var(--pif-2) 0 0;
}
/* Success stays quiet on purpose: "everything is fine" is not news and should
   not compete with the board for attention. */
.health-verdict.is-success { border-left-color: var(--pif-success); }
.health-verdict.is-success .hv-label { color: var(--pif-success); }
.health-verdict.is-warning { border-left-color: var(--pif-warning); }
.health-verdict.is-warning .hv-label { color: var(--pif-warning); }
.health-verdict.is-danger  { border-left-color: var(--pif-danger); background: #fdf6f5; }
.health-verdict.is-danger .hv-label { color: var(--pif-danger); }

.health-stats { margin-top: var(--pif-4); }

.health-section { margin-top: var(--pif-5); }
.health-list { list-style: none; margin: var(--pif-2) 0 0; padding: 0; }
.health-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 2fr);
  gap: var(--pif-3);
  align-items: baseline;
  padding: var(--pif-3) 0;
  border-bottom: 1px solid var(--pif-rule);
  font-size: 13px;
}
.health-list li:last-child { border-bottom: none; }
.health-list .hl-who  { font-weight: 600; color: var(--pif-navy); }
.health-list .hl-base { color: var(--pif-slate); }
.health-list .hl-why  { color: var(--pif-danger); font-variant-numeric: tabular-nums; }

.health-note {
  font-size: 13px; color: var(--pif-slate);
  margin-top: var(--pif-4);
}
.health-why {
  border-top: 1px solid var(--pif-rule);
  padding-top: var(--pif-3);
  max-width: 62ch;
}

@media (max-width: 720px) {
  .health-list li { grid-template-columns: 1fr; gap: var(--pif-1); }
}

/* -------------------------------------------------------------------- drawer */

.drawer-backdrop { position: fixed; inset: 0; background: rgba(2,12,69,0.34); display: flex; justify-content: flex-end; z-index: 40; }
.drawer {
  width: min(440px, 94vw); height: 100%; background: var(--pif-paper);
  box-shadow: var(--pif-shadow); overflow-y: auto; animation: slidein 160ms ease;
}
@keyframes slidein { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.drawer .cap { height: 4px; background: var(--pif-gold); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pif-3); padding: var(--pif-4) var(--pif-5) var(--pif-3); border-bottom: 1px solid var(--pif-rule); }
.drawer-head .route { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate); margin-top: 2px; }
.drawer .close { appearance: none; border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--pif-slate); cursor: pointer; }
.drawer-body { padding: var(--pif-4) var(--pif-5) var(--pif-6); }
.drawer-body .section { margin-top: var(--pif-5); }
.detail-sub { font-family: var(--pif-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate); margin-bottom: var(--pif-2); }

.next-headline { background: var(--pif-gold-tint); border: 1px solid var(--pif-gold); border-radius: var(--pif-r-card); padding: var(--pif-3) var(--pif-4); }
.next-headline .k { font-family: var(--pif-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-warning); }
.next-headline .v { font-family: var(--pif-font-body); font-size: 16px; font-weight: 600; color: var(--pif-navy); margin-top: 2px; }

.draft { background: var(--pif-fog); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card); padding: var(--pif-3) var(--pif-4); font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); line-height: 1.5; }
.draft-actions { display: flex; gap: var(--pif-2); margin-top: var(--pif-2); }

.why { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate); line-height: 1.5; }
.why .flag { color: var(--pif-danger); font-weight: 600; }

/* outcome / bucket selectors */
.opt-row { display: flex; gap: var(--pif-2); flex-wrap: wrap; }
.opt {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl);
  padding: 10px var(--pif-3); font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
  text-align: center;
}
.opt:hover { border-color: var(--pif-slate); }
.opt.is-active { background: var(--pif-navy); color: #fff; border-color: var(--pif-navy); }
.opt.big { padding: var(--pif-4); font-family: var(--pif-font-display); font-weight: 600; font-size: 14px; }

/* ladder pills */
.ladder { display: flex; flex-direction: column; gap: 6px; }
.pill {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: var(--pif-3);
  background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-ctrl);
  padding: 10px var(--pif-3); font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); width: 100%;
}
.pill .mk { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.pill.done  { background: #eafaf3; border-color: var(--pif-success); }
.pill.done .mk  { background: var(--pif-success); color: #fff; }
.pill.skipped { background: var(--pif-gold-tint); border-color: var(--pif-gold); }
.pill.skipped .mk { background: var(--pif-gold); color: var(--pif-navy); }
.pill.todo .mk { background: var(--pif-fog); color: var(--pif-slate); border: 1px solid var(--pif-rule); }
.pill.na { opacity: 0.45; cursor: not-allowed; }
.pill.na .mk { background: transparent; border: 1px dashed var(--pif-rule); color: var(--pif-slate); }
.pill .stnum { font-size: 11px; color: var(--pif-slate); font-variant-numeric: tabular-nums; margin-left: auto; }

/* editable details */
.edit-field { margin-bottom: var(--pif-3); display: block; }
.edit-field > span {
  display: block; font-family: var(--pif-font-body); font-size: 12px;
  color: var(--pif-slate); margin-bottom: 4px;
}
/* A hint that sits BELOW its input. Same element as the label above it, so the
   rule above already claimed it — this only has to flip the spacing and drop it
   a size, or it reads as a second label for the next field down. */
.edit-field > span.field-hint {
  font-size: 11.5px; line-height: 1.4; margin: 5px 0 0;
}
/* The drawer's free-text note. Vertical resize only — a horizontal drag would
   push the drawer's own layout around. */
.drawer-note { resize: vertical; min-height: 84px; line-height: 1.45; }
/* The line under the pipeline switch. Sits below its buttons, so it needs the
   same drop-and-shrink the field hints get rather than reading as a heading. */
.resort-hint { font-size: 11.5px; line-height: 1.4; margin: 6px 0 0; }

.housing-row { display: flex; gap: var(--pif-2); }
.housing-row .hz {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-navy);
}
.housing-row .rank { width: 100%; padding: 7px var(--pif-2); }
.two-col { display: flex; gap: var(--pif-2); }
.two-col .edit-field { flex: 1; min-width: 0; }

/* responding-in-messenger toggle + badge */
.status-toggle { background: var(--pif-fog); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card); padding: var(--pif-3); }
.check-row { display: flex; align-items: flex-start; gap: var(--pif-2); cursor: pointer; }
.check-row input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--pif-success); flex: 0 0 auto; cursor: pointer; }
.check-row span { font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); }
.tag-responding { background: #e7f5ef; color: var(--pif-success); }

/* captured join answers */
.qa { border-top: 1px solid var(--pif-rule); padding: var(--pif-3) 0; }
.qa:first-of-type { border-top: none; padding-top: 0; }
.qa .q { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); margin-bottom: 2px; }
.qa .a { font-family: var(--pif-font-body); font-size: 14px; color: var(--pif-navy); white-space: pre-wrap; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--pif-4); }
.facts dt { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate); }
.facts dd { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); margin: 0; }

.act-row { display: flex; gap: var(--pif-2); flex-wrap: wrap; margin-top: var(--pif-3); }

/* Welcome sent (B4) — once it's done it reads as a fact, not a control. */
.welcome-done { font-family: var(--pif-font-body); font-size: 13px; align-self: center; }

/* History (B5) — same 1px-rule rhythm as .qa above, no shadows, no gold. */
.hist-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pif-3);
  border-top: 1px solid var(--pif-rule); padding: 6px 0;
}
.hist-row:first-of-type { border-top: none; padding-top: 0; }
.hist-what { font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); }
.hist-when { font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate); white-space: nowrap; }
/* "Ashlee (for Kinsey)" — only present when somebody acted on the ambassador's
   behalf. Quiet: it qualifies the action, it isn't a second action. */
.hist-who { font-size: 12px; color: var(--pif-slate); }
/* A captured note's own body (0051) — nothing else in the row shows what it
   said, so it wraps onto its own full-width line (flex-wrap on .hist-row is
   what lets 100% drop below the what/when pair). */
.hist-note { flex: 1 1 100%; font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy); white-space: pre-wrap; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: var(--pif-3); }
  .analytics { grid-template-columns: 1fr; }
  .col, .col.is-empty { flex-basis: 82vw; }
  .col.is-empty { flex-basis: 40px; }
  .col.is-empty .col-head .nm, .col.is-empty .col-body { display: none; }
}

/* Welcome-messages editor (ambassador-authored opening drafts) */
.wmodal-bk { position: fixed; inset: 0; background: rgba(2, 12, 69, 0.34);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: var(--pif-4); }
.wmodal { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card);
  box-shadow: var(--pif-shadow); padding: var(--pif-5); }
.wmodal-cap { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pif-gold);
  border-radius: var(--pif-r-card) var(--pif-r-card) 0 0; }
.wmodal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pif-3); }
.wmodal-head .close { appearance: none; border: none; background: transparent; font-size: 24px;
  line-height: 1; color: var(--pif-slate); cursor: pointer; }
.wmodal-help { font-size: 13px; color: var(--pif-slate); margin: 4px 0 0; }
.wmodal-help code { background: var(--pif-fog); padding: 1px 4px; border-radius: 4px; }
.wmodal-lab { display: block; font-weight: 600; color: var(--pif-navy); margin: var(--pif-4) 0 6px; }
.wmodal-ta { width: 100%; resize: vertical; font: inherit; line-height: 1.4; }
.wmodal-actions { display: flex; align-items: center; gap: var(--pif-3); margin-top: var(--pif-4); }
.wmodal-status { font-size: 13px; color: var(--pif-slate); }
.wmodal-status.err { color: var(--pif-danger); }

/* ------------------------------------------------- All members sheet (bucket "all")
 * A flat, sortable grid of every contact. Read-only: a row click opens the same
 * drawer the board cards open. Gold appears exactly once here — the orders rule
 * on the selected row — per the design system.
 */

.sheet-wrap { border: 1px solid var(--pif-rule); border-radius: var(--pif-r-card); overflow: hidden; background: var(--pif-paper); }

.sheet-toolbar {
  display: flex; align-items: flex-end; gap: var(--pif-3); flex-wrap: wrap;
  padding: var(--pif-4); background: var(--pif-fog);
  border-bottom: 1px solid var(--pif-rule);
}
.sheet-field { display: flex; flex-direction: column; gap: var(--pif-1); }
.sheet-field label {
  font-family: var(--pif-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pif-slate);
}
.sheet-input { min-width: 240px; width: auto; }
.sheet-select { min-width: 146px; width: auto; }
.sheet-spacer { flex: 1 1 auto; }

.sheet-count {
  padding: var(--pif-2) var(--pif-4); background: var(--pif-fog);
  border-bottom: 1px solid var(--pif-rule); font-size: 13px; color: var(--pif-slate);
}
.sheet-count b { color: var(--pif-navy); font-variant-numeric: tabular-nums; }

.sheet-scroll { overflow: auto; max-height: 660px; }

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

.sheet-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--pif-navy); color: #fff;
  font-family: var(--pif-font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left; white-space: nowrap;
  padding: 0; border-bottom: 1px solid var(--pif-navy);
}
.sheet-table thead th button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 5px;
  padding: var(--pif-3); width: 100%; box-sizing: border-box;
}
.sheet-table thead th button:hover { background: rgba(255, 255, 255, 0.08); }
/* A header with no sort control (the Loan officer home's Connected grid,
   which has nothing to sort yet) — same padding a button wrapper would give,
   without faking an interactive control that does nothing. */
.sheet-table thead th.lo-th-plain { padding: var(--pif-3); }
.sheet-table thead th .caret { color: var(--pif-gold); font-size: 9px; opacity: 0; }
.sheet-table thead th.is-sorted { background: var(--pif-navy-hi); }
.sheet-table thead th.is-sorted .caret { opacity: 1; }

/* Group banners ("Housing 1–3", "Progress") sit on the first header row; their
 * sub-headers stick directly beneath. The offset is measured at runtime, not
 * hardcoded — the banner's height shifts when Archivo finishes loading, and a
 * stale number leaves a seam that body rows scroll through. */
.sheet-table thead tr.grouped th {
  font-size: 10px; letter-spacing: 0.08em; padding: var(--pif-2) var(--pif-3);
  color: #9fa8c4; background: var(--pif-navy-hi);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10); top: 0;
}
.sheet-table thead tr.cols th { top: var(--sheet-group-h, 28px); }
.sheet-table thead th.group-start { border-left: 1px solid rgba(255, 255, 255, 0.16); }

/* Turned headers. Seven columns hold a single character each; written across,
 * the word set the column width ("Responding" alone forced 107px) and pushed the
 * table 650px wider than the window. On its side each column is ~34px and keeps
 * the real word rather than an abbreviation to decode. */
.sheet-table th.c-vert { width: 34px; }
.sheet-table th.c-vert button {
  flex-direction: column-reverse; align-items: center; gap: var(--pif-1);
  padding: var(--pif-2) var(--pif-1); min-height: 96px;
}
.sheet-table th.c-vert .vt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.sheet-table th.c-vert .caret { font-size: 8px; }

.sheet-table th.c-num, .sheet-table th.c-date, .sheet-table th.c-last { white-space: normal; }
.sheet-table th.c-num  { width: 62px; }
.sheet-table th.c-date { width: 96px; }
.sheet-table th.c-last { width: 90px; }
.sheet-table th.c-base { width: 76px; }
/* Arrives / Departs: the month stacks over the year and the header is turned, so
 * the column is narrow — centre the pair under it. */
.sheet-table td.c-arr { text-align: center; padding-left: var(--pif-2); padding-right: var(--pif-2); }
.sheet-table th.c-num button { padding: var(--pif-2) 6px; justify-content: center; text-align: center; line-height: 1.15; white-space: normal; }
.sheet-table th.c-date button, .sheet-table th.c-last button { padding: var(--pif-3) var(--pif-2); }

/* The member column is the anchor you scroll sideways against. */
.sheet-table th.sticky-col, .sheet-table td.sticky-col {
  position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--pif-rule);
}
.sheet-table thead th.sticky-col { z-index: 4; }
.sheet-table td.sticky-col { background: var(--pif-paper); }

.sheet-table tbody td {
  padding: var(--pif-3); border-bottom: 1px solid var(--pif-rule);
  vertical-align: top; white-space: nowrap;
}
.sheet-table tbody td.group-start { border-left: 1px solid var(--pif-rule); }
.sheet-table td.c-stat, .sheet-table td.c-rank { text-align: center; padding-left: var(--pif-1); padding-right: var(--pif-1); }
.sheet-table td.c-num { text-align: center; padding-left: 6px; padding-right: 6px; }
.sheet-table td.c-date, .sheet-table td.c-last { padding-left: var(--pif-2); padding-right: var(--pif-2); }

.sheet-table tbody tr { cursor: pointer; }
/* Joined Savvy (Lauren, 2026-09-18) — see .card.is-savvy. Declared BEFORE the
   hover rule so hovering a Savvy row still lifts to fog; a row that cannot
   answer the pointer reads as disabled. */
.sheet-table tbody tr.is-savvy td { background: var(--pif-gold-tint); }
.sheet-table tbody tr:hover td { background: var(--pif-fog); }

/* The orders rule — 3px gold down the left edge of the selected row.
   ⚠️ Selection and "joined Savvy" now share one surface colour, so selection
   can no longer be carried by the tint alone: a Savvy row is already tinted,
   and clicking it would have changed nothing at all. The 1px gold band top and
   bottom is what says "this is the row the drawer is showing", on either
   background. Gold as a rule is allowed; gold as text never is. */
.sheet-table tbody tr.is-selected td {
  background: var(--pif-gold-tint);
  box-shadow: inset 0 1px 0 var(--pif-gold), inset 0 -1px 0 var(--pif-gold);
}
.sheet-table tbody tr.is-selected td.sticky-col {
  box-shadow: inset 3px 0 0 var(--pif-gold), inset 0 1px 0 var(--pif-gold), inset 0 -1px 0 var(--pif-gold);
}

.sheet-table .nm { font-family: var(--pif-font-display); font-size: 14px; font-weight: 600; color: var(--pif-navy); }
.sheet-table .sub { font-size: 12px; color: var(--pif-slate); margin-top: 1px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.sheet-table .sub a { color: var(--pif-slate); text-decoration: underline; text-underline-offset: 2px; }
.sheet-table .sub a:hover { color: var(--pif-navy); }
.sheet-table .num { font-variant-numeric: tabular-nums; }

/* "Y" reads as a filled chip so the eye catches it scanning a column; "no" is a
 * quiet dash rather than a competing N. */
.sheet-table .yn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; border-radius: var(--pif-r-badge);
  font-family: var(--pif-font-display); font-size: 11px; font-weight: 600;
}
.sheet-table .yn--y { background: var(--pif-navy); color: #fff; }
.sheet-table .yn--n { color: #b4bacb; }

/* Housing rank 1–3: the #1 choice is filled, 2 and 3 sit back. */
.sheet-table .rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--pif-r-badge);
  font-variant-numeric: tabular-nums; font-size: 12px;
}
.sheet-table .rank--1 { background: var(--pif-navy); color: #fff; font-weight: 600; }
.sheet-table .rank--x { color: var(--pif-slate); }
.sheet-table .rank--none { color: #ccd1de; }

.sheet-table .tbd { color: var(--pif-warning); font-weight: 600; }
.sheet-table .silent { color: var(--pif-danger); }
.sheet-table .never { color: var(--pif-slate); }

.sheet-table .note {
  max-width: 220px; white-space: normal; color: var(--pif-slate); font-size: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sheet-table .note--empty { color: #c2c8d6; }

/* -------------------------------------------------------------- admin bases */
/* Per-base ambassador settings (migration 0039). Same vocabulary as the access
   panel above: the orders rule carries "this is the one you are working on",
   and every state is also said in words — never colour alone. */

.base-users { list-style: none; margin: var(--pif-4) 0 0; padding: 0; }
.base-user { padding: var(--pif-3) 0; border-bottom: 1px solid var(--pif-rule); }
.base-user:last-child { border-bottom: none; }
.base-user-head {
  display: flex; align-items: baseline; gap: var(--pif-2);
  flex-wrap: wrap; margin-bottom: var(--pif-2);
}
.base-user-head .pif-select { width: auto; margin-left: auto; max-width: 240px; }
.base-none, .base-empty {
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate);
  margin: 0 0 0 auto;
}
.base-empty { margin: var(--pif-2) 0 0; }

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

/* Closed, this is one row of the same shape as a grant chip. Open, the gold
   rule runs the whole height of the editor — the signature element, and the
   only thing on the panel that says which base you are editing. */
.base-row {
  border-left: 3px solid var(--pif-rule); background: var(--pif-fog);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0;
  margin-bottom: 4px;
}
.base-row.is-open { border-left-color: var(--pif-gold); background: var(--pif-gold-tint); }

.base-head {
  display: flex; align-items: baseline; gap: var(--pif-3);
  width: 100%; padding: 8px var(--pif-3);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-navy);
}
.base-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.base-state { color: var(--pif-slate); white-space: nowrap; }

.base-editor {
  padding: 0 var(--pif-3) var(--pif-3);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pif-3);
}
.base-field { display: block; }
/* Welcome copy is prose and gets the full width; the links sit two-up. */
.base-field:has(textarea) { grid-column: 1 / -1; }
.base-label {
  display: block; margin-bottom: 4px;
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
}
.base-field textarea.pif-input { resize: vertical; }
.base-editor-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--pif-3);
}
.base-saved {
  font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-slate);
  margin-right: auto;
}

@media (max-width: 720px) {
  .base-editor { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Admin → Users: add a login -------------------------------------- */
/* The orders rule on the left, same as every other bounded block. */
.user-new {
  border: 1px solid var(--pif-rule); border-left: 3px solid var(--pif-gold);
  border-radius: var(--pif-r-card); padding: var(--pif-4);
  margin-bottom: var(--pif-4); background: var(--pif-paper);
}
.user-new--done { background: var(--pif-gold-tint); }
.user-new-line { margin: 4px 0 var(--pif-3); color: var(--pif-slate); font-size: 13px; }
.user-new-fields {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--pif-2); margin-bottom: var(--pif-3);
}
@media (max-width: 720px) { .user-new-fields { grid-template-columns: 1fr; } }

/* The credentials. Monospace and selectable — she may copy them by hand, and a
   temp password with look-alike characters is why the generator avoids 0/O and
   1/l/I in the first place. */
.user-new-cred {
  background: var(--pif-paper); border: 1px solid var(--pif-rule);
  border-radius: var(--pif-r-ctrl); padding: var(--pif-3); margin-bottom: var(--pif-3);
}
.unc-row { display: flex; gap: var(--pif-3); align-items: baseline; padding: 3px 0; }
.unc-lab {
  flex: 0 0 150px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pif-slate);
}
.unc-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--pif-navy); user-select: all; word-break: break-all;
}
.user-new-actions { display: flex; gap: var(--pif-2); }
.user-new-copied { margin: var(--pif-3) 0 0; font-size: 13px; color: var(--pif-navy); font-weight: 600; }
.user-new-err { margin: var(--pif-3) 0 0; font-size: 13px; color: #b4231e; }

/* --- Loan officers (migration 0041) -------------------------------------- */
/* Reuses .base-list / .base-row / .base-editor wholesale: an officer row opens
   the same way a base row does, so the gold "orders rule" keeps meaning exactly
   one thing on this screen — this is the thing you are editing. */

/* ⚠️ `.base-editor` is a TWO-COLUMN grid — the officer's fields sit two-up in
   it like a base's links do. Everything below the fields is a full-width block
   and must say so, or the routes list gets squeezed into one column and every
   base name wraps to three lines. Same `grid-column: 1 / -1` the editor foot
   already uses. */
.lo-routes-head,
.lo-route-new,
.base-editor > .base-list,
.base-editor > .health-note { grid-column: 1 / -1; }

.lo-routes-head { margin-top: var(--pif-4); }

/* One routed base: the key, the tag it writes, and a way to remove it. The base
   name gets a fixed share rather than shrinking to fit — "naval base kitsap -
   bremerton and bangor" is a real key and must stay readable next to its tag. */
.lo-route {
  display: flex; align-items: baseline; gap: var(--pif-3);
  padding: 6px var(--pif-3);
}
.lo-route .base-name { flex: 0 1 40%; min-width: 0; overflow-wrap: anywhere; }
.lo-route .pif-btn { flex: 0 0 auto; }
/* ⚠️ Monospace on purpose. This string is copied verbatim from a loan officer's
   Zapier step and its CASING IS LOAD-BEARING — GHL's router keys on it. A
   proportional face hides the difference between "Moody AFB" and "moody afb". */
.lo-tag {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--pif-slate);
  overflow-wrap: anywhere;
}

.lo-route-new {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: var(--pif-2); margin-top: var(--pif-2);
}
@media (max-width: 720px) { .lo-route-new { grid-template-columns: 1fr; } }

/* --- VA Snapshot inbox (migration 0053) ---------------------------------- */
/* Reuses .base-list / .base-row / .base-editor like Loan officers does — a
   snapshot opens the same way, so the gold rule keeps meaning one thing. */
.vs-fields {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: 4px var(--pif-3); margin: 0 0 var(--pif-3);
}
.vs-fields dt {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pif-slate);
}
.vs-fields dd { margin: 0; color: var(--pif-navy); overflow-wrap: anywhere; }

/* Base first, name second (Lauren, 2026-09-05) — the name reads as a quieter
   trailing detail, not a second heading competing with the base. */
.vs-who { font-weight: 400; color: var(--pif-slate); }

/* --- Admin → Loan officers: Big picture (migration 0056) ----------------- */
/* A plain data table — this panel is program-wide totals, not an editor, so
   it doesn't reuse .base-list/.base-row like the rest of this screen. Scrolls
   horizontally on its own rather than letting the admin panel run wide. */
.pif-table-wrap { overflow-x: auto; margin-bottom: var(--pif-4); }
.pif-table { border-collapse: collapse; width: 100%; font-family: var(--pif-font-body); font-size: 13px; }
.pif-table th {
  background: var(--pif-navy); color: #fff;
  font-family: var(--pif-font-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; text-align: left;
  padding: 9px var(--pif-3); white-space: nowrap;
}
.pif-table th.num, .pif-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pif-table td { padding: 9px var(--pif-3); border-bottom: 1px solid var(--pif-rule); color: var(--pif-navy); }
.pif-table-totals td { border-bottom: none; border-top: 2px solid var(--pif-navy); font-weight: 700; }

/* --- Loan officer home (migration 0056) ---------------------------------- */
.lo-home { display: flex; flex-direction: column; gap: var(--pif-4); }

.lo-masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--pif-4); flex-wrap: wrap; }
.lo-masthead-who { display: flex; align-items: center; gap: var(--pif-4); }

.lo-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--pif-navy) center/cover no-repeat; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pif-font-display); font-weight: 700; font-size: 15px;
}
.lo-avatar--sm { width: 32px; height: 32px; font-size: 12px; }

/* Log a connection — five labelled fields on one row (Lauren, 2026-09-09:
   "it shouldnt be one giant drop down. its took long"). Auto-fit rather than
   five fixed columns, so it reflows to two rows on a narrow window instead of
   forcing the card to scroll sideways. */
.lo-log-form { display: block; }
.lo-log-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--pif-3); align-items: end;
}
.lo-log-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lo-log-field .pif-select,
.lo-log-field .pif-input { width: 100%; }
.lo-log-actions {
  display: flex; align-items: center; gap: var(--pif-3); flex-wrap: wrap;
  margin-top: var(--pif-3); border-top: 1px solid var(--pif-rule); padding-top: var(--pif-3);
}
.lo-log-actions .pif-muted { font-size: 13px; }

.lo-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pif-3); flex-wrap: wrap; margin-bottom: var(--pif-4); }
.lo-panel-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--pif-2); }

/* A segmented pill control, same shape as .section-nav/.section-btn but sized
   for an inline control rather than the primary navy header. */
.lo-pill-toggle { display: inline-flex; background: var(--pif-fog); border-radius: var(--pif-r-ctrl); padding: 3px; gap: 2px; }
.lo-pill {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--pif-font-display); font-size: 12px; font-weight: 600;
  color: var(--pif-navy); background: transparent;
  padding: 6px 12px; border-radius: 6px; white-space: nowrap;
}
.lo-pill.is-active { background: var(--pif-navy); color: #fff; }

.lo-change { display: flex; align-items: center; gap: 6px; }

/* Ambassador cards reuse .net-tile/.net-grid etc. from the Referral Network
   wall wholesale (view-network.js) — same photo/name/contact-info look, so
   this is never a second visual language to keep in step with that one. This
   strip is the one thing added: score/connections/closings (or the
   low-participation flag), appended below the wall's own markup inside
   .net-foot. Reuses .pif-badge--risk and .lo-stat-pill, nothing new there. */
.lo-tile-metrics {
  display: flex; align-items: center; gap: var(--pif-2); flex-wrap: wrap;
  border-top: 1px solid var(--pif-rule); padding-top: var(--pif-2);
}

.lo-stat-pill {
  font-family: var(--pif-font-body); font-size: 12px; color: var(--pif-navy);
  background: var(--pif-paper); border: 1px solid var(--pif-rule); border-radius: 6px; padding: 3px 8px;
}

/* Status badges beyond the two tokens.css already defines. */
.lo-badge--success { background: #e7f5ef; color: var(--pif-success); }
.lo-badge--solid   { background: var(--pif-navy); color: #fff; }

/* Connected tab (migration 0062) — an unclaimed VA Snapshot/IRRRL lead's
   inline ambassador-picker + confirm button, inside its own grid cell. */
.lo-confirm-row { display: flex; align-items: center; gap: var(--pif-2); flex-wrap: wrap; }
.lo-confirm-row .pif-select { width: auto; min-width: 160px; flex: 1 1 160px; }
.lo-confirm-row .pif-btn { flex: 0 0 auto; }

/* --- Admin → Program ---------------------------------------------------- */
/* ⭐ ONE HUE. Navy carries every mark and magnitude is carried by LENGTH, never
   by colour — so there is no categorical palette here and gold carries no data
   at all (it is ~1.4:1 on white and would simply vanish). Gold stays what it is
   everywhere else: the orders rule. */

.prog-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pif-3); margin: var(--pif-4) 0 var(--pif-5);
}
/* Inside a section the heading already provides the top gap. */
.prog-sec .prog-tiles { margin: 0; }
@media (max-width: 860px) { .prog-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prog-tile { padding: var(--pif-4); }
.prog-tile-sub { font-size: 12px; color: var(--pif-slate); margin: var(--pif-1) 0 0; }

.prog-sec { margin-bottom: var(--pif-6); }
.prog-note { font-size: 13px; color: var(--pif-slate); margin: var(--pif-1) 0 var(--pif-3); }

/* Chart. Recessive grid and axes; the line is the only thing with weight. */
.prog-chart { width: 100%; height: auto; display: block; }
.prog-grid { stroke: var(--pif-rule); stroke-width: 1; }
.prog-axis { font-family: var(--pif-font-body); font-size: 11px; fill: var(--pif-slate); }
/* ⚠️ non-scaling-stroke: the SVG scales to the container (720 wide in the
   viewBox, ~1190 on a desktop), which would drag a 2px line to over 3px and a
   1px gridline with it. Marks stay thin at any width. */
.prog-line { fill: none; stroke: var(--pif-navy); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.prog-line, .prog-grid { vector-effect: non-scaling-stroke; }
.prog-area { fill: var(--pif-navy); opacity: 0.07; stroke: none; }
/* Dots stay invisible until hovered — a dot on every month is noise at 12
   points, but the hit target has to exist for the tooltip. */
.prog-dot { fill: var(--pif-navy); opacity: 0; }
.prog-hit:hover .prog-dot { opacity: 1; }
.prog-point-label {
  font-family: var(--pif-font-display); font-size: 12px; font-weight: 700;
  fill: var(--pif-navy);
}

.prog-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prog-table th {
  text-align: left; font-family: var(--pif-font-display); font-size: 11px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pif-slate); padding: 0 var(--pif-3) var(--pif-2) 0;
  border-bottom: 1px solid var(--pif-rule);
}
.prog-table td {
  padding: var(--pif-2) var(--pif-3) var(--pif-2) 0;
  border-bottom: 1px solid var(--pif-rule); color: var(--pif-navy);
  vertical-align: middle;
}
.prog-r { text-align: right; }
.prog-table th.prog-r { padding-right: 0; }

/* Bar-in-cell: the number always sits beside the bar, so the bar is a
   comparison aid and never the only way to read the value. */
.prog-cell-bar { display: flex; align-items: center; gap: var(--pif-2); justify-content: flex-end; }
.prog-cell-bar > span:last-child { font-variant-numeric: tabular-nums; min-width: 2.5ch; }
.prog-bar {
  display: block; flex: 0 0 72px; height: 6px;
  background: var(--pif-rule); border-radius: 3px; overflow: hidden;
}
.prog-bar > span { display: block; height: 100%; background: var(--pif-navy); border-radius: 3px; }

.prog-open { color: var(--pif-slate); font-style: italic; }

/* ⛔ Status NEVER travels alone — the word is the message and the colour only
   reinforces it, so this survives colourblindness and a greyscale print. */
.prog-state { font-size: 12px; color: var(--pif-slate); }
.prog-state.is-success { color: var(--pif-success); }
.prog-state.is-warning { color: var(--pif-warning); }

.prog-funnels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pif-5); }
@media (max-width: 860px) { .prog-funnels { grid-template-columns: 1fr; } }
.prog-frow { display: flex; align-items: center; gap: var(--pif-3); padding: 5px 0; }
.prog-flabel { flex: 1 1 auto; font-size: 13px; color: var(--pif-navy); min-width: 0; }
.prog-frow .prog-bar { flex: 0 0 90px; }
.prog-fnum { flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* The conversion rate beside each funnel count. */
.prog-fpct {
  flex: 0 0 auto; font-size: 12px; color: var(--pif-slate);
  font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right;
}

/* A family worked by two ambassadors (migration 0042).
 *
 * ⚠️ Carries the orders rule, because it is a fact about the RECORD that
 * changes how everything below it should be read — not a decoration. It is the
 * one place in the drawer that gets it. */
.shared-note {
  border-left: 3px solid var(--pif-gold);
  background: var(--pif-gold-tint);
  border-radius: 0 var(--pif-r-ctrl) var(--pif-r-ctrl) 0;
  padding: var(--pif-3);
}
.shared-caveat { margin-top: var(--pif-2); }

/* Her own CRM webhook (migration 0043).
 *
 * ⚠️ Deliberately quiet when off and clearly marked when ON. This is the one
 * control in the product that sends family data off-platform, so "is it live"
 * must be readable at a glance — and the gold rule is reserved for the ON
 * state rather than decorating the block. */
.crm-hook {
  margin-top: var(--pif-3); padding: var(--pif-3);
  background: var(--pif-fog); border-radius: var(--pif-r-ctrl);
  border-left: 3px solid var(--pif-rule);
}
.crm-hook.is-on { border-left-color: var(--pif-gold); background: var(--pif-gold-tint); }
.crm-hook-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--pif-2); margin: var(--pif-2) 0;
}
@media (max-width: 720px) { .crm-hook-row { grid-template-columns: 1fr; } }

/* HQ marker on the ambassadors table. HQ works families too, so the row stays —
   but it must not read as one more ambassador on the ground. Quiet, and the
   WORD carries it, never a colour. */
.prog-hq {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; padding: 1px 5px; border-radius: var(--pif-r-badge);
  background: var(--pif-fog); color: var(--pif-slate); vertical-align: middle;
}

/* --- Admin → PIFHL Overview (view-lo-dashboard.js) ------------------------
 * Modeled directly on Lauren's own standalone closings dashboard, on her
 * word (2026-09-06). Two deliberate overrides of this file's usual posture,
 * both hers to call: the goal bar carries a gradient, and officer bars carry
 * colour (identity), not just length — see the view's own header comment for
 * why those two are different from every other chart in this product. */
.pifhl-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pif-3);
  margin-bottom: var(--pif-4);
}
.pifhl-filter { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1 1 160px; }
.pifhl-filters .pif-btn { flex: 0 0 auto; }

.pifhl-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pif-3); margin-bottom: var(--pif-4);
}
@media (max-width: 860px) { .pifhl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pifhl-tile { padding: var(--pif-4); border-top: 3px solid var(--pif-gold); }

.pifhl-goal-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--pif-2); margin-bottom: var(--pif-2); }
.pifhl-goal-track { height: 22px; background: var(--pif-fog); border-radius: 999px; overflow: hidden; }
.pifhl-goal-fill {
  height: 100%; min-width: 42px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pif-navy), var(--pif-gold));
  color: #fff; font-family: var(--pif-font-display); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
  transition: width 300ms ease;
}

.pifhl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pif-4); margin: var(--pif-4) 0; }
@media (max-width: 900px) { .pifhl-grid2 { grid-template-columns: 1fr; } }

/* Bar rows — length carries magnitude everywhere; colour is added ONLY when
 * the bar's subject IS an officer (officerShareChart, the ranking heads),
 * via colorFor() in the view. State/ambassador bars stay single-hue navy. */
.pifhl-bar-row { display: flex; align-items: center; gap: var(--pif-3); padding: 5px 0; }
.pifhl-bar-label { flex: 0 0 150px; font-size: 13px; color: var(--pif-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pifhl-bar-track { flex: 1 1 auto; height: 14px; background: var(--pif-fog); border-radius: 4px; overflow: hidden; }
.pifhl-bar-fill { display: block; height: 100%; border-radius: 4px; }
.pifhl-bar-end { flex: 0 0 auto; font-size: 12px; color: var(--pif-slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pifhl-bar-scroll { max-height: 520px; overflow-y: auto; }

/* Routed bases with no ambassador on file — collapsed at the BOTTOM of the
   loan officer's Ambassadors tab (Lauren, 2026-09-09). An empty card told him
   nothing and outranked cards that did; 28 of Eric's 33 bases were empty
   because the Referral Network wall has no base lead set, not because nobody
   works them. Quiet by design: a rule, a count, and the base names — no gold,
   no shadow, and closed until he asks. */
.lo-empty-bases { margin-top: var(--pif-4); border-top: 1px solid var(--pif-rule); padding-top: var(--pif-3); }
.lo-empty-bases > summary {
  cursor: pointer; list-style: none;
  font-family: var(--pif-font-body); font-size: 13px; color: var(--pif-slate);
  display: flex; align-items: center; gap: var(--pif-2);
}
.lo-empty-bases > summary::-webkit-details-marker { display: none; }
.lo-empty-bases > summary:focus-visible { outline: 2px solid var(--pif-gold); outline-offset: 2px; }
.lo-empty-count {
  font-family: var(--pif-font-display); font-size: 13px; font-weight: 700;
  color: var(--pif-navy); background: var(--pif-fog);
  border: 1px solid var(--pif-rule); border-radius: 6px; padding: 1px 7px;
}
.lo-empty-bases > p { margin: var(--pif-2) 0 var(--pif-3); font-size: 13px; max-width: 62ch; }
.lo-empty-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--pif-1) var(--pif-3);
}
.lo-empty-list li { font-size: 13px; color: var(--pif-navy); padding: 2px 0; }

/* --- Admin → Weekly audit (view-audit.js, 0087) -----------------------------
 * Reuses the Program tables and the System health verdict. A finding that is
 * new or worse gets the orders rule (3px gold, left) — the one sanctioned gold
 * accent — and says so in WORDS in its badge, never by colour alone. */
.audit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pif-3); margin-bottom: var(--pif-3); }
.audit-head .prog-note { margin: 0; }
.audit-stages { margin-top: var(--pif-3); }
.audit-list { list-style: none; margin: var(--pif-3) 0 0; padding: 0; }
.audit-finding {
  border: 1px solid var(--pif-rule); border-left: 3px solid var(--pif-rule);
  border-radius: var(--pif-r-card); background: var(--pif-paper);
  padding: var(--pif-3) var(--pif-4); margin-bottom: var(--pif-2);
}
.audit-finding.is-worse { border-left-color: var(--pif-gold); }
.audit-finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pif-2); }
.audit-finding-label { font-weight: 600; color: var(--pif-navy); }
.audit-badge {
  font-family: var(--pif-font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px;
  border-radius: var(--pif-r-badge); background: var(--pif-fog); color: var(--pif-slate);
}
.audit-hint { font-size: 13px; color: var(--pif-slate); margin: var(--pif-1) 0 0; }
.audit-items { font-size: 13px; color: var(--pif-navy); margin: var(--pif-2) 0 0; padding-left: var(--pif-4); }
.audit-items summary { cursor: pointer; color: var(--pif-slate); }
details.audit-items { padding-left: 0; }
details.audit-items ul { padding-left: var(--pif-4); margin: var(--pif-1) 0 0; }
.audit-go { margin-top: var(--pif-2); }
.audit-sub { font-family: var(--pif-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pif-slate); margin: var(--pif-4) 0 var(--pif-2); }
@media (max-width: 600px) { .audit-head { flex-direction: column; align-items: flex-start; } }