/* Hillside Operations Platform — themeable.
   Paper (default) and Dark share one token vocabulary; components never
   reference a raw colour. Toggle via document.documentElement.dataset.theme. */
/* Local variable fonts — no external calls (PHI app). latin subset, wght 400-700 */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/vendor/fonts/fraunces-var-latin.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/vendor/fonts/inter-var-latin.woff2') format('woff2'); }

/* ============================================================
   THEME TOKENS
   Default = "paper" (Command Center look). Dark lives under
   [data-theme="dark"]. Both use the SAME variable names, so
   every component below is theme-agnostic.
   The sidebar rail is navy in paper and near-black in dark, so
   it gets its OWN ink tokens that stay light in both themes.
   ============================================================ */
:root {
  /* surfaces */
  --paper: #F6F0EA;        /* app background */
  --card: #FFFFFF;         /* panels, cards, inputs-on-panel */
  --card-2: #FBF7F1;       /* raised / hover surface */
  --rail: #1E3350;         /* sidebar (navy) */
  --sunken: #F1EBE1;       /* inputs, editors, wells */

  /* ink */
  --ink: #182430;          /* primary text */
  --pine-ink: #131C2A;     /* headings */
  --slate: #4C5A72;        /* secondary text */
  --mist: #7C8A99;         /* muted text */

  /* brand + accents (used as fills, so they carry white text) */
  --pine: #1E3350;
  --pine-hover: #28456A;
  --pine-soft: #EAF0F6;    /* tinted well: table heads, tracks, code */
  --clay: #A8482F;         /* danger / decline */
  --gold: #C9A15C;
  --gold-deep: #8A6A2E;    /* gold that stays readable on paper */
  --green: #1F6B45;        /* success / admitted */

  /* lines */
  --line: #E4DDCD;
  --line-2: #D5CBB6;

  /* rail ink — light in BOTH themes */
  --rail-ink: #F6F0EA;
  --rail-ink-dim: #AFBDD2;
  --rail-hover: rgba(255, 255, 255, .08);
  --rail-sunken: rgba(255, 255, 255, .07);
  --rail-line: rgba(255, 255, 255, .16);
  --county-ink: #1E3350;
  --county-halo: rgba(255, 255, 255, .95);
  /* subtle overlays: dark-on-paper, light-on-dark */
  --tint-1: rgba(24, 36, 48, .045);
  --tint-2: rgba(24, 36, 48, .07);
  --tint-3: rgba(24, 36, 48, .10);

  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 10px 30px rgba(18, 32, 49, .12);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #131922;
  --card: #1B222D;
  --card-2: #212A37;
  --rail: #0F141C;
  --sunken: #10151D;

  --ink: #E9EEF6;
  --pine-ink: #F3F7FC;
  --slate: #AEBBCD;
  --mist: #8492A6;

  --pine: #3987E5;
  --pine-hover: #4B94EA;
  --pine-soft: #232E3D;
  --clay: #E8776A;
  --gold: #C9A15C;
  --gold-deep: #D9B375;
  --green: #3FB98D;

  --line: #27313F;
  --line-2: #384556;

  --rail-ink: #E9EEF6;
  --rail-ink-dim: #AEBBCD;
  --rail-hover: rgba(255, 255, 255, .06);
  --rail-sunken: rgba(255, 255, 255, .06);
  --rail-line: rgba(255, 255, 255, .16);
  --county-ink: #C9A15C;
  --county-halo: rgba(0, 0, 0, .85);
  --tint-1: rgba(255, 255, 255, .04);
  --tint-2: rgba(255, 255, 255, .07);
  --tint-3: rgba(255, 255, 255, .10);

  --shadow: 0 10px 30px rgba(0, 0, 0, .45);

  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--pine); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(201, 161, 92, .32); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- login ---------- */
