/* ============================================================================
   Hill People — "Counsel + Midnight" design system (per CLAUDE.global.md §14).
   ALL color is driven from CSS custom properties. Never hardcode a hex in a
   component rule — add/point at a token so light + dark both stay coherent.
   Light = Counsel (paper + emerald). Dark = Midnight (ink + luminous lavender).
   ========================================================================== */
:root, :root[data-theme="light"]{
  /* surfaces + ink */
  --bg:#f3f3ee; --card:#ffffff; --surface2:#f4f5f1; --line:#e3e4dd;
  --ink:#16203a; --muted:#5a6478;
  /* accent (emerald) */
  --accent:#0e7a5c; --accent-2:#0b5e47; --btn-ink:#ffffff;
  --accent-soft:#e7f1ec; --accent-soft-ink:#0c5c46;
  /* roles */
  --good:#12916e; --good-soft:#e2f2ec; --good-soft-ink:#0c6b50;
  --danger:#c0452f; --danger-soft:#f7e4df; --danger-soft-ink:#9a3018;
  --warn:#b0832a; --warn-soft:#f6ecd4; --warn-soft-ink:#7a5a12;
  --gold:#b0832a; --star:#b0832a; --star-off:#c9cabf;
  /* neutral bits */
  --chip-bg:#eceee7; --chip-ink:#4b5566; --hover:#f0f1ec;
  --avatar-bg:#e7e8e0; --avatar-ink:#7a8496; --icon-dim:#b7b9ae;
  --shadow:0 6px 20px rgba(20,27,46,.07); --scrim:rgba(20,27,46,.38);
  --glass:rgba(255,255,255,.72); --radius:15px;
  /* app chrome */
  --topbar-bg:#16203a; --topbar-ink:#eef0f5; --topbar-dim:#9aa6bd; --topbar-hover:rgba(255,255,255,.10);
  --gate-grad:linear-gradient(160deg,#1b2748,#0f1830);
  /* party pills */
  --party-r-bg:#f7e2df; --party-r-ink:#a53a26;
  --party-d-bg:#e2ecf7; --party-d-ink:#255a9c;
  --party-i-bg:#e5f1ea; --party-i-ink:#1f7a54;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#12141c; --card:#1b1e29; --surface2:#232733; --line:#2a2e3d;
  --ink:#e9ebf4; --muted:#969bb0;
  --accent:#8f7ff2; --accent-2:#b3a6ff; --btn-ink:#14161f;
  --accent-soft:#262247; --accent-soft-ink:#c3b8ff;
  --good:#37e0c8; --good-soft:#183a37; --good-soft-ink:#5cead6;
  --danger:#ff6b78; --danger-soft:#3a2228; --danger-soft-ink:#ff9aa3;
  --warn:#e0b24d; --warn-soft:#332a17; --warn-soft-ink:#ecc978;
  --gold:#e0b24d; --star:#e0b24d; --star-off:#4a4f60;
  --chip-bg:#262b38; --chip-ink:#aab2c5; --hover:#232733;
  --avatar-bg:#2b3040; --avatar-ink:#9aa2b8; --icon-dim:#565c6e;
  --shadow:0 10px 26px rgba(0,0,0,.42); --scrim:rgba(0,0,0,.58);
  --glass:rgba(27,30,41,.72);
  --topbar-bg:#1b1e29; --topbar-ink:#e9ebf4; --topbar-dim:#969bb0; --topbar-hover:rgba(255,255,255,.06);
  --gate-grad:linear-gradient(160deg,#1b1e29,#12141c);
  --party-r-bg:#3a2228; --party-r-ink:#ff9aa3;
  --party-d-bg:#1e2b3f; --party-d-ink:#8fb6e8;
  --party-i-bg:#183430; --party-i-ink:#5cead6;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;transition:background-color .2s ease,color .2s ease}
button,.row,.tab,.chip,.xlink,.copybtn{touch-action:manipulation}
.list{-webkit-overflow-scrolling:touch}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--danger);min-height:1.2em;margin:.5em 0 0}
button{font:inherit;cursor:pointer;border:0;border-radius:8px}
input,select,textarea{font:inherit;color:inherit}

/* ---- boot splash (covers the SSO check so the passcode never flashes) ---- */
.boot{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--gate-grad);color:var(--topbar-ink)}
.boot-brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.2px}
.boot-spin{width:26px;height:26px;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:bootspin .8s linear infinite}
@keyframes bootspin{to{transform:rotate(360deg)}}
/* shown instead of the spinner when the initial connectivity check can't get through
   after retries — a flaky signal shouldn't silently drop the user onto the PIN gate
   as if they'd been logged out */
