/* ————————————————————————————————————————————————————————————
   Homestead Mission Control — glass system.
   HUD cockpit language (glass panels, blur 22, hairlines, inset
   highlight, 20px radius) recolored into the homestead palette:
   spruce green + brass over a forest-night atmosphere.
   ———————————————————————————————————————————————————————————— */
:root {
  --glass: linear-gradient(135deg, rgba(140, 184, 154, 0.09), rgba(140, 184, 154, 0.025));
  --glass-strong: linear-gradient(135deg, rgba(140, 184, 154, 0.16), rgba(140, 184, 154, 0.05));
  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.28);
  --blur: blur(22px) saturate(105%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 40px rgba(0, 0, 0, 0.5);
  --ink: #040604;
  --text: #e9eee9;
  --text-dim: #93a094;
  --spruce: #8fc6a2;
  --spruce-deep: #5d8a6e;
  --spruce-soft: rgba(143, 198, 162, 0.14);
  --brass: #e0b34c;
  --brass-soft: rgba(224, 179, 76, 0.14);
  --good: #42c88c;
  --watch: #e0b34c;
  --dead: #e0574c;
  --dead-soft: rgba(224, 87, 76, 0.14);
  --bar: #8fc6a2;
  --radius: 20px;
  /* legacy tokens from the board pages, remapped */
  --ground: transparent;
  --panel: rgba(255, 255, 255, 0.06);
  --line: var(--hairline);
  --ink-soft: var(--text-dim);
}
* { box-sizing: border-box; }
html { background: #000; color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background:
    radial-gradient(90% 70% at 75% -10%, rgba(143, 198, 162, 0.13), transparent 60%),
    radial-gradient(70% 55% at 10% 108%, rgba(224, 179, 76, 0.07), transparent 55%),
    radial-gradient(120% 90% at 50% 50%, rgba(10, 22, 14, 0.9), rgba(3, 6, 4, 1) 75%),
    #030604;
  background-attachment: fixed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55; font-size: 15.5px;
  padding-bottom: 40px;
}
.sans, .mono { font-family: inherit; }
.mono, .meta, .tmeta, .fitcell .n { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 22px 64px; }

/* Topbar nav — glass sheet */
.hs-topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  background: linear-gradient(rgba(4, 8, 5, 0.72), rgba(4, 8, 5, 0.55));
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 4px;
  padding: 10px 18px; flex-wrap: wrap;
}
.hs-topbar .brand {
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); margin-right: 18px; text-decoration: none;
}
.hs-topbar a.nav {
  color: var(--text-dim); text-decoration: none; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; letter-spacing: 0.02em;
}
.hs-topbar a.nav:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.hs-topbar a.nav.active {
  color: var(--ink); background: var(--spruce);
}
.hs-topbar .right { margin-left: auto; font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }

/* Headers */
.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); font-weight: 700;
}
header { border: none; padding: 26px 0 8px; margin-bottom: 22px; }
header h1 {
  margin: 8px 0 6px; font-size: clamp(26px, 4.5vw, 40px); font-weight: 750;
  letter-spacing: -0.015em; color: var(--text); text-wrap: balance;
}
header .sub { color: var(--text-dim); font-size: 14.5px; max-width: 76ch; }
.prepline { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 16px; font-size: 13px; color: var(--text-dim); }
.prepline b { color: var(--text); font-weight: 650; }
h2 { font-size: 19px; margin: 34px 0 14px; font-weight: 700; letter-spacing: -0.01em; }
section { margin-bottom: 40px; }
.rule { height: 1px; background: var(--hairline); margin: 8px 0 18px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }

/* Glass panel primitive — applied to every card-ish class */
.card, .tile, .strip > div, .tcard, .rankcard, .smallrow, .krow, .phase, .insight, .glass {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}

/* Status strip */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; background: none; border: none; }
.strip > div { padding: 14px 16px; }
.strip .k { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.strip .v { font-size: 14.5px; font-weight: 650; margin-top: 4px; color: var(--text); }

/* Tiles + cards */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tile { padding: 18px 18px 15px; }
.tile .big { font-size: 27px; font-weight: 750; margin: 2px 0; }
.tile .note { font-size: 13px; color: var(--text-dim); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.card { padding: 16px 18px; }
.card h3, .prop .addr { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--text); }
ul.tight { margin: 8px 0 0; padding-left: 18px; }
ul.tight li { margin-bottom: 7px; font-size: 14px; color: var(--text-dim); }
ul.tight li b { color: var(--text); }
.must li::marker { color: var(--good); }
.dealbreak { border-color: rgba(224, 87, 76, 0.4); background: linear-gradient(135deg, rgba(224, 87, 76, 0.10), rgba(224, 87, 76, 0.03)); }
.dealbreak li::marker { color: var(--dead); }
.prop { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.prop .meta, .meta, .tmeta { font-size: 12.5px; color: var(--text-dim); }
.prop p, .notes { margin: 4px 0 0; font-size: 13.5px; color: var(--text-dim); }

/* County table */
.tablewrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13.5px; }
th { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; text-align: left;
  color: var(--text-dim); padding: 12px; border-bottom: 1px solid var(--hairline-strong); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--text-dim); }
td b { color: var(--text); }
tr:last-child td { border-bottom: none; }
.score { display: inline-block; min-width: 40px; text-align: center; padding: 3px 8px; font-weight: 800;
  font-size: 12.5px; background: var(--spruce-soft); color: var(--spruce); border-radius: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.04); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--text-dim); }

