/* AgencyCue v002 mockup — VERSION 2 (density-focused).
   Targets the data-terminal feel of the user's working VPS app:
   ~13px base, tight rows, single-line collapsed rows, inline expand for
   detail. Top nav bar (full width for the table). No framework. */

/* ─── Reset + base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 13px; }                 /* dense base — down from 16px */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: #1f2937;
  background: #eef1f5;
  line-height: 1.4;
}
a { color: #c4530a; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }

:root {
  --bg:            #eef1f5;
  --surface:       #ffffff;
  --border:        #dfe4ea;
  --border-strong: #c3ccd6;
  --text:          #1f2937;
  --text-muted:    #6b7785;
  /* C5 (2026-07): darkened from #9aa5b1 (2.5:1 on white — failed WCAG AA) to
     #687280 (4.88:1 — passes AA 4.5:1) so faint body text is legible. Still a
     touch lighter than --text-muted, preserving the visual hierarchy. */
  --text-faint:    #687280;
  /* Brand accent = AgencyCue ORANGE (2026-06-24). Orange/navy is the brand direction
     (latest logo) + signals AgencyZoom-ecosystem adjacency WITHOUT cloning — this is
     OUR orange (#e8650e, deeper/warmer than AgencyZoom's ~#f47b20), our navy, our logo.
     Landing + app now share one accent. */
  --accent:        #e8650e;     /* AgencyCue orange */
  --accent-dark:   #c4530a;     /* hover / links / pressed */
  --accent-bg:     #fdf0e6;     /* light orange tint (was blue) */
  --header-bg:     #ffffff;     /* header is now WHITE (unified w/ landing 2026-07-05) */
  --navy:          #1f2d4d;     /* brand navy — header text + separator line */
  --navy-line:     #1f2d4d;     /* header bottom separator line */
  --navy-active:   #3b5488;     /* lighter navy — active-nav underline (sits on the line) */
  --row-hover:     #f4f7fb;
  --row-expanded:  #fffbe6;     /* soft yellow when a row is open (echoes your app) */
  --row-called:    #f6f8fa;
  --hot:           #dc2626;
  --warm:          #ea8a0a;
  --cool:          #9aa5b1;
  --signal:        #b45309;
  --signal-bg:     #fdf0d5;
  --good:          #15803d;
  --good-bg:       #dcfce7;
}

/* ─── Top nav bar ───────────────────────────────────────────────────────── */
/* Site-wide advisory banner (SiteSettings.banner_message) — sits above the topbar. */
.site-banner {
  background: #fff8e1; color: #7a5d00; border-bottom: 1px solid #ffe08a;
  padding: 0.5rem 1rem; font-size: 0.85rem; text-align: center; font-weight: 500;
}
.topbar {
  background: var(--header-bg);            /* white (2026-07-05 unification) */
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: 48px;
  border-bottom: 2px solid var(--navy-line);   /* thin navy separator from the page */
}
/* ── the unified logo (radar mark + two-tone wordmark) — shared with welcome ── */
.brand-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.brand-link:hover { text-decoration: none; }
.brand-word { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; }
.brand-word .ac-agency { color: var(--navy); }
.brand-word .ac-cue { color: var(--accent); }
/* CSS-drawn radar/pin mark (rings + signal dot) */
.mark { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
.mark .ring { position: absolute; border: 2px solid var(--navy); border-radius: 50%; opacity: 0.35; }
.mark .ring.r1 { inset: 0; }
.mark .ring.r2 { inset: 5px; opacity: 0.6; }
.mark .dot { position: absolute; inset: 8px; background: var(--accent); border-radius: 50%; }

.topbar .brand { display: flex; align-items: center; }
.topbar nav { display: flex; gap: 0.15rem; height: 100%; align-items: stretch; }
.topbar nav a {
  display: flex; align-items: center;
  padding: 0 0.9rem;
  color: var(--navy);
  font-size: 0.92rem;
  height: 100%;
  /* active state is a bottom underline that sits ON the header's navy line, so it
     needs a transparent border of the same width to reserve space (no jump on hover). */
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;                       /* overlap the header's 2px border */
}
.topbar nav a:hover { color: var(--accent); text-decoration: none; }
.topbar nav a.active {
  color: var(--navy); font-weight: 700;
  border-bottom-color: var(--navy-active);   /* thicker, lighter-navy underline on the line */
}
.topbar nav .nav-user { display: flex; align-items: center; padding: 0 0.6rem 0 0.9rem; color: var(--text-muted); font-size: 0.85rem; }
.topbar nav .logout-form { display: flex; align-items: center; margin: 0; }
.topbar nav .logout-form button {
  background: none; border: none; color: var(--navy); font-size: 0.92rem;
  padding: 0 0.9rem; height: 100%; cursor: pointer;
}
.topbar nav .logout-form button:hover { color: var(--accent); }

/* ─── Territories nav dropdown (one-click switcher from any page) ────────── */
/* Same bottom-border + negative margin as the nav <a> links, so the Territories
   button sits at the IDENTICAL baseline (it's a <button>, not an <a>, so without this
   its content aligned a couple px lower than the other items). */
.nav-terr { position: relative; display: flex; align-items: center; height: 100%;
  border-bottom: 3px solid transparent; margin-bottom: -2px; }
.nav-terr-btn {
  background: none; border: none; color: var(--navy); font-size: 0.92rem;
  padding: 0 0.9rem; height: 100%; cursor: pointer; display: flex; align-items: center; gap: 0.35rem;
  max-width: 14rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit;   /* <button> defaults to its own font; match the nav links */
}
.nav-terr-btn:hover, .nav-terr.open .nav-terr-btn { color: var(--accent); }
/* Light up Territories with the navy underline when EITHER (a) the dropdown is OPEN, or
   (b) we're ON a territory page — /list (Manage all) or /list?<qs> (a named territory).
   The /list* pages live under Territories now (the standalone 'List' nav was removed), so
   .active is set via base.html's nav_list block on the wrapper. Same underline as a page. */
.nav-terr.open, .nav-terr.active { border-bottom-color: var(--navy-active); }
/* On a territory page, the button text also reads as selected (weight), matching a page's active <a>. */
.nav-terr.active .nav-terr-btn { font-weight: 700; }
.nav-terr-btn .caret { font-size: 0.7rem; opacity: 0.8; }
.nav-terr-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--border, #d7dde5); border-radius: 8px;
  box-shadow: 0 14px 36px -16px rgba(15,27,45,0.45); padding: 5px; z-index: 50; margin-top: 4px;
}
.nav-terr.open .nav-terr-menu { display: block; }
/* High specificity (.topbar nav .nav-terr-menu …) so the dark-navbar's light-grey
   `nav a` color does NOT bleed into the white dropdown's links. */
.topbar nav .nav-terr-menu .ntm-item {
  display: block; padding: 0.5rem 0.75rem; font-size: 0.9rem; color: #1f2937;
  border-radius: 5px; white-space: nowrap; height: auto; font-weight: 500;
}
.topbar nav .nav-terr-menu .ntm-item:hover { background: #eef4fb; text-decoration: none; color: #1f2937; }
.topbar nav .nav-terr-menu .ntm-item.active { background: var(--accent-bg); color: var(--accent-dark); font-weight: 700; }
.topbar nav .nav-terr-menu .ntm-sep { height: 1px; background: #e3e8f0; margin: 5px 2px; }
/* "Build a new territory" section: a light header + two builder choices (the dual
   on-ramp). Each choice is a two-line item — accent title + muted hint. */
.topbar nav .nav-terr-menu .ntm-head {
  padding: 0.35rem 0.75rem 0.2rem; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #8a94a3;
}
/* Build + Manage are CO-EQUAL header actions (2026-07-07): same padding, title size (0.9rem)
   + weight (bold), and both get a two-line hint. Build keeps the orange accent as the sole
   call-to-action; Manage's title is standard dark so the two don't compete for the eye. */
.topbar nav .nav-terr-menu .ntm-build-opt,
.topbar nav .nav-terr-menu .ntm-manage { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.topbar nav .nav-terr-menu .ntm-bo-title { display: block; font-weight: 700; font-size: 0.9rem; }
.topbar nav .nav-terr-menu .ntm-bo-hint { display: block; color: #6b7785; font-size: 0.74rem; font-weight: 400; margin-top: 1px; }
.topbar nav .nav-terr-menu .ntm-build-opt .ntm-bo-title { color: var(--accent-dark); }   /* Build = the accent CTA */
.topbar nav .nav-terr-menu .ntm-manage .ntm-bo-title { color: #1f2937; }                 /* Manage = dark, co-equal weight */
/* Fixed-width leading glyph so both titles start at the SAME x (the + and ☰ are different
   natural widths; this box makes the text after them line up). */
.topbar nav .nav-terr-menu .ntm-ico { display: inline-block; width: 1.1em; text-align: center; }

/* ─── Page container ────────────────────────────────────────────────────── */
.wrap { padding: 0.8rem 1rem; }

/* ─── List header strip (title + counts + actions) ─────────────────────── */
.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
/* Unified page-title size (2026-07-07): all page headers use ONE size — the big/confident one
   (settings + export were 1.15rem = cramped vs. stats/support/lookup which used the browser
   default). 1.6rem reads as a clear title across the app without relying on the unstyled
   browser h1 default. .st-head/.sup-head/.lu-head h1 are pinned to match below. */
.list-head h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}
/* Pin the other page headers to the SAME size so all pages match (they previously used the
   unstyled browser default — visually close but not guaranteed identical). */
.st-head h1, .sup-head h1, .lu-head h1 { font-size: 1.6rem; font-weight: 700; }
.list-head .sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ─── Toolbar (export + filters summary + toggles) ──────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.5rem;
}
.toolbar .spacer { flex: 1; }
.toolbar .toggles { display: flex; gap: 0.9rem; font-size: 0.88rem; align-items: center; }

/* Export-format builder (Phase B) */
.fmt-list { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.fmt-list th { text-align: left; padding: 0.35rem 0.5rem; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; border-bottom: 1px solid var(--border-strong); }
.fmt-list td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
.fmt-list .fmt-name { font-weight: 600; }
.badge-default { background: var(--good-bg); color: var(--good); font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 8px; }
.fmt-actions { white-space: nowrap; }
.lnk { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; padding: 0 0.3rem; }
.lnk:hover { text-decoration: underline; }
.lnk.danger { color: var(--signal); }
.builder-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* Active preset pill — shows which preset the current columns were loaded from. */
.clone-preset.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.clone-preset.is-on:hover { background: var(--accent-dark); }
.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 0.5rem; }
.builder-col h4 { margin: 0 0 0.5rem; font-size: 0.82rem; }
.chosen-cols { list-style: none; margin: 0; padding: 0; min-height: 4rem; border: 1px dashed var(--border-strong); border-radius: 4px; }
.chosen-col { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); background: var(--surface); cursor: grab; }
.chosen-col .drag { color: var(--text-faint); cursor: grab; }
.chosen-col .col-label { flex: 1; padding: 0.2rem 0.35rem; border: 1px solid var(--border-strong); border-radius: 3px; font-size: 0.85rem; }
.chosen-col .col-key { color: var(--text-faint); font-size: 0.72rem; font-family: monospace; }
.chosen-col .col-x { background: none; border: none; color: var(--signal); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.field-palette { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.palette-field { background: var(--accent-bg); border: 1px solid var(--border); color: var(--accent); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.8rem; cursor: pointer; }
.palette-field:hover { background: #dbe6fb; }
.fmt-msg { color: var(--signal); font-size: 0.85rem; margin-top: 0.5rem; min-height: 1rem; }

/* Login card */
.login-card {
  max-width: 340px; margin: 3rem auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.login-card h1 { margin: 0 0 1rem; font-size: 1.25rem; }
.login-card .lbl { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.8rem; }
.login-card .lbl input,
.login-card .lbl select {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-strong); border-radius: 4px; font-weight: 400;
  font-size: 1rem; background: #fff; box-sizing: border-box;
}
.login-card .lbl input:focus,
.login-card .lbl select:focus { outline: none; border-color: var(--accent); }
.login-card button { width: 100%; justify-content: center; margin-top: 0.3rem; }
.login-card .login-error {
  background: var(--signal-bg); color: var(--signal); border-radius: 4px;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.9rem;
}
/* Login footer (2026-07-10): primary links centered + prominent; legal + single-user policy +
   desktop note as muted fine print with dividers; an outline "Exit Sign In" → welcome. */
.login-card .login-foot { color: var(--text-faint); font-size: 0.78rem; margin: 1rem 0 0; }
.login-card .login-links { text-align: center; font-size: 0.85rem; margin: 0.9rem 0 0; color: var(--text-muted); }
.login-card .login-links:first-of-type { margin-top: 1.1rem; }
.login-card .login-links a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.login-card .login-links a:hover { text-decoration: underline; }
.login-card .login-legal {
  text-align: center; font-size: 0.76rem; color: var(--text-faint);
  margin: 1.1rem 0 0; line-height: 1.4;
}
.login-card .login-legal a { color: var(--accent-dark); text-decoration: none; }
.login-card .login-legal a:hover { text-decoration: underline; }
.login-card .login-fine {
  font-size: 0.74rem; color: var(--text-faint); line-height: 1.45;
  margin: 0.9rem 0; padding: 0.9rem 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.login-card .login-fine p { margin: 0 0 0.5rem; }
.login-card .login-fine p:last-child { margin-bottom: 0; text-align: center; }
.login-card .login-fine strong { color: var(--text-muted); }
.login-card .login-exit {
  display: block; width: fit-content; margin: 1rem auto 0; padding: 0.4rem 1.4rem;
  background: #fff; color: var(--text-muted); border: 1px solid var(--border);
  font-weight: 600; font-size: 0.85rem; text-decoration: none;
}
.login-card .login-exit:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Active-filter chips (clearable, under the header) */
.active-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.achip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent-bg); color: var(--accent-dark);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 0.1rem 0.3rem 0.1rem 0.55rem; font-size: 0.78rem; font-weight: 500;
  max-width: 28rem;
}
/* truncate only the label; the ✕ stays visible (flex-shrink:0) */
.achip .achip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achip .achip-x { flex-shrink: 0; }
.achip .achip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; color: var(--accent-dark);
  font-size: 0.7rem; text-decoration: none;
}
.achip .achip-x:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* Renewal calendar strip (inline, on /list) */
.cal-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.5rem;
}
.cal-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.cal-head .cal-title { font-weight: 600; font-size: 0.85rem; }
.cal-head .cal-hint { color: var(--text-faint); font-size: 0.76rem; }
.cal-head .cal-clear { margin-left: auto; font-size: 0.78rem; color: var(--signal); }
/* Compact week pills: [date · mini-bar · count], side by side, wrapping to 1–2 rows.
   Replaces the old one-full-width-row-per-week layout (5 weeks = 5 tall rows of mostly
   empty track). The mini-bar still encodes relative volume; the count is explicit. */
.cal-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.28rem 0.6rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border); color: var(--text-muted);
  background: var(--surface);
}
.cal-pill:hover { background: var(--row-hover); border-color: var(--border-strong); text-decoration: none; }
.cal-pill.sel { background: var(--accent-bg); border-color: var(--accent); }
.cal-pill-date { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Fixed-width mini track so pills line up regardless of count; the inner bar fills it. */
.cal-pill-track { width: 3.5rem; height: 8px; background: var(--row-hover); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.cal-pill-bar { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; transition: width 0.2s; }
.cal-pill.sel .cal-pill-bar { background: var(--accent-dark); }
.cal-pill-count { font-size: 0.86rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 1.4rem; text-align: right; }
.cal-pill.sel .cal-pill-count { color: var(--accent-dark); }

/* Filters workbench — live target-set result panel */
.wb-result {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--header-bg); color: #fff;
  border-radius: 5px; padding: 0.7rem 1rem; margin-bottom: 0.6rem;
}
.wb-count { display: flex; align-items: baseline; gap: 0.5rem; }
.wb-count .wb-num { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wb-count .wb-num-label { color: #c7d0e0; font-size: 0.85rem; }
.wb-actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.wb-actions .btn { white-space: nowrap; }
/* "View my prospects" disabled when no county anchor is chosen (county-required gate). */
.wb-actions .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: auto; }
/* Inline hint shown next to the count when the county anchor is missing. */
.wb-count[data-hint]::after {
  content: attr(data-hint); color: #ffd479; font-size: 0.85rem; font-weight: 600;
  margin-left: 0.2rem;
}
.wb-count[data-hint] .wb-num-label { display: none; }
/* Gap separating Reset from the primary actions, so it isn't fat-fingered. */
.wb-actions .wb-reset-gap { width: 1.5rem; flex: 0 0 auto; }
/* Reset on the dark result bar — subtle outlined style, legible on navy. */
.wb-reset-btn { background: transparent; color: #c7d0e0; border-color: rgba(255,255,255,0.3); }
.wb-reset-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Co-located insights (inside their filter sections — Model 2) */
.insight { margin-top: 0.6rem; }
.insight-head { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.4rem; }
.insight-prompt {
  font-size: 0.8rem; font-style: italic; color: var(--text-faint);
  background: var(--bg); border: 1px dashed var(--border-strong);
  border-radius: 4px; padding: 0.4rem 0.6rem;
}
/* Carrier intelligence frame — groups targeted/low-retention/incumbents as one
   "whose book do I attack?" sub-section. */
.carrier-intel {
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 0.7rem 0.8rem; background: #fafbfc;
}
.carrier-intel .section-lbl { font-size: 0.95rem; }
.carrier-intel .sub-lbl { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }

/* "Where the renewals are" hotspots panel */
.hot-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.5rem;
}
.hot-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.hot-head .hot-title { font-weight: 600; font-size: 0.85rem; }
.hot-head .hot-hint { color: var(--text-faint); font-size: 0.76rem; }
.hot-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.15rem 1.2rem;
}
.hot-row {
  display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 0.5rem;
  padding: 0.2rem 0.3rem; border-radius: 3px; text-decoration: none; color: var(--text);
  font-size: 0.85rem;
}
.hot-row:hover { background: var(--row-hover); text-decoration: none; }
.hot-row .hot-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-row .hot-track { height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.hot-row .hot-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.hot-row .hot-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted); text-align: right; }

/* Sector-grouped industry survey (territory building) — collapsed NAICS 2-digit
   sectors (native <details>); header bar = share of the county's renewing total.
   Expand to the deduped, clickable industries. Replaces the flat industry pills. */
.sec-list { display: flex; flex-direction: column; gap: 2px; }
.sec-item { border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.sec-item[open] { border-color: var(--border-strong); }
.sec-head {
  display: grid; grid-template-columns: 0.9rem 1fr 90px auto auto; align-items: center; gap: 0.5rem;
  padding: 0.32rem 0.55rem; cursor: pointer; list-style: none; font-size: 0.85rem;
  border-radius: 4px;
}
.sec-head::-webkit-details-marker { display: none; }   /* hide native triangle (we draw our own) */
.sec-head:hover { background: var(--row-hover); }
/* "+ add all" — adds every industry in the sector to the NAICS filter at once. */
.sec-addall {
  border: 1px solid var(--accent); background: var(--accent-bg); color: var(--accent-dark);
  font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.sec-addall:hover { background: var(--accent); color: #fff; }
.sec-caret { color: var(--text-faint); font-size: 0.7rem; transition: transform 0.12s; }
.sec-item[open] .sec-caret { transform: rotate(90deg); }
.sec-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-track { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.sec-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.sec-total { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); text-align: right; }
/* the expanded industry rows: indented, leader-dot lines, no bar (flat tail) */
.sec-inds {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 1.2rem; padding: 0.25rem 0.55rem 0.4rem 1.4rem;
}
.ind-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.4rem;
  padding: 0.12rem 0.25rem; border-radius: 3px; text-decoration: none;
  color: var(--text-muted); font-size: 0.82rem;
}
.ind-row:hover { background: var(--accent-bg); color: var(--text); text-decoration: none; }
.ind-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-count { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* Winnable carrier books — full-width rows aligned with the sector survey
   (name · opportunity bar · numbers), one per carrier. Bar = share of the top
   opportunity score (winnable accounts), so longest bar = best target. No caret —
   flat clickable filter rows (carriers don't expand). The bar is amber/red (the
   "leaky carrier" vulnerability colour), distinguishing it from the orange sector
   bars. Grid mirrors .sec-head minus the caret column. */
.car-list { display: flex; flex-direction: column; gap: 2px; }
.car-row {
  display: grid; grid-template-columns: 1fr 90px auto auto; align-items: center; gap: 0.5rem 0.8rem;
  padding: 0.32rem 0.55rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); text-decoration: none; color: var(--text); font-size: 0.85rem;
}
.car-row:hover { background: var(--row-hover); border-color: var(--border-strong); text-decoration: none; }
.car-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-track { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.car-fill { display: block; height: 100%; background: var(--signal); border-radius: 4px; min-width: 2px; }
.car-opp { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--signal); white-space: nowrap; text-align: right; }
.car-sub { font-variant-numeric: tabular-nums; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  /* drop the bar on narrow screens; keep name + the two numbers */
  .car-row { grid-template-columns: 1fr auto auto; }
  .car-track { display: none; }
}

/* Export dropdown menu */
.export-menu { position: relative; }
.export-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 0.6rem; width: 230px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
/* The [hidden] attribute's display:none is overridden by display:flex above, so
   the popover would never hide. This restores hide-on-[hidden]. */
.export-pop[hidden] { display: none; }
.export-pop .exp-row { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--text-muted); }
.export-pop .exp-row select { font-size: 0.85rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border-strong); border-radius: 3px; background: #fff; }
.export-pop #expGo { justify-content: center; margin-top: 0.2rem; }
.export-pop .exp-note { font-size: 0.74rem; color: var(--text-faint); }
/* Export-credit status + live per-export cost (anti-mining quota). */
.export-pop .exp-credits { border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.1rem;
  display: flex; flex-direction: column; gap: 0.2rem; }
.export-pop .exp-cred-line { font-size: 0.76rem; color: var(--text-muted); }
.export-pop .exp-cred-line strong { color: var(--text); }
.export-pop .exp-cost-line { font-size: 0.76rem; color: #46535f; min-height: 1em; }
.export-pop .exp-cost-line.is-loading { color: var(--text-faint); font-style: italic; }
.export-pop .exp-cost-line.is-free { color: #2e7d32; }
.export-pop .exp-cost-line.is-warn { color: #c0392b; font-weight: 600; }
/* Weekly export-credit banner on the /export (formats) page. */
.credit-banner {
  background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 6px;
  padding: 0.55rem 0.9rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text);
}
.credit-banner strong { color: var(--accent-dark); }
.credit-banner .cb-note { color: var(--text-muted); font-size: 0.8rem; }
.toolbar .toggles label { cursor: pointer; white-space: nowrap; }
.toolbar .toggles input { margin-right: 0.25rem; vertical-align: middle; }
.toolbar .status-filter {
  font-size: 0.85rem; padding: 0.25rem 0.4rem;
  border: 1px solid var(--border-strong); border-radius: 3px; background: #fff;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}
.btn:hover { background: var(--row-hover); text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-sm { padding: 0.25rem 0.55rem; font-size: 0.82rem; }

/* App-wide confirm modal (replaces native confirm()); see window.appConfirm in base.html. */
.cm-overlay { position: fixed; inset: 0; background: rgba(23,34,52,.45); display: none;
  align-items: center; justify-content: center; z-index: 200; padding: 1rem; }
.cm-overlay.is-open { display: flex; }
.cm-box { background: #fff; border-radius: 12px; box-shadow: 0 24px 60px -18px rgba(15,27,45,.55);
  width: 100%; max-width: 24rem; padding: 1.3rem 1.4rem 1.1rem; }
.cm-title { font-size: 1.05rem; font-weight: 700; color: #23415e; margin: 0 0 .4rem; }
.cm-msg { font-size: .9rem; color: #51606e; line-height: 1.45; margin: 0 0 1.2rem; }
.cm-msg strong { color: #23415e; }
.cm-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.cm-btn { border: 1px solid #cdd8e4; background: #fff; color: #46535f; border-radius: 7px;
  padding: .45rem .9rem; font-size: .88rem; font-weight: 600; cursor: pointer; }
.cm-btn:hover { background: #f1f4f8; }
.cm-btn:disabled { opacity: .6; cursor: default; }
.cm-btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.cm-btn-danger:hover { background: #a93226; }

/* ─── Dense prospect table ──────────────────────────────────────────────── */
.list-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
table.prospects { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.prospects thead { background: #f0f3f8; }
table.prospects th {
  text-align: left;
  padding: 0.45rem 0.55rem;
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
  user-select: none;
}
table.prospects th.sortable { cursor: pointer; }
table.prospects th.sortable:hover { color: var(--text); }

/* Collapsed data row — single line, tight */
tr.prow {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
tr.prow:hover td { background: var(--row-hover); }
tr.prow td {
  padding: 0.4rem 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 1px;          /* forces ellipsis on long cells; widths come from colgroup */
}
tr.prow td.wide { max-width: none; }
tr.prow.expanded td { background: var(--row-expanded); }
tr.prow.called td { color: var(--text-muted); }
tr.prow.called .biz { text-decoration: line-through; }

/* Cells */
.col-check { width: 30px; text-align: center; }
.col-heat  { width: 34px; text-align: center; font-size: 1rem; }
.col-biz   { font-weight: 600; color: var(--text); }
/* Per-account at-risk pills on the collapsed row (Switched/Dropped/PEO exit).
   Small + amber so restless accounts stand out; loyal accounts have none. */
.col-biz .risk-pill {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.32rem;
  font-size: 0.66rem; font-weight: 600; line-height: 1.35;
  color: var(--signal); background: var(--signal-bg);
  border-radius: 3px; vertical-align: 1px; white-space: nowrap;
}
.col-renews{ white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-phone { white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-phone.no-phone { color: var(--text-faint); font-style: italic; font-variant-numeric: normal; font-size: 0.8rem; }
.col-wc    { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.col-status{ width: 116px; }

.heat-hot  { color: var(--hot); }
.heat-warm { color: var(--warm); }
.heat-cool { color: var(--cool); }

input.row-check { width: 16px; height: 16px; cursor: pointer; margin: 0; vertical-align: middle; }

/* Status select inline */
.status-select {
  font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: #fff;
  width: 100%;
  max-width: 110px;
  cursor: pointer;
}
.status-select.s-new     { color: var(--text-muted); }
.status-select.s-noanswer{ color: #b45309; }
.status-select.s-vm      { color: #b45309; }
.status-select.s-spoke   { color: var(--accent); }
.status-select.s-quoted  { color: var(--good); font-weight: 600; }
.status-select.s-dead    { color: #9aa5b1; text-decoration: line-through; }

/* Expanded detail row */
tr.detail-row td {
  padding: 0;
  border-bottom: 1px solid var(--border-strong);
  background: var(--row-expanded);
}
tr.detail-row.hidden { display: none; }
.detail-inner {
  display: grid;
  /* TWO horizontal frames:
       Top row  = WHY / BUSINESS & CONTACTS / CARRIER (3 cols, wider middle so
                  names + addresses stop wrapping awkwardly).
       Bottom row = the tabbed deep features, spanning the FULL width.
     Proportions ~ WHY 22% / CONTACTS 40% / CARRIER 38%. */
  grid-template-columns: 0.55fr 1fr 0.95fr;
  gap: 0.9rem 0;
  padding: 0.7rem 1rem 0.9rem 2.2rem;
  font-size: 0.88rem;
  align-items: start;
}
/* Top-frame sections: vertical dividers between the three. */
.detail-inner > .sec {
  padding-right: 1.4rem;
}
.detail-inner > .sec + .sec {
  padding-left: 1.4rem;
  border-left: 1px solid var(--border-strong);
}
/* Bottom frame — the tabbed deep features (Coverage / Prior / Risk). Spans all
   three columns and is separated from the top frame by a horizontal rule, so it
   reads as a distinct second frame rather than a 4th column. */
.detail-inner > .sec-tabs {
  grid-column: 1 / -1;
  margin-top: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-strong);
  min-width: 0;        /* let wide tables shrink/scroll, not blow out the grid */
}
/* Give the tab content a comfortable floor so the frame doesn't look squeezed
   and doesn't jump around as panes of different heights are switched (and so
   the Risk Survey has room to grow). */
.detail-inner > .sec-tabs .tabpane.active {
  min-height: 11rem;
  padding-bottom: 0.4rem;
}
.tabstrip {
  display: flex; gap: 0.15rem;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 0.6rem;
}
.tabstrip button {
  background: none; border: none;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabstrip button:hover { color: var(--text); }
.tabstrip button.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Count badge on each tab — "(2)" style snapshot of what's behind the tab.
   Muted by default; a zero count is greyer/lighter so "nothing here" is obvious. */
.tabstrip button .tab-count {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.32rem;
  border-radius: 8px;
  font-size: 0.68rem; font-weight: 700;
  background: var(--bg); color: var(--text-muted);
  vertical-align: 1px;
}
.tabstrip button.active .tab-count { background: var(--accent); color: #fff; }
.tabstrip button .tab-count.zero { background: transparent; color: var(--text-faint); font-weight: 500; }
.tabpane { display: none; }
.tabpane.active { display: block; }

/* ── Research pane: pre-scoped external-search launcher (call prep, zero cost) ─── */
.research { padding: 0.2rem 0; }
.research .rsrch-intro { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 0.7rem; }
.research .rsrch-broad {
  border: 1px solid var(--border); border-radius: 10px; background: var(--accent-bg, #fdf0e6);
  padding: 0.8rem 1rem; margin-bottom: 1rem;
}
.research .rsrch-broad-h { font-weight: 700; color: var(--navy, #1f2d4d); font-size: 0.95rem; }
.research .rsrch-broad-sub { font-size: 0.8rem; color: var(--text-muted); margin: 0.15rem 0 0.6rem; }
.research .rsrch-broad-btn { font-weight: 600; }
.research .rsrch-or { font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--text-faint); margin: 0.2rem 0 0.5rem; }
.research .rsrch-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem;
}
.research .rsrch-card {
  display: flex; align-items: center; gap: 0.7rem; text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface);
  padding: 0.7rem 0.9rem; color: var(--text); transition: border-color 0.12s, background 0.12s;
}
.research .rsrch-card:hover { border-color: var(--accent); background: var(--accent-bg, #fdf0e6); text-decoration: none; }
.research .rsrch-ic { font-size: 1.2rem; flex: 0 0 auto; }
.research .rsrch-tt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.research .rsrch-title { font-weight: 600; font-size: 0.88rem; color: var(--navy, #1f2d4d); }
.research .rsrch-sub { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.research .rsrch-arrow { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
/* "Not on file" state: same card shape, muted, no hover, not clickable. */
.research .rsrch-dead { background: var(--surface); border-style: dashed; cursor: default; opacity: 0.7; }
.research .rsrch-dead:hover { border-color: var(--border-strong); background: var(--surface); }
.research .rsrch-dead .rsrch-title { color: var(--text-muted); }
.research .rsrch-dead .rsrch-ic { filter: grayscale(1); opacity: 0.6; }

/* ── Prominent AI-processing indicator (the Survey Summary wait) ─────────────── */
/* The AI call takes a few seconds; a tiny grey line gave no signal. This is a centered
   card with clear text + animated dots so the user KNOWS something is happening. */
.ai-loading {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 1.6rem 1rem; text-align: center;
}
.ai-loading .ai-loading-txt {
  font-size: 0.98rem; font-weight: 600; color: var(--accent-dark, #c4530a);
}
.ai-loading .ai-loading-sub { font-size: 0.8rem; color: var(--text-muted); }
.ai-loading .ai-dots { display: inline-flex; gap: 0.35rem; }
.ai-loading .ai-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #e8650e);
  animation: ai-dot-bounce 1.2s infinite ease-in-out both;
}
.ai-loading .ai-dots span:nth-child(1) { animation-delay: -0.24s; }
.ai-loading .ai-dots span:nth-child(2) { animation-delay: -0.12s; }
@keyframes ai-dot-bounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-loading .ai-dots span { animation: none; opacity: 0.7; }
}

/* ── Coverage Profile mini-gantt (ported from v001) ─────────────────────── */
/* --yrs (set inline from the JS) = number of year columns, so the track + the
   lane grid lines adapt when the coverage window changes (currently 8: 2021-28). */
.cov-gantt { font-size: 0.8rem; --yrs: 8; }
.cov-gantt .years {
  display: grid; grid-template-columns: 11rem 1fr; align-items: end;
  color: var(--text-muted); margin-bottom: 0.35rem;
}
.cov-gantt .years .yr-track {
  display: grid; grid-template-columns: repeat(var(--yrs), 1fr);
  border-bottom: 1px solid var(--border-strong);
}
.cov-gantt .years .yr-track span { text-align: center; font-size: 0.74rem; border-left: 1px dashed var(--border); }
.cov-gantt .years .yr-track span:first-child { border-left: none; }
.cov-gantt .lane-row { display: grid; grid-template-columns: 11rem 1fr; align-items: center; margin-bottom: 7px; }
.cov-gantt .lane-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.4rem; }
.cov-gantt .lane-label .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--good); margin-right:0.3rem; vertical-align: middle; }
.cov-gantt .lane { position: relative; height: 20px; background: repeating-linear-gradient(to right, transparent 0, transparent calc(100%/var(--yrs) - 1px), var(--border) calc(100%/var(--yrs) - 1px), var(--border) calc(100%/var(--yrs))); border-radius: 2px; }
.cov-gantt .seg { position: absolute; top: 3px; bottom: 3px; background: #334155; border-radius: 2px; }
.cov-gantt .seg.hatch { background: repeating-linear-gradient(45deg, #94a3b8 0 3px, #e2e8f0 3px 6px); }
.cov-gantt .today { position:absolute; top:0; bottom:0; width:0; border-left:1.5px dashed var(--warm); }
.cov-gantt .legend { margin-top:0.4rem; color:var(--text-muted); font-size:0.72rem; display:flex; gap:0.8rem; flex-wrap:wrap; }
.cov-gantt .legend .sw { display:inline-block; width:14px; height:8px; vertical-align:middle; margin-right:0.2rem; border-radius:2px; }
.cov-gantt .legend .sw.solid { background:#334155; }
.cov-gantt .legend .sw.hatch { background: repeating-linear-gradient(45deg,#94a3b8 0 3px,#e2e8f0 3px 6px); }

/* ── Prior Policies compact table ───────────────────────────────────────── */
.prior-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.prior-tbl th { text-align: left; padding: 0.25rem 0.4rem; color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.prior-tbl td { padding: 0.28rem 0.4rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.prior-tbl td.cancel { color: var(--signal); font-weight: 600; }
.prior-tbl .carriers-seen { margin-bottom: 0.4rem; font-size: 0.76rem; color: var(--text-muted); }
/* Scroll long ledgers within a bounded height (avg ~4 rows, rare ~114) so the
   expanded panel never blows out; header stays visible while scrolling. */
.prior-tbl-wrap { overflow-x: auto; overflow-y: auto; max-height: 22rem; }
.prior-tbl thead th { position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }

/* ── PEO markers (Prior Policies table + coverage swimlane) ─────────────────
   Surface WHERE a PEO exit happened so the rep can verify the "PEO Exit" pill.
   PEO = coverage written through a PEO/leasing arrangement; Direct = the
   business's own policy. The exit = first Direct policy after the last PEO. */
.cov-type { display:inline-block; padding:0.05rem 0.4rem; border-radius:10px; font-size:0.66rem; font-weight:600; white-space:nowrap; }
.cov-type.peo    { background:#fef3c7; color:#92400e; }              /* amber: on a PEO */
.cov-type.direct { background:#e2e8f0; color:#475569; }              /* grey: own policy */
.cov-type.direct.exit { background:#dcfce7; color:#166534; }         /* green: the exit row */
.prior-tbl tr.peo-exit-row td { background:#f0fdf4; }                /* tint the whole exit row */
.prior-tbl td.active-cell { color:var(--good,#16a34a); font-weight:600; }  /* in force */
.prior-tbl td.expired-cell { color:var(--text-faint,#94a3b8); font-style:italic; }  /* active snapshot, term ended */

/* Multi-policy heads-up next to the header carrier (>1 policy in force). */
.multi-policy-tag {
  display:inline-block; margin-left:0.4rem; padding:0.05rem 0.45rem; border-radius:10px;
  background:#fef3c7; color:#92400e; font-size:0.68rem; font-weight:600; white-space:nowrap;
  vertical-align:middle; cursor:default;
}
.prior-tbl tr.active-row td { background:#fafffb; }                  /* faint tint for current/active rows */
.prior-tbl tr.active-row.peo-exit-row td { background:#f0fdf4; }     /* exit tint wins if both */
/* lane-label PEO tag in the swimlane */
.cov-gantt .lane-label .peo-tag { display:inline-block; margin-left:0.3rem; padding:0 0.3rem; border-radius:8px;
  background:#fef3c7; color:#92400e; font-size:0.6rem; font-weight:700; vertical-align:middle; }
/* vertical PEO-exit line in each lane (mirrors .today, different colour + solid) */
.cov-gantt .peo-exit-line { position:absolute; top:-2px; bottom:-2px; width:0; border-left:1.5px solid #16a34a; z-index:2; }
.cov-gantt .legend .peo-exit-key { color:#166534; font-weight:600; }

/* ── Risk Survey picker ─────────────────────────────────────────────────── */
.risk, .summary { font-size: 0.82rem; }
.risk .naics-line, .summary .naics-line { color: var(--text-muted); margin-bottom: 0.5rem; }
.risk .naics-line code, .summary .naics-line code { background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 2px; }
/* Candidate survey picker — shared by the Risk Survey (.risk) AND Survey Summary
   (.summary) panels so both look/behave identically: full-width stacked rows, the
   whole row clickable (label wraps the radio). */
.risk .candidates, .summary .candidates { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.risk .cand, .summary .cand { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.risk .cand:hover, .summary .cand:hover { background: var(--row-hover); }
.risk .cand input, .summary .cand input { margin: 0; }
.risk .note-hint, .summary .note-hint { color: var(--text-faint); font-style: italic; font-size: 0.78rem; }

/* Risk Survey NAICS search (conversational support; ephemeral). */
.survey-search { margin: 0.5rem 0; }
.survey-search .ss-label { display:block; font-size:0.78rem; color:var(--text); margin-bottom:0.25rem; }
.survey-search .ss-hint { color:var(--text-faint); font-weight:400; }
.survey-search-row { display:flex; align-items:stretch; gap:0.5rem; max-width:520px; }
.survey-search-box { position:relative; flex:1; min-width:0; }
.survey-search .ss-clear { flex:0 0 auto; white-space:nowrap; }
.survey-search .ss-input { width:100%; padding:0.4rem 0.55rem; border:1px solid var(--border-strong); border-radius:4px; font-size:0.85rem; }
.survey-search .ss-input:focus { outline:none; border-color:var(--accent); }
.survey-search .ss-results { position:absolute; z-index:20; left:0; right:0; margin-top:2px; background:#fff;
  border:1px solid var(--border-strong); border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,0.10);
  max-height:260px; overflow-y:auto; display:none; }
.survey-search .ss-results.open { display:block; }
.survey-search .ss-naics { padding:0.35rem 0.55rem; cursor:pointer; display:flex; gap:0.5rem; align-items:baseline;
  border-bottom:1px solid var(--border); font-size:0.82rem; }
.survey-search .ss-naics:hover { background:var(--accent-bg); }
.survey-search .ss-naics .rc { font-variant-numeric:tabular-nums; font-weight:600; min-width:3.6rem; }
.survey-search .ss-naics .rn { color:var(--text); }
.survey-search .ss-sub { padding:0.35rem 0.55rem; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--text-muted); background:var(--bg); border-bottom:1px solid var(--border); }
.survey-search .ss-survey { padding:0.35rem 0.55rem; cursor:pointer; font-size:0.84rem; font-weight:600;
  border-bottom:1px solid var(--border); }
.survey-search .ss-survey:hover { background:var(--accent-bg); }
.survey-search .ss-survey .ss-cat { font-weight:400; color:var(--text-muted); font-size:0.76rem; }
.survey-search .ss-none { padding:0.5rem 0.6rem; color:var(--text-faint); font-style:italic; font-size:0.82rem; }
/* Loaded survey content (read-only) shown after a candidate is picked. */
.survey-content { margin-top: 0.6rem; }
.survey-detail { border-top: 1px dashed var(--border-strong); padding-top: 0.6rem; }
.survey-detail .sv-head { font-weight: 700; font-size: 0.86rem; margin-bottom: 0.3rem; }
.survey-detail .sv-desc { color: var(--text-muted); margin: 0 0 0.6rem; }
.survey-detail h5 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin: 0.6rem 0 0.25rem; }
.survey-detail .sv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.6rem; }
.survey-detail .sv-list { margin: 0; padding-left: 1.1rem; }
.survey-detail .sv-list li { margin-bottom: 0.15rem; }
.survey-detail .sv-exp { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem; margin-bottom: 0.35rem; }
.survey-detail .sv-exp-k { font-weight: 600; color: var(--text-muted); }
.risk .survey-link { display: inline-block; margin-top: 0.4rem; }
/* Survey Summary (experimental AI tab): the ✨ tab + the talking-point list. */
/* AI Survey Summary tab: INACTIVE looks like the other inactive tabs (muted grey) — the ✨
   emoji already sets it apart. Don't use orange when inactive: orange is the ACTIVE-tab signal,
   so an always-orange tab competed with the real active tab (2026-07-07 fix). */
.tabstrip button.tab-ai { color: var(--text-muted); }
.tabstrip button.tab-ai:hover { color: var(--text); }
.tabstrip button.tab-ai.active { color: var(--accent); border-bottom-color: var(--accent); }
.ai-summary { border-top: 1px dashed var(--border-strong); padding-top: 0.6rem; }
.ai-summary .sv-head { font-weight: 700; font-size: 0.86rem; margin-bottom: 0.5rem; }
.ai-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ai-points li {
  border-left: 3px solid var(--accent); background: var(--accent-bg);
  padding: 0.5rem 0.7rem; border-radius: 0 6px 6px 0; font-size: 0.85rem; line-height: 1.5;
}
.ai-points li strong { color: var(--text); }
.detail-inner h4 {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;          /* explicit so h4 matches .sub-label (was browser-default 700) */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.detail-inner h4:not(:first-child) { margin-top: 0.8rem; }
.detail-inner .kv { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.2rem 0.5rem; align-items: baseline; }
.detail-inner .kv dt { color: var(--text-muted); }
.detail-inner .kv dd { margin: 0; }
/* Officer names rendered as kv values — bold so they stand out from the muted
   role labels on the left (role label = dt, name = dd.nm). */
.detail-inner .kv dd.nm { font-weight: 600; }
/* Business status — INACTIVE in red so a rep never wastes a call on a closed
   business; ACTIVE in green as a positive confirmation. */
.detail-inner .kv dd.status-active   { color: var(--good); font-weight: 600; }
.detail-inner .kv dd.status-inactive { color: var(--signal); font-weight: 700; }
.detail-inner .kv dd.status-unknown  { color: var(--text-muted); font-style: italic; }
.detail-inner .kv .county-note { color: var(--text-muted); font-size: 0.78rem; font-style: italic; }

/* Contacts sub-list: officer/agent rows, each with name + role + optional phone */

/* Phone treated as a first-class business field, with a call affordance */
/* Phone is a kv row now: bold tabular number + copy + a small "Call" link. */
.detail-inner .kv dd .num { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Copy-to-clipboard button (📋) on the paste-worthy fields (address/phone/name/FEIN). */
.detail-inner .copy-btn {
  border: none; background: none; cursor: pointer; padding: 0 0.15rem;
  font-size: 0.82rem; line-height: 1; opacity: 0.45; vertical-align: baseline;
  transition: opacity 0.12s;
}
.detail-inner .copy-btn:hover { opacity: 1; }
.detail-inner .copy-btn.copied { opacity: 1; color: var(--good); font-weight: 700; }

/* Agency block tint so it reads as "the competition" */
.detail-inner .agency-line { color: var(--text); }
.detail-inner .agency-line .agcy-name { font-weight: 600; }
.detail-inner .no-data { color: var(--text-faint); font-style: italic; font-size: 0.82rem; }

/* Alt Ph# row (§5) — rep-found alternate phone. Actions are proper OUTLINED BUTTONS (2026-07-10,
   was a faint pencil glyph + a text-link Research that read as decoration — reps missed them).
   Edit / Research / Add / Cancel share one outlined style; Save is filled-accent. Badges show
   trust only (unverified/verified — never counts, under the radar). */
.detail-inner .altph .altph-btn {
  display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.35rem;
  border: 1px solid var(--border, #cdd8e4); background: #fff; cursor: pointer;
  font-size: 0.74rem; font-weight: 600; line-height: 1; padding: 0.22rem 0.5rem;
  border-radius: 6px; color: var(--accent, #c4530a); text-decoration: none;
  white-space: nowrap; vertical-align: baseline; transition: 0.12s;
}
.detail-inner .altph .altph-btn:hover { border-color: var(--accent, #c4530a); background: #fff7f1; }
.detail-inner .altph .altph-btn-save { background: var(--accent, #c4530a); color: #fff; border-color: var(--accent, #c4530a); }
.detail-inner .altph .altph-btn-save:hover { background: #a94709; border-color: #a94709; }
.detail-inner .altph .altph-input {
  width: 9.5rem; font-size: 0.84rem; padding: 0.2rem 0.4rem;
  border: 1px solid var(--border, #d5dbe3); border-radius: 6px;
}
.detail-inner .altph .altph-badge {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted, #6b7785); border: 1px solid var(--border, #e0e6ed);
  border-radius: 999px; padding: 0.05rem 0.4rem; margin-left: 0.25rem;
}
.detail-inner .altph .altph-badge.ok { color: var(--good, #1a7f37); border-color: #bce3c9; background: #e7f6ec; }
.detail-inner .altph .altph-err { color: var(--signal, #c0392b); font-size: 0.74rem; margin-left: 0.3rem; }

/* Coverage column has no parent "Coverage" header — the two sub-sections
   (Carrier / Agency) ARE the headers, styled to match the h4 section labels
   in the sibling columns. Less nesting, less vertical space. */
.detail-inner .cov-sub { margin-bottom: 0.8rem; }
.detail-inner .cov-sub:last-child { margin-bottom: 0; }
.detail-inner .cov-sub .sub-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600;
  margin: 0 0 0.35rem;     /* match h4 spacing */
}
/* The first sub-label should align with the other columns' h4 headers (no
   extra top margin); subsequent ones get breathing room above. */
.detail-inner .cov-sub:not(:first-child) .sub-label { margin-top: 0.8rem; }

/* Note spans the 3 content columns (not the reserved spacer) under them. */
.detail-inner .note-full {
  grid-column: 1 / 4;
  margin-top: 0.3rem;
  padding-right: 1.4rem;
}
.detail-inner .note-full textarea {
  width: 100%; min-height: 2.2rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-strong); border-radius: 3px;
  font-size: 0.86rem; resize: vertical; background: #fff;
}
/* Pills stacked vertically (one reason per line) in the WHY column. */
.detail-inner .signals { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-bottom: 0.6rem; }
.detail-inner .pill {
  display: inline-block;
  background: var(--signal-bg); color: var(--signal);
  padding: 0.12rem 0.55rem; border-radius: 3px;
  font-size: 0.8rem; font-weight: 500; white-space: nowrap;
}
.detail-inner .pill.neutral { background: var(--accent-bg); color: var(--accent); }

/* PEO-exit recency tiers (list .risk-pill + detail .pill): recent pops, stale
   recedes — display-only triage cue, no filter/rank change. hot <12mo, aging
   12-36mo, stale 36mo+. */
.risk-pill.peo-hot, .detail-inner .pill.peo-hot {
  background:#fde68a; color:#92400e; font-weight:700;            /* bold amber — fresh lead */
}
.risk-pill.peo-aging, .detail-inner .pill.peo-aging {
  background:#fef3c7; color:#92400e;                              /* soft amber — cooling */
}
.risk-pill.peo-stale, .detail-inner .pill.peo-stale {
  background:#e5e7eb; color:#6b7280; font-weight:500;             /* muted grey — stale */
}
.detail-inner .note-area { grid-column: 1 / -1; }
.detail-inner .note-area textarea {
  width: 100%;
  min-height: 2.2rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-size: 0.86rem;
  resize: vertical;
  background: #fff;
}
.detail-inner .actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.3rem; }
.detail-inner .actions a { font-size: 0.85rem; }

/* ─── Pagination + footer ───────────────────────────────────────────────── */
.pagination {
  display: flex; gap: 0.3rem; align-items: center; justify-content: center;
  padding: 0.7rem; font-size: 0.88rem;
}
.pagination a, .pagination span {
  padding: 0.25rem 0.6rem; border: 1px solid var(--border);
  border-radius: 3px; background: #fff; color: var(--text);
}
.pagination a.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination span.disabled { color: var(--text-faint); }
.pagination .info { border: none; background: transparent; color: var(--text-muted); }
.next-note { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem; border-top: 1px solid var(--border); }

/* ─── Forms (settings / welcome) — denser than v1 ──────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1rem 1.2rem; margin-bottom: 0.8rem;
}
.card h2 { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 600; }
.card h2 + .help { color: var(--text-muted); font-size: 0.86rem; margin: 0 0 0.9rem; }
.fs { margin-bottom: 0.85rem; }
.fs:last-child { margin-bottom: 0; }
.fs .lbl { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.3rem; }
.fs .lbl .req { color: #dc2626; font-size: 0.8rem; margin-left: 0.2rem; }
.fs .lbl .opt { color: var(--text-faint); font-size: 0.78rem; margin-left: 0.35rem; font-weight: 400; }
/* Description on the SAME line as the title (saves vertical space). Inline,
   lighter weight; wraps after the bold title if the line runs long. */
.fs .lbl .lbl-desc { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; margin-left: 0.5rem; }
/* Legacy block hint (kept for any remaining standalone hints). */
.fs .hint { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 0.45rem; }
.fs input[type=text], .fs input[type=email], .fs input[type=password], .fs select {
  padding: 0.4rem 0.55rem; border: 1px solid var(--border-strong);
  border-radius: 3px; font-size: 0.9rem; max-width: 380px; width: 100%;
}
.fs input:focus, .fs select:focus { outline: none; border-color: var(--accent); }

/* Business-name field: input + inline [Update count] (free-text needs a manual
   recompute; the button is the local cue). */
.name-row { display: flex; align-items: stretch; gap: 0.5rem; max-width: 540px; }
.name-row input[type=text] { flex: 1; max-width: none; }
.name-row .name-update { white-space: nowrap; flex: 0 0 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  padding: 0.25rem 0.6rem; border-radius: 14px; border: 1px solid var(--border-strong);
  background: #fff; font-size: 0.84rem; cursor: pointer; user-select: none;
}
.chip:hover { background: var(--row-hover); }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip .x { opacity: 0.7; margin-left: 0.2rem; }
.chips .show-all { color: var(--text-muted); font-size: 0.84rem; padding: 0.25rem 0; align-self: center; }

.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15rem 0.55rem; background: var(--accent-bg); color: var(--accent);
  border-radius: 11px; font-size: 0.82rem;
}
.tag .x { cursor: pointer; opacity: 0.6; }
.empty { color: var(--text-faint); font-size: 0.84rem; font-style: italic; }

.addrow { display: flex; gap: 0.5rem; }
.addrow .lnk { color: var(--accent); background: none; border: none; cursor: pointer; font-size: 0.86rem; padding: 0.2rem 0; }
.addrow .lnk:hover { text-decoration: underline; }

/* ── Dual-mode code search picker (WC + NAICS) ──────────────────────────── */
.code-picker { position: relative; max-width: 460px; }
.code-picker input.search {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 0.9rem;
}
.code-picker input.search:focus { outline: none; border-color: var(--accent); }
.code-picker .results {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
.code-picker .results.open { display: block; }
.code-picker .result {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.code-picker .result:last-child { border-bottom: none; }
.code-picker .result:hover, .code-picker .result.active { background: var(--accent-bg); }
.code-picker .result .rc {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--text); white-space: nowrap; min-width: 3.6rem;
}
.code-picker .result .rn { flex: 1; color: var(--text); }
.code-picker .result .ru { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.code-picker .results .none { padding: 0.5rem 0.6rem; color: var(--text-faint); font-style: italic; font-size: 0.85rem; }
.code-picker .hint-inline { color: var(--text-faint); font-size: 0.78rem; margin-top: 0.25rem; }
/* highlight the matched substring in a result name */
.code-picker .result mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Carrier autocomplete — same dropdown look as the code picker, but the input
   keeps its own (typed) value as the filter; rows are an optional precise pick. */
.carrier-picker { position: relative; max-width: 460px; }
.carrier-picker .carrier-results {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
.carrier-picker .carrier-results.open { display: block; }
.carrier-picker .result {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.carrier-picker .result:last-child { border-bottom: none; }
.carrier-picker .result:hover { background: var(--accent-bg); }
.carrier-picker .result .rn { flex: 1; color: var(--text); }
.carrier-picker .result .rmeta { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.carrier-picker .result .rmeta .ru { color: var(--text-muted); }
.carrier-picker .carrier-results .none {
  padding: 0.5rem 0.6rem; color: var(--text-faint); font-style: italic; font-size: 0.85rem;
}

.field-row { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.field-row .f .lbl { font-size: 0.82rem; }
.field-row .f select { width: auto; min-width: 130px; }

/* Data-quality: an always-on "fact" line + an opt-in checkbox filter. */
.fact-line {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.88rem; color: var(--text);
  padding: 0.35rem 0.6rem;
  background: var(--good-bg);
  border-radius: 4px;
  margin-bottom: 0.6rem;
}
.fact-line .check { color: var(--good); font-weight: 700; }
.check-filter { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
.check-filter input { margin-top: 0.15rem; }
.check-filter .cf-label { font-size: 0.9rem; font-weight: 500; }
.check-filter .cf-hint { color: var(--text-muted); font-size: 0.82rem; display: block; margin-top: 0.1rem; }

.form-actions {
  display: flex; gap: 0.6rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.8rem 1.2rem; margin-top: 0.8rem;
}
.form-actions .spacer { flex: 1; }

/* ─── Welcome ───────────────────────────────────────────────────────────── */
.welcome { max-width: 640px; margin: 2.5rem auto; padding: 0 1rem; }
.welcome h1 { font-size: 1.6rem; margin: 0 0 0.3rem; }
.welcome .lead { color: var(--text-muted); font-size: 0.98rem; margin: 0 0 1.5rem; line-height: 1.5; }
.welcome .foot { color: var(--text-muted); font-size: 0.84rem; text-align: center; margin-top: 1.2rem; }

/* ─── Index ─────────────────────────────────────────────────────────────── */
.index { max-width: 760px; margin: 2.5rem auto; padding: 0 1rem; }
.index .lnk {
  display: block; padding: 0.85rem 1rem; margin-bottom: 0.4rem;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text);
}
.index .lnk:hover { background: var(--row-hover); text-decoration: none; }
.index .lnk strong { display: block; margin-bottom: 0.1rem; }
.index .lnk .d { color: var(--text-muted); font-size: 0.88rem; }
.index .banner {
  padding: 0.8rem 1rem; margin-bottom: 1.2rem;
  background: var(--signal-bg); color: var(--signal); border-radius: 4px; font-size: 0.88rem;
}
.index .legend { background:#fff; border:1px solid var(--border); border-radius:4px; padding:0.8rem 1rem; margin-bottom:1rem; font-size:0.88rem; }
.index .legend code { background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 2px; }

/* ─── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .detail-inner { grid-template-columns: 1fr; padding-left: 1rem; }
  .topbar nav a { padding: 0 0.6rem; font-size: 0.86rem; }
  /* On mobile, hide a couple of columns to keep rows single-line */
  table.prospects th.hide-mobile, tr.prow td.hide-mobile { display: none; }
}

/* ── Auth / account pages (login, signup, payment-required, settings) ─────────
   Centered narrow card on the standard page; matches the app's card styling. */
.auth-card { max-width: 460px; margin: 2rem auto; }
.auth-card h2 { margin: 0 0 0.5rem; }
.auth-actions { margin: 1.1rem 0 0.4rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.auth-foot { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); }
.auth-foot a { color: var(--accent); }

/* ── Signup form (extends .login-card) ───────────────────────────────────────*/
.signup-card { max-width: 420px; }
.signup-card .lbl .opt { font-weight: 400; color: var(--text-faint); font-size: 0.8rem; }
.field-err { display: block; color: var(--signal); font-size: 0.78rem; margin-top: 0.2rem; font-weight: 400; }
.consent-row { margin: 0.4rem 0 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.check-line { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; font-weight: 400; line-height: 1.4; }
.check-line input[type=checkbox] { margin-top: 0.15rem; flex-shrink: 0; }
.check-line a { color: var(--accent); }

/* ── Flash messages (Django messages framework) ──────────────────────────────*/
.messages { margin-bottom: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.msg { padding: 0.5rem 0.8rem; border-radius: 4px; font-size: 0.88rem; border: 1px solid; }
.msg-success { background: var(--good-bg); color: var(--good); border-color: #b7e4c7; }
.msg-error   { background: var(--signal-bg); color: var(--signal); border-color: #f1c27d; }
.danger-btn { background: #fff; color: var(--signal); border: 1px solid #f1c27d; }
.danger-btn:hover { background: var(--signal-bg); text-decoration: none; }

/* ── Legal docs (Terms / Privacy) ────────────────────────────────────────────*/
.legal-doc { max-width: 760px; margin: 1rem auto; }
.legal-doc h1 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.legal-doc h3 { font-size: 0.95rem; margin: 1.1rem 0 0.3rem; }
.legal-doc p, .legal-doc li { font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.legal-doc ul { margin: 0.3rem 0 0.3rem 1.1rem; }
.legal-meta { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.6rem; }
.legal-meta strong { color: var(--signal); }

/* ── Onboarding empty-state (/list with no audience filter) ───────────────────*/
.onboard-card { max-width: 620px; margin: 2rem auto; text-align: center; }
.onboard-card h2 { margin: 0 0 0.6rem; }
.onboard-actions { margin: 1.2rem 0; }
.onboard-hint { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.8rem; }

/* ── Cap banner (top of /list when the set is capped to LIST_CAP) ─────────────*/
.cap-banner {
  background: var(--accent-bg); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 0.5rem 0.8rem; margin: 0.4rem 0 0.6rem;
  font-size: 0.88rem; color: var(--text);
}
.cap-banner strong { color: var(--accent-dark); }
.cap-banner a { color: var(--accent); font-weight: 600; }

/* Territory switcher on /list (Phase D) — flip saved sets without leaving /list. */
.list-terr-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0.2rem 0 0.7rem; }
.list-terr-switch .lts-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-right: 0.15rem; }
.lts-chip { padding: 0.28rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px;
  background: #fff; font-size: 0.82rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.lts-chip:hover { background: var(--accent-bg); text-decoration: none; }
.lts-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.list-foot { margin-top: 0.6rem; padding: 0.5rem 0; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.list-foot a { color: var(--accent); }

/* ─── [💡 Tips] button + modal (reusable, _tips_modal.html, 2026-07-10) ───────── */
.tips-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; vertical-align: middle;
  margin-left: 0.6rem; padding: 0.2rem 0.6rem; font-size: 0.78rem; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-bg);
  border: 1px solid #f3d9c2; border-radius: 999px; cursor: pointer; transition: 0.12s;
}
.tips-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tips-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(31, 45, 77, 0.45);
}
.tips-backdrop[hidden] { display: none; }
.tips-modal {
  background: var(--surface); border-radius: 12px; max-width: 34rem; width: 100%;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(31, 45, 77, 0.25);
}
.tips-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.tips-modal-head h2 { margin: 0; font-size: 1.05rem; color: var(--navy); }
.tips-close {
  border: none; background: none; cursor: pointer; font-size: 1.4rem; line-height: 1;
  color: var(--text-muted); padding: 0 0.3rem; border-radius: 5px;
}
.tips-close:hover { color: var(--navy); background: var(--row-hover, #eef1f5); }
.tips-modal-body {
  padding: 1.1rem 1.2rem; overflow-y: auto; font-size: 0.9rem; line-height: 1.55; color: var(--text);
}
.tips-modal-body h3 { font-size: 0.9rem; color: var(--navy); margin: 1rem 0 0.35rem; }
.tips-modal-body h3:first-child { margin-top: 0; }
.tips-modal-body p { margin: 0 0 0.7rem; }
.tips-modal-body ul { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.tips-modal-body li { margin-bottom: 0.35rem; }
.tips-modal-body strong { color: var(--navy); }
.tips-modal-body .tip-lead { color: var(--text-muted); }
.tips-modal-foot {
  padding: 0.8rem 1.2rem; border-top: 1px solid var(--border); text-align: right;
}
.tips-gotit {
  background: var(--accent); color: #fff; border: none; border-radius: 7px;
  padding: 0.45rem 1.2rem; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.tips-gotit:hover { background: var(--accent-dark); }