.boot-trouble{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:280px}
.boot-trouble p{margin:0;color:var(--topbar-dim);font-size:14px;line-height:1.5}
.boot-trouble .primary{width:auto;padding:10px 22px}

/* ---- gate ---- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--gate-grad);padding:20px}
.gate-card{background:var(--card);border-radius:16px;padding:28px;width:min(360px,92vw);box-shadow:var(--shadow);text-align:center;border:1px solid var(--line)}
.brand{display:flex;align-items:center;justify-content:center;gap:10px}
.brand h1{font-family:var(--serif);font-size:25px;margin:0;letter-spacing:.2px;font-weight:600}
.dome{font-size:26px}
.gate input{width:100%;text-align:center;letter-spacing:8px;font-size:22px;padding:12px;border:1px solid var(--line);border-radius:10px;margin:14px 0;background:var(--surface2)}
.primary{background:var(--accent);color:var(--btn-ink);padding:12px 18px;width:100%;font-weight:600}
.primary:hover{background:var(--accent-2)}

/* ---- topbar ----
   Sized to always fit its window: the tab strip is the only flexible child
   (it shrinks, then scrolls); the supplementary bits (counts, then the
   wordmark) drop out before anything can push the ⚙/theme controls off-screen.
   `overflow:hidden` is the backstop so nothing can ever bleed past the edge. */
.topbar{display:flex;align-items:center;gap:12px;background:var(--topbar-bg);color:var(--topbar-ink);padding:10px 16px;position:sticky;top:0;z-index:5;overflow:hidden}
.brand.sm{justify-content:flex-start;gap:9px;flex:none;min-width:0}
.brand.sm .dome{font-size:20px}
.brand.sm strong{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.2px;color:var(--topbar-ink);white-space:nowrap}
/* the flexible child: takes the leftover room, scrolls horizontally when cramped */
.tabs{display:flex;gap:4px;margin-left:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;color:var(--topbar-dim);padding:8px 14px;border-radius:9px;font-weight:600;flex:0 0 auto;white-space:nowrap}
.tab:hover{background:var(--topbar-hover);color:var(--topbar-ink)}
.tab.active{background:var(--accent);color:var(--btn-ink)}
.stats{display:flex;gap:14px;font-size:12.5px;color:var(--topbar-dim);flex:none;white-space:nowrap}
.stats b{color:var(--topbar-ink)}
/* Shed the optional chrome BEFORE the tab strip has to scroll. Thresholds come
   from measured min-content: bar needs ~805px without the counts, ~1111px with. */
@media(max-width:1160px){ .stats{display:none} }
@media(max-width:840px){ .brand.sm strong{display:none} }
/* L / D / A theme toggle in the chrome */
.themeseg{display:inline-flex;background:var(--topbar-hover);border-radius:9px;padding:2px;gap:2px;flex:none}
.themeseg button{background:transparent;color:var(--topbar-dim);width:27px;height:25px;font-size:12px;font-weight:700;border-radius:7px;line-height:1}
.themeseg button.active{background:var(--accent);color:var(--btn-ink)}
.themeseg button:not(.active):hover{color:var(--topbar-ink)}
.gear{background:transparent;color:var(--topbar-dim);font-size:18px;padding:6px 8px;border-radius:8px;line-height:1;flex:none}
.gear:hover{background:var(--topbar-hover);color:var(--topbar-ink)}