.login-scene {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(201, 161, 92, .16), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(57, 135, 229, .18), transparent 55%),
    linear-gradient(160deg, #0B0F15, #131922 70%, #17202C);
}
.login-card {
  width: min(400px, 100%); padding: 44px 36px 36px;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  animation: rise .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.wordmark { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.wordmark svg { flex: none; }
.wordmark .name { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: .1em; color: var(--pine-ink); }
.login-card .tag { color: var(--mist); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }
.login-card .motto { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 14px; margin-bottom: 30px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--sunken); border: 1px solid var(--line-2); outline: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pine); box-shadow: 0 0 0 3px rgba(57, 135, 229, .22); background: var(--card-2); }
.error-note { color: var(--clay); font-size: 13px; min-height: 20px; margin: 4px 0 10px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background .15s, transform .1s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--card-2); border-color: #4A5A6E; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.btn.primary:hover { background: var(--pine-hover); }
.btn.gold { background: linear-gradient(180deg, #D3AC68, #B98F4C); border-color: #D3AC68; color: #1A1206; }
.btn.gold:hover { filter: brightness(1.07); }
.btn.danger { color: var(--clay); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--slate); }
.btn.ghost:hover { background: var(--tint-2); color: var(--ink); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column;
  background: var(--rail); border-right: 1px solid var(--rail-line);
  color: var(--rail-ink); padding: 22px 12px 14px; overflow-y: auto;
}
.sidebar .wordmark .name { font-size: 17px; color: #fff; }
.sidebar .tagline { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: 2px 0 20px 42px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 10px; color: var(--rail-ink-dim); font-weight: 550; font-size: 13.5px;
  cursor: pointer; border: none; background: none; text-align: left; width: 100%;
  transition: background .15s, color .15s; white-space: nowrap;
}
.nav-item .em { width: 18px; height: 18px; display: grid; place-items: center; flex: none; opacity: .9; }
.nav-item:hover { background: var(--rail-hover); color: #fff; }
.nav-item.active { background: rgba(201, 161, 92, .16); color: #fff; box-shadow: inset 2px 0 0 var(--gold); }
.nav-sep { margin: 16px 12px 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--rail-ink-dim); opacity: .75; }
.sidebar .spacer { flex: 1; min-height: 14px; }
.sync-box { margin-bottom: 10px; }
.sync-box .btn { background: var(--rail-sunken); border-color: var(--rail-line); color: #fff; }
.sync-box .btn:hover { background: var(--rail-hover); }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--line); cursor: pointer;
}
.user-chip:hover { background: var(--card-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #1A1206;
  background: linear-gradient(135deg, #E7C976, var(--gold));
}
.user-chip .who { min-width: 0; }
.user-chip .who .n { font-weight: 650; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .who .r { font-size: 11px; color: var(--mist); }

.main { min-width: 0; padding: 26px 32px 90px; }
.topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.topbar h1 { font-size: 28px; font-weight: 680; letter-spacing: -.02em; flex: 1; color: var(--pine-ink); }
.searchbar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--line-2); color: var(--mist);
  cursor: pointer; font-size: 13.5px; min-width: 210px;
}
.searchbar:hover { border-color: var(--gold); }
.searchbar kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; background: var(--pine-soft); color: var(--slate); padding: 2px 6px; border-radius: 6px; }

/* sub-tabs */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 22px; }
.subtab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--card); color: var(--slate); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all .15s;
}
.subtab:hover { border-color: #4A5A6E; color: var(--ink); }
.subtab.on { background: var(--pine); border-color: var(--pine); color: #fff; }

/* ---------- cards & layout ---------- */
.grid { display: grid; gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px;
}
.card h3, .cc-h3 { font-size: 15px; font-weight: 650; color: var(--pine-ink); margin: 0 0 12px; letter-spacing: -.005em; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hero-greeting { font-size: 32px; font-weight: 680; letter-spacing: -.025em; margin-bottom: 2px; color: var(--pine-ink); }
.hero-sub { color: var(--mist); margin-bottom: 20px; }
.muted { color: var(--mist); font-size: 13px; }
.mono { font-family: var(--mono); }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty { text-align: center; color: var(--mist); padding: 36px 20px; font-size: 14px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head h3 { margin: 0; flex: 1; min-width: 0; }
.panel-head .ic { color: var(--mist); flex: none; }
.scroll-x { overflow-x: auto; }

/* ---------- KPI / stat tiles ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--slate); border-radius: var(--radius); padding: 15px 17px; }
.kpi-num { font-size: 34px; font-weight: 660; line-height: 1.12; letter-spacing: -.03em; color: var(--pine-ink); display: flex; align-items: baseline; gap: 6px; }
.kpi-num small { font-size: 13px; font-weight: 500; color: var(--mist); letter-spacing: 0; }
.kpi-label { font-size: 11.5px; color: var(--mist); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.kpi-meta { font-size: 12.5px; color: var(--slate); margin-top: 3px; }
.kpi-red { border-left-color: var(--clay); } .kpi-red .kpi-num { color: #F09A8F; }
.kpi-gold { border-left-color: var(--gold); } .kpi-gold .kpi-num { color: var(--gold-deep); }
.kpi-pine { border-left-color: var(--pine); }
.kpi-green { border-left-color: var(--green); } .kpi-green .kpi-num { color: #6BD3AC; }
.meter { height: 6px; border-radius: 4px; background: var(--tint-3); overflow: hidden; margin-top: 11px; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }

/* ---------- census card ---------- */
.census-card {
  display: flex; gap: 22px; align-items: center;
  background: linear-gradient(135deg, #16202E, #1E3350 78%);
  color: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.census-ring { flex: none; }
.census-body { min-width: 0; flex: 1; }
.census-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.census-big { font-size: 36px; font-weight: 670; letter-spacing: -.03em; }
.census-big span { font-size: 15px; font-weight: 400; color: rgba(255,255,255,.65); margin-left: 8px; letter-spacing: 0; }
.census-split { display: flex; gap: 22px; margin: 8px 0; font-size: 13px; color: rgba(255,255,255,.85); flex-wrap: wrap; }
.census-split .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.census-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.census-bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.census-note { font-size: 12px; color: rgba(255,255,255,.62); margin-top: 7px; }

/* ---------- funnel ---------- */
.funnel { margin-bottom: 6px; }
.funnel-row { display: grid; grid-template-columns: 92px 1fr 120px; align-items: center; gap: 12px; margin-bottom: 9px; }
.funnel-label { font-size: 13px; font-weight: 650; color: var(--slate); }
.funnel-track { height: 20px; background: var(--pine-soft); border-radius: 6px; overflow: hidden; }
.funnel-bar { height: 100%; border-radius: 6px; }
.fn-pine { background: var(--pine); } .fn-gold { background: #D95926; } .fn-green { background: #199E70; }
.funnel-num { font-size: 17px; font-weight: 680; }

/* horizontal bar rows (shared by sources / pipeline) */
.hrow { display: grid; grid-template-columns: 1fr 44px; gap: 12px; align-items: center; margin-bottom: 11px; }
.hrow .nm { font-size: 12.5px; color: var(--slate); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .track { height: 9px; border-radius: 5px; background: var(--tint-2); overflow: hidden; }
.hrow .fill { height: 100%; border-radius: 5px; background: var(--pine); }
.hrow .n { text-align: right; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- heatmap ---------- */
.heat-grid { display: flex; gap: 3px; overflow-x: auto; padding: 4px 0; }
.heat-col { display: flex; flex-direction: column; gap: 3px; }
.heat-cell { width: 13px; height: 13px; border-radius: 3px; background: #1E2733; flex: none; }
.heat-1 { background: #2C3A4B; } .heat-2 { background: #6E5A2E; } .heat-3 { background: #A8842C; } .heat-4 { background: #D9B375; }
.heat-blank { background: transparent; }
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mist); margin-top: 8px; flex-wrap: wrap; }

/* ---------- status badges ---------- */
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; border: 1px solid transparent; }
.st-active { background: rgba(57,135,229,.16); color: #8DBBF2; border-color: rgba(57,135,229,.38); }
.st-admit { background: rgba(12,163,12,.15); color: #7FD47F; border-color: rgba(12,163,12,.4); }
.st-decline { background: rgba(208,59,59,.15); color: #F09A9A; border-color: rgba(208,59,59,.4); }
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--pine-soft); color: var(--slate); white-space: nowrap; border: 1px solid var(--line-2); display: inline-block; }
.pill.accent { background: rgba(12,163,12,.15); color: #7FD47F; border-color: rgba(12,163,12,.4); }
.pill.blue { background: rgba(57,135,229,.16); color: #8DBBF2; border-color: rgba(57,135,229,.38); }
.pill.amber { background: rgba(250,178,25,.13); color: #F5CE7C; border-color: rgba(250,178,25,.36); }
.pill.danger { background: rgba(208,59,59,.15); color: #F09A9A; border-color: rgba(208,59,59,.4); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); font-size: 12.5px; font-weight: 600;
  color: var(--slate); cursor: pointer; margin: 0 6px 8px 0;
}
.chip:hover { background: var(--card-2); }
.chip.chip-on { background: var(--pine); border-color: var(--pine); color: #fff; }
.chip .cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* ---------- tables ---------- */
.twrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.twrap table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.twrap th { background: var(--pine-soft); color: var(--slate); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 9px 12px; position: sticky; top: 0; font-weight: 700; }
.twrap td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; color: var(--slate); }
.twrap td strong { color: var(--ink); }
.twrap tr:hover td { background: var(--tint-1); }

/* expandable cards (accounts, daily notes) */
details.refcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
details.refcard summary {
  list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 650; font-size: 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
details.refcard summary:hover { background: var(--card-2); }
details.refcard summary::-webkit-details-marker { display: none; }
details.refcard summary::before { content: '▸'; color: var(--gold); transition: transform .15s; }
details.refcard[open] summary::before { transform: rotate(90deg); }
details.refcard .refbody { padding: 4px 16px 16px; border-top: 1px solid var(--line); }

/* ---------- pipeline ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: 290px; gap: 14px; overflow-x: auto; padding-bottom: 18px; }
.col { background: #161D27; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; min-height: 200px; }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.col-head .n { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.kcard { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px; cursor: pointer; transition: box-shadow .15s, transform .12s, border-color .15s; }
.kcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--gold); }
.kcard .name { font-weight: 650; font-size: 14.5px; margin-bottom: 4px; color: var(--pine-ink); }
.kcard .meta { font-size: 12px; color: var(--mist); display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.kcard select { width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 12px; background: var(--sunken); border: 1px solid var(--line-2); color: var(--slate); }

/* ---------- tasks ---------- */
.task-add { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.task-add input[type=text] { flex: 1 1 260px; padding: 11px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-2); outline: none; }
.task-add input[type=text]:focus { border-color: var(--pine); }
.task-add input[type=date], .task-add select { padding: 9px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-2); }
.task-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: none; }
.task-row.done .t { text-decoration: line-through; color: var(--mist); }
.checkbox { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); flex: none; display: grid; place-items: center; cursor: pointer; transition: all .15s; background: var(--sunken); color: transparent; }
.checkbox.on { background: var(--green); border-color: var(--green); color: #08130E; }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line-2); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { border: none; background: none; padding: 7px 14px; border-radius: 8px; color: var(--mist); font-weight: 600; font-size: 13px; cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--pine); color: #fff; }

/* ---------- brain / doc view ---------- */
.brain { display: grid; grid-template-columns: 215px 300px 1fr; gap: 14px; align-items: start; }
.pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pane .pane-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.pane .pane-body { max-height: calc(100dvh - 220px); overflow-y: auto; padding: 8px; }
.folder-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 8px; color: var(--slate); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-item:hover { background: var(--card-2); color: var(--ink); }
.folder-item.active { background: var(--pine); color: #fff; }
.note-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.note-item:hover { background: var(--card-2); }
.note-item.active { background: rgba(57,135,229,.16); }
.note-item .t { font-weight: 650; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
.note-item .p { font-size: 12px; color: var(--mist); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-view { padding: 24px 28px; min-height: 300px; }
.note-view-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.note-view-head h2 { font-size: 21px; font-weight: 660; letter-spacing: -.02em; flex: 1; min-width: 200px; color: var(--pine-ink); }
.note-path { font-family: var(--mono); font-size: 11.5px; color: var(--mist); margin-bottom: 16px; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.editor { width: 100%; min-height: 55dvh; background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; outline: none; resize: vertical; color: var(--ink); }
.editor:focus { border-color: var(--pine); }

/* markdown rendering */
.md { font-size: 15px; }
.md h1, .md h2, .md h3, .md h4 { color: var(--pine-ink); margin: 1.3em 0 .5em; font-weight: 660; letter-spacing: -.015em; }
.md h1 { font-size: 23px; } .md h2 { font-size: 18px; border-bottom: 1px solid var(--line); padding-bottom: 6px; } .md h3 { font-size: 16px; } .md h4 { font-size: 14.5px; }
.md p, .md ul, .md ol { margin-bottom: .8em; color: var(--slate); }
.md ul, .md ol { padding-left: 1.4em; }
.md li { margin-bottom: .25em; }
.md strong { color: var(--ink); }
.md em { color: var(--slate); }
.md code { font-family: var(--mono); font-size: .88em; background: var(--pine-soft); padding: 2px 6px; border-radius: 6px; color: #B9CBE2; }
.md pre { background: var(--sunken); border: 1px solid var(--line); padding: 14px; border-radius: 10px; overflow-x: auto; margin-bottom: 1em; }
.md pre code { background: none; padding: 0; }
.md blockquote { border-left: 3px solid var(--gold); padding-left: 14px; color: var(--slate); margin-bottom: .8em; font-style: italic; }
.md table { border-collapse: collapse; width: 100%; margin-bottom: 1em; font-size: 13.5px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; color: var(--slate); }
.md th { background: var(--pine-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); white-space: nowrap; font-weight: 700; }
.md a.wiki { color: var(--gold-deep); border-bottom: 1px dotted rgba(217, 179, 117, .5); cursor: pointer; text-decoration: none; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 1.4em 0; }
.md input[type=checkbox] { accent-color: var(--green); margin-right: 6px; }

/* maps — OSM tiles are a light basemap; dim them so they sit in a dark UI */
.mapdiv { height: 540px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--sunken); }
.mapdiv .leaflet-tile { filter: brightness(.62) saturate(.75) contrast(1.08); }
.mapdiv .leaflet-container { background: var(--sunken); }
.mapdiv .leaflet-popup-content-wrapper, .mapdiv .leaflet-popup-tip { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.mapdiv .leaflet-control-zoom a { background: var(--card); color: var(--ink); border-color: var(--line); }
.mapdiv .leaflet-control-attribution { background: rgba(19,25,34,.8); color: var(--mist); }
.mapdiv .leaflet-control-attribution a { color: var(--slate); }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 12px; font-size: 12.5px; color: var(--slate); }
.map-legend label { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

/* ---------- files ---------- */
.dropzone { border: 2px dashed var(--line-2); border-radius: var(--radius-lg); padding: 42px 20px; text-align: center; color: var(--mist); cursor: pointer; transition: all .15s; margin-bottom: 18px; background: var(--tint-1); }
.dropzone:hover, .dropzone.over { border-color: var(--gold); color: var(--gold-deep); background: rgba(201,161,92,.07); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--tint-1); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .s { font-size: 12px; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- brain dump (daily capture chat) ---------- */
.dump { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dump { grid-template-columns: 1fr; } }
.dump-log {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; max-height: 54dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.bubble { border: 1px solid var(--line-2); background: var(--card-2); border-radius: 14px; padding: 11px 14px; max-width: 92%; }
.bubble.mine { align-self: flex-end; background: rgba(57,135,229,.14); border-color: rgba(57,135,229,.36); }
.bubble .who { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mist); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.bubble .body { font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.bubble .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dump-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.dump-form textarea { width: 100%; min-height: 108px; resize: vertical; padding: 12px 14px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line-2); color: var(--ink); outline: none; font-size: 14.5px; line-height: 1.5; }
.dump-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,161,92,.18); }
.dump-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.dump-meta label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin-bottom: 5px; }
.dump-meta input, .dump-meta select { width: 100%; padding: 9px 11px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--line-2); color: var(--ink); outline: none; font-size: 13.5px; }
.dump-meta input:focus, .dump-meta select:focus { border-color: var(--pine); }
.dump-hint { font-size: 12.5px; color: var(--mist); margin-top: 10px; line-height: 1.5; }

/* ---------- modal / overlay ---------- */
.overlay { position: fixed; inset: 0; background: rgba(6, 9, 13, .68); backdrop-filter: blur(6px); display: grid; place-items: start center; padding: 12dvh 18px 18px; z-index: 500; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); animation: rise .25s cubic-bezier(.2,.9,.3,1); }
.modal h2 { font-size: 19px; font-weight: 660; margin-bottom: 16px; color: var(--pine-ink); }
.search-input { width: 100%; padding: 15px 18px; font-size: 16px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; outline: none; color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.search-input:focus { border-color: var(--gold); }
.search-results { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; max-height: 55dvh; overflow-y: auto; padding: 6px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--card-2); border: 1px solid var(--line-2); color: #fff; padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow); z-index: 999; font-weight: 600; font-size: 14px; animation: rise .25s; max-width: 90vw; }
.toast.err { background: #3A1E1E; border-color: rgba(208,59,59,.5); color: #F5C2BC; }

/* charts */
.chart-wrap { position: relative; }
.bars-h .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.bars-h .name { font-size: 13px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.bars-h .track { height: 8px; border-radius: 4px; background: var(--tint-2); overflow: hidden; }
.bars-h .fill { height: 100%; border-radius: 4px; background: #199E70; }
.bars-h .num { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .brain { grid-template-columns: 1fr; }
  .pane .pane-body { max-height: 40dvh; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 400;
    flex-direction: row; align-items: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto; overflow-y: hidden;
    background: var(--rail); border-top: 1px solid var(--rail-line); border-right: 0;
  }
  .sidebar .wordmark, .sidebar .tagline, .sidebar .spacer, .sidebar .sync-box, .sidebar .user-chip, .nav-sep { display: none; }
  .nav { flex-direction: row; width: max-content; }
  .nav-item { flex-direction: column; gap: 3px; font-size: 9.5px; padding: 6px 9px; }
  .nav-item.active { box-shadow: none; }
  .nav-item .em { width: auto; }
  .main { padding: 18px 14px 120px; }
  .topbar h1 { font-size: 21px; }
  .searchbar { min-width: 0; }
  .searchbar .hint, .searchbar kbd { display: none; }
  .hero-greeting { font-size: 23px; }
  .note-view { padding: 18px 14px; }
  .census-card { flex-direction: column; text-align: center; }
  .census-split { justify-content: center; }
  .funnel-row { grid-template-columns: 72px 1fr 90px; }
  .mapdiv { height: 62dvh; }
}


/* ---------- referral status modal ---------- */
.rsm-modal { width: min(560px, 100%); }
.rsm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.rsm-header h3 { margin: 0; font-size: 17px; font-weight: 660; }
.rsm-close { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--slate); padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s; }
.rsm-close:hover { background: var(--tint-2); color: var(--ink); }

.rsm-summary { background: var(--tint-1); border-left: 3px solid var(--gold); padding: 12px 14px; margin-bottom: 16px; border-radius: 6px; font-size: 14px; color: var(--slate); }

.rsm-buttons { display: flex; flex-direction: column; gap: 10px; }
.rsm-btn-status { padding: 14px 18px; font-size: 14px; font-weight: 600; border: 1.5px solid; border-radius: 8px; cursor: pointer; transition: all 0.2s; background: transparent; }
.rsm-btn-status:hover { transform: translateY(-2px); }

.rsm-btn-admit { border-color: #199E70; color: #199E70; }
.rsm-btn-admit:hover { background: rgba(25,158,112,0.1); }

.rsm-btn-deny { border-color: #D83B3B; color: #D83B3B; }
.rsm-btn-deny:hover { background: rgba(216,59,59,0.1); }

.rsm-btn-close { border-color: #C9A15C; color: #C9A15C; }
.rsm-btn-close:hover { background: rgba(201,161,92,0.1); }

.rsm-form { display: flex; flex-direction: column; gap: 16px; }
.rsm-form-group { display: flex; flex-direction: column; gap: 6px; }
.rsm-form-group label { font-size: 13px; font-weight: 600; color: var(--ink); }
.rsm-form-group input, .rsm-form-group select, .rsm-form-group textarea {
  padding: 11px 13px; font-size: 14px; background: var(--sunken); border: 1px solid var(--line-2);
  border-radius: 6px; color: var(--ink); font-family: inherit; transition: all 0.2s;
}
.rsm-form-group input:focus, .rsm-form-group select:focus, .rsm-form-group textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,161,92,0.2);
}
.rsm-form-group textarea { resize: vertical; min-height: 80px; }

.rsm-checkbox { flex-direction: row; align-items: center; }
.rsm-checkbox input[type="checkbox"] { width: auto; margin-right: 8px; cursor: pointer; }
.rsm-checkbox label { margin: 0; }

.rsm-required { color: #D83B3B; }

.rsm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.rsm-btn-submit, .rsm-btn-back { padding: 10px 18px; font-size: 13px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.rsm-btn-submit { background: var(--gold); color: var(--rail); }
.rsm-btn-submit:hover:not(:disabled) { opacity: 0.9; }
.rsm-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.rsm-btn-back { background: var(--tint-2); color: var(--ink); border: 1px solid var(--line-2); }
.rsm-btn-back:hover:not(:disabled) { background: var(--tint-3); }

/* NJ county labels on the map (added 2026-08-22) */
.county-label{
  color:var(--county-ink,#1E3350); font-size:10.5px; font-weight:650; letter-spacing:.03em;
  text-transform:uppercase; white-space:nowrap; pointer-events:none;
  text-shadow:0 0 3px var(--county-halo,rgba(255,255,255,.95)), 0 0 6px var(--county-halo,rgba(255,255,255,.8));
  background:none; border:none; text-align:center;
}
.county-label b{ color:var(--clay); font-weight:700; }

/* theme toggle button in the topbar */
.themetog{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border-radius:9px; border:1px solid var(--line-2); background:var(--card);
  color:var(--slate); cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.themetog:hover{ background:var(--card-2); color:var(--ink); border-color:var(--gold); }

/* ---------- Bed Board screen ---------- */
.bb-head{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; padding:16px 20px;
  background:linear-gradient(135deg,#16202E,#1E3350 78%); color:#fff; border-radius:var(--radius-lg); }
.bb-big{ font-family:var(--serif); font-size:34px; font-weight:600; line-height:1; }
.bb-big span,.bb-hn span{ font-size:15px; font-weight:400; opacity:.65; margin-left:4px; }
.bb-hn{ font-family:var(--serif); font-size:22px; font-weight:600; line-height:1.1; }
.bb-cap{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; opacity:.75; margin-top:4px; }
.bb-opens{ font-size:11.5px; opacity:.85; margin-top:3px; color:#CFE3D6; }
.bb-meta{ margin-left:auto; text-align:right; font-size:12px; opacity:.85; }
.bb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.bb-room{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }
.bb-roomlbl{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mist); font-weight:650; margin-bottom:8px; }
.bb-beds{ display:flex; flex-direction:column; gap:6px; }
.bb-bed{ display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; width:100%;
  border:1px solid var(--line-2); border-radius:9px; padding:7px 10px; background:var(--card-2);
  cursor:pointer; text-align:left; transition:border-color .12s, background .12s; }
.bb-bed:hover{ border-color:var(--gold); }
.bb-bed.sel{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(201,161,92,.3); }
.bb-bed.open{ border-style:dashed; border-color:#7FAE93; background:transparent; }
.bb-bed .bb-id{ font-family:var(--serif); font-weight:700; font-size:13px; color:var(--slate); }
.bb-bed .bb-name{ font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-bed .bb-openlbl{ color:var(--green); letter-spacing:.06em; font-size:11.5px; }
.bb-bed .bb-chart{ font-size:11px; color:var(--mist); font-variant-numeric:tabular-nums; }
.bb-panel{ margin:12px 0 4px; border-left:3px solid var(--gold); }
.bb-panel-head{ font-size:14px; margin-bottom:10px; }
.bb-forms{ display:flex; gap:22px; flex-wrap:wrap; }
.bb-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bb-form-t{ font-size:12px; font-weight:650; color:var(--slate); }
.bb-form input,.bb-form select{ background:var(--sunken); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; font-size:13.5px; min-width:150px; }
@media (max-width:900px){ .bb-meta{ margin-left:0; text-align:left; } }
.nr-in{ background:var(--sunken); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; font-size:13.5px; }

/* ============================================================
   HILLSIDE WORKSPACE DESIGN SYSTEM  (redesign 2026-09-08)
   Apple + premium healthcare + executive command center.
   This layer re-tunes the shared token vocabulary above and
   restyles shared components. No markup logic lives here.
   ============================================================ */
:root {
  /* brand tokens (requested names) */
  --hillside-navy: #1B2D4A;
  --hillside-navy-deep: #13223A;
  --hillside-navy-soft: #26406A;
  --hillside-gold: #B99A5B;
  --hillside-gold-soft: #F4EBD8;
  --hillside-cream: #F5F2EC;
  --surface-white: #FFFFFF;
  --text-primary: #172234;
  --text-secondary: #5D6B7E;
  /* reference mockup (2026-09-09): borderless white cards on cream, whisper shadows, flat gold */
  --card-edge: rgba(23,34,52,.05);
  --gold-flat: #B4955A;
  --gold-flat-hover: #A88A50;
  --success: #2F8A5B;
  --warning: #B58A3A;
  --danger: #C24C44;
  --info: #3D7CC4;
  --purple: #7561B3;
  --border: #ECE7DD;
  --shadow-sm: 0 1px 2px rgba(20,36,60,.03), 0 8px 24px rgba(20,36,60,.06);
  --shadow-md: 0 14px 40px rgba(20,36,60,.11);
  --radius-card: 16px;
  --radius-button: 12px;
  /* soft status fills */
  --soft-blue: #EAF1FA;  --soft-blue-ink: #2E66AE;
  --soft-green: #E7F3EA; --soft-green-ink: #23704A;
  --soft-purple: #EEEAF7; --soft-purple-ink: #5F4B9E;
  --soft-amber: #FBF2DF; --soft-amber-ink: #8E6A22;
  --soft-red: #FBEBE8;   --soft-red-ink: #A83E36;
  --soft-navy: #EBF0F7;  --soft-navy-ink: #1B2D4A;

  /* map onto the legacy vocabulary every component uses */
  --paper: var(--hillside-cream);
  --card: var(--surface-white);
  --card-2: #FBF9F5;
  --sunken: #F3EFE7;
  --rail: var(--hillside-navy);
  --ink: var(--text-primary);
  --pine-ink: #101D31;
  --slate: var(--text-secondary);
  --mist: #7F8B9B;
  --pine: var(--hillside-navy);
  --pine-hover: var(--hillside-navy-soft);
  --pine-soft: var(--soft-navy);
  --clay: var(--danger);
  --gold: var(--hillside-gold);
  --gold-deep: #8A6D34;
  --green: var(--success);
  --line: var(--border);
  --line-2: #DBD4C6;
  --rail-ink: #F6F3ED;
  --rail-ink-dim: #C3CEDD;
  --rail-hover: rgba(255,255,255,.07);
  --rail-sunken: rgba(255,255,255,.08);
  --rail-line: rgba(255,255,255,.12);
  --tint-1: rgba(23,34,52,.04);
  --tint-2: rgba(23,34,52,.07);
  --tint-3: rgba(23,34,52,.10);
  --radius: 12px;
  --radius-lg: var(--radius-card);
  --shadow: var(--shadow-md);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
/* Dark stays available as a toggle; re-declared after the paper tokens above so it still wins. */
[data-theme="dark"] {
  --paper: #0F1622; --card: #171F2C; --card-2: #1D2735; --sunken: #121926;
  --rail: #0B121D; --ink: #E9EEF6; --pine-ink: #F3F7FC; --slate: #B4C0D1; --mist: #8C99AB;
  --pine: #4B86D6; --pine-hover: #5B95E2; --pine-soft: #24334A;
  --clay: #E67B70; --gold: #C9A15C; --gold-deep: #D9B375; --green: #4BBF8E;
  --line: #27313F; --line-2: #384556;
  --rail-ink: #E9EEF6; --rail-ink-dim: #AEBBCD;
  --tint-1: rgba(255,255,255,.04); --tint-2: rgba(255,255,255,.07); --tint-3: rgba(255,255,255,.10);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.35); --shadow-md: 0 12px 34px rgba(0,0,0,.5); --shadow: var(--shadow-md);
  --soft-blue: #1E3350; --soft-blue-ink: #9CC2F0; --soft-green: #17342A; --soft-green-ink: #7FD4A8;
  --soft-purple: #2B2647; --soft-purple-ink: #C1B3F0; --soft-amber: #3A2F16; --soft-amber-ink: #F0CF88;
  --soft-red: #3D2222; --soft-red-ink: #F2A39B; --soft-navy: #1F2C42; --soft-navy-ink: #C8D6EA;
  --border: #27313F;
}

/* ---------- base ---------- */
body { font-size: 15px; background: var(--paper); }
h1, h2, h3, .hero-greeting, .brand-title, .bb-big, .bb-hn { font-family: var(--serif); }
:focus-visible { outline: 2px solid var(--hillside-gold); outline-offset: 2px; }

/* ---------- login ---------- */
.login-scene {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(185,154,91,.18), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(27,45,74,.14), transparent 55%),
    var(--hillside-cream);
}
.login-card { box-shadow: var(--shadow-md); border-radius: 22px; }
.login-card .motto { color: var(--gold-deep); }

/* ---------- buttons ---------- */
.btn { border-radius: var(--radius-button); box-shadow: var(--shadow-sm); border-color: var(--border); background: var(--card); font-weight: 600; font-size: 14px; padding: 10px 18px; min-height: 42px; font-family: var(--sans); }
.btn:hover { background: var(--card-2); border-color: var(--hillside-gold); }
.btn:active { transform: translateY(1px) scale(.99); box-shadow: none; }
.btn.primary { background: var(--hillside-navy); border-color: var(--hillside-navy); color: #fff; }
.btn.primary:hover { background: var(--hillside-navy-soft); border-color: var(--hillside-navy-soft); }
.btn.gold { background: var(--gold-flat); border-color: var(--gold-flat); color: #fff; }
.btn.gold:hover { background: var(--gold-flat-hover); border-color: var(--gold-flat-hover); filter: none; }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.btn.ghost { box-shadow: none; }
[data-theme="dark"] .btn.primary { background: var(--pine); border-color: var(--pine); }

/* ---------- shell / sidebar ---------- */
.shell { grid-template-columns: 216px minmax(0, 1fr); }
.sidebar {
  padding: 26px 12px 0; gap: 0;
  background: linear-gradient(180deg, var(--hillside-navy) 0%, var(--hillside-navy-deep) 100%);
  border-right: none;
}
/* subtle mountain / lake treatment at the foot of the rail */
/* Reference: photo of ridgeline + treeline + still lake fading up into the navy. Rendered as
   layered SVG so the rail stays asset-free and PHI-safe (no external image requests). */
.sidebar::after {
  content: ""; display: block; flex: none; height: 190px; margin: 18px -12px 0;
  background:
    linear-gradient(180deg, var(--hillside-navy-deep) 0%, rgba(19,34,58,.55) 30%, rgba(19,34,58,0) 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 190' preserveAspectRatio='none'><defs><linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2313223A'/><stop offset='1' stop-color='%232A4A73'/></linearGradient><linearGradient id='lake' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23213A5E'/><stop offset='1' stop-color='%23101D33'/></linearGradient></defs><rect width='216' height='190' fill='url(%23sky)'/><path d='M0 96 L22 74 L44 88 L70 56 L96 82 L122 62 L148 86 L176 66 L198 84 L216 72 L216 190 L0 190Z' fill='%23233F66'/><path d='M0 112 L30 94 L58 108 L88 86 L118 104 L146 92 L174 108 L216 96 L216 190 L0 190Z' fill='%231B3357'/><path d='M0 128 L8 116 L14 128 L20 112 L26 128 L34 114 L40 128 L48 110 L56 128 L62 116 L68 128 L76 112 L84 128 L90 118 L96 128 L104 110 L112 128 L118 116 L124 128 L132 112 L140 128 L146 118 L152 128 L160 110 L168 128 L174 116 L180 128 L188 112 L196 128 L204 118 L210 128 L216 114 L216 190 L0 190Z' fill='%23132743'/><rect y='128' width='216' height='62' fill='url(%23lake)'/><path d='M0 128 L22 150 L44 136 L70 168 L96 142 L122 162 L148 138 L176 158 L198 140 L216 152 L216 128Z' fill='%23233F66' opacity='.22'/><path d='M0 136 L216 136' stroke='%23C9B27A' stroke-opacity='.18' stroke-width='.6'/><path d='M40 150 L120 150 M70 160 L180 160 M20 172 L140 172' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1.2' stroke-linecap='round'/></svg>") bottom / 100% 100% no-repeat;
}
.sidebar .brand { text-align: center; padding: 2px 6px 22px; border-bottom: none; margin-bottom: 10px; }
.sidebar .brand .mark { display: block; margin: 0 auto 6px; width: 118px; height: 58px; }
.sidebar { overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar .brand .name { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .14em; color: #fff; line-height: 1; }
.sidebar .brand .sub { font-size: 8.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--rail-ink-dim); margin-top: 7px; }
.nav { gap: 4px; }
.nav-item { padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--rail-ink); min-height: 46px; gap: 14px; position: relative; letter-spacing: .005em; }
.nav-item .em { width: 20px; height: 20px; opacity: 1; color: var(--rail-ink-dim); }
.nav-item:hover { background: var(--rail-hover); color: #fff; }
.nav-item:hover .em { color: #fff; }
.nav-item.active { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 3px 0 0 var(--hillside-gold); font-weight: 600; }
.nav-item.active .em { color: #fff; }
/* optional count badge on a nav item (gold disc, as in the reference) */
.nav-item .cnt { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; background: var(--hillside-gold); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.nav-sep { margin: 16px 14px 6px; font-size: 9.5px; letter-spacing: .24em; color: var(--rail-ink-dim); opacity: .55; }
.sidebar .spacer { flex: 1; min-height: 10px; }
/* tagline sits over the lake at the foot of the rail (reference) — pulled down over ::after */
.sidebar .rail-tag { position: relative; z-index: 1; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #fff; text-align: center; line-height: 1.9; opacity: .95; padding: 0 4px; margin-bottom: -172px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.sidebar .rail-tag::after { content: ""; display: block; width: 64px; height: 2px; background: var(--hillside-gold); margin: 10px auto 0; border-radius: 2px; }
.sidebar .sync-box, .sidebar .user-chip { display: none; } /* moved to the header */

/* ---------- header ---------- */
.main { padding: 24px clamp(22px, 3vw, 44px) 80px; }
.topbar { display: grid; grid-template-columns: auto minmax(220px, 560px) auto; align-items: center; gap: 28px; margin-bottom: 24px; padding-bottom: 0; border-bottom: none; }
.topbar .brand-block { min-width: 0; }
.topbar .brand-title { font-size: 32px; font-weight: 500; letter-spacing: -.005em; color: var(--hillside-navy); line-height: 1.05; white-space: nowrap; }
.topbar .brand-tag { font-size: 10px; letter-spacing: .34em; white-space: nowrap; text-transform: uppercase; color: var(--slate); margin-top: 8px; font-family: var(--sans); font-weight: 500; }
.topbar .page-crumb { font-size: 12.5px; color: var(--mist); margin-top: 6px; font-family: var(--sans); }
.topbar h1 { display: none; }
.searchbar { width: 100%; min-height: 46px; border-radius: 12px; background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow-sm); color: var(--mist); font-size: 14px; padding: 0 14px; gap: 12px; }
.searchbar:hover { border-color: var(--hillside-gold); }
.searchbar svg { color: var(--slate); }
.searchbar kbd { background: var(--sunken); color: var(--slate); border-radius: 6px; padding: 3px 7px; font-size: 11px; }
.topbar .right { display: flex; align-items: center; gap: 16px; justify-self: end; }
.sync-status { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 10px; text-align: left; box-shadow: none; }
.sync-status:hover { background: var(--tint-1); }
.sync-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(47,138,91,.16); flex: none; }
.sync-status .lbl { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.sync-status .sub { font-size: 11px; color: var(--mist); }
.sync-status.busy .dot { background: var(--hillside-gold); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hdr-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--slate); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); position: relative; }
.hdr-btn:hover { border-color: var(--hillside-gold); color: var(--ink); }
.hdr-btn .cnt { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--hillside-gold); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.themetog { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--card-edge); background: var(--card); color: var(--slate); box-shadow: var(--shadow-sm); display: grid; place-items: center; cursor: pointer; }
.themetog:hover { border-color: var(--hillside-gold); color: var(--ink); }
.user-chip { background: none; border: none; padding: 4px 6px; border-radius: 12px; gap: 12px; }
.user-chip:hover { background: var(--tint-1); }
.user-chip .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--hillside-navy); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.user-chip .who .n { color: var(--ink); font-size: 14px; font-weight: 600; }
.user-chip .who .r { color: var(--mist); font-size: 12px; text-transform: capitalize; }
.user-chip .chev { color: var(--mist); }

/* ---------- sub-tabs ---------- */
.subtabs { gap: 4px; margin: 4px 0 24px; padding: 4px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; width: max-content; max-width: 100%; box-shadow: var(--shadow-sm); }
.subtab { border: none; border-radius: 9px; background: transparent; color: var(--slate); font-size: 13.5px; font-weight: 500; padding: 8px 16px; }
.subtab:hover { background: var(--tint-1); color: var(--ink); }
.subtab.on { background: var(--hillside-navy); color: #fff; }
[data-theme="dark"] .subtab.on { background: var(--pine); }

/* ---------- cards ---------- */
.card { border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 24px 26px; border-color: var(--card-edge); background: var(--card); }
.card h3, .cc-h3, .panel-head h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--hillside-navy); }
.cc-h3 { margin: 4px 0 14px; }
.panel-head { margin-bottom: 18px; }
.panel-head .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--soft-navy); color: var(--hillside-navy); display: grid; place-items: center; }
[data-theme="dark"] .panel-head .ic { color: var(--soft-navy-ink); }
.panel-head .view-all, .card a.view-all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--hillside-navy); text-decoration: none; white-space: nowrap; font-family: var(--sans); }
.panel-head .view-all:hover, .card a.view-all:hover { color: var(--gold-deep); }
[data-theme="dark"] .panel-head .view-all { color: var(--soft-blue-ink); }
.eyebrow { color: var(--gold-deep); }
.muted { color: var(--mist); }
[data-theme="dark"] .card h3, [data-theme="dark"] .cc-h3, [data-theme="dark"] .panel-head h3, [data-theme="dark"] .topbar .brand-title { color: var(--pine-ink); }

/* ---------- hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 26px 30px 24px; margin: 0 0 18px; border-radius: var(--radius-card); overflow: hidden;
  background:
    linear-gradient(90deg, var(--hillside-cream) 0%, rgba(246,243,237,.92) 42%, rgba(246,243,237,.55) 70%, rgba(246,243,237,.25) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='xMaxYMax slice'><rect width='1200' height='240' fill='%23e9eef4'/><path d='M0 200 L120 130 L210 172 L330 96 L430 150 L540 84 L650 140 L760 70 L870 132 L980 88 L1090 140 L1200 100 L1200 240 L0 240Z' fill='%23c9d5e3'/><path d='M0 220 L150 172 L260 196 L400 150 L520 184 L660 140 L790 176 L930 138 L1060 176 L1200 148 L1200 240 L0 240Z' fill='%23aebfd3'/><path d='M0 240 L200 208 L330 224 L480 196 L640 218 L800 190 L960 214 L1120 192 L1200 206 L1200 240Z' fill='%238ea3bd'/></svg>") right center / cover no-repeat;
  border: 1px solid var(--line);
}
[data-theme="dark"] .hero { background: linear-gradient(90deg, var(--card) 0%, var(--card) 60%, var(--pine-soft) 100%); }
.hero-greeting { font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.02em; color: var(--pine-ink); line-height: 1.05; margin-bottom: 8px; }
.hero-sub { font-size: 16px; color: var(--slate); margin-bottom: 0; }
.hero .motto { text-align: right; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--pine-ink); line-height: 1.9; flex: none; padding-bottom: 6px; }
.hero .motto::after { content: ""; display: block; width: 56px; height: 2px; background: var(--hillside-gold); margin: 8px 0 0 auto; border-radius: 2px; }

/* ---------- KPI cards ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi-card { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; padding: 16px 16px 14px; border-radius: var(--radius-card); border: 1px solid var(--line); border-left-width: 1px; box-shadow: var(--shadow-sm); background: var(--card); transition: transform .15s, box-shadow .15s; }
.kpi-card[role="button"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card .kpi-ic { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--soft-navy); color: var(--hillside-navy); }
.kpi-card .kpi-ic svg { width: 22px; height: 22px; }
.kpi-label { font-size: 12.5px; color: var(--slate); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.kpi-num { font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: var(--pine-ink); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.kpi-num small { font-size: 12.5px; color: var(--mist); }
.kpi-meta { font-size: 11.5px; color: var(--slate); display: flex; align-items: flex-start; gap: 6px; line-height: 1.35; }
.kpi-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mist); flex: none; margin-top: 4px; }
.kpi-pine .kpi-ic { background: var(--soft-blue); color: var(--soft-blue-ink); } .kpi-pine .kpi-meta::before { background: var(--info); }
.kpi-green .kpi-ic { background: var(--soft-green); color: var(--soft-green-ink); } .kpi-green .kpi-meta::before { background: var(--success); } .kpi-green .kpi-num { color: var(--pine-ink); }
.kpi-gold .kpi-ic { background: var(--soft-amber); color: var(--soft-amber-ink); } .kpi-gold .kpi-meta::before { background: var(--hillside-gold); } .kpi-gold .kpi-num { color: var(--pine-ink); }
.kpi-purple .kpi-ic { background: var(--soft-purple); color: var(--soft-purple-ink); } .kpi-purple .kpi-meta::before { background: var(--purple); }
.kpi-red .kpi-ic { background: var(--soft-red); color: var(--soft-red-ink); } .kpi-red .kpi-meta::before { background: var(--danger); } .kpi-red .kpi-num { color: var(--danger); }
.kpi-red { border-color: rgba(194,76,68,.28); }
.kpi-card:not([class*="kpi-"]) .kpi-ic { background: var(--soft-navy); }
.meter { background: var(--sunken); }

/* ---------- quick actions ---------- */
.command-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.command-shortcut { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 14px; white-space: nowrap; border-radius: var(--radius-button); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; font-family: var(--sans); }
.command-shortcut svg { flex: none; color: var(--hillside-navy); }
.command-shortcut span:last-child { display: none; }
.command-shortcut:hover { border-color: var(--hillside-gold); background: var(--card-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.command-shortcut:active { transform: translateY(1px); box-shadow: none; }
.command-shortcut.qa-primary { background: var(--hillside-navy); border-color: var(--hillside-navy); color: #fff; }
.command-shortcut.qa-primary svg { color: #fff; }
.command-shortcut.qa-primary:hover { background: var(--hillside-navy-soft); border-color: var(--hillside-navy-soft); }
.command-shortcut.qa-gold { background: linear-gradient(180deg, #C6A76A, #AE8F50); border-color: #AE8F50; color: #fff; }
.command-shortcut.qa-gold svg { color: #fff; }
.command-shortcut.qa-gold:hover { filter: brightness(1.05); }
[data-theme="dark"] .command-shortcut.qa-primary { background: var(--pine); border-color: var(--pine); }
[data-theme="dark"] .command-shortcut svg { color: var(--soft-blue-ink); }

/* attention strip → calm banner */
.attention-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border: 1px solid var(--line); border-left: 4px solid var(--hillside-gold); border-radius: 14px; background: var(--card); margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.attention-strip > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.attention-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); width: 100%; font-weight: 700; }
.attention-strip strong { font-size: 17px; font-family: var(--serif); font-weight: 600; }
.attention-strip span:not(.attention-label) { font-size: 13.5px; color: var(--slate); }

/* ---------- pipeline stage tiles (overview) ---------- */
.stage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stage-tile { border-radius: 12px; padding: 14px 12px; text-align: center; border: 1px solid transparent; }
.stage-tile .sl { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.stage-tile .sn { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--pine-ink); font-variant-numeric: tabular-nums; }
.stage-tile.t-blue { background: var(--soft-blue); } .stage-tile.t-blue .sl { color: var(--soft-blue-ink); }
.stage-tile.t-amber { background: var(--soft-amber); } .stage-tile.t-amber .sl { color: var(--soft-amber-ink); }
.stage-tile.t-purple { background: var(--soft-purple); } .stage-tile.t-purple .sl { color: var(--soft-purple-ink); }
.stage-tile.t-green { background: var(--soft-green); } .stage-tile.t-green .sl { color: var(--soft-green-ink); }
.stage-tile.t-navy { background: var(--soft-navy); } .stage-tile.t-navy .sl { color: var(--soft-navy-ink); }
.stage-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--sunken); gap: 2px; margin: 4px 0 12px; }
.stage-bar i { display: block; height: 100%; }
.stage-bar .b-blue { background: #9CC1EA; } .stage-bar .b-amber { background: #E5CB8C; } .stage-bar .b-purple { background: #C4B6E8; } .stage-bar .b-green { background: #8DC8A5; } .stage-bar .b-navy { background: #9EB0CB; }
.stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--slate); flex-wrap: wrap; }
.stage-foot .up { color: var(--success); font-weight: 600; }

/* ---------- mini bed board (overview) ---------- */
.census-card { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 22px 24px; align-items: stretch; gap: 20px; display: block; }
.census-card:hover { box-shadow: var(--shadow-md); }
.bb-mini { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.bb-mini-legend { display: flex; gap: 14px; font-size: 12px; color: var(--slate); margin-bottom: 10px; flex-wrap: wrap; }
.bb-mini-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bb-mini-rows { display: grid; gap: 7px; }
.bb-mini-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; }
.bb-mini-row .lb { font-size: 12px; color: var(--mist); white-space: nowrap; }
.bb-mini-row .cells { display: grid; grid-template-columns: repeat(8, 26px); gap: 6px; }
.bb-mini-row .cell { aspect-ratio: 1; border-radius: 6px; background: #79B48F; }
.bb-mini-row .cell.open { background: transparent; border: 1.5px solid var(--line-2); }
.bb-mini-row .cell.hold { background: var(--line-2); }
.bb-mini-stats { background: var(--sunken); border-radius: 12px; padding: 16px 18px; min-width: 150px; display: grid; gap: 10px; align-content: start; }
.bb-mini-stats .big { font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: var(--pine-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.bb-mini-stats .mid { font-size: 18px; font-weight: 600; color: var(--pine-ink); line-height: 1.1; }
.bb-mini-stats .lb { font-size: 12px; color: var(--slate); }
.census-eyebrow { color: var(--gold-deep); }
.census-note { color: var(--mist); font-size: 12.5px; margin-top: 12px; }

/* ---------- alerts card ---------- */
.alert-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border-bottom: none; }
.alert-row .aic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.alert-row .aic.danger { background: var(--soft-red); color: var(--soft-red-ink); }
.alert-row .aic.amber { background: var(--soft-amber); color: var(--soft-amber-ink); }
.alert-row .aic.info { background: var(--soft-blue); color: var(--soft-blue-ink); }
.alert-row .t { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.alert-row .s { font-size: 12px; color: var(--mist); }
.alert-row .when { font-size: 12px; color: var(--mist); white-space: nowrap; }

/* ---------- lists ---------- */
.list-row { padding: 11px 4px; }
.list-row .t { font-size: 13.5px; }

/* ---------- pills & badges ---------- */
.pill, .badge { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; text-transform: capitalize; line-height: 1.3; white-space: nowrap; }
.pill { background: var(--soft-navy); color: var(--soft-navy-ink); }
.pill.accent, .badge.st-admit { background: var(--soft-green); color: var(--soft-green-ink); }
.pill.blue, .badge.st-active { background: var(--soft-blue); color: var(--soft-blue-ink); }
.pill.amber { background: var(--soft-amber); color: var(--soft-amber-ink); }
.pill.purple { background: var(--soft-purple); color: var(--soft-purple-ink); }
.pill.danger, .badge.st-decline { background: var(--soft-red); color: var(--soft-red-ink); }

/* ---------- tables ---------- */
/* Reference: sentence-case header on a cream band, hairline rows, no zebra. */
.twrap { border-radius: 12px; box-shadow: none; border: 1px solid var(--card-edge); background: var(--card); overflow: hidden; }
.twrap table { font-size: 13.5px; }
.twrap th { background: #F7F5F0; color: var(--slate); font-size: 12.5px; letter-spacing: 0; text-transform: none; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
.twrap td { padding: 13px 16px; color: var(--slate); border-top: 1px solid var(--line); vertical-align: middle; }
.twrap tr:first-child td { border-top: none; }
.twrap td strong { color: var(--ink); font-weight: 600; }
.twrap tr:hover td { background: var(--tint-1); }
[data-theme="dark"] .twrap th { background: var(--card-2); }
.md table { display: table; }
.md th { background: #F7F5F0; color: var(--slate); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
[data-theme="dark"] .md th { background: var(--card-2); }
.md th, .md td { padding: 10px 14px; border-color: var(--line); }
.md code { color: var(--hillside-navy); }
[data-theme="dark"] .md code { color: #B9CBE2; }

/* ---------- pipeline board (Incoming Referrals) ---------- */
.board { gap: 14px; }
.col { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-card); }
[data-theme="dark"] .col { background: var(--card-2); }
.col-head .n { color: var(--slate); }
.kcard { border-radius: 12px; box-shadow: var(--shadow-sm); border-color: var(--line); }
.kcard:hover { border-color: var(--hillside-gold); }
.nr-in { border-radius: 10px; background: var(--card); }

/* ---------- forms ---------- */
.field input, .field select, .field textarea, .task-add input, .task-add select, .dump-meta input, .dump-meta select, .bb-form input, .bb-form select, .rsm-form-group input, .rsm-form-group select, .rsm-form-group textarea { border-radius: 10px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 10px 12px; min-height: 42px; box-shadow: 0 1px 2px rgba(20,36,60,.03); }
.field textarea, .rsm-form-group textarea { min-height: 96px; }
.field label, .rsm-form-group label { font-size: 12px; font-weight: 600; color: var(--slate); letter-spacing: .02em; }
.field input:focus, .field select:focus, .field textarea:focus, .task-add input:focus, .dump-meta input:focus, .bb-form input:focus, .bb-form select:focus, .rsm-form-group input:focus, .rsm-form-group select:focus, .rsm-form-group textarea:focus { border-color: var(--hillside-navy); box-shadow: 0 0 0 3px rgba(27,45,74,.12); background: var(--card); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--mist); }
.checkbox.on { color: #fff; }
.seg { border-radius: 12px; }
.seg button.on { background: var(--hillside-navy); }

/* ---------- census / bed board screen ---------- */
.bb-head { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 20px 24px; }
.bb-big { font-size: 38px; color: var(--pine-ink); }
.bb-hn { color: var(--pine-ink); }
.bb-big span, .bb-hn span { color: var(--mist); opacity: 1; }
.bb-cap { color: var(--gold-deep); opacity: 1; font-weight: 700; }
.bb-opens { color: var(--success); opacity: 1; }
.bb-meta { color: var(--slate); opacity: 1; }
.bb-grid { gap: 12px; }
.bb-room { border-radius: 14px; box-shadow: var(--shadow-sm); padding: 12px 14px; }
.bb-bed { border-radius: 10px; background: var(--soft-green); border-color: transparent; }
.bb-bed .bb-name { color: var(--soft-green-ink); }
.bb-bed .bb-id { color: var(--soft-green-ink); opacity: .8; }
.bb-bed.open { background: transparent; border: 1.5px dashed var(--line-2); }
.bb-bed.open .bb-id { color: var(--mist); }
.bb-bed:hover { border-color: var(--hillside-gold); }
.bb-bed.sel { border-color: var(--hillside-gold); box-shadow: 0 0 0 3px rgba(185,154,91,.28); }
.bb-panel { border-left: 3px solid var(--hillside-gold); }

/* ---------- funnel / charts ---------- */
.funnel-track { background: var(--sunken); border-radius: 8px; }
.fn-pine { background: var(--hillside-navy); } .fn-gold { background: var(--hillside-gold); } .fn-green { background: var(--success); }
.hrow .track, .bars-h .track { background: var(--sunken); }
.hrow .fill { background: var(--hillside-navy); }
.bars-h .fill { background: var(--success); }
.chart-wrap svg text { fill: var(--slate); }
.heat-cell { background: var(--sunken); }
.heat-1 { background: #E5D8B8; } .heat-2 { background: #D3BC84; } .heat-3 { background: var(--hillside-gold); } .heat-4 { background: #8A6D34; }
[data-theme="dark"] .heat-cell { background: #1E2733; }

/* ---------- brain / modal / toast ---------- */
.pane { border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.folder-item.active { background: var(--hillside-navy); }
.note-item.active { background: var(--soft-navy); }
.overlay { background: rgba(23,34,52,.42); }
.modal { border-radius: 20px; box-shadow: var(--shadow-md); }
.search-input { border-radius: 14px; box-shadow: var(--shadow-md); }
.toast { background: var(--hillside-navy); color: #fff; border-color: var(--hillside-navy); }
.toast.err { background: #7A2E2A; border-color: #7A2E2A; color: #fff; }
.mapdiv .leaflet-tile { filter: saturate(.85) contrast(1.02); }
[data-theme="dark"] .mapdiv .leaflet-tile { filter: brightness(.62) saturate(.75) contrast(1.08); }
.rsm-btn-submit { background: var(--hillside-navy); color: #fff; border-radius: 10px; }
.rsm-btn-back { border-radius: 10px; }
.rsm-btn-status { border-radius: 12px; }
.dropzone { border-radius: var(--radius-card); }

/* ---------- footer ---------- */
.ws-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--slate); }
.ws-footer .fl b { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--hillside-navy); font-weight: 700; margin-bottom: 4px; }
/* reference: gold ridgeline glyph beside the closing tagline */
.ws-footer .fr { display: flex; align-items: center; gap: 22px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); text-align: right; line-height: 1.8; }
.ws-footer .fr::before { content: ""; flex: none; width: 96px; height: 26px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32' fill='none' stroke='%23B4955A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 28 L26 8 L40 20 L56 4 L80 24 L94 14 L118 28'/><path d='M2 28 Q40 22 74 26 T118 28' stroke-opacity='.45'/></svg>") center / contain no-repeat; }
[data-theme="dark"] .ws-footer .fr { color: var(--slate); }
[data-theme="dark"] .ws-footer .fl b { color: var(--pine-ink); }

/* ============================================================
   PHASE 2 — Overview (Today) composition, per reference 2026-09-09
   Markup lives in ccOverview(); this block only styles it.
   ============================================================ */
/* hero: borderless band, copy left, motto right, soft ridgeline + treeline art fading from cream */
.hero {
  border: none; box-shadow: none; padding: 30px 32px 28px; margin: 0 0 20px; min-height: 150px;
  background:
    linear-gradient(90deg, var(--hillside-cream) 0%, rgba(245,242,236,.96) 34%, rgba(245,242,236,.72) 58%, rgba(245,242,236,.18) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 260' preserveAspectRatio='xMaxYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23EEF2F6'/><stop offset='1' stop-color='%23DCE5EE'/></linearGradient></defs><rect width='1400' height='260' fill='url(%23s)'/><path d='M0 210 L110 150 L200 186 L330 108 L440 168 L560 96 L680 152 L800 84 L920 146 L1040 100 L1160 150 L1280 112 L1400 140 L1400 260 L0 260Z' fill='%23C6D3E0'/><path d='M0 232 L140 186 L260 206 L400 162 L540 196 L700 152 L840 188 L1000 150 L1140 186 L1280 156 L1400 172 L1400 260 L0 260Z' fill='%23A9BBCD'/><path d='M0 260 L0 236 L18 224 L26 240 L40 218 L52 240 L70 214 L84 240 L100 222 L114 240 L132 212 L150 240 L166 226 L180 240 L198 216 L214 240 L232 224 L248 240 L266 212 L284 240 L300 226 L316 240 L336 216 L354 240 L372 224 L388 240 L408 212 L428 240 L446 226 L462 240 L482 216 L500 240 L520 224 L538 240 L558 212 L578 240 L596 226 L612 240 L632 216 L652 240 L672 224 L690 240 L710 212 L730 240 L748 226 L764 240 L784 216 L804 240 L824 224 L842 240 L862 212 L882 240 L900 226 L916 240 L936 216 L956 240 L976 224 L994 240 L1014 212 L1034 240 L1052 226 L1068 240 L1088 216 L1108 240 L1128 224 L1146 240 L1166 212 L1186 240 L1204 226 L1220 240 L1240 216 L1260 240 L1280 224 L1298 240 L1318 212 L1338 240 L1356 226 L1372 240 L1392 216 L1400 232 L1400 260Z' fill='%237F97B1'/><rect y='240' width='1400' height='20' fill='%236E88A4'/></svg>") right bottom / cover no-repeat;
}
[data-theme="dark"] .hero { background: linear-gradient(90deg, var(--card) 0%, var(--card) 55%, var(--pine-soft) 100%); }
.hero-copy { min-width: 0; }
.hero-greeting { font-size: clamp(34px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.02em; color: var(--hillside-navy); margin-bottom: 8px; }
[data-theme="dark"] .hero-greeting { color: var(--pine-ink); }
.hero-sub { font-size: 17px; color: var(--slate); }
.hero .motto { font-size: 10.5px; letter-spacing: .32em; color: var(--ink); line-height: 2; }

/* KPI cards: icon tile, label, big number, meta line with a tinted dot */
.kpi-row { gap: 16px; margin-bottom: 18px; }
.kpi-card { grid-template-columns: 52px 1fr; gap: 2px 14px; padding: 18px 18px 16px; border-color: var(--card-edge); cursor: pointer; }
.kpi-card .kpi-ic { width: 52px; height: 52px; border-radius: 14px; }
.kpi-card .kpi-ic svg { width: 24px; height: 24px; }
.kpi-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.kpi-num { font-size: 32px; line-height: 1.15; }
.kpi-num small { margin-left: 6px; font-size: 13px; color: var(--mist); font-weight: 500; }
.kpi-meta { margin-top: 6px; font-size: 12px; }
.kpi-meta::before { display: none; }
.kpi-meta .km-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mist); flex: none; margin-top: 4px; }
.kpi-pine .km-dot { background: var(--info); } .kpi-green .km-dot { background: var(--success); }
.kpi-gold .km-dot { background: var(--hillside-gold); } .kpi-purple .km-dot { background: var(--purple); } .kpi-red .km-dot { background: var(--danger); }
.kpi-red { border-color: rgba(194,76,68,.22); }

/* quick actions sit under the KPIs; flat gold + navy primaries */
.command-actions { gap: 14px; margin: 0 0 18px; }
.command-shortcut { min-height: 54px; border-color: var(--card-edge); }
.command-shortcut.qa-gold { background: var(--gold-flat); border-color: var(--gold-flat); }
.command-shortcut.qa-gold:hover { background: var(--gold-flat-hover); border-color: var(--gold-flat-hover); filter: none; }

.attention-strip { border-color: var(--card-edge); border-left: 4px solid var(--hillside-gold); }

/* overview grids */
.ov-main { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.ov-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.ov-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.ov-three { align-items: start; }
.ov-main > .card, .ov-main > .census-card, .ov-three > .card, .ov-two > .card { margin-bottom: 0; min-width: 0; }
.census-card { cursor: pointer; border-color: var(--card-edge); }
.panel-head .ic { width: 34px; height: 34px; border-radius: 10px; }
.panel-head .ic svg { width: 17px; height: 17px; }

/* pipeline stage tiles + bar, per reference */
.stage-tiles { gap: 12px; margin-bottom: 16px; }
.stage-tile { padding: 16px 12px 14px; border-radius: 14px; }
.stage-tile .sl { font-size: 13px; }
.stage-tile .sn { font-size: 30px; }
.stage-bar { height: 12px; border-radius: 8px; margin: 2px 0 14px; }

/* mini bed board */
.bb-mini-legend { gap: 16px; font-size: 12.5px; }
.bb-mini-legend .lg-occ { background: #6FAE84; }
.bb-mini-legend .lg-open { border: 1.5px solid var(--line-2); }
.bb-mini-row .cells { grid-template-columns: repeat(8, 28px); gap: 7px; }
.bb-mini-row .cell { border-radius: 7px; background: #6FAE84; }
.bb-mini-row .cell.open { border: 1.5px solid var(--line-2); background: transparent; }
.bb-mini-stats { background: #F6F3ED; border-radius: 14px; padding: 18px 20px; min-width: 160px; }
[data-theme="dark"] .bb-mini-stats { background: var(--sunken); }
.bb-mini-stats .big { font-size: 34px; }

/* tables inside overview cards sit flush to the card edge */
.twrap.flush { border: none; border-radius: 0; margin: 0 -26px -8px; }
.twrap.flush th:first-child, .twrap.flush td:first-child { padding-left: 26px; }
.twrap.flush th:last-child, .twrap.flush td:last-child { padding-right: 26px; }
.twrap.flush table { table-layout: auto; }
.twrap .clip { display: block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.twrap.flush table { width: 100%; font-size: 12.5px; }
.twrap.flush th { padding: 10px 10px; font-size: 12px; }
.twrap.flush td { padding: 11px 10px; }
.twrap.flush th:first-child, .twrap.flush td:first-child { padding-left: 22px; }
.twrap.flush th:last-child, .twrap.flush td:last-child { padding-right: 22px; }
.twrap.flush .clip { max-width: 118px; }
.twrap.flush td strong.clip { display: block; max-width: 128px; }
.twrap.flush .pill { font-size: 11px; padding: 3px 9px; }

/* stage tiles are links into Incoming Referrals */
a.stage-tile { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
a.stage-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* alert severities: red urgent, amber attention, blue informational, green resolved */
.alert-row .aic.info { background: var(--soft-blue); color: var(--soft-blue-ink); }
.alert-row .aic.accent, .alert-row .aic.success { background: var(--soft-green); color: var(--soft-green-ink); }
.pill.info { background: var(--soft-blue); color: var(--soft-blue-ink); }

.kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.searchbar span, .searchbar .ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-mini { flex-wrap: wrap; }
.bb-mini-stats { min-width: 140px; flex: 1 1 140px; }

/* MacBook-width (13"/14" at default scaling): three-card row drops to two columns, header tightens */
@media (max-width: 1480px) {
  .ov-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-three > .card:last-child { grid-column: 1 / -1; }
  .topbar { grid-template-columns: auto minmax(200px, 1fr) auto; gap: 18px; }
  .topbar .brand-title { font-size: 26px; }
  .topbar .brand-tag { font-size: 9px; letter-spacing: .28em; }
  .kpi-card { padding: 16px 14px 14px; gap: 2px 12px; grid-template-columns: 46px 1fr; }
  .kpi-card .kpi-ic { width: 46px; height: 46px; border-radius: 12px; }
  .kpi-num { font-size: 28px; }
  .kpi-label { font-size: 12.5px; }
  .kpi-meta { font-size: 11.5px; }
  .command-shortcut { min-height: 50px; font-size: 13px; }
}
@media (max-width: 1360px) {
  .ov-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1250px) {
  .ov-three > .card:last-child { grid-column: auto; }
}
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   PHASE 4 — Admissions Pipeline (Incoming Referrals), per reference
   Markup lives in ccPipeline(); this block only styles it.
   ============================================================ */
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 4px 0 20px; }
.adm-title { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.01em; color: var(--hillside-navy); margin: 0 0 6px; line-height: 1.1; }
[data-theme="dark"] .adm-title { color: var(--pine-ink); }
.adm-sub { margin: 0; color: var(--slate); font-size: 14px; max-width: 720px; }
.adm-head .btn { white-space: nowrap; }

.adm-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; }
.adm-kpis .kpi-num small { font-size: 12px; }

.adm-new { padding: 18px 22px; margin-bottom: 14px; }
.adm-new-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.adm-new-head h3 { margin: 0; font-size: 17px; }
.adm-new-head .ic { width: 30px; height: 30px; border-radius: 9px; }
.adm-new-head .muted { font-size: 12.5px; }
.adm-new-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.adm-new-row .nr-in { min-height: 42px; padding: 9px 12px; font-size: 13.5px; border-radius: 10px; }
.adm-new-row .btn { min-height: 42px; }

.adm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.adm-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--slate); }
.adm-search input { flex: 1; border: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; min-width: 0; }
.adm-search input::placeholder { color: var(--mist); }
.adm-search:focus-within { border-color: var(--hillside-navy); box-shadow: 0 0 0 3px rgba(27,45,74,.10); }
.adm-toolbar .nr-in { min-height: 42px; border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.adm-toolbar .muted { font-size: 12.5px; margin-left: auto; }

.adm-board { grid-auto-columns: minmax(236px, 1fr); gap: 14px; padding-bottom: 20px; }
.adm-col { background: transparent; border: none; border-radius: 0; padding: 0; min-height: 320px; }
.adm-col .col-head { padding: 0 4px 12px; border-bottom: 2px solid var(--line); margin-bottom: 12px; }
.adm-col .col-head .n { font-size: 12px; letter-spacing: .08em; font-weight: 700; color: var(--slate); }
.adm-col .col-head .pill { background: var(--card); border: 1px solid var(--line); color: var(--slate); font-size: 11.5px; }
.adm-col.t-blue .col-head { border-bottom-color: #9CC1EA; }
.adm-col.t-amber .col-head { border-bottom-color: #E5CB8C; }
.adm-col.t-purple .col-head { border-bottom-color: #C4B6E8; }
.adm-col.t-green .col-head { border-bottom-color: #8DC8A5; }
.adm-col.t-red .col-head { border-bottom-color: #E3A9A4; }
.adm-col .col-body { display: flex; flex-direction: column; gap: 10px; }
.adm-empty { padding: 26px 8px; font-size: 13px; background: var(--card); border: 1px dashed var(--line-2); border-radius: 12px; }
.adm-hidden { font-size: 11.5px; color: var(--mist); padding: 10px 4px 0; text-align: center; }

.adm-card { margin: 0; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--card-edge); box-shadow: var(--shadow-sm); }
.adm-card:hover { border-color: var(--hillside-gold); box-shadow: var(--shadow-md); }
.adm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adm-card .name { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; }
.adm-card .when { flex: none; font-size: 11.5px; color: var(--mist); white-space: nowrap; margin-top: 2px; }
.adm-card-src { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--slate); margin: 4px 0 8px; }
.adm-card-src svg { color: var(--mist); flex: none; }
.adm-card .meta { margin-bottom: 0; gap: 6px; }
.adm-card .meta:empty { display: none; }
.adm-card .meta .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.adm-blockers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.adm-blk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 8px; }
.adm-blk.amber { background: var(--soft-amber); color: var(--soft-amber-ink); }
.adm-blk.danger { background: var(--soft-red); color: var(--soft-red-ink); }
.adm-card .card-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.adm-card .card-actions .btn { flex: 1; min-height: 34px; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
.adm-card .rsm-btn-admit { background: var(--soft-green); border-color: transparent; color: var(--soft-green-ink); }
.adm-card .rsm-btn-admit:hover { background: var(--success); color: #fff; }
.adm-card .rsm-btn-deny { background: var(--card); border-color: var(--line); color: var(--slate); }
.adm-card .rsm-btn-deny:hover { background: var(--soft-red); border-color: transparent; color: var(--soft-red-ink); }

/* reconcile strip in the same language: gold rule, quiet copy */
#reconStrip > .card { border-left: 4px solid var(--hillside-gold) !important; padding: 16px 22px; margin-bottom: 14px !important; }
#reconStrip .recon-row { border-top-color: var(--line); }

@media (max-width: 1480px) { .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .adm-head { flex-direction: column; align-items: flex-start; } .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ov-three, .ov-two { grid-template-columns: minmax(0, 1fr); }
  .twrap.flush { margin: 0 -18px -6px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1250px) {
  .command-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topbar { grid-template-columns: auto minmax(180px, 1fr) auto; gap: 14px; }
  .topbar .brand-title { font-size: 22px; }
}
@media (max-width: 1000px) {
  .sync-status .lbl, .sync-status .sub, .user-chip .who, .user-chip .chev { display: none; }
  .hero .motto { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--hillside-navy); }
  .sidebar::after, .sidebar .brand, .sidebar .rail-tag { display: none; }
  .nav-item { flex-direction: column; gap: 3px; font-size: 9.5px; min-height: 52px; padding: 6px 9px; }
  .nav-item.active { box-shadow: none; background: rgba(255,255,255,.12); }
  .main { padding: 16px 14px 120px; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar .searchbar { grid-column: 1 / -1; }
  .topbar .brand-tag, .topbar .page-crumb { display: none; }
  .hero { padding: 20px 18px; }
  .hero-greeting { font-size: 26px; }
  .command-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attention-strip { flex-direction: column; align-items: stretch; }
  #tabBody > .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .card { padding: 18px; min-width: 0; }
  .subtabs { flex-wrap: nowrap; overflow-x: auto; width: auto; }
  .subtab { white-space: nowrap; flex-shrink: 0; }
  .bb-mini { grid-template-columns: 1fr; }
  .bb-mini-stats { grid-template-columns: repeat(3, 1fr); }
  .ws-footer .fr { text-align: left; }
}

/* Reference calibration — September 11. Presentation only. */
:root { --hillside-cream:#f8f7f4; --hillside-navy:#102d4c; --hillside-gold:#b3925a; --radius-card:12px; }
html:not([data-theme="dark"]) body { background:#f8f7f4; color:#102d4c; }
@media (min-width:861px) {
 .shell { grid-template-columns:210px minmax(0,1fr); }
 .sidebar { background:#142c3e; padding:22px 13px 24px; overflow-y:auto; }
 .sidebar .brand { padding:0 12px 22px; }
 .sidebar .brand .name { font-size:28px; letter-spacing:.08em; }
 .sidebar .brand .sub { font-size:11px; letter-spacing:.15em; }
 .nav-item { min-height:44px; padding:11px 13px; margin-bottom:5px; font-size:14px; gap:14px; }
 .nav-item.active { background:rgba(255,255,255,.11); box-shadow:inset 2px 0 #bd9c61; border-radius:7px; }
 .main { padding:22px 24px 24px 18px; }
 .topbar { gap:22px; margin-bottom:10px; grid-template-columns:minmax(270px,1fr) minmax(260px,1.2fr) auto; }
 .topbar .brand-title { font-family:Georgia,serif; font-size:34px; letter-spacing:-1px; }
 .topbar .brand-tag { font-size:10px; letter-spacing:.36em; }
 .searchbar { min-height:42px; border-radius:10px; }
 .hero { padding:24px 14px 22px; min-height:118px; margin-bottom:14px; border-radius:0; }
 .hero-greeting { font-family:Georgia,serif; font-weight:700; font-size:38px; line-height:1.15; }
 .hero-sub { font-size:18px; }
 .kpi-row { gap:10px; margin-bottom:14px; }
 .kpi-card { min-width:0; padding:16px 14px; grid-template-columns:46px minmax(0,1fr); gap:4px 12px; min-height:122px; }
 .kpi-card .kpi-ic { width:46px; height:54px; border-radius:10px; }
 .kpi-num { font-family:Georgia,serif; font-size:36px; }
 .kpi-label { font-size:13px; }
 .kpi-meta { font-size:12px; }
 .command-actions { gap:12px; margin-bottom:16px; }
 .command-shortcut { min-height:52px; border-radius:10px; font-size:14px; }
 .ov-main { grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:14px; }
 .ov-three { grid-template-columns:1.15fr 1fr .92fr; gap:14px; }
 .card, .census-card { border-radius:12px; padding:18px; box-shadow:0 3px 16px rgba(29,45,62,.025); }
 .panel-head h3 { font-family:Georgia,serif; font-size:22px; font-weight:700; }
 .ws-footer { border:0; margin-top:18px; padding:8px 16px; }
}
html:not([data-theme="dark"]) .card, html:not([data-theme="dark"]) .kpi-card, html:not([data-theme="dark"]) .census-card { background:rgba(255,255,255,.97); border-color:#e6e7e8; }
@media (min-width:861px) and (max-width:1250px) {
 .topbar { grid-template-columns:1fr auto; }
 .topbar .searchbar { grid-column:1/-1; grid-row:2; }
 .topbar .brand-title { font-size:30px; }
 .kpi-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ov-main,.ov-three { grid-template-columns:minmax(0,1fr); }
}
@media (min-width:1251px) { .kpi-row { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
@media (min-width:861px) {
 html:not([data-theme="dark"]) .hero { background:linear-gradient(90deg,#f8f7f4 0%,rgba(248,247,244,.93) 28%,rgba(248,247,244,.5) 64%,rgba(248,247,244,.18)),url('/assets/hillside-mountains.png') center 45%/cover no-repeat; }
 .sidebar { background:linear-gradient(180deg,#142c3e 0%,#142c3e 57%,rgba(20,44,62,.78) 75%,rgba(20,44,62,.65)),url('/assets/hillside-mountains.png') 62% bottom/auto 52% no-repeat,#142c3e; }
 .sidebar::after { display:none; }
}
/* Final desktop composition: reference proportions, real operational metrics. */
.kpi-card { text-decoration:none; color:inherit; }
.nav-item { white-space:normal; overflow-wrap:normal; }
.hero { position:relative; isolation:isolate; }
html:not([data-theme="dark"]) .hero::after { content:""; position:absolute; z-index:-1; right:0; top:0; bottom:0; width:32%; background:url('/assets/hillside-property.webp') 60% 50%/cover; mask-image:linear-gradient(90deg,transparent,#000 40%); opacity:.8; }
.hero .motto { margin-right:25%; }
@media(min-width:1251px) {
 .kpi-row { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .main { padding-top:18px; }
 .topbar { margin-bottom:0; min-height:60px; }
 .subtabs { margin:0 0 4px auto; padding:2px; box-shadow:none; background:transparent; }
 .subtab { padding:5px 12px; min-height:28px; font-size:12px; }
 .hero { min-height:90px; padding:10px 14px 18px; margin-bottom:12px; }
 .hero-greeting { font-size:36px; margin-bottom:4px; }
 .hero-sub { font-size:17px; }
 .kpi-card { padding:14px 12px; min-height:122px; grid-template-columns:42px minmax(0,1fr); gap:2px 10px; }
 .kpi-card .kpi-ic { width:42px; height:52px; }
 .kpi-label { font-size:12px; line-height:1.35; }
 .kpi-num { font-size:34px; }
 .kpi-num small { font-size:12px; margin-left:3px; }
 .kpi-meta { grid-column:2; line-height:1.35; font-size:11px; }
 .ov-main { margin-bottom:14px; }
 .stage-tile { padding:14px 8px!important; border-radius:8px; }
 .stage-tile .sn { font-size:28px; }
 .stage-tiles { gap:9px; }
 .stage-foot { font-size:12px; }
 .bb-mini-stats { padding:14px; border-radius:9px; }
 .ov-three > .card:last-child { grid-column:auto; }
 .ov-three .panel-head h3 { font-size:19px; }
 .ov-three .card { min-height:240px; }
 .sidebar .brand { padding-bottom:12px; }
 .sidebar .brand .name { font-family:Arial,sans-serif; font-weight:400; }
 .sidebar .nav-sep { margin:10px 12px 8px; }
 .nav-item { min-height:42px; margin-bottom:3px; font-size:13px; }
}
@media(max-width:860px) {
 html:not([data-theme="dark"]) .hero { background:linear-gradient(90deg,#f8f7f4,rgba(248,247,244,.65)),url('/assets/hillside-mountains.png') center/cover; }
 .hero::after { display:none; }
 .hero .motto { margin:0; }
 .nav-item { min-width:76px; font-size:11px; }
 .topbar { gap:10px; margin-bottom:12px; }
 .hero { min-height:110px; padding:16px; }
}

/* Keep the overview compact while retaining every record below it. */
@media(min-width:1251px) {
 .hero { min-height:76px; padding-top:4px; padding-bottom:10px; border:0; box-shadow:none; }
 .kpi-card { padding-top:10px; padding-bottom:10px; }
 .ov-main > .card { padding:16px; }
 .ov-main .panel-head { margin-bottom:12px; }
 .stage-tile { padding:10px 8px!important; }
 .bb-mini-stats { gap:8px; padding:12px; }
 .bb-mini-row .cells { grid-template-columns:repeat(8,26px); gap:6px; }
 .bb-mini-row .cell { border-radius:5px; }
 .ov-three { align-items:stretch; }
 .ov-three > .card { max-height:280px; overflow:auto; }
 .ov-three td { padding-top:9px; padding-bottom:9px; }
}

@media(max-width:860px) {
 .bb-mini > div { min-width:0; }
 .bb-mini-row { grid-template-columns:64px minmax(0,1fr); gap:6px; }
 .bb-mini-row .cells { grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
 .bb-mini-stats { min-width:0; }
 .kpi-card { grid-template-columns:38px minmax(0,1fr); gap:6px 10px; padding:14px 12px; }
 .kpi-card .kpi-ic { width:38px; height:44px; }
 .kpi-meta { grid-column:1/-1; }
}