@font-face { font-family:'Town10'; src:url('fonts/town-10-display-regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Town10'; src:url('fonts/town-10-display-medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Town10'; src:url('fonts/town-10-display-bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Town10'; src:url('fonts/town-10-display-black.ttf') format('truetype'); font-weight:900; font-display:swap; }

:root {
  --navy:#041E42; --astral:#263d88; --gold:#F1C400; --cream:#F5F1E8;
  --slate:#6B7073; --line:#e6e2d6; --red:#c0392b; --green:#1f8a4c;
  --ink:#1c2433; --card:#ffffff; --cream-deep:#efe9db;
  --shadow-sm:0 1px 2px rgba(4,30,66,.05);
  --shadow-md:0 1px 2px rgba(4,30,66,.05), 0 10px 28px -20px rgba(4,30,66,.35);
  --shadow-lift:0 2px 4px rgba(4,30,66,.06), 0 16px 36px -20px rgba(4,30,66,.4);
  --radius:14px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink);
  background:
    radial-gradient(900px 420px at 8% -120px, rgba(38,61,136,.07), transparent 65%),
    radial-gradient(700px 380px at 96% -100px, rgba(241,196,0,.10), transparent 60%),
    var(--cream);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif; font-size:15px; line-height:1.45;
}
h1,h2,.disp { font-family:'Town10','Inter',sans-serif; }
.wrap { max-width:1240px; margin:0 auto; padding:24px 24px 70px; position:relative; }
a { color:var(--astral); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- sticky header ---------- */
header.top {
  position:sticky; top:0; z-index:20;
  background:rgba(245,241,232,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-inner {
  max-width:1240px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand .mark {
  width:44px; height:44px; border-radius:12px; object-fit:cover; flex:0 0 auto;
  box-shadow:var(--shadow-sm);
}
.brand h1 { margin:0; font-weight:900; font-size:19px; letter-spacing:.02em; color:var(--navy); text-transform:uppercase; line-height:1.1; }
.tagline { color:var(--slate); font-size:11.5px; font-style:italic; }
.head-right { display:flex; align-items:center; gap:12px; }
.updated { color:var(--slate); font-size:12px; text-align:right; white-space:nowrap; }
.whoami {
  color:var(--navy); font-weight:600; font-size:12px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; white-space:nowrap; box-shadow:var(--shadow-sm);
}
.stale {
  color:#7a5b00; font-weight:600; font-size:12px;
  background:#fbf4d8; border:1px solid #e8d9a3; border-radius:999px;
  padding:4px 12px; white-space:nowrap; box-shadow:var(--shadow-sm);
}

/* ---------- vitals ---------- */
.vitals { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin:4px 0 14px; }
.vital {
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, #0b2c63 0%, var(--navy) 58%);
  color:#fff; border-radius:16px; padding:16px 18px 15px;
  box-shadow:var(--shadow-md);
}
.vital::after {
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.vital .label { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#9fb0cc; font-weight:600; }
.vital .num { font-family:'Town10'; font-weight:900; font-size:34px; line-height:1.1; margin-top:4px; font-variant-numeric:tabular-nums; }
.vital.alert { box-shadow:var(--shadow-md), inset 0 0 0 1.5px rgba(241,196,0,.55); }
.vital.alert .num { color:var(--gold); }
.vital .sub { font-size:10.5px; color:#8d9cba; margin-top:5px; letter-spacing:.02em; }

/* ---------- revenue strip (per-client MRR, from revenue.json) ---------- */
.revenue { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.rev {
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:7px 14px; display:flex; flex-direction:column; gap:1px;
  box-shadow:var(--shadow-sm);
}
.rev-name { font-size:11px; color:var(--slate); }
.rev-amt { font-weight:700; color:var(--navy); font-size:14px; font-variant-numeric:tabular-nums; }
.rev-free { background:transparent; box-shadow:none; border-style:dashed; }
.rev-free .rev-amt { color:var(--slate); font-weight:600; }
.rev-total { background:var(--navy); border-color:var(--navy); }
.rev-total .rev-name { color:#9fb0cc; }
.rev-total .rev-amt { color:var(--gold); }

/* ---------- tabs + board views ---------- */
.tabs { display:flex; gap:6px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.tab {
  font-family:inherit; font-size:13px; font-weight:600; color:var(--slate);
  background:transparent; border:0; border-bottom:2.5px solid transparent;
  padding:8px 14px 9px; cursor:pointer; letter-spacing:.02em;
}
.tab:hover { color:var(--astral); }
.tab.on { color:var(--navy); border-bottom-color:var(--gold); }

.board-strip {
  background:var(--navy); color:#9fb0cc; border-radius:12px;
  padding:10px 16px; margin:0 0 16px; font-size:13px;
  box-shadow:var(--shadow-md);
}
#pipeline-value .board-strip { margin:-14px 0 26px; }
.board-strip b { color:var(--gold); font-family:'Town10'; font-size:17px; font-weight:700; margin-left:4px; }
.board-strip .bs-sub { margin-left:10px; font-size:11.5px; color:#8d9cba; }

.board { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; align-items:start; }
.kcol { background:var(--cream-deep); border:1px solid var(--line); border-radius:14px; padding:10px; min-height:120px; }
.kcol-head {
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--astral); padding:2px 6px 8px;
}
.kcol-meta { font-size:11px; font-weight:600; color:#5d6265; letter-spacing:0; white-space:nowrap; }
.kcard {
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; margin-bottom:8px; box-shadow:var(--shadow-sm);
  font-size:12.5px;
}
.kcard:last-child { margin-bottom:0; }
.kcard.kstale { border-left:3px solid var(--gold); }
.kc-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; }
.kc-top a { flex:1 1 auto; min-width:0; font-weight:700; color:var(--navy); font-size:13.5px; line-height:1.25; }
.kc-val {
  flex:0 0 auto; font-weight:700; font-size:11.5px; color:#7a5b00;
  background:#fbf4d8; border:1px solid #e8d9a3; border-radius:999px; padding:1px 8px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kc-meta { color:#5d6265; font-size:11.5px; margin-top:3px; }
.kc-next { color:var(--ink); font-size:12px; margin-top:5px; }
.kc-owner { color:var(--astral); font-weight:600; font-size:11.5px; margin-top:5px;
  display:flex; justify-content:space-between; gap:8px; }
.kc-init { color:#5d6265; font-size:11px; }
/* small-text-on-light contrast: darkened from --slate (4.45:1) to clear AA 4.5:1 on cream/cream-deep/white */
.kempty { color:#5d6265; font-style:italic; font-size:12px; padding:8px 6px; }

.chip {
  display:inline-block; font-size:10.5px; font-weight:700; border-radius:999px;
  padding:1px 8px; letter-spacing:.02em; white-space:nowrap;
}
.chip-0 { background:#eef1f9; color:#263d88; }
.chip-1 { background:#e9f5ee; color:#1f8a4c; }
.chip-2 { background:#fbf4d8; color:#7a5b00; }
.chip-3 { background:#fbeeec; color:#c0392b; }
.chip-4 { background:#eee9f7; color:#2F2951; }
.chip-5 { background:#e7f3f6; color:#1a6b7d; }
.chip-6 { background:#f4ede4; color:#8a5a2b; }
.chip-7 { background:#edf1ee; color:#41594a; }

/* ---------- app layout: main column + work rail ---------- */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:26px; align-items:start; }
.main { min-width:0; }
.panel { margin-bottom:34px; }
.panel:last-child { margin-bottom:0; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }

h2.zone {
  display:flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--astral); margin:0;
}
h2.zone-past { color:var(--red); }
h2.zone-toggle { cursor:pointer; user-select:none; }
h2.zone-toggle:hover { color:var(--navy); }
.panel-caret { color:var(--slate); font-size:10px; display:inline-block; transition:transform .15s; }
.panel.collapsed .panel-caret { transform:rotate(-90deg); }
.panel.collapsed > :not(.panel-head) { display:none; }
.panel.collapsed .controls { display:none; }
h2.zone-next { color:var(--slate); }
h2.zone-internal { color:var(--slate); }
.count {
  font-size:11px; font-weight:600; color:var(--astral);
  background:var(--cream); border:1px solid var(--line); border-radius:999px;
  padding:1px 8px; letter-spacing:0;
}
.count.hot { color:var(--red); background:#fbeeec; border-color:#e6b0a8; }

.controls { display:flex; gap:8px; }
select {
  font-family:inherit; font-size:12.5px; font-weight:500; color:var(--ink);
  appearance:none; -webkit-appearance:none;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7073' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--line); border-radius:10px; padding:7px 28px 7px 11px;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .15s;
}
select:hover, select:focus { border-color:#c9c3b2; outline:none; }

/* ---------- cards ---------- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow:var(--shadow-lift); border-color:#dcd6c5; }
.card.stale { border-left:4px solid var(--gold); }
.card.regress { border-left:4px solid var(--red); }
.card .summary { padding:14px 18px; cursor:pointer; }
.row1 { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.name { font-weight:700; color:var(--navy); font-size:16px; min-width:0; }
.row1-right { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.badge {
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--cream); color:var(--astral); border:1px solid var(--line); white-space:nowrap;
}
.badge.st-1 { background:#eef1f9; border-color:#cdd5ec; }
.badge.st-2 { background:#fbf4d8; border-color:#e8d9a3; color:#7a5b00; }
.badge.st-3 { background:#e9f5ee; border-color:#bcdfca; color:var(--green); }
.badge.st-4 { background:var(--navy); border-color:var(--navy); color:#fff; }
.badge.st-5 { background:#eceae4; border-color:#d8d2c2; color:var(--slate); }
/* CRM/pipeline join extras (KC-89) */
.badge.notcrm { background:#eceae4; border-color:#d8d2c2; color:var(--slate); font-style:italic; }
.card.notcrm-row { border-left:4px solid #d8d2c2; }
.talert.muted { color:var(--slate); background:#eceae4; border-left-color:#c9c3b2; font-weight:500; }
.mrr-chip {
  font-weight:700; font-size:11.5px; color:var(--navy);
  background:var(--cream); border:1px solid var(--line); border-radius:999px;
  padding:1px 9px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Ad spend rides beside the MRR chip and must never read as ours: slate on a
   flat ground, not the cream-and-navy that means our revenue. */
.spend-chip {
  font-weight:600; font-size:11.5px; color:var(--slate);
  background:rgba(107,112,115,.09); border:1px solid rgba(107,112,115,.22);
  border-radius:999px; padding:1px 9px; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.opp-badge {
  font-weight:700; font-size:11px; color:#7a5b00;
  background:#fbf4d8; border:1px solid #e8d9a3; border-radius:999px;
  padding:1px 9px; white-space:nowrap;
}
.crm-link { font-size:11.5px; font-weight:600; white-space:nowrap; }
.pipeline-asof { font-size:11px; font-weight:500; color:var(--slate); text-transform:none; letter-spacing:0; }
.stepper { display:inline-flex; gap:4px; align-items:center; }
.stepper i {
  width:7px; height:7px; border-radius:999px; background:var(--cream-deep);
  border:1px solid #d8d2c2;
}
.stepper i.on { background:var(--astral); border-color:var(--astral); }
.row2 { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:6px; font-size:13px; color:var(--slate); }
.flag { color:var(--red); font-weight:700; }
.owner { color:var(--astral); font-weight:600; }
.caret { color:var(--slate); font-size:11px; margin-left:6px; transition:transform .15s; display:inline-block; }
.card.open .caret { transform:rotate(90deg); }

.detail { display:none; padding:0 18px 16px; border-top:1px solid var(--line); margin-top:2px; background:#fdfcf9; }
.card.open .detail { display:block; }
.tasks { list-style:none; margin:13px 0 0; padding:0; }
.tasks li { display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px; border-bottom:1px dashed var(--line); }
.tasks li:last-child { border-bottom:0; }
.check {
  width:16px; height:16px; border-radius:5px; border:1.5px solid #b9bdc1; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff;
}
.check.done { background:var(--green); border-color:var(--green); }
.tasks .tname { flex:1; }
.tasks .tassignee { color:var(--astral); font-weight:600; font-size:12px; white-space:nowrap; }
.tasks .tdue { color:var(--slate); font-size:12px; white-space:nowrap; }
.tasks .tdue.past { color:var(--red); font-weight:600; }
.tasks .st { color:var(--slate); font-size:12px; white-space:nowrap; min-width:46px; text-align:right; }
.detail .links { margin-top:13px; display:flex; align-items:center; gap:16px; font-size:13px; }

/* ---------- client metrics ---------- */
.metrics { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px 18px; margin-top:6px; }
.metric .mlabel { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); font-weight:600; }
.metric .mval { font-family:'Town10'; font-weight:700; font-size:22px; color:var(--navy); line-height:1.15; font-variant-numeric:tabular-nums; }
.metric .mdelta { font-size:12px; font-weight:600; margin-left:6px; font-family:'Inter',sans-serif; }
.metric .mdetail { font-size:11.5px; color:var(--slate); margin-top:1px; }
.up { color:var(--green); } .down { color:var(--red); } .flatt { color:var(--slate); }
.period { font-size:11px; color:var(--slate); font-weight:500; white-space:nowrap; }

/* ---------- client expanded detail ---------- */
.dsection { margin-top:15px; }
.dhead { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--astral); font-weight:600; margin-bottom:6px; }
.dmeta { font-size:12px; color:var(--slate); margin-bottom:8px; }
.dgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:2px 20px; }
.kv { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line); }
.kv span { color:var(--slate); }
.kv b { color:var(--navy); font-weight:600; font-variant-numeric:tabular-nums; }
.kwtable { width:100%; border-collapse:collapse; font-size:13px; }
.kwtable th { text-align:left; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line); }
.kwtable td { padding:6px 8px; border-bottom:1px dashed var(--line); font-variant-numeric:tabular-nums; }
.kwtable th:not(:first-child), .kwtable td:not(:first-child) { text-align:right; width:64px; }
.kwtable td:first-child { color:var(--navy); font-weight:500; }
.kwtable tr:last-child td { border-bottom:0; }
.locblock { padding:11px 0 3px; border-top:1px dashed var(--line); }
.locblock:first-of-type { border-top:0; }
.locname { font-weight:700; color:var(--navy); font-size:14px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.locaddr { font-weight:400; font-size:11.5px; color:var(--slate); }
.locgbp { font-size:12.5px; color:var(--astral); font-weight:600; margin:3px 0 6px; }
.locnote { font-size:12px; color:var(--slate); font-style:italic; margin:4px 0 8px; }
.dsources { margin-top:15px; font-size:11px; color:var(--slate); font-style:italic; line-height:1.6; }

/* ---------- trend sparklines (history.json) ---------- */
.spark { display:block; }
.sparkline { fill:none; stroke:var(--astral); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.sparkfill { fill:rgba(38,61,136,.08); stroke:none; }
.sparkdot { fill:var(--gold); stroke:var(--navy); stroke-width:1; }
.trendgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px 26px; }
.trend .tlabel { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); font-weight:600; }
.trend .tval { font-family:'Town10'; font-weight:700; font-size:20px; color:var(--navy); line-height:1.2; font-variant-numeric:tabular-nums; margin:1px 0 4px; }
.trend .tsub { font-size:11px; color:var(--slate); margin-top:3px; }
.trow { display:flex; align-items:center; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.trow:last-child { border-bottom:0; }
.trow .tkw { flex:1; min-width:0; color:var(--navy); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trow .tloc { color:var(--slate); font-weight:400; font-size:11.5px; }
.trow b { font-variant-numeric:tabular-nums; color:var(--navy); min-width:44px; text-align:right; }
.trow .spark { flex:0 0 auto; }
.unrep {
  flex:0 0 auto; font-size:10.5px; font-weight:700; color:#7a5b00;
  background:#fbf4d8; border:1px solid #e8d9a3; border-radius:999px; padding:1px 8px;
  white-space:nowrap;
}
/* five-star meter: each star is its own clip window so a 4.8 fills the fifth
   star exactly 4/5, independent of the gap between glyphs */
.rating { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; }
.stars { display:inline-flex; gap:1.5px; line-height:1; font-size:12px; }
/* two-class selectors on purpose: `.kv span` is (0,1,1) and would otherwise
   repaint the gold fill slate inside the Reputation block */
.stars .star { position:relative; display:inline-block; color:#c3b899; }
.star .starfill {
  position:absolute; top:0; left:0; bottom:0;
  overflow:hidden; white-space:nowrap; color:var(--gold);
}
.rating .ratenum { font-size:11.5px; font-weight:600; color:var(--slate); font-variant-numeric:tabular-nums; }
.kv .rating { justify-content:flex-end; }
.metric .mspark { margin-top:3px; }
.talert {
  font-size:12.5px; font-weight:600; color:var(--red);
  background:#fbeeec; border-left:3px solid var(--red); border-radius:8px;
  padding:6px 12px; margin:4px 0 8px;
}
.shok {
  font-size:12.5px; font-weight:600; color:var(--green);
  background:#e9f5ee; border-left:3px solid var(--green); border-radius:8px;
  padding:6px 12px; margin:4px 0 8px;
}
.trow.tchange .tkw { font-weight:400; color:var(--slate); flex:0 0 auto; max-width:46%; }
.trow.tchange .tdiff {
  flex:1; min-width:0; font-size:12px; color:var(--ink); text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- work rail ---------- */
.rail { position:sticky; top:78px; display:flex; flex-direction:column; gap:16px; }
.railbox {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px 10px; box-shadow:var(--shadow-sm);
}
.railbox h2.zone { margin:2px 0 6px; }
.railbox h2.zone + .railbox h2.zone { margin-top:18px; }
.railbox .tasklist + h2.zone { margin-top:18px; }
.railbox.myplate { border-left:4px solid var(--astral); }
#internal-wrap { border-left:4px solid var(--slate); }
#unassigned-wrap { border-left:4px solid var(--gold); }
h2.zone-unassigned { color:#7a5b00; }

/* active digs (KC client work, grouped by client) */
.diggroup { margin:8px 0 14px; }
.diggroup:last-child { margin-bottom:4px; }
h3.dig-client { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:700; color:var(--navy); }
.digcount {
  font-size:11px; font-weight:600; color:var(--astral);
  background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:1px 8px;
}

/* ---------- task lists ---------- */
ul.tasklist { list-style:none; margin:0; padding:0; }
ul.tasklist li { padding:9px 0; border-bottom:1px solid #f0ece1; font-size:13.5px; display:flex; justify-content:space-between; gap:10px; }
ul.tasklist li:last-child { border-bottom:0; }
.due { color:var(--slate); font-size:12px; white-space:nowrap; }
.due.past { color:var(--red); font-weight:700; }
ul.tasklist li.past { background:#fbeeec; border-left:3px solid var(--red); border-radius:8px; border-bottom:0; padding:9px 12px; margin:3px 0; }
.mp-main { display:flex; flex-direction:column; gap:1px; min-width:0; }
.mp-ctx { font-size:11.5px; color:var(--slate); }
.age-chip {
  font-size:11px; font-weight:600; color:var(--slate); flex:0 0 auto;
  align-self:flex-start;
  background:var(--cream); border:1px solid var(--line); border-radius:999px;
  padding:1px 9px; white-space:nowrap;
}
.age-chip.hot { color:#7a5b00; background:#fbf4d8; border-color:#e8d9a3; }

.empty { color:#5d6265; font-style:italic; font-size:13.5px; padding:12px 2px; }

/* ---------- persona stewards (chrome only: internal, gated dashboard) ---------- */
.steward { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.steward-mark { width:46px; height:46px; border-radius:13px; flex:0 0 auto; box-shadow:var(--shadow-sm); }
.steward-head { display:flex; flex-direction:column; gap:6px; min-width:0; padding-top:2px; }
.bubble {
  position:relative; align-self:flex-start; max-width:560px;
  background:#fff; border:1px solid var(--line); border-radius:13px;
  padding:7px 13px; font-size:13px; font-style:italic; line-height:1.4; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.bubble::before, .bubble::after {
  content:""; position:absolute; width:0; height:0; border-style:solid;
}
.bubble::after { left:-7px; top:12px; border-width:7px 7px 7px 0; border-color:transparent #fff transparent transparent; }
.bubble::before { left:-9px; top:11px; border-width:8px 8px 8px 0; border-color:transparent var(--line) transparent transparent; }
.kestrel-bubble { border-color:#e6d49a; }
.kestrel-bubble::before { border-right-color:#e6d49a; }
.gus-bubble { border-color:#c7ccd0; }
.gus-bubble::before { border-right-color:#c7ccd0; }

/* ---------- footer banter: the two predators bicker (internal chrome only) ---------- */
.footer {
  margin-top:40px; background:linear-gradient(150deg, #0b2c63 0%, var(--navy) 58%);
  border-radius:18px; padding:22px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  overflow:hidden; box-shadow:var(--shadow-md);
}
.foot-text { display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; align-self:stretch; }
.foot-gus { height:104px; width:auto; flex:0 0 auto; }
.foot-kestrel { height:168px; width:auto; flex:0 0 auto; }
.banter { display:flex; flex-direction:column; gap:8px; width:100%; max-width:560px; margin:0 auto; min-height:78px; justify-content:center; }
.chat {
  align-self:flex-start; max-width:86%; padding:8px 14px; border-radius:14px;
  font-size:12.5px; font-style:normal; line-height:1.38; opacity:0;
  transform-origin:bottom; animation:chatin .42s cubic-bezier(.2,.8,.2,1) forwards;
}
.chat b { display:block; font-weight:700; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px; opacity:.72; }
.chat.gus { background:#eef1f4; color:var(--ink); border-bottom-left-radius:4px; }
.chat.gus b { color:var(--slate); }
.chat.kestrel { align-self:flex-end; background:var(--gold); color:var(--navy); border-bottom-right-radius:4px; }
.chat.kestrel b { color:#7a5b00; }
.chat.leaving { animation:chatout .34s ease forwards; }
@keyframes chatin { from{ opacity:0; transform:translateY(9px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes chatout { from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-9px) scale(.97); } }
@media (prefers-reduced-motion:reduce){
  .chat,.chat.leaving{ animation-duration:.01ms; }
  .card, select { transition:none; }
  html { scroll-behavior:auto; }
}

.err { color:var(--red); padding:24px 2px; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .layout{ grid-template-columns:1fr; }
  .rail{ position:static; }
}
@media (max-width:780px){
  .vitals{ grid-template-columns:repeat(2,1fr); }
  .top-inner{ padding:10px 16px; }
  .wrap{ padding:18px 16px 60px; }
  .tagline{ display:none; }
  .brand h1{ font-size:15px; white-space:nowrap; }
  .brand .mark{ width:36px; height:36px; }
  .updated{ display:none; }
  .panel-head{ flex-wrap:wrap; }
  .controls{ width:100%; flex-wrap:wrap; }
  .controls select{ flex:1 1 auto; min-width:0; }
  .bubble{ max-width:100%; }
  .footer{ flex-wrap:wrap; padding:20px; }
  .foot-gus{ height:74px; }
  .foot-kestrel{ height:104px; }
}