/* ---- settings ---- */
.set-sec{margin:6px 0 16px}
.set-sec h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.set-field{display:flex;align-items:center;gap:10px;margin:8px 0}
.set-field label{width:60px;color:var(--muted);font-size:13px}
.set-field input,.set-field select{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:var(--surface2);color:var(--ink)}
.set-actions{display:flex;gap:8px;margin:6px 0 12px;flex-wrap:wrap}
.set-actions .primary{width:auto;padding:9px 16px}
.set-status{font-size:12.5px;padding-top:8px;border-top:1px solid var(--line)}
.modal-card.lg{width:min(560px,94vw)}
/* segmented control (settings appearance) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:var(--card);color:var(--muted);padding:8px 15px;font-weight:600;border-radius:0;font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.active{background:var(--accent);color:var(--btn-ink)}
.schedrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;font-size:13.5px}
.schedrow input[type=time]{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface2);color:var(--ink)}
.schedrow select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface2);color:var(--ink)}

.logtabs{display:flex;gap:4px;margin:4px 0 12px;border-bottom:1px solid var(--line)}
.logtab{background:none;padding:8px 14px;font-weight:600;color:var(--muted);border-radius:0;border-bottom:2px solid transparent}
.logtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.logrow{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.logrow:last-child{border-bottom:0}
.logicon{flex:none;font-size:15px;line-height:1.4}
.logtxt{min-width:0;font-size:13.5px}
.emailrow{cursor:pointer}.emailrow:hover{background:var(--hover);margin:0 -8px;padding:9px 8px;border-radius:8px}
.lsnip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:480px}
.emailbody{font-size:13.5px;line-height:1.55;max-height:50vh;overflow:auto;white-space:pre-wrap;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:12px}

/* ---- toolbar ---- */
/* wraps to a second line rather than pushing buttons off the right edge */
.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:53px;z-index:4}
#search{flex:1 1 240px;min-width:0;max-width:420px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--ink)}
.toolbar .ebtn{flex:none;white-space:nowrap}
.chk{display:flex;align-items:center;gap:6px;color:var(--ink);user-select:none}

/* ---- layout ---- */
/* Single-column at every size: the list fills the window; opening a record slides the
   detail in as a full-window overlay (the old mobile pattern, promoted to all sizes)
   with a back button. .hide-mobile = detail hidden (name kept for JS compat). */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;height:calc(100vh - 106px)}
.list{overflow:auto;background:var(--card)}
/* wide windows: list becomes a card grid — as many ~290px cards as fit per row
   (4 across at 1280, 2-3 on tablets; phones keep edge-to-edge rows below 640px) */
@media(min-width:640px){
  .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;align-content:start;padding:12px;background:var(--bg)}
  .list .row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);contain-intrinsic-size:auto 64px}
  .list .row:hover{background:var(--hover)}
  .list .row.sel{background:var(--accent-soft);border-color:var(--accent);box-shadow:none}
  .list .loading,.list .empty{grid-column:1/-1;background:transparent}
}
.detail{position:fixed;inset:var(--hb,53px) 0 0;background:var(--bg);z-index:6;overflow:auto;padding:22px clamp(18px,4vw,64px)}
.detail.hide-mobile{display:none}
/* wide windows: flow the detail cards (inside .dbody) into as many ~440px columns as fit */
@media(min-width:900px){
  .detail .dbody{column-width:400px;column-gap:20px}
  .detail .card,.detail .risk{break-inside:avoid;margin-top:0}
}

/* ---- list rows ---- */
/* content-visibility skips layout/paint (and defers avatar image fetches) for
   off-screen rows — the big win for long lists on iPhone. */