/* Pills + badges */
.pill, .badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.p-top { background: var(--spruce); color: var(--ink); }
.p-active, .badge.gut { background: var(--spruce-soft); color: var(--spruce); }
.p-watch, .p-track, .badge { background: var(--brass-soft); color: var(--brass); }
.p-dead { background: var(--dead-soft); color: var(--dead); }

/* Ranked cards */
.rankcard { display: grid; grid-template-columns: 66px 1fr; margin-bottom: 12px; overflow: hidden; }
.fitcell { display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid var(--hairline); padding: 10px 4px; background: rgba(143, 198, 162, 0.10); }
.fitcell .n { font-size: 23px; font-weight: 800; color: var(--spruce); }
.fitcell .d { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.rankcard .body { padding: 13px 16px 13px; }
.toprow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.addr { font-weight: 700; font-size: 15.5px; color: var(--text); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.subs { display: flex; gap: 3px; margin-top: 10px; height: 6px; max-width: 420px; }
.subs span { background: var(--bar); opacity: 0.85; border-radius: 3px; }
.subs .empty { background: rgba(255, 255, 255, 0.10); opacity: 1; }
.sublabels { display: flex; gap: 14px; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 6px; flex-wrap: wrap; }

/* Triage cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.tcard { display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.2s, outline-color 0.2s; }
.tcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: rgba(255, 255, 255, 0.05); }
.nophoto { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px; background: var(--spruce-soft); }
.tbody { padding: 12px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.taddr { font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--text); }
.chip.c-pass { background: rgba(66, 200, 140, 0.14); color: var(--good); border-color: transparent; font-size: 10.5px; font-weight: 700; }
.chip.c-ok { background: var(--brass-soft); color: var(--brass); border-color: transparent; font-size: 10.5px; font-weight: 700; }
.chip.c-fail { background: var(--dead-soft); color: var(--dead); border-color: transparent; font-size: 10.5px; font-weight: 700; }
.chip.c-unk { background: rgba(255, 255, 255, 0.06); color: var(--text-dim); border-color: transparent; font-size: 10.5px; font-weight: 700; }
.ph { font-size: 12px; color: var(--brass); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quick a { font-size: 11px; font-weight: 700; text-decoration: none; color: var(--spruce);
  background: var(--spruce-soft); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.quick a:hover { background: var(--spruce); color: var(--ink); }
.actions { display: flex; gap: 8px; margin-top: auto; padding-top: 9px; align-items: center; }
button { font-family: inherit; font-size: 12.5px; font-weight: 750; padding: 9px 15px;
  border: none; border-radius: 999px; cursor: pointer; }
.push { background: var(--spruce); color: var(--ink); }
.push:hover { background: #a6d8b6; }
.kill { background: transparent; color: var(--dead); border: 1.5px solid rgba(224, 87, 76, 0.55); }
.kill:hover { background: var(--dead-soft); }
.viewlink { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.tcard.is-push { outline: 2px solid var(--good); outline-offset: -2px; }
.tcard.is-kill { opacity: 0.32; }
.tcard.is-kill .kill { background: var(--dead); color: #fff; }
.tcard.is-push .push { background: var(--good); }

/* Small rows (killed / dq / archived) */
.smallrow, .krow { border-left: 3px solid var(--dead); padding: 10px 15px; margin-bottom: 8px;
  font-size: 13.5px; color: var(--text-dim); border-radius: 12px; }
.smallrow .why, .krow b { color: var(--text); }
.smallrow .why { color: var(--dead); font-weight: 700; font-size: 12.5px; }

/* Ask / decision panel */
.ask, .decision { background: linear-gradient(135deg, rgba(143, 198, 162, 0.18), rgba(143, 198, 162, 0.06));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(143, 198, 162, 0.35); border-radius: var(--radius);
  box-shadow: var(--glass-shadow); color: var(--text); padding: 26px 26px 22px; }
.ask h2, .decision h2 { margin-top: 0; color: var(--text); }
.ask ol, .decision ol { margin: 10px 0 0; padding-left: 20px; }
.ask li, .decision li { margin-bottom: 10px; font-size: 14.5px; color: var(--text-dim); }
.ask li b, .decision li b { color: var(--text); }

/* Sticky triage tally bar */
#bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  background: linear-gradient(rgba(4, 8, 5, 0.8), rgba(4, 8, 5, 0.9));
  border-top: 1px solid var(--hairline); color: var(--text);
  padding: 12px 20px; font-size: 13.5px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
#bar b { color: var(--brass); }
#bar .hint { opacity: 0.6; font-size: 11.5px; }

footer { border-top: 1px solid var(--hairline); margin-top: 52px; padding-top: 14px;
  font-size: 12.5px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px 28px; }
a { color: var(--spruce); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--spruce); outline-offset: 3px; }

/* Dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.dash-card { display: block; text-decoration: none; color: var(--text); padding: 22px 20px 18px;
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--glass-shadow);
  transition: border-color 0.15s, transform 0.15s; }
.dash-card:hover { border-color: rgba(143, 198, 162, 0.5); transform: translateY(-2px); }
.dash-card .num { font-size: 34px; font-weight: 800; color: var(--spruce); font-variant-numeric: tabular-nums; }
.dash-card .lbl { font-size: 15px; font-weight: 700; margin-top: 2px; }
.dash-card .det { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .dash-card { transition: none; } }