/* Command Center v2 theme: the Scarlet Thread look (Jared, Oct 26, 2026,
   "full switch"; replaces the Oct 18 zinc/red scheme, SPEC Section 7).
   Dark: warm ink, parchment text, gold labels, scarlet buttons, a red glow
   at the top of the screen. Light: the same palette on parchment.
   Contrast (WCAG, against bg / surface / surface-2), all >= 4.5:1 for text:
     dark  --text-muted #A89C86 6.96 / 6.52 / 5.97
           --text-dim   #9A8D76 5.77 / 5.42 / 4.96  (the brand's quiet
           #7D7162 measured 3.95 / 3.71 / 3.39, so it is kept for rules
           and borders, never text)
     light --text-muted #5E5345 6.37 / 7.02 / 5.77
           --text-dim   #6B5F4F 5.29 / 5.82 / 4.79
   Scarlet is a fill (white on #B3202A is 6.65:1), never text on ink, and
   gold text never sits on scarlet (3.03:1). The rewrite status colors
   (SPEC 4.1) are a fixed system and do not change with the theme. */
:root, [data-theme="dark"] {
  --bg:#14110E; --surface:#1C1814; --surface-2:#25201A; --border:#3A3129; --border-soft:#2A241D;
  --primary:#B3202A; --primary-hover:#96161F; --primary-soft:rgba(179,32,42,.18); --thread:#5A1A21;
  --text:#F3ECDC; --text-2:#D8CDB8; --text-muted:#A89C86; --text-dim:#9A8D76; --quiet:#7D7162;
  --green:#22c55e; --gold:#D4A94A; --blue:#3b82f6; --purple:#a855f7;
  --nav-bg:rgba(20,17,14,.84);
  --glow:radial-gradient(120% 70% at 50% -10%, #3a1216 0%, #1a1110 45%, #14110E 75%);
  --tint-pastdue:#1c0404; --tint-urgent:#1c0a00; --tint-warning:#1a1400;
  --tint-upcoming:#050f1f; --tint-complete:#071a0f; --tint-nonrenew:#1a0f00; --tint-normal:transparent;
}
[data-theme="light"] {
  --bg:#F3ECDC; --surface:#FBF7EE; --surface-2:#EAE1CD; --border:#D9CDB4; --border-soft:#E5DBC6;
  --primary:#B3202A; --primary-hover:#96161F; --primary-soft:rgba(179,32,42,.10); --thread:#C9A9A6;
  --text:#14110E; --text-2:#2E2720; --text-muted:#5E5345; --text-dim:#6B5F4F; --quiet:#A3957F;
  --green:#16a34a; --gold:#8A6516; --blue:#2563eb; --purple:#9333ea;
  --nav-bg:rgba(243,236,220,.86);
  --glow:radial-gradient(120% 70% at 50% -10%, #ecc7c3 0%, #f1e3d4 45%, #F3ECDC 75%);
  --tint-pastdue:#fef2f2; --tint-urgent:#fff7ed; --tint-warning:#fefce8;
  --tint-upcoming:#eff6ff; --tint-complete:#f0fdf4; --tint-nonrenew:#fffbeb; --tint-normal:transparent;
}
* { box-sizing: border-box; }
/* The hidden attribute always wins over a component's display rule. */
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text-2); font-family:"Figtree",sans-serif; font-size:14px; min-height:100vh; }
/* The red glow at the top of the screen: a fixed layer behind everything,
   so it stays at the top while the page scrolls (phones included). */
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--glow); }
/* Type: Spectral for headings; Figtree for the interface; DM Mono stays
   for figures and policy numbers so columns of numbers line up. Labels
   are gold small caps. */
.page-title, .sect-h, .brand-text { font-family:"Spectral",serif; letter-spacing:.005em; }
/* (gold small-caps labels: the last rule in this file, so it wins) */
.mono { font-family:"DM Mono",monospace; }
button { cursor:pointer; font-family:"Figtree",sans-serif; }
/* Keyboard focus is visible in both themes (the variables flip
   with the theme, so one rule serves both). */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset:0; }

.appnav { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--thread);
  background:var(--nav-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.28); }
[data-theme="light"] .appnav { box-shadow:0 6px 20px rgba(9,9,11,.08); }
.appnav-row { display:flex; align-items:center; gap:14px; padding:10px 18px; flex-wrap:wrap; }
.appnav-row.main { flex-wrap:nowrap; }
.appnav-row.sub { padding-top:0; gap:18px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text);
  font-size:17px; letter-spacing:.01em; white-space:nowrap; flex-shrink:0; }
/* Sign-in (Oct 29) */
.signin-gate { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(ellipse at 50% -10%, rgba(179,32,42,.35), transparent 60%), var(--bg); }
.signin-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:28px 24px; display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.signin-logo { align-self:center; border-radius:14px; }
.signin-title { font-family:"Spectral",serif; font-size:24px; text-align:center; margin:4px 0 0; color:var(--text); }
.signin-sub { text-align:center; margin:0 0 6px; color:var(--text-muted); }
.signin-card .fld { display:flex; flex-direction:column; gap:4px; color:var(--text-2); font-size:13px; }
.signin-card input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:11px 12px; font-size:16px; }
.signin-msg { color:#f87171; margin:0; font-size:13px; }
body.gated .appnav, body.gated .skel-footer { visibility:hidden; }
.brand-logo { width:36px; height:36px; border-radius:9px; display:block; flex-shrink:0;
  box-shadow:0 4px 14px rgba(179,32,42,.35); }
.brand-mark { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,#d23a43,var(--primary) 55%,#6d1219);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px;
  box-shadow:0 4px 14px rgba(179,32,42,.4), inset 0 1px 0 rgba(255,255,255,.35); }
.skel-tag { font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--gold);
  border:1px solid var(--gold); border-radius:5px; padding:2px 6px; }
.spacer { flex:1; }