.row{position:relative;display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 61px}
/* tiny "updated from Legistorm" corner stamp — must never grow the card */
.lsync{position:absolute;right:8px;bottom:3px;font-size:9px;color:var(--muted);opacity:.85;pointer-events:none;line-height:1}
.row:hover{background:var(--hover)}
.row.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--avatar-bg) center/cover;flex:none;display:flex;align-items:center;justify-content:center;color:var(--avatar-ink);font-weight:700;font-size:13px}
.row .meta{min-width:0;flex:1}
.row .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star{font-size:18px;background:none;color:var(--star-off);flex:none;padding:2px}
.star.on{color:var(--star)}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--chip-bg);color:var(--chip-ink);margin-left:6px}
.pill.R{background:var(--party-r-bg);color:var(--party-r-ink)}
.pill.D{background:var(--party-d-bg);color:var(--party-d-ink)}
.pill.I,.pill.ID{background:var(--party-i-bg);color:var(--party-i-ink)}
/* departed member — 14-day grace badge before the roster sweep removes them */
.pill.former{background:var(--chip-bg);color:var(--muted);border:1px dashed var(--muted)}
/* ---- Hearings view ---- */
.hearingsview{overflow:auto;height:calc(100vh - 53px)}
.hearwrap{max-width:900px;margin:0 auto;padding:20px 18px 60px}
.hearhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.hearhead h2{margin:0;font-family:var(--serif);font-size:23px;font-weight:600}
.hearctl{display:flex;gap:10px;align-items:center}
.hseg{background:var(--chip-bg)}
.hseg button{width:auto;padding:5px 12px;height:auto;color:var(--muted)}
.hseg button.active{background:var(--accent);color:var(--btn-ink)}
.hday{font:700 12px var(--serif);font-size:14px;margin:16px 0 4px;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:3px}
.hrow{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.hrow.flagged{background:var(--accent-soft);margin:0 -8px;padding:9px 8px;border-radius:8px;border-bottom:0}
.htime{flex:none;width:84px;font-weight:700;font-size:13px}
.hstatus{font-size:11px;color:var(--danger);font-weight:700;text-transform:uppercase}
.hbody{flex:1;min-width:0}
/* backstop: JS already truncates the title text, but cap displayed lines too in
   case a future source (or a note field) ever slips an unbounded string through */
.htitle{font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hnotes{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hflag{color:var(--accent)}
.hmeta{font-size:12px;margin-top:1px}
.hreason{color:var(--accent-soft-ink);font-weight:600}
.hnotes{font-size:12px;margin-top:2px}
.hacts{flex:none;display:flex;gap:4px;align-items:center}
.hacts .ebtn{padding:4px 8px;text-decoration:none}
.hacts .star{font-size:16px;padding:4px;min-width:0}
@media(max-width:780px){
  .hearingsview{height:calc(100dvh - var(--hb))}
  .hrow{flex-wrap:wrap}
  .htime{width:auto}
  .hacts{width:100%;justify-content:flex-end}
}

/* Legistorm screenshot ingest (staff) */
.shotdrop{border:2px dashed var(--line);border-radius:10px;padding:16px;font-size:12.5px;color:var(--muted);cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.shotdrop:hover,.shotdrop.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.shotrow{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line);cursor:pointer}
.shotrow:last-of-type{border-bottom:0}
.shotrow input{margin-top:3px;flex:none}

/* "My notes" collapses to a slim add-row when empty (most members have no notes) */
.notescard.collapsed{padding:9px 16px}
.notescard.collapsed h3{margin:0;display:flex;align-items:center;justify-content:space-between}
.notescard.collapsed .efield{display:none}
.notes-toggle{font-size:12px;padding:4px 10px}

/* ---- detail ---- */
.detail h2{margin:0 0 2px;font-size:23px;font-family:var(--serif);font-weight:600;letter-spacing:.1px}
.detail .dhead{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.detail .photo{width:84px;height:84px;border-radius:14px;background:var(--avatar-bg) center/cover;flex:none;display:flex;align-items:center;justify-content:center;color:var(--avatar-ink);font-weight:700;font-size:22px}
.detail .dhead .star{font-size:26px}
.dacts{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.delrec{background:none;color:var(--icon-dim);font-size:16px;padding:2px;line-height:1}
.delrec:hover{color:var(--danger)}
.uphoto{position:relative;cursor:pointer;overflow:hidden}
.uphoto .upbadge{position:absolute;right:0;bottom:0;background:var(--accent);color:var(--btn-ink);font-size:13px;line-height:1;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:7px 0 12px 0;opacity:0;transition:opacity .12s}
.uphoto:hover .upbadge,.uphoto.dragover .upbadge{opacity:1}
.uphoto.dragover{outline:2px dashed var(--accent);outline-offset:2px}
.uphoto.uploading{opacity:.5}

/* ---- data import ---- */
.imp-types{display:flex;gap:8px;flex-wrap:wrap}
.imp-type{border:1px solid var(--line);border-radius:9px;padding:7px 14px;cursor:pointer;font-size:13.5px;background:var(--card)}
.imp-type.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-soft-ink);font-weight:600}
.imp-type input{margin-right:6px;accent-color:var(--accent)}
.imp-drop{border:2px dashed var(--line);border-radius:12px;padding:26px 14px;text-align:center;color:var(--muted);cursor:pointer;font-size:13.5px;transition:all .12s}
.imp-drop:hover,.imp-drop.dragover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.imp-drop.ok{border-style:solid;border-color:var(--good);color:var(--good-soft-ink);background:var(--good-soft)}
#imp-paste{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;background:var(--surface2);color:var(--ink)}
.impsummary{font-size:14.5px}
.impsummary .ok{color:var(--good-soft-ink)}
.warn{color:var(--warn-soft-ink)}
.set-status.err{color:var(--danger)}
.implist{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px;margin-top:6px}
.improw{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-bottom:1px solid var(--line)}
.improw:last-child{border-bottom:none}
.imptxt{font-size:13px;min-width:0}
.impbits{font-size:12.5px;color:var(--muted)}

/* legislator rich sections (report parity in the app profile) */
.pos{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:12px}
.pos-s{background:var(--good-soft);color:var(--good-soft-ink)}
.pos-o{background:var(--danger-soft);color:var(--danger-soft-ink)}
.pos-n{background:var(--chip-bg);color:var(--muted)}
.ideobar2{position:relative;height:10px;border-radius:8px;background:linear-gradient(90deg,#2b6cb0,var(--surface2) 48%,var(--surface2) 52%,#c0452f)}
.ideobar2 i{position:absolute;top:-4px;width:4px;height:18px;background:var(--ink);border-radius:2px;transform:translateX(-2px)}
.ideoends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:4px}
.stat2{display:inline-block;margin-right:16px;font-size:13px}
.stat2 b{font-size:16px;color:var(--accent)}
.mini-h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin:8px 0 3px}
.moneyrow2{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:2px 0;border-bottom:1px solid var(--line)}
.moneyrow2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moneyrow2 b{flex:none}
/* caucus review rows */
.cxrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.cxrow:last-child{border-bottom:0}
.cxrow>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cxrow .ebtn{padding:3px 8px;font-size:12px}
/* ---- contacts sync ---- */
.syncstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.syncstats .ss{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:10px 8px;text-align:center}
.syncstats .ss b{display:block;font-size:20px;line-height:1.1;color:var(--accent)}
.syncstats .ss span{font-size:11.5px;color:var(--muted)}
.synclog{border:1px solid var(--line);border-radius:9px;max-height:150px;overflow:auto}
.slog{font-size:12.5px;padding:5px 10px;border-bottom:1px solid var(--line)}
.slog:last-child{border-bottom:none}
.linkish{background:none;border:none;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;padding:2px 0;text-decoration:underline}
.synclinks{border:1px solid var(--line);border-radius:9px;max-height:280px;overflow:auto;margin-top:8px}
.slrow{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-bottom:1px solid var(--line)}
.slrow:last-child{border-bottom:none}
.slrow>button{flex:none;padding:2px 8px}
@media(max-width:640px){.syncstats{grid-template-columns:repeat(2,1fr)}}

/* ---- settings: data freshness + sources ---- */
.freshline{font-size:13.5px;margin-bottom:8px}
.setlog{border:1px solid var(--line);border-radius:9px;padding:4px 0;max-height:170px;overflow:auto}
.setlogrow{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:4px 10px}
.setlogrow>span{flex:none}
.setlogrow>div{min-width:0}
.srcs{width:100%;border-collapse:collapse;font-size:12.5px}
.srcs td{padding:5px 8px 5px 0;border-bottom:1px solid var(--line);vertical-align:top}
.srcs tr:last-child td{border-bottom:none}
.srcs td:first-child{white-space:nowrap;font-weight:600}
.srcs td:last-child{color:var(--muted);white-space:nowrap}
.srcs td:last-child a{color:var(--accent);text-decoration:none}
.srcs td:last-child a:hover{text-decoration:underline}
/* phones: the 4-column sources table stacks per source — no sideways scroll in the modal */
@media(max-width:780px){
  .srcs,.srcs tbody{display:block}
  .srcs tr{display:block;padding:7px 0;border-bottom:1px solid var(--line)}
  .srcs tr:last-child{border-bottom:0}
  .srcs td{display:block;padding:1px 0;border:0;white-space:normal}
  .srcs td:first-child{font-weight:700}
}

/* ---- ✦ AI briefing ---- */
.dbtns{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.dbtns .briefbtn{margin:0}
/* compact action buttons — the old full-width Brief bar wasted a whole row */
.briefbtn{display:inline-block;width:auto;margin:0 0 12px;background:var(--accent);color:var(--btn-ink);font-weight:600;padding:9px 22px;border-radius:10px;font-size:14px}
.briefbtn:hover{background:var(--accent-2)}
.reportbtn,.staffreportbtn{flex:none;background:var(--card);color:var(--accent);border:1px solid var(--accent);font-weight:600;padding:9px 22px;border-radius:10px;font-size:14px;cursor:pointer}
.reportbtn:hover,.staffreportbtn:hover{background:var(--accent-soft);color:var(--accent-soft-ink)}
.briefbody{font-size:14px;line-height:1.6}
.briefbody h1,.briefbody h2,.briefbody h3{font-size:15px;margin:14px 0 6px}
.briefbody ul{margin:6px 0;padding-left:20px}
.briefbody .sources{margin-top:14px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:10px}
.briefbody .sources a{font-size:12.5px;color:var(--accent)}

/* ---- contact links inside editable fields ---- */
.eview a{color:var(--accent);text-decoration:none}
.eview a:hover{text-decoration:underline}
.copybtn{background:var(--chip-bg);color:var(--ink);border-radius:6px;padding:1px 7px;font-size:12px;margin-left:6px;vertical-align:1px;line-height:1.5;cursor:pointer}
.copybtn:hover{background:var(--accent-soft);color:var(--accent-soft-ink)}
.copybtn.ok{background:var(--good-soft);color:var(--good-soft-ink)}
.tag.add{background:var(--good-soft);color:var(--good-soft-ink)}
.tag.upd{background:var(--accent-soft);color:var(--accent-soft-ink)}
.tag.skp{background:var(--chip-bg);color:var(--muted)}

/* ---- cards / detail sections ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
/* Backstop for any wide content (a table, a long unbreakable string): scroll INSIDE the
   card, never let it overflow into a neighboring card. Was previously mobile-only, but
   .detail .dbody's multi-column layout (@media(min-width:900px) above) gives every card
   the same ~400px width on a wide desktop window too — the same overflow risk applies. */
.detail .card{overflow-x:auto}
.subcoms{margin-top:6px}
.subcoms summary{cursor:pointer;color:var(--muted);font-size:13px}
.subcoms .linkrow{font-size:13px}
.card h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:14px}
.kv div:nth-child(odd){color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip-bg);color:var(--chip-ink);border-radius:8px;padding:4px 9px;font-size:12.5px}
.chip.manual{background:var(--warn-soft);color:var(--warn-soft-ink)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td.nowrap{white-space:nowrap}
/* Staff table stacks per-person (name, then title · phone · email wrapping beneath)
   instead of 4 fixed <table> columns. This isn't just a phone thing: the detail view's
   multi-column desktop layout (.dbody, see @media(min-width:900px) above) gives each
   card only ~400px regardless of how wide the window is, so a real 4-column table with
   a full email address always forced `white-space:nowrap` cells wider than the card —
   with no overflow clip on .card, that overflow bled visibly into the next column's
   content. Stacking removes the fixed-column-width problem at its root, at every width. */
.stafftbl,.stafftbl tbody{display:block}
.stafftbl tr{display:flex;flex-wrap:wrap;column-gap:12px;row-gap:1px;padding:7px 0;border-bottom:1px solid var(--line)}
.stafftbl tr:last-child{border-bottom:0}
.stafftbl td{display:block;padding:0;border:0}
.stafftbl td:first-child{flex:0 0 100%;font-weight:600}
.stafftbl td.nowrap{white-space:normal}
.stafftbl td.nowrap a{white-space:nowrap}
.linkrow{display:block;padding:5px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--accent)}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px}
.tag.track{background:var(--good-soft);color:var(--good-soft-ink)}
.tag.ignore{background:var(--chip-bg);color:var(--muted)}
.htrack{background:none;color:var(--star-off);font-size:16px;padding:2px 4px;line-height:1}
.htrack.on{color:var(--star)}
.empty{color:var(--muted);text-align:center;margin-top:60px}
a{color:var(--accent)}
.xlink{color:var(--accent);cursor:pointer;text-decoration:none}
.xlink:hover{text-decoration:underline}
.social{margin-top:6px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 0}
.social a{margin-right:10px}
.chip[data-caucus]{cursor:pointer}
.chip[data-caucus]:hover{background:var(--accent-soft);color:var(--accent-soft-ink)}
.risk{border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13.5px;border:1px solid transparent}
.risk-high{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-soft-ink)}
.risk-med{background:var(--warn-soft);border-color:var(--warn);color:var(--warn-soft-ink)}
.risk-low{background:var(--good-soft);border-color:var(--good);color:var(--good-soft-ink)}

/* ---- modals ---- */
.modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px;backdrop-filter:blur(2px)}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;width:min(440px,94vw);max-height:80vh;overflow:auto;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.modal-head strong{font-size:16px}
.modal-x{background:var(--chip-bg);border-radius:8px;width:30px;height:30px;font-size:14px;color:var(--muted)}
.modal-x:hover{background:var(--hover)}

/* ---- editable note fields ---- */
.efield{margin-bottom:9px}
.efield:last-child{margin-bottom:0}
/* contact cards: short fields flow into as many ~240px columns as fit; .wide spans all */
.fieldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 20px;align-items:start}
.fieldgrid h3{grid-column:1/-1}
.fieldgrid .efield.wide{grid-column:1/-1}
.elabel{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:3px}
.ebody{position:relative;display:flex;align-items:flex-start;gap:8px}
.eview{flex:1;font-size:14px;white-space:pre-wrap;min-height:20px}
/* margin-top:0/text-align:left neutralize the generic .empty placeholder rule
   (margin-top:60px, centered) that was blowing ~80px of dead space per empty field */
.eview.empty{color:var(--muted);font-style:italic;opacity:.8;margin-top:0;text-align:left}
.ebtn{background:var(--chip-bg);color:var(--ink);font-weight:600;padding:5px 10px;border-radius:7px;font-size:13px}
.ebtn:hover{background:var(--hover)}
.eedit{flex:none;padding:3px 8px;opacity:.5}
.ebody:hover .eedit{opacity:1}
.einput{flex:1;width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;resize:vertical;background:var(--surface2);color:var(--ink)}
.eactions{display:flex;flex-direction:column;gap:6px}
.esave{background:var(--accent);color:var(--btn-ink)}
.esave:hover{background:var(--accent-2)}