/* Header global search — centered, prominent, with a tagged results panel. */
.search-wrap { position:relative; flex:1 1 auto; max-width:560px; margin:0 auto; min-width:150px; }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.65; pointer-events:none; }
.global-search { width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:12px; padding:10px 36px 10px 36px; font-size:14px; font-family:"Figtree",sans-serif; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.global-search:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(179,32,42,.22); }
.global-search::placeholder { color:var(--text-dim); }
.gs-clear { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:24px; height:24px;
  border:none; border-radius:50%; background:var(--surface); color:var(--text-muted); font-size:11px; font-weight:800; }
.gs-clear:hover { color:var(--text); }
.gs-results { position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--surface);
  border:1px solid var(--border); border-radius:14px; box-shadow:0 22px 48px rgba(0,0,0,.45);
  max-height:min(430px,65vh); overflow-y:auto; padding:6px; z-index:80; text-align:left; }
[data-theme="light"] .gs-results { box-shadow:0 18px 40px rgba(9,9,11,.18); }
.gs-group { font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim); padding:9px 10px 4px; }
.gs-item { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none;
  border-radius:9px; padding:8px 10px; text-align:left; color:var(--text-2); }
.gs-item:hover, .gs-item.active { background:var(--surface-2); }
.gs-item .gn { font-weight:700; color:var(--text); font-size:13px; }
.gs-item .gd { font-size:11px; color:var(--text-muted); font-family:"DM Mono",monospace; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.gs-tag { margin-left:auto; flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:.05em;
  border:1px solid; border-radius:999px; padding:2px 8px; text-transform:uppercase; }
.gs-none { padding:14px 12px; font-size:13px; color:var(--text-muted); }

/* User chip — avatar color follows the role (Jared red, Parker blue). */
.user-chip { display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:4px 13px 4px 4px; flex-shrink:0; }
.user-avatar { width:30px; height:30px; border-radius:50%; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:11px; letter-spacing:.03em; }
.user-meta { line-height:1.12; }
.user-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; }
.user-role { font-size:9px; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; }

/* Util bar — one quiet line of the day's key figures under the brand row. */
.util-bar { display:flex; gap:20px; justify-content:center; overflow-x:auto; padding:0 18px 8px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.util-bar .v { color:var(--text); font-family:"DM Mono",monospace; font-size:13px; font-weight:500; letter-spacing:0; }
.util-bar .sep { color:var(--border); }
.util-jump { background:none; border:none; padding:4px 2px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; white-space:nowrap; border-radius:6px; }
.util-jump:hover, .util-jump:focus-visible { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px) { .util-jump { padding:9px 2px; } }
.sync-pill { font-size:11px; font-weight:800; border-radius:999px; padding:4px 10px; border:1px solid var(--border); }
.sync-pill.ok { color:var(--green); }
.sync-pill.off { color:var(--gold); border-color:var(--gold); }
.iconbtn { background:transparent; border:1px solid var(--border); color:var(--text-muted);
  border-radius:9px; padding:6px 10px; font-size:13px; font-weight:700; min-height:40px; }
.role-switch { display:inline-flex; align-items:center; gap:6px; }
.role-label { font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.segbtn { background:transparent; border:1px solid var(--border); color:var(--text-muted);
  border-radius:8px; padding:6px 12px; font-weight:700; font-size:13px; min-height:40px; }
.segbtn.active { background:var(--surface); color:var(--text); border-color:var(--primary); }
.offline-toggle { font-size:12px; color:var(--text-muted); font-weight:600; display:inline-flex; gap:6px; align-items:center; }
.navbar { display:flex; gap:2px; overflow-x:auto; padding:0 10px 8px; }
/* Oct 29: + New and More sit at the end of the tab bar */
.nav-spacer { flex:1 1 auto; min-width:8px; }
.navpill.nav-new { color:var(--gold); border:1px solid var(--gold); }
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--primary); color:#fff; font:600 11px/1 'DM Mono', monospace; }
.nav-more-wrap { position:relative; flex-shrink:0; }
.nav-more-menu { position:fixed; right:12px; z-index:60; margin-top:4px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:2px; min-width:190px; box-shadow:0 12px 30px rgba(0,0,0,.4); }
.nav-more-item { text-align:left; background:transparent; border:0; color:var(--text-2); padding:9px 12px; border-radius:8px; font:inherit; cursor:pointer; }
.nav-more-item:hover, .nav-more-item.active { background:var(--surface-2); color:var(--text); }
.xs-tabs { display:flex; gap:6px; margin:6px 0 10px; }
.hide-scroll::-webkit-scrollbar { display:none; }
.navpill { display:inline-flex; align-items:center; gap:7px; background:transparent; color:var(--text-muted);
  border:1px solid transparent; border-radius:9px; padding:8px 13px; font-size:13px; font-weight:600; white-space:nowrap; min-height:40px; }
.navpill:hover { color:var(--text); background:var(--surface); }
.navpill.active { background:var(--surface); color:var(--text); border-color:var(--border); }

.viewas-banner { background:linear-gradient(90deg,#1d4ed8,#2563eb); color:#fff; padding:8px 14px;
  display:flex; align-items:center; justify-content:center; gap:14px; font-size:13px; font-weight:700; }
.viewas-banner button { background:#fff; color:#1d4ed8; border:none; border-radius:6px; padding:4px 10px; font-weight:800; min-height:40px; }

/* Full screen on a computer (Jared, Oct 23: "the computer layout is
   full screen for my associate and myself"). Was 1240px, then 1680px;
   now the page uses the whole window at any width. */
.page-body { padding:18px 28px 40px; max-width:none; margin:0; }
.page-title { font-size:22px; font-weight:700; color:var(--text); }
.page-sub { font-size:13px; color:var(--text-muted); margin-top:4px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:14px; }

.stat-row { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.stat-card { flex:1 1 96px; min-width:96px; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:11px 12px; text-align:left; }
.stat-card .n { font-size:22px; font-weight:800; font-family:"DM Mono",monospace; line-height:1; }
.stat-card .l { font-size:10px; color:var(--text-muted); margin-top:5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; }
.stat-card.on { border-color:var(--primary); }

.rw-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.seg { display:inline-flex; flex-wrap:wrap; max-width:100%; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:4px; }
.seg button { background:transparent; border:none; color:var(--text-muted); font-size:13px; font-weight:600;
  padding:7px 13px; border-radius:8px; }
.seg button.active { background:var(--surface-2); color:var(--text); }
.search { flex:1; min-width:160px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-2); border-radius:10px; padding:9px 12px; font-size:13px; font-family:"Figtree",sans-serif; }
.btn { border:none; border-radius:10px; padding:8px 14px; font-size:13px; font-weight:700; min-height:40px; }
.btn-red { background:var(--primary); color:#fff; }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
/* Quick buttons (Oct 28): link-buttons look like buttons; MyDMV is gold
   on the raised surface so it reads as the shortcut it is. */
a.btn { display:inline-flex; align-items:center; text-decoration:none; }
.quick-dmv { background:var(--surface-2); color:var(--gold); border:1px solid var(--gold); }
/* Labelled groups of compact buttons on the cards (Reach / Look up / Move) */
.qk-group { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.qk-label { flex-basis:100%; margin:2px 0 -2px; }
/* Tap-to-copy value chips (policy #, member #, short GIS address) */
.copy-chip { display:inline-flex; align-items:center; gap:5px; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; font-size:12px; min-height:26px; cursor:pointer; text-decoration:none; vertical-align:middle; }
.copy-chip:hover { border-color:var(--gold); color:var(--text); }
.copy-chip .cc-ic { color:var(--gold); font-size:11px; }
.copy-chip .cc-lab { font-family:'Figtree', sans-serif; color:var(--text-dim); }
a.copy-chip, .rw-meta a.copy-chip, .rw-table a.copy-chip, .qr-sub a.copy-chip { color:var(--gold); font-weight:700; }
@media (pointer:coarse) { .copy-chip { min-height:32px; padding:4px 10px; } }
.rv-in-table .qk-group { margin-top:6px; }
.rv-in-table .need-chip { padding:3px 8px; font-size:11px; min-height:26px; }
.rv-in-table .rv-appt { width:130px !important; }
.dmv-edit { flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dmv-edit textarea { flex-basis:100%; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px; font:13px 'DM Mono', monospace; }
.btn.qk { min-height:34px; padding:5px 11px; font-size:12px; font-weight:600; border-radius:8px; }
.btn-ghost.qk { color:var(--text-2); }
@media (pointer:coarse) { .btn.qk { min-height:40px; } }

/* Parker's list: phone-style cards at phone widths, a desktop table
   at wide widths — both render the same visibleRows() (app.js), and
   the media query below picks which one a given width sees. */
.rw-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border);
  border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.rw-table-wrap { display:none; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow-x:auto; margin-bottom:10px; }
.rw-table { width:100%; border-collapse:collapse; font-size:13px; min-width:880px; }
.rw-table th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-dim); padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.rw-table td { padding:9px 12px; border-bottom:1px solid var(--border-soft); color:var(--text-2); vertical-align:top; }
.rw-table tr.hl td { outline:none; background:var(--surface-2); }
.rw-table td a { color:var(--blue); text-decoration:none; font-weight:600; }
.rw-table .rw-open { margin:2px 0 6px; }
@media (min-width:900px) {
  .rw-cards { display:none; }
  .rw-table-wrap { display:block; }
}

/* The Open panel (spec 4.1): Paperwork / Notes / Call + send,
   outcomes, VERIFY, and the full-review ask — inside Open only. */
.rw-open { margin-top:12px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; }
.rw-open .open-sec { padding:8px 0 10px; border-bottom:1px solid var(--border-soft); }
.rw-open .open-sec:last-child { border-bottom:none; padding-bottom:2px; }
.rw-open .sect-h { font-size:13px; margin-bottom:6px; }
.ask-line { margin-top:9px; font-size:12px; color:var(--text-muted); }
.ask-line b { color:var(--text-2); }
.photo-badge.verify { background:#1a1400; color:#eab308; border-color:#a16207; }
[data-theme="light"] .photo-badge.verify { background:#fefce8; color:#a16207; }
.need-chip.verify.on { border-color:#eab308; color:#eab308; }
.lost-line { font-size:12px; font-weight:700; color:var(--text-muted); margin:-4px 0 12px; }
.lost-line b { color:#d97706; }

/* Road Warrior completion: last-route banner, town picker, holdback,
   export box. */
.route-banner { margin-top:10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; color:var(--text-2); }
.town-picker { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.town-chip { display:inline-flex; gap:6px; align-items:center; border:1px solid var(--border);
  border-radius:999px; padding:5px 11px; font-size:12px; font-weight:700; color:var(--text-2); cursor:pointer; min-height:40px; }
.town-chip input { width:15px; height:15px; accent-color:var(--primary); }
.heldback { margin-top:10px; border-top:1px solid var(--border-soft); padding-top:10px; }
.export-box { margin-top:12px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface-2); }
.route-lines { white-space:pre-wrap; font-family:"DM Mono",monospace; font-size:12px; color:var(--text-2);
  background:var(--surface); border:1px solid var(--border-soft); border-radius:8px; padding:10px 12px; margin:0 0 8px; overflow-x:auto; }
.rw-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.rw-name { font-size:16px; font-weight:800; color:var(--text); }
.pill { font-size:10px; font-weight:800; border-radius:999px; padding:2px 9px; border:1px solid; white-space:nowrap; }
.type-badge { font-size:10px; font-weight:800; border-radius:5px; padding:2px 7px; border:1px solid; }
.rw-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
.rw-meta a { color:var(--blue); text-decoration:none; font-weight:700; }
.tiles { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tile { background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px; padding:8px 11px; min-width:120px; }
.tile .tl { font-size:9px; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.tile .tv { font-size:13px; font-weight:700; color:var(--text-2); margin-top:2px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:11px; }
.chk { min-width:64px; min-height:40px; text-align:center; border:2px solid var(--border); background:transparent; color:var(--text-muted);
  border-radius:8px; padding:7px 9px; font-size:12px; font-weight:700; }
.chk.on { border-color:var(--green); background:var(--green); color:#fff; }
.photo-badge { display:inline-block; margin-top:9px; font-size:9px; font-weight:800; border-radius:4px; padding:2px 6px; border:1px solid; }
.photo-badge.need { background:#431407; color:#f97316; border-color:#7c2d12; }
[data-theme="light"] .photo-badge.need { background:#fff7ed; }
.photo-badge.req { background:#0a1f12; color:#22c55e; border-color:#14532d; }
[data-theme="light"] .photo-badge.req { background:#f0fdf4; color:#16a34a; }
.ready-line { margin-top:9px; font-size:12px; font-weight:700; color:var(--green); }

.board { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.board-col { flex:1 1 250px; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; }
.board-col h4 { margin:2px 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.board-card { background:var(--surface-2); border:1px solid var(--border-soft); border-left:4px solid var(--border);
  border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
.board-card .bn { font-weight:800; color:var(--text); }

/* Rewrite filter extras: sort select, Needs chips, "Showing:" line, highlight */
.sortsel { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:10px; padding:9px 10px; font-size:13px; font-family:"Figtree",sans-serif; font-weight:600; }
.needs-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:-2px 0 12px; }
.needs-label { font-size:10px; font-weight:800; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-right:2px; }
.need-chip { border:1px solid var(--border); background:transparent; color:var(--text-muted);
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; min-height:40px; }
.need-chip.on { border-color:var(--gold); color:var(--gold); background:var(--surface); }
.need-chip.ready.on { border-color:var(--green); color:var(--green); }
.filter-status { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-4px 0 12px;
  font-size:12px; font-weight:700; color:var(--text-muted); }
.filter-status b { color:var(--text); }
.rw-card.hl { outline:2px solid var(--primary); outline-offset:2px; box-shadow:0 0 0 5px rgba(179,32,42,.18); }

.stub { color:var(--text-muted); font-size:13px; line-height:1.6; }
.muted { color:var(--text-muted); }
.btn-sm { padding:5px 10px; font-size:12px; border-radius:8px; }
.sect-h { font-size:16px; font-weight:700; color:var(--text); margin-bottom:10px; }
.wsub { font-size:11px; color:var(--text-muted); margin-top:3px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-row { padding:7px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.mini-row:last-child { border-bottom:none; }

/* Tasks */
.task-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.task-row:last-child { border-bottom:none; }
.task-row.done .task-check span { color:var(--text-dim); text-decoration:line-through; }
.task-check { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--text-2); flex:1 1 260px; cursor:pointer; }
.task-check input { width:18px; height:18px; accent-color:var(--green); }
.task-meta { display:inline-flex; flex-wrap:wrap; max-width:100%; align-items:center; gap:10px; font-size:12px; }
.assignee-chip { font-size:10px; font-weight:800; border-radius:999px; padding:2px 9px; border:1px solid var(--border); color:var(--text-muted); }

/* Tasks board (P-02): the stage columns reuse .board/.board-col;
   cards carry due-state color on the left edge like the QR board. */
.task-board .board-col { flex-basis: 270px; }
.tk-card .qr-actions { margin-top: 8px; }
.assignee-chip.jared { color:#ef4444; border-color:#ef4444; }
.assignee-chip.parker { color:#60a5fa; border-color:#1d4ed8; }
.assign-sel, .move-sel { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:8px; padding:5px 8px; font-size:12px; font-family:"Figtree",sans-serif; font-weight:600; }

/* Quote Requests board */
.kind-chip { font-size:10px; font-weight:800; border:1px solid; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.new-pill { background:var(--primary); color:#fff; font-size:9px; font-weight:800; border-radius:4px; padding:2px 6px; vertical-align:2px; }
.speed-chip { font-size:11px; font-weight:700; }
.qr-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:5px; }
.qr-sub { font-size:11px; color:var(--text-muted); margin-top:4px; }
.qr-note { font-size:12px; font-weight:600; margin-top:7px; line-height:1.45; }
.qr-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; align-items:center; }
.board-col.drop-hint { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--surface)); }
/* Board drag (boardDrag in app.js): grab cursor on cards, a grip for
   fingers, a tilted ghost that follows the pointer, the source card
   dimmed in place. */
[data-dragboard] [data-dragid] { cursor:grab; }
/* Board reading (Oct 23): summary cards that open, lane tabs on phones,
   sleeping X-Date cards, the collapsible Road Warrior panel. */
.board-card .bn { display:flex; align-items:center; gap:2px; }
.card-chev { margin-left:auto; color:var(--text-dim); font-size:12px; padding-left:6px; }
.card-addr { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-more { display:none; }
.board-card.open .card-more { display:block; }
.board-card.open { border-color:var(--primary); }
.board-card.asleep { opacity:.55; }
.parked-line { display:block; width:100%; margin:-4px 0 10px; padding:6px 8px; border:1px dashed var(--border); border-radius:8px;
  background:transparent; color:var(--text-muted); font-size:12px; text-align:left; cursor:pointer; }
.lane-tabs { display:none; }
.qr-steps { display:grid; grid-template-columns:1fr; gap:4px; margin:8px 0 4px; padding:8px 10px; border:1px solid var(--border-soft); border-radius:10px; background:var(--surface); }
.step-chk { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-2); cursor:pointer; min-height:28px; }
.step-chk.on { color:var(--text); }
.step-chk input { accent-color:var(--green); width:17px; height:17px; }
.step-chk .muted { font-weight:500; font-size:11px; }
.qr-step-line { font-size:11px; font-weight:700; color:var(--green); margin-top:5px; }
.rw-panel > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; }
.rw-panel > summary::-webkit-details-marker { display:none; }
.rw-panel > summary::after { content:'▾'; color:var(--text-dim); font-size:13px; }
.rw-panel[open] > summary::after { content:'▴'; }
.rw-sum-hint { margin-left:auto; font-size:12px; font-weight:700; color:var(--blue); }
.rw-panel:not([open]) { padding-top:12px; padding-bottom:12px; }
.drag-grip { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:22px; margin:-2px 4px -2px -4px;
  color:var(--text-dim); font-size:15px; line-height:1; cursor:grab; touch-action:none; user-select:none; vertical-align:middle; }
.board-card.dragging { opacity:.35; }
.drag-ghost { position:fixed; left:0; top:0; z-index:200; pointer-events:none; margin:0;
  box-shadow:0 18px 40px rgba(0,0,0,.45); border-color:var(--primary); opacity:.96; }
body.board-dragging, body.board-dragging * { cursor:grabbing !important; user-select:none; }
.hot { color:#f97316; font-size:10px; font-weight:800; }

/* Log Production form */
.prod-form { border-color:var(--primary); }
.pf-line { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.pf-type, .pf-premium { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:9px; padding:8px 10px; font-size:13px; font-family:"Figtree",sans-serif; font-weight:600; }
.pf-premium { width:130px; }
.rw-bases .pf-premium, .rw-stop .pf-premium { flex:1 1 230px; width:auto; min-width:0; }
.pf-written { font-size:13px; font-weight:600; color:var(--text-2); display:inline-flex; gap:6px; align-items:center; }
.pf-written input { width:17px; height:17px; accent-color:var(--green); }
.pf-opts { display:flex; gap:18px; flex-wrap:wrap; margin:12px 0; font-size:13px; font-weight:600; color:var(--text-2); }
.pf-opts select { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); border-radius:8px; padding:5px 8px; font-weight:600; }
.pf-actions { display:flex; gap:8px; }

/* Outbox / effects */
.ob-kind { font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--border);
  border-radius:999px; padding:2px 8px; color:var(--text-muted); white-space:nowrap; }
.ob-kind.client_email { color:var(--gold); border-color:var(--gold); }
.ob-kind.prod { color:var(--green); border-color:var(--green); }
/* Cross-Sell Calls */
.xsell-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.reason-chip { font-size:10px; font-weight:800; border:1px solid var(--border); border-radius:999px;
  padding:2px 8px; color:var(--text-muted); white-space:nowrap; }
.reason-chip.overdue { color:#ef4444; border-color:#ef4444; }
.reason-chip.hot { color:#f97316; border-color:#f97316; }
.reason-chip.never { color:#3b82f6; border-color:#3b82f6; }
.call-name { font-size:26px; font-weight:800; color:var(--text); margin-top:8px; }
.call-lines { font-size:13px; color:var(--text-muted); margin-top:2px; }
.call-num { display:block; margin-top:12px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:16px; text-align:center; font-size:30px; font-weight:700;
  color:var(--text); text-decoration:none; }
.call-num:hover { border-color:var(--primary); }
.call-last { font-size:13px; color:var(--text-muted); margin-top:10px; }
.outcome-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:12px; }
.outcome-btn { min-height:54px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:12px; font-size:15px; font-weight:700; padding:10px; }
.outcome-btn:hover { border-color:var(--primary); color:var(--text); }
.appt-form { margin-top:14px; border-top:1px solid var(--border-soft); padding-top:12px; }
/* After-the-call logging: notes, call history, the undo bar. */
.call-notes { width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:10px 12px; font:14px "Figtree",sans-serif; margin:6px 0; resize:vertical; }
.call-notes-fld { display:block; margin:6px 0; }
.call-history { margin-top:10px; border-top:1px solid var(--border-soft); padding-top:8px; }
.call-hist-row { font-size:13px; padding:4px 0; }
.call-note { font-size:13px; color:var(--text-2); white-space:pre-wrap; margin-top:2px; padding-left:8px; border-left:2px solid var(--border); }
/* Call analytics: the daily goal strip and the 30-day chart. One
   series (no legend; the title names it), thin bars with 4px rounded
   tops anchored to the baseline, a dashed goal line, recessive axes,
   and a per-day hover target wider than the bar. */
.call-goal { padding:12px 16px; }
.call-goal-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13px; }
.goal-track { height:8px; background:var(--surface-2); border-radius:999px; margin-top:8px; overflow:hidden; }
.goal-fill { height:100%; background:var(--purple); border-radius:999px; }
.goal-hit { color:var(--green); font-weight:800; }
.call-chart { margin-top:8px; }
.call-chart .cplot { position:relative; height:140px; display:flex; align-items:flex-end; gap:2px;
  border-bottom:1px solid var(--border); }
.call-chart .cday { flex:1 1 0; height:100%; display:flex; align-items:flex-end; justify-content:center; border-radius:4px 4px 0 0; outline-offset:0; }
.call-chart .cday:hover, .call-chart .cday:focus-visible { background:var(--surface-2); }
.call-chart .cbar { width:100%; max-width:22px; background:var(--purple); border-radius:4px 4px 0 0; }
.call-chart .cgoal { position:absolute; left:0; right:0; border-top:1.5px dashed var(--text-muted); pointer-events:none; }
.call-chart .cgoal span { position:absolute; right:0; bottom:2px; font-size:11px; color:var(--text-muted); background:var(--surface); padding:0 4px; }
.call-chart .caxis { display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:4px; }
/* Contact on the call card + the Calendly row. */
.contact-line { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px; margin-top:6px; }
.contact-line a { color:var(--blue); text-decoration:none; font-weight:600; }
.contact-form { margin-top:10px; padding:12px; border:1px dashed var(--gold); border-radius:12px; }
.cal-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0; }
.cal-row .pf-premium { flex:1 1 220px; }
.cal-row a.btn, .cal-tiles a { text-decoration:none; }
.btn.disabled, .drive-tile.disabled { opacity:.45; cursor:not-allowed; }
.cal-tiles { margin-top:8px; }
.cal-tiles .drive-tile { display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text); }
.drive-contact { border-width:2px; }
.drive-contact .pf-line { flex-direction:column; align-items:stretch; }
.drive-contact .pf-premium { font-size:22px; min-height:56px; width:100%; }
.drive-contact .btn { min-height:56px; font-size:18px; flex:1 1 140px; }
.dnc-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.05em; color:#ef4444; border:1px solid #ef4444;
  border-radius:999px; padding:2px 8px; vertical-align:middle; }
.user-menu-wrap { position:relative; }
.user-chip { cursor:pointer; font:inherit; color:inherit; }
.user-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:230px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:0 14px 30px rgba(0,0,0,.35); }
.user-menu button { display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text-2);
  padding:10px 12px; border-radius:8px; font-weight:600; min-height:40px; }
.user-menu button:hover { background:var(--surface-2); color:var(--text); }
/* Rewrites: the toolbar, Needs row and "Showing:" line stay pinned under
   the header on desktop, and the table's column headings pin under them.
   --appnav-h / --rwsticky-h are measured by app.js on each render. */
@media (min-width:900px) {
  .rw-sticky { position:sticky; top:var(--appnav-h, 0px); z-index:20; background:var(--bg); padding-top:8px; margin-top:-8px; }
}
@media (min-width:1200px) {
  .rw-table-wrap { overflow:visible; }
  .rw-table thead th { position:sticky; top:calc(var(--appnav-h, 0px) + var(--rwsticky-h, 0px)); z-index:10; background:var(--surface); }
}
.tint-row td { background:transparent; }
.rw-addr { display:block; font-size:12px; color:var(--blue); text-decoration:none; font-weight:600; }
.sent-cell { display:inline-flex; gap:4px; align-items:center; }
.sent-date { width:140px; padding:6px 8px; font-size:12px; }
.drive-panel { margin-top:12px; }
.drive-notes { font-size:20px; min-height:120px; }
.drive-panel .need-chip { min-height:52px; font-size:15px; padding:8px 16px; }
.undo-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 14px; }

/* Drive Mode — the safety shape is the feature: CALL >= 140px tall,
   outcome tiles >= 90px, and no text inputs in motion (the only
   inputs in this view are in the parked wrap-up). */
.drive-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.drive-card { padding:22px; }
.drive-progress { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.drive-name { font-size:32px; font-weight:800; color:var(--text); margin-top:8px; line-height:1.15; }
.drive-call { display:flex; align-items:center; justify-content:center; min-height:140px; margin-top:14px;
  background:linear-gradient(135deg,#d23a43,var(--primary) 55%,#6d1219); color:#fff; border-radius:16px;
  font-size:27px; font-weight:700; text-decoration:none; box-shadow:0 10px 26px rgba(179,32,42,.35); }
.drive-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.drive-tile { min-height:96px; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:14px; font-size:17px; font-weight:800; padding:12px; }
.drive-tile:hover { border-color:var(--primary); }
.wrap-in { width:150px; }

/* Customers / the book */
.client-row { display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:11px 2px; border-bottom:1px solid var(--border-soft); cursor:pointer; }
.client-row:last-child { border-bottom:none; }
.table-scroll { overflow-x:auto; max-width:100%; }
.pol-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
.pol-table th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-dim); padding:5px 8px; border-bottom:1px solid var(--border); }
.pol-table td { padding:6px 8px; border-bottom:1px solid var(--border-soft); color:var(--text-2); }
.cust-edit { margin-top:14px; border-top:1px solid var(--border-soft); padding-top:12px; }
.cust-edit label { display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-dim); margin-bottom:6px; }
.cust-edit textarea { width:100%; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-2); border-radius:10px; padding:9px 11px; font-size:13px;
  font-family:"Figtree",sans-serif; margin-bottom:8px; }
.avatar { width:26px; height:26px; border-radius:50%; color:#fff; display:inline-flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:800; vertical-align:-7px; margin-right:4px; }

/* Activity Report */
.month-nav { display:flex; gap:12px; align-items:center; margin:12px 0 2px; }
.month-label { font-size:15px; font-weight:800; color:var(--text); }
.goal-row { margin-bottom:12px; }
.goal-head { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:700;
  color:var(--text-2); margin-bottom:5px; }
.goal-track { height:12px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.goal-fill { height:100%; border-radius:999px; }
.adj-in { width:110px; }

/* Life / New Entry / Templates (third slice) */
.subtabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.fld { display:inline-flex; flex-direction:column; gap:4px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); }
.fld input { text-transform:none; letter-spacing:normal; }
.ob-kind.questionnaire { color:#38bdf8; border-color:#38bdf8; }
.tpl-list { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tpl-preview { margin-top:12px; border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--surface-2); }
.tpl-psubj { font-weight:800; color:var(--text); font-size:14px; margin-bottom:8px; }
.tpl-pbody { white-space:pre-wrap; font-size:13px; line-height:1.55; color:var(--text-2); margin-bottom:8px; }

/* Admin / Partners / intake workbench (fourth slice) */
.status-pill { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:999px; padding:2px 9px; white-space:nowrap; }
.alert-card { border-color:#7f1d1d; background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.03)); }
.ovr-card { border-color:var(--gold); }
.paste-area { width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  border-radius:10px; padding:10px 12px; font-size:13px; font-family:"DM Mono",monospace; margin-bottom:4px; }
.guide-body p { font-size:13px; line-height:1.6; color:var(--text-2); margin:0 0 10px; }
.guide-body p:last-child { margin-bottom:0; }
.guide-body b { color:var(--text); }
.ob-kind.partner { color:#f472b6; border-color:#f472b6; }

.toast { position:fixed; bottom:24px; right:20px; background:var(--primary); color:#fff; padding:10px 18px;
  border-radius:10px; font-size:13px; font-weight:700; opacity:0; transition:opacity .3s; pointer-events:none; z-index:99; }
.toast.show { opacity:1; }
.skel-footer { padding:16px 22px 30px; color:var(--text-dim); font-size:12px; text-align:center; }
@media (max-width:760px) { .page-body { padding:14px 12px 32px; } }
/* Phones (Jared lives in the app on his phone, Oct 23). Text boxes at
   16px so iPhone Safari never zooms the page when one is tapped; every
   button, picker and checkbox big enough for a thumb (40px). */
@media (max-width:760px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea, .global-search { font-size:16px !important; }
  #app button, .seg button, #app select, .btn-sm { min-height:40px; }
  #app input[type=checkbox], #app input[type=radio] { width:22px; height:22px; }
  .drag-grip { width:34px; height:34px; font-size:20px; margin:-8px 4px -8px -8px; }
  .lane-tabs { display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px; }
  .lane-tab { flex:0 0 auto; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); border-radius:999px;
    padding:6px 12px; font-weight:700; font-size:13px; }
  .lane-tab.on { background:var(--primary); border-color:var(--primary); color:#fff; }
  .lane-tab.drop-hint { border-color:var(--primary); color:var(--text); }
  .board-wrap .board-col.lane-off { display:none; }
  .board-wrap .board-col { flex:1 1 100%; min-width:0; }
  #app select, #app input:not([type=checkbox]):not([type=radio]), #app .fld { max-width:100%; min-width:0; }
}
/* Small phones: the mark stays, the wordmark yields, search stays reachable. */
@media (max-width:640px) {
  .brand-text, .skel-tag { display:none; }
  .appnav-row.main { gap:9px; padding:9px 12px; }
  .user-meta { display:none; }
  .user-chip { padding:3px; border-radius:50%; }
  .sync-pill { display:none; }
  .util-bar { justify-content:flex-start; }
}

/* Scarlet Thread labels (Oct 26): gold small caps, Figtree 600 at about
   11.5px with .22em tracking. Last in the file so it overrides the older
   per-component label colors. The figures inside the util bar keep the
   text color. */
.board-col h4, .stat-card .l, .needs-label, .util-bar {
  font-family:"Figtree",sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.util-bar .v { color:var(--text); letter-spacing:0; }
/* Tighter tracking where the wide .22em would wrap: stat tiles everywhere,
   and every label on a phone. */
.stat-card .l { letter-spacing:.1em; font-size:10.5px; }
@media (max-width:760px) {
  .board-col h4, .needs-label, .util-bar { letter-spacing:.12em; }
  .stat-card .l { letter-spacing:.06em; }
}

/* Life contests (Oct 29, 2026) */
.contest-strip { display:flex; gap:8px; align-items:stretch; overflow-x:auto; margin:0 0 14px; padding:8px 10px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.contest-strip .cs-label { align-self:center; color:var(--gold); font-weight:700; font-size:12px; letter-spacing:.06em; white-space:nowrap; }
.contest-strip .cs-item { display:flex; flex-direction:column; gap:2px; min-width:170px; text-align:left; cursor:pointer;
  background:transparent; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:6px 10px; font:inherit; font-size:12px; }
.contest-strip .cs-item:hover { border-color:var(--gold); }
.contest-strip .cs-days { color:var(--gold); font-weight:600; }
.ct-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.ct-card .ct-head { cursor:pointer; margin-bottom:10px; }
.ct-card.open { border-color:var(--gold); }
.ct-name { font-family:'Spectral', serif; font-size:18px; font-weight:600; color:var(--text); }
.ct-bars { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:4px 18px; }
.ct-needs { margin:8px 0 0; font-size:13px; color:var(--text-2, var(--text)); }
.ct-comm { margin-top:8px; }
.ct-chip { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:5px; border:1px solid; white-space:nowrap; }
.ct-if { color:#22c55e; border-color:#22c55e88; background:#22c55e1a; }
.ct-sub { color:var(--gold); border-color:var(--gold); background:transparent; }
.ct-lapsed { color:var(--text-muted); border-color:var(--border); }
.ct-declined { color:#f87171; border-color:#f8717188; }
.ct-cod { color:var(--gold); border-color:var(--gold); background:transparent; }
.ct-contrib { margin-top:8px; }
.ct-ended { cursor:pointer; }
.ct-edit-row { border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.ct-edit-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:8px 12px; margin-top:8px; }
.ct-edit-grid input, .ct-edit-grid select, .lc-edit input { width:100%; }
.ct-edit-grid .ct-wide { grid-column:1 / -1; }
.fld.ct-check { flex-direction:row; align-items:center; gap:8px; }
.fld.ct-check input { width:auto; }
.lc-edit { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; margin-top:8px; }

/* Life Quote builder on the Term Premier cards (Oct 29, 2026) */
.pol-table tr.lq-asked td { background:var(--surface); }
.uw-panel { margin-top:10px; }

/* Quote board as a Trello board (Jared, Oct 29) */
.qr-checklist { display:flex; align-items:center; gap:6px; margin-top:4px; min-width:0; }
.qr-checklist .qr-step-line { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ck-dots { display:inline-flex; gap:3px; flex:none; }
.ck-dots i { width:7px; height:7px; border-radius:50%; border:1px solid var(--text-muted); display:block; }
.ck-dots i.on { background:#22c55e; border-color:#22c55e; }
/* Move to on the card face is the phone's way (no drag there); a
   computer drags, so the face stays a one-glance summary */
.qr-face-move { display:none; margin-top:6px; }
.qr-face-move .move-sel { font-size:12px; padding:4px 8px; }
.qr-board .board-col { flex:1 1 150px; min-width:140px; }
@media (max-width: 760px) { .qr-face-move { display:block; } }
.qr-card.open .qr-face-move { display:block; }
.undo-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 10px; margin-bottom:8px; border:1px solid #22c55e66; border-radius:8px; color:#22c55e; font-size:13px; }
.undo-line b { color:var(--text); }

/* Folding cards (Oct 29) */
.sect-h.fold-h { cursor:pointer; display:flex; align-items:center; gap:8px; }
.sect-h.fold-h .fold-chev { margin-left:auto; font-family:'DM Mono', monospace; font-size:12px; color:var(--text-muted); }
.card.folded > :not(.sect-h) { display:none !important; }
.card.folded > .sect-h { margin-bottom:0; }
.sale-row { cursor:pointer; }
.sale-detail { margin-top:6px; padding-left:10px; border-left:2px solid var(--border); font-size:12px; }
/* board cards stay one glance tall in the narrower seven-lane columns */
.qr-card .qr-note { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Stat tiles on a phone (Jared, Oct 29: "look how this reads"): two to a
   row, so a money figure has room; a figure never runs into its neighbor */
.stat-card { min-width:0; overflow:hidden; }
.stat-card .n { white-space:nowrap; overflow:hidden; }
/* Activity Report: Summary of sales rows (label left, figure right) */
.sum-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.sum-row:last-of-type { border-bottom:0; }
.sum-row .mono { color:var(--text); font-weight:700; white-space:nowrap; }
@media (max-width: 640px) {
  .stat-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .stat-card .n { font-size:clamp(17px, 5.6vw, 22px); }
  .stat-card .l { font-size:10px; line-height:1.35; }
}

/* ---- Life application sheet (Oct 29): every answer with its own Copy ---- */
.la-sheet { position:fixed; inset:0; z-index:150; background:rgba(10,8,6,.72); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px 12px; }
.la-inner { max-width:760px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 18px 22px; }
body.la-open { overflow:hidden; }
.la-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.la-head h2 { margin:2px 0 4px; font-family:"Spectral",serif; font-size:24px; color:var(--text); }
.la-kicker { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.la-vers { margin:6px 0 10px; }
.la-note { border-radius:9px; padding:9px 12px; margin:8px 0; font-size:13px; line-height:1.45; }
.la-note-red { border:1px solid var(--primary); background:rgba(179,32,42,.12); color:var(--text); }
.la-note-gold { border:1px solid var(--gold); background:rgba(212,169,74,.10); color:var(--text); }
.la-uw { border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin:10px 0; font-size:13px; }
.la-uw-p { margin-top:6px; } .la-uw-p b { color:var(--text); }
.la-sec { margin-top:16px; }
.la-sec-h { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:5px; margin-bottom:4px;
  border-bottom:2px solid var(--gold); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.la-row { display:grid; grid-template-columns:minmax(120px, 38%) 1fr auto; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--border); }
.la-l { font-size:12px; color:var(--text-muted); font-weight:600; }
.la-v { font-size:14px; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.la-miss { color:#ef4444; font-weight:700; }
.la-changed { background:rgba(212,169,74,.08); }
.la-was { display:block; font-size:11px; color:var(--gold); margin-top:2px; }
.la-copy { min-width:64px; }
.la-copy.done { border-color:var(--green); color:var(--green); }
.la-copy-gap { min-width:64px; }
@media (max-width: 640px) {
  .la-sheet { padding:0; }
  .la-inner { border-radius:0; min-height:100%; padding:14px 14px 28px; }
  .la-row { grid-template-columns:1fr auto; }
  .la-l { grid-column:1 / -1; }
}

/* Add to Home Screen steps, inside the user menu */
.add-home-help { max-width:260px; padding:8px 12px 10px; font-size:13px; line-height:1.45; color:var(--text-2); }

/* the smart quote form's answers on a card, grouped by section */
.qa-sec { font-family:'Spectral',Georgia,serif; color:var(--gold); font-weight:600; margin:10px 0 2px; font-size:14px; }
.qa-sec:first-child { margin-top:2px; }

/* the load after sign-in (Nov 2, 2026) */
.boot-loading { display:flex; flex-direction:column; align-items:center; gap:14px; padding:80px 16px; color:var(--text-2); font-size:16px; }
.boot-spin { width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--gold); animation:bootspin .9s linear infinite; }
@keyframes bootspin { to { transform:rotate(360deg); } }
.boot-slow { font-size:14px; color:var(--text-muted); text-align:center; max-width:320px; }
/* the monthly review letter (Nov 1, 2026) */
.review-card { padding:22px 20px; }
.rv-kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }
.rv-title { font-family:'Spectral',Georgia,serif; font-variant:small-caps; font-weight:700; color:var(--primary); font-size:44px; line-height:1.05; margin:8px 0 10px; letter-spacing:.02em; }
.rv-lede { color:var(--text-2); font-size:16px; line-height:1.55; margin:0 0 14px; max-width:640px; }
.rv-funnel { font-size:20px; margin:4px 0 12px; color:var(--text); }
.rv-funnel b { font-family:'DM Mono',monospace; font-size:26px; }
.rv-good { color:var(--green); } .rv-bad { color:var(--primary); }
.rv-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:10px; }
.rv-tile { background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px; }
.rv-n { font-family:'DM Mono',monospace; font-size:24px; color:var(--text); }
.rv-l { font-size:13px; color:var(--gold); font-weight:600; margin-top:2px; }
.rv-s { font-size:12px; color:var(--text-muted); margin-top:2px; }
.rv-sub { font-size:13px; color:var(--text-muted); }
.rv-list { margin:0; padding-left:20px; line-height:1.6; color:var(--text-2); }
.rv-list li { margin:4px 0; }
/* a Dashboard tile that opens where its figure lives (Nov 2) */
button.stat-card.stat-jump { font:inherit; color:inherit; text-align:left; cursor:pointer; width:100%; }
button.stat-card.stat-jump:hover, button.stat-card.stat-jump:focus-visible { border-color:var(--gold); }
/* a tile's filter on a board, with its way back (Nov 2) */
.focus-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px;
  border:1px solid var(--gold); border-radius:12px; background:var(--surface); color:var(--text-2); }