/* ---- Ask (AI chat) ---- */
.ask{display:flex;flex-direction:column;height:calc(100vh - 53px)}
.chat{flex:1;overflow:auto;padding:22px 20px;display:flex;flex-direction:column;gap:14px;max-width:820px;width:100%;margin:0 auto}
.chat-hint{color:var(--muted);text-align:center;margin:auto;max-width:480px;line-height:1.65}
.msg{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--btn-ink);border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-bottom-left-radius:4px}
.msg .sources{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.msg .sources a{font-size:12.5px}
.msg.thinking{display:flex;gap:5px;align-items:center}
.msg.thinking span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.msg.thinking span:nth-child(2){animation-delay:.2s}
.msg.thinking span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.askbar{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--card);max-width:820px;width:100%;margin:0 auto;align-items:flex-end}
.askbar textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;max-height:140px;background:var(--surface2);color:var(--ink)}
.askbar .primary{width:auto;padding:10px 18px}
.msg p{margin:0 0 8px}.msg p:last-child{margin-bottom:0}
.msg .mdh{font-weight:700;margin:8px 0 4px}
.msg ul,.msg ol{margin:4px 0 8px;padding-left:20px}
.msg li{margin:2px 0}
.msg code{background:var(--chip-bg);padding:1px 5px;border-radius:5px;font-size:13px}
.msg.user code{background:rgba(0,0,0,.16)}
.msg .mdt{border-collapse:collapse;width:100%;margin:6px 0;font-size:13px}
.msg .mdt th,.msg .mdt td{border:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top}
.msg .mdt th{background:var(--surface2)}

/* ---- Home dashboard ---- */
.home{height:calc(100vh - 53px);overflow:auto;padding:22px;max-width:1100px;margin:0 auto;width:100%}
.hero{margin-bottom:18px}
.hero h1{margin:0 0 2px;font-size:26px;color:var(--ink);font-family:var(--serif);font-weight:600;letter-spacing:.1px}
.home-askbar{display:flex;gap:10px;margin:14px 0 8px;max-width:640px}
.home-askbar input{flex:1;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;background:var(--surface2);color:var(--ink)}
.home-askbar .primary{width:auto;padding:11px 18px}
.qchip{cursor:pointer}.qchip:hover{background:var(--accent-soft);color:var(--accent-soft-ink)}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.hcard h3{margin:0 0 12px;font-size:14px;color:var(--ink)}
.hrow,.nrow,.rrow{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
.hrow:last-child,.nrow:last-child,.rrow:last-child{border-bottom:0}
.hmeta{flex:1;min-width:0}
.hd{white-space:nowrap;font-size:12.5px}
.nrow{flex-direction:column;gap:2px}
.nrow>a{color:var(--accent);text-decoration:none;font-size:14px}.nrow>a:hover{text-decoration:underline}
.rrow{align-items:center;flex-wrap:wrap}
.pavatars{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.havatar{width:38px;height:38px;border-radius:50%;background:var(--avatar-bg) center/cover;display:flex;align-items:center;justify-content:center;color:var(--avatar-ink);font-weight:700;font-size:12px;cursor:pointer}
.havatar:hover{box-shadow:0 0 0 2px var(--accent)}
.pcounts{display:flex;gap:8px;flex-wrap:wrap}
.pcount{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink)}
.pcount b{color:var(--accent)}.pcount:hover{background:var(--hover)}
.clientchip{cursor:pointer}.clientchip b{color:var(--accent)}.clientchip:hover{background:var(--accent-soft);color:var(--accent-soft-ink)}
@media(max-width:780px){ .home{padding:14px} .hgrid{grid-template-columns:1fr} .home-askbar{max-width:none} }
.loading{padding:40px;text-align:center;color:var(--muted)}

/* mobile-only "back to list" button (base = hidden; media query below shows it) */
.back{display:inline-flex;align-items:center;gap:6px;background:var(--chip-bg);color:var(--ink);font-weight:600;padding:8px 12px;border-radius:8px;margin-bottom:14px;cursor:pointer}
.back:hover{background:var(--hover)}

@media(max-width:780px){
  /* topbar: drop the wordmark; tabs scroll horizontally so labels stay one line.
     safe-area insets clear the notch (top) + home indicator (bottom) when installed. */
  .topbar{gap:8px;padding:8px 10px;flex-wrap:nowrap;padding-top:calc(8px + env(safe-area-inset-top))}
  .detail{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .list{padding-bottom:env(safe-area-inset-bottom)}
  .askbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .brand.sm strong{display:none}
  .tabs{margin-left:0;flex:1;gap:2px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;white-space:nowrap;text-align:center;padding:8px 11px;font-size:13px}
  .stats{display:none}
  .themeseg button{width:24px;height:24px}
  /* --hb = height of topbar incl. the notch inset; used for every offset below.
     dvh (dynamic viewport height) tracks Safari's collapsing toolbar — 100vh would overflow. */
  :root{--hb:calc(53px + env(safe-area-inset-top))}
  /* iOS Safari's position:sticky is flaky (drops the bar on long scrolls) — pin the
     menu with position:fixed instead; body padding keeps content from sliding under. */
  .topbar{position:fixed;top:0;left:0;right:0}
  body{padding-top:var(--hb)}
  /* toolbar: search on its own line, filter + count beneath */
  .toolbar{top:var(--hb);flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
  #search{flex:1 1 100%;max-width:none}
  #count{margin-left:auto}
  /* single column; minmax(0,1fr) stops the track expanding to a row's min-content */
  .layout{height:auto;min-height:calc(100dvh - var(--hb))}
  .list{height:auto;overflow-x:hidden}
  .detail{padding:16px}
  /* bigger tap targets for the priority stars */
  .star{padding:8px;min-width:44px}
  /* .stafftbl stacking and the .detail .card overflow-x backstop now live unconditionally
     near .tbl/.card above — both apply at every width, not just phones (see those
     comments for why). */
  .ask,.home{height:calc(100dvh - var(--hb))}
  .chat{padding:14px}
  .askbar{padding:10px 12px}
  .msg{max-width:90%}
}

/* ---- tiny version badge (index.html, filled from version.js) ----
   Top-left inside the safe area, above the brand in the header's top padding, clear of the
   L/D/A toggle and gear on the right. Everything it can sit on is dark in BOTH themes (the
   navy header, the boot splash and the passcode gate), so it takes the header's dim ink.
   Measured: #9aa6bd 6.58:1 on the light header #16203a, 5.99:1 / 7.17:1 on the light gate
   gradient (#1b2748 / #0f1830); #969bb0 6.02:1 on the dark header #1b1e29, 6.66:1 on #12141c.
   The failure pink #ff9aa3 is 7.27:1 or better on all of them (the theme's --danger is a
   light-page red, only 3.18:1 on this navy). */
.app-version{position:fixed;z-index:40;pointer-events:none;top:env(safe-area-inset-top,0px);left:calc(env(safe-area-inset-left,0px) + 16px);font:500 9px/9px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2px;color:var(--topbar-dim);white-space:nowrap} /* above the boot splash (30) and modals (20) */
.app-version.fail{color:#ff9aa3;font-weight:700}

/* Ranked search (2026-10-01): the "possible matches" divider and the "matches outside your
   priority list" button. Existing tokens only: --muted on the page (5.6:1 light, 6.9:1 dark) and
   --accent-2, the text-safe accent (7.6:1 on --card in both themes). */
.list-sep{padding:10px 12px 4px;margin-top:6px;border-top:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.list-more{display:block;width:100%;min-height:44px;margin:8px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:var(--card);color:var(--accent-2);font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:center}
.list-more:hover{border-style:solid}