/* Foundry stylesheet. One flat file, in four sections (R11, v3.10.1):

   1 · TOKENS      colour, type, spacing and geometry, light + dark. Everything else reads these.
   2 · BASE        element defaults: box-sizing, [hidden], body, links, the heading scale.
   3 · PRIMITIVES  the reusable pieces: cards, messages, fields and tables, the width vocabulary
                   and focus language, .unit / .seg / .wb-row / .ask-field / .lookup-bar, .fields,
                   panels, badges, stat cards.
   4 · SHELL & COMPONENTS  the top bar, then each screen's own rules, in roughly the order the
                   features were built.

   A new screen should compose section 3 rather than add a 21st variant of the same box. When it
   needs its own rules, put them in section 4 next to its neighbours. Within each section, order
   still matters for equal-specificity rules: a later rule wins. */


/* ==============================================================================================
   1 · TOKENS
   Colour, type, spacing, geometry — :root, then the dark theme's overrides.
   ============================================================================================== */
:root {
    /* Slate ink + neutrals */
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --line-2: #cbd5e1;
    --line-strong: var(--line-2);       /* R11: was used undefined (fallback --line) */
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --white: #ffffff;

    /* Teal accent */
    --teal: #0d9488;
    --teal-dark: #0f766e;
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-800: #115e59;
    --teal-700: var(--teal-dark);       /* R11: was used undefined (fallback #0f766e) */

    /* Accent aliases (legacy var names map onto the teal accent) */
    --blue: #0d9488;
    --blue-dark: #115e59;

    /* Semantic */
    --green: #047857;
    --red: #b91c1c;
    --amber: #b45309;

    /* v3.17.0 Anvil sub-brand: forged steel (Foundry is teal, Bellows is amber). */
    --steel: #4f46e5;
    --steel-50: #eef2ff;
    --steel-100: #e0e7ff;
    --steel-800: #3730a3;
    --steel-ink: #ffffff;               /* text on a --steel fill */

    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 8px 28px rgba(15, 23, 42, .12);
    color-scheme: light;

    /* ===== v3.0.0 Foundation: additive scales — no existing token is retrofitted ===== */
    /* Space — 4px ramp. Gap size states relationship strength. */
    --s1:4px; --s2:6px; --s3:10px; --s4:14px; --s5:20px; --s6:30px; --s7:44px;
    /* Type — seven steps, each paired with its leading. */
    --t-xs:11px;  --lh-xs:1.4;
    --t-sm:13px;  --lh-sm:1.5;
    --t-md:15px;  --lh-md:1.55;
    --t-lg:18px;  --lh-lg:1.35;
    --t-xl:22px;  --lh-xl:1.25;
    --t-2xl:28px; --lh-2xl:1.15;
    --t-3xl:38px; --lh-3xl:1.05;
    /* Control geometry. NEVER applied to the global input selector (see plan's height note). */
    --row:30px;        /* one control height; wb components snap to it */
    --row-lg:38px;     /* the one control per screen that carries the decision */
    --rail:13ch;       /* label gutter */
    /* Machine type. Money, phone, ZIP, IDs, years, codes. */
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Roboto Mono", Consolas, monospace;
    /* Internal hairline inside a fused .unit — must stay visible on --surface in BOTH themes. */
    --seam:#8795ab;    /* on #ffffff = 3.03:1 */
    /* Proportional-width calibration (R2, confirmed 2026-09-17 on Windows/Segoe UI, the
       environment Foundry is administered from): real NV values fill 57–89% of their .w-*
       boxes at 1.06 — nothing clips, occupation tightest at 89%; 1.00 crowds it to 95%.
       One global knob; mobile fields go 100% width, so this is desktop-only. */
    --ch-adj:1.06;
}

/* ============================ Dark theme ============================ */
/* Set on <html data-theme="dark">. Almost everything is variable-driven, so re-defining the
   palette flips the whole UI; a handful of hardcoded light tints get dark equivalents below. */
[data-theme="dark"] {
    color-scheme: dark;                 /* dark native date-pickers, dropdowns, scrollbars */
    --ink: #e6eaf2;
    --ink-2: #c3ccda;
    --muted: #8b98ac;
    --line: #2a3547;
    --line-2: #3a4864;
    --bg: #0b111f;
    --surface: #151e30;
    --surface-2: #1c2740;
    --white: #151e30;

    --teal: #14b8a6;
    --teal-dark: #2dd4bf;               /* links + accents, bright enough on dark */
    --teal-50: #0e2b2a;
    --teal-100: #123f3a;
    --teal-800: #7ff0e0;
    --blue: #2dd4bf;
    --blue-dark: #7ff0e0;

    --green: #34d399;
    --red: #f87171;
    --amber: #fbbf24;
    --steel: #818cf8;
    --steel-50: #1b1f3f;
    --steel-100: #262c57;
    --steel-800: #c7d2fe;
    --steel-ink: #0b111f;               /* dark ink on the brighter dark-theme steel */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 10px 30px rgba(0, 0, 0, .55);
    --seam:#5c6f96;    /* v3.0.0: on --surface #151e30 = 3.33:1 */
}
[data-theme="dark"] .ico-blue { background: #16233b; color: #93c5fd; }
[data-theme="dark"] .ico-amber { background: #2a2413; color: #fcd34d; }
[data-theme="dark"] .ico-violet { background: #221c3a; color: #c4b5fd; }
[data-theme="dark"] .msg.success { background: #0f2a1f; border-color: #14532d; }
[data-theme="dark"] .msg.error { background: #2b1414; border-color: #7f1d1d; }
[data-theme="dark"] .msg.warning { background: #2a2210; border-color: #78350f; }
[data-theme="dark"] .note.pinned { background: #241d0f; }
[data-theme="dark"] .soon { background: #241d0f; border-color: #78350f; }
/* Elements that use --ink as a *background* (dark chips on the light UI) must stay dark. */
[data-theme="dark"] .avatar { background: #334155; }
[data-theme="dark"] .ob-bar { background: #10192a; }
/* OSM raster tiles are a bright white sheet — invert them so the map belongs to the dark shell
   instead of blinding a canvasser standing on a doorstep at 7pm. Popups follow the surface. */
[data-theme="dark"] #cmap { background: #0b1220; }
[data-theme="dark"] #cmap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92); }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip {
    background: var(--surface); color: var(--ink); }
[data-theme="dark"] .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); }


/* ==============================================================================================
   2 · BASE
   Element defaults.
   ============================================================================================== */

* { box-sizing: border-box; }

/* Global [hidden] override. The HTML5 `hidden` attribute is styled via the
   user-agent stylesheet as [hidden]{display:none}, but that has the same
   specificity as any .class{display:X} rule — so anywhere a `.btn` (which
   sets display:inline-flex) also has the `hidden` attribute, the class
   wins and the button stays visible. Bit us on the dialer's Hang up +
   Mute buttons, which start with `hidden` but rendered as solid teal
   pills next to Call until you actually made a call. !important here
   forces `hidden` to win over any component-level display rule without
   requiring every .btn/.d-primary/etc. to add its own [hidden] override. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* v3.0.0: give the heading levels a real, visible scale (fixes bare h2 inheriting 24px > h1). */
h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); margin: 0 0 var(--s2); letter-spacing: -.01em; }
h2 { font-size: var(--t-xl); line-height: var(--lh-xl); letter-spacing: -.01em; }
h3 { font-size: var(--t-lg); line-height: var(--lh-lg); }


/* ==============================================================================================
   3 · PRIMITIVES
   Reusable building blocks. Screens compose these.
   ============================================================================================== */

/* ============================ Cards ============================ */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.card {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 18px 20px; color: var(--ink);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
/* v3.0.0: motion belongs to things that navigate — static panels stop twitching on hover. */
a.card:hover, .card[href]:hover { border-color: var(--line-2); text-decoration: none; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.card:not(a):not([href]) { transition: none; }
.panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4) var(--s5); }
.panel-card .panel-card { border: 0; border-radius: 0; padding: 0; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.card h2 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.card p { margin: 0; color: var(--muted); font-size: 14px; }

/* ============================ Messages ============================ */
.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.msg { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 8px; font-size: 14px; }
.msg.success { background: #ecfdf5; color: var(--green); border: 1px solid #a7f3d0; }
.msg.error { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.msg.warning { background: #fffbeb; color: var(--amber); border: 1px solid #fde68a; }
.msg.info { background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100); }

/* ======================== Forms / tables ======================== */
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=date], input[type=time], input[type=datetime-local], input[type=tel], input[type=url], input[type=search],
select, textarea {
    width: min(100%, var(--w, 100%)); padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }

/* ===== v3.0.0 Foundation: field-width vocabulary + overflow contract =====
   A sized field opts in with a .w-* class; nothing here fires until it does, so
   this is inert until R3+. Selector is `[class^="w-"], [class*=" w-"]` (a real
   class token beginning "w-"), NOT the plan's substring `[class*="w-"]`, which
   would also catch existing inputs like .new-folder-input / .row-* / .preview-*. */
input[class^="w-"]:not(:focus), input[class*=" w-"]:not(:focus) { text-overflow: ellipsis; }
input[class^="w-"]:focus, input[class*=" w-"]:focus { width: min(100%, max(var(--w), 38ch)); }
/* (Templates also render title="{{ value }}" on every sized input so hover reveals the full value.) */

.w-code   { --w: 5ch  }
.w-year   { --w: 7ch  }
.w-zip    { --w: 11ch }
.w-money  { --w: 11ch }
.w-phone  { --w: 16ch }
.w-regid  { --w: 14ch }
.w-date   { --w: 15ch }
.w-name   { --w: min(100%, calc(18ch * var(--ch-adj))) }
.w-name-l { --w: min(100%, calc(20ch * var(--ch-adj))) }
.w-line2  { --w: min(100%, calc(22ch * var(--ch-adj))) }
.w-city   { --w: min(100%, calc(20ch * var(--ch-adj))) }
.w-occ    { --w: min(100%, calc(24ch * var(--ch-adj))) }
.w-src    { --w: min(100%, calc(24ch * var(--ch-adj))) }
.w-disp   { --w: min(100%, calc(26ch * var(--ch-adj))) }
.w-org    { --w: min(100%, calc(36ch * var(--ch-adj))) }
.w-email  { --w: min(100%, calc(42ch * var(--ch-adj))) }
.w-line   { --w: 100% }
.w-zip, .w-money, .w-phone, .w-year, .w-regid, .mono {
    font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.w-code { font-family: var(--mono); text-transform: uppercase; text-align: center; letter-spacing: .06em; }
@media (max-width: 767px){
  :root { --row: 40px; --row-lg: 48px; }
  .w-code, .w-year, .w-zip, .w-money, .w-phone, .w-regid, .w-date,
  .w-name, .w-name-l, .w-line2, .w-city, .w-occ, .w-src, .w-disp,
  .w-org, .w-email { --w: 100% }
  input[class^="w-"]:focus, input[class*=" w-"]:focus { width: 100%; }
}

/* ===== v3.0.0 Foundation: one focus language, zero specificity so components can still opt out ===== */
:where(a, button, .btn, .oc-btn, .bigbtn, .chip, .link-btn, .seg label,
       summary, [tabindex]):focus-visible {
    outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px;
}
:where(input, select, textarea):focus-visible { outline: none; }  /* fields keep the box-shadow ring */

.kbd {
    font: 10px/1 var(--mono); color: var(--muted);
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px;
    padding: 3px 4px; white-space: nowrap;
}

button.primary, .btn {
    background: var(--teal); color: #fff; border: none; border-radius: 8px;
    padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex;
    align-items: center; gap: 7px;
}
button.primary:hover, .btn:hover { background: var(--teal-dark); text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn.secondary:hover { background: var(--surface-2); }

table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }

/* ====================== Utilities & chrome ====================== */
.muted { color: var(--muted); font-size: 14px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.searchbar { display: flex; gap: 8px; margin: 14px 0; max-width: 520px; }
.searchbar input { flex: 1; }
.pager { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.scroll-x { overflow-x: auto; }
code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

td.actions a, td.actions { white-space: nowrap; }
td.actions a { margin-right: 12px; }
a.danger, .danger { color: var(--red); }
.danger-btn { background: var(--red); }
.danger-btn:hover { background: #991b1b; }

/* Stacked forms */
.stacked-form { max-width: 560px; }
.form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-weight: 600; font-size: 14px; }
/* R11: explicit tracks, replacing the deleted .lookup-grid (an auto-fit sieve). Fields sit side
   by side at their own content width (an input's `size`, a select's longest option) and wrap
   between fields, never mid-field. A control stays width:100% of a row the control itself sized,
   so there's no percentage-inside-a-shrink-wrap dead space. */
.fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--s4); margin-bottom: 16px; }
.fields > .form-row { margin-bottom: 0; flex: 0 1 auto; max-width: min(100%, 44ch); }
.fields > .form-actions { margin: 0; align-self: flex-end; }
/* v3.0.0: errors belong to the field, not the container they happened to land in — style app-wide. */
.errorlist { list-style: none; margin: var(--s1) 0 0; padding: 0; color: var(--red); font-size: var(--t-sm); }
.errorlist.nonfield { background: var(--surface); border: 1px solid var(--red); border-left-width: 3px; border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }

/* R9 (v3.7.0) — fieldset primitive (the codebase's first fieldsets), per-field inline errors, and
   the required marker. Fieldsets group related fields under a legend on the console + compliance
   forms; reused by business-profile and campaign-fields later in R9. */
fieldset.fs { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 14px;
    margin: 0 0 16px; min-width: 0; }
fieldset.fs > legend { font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); padding: 0 6px; }
.fs-row { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.fs-row .form-row { margin-bottom: 0; }
.field-error { color: var(--red); font-size: var(--t-sm); font-weight: 500; margin-top: 2px; }
.req { color: var(--red); font-weight: 700; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Stat cards */
.stat-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 22px; min-width: 120px; text-align: center; }
.stat .num { display: block; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.stat .lbl { color: var(--muted); font-size: 13px; }
.stat.ok .num { color: var(--green); }
.stat.bad .num { color: var(--red); }

/* Badges */
.badge { display: inline-block; background: var(--teal-100); color: var(--teal-800); font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.nav-badge { background: var(--teal); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.chk { font-size: 13px; font-weight: 400; }
.link-btn { background: none; border: none; color: var(--teal-dark); cursor: pointer; padding: 0; font: inherit; font-size: 13px; text-decoration: underline; }

/* Accordion panels */
.panels { display: flex; flex-direction: column; gap: 10px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 15px; display: flex; align-items: center; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before { content: "▸"; margin-right: 8px; color: var(--muted); }
.panel[open] > summary::before { content: "▾"; }
.panel .panel-body { padding: 0 16px 16px; }
.panel .lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.head-actions { display: flex; gap: 8px; }

/* ================= v3 R3: donor-form (Workbench) components ================= */
/* Workbench primitives (R3/R4): first built for the donor form and Quick Look Up, now used across
   the app. Moved up into PRIMITIVES in R11 (v3.10.1); they still sit after the R1 width rules above. */

/* ---- One fact, one object. Children surrender their chrome to the parent. ---- */
.unit { display: inline-flex; align-items: stretch; max-width: 100%;
    border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); }
.unit > input, .unit > select, .unit > button {
    border: 0; border-radius: 0; height: calc(var(--row) - 2px);
    background: transparent; box-shadow: none; padding: 0 9px; }
/* :not(:first-child) (0,2,0) outweighs `.unit > input {border:0}` (0,1,1) so the seam actually renders. */
.unit > :not(:first-child) { border-left: 1px solid var(--seam); }
.unit > .unit-cap + input, .unit > .unit-cap + select { border-left: 0; }  /* a cap welds to its own input; seams fall between pairs */
.unit:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.unit > :focus { outline: none; box-shadow: none; background: var(--teal-50); }
/* A field inside a unit does not focus-expand — it would tear the object open. */
.unit > input[class^="w-"]:focus, .unit > input[class*=" w-"]:focus { width: min(100%, var(--w)); }
.unit-cap { display: flex; align-items: center; padding: 0 8px;
    background: var(--surface-2); color: var(--muted); white-space: nowrap; user-select: none;
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 767px){
  .unit { display: flex; flex-wrap: wrap; }
  .unit > :not(:first-child) { border-left: 0; border-top: 1px solid var(--seam); }
  .unit > input, .unit > select { flex: 1 1 100%; height: calc(var(--row) - 2px); }
}

/* ---- Dense record-edit rows: LEFT-aligned labels in a fixed rail. ---- */
.wb-rows { --rail: 13ch; }
.wb-row { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0,1fr);
    column-gap: var(--s4); align-items: center; min-height: var(--row); }
.wb-row + .wb-row      { margin-top: var(--s1); }   /* same fact, almost touching */
.wb-row + .wb-row.sep  { margin-top: var(--s4); }   /* different fact, same module */
.wb-row > label { justify-self: start; text-align: left; white-space: nowrap;
    font-size: var(--t-sm); font-weight: 500; color: var(--muted); }
.wb-row > .val { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.wb-row > .val > .hint { font-size: var(--t-xs); color: var(--muted); }
.wb-row > .val > .err  { font-size: var(--t-xs); color: var(--red); flex-basis: 100%; }
.wb-row:focus-within > label { color: var(--ink); font-weight: 600; }
.wb-row:focus-within::before { content: ""; position: absolute; left: calc(var(--s3) * -1);
    top: 3px; bottom: 3px; width: 2px; border-radius: 1px; background: var(--teal); }
.wb-row.is-sub > label { font-size: var(--t-xs); }
.wb-row.is-sub > .val  { padding-left: var(--s4); }
.wb-row .val > input, .wb-row .val > select { height: var(--row); padding: 0 9px; font-size: var(--t-sm); }
.wb-row .val > textarea { height: auto; padding: 8px 10px; line-height: var(--lh-md); font-size: var(--t-sm); }
.wb-row--break { display: block; margin: var(--s5) 0; }
.wb-row--break > label { display: block; text-align: left; margin-bottom: var(--s1);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Deferred from the R1 errorlist FIX until .wb-row existed: the field flags its own error. */
.wb-row.has-error .val > input, .wb-row.has-error .val > select,
.wb-row.has-error .val > textarea { border-color: var(--red); }
@media (max-width: 767px){
  .wb-row { grid-template-columns: 1fr; row-gap: var(--s1); }
  .wb-row.is-sub > .val { padding-left: 0; }
}

/* ---- Module headers: a rule + a tracked caption. NOT sticky. ---- */
.wb-mod + .wb-mod { margin-top: var(--s6); }
.wb-mod > h3 { display: flex; align-items: baseline; gap: var(--s3);
    margin: 0 0 var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wb-mod > h3 .filled { margin-left: auto; font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.wb-mod > h3 .sub { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: var(--t-xs); }

/* ---- The ask instrument: the only oversized control on the page. ---- */
.ask-field { display: inline-flex; align-items: stretch; height: var(--row-lg); background: var(--surface);
    border: 1px solid var(--line-2); border-left: 3px solid var(--amber); border-radius: 6px; }
.ask-field .cur { display: flex; align-items: center; padding: 0 var(--s1) 0 var(--s3);
    color: var(--muted); font: 500 16px/1 var(--mono); }
.ask-field input { --w: 9ch; height: 100%; border: 0; border-radius: 0; background: transparent;
    font: 700 22px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; padding: 0 var(--s3) 0 var(--s1); }
.ask-field:focus-within { border-color: var(--teal); border-left-color: var(--amber); box-shadow: 0 0 0 3px var(--teal-100); }
.ask-field input:focus { outline: none; box-shadow: none; width: 9ch; }
.ask-presets { display: inline-flex; margin-top: var(--s2); }
.ask-presets button { height: 26px; padding: 0 var(--s3); cursor: pointer;
    font: 500 var(--t-sm)/1 var(--mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); }
.ask-presets button + button { border-left: 0; }
.ask-presets button:first-child { border-radius: 5px 0 0 5px; }
.ask-presets button:last-child  { border-radius: 0 5px 5px 0; }
.ask-presets button:hover { background: var(--teal-50); border-color: var(--teal); color: var(--teal-dark); }

/* ---- Segmented control. Radios live before .seg so `:checked ~` can gate the body. ---- */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.seg label { display: flex; align-items: center; height: var(--row); padding: 0 var(--s4); cursor: pointer;
    background: var(--surface-2); color: var(--muted); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.seg label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }  /* the radio lives inside its label */
.seg label + label { border-left: 1px solid var(--seam); }
.seg label:hover { background: var(--teal-50); color: var(--teal-dark); }
.seg--sm label { height: 26px; padding: 0 var(--s3); font-size: var(--t-xs); }
/* checked state: :has() for current browsers, .is-on (set by wbform.js) as the fallback. */
.seg label.is-on, .seg label:has(input:checked) { background: var(--teal); color: #fff; }
.seg label:focus-within { outline: 2px solid var(--teal); outline-offset: -2px; }

/* ---- Transport: the only sticky element on a wb screen. ---- */
.wb-transport { position: sticky; bottom: 0; z-index: 8; display: flex; align-items: center; gap: var(--s3);
    margin: var(--s6) -24px 0; padding: var(--s2) 24px;         /* full-bleed across .content's 24px */
    background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -4px 14px rgba(15,23,42,.06); }
[data-theme="dark"] .wb-transport { box-shadow: 0 -4px 14px rgba(0,0,0,.4); }
.wb-transport .btn { height: var(--row-lg); padding: 0 var(--s5); }
.wb-transport kbd { font: var(--t-xs)/1 var(--mono); color: #fff; opacity: .72;
    border: 1px solid rgba(255,255,255,.35); border-radius: 3px; padding: 3px 4px; margin-left: var(--s2); }
.wb-dirty { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.wb-dirty[data-n]:not([data-n="0"]) { color: var(--amber); font-weight: 600; }
.wb-dirty[data-n]:not([data-n="0"])::before { content: "\25CF  "; }
.wb-transport .cancel { margin-left: auto; font-size: var(--t-sm); color: var(--muted);
    text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }

/* ---- Two-column workbench: below 1180px the rail drops under the column, same order. ---- */
.wb-page { display: block; }
@media (min-width: 1180px){
  .wb-page { display: grid; grid-template-columns: minmax(0,640px) 340px; gap: var(--s6); align-items: start; }
}
.wb-rail { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4) var(--s5); }
@media (min-width: 1180px){ .wb-rail { position: sticky; top: 76px; } }
@media (max-width: 1179px){ .wb-rail { margin-top: var(--s6); } }
.wb-rail > section + section { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.wb-rail h4 { margin: 0 0 var(--s3); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ================= v3 R4: Quick Look Up (voter search) ================= */
/* One welded search instrument + a content-width "more ways to search" row. */
.lookup-bar { display: inline-flex; align-items: stretch; height: var(--row-lg); max-width: 100%;
    border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); }
.lookup-bar > input { border: 0; border-radius: 0; height: 100%; padding: 0 10px;
    font-size: var(--t-md); background: transparent; color: var(--ink); }
.lookup-bar > :not(:first-child) { border-left: 1px solid var(--seam); }  /* :not(:first-child) beats `> input {border:0}` */
.lookup-bar .f-last  { --w: 22ch; font-size: 16px; font-weight: 600; }   /* the 90% field */
.lookup-bar .f-first { --w: 14ch; }
.lookup-bar .f-addr  { --w: 26ch; }
.lookup-bar .f-phone { --w: 15ch; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lookup-bar > input:focus { background: var(--teal-50); box-shadow: none; }
.lookup-bar > button { border: 0; border-left: 1px solid var(--line-2); border-radius: 0 6px 6px 0;
    padding: 0 var(--s5); background: var(--teal); color: #fff; font: inherit; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.lookup-bar > button:hover { background: var(--teal-dark); }
.lookup-bar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }

/* Captions aligned to each segment's true width — the ragged edge, made legible as intent. */
.lookup-caps { display: flex; margin-bottom: var(--s1); }
.lookup-caps span { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); padding-left: 11px; }
.lookup-caps .c-last  { width: calc(22ch + 21px); color: var(--ink-2); }
.lookup-caps .c-first { width: calc(14ch + 21px); }
.lookup-caps .c-addr  { width: calc(26ch + 21px); }

@media (max-width: 900px){
  .lookup-bar { flex-wrap: wrap; height: auto; }
  .lookup-bar > input { flex: 1 1 100%; height: var(--row-lg); }
  .lookup-bar > :not(:first-child) { border-left: 0; border-top: 1px solid var(--seam); }
  .lookup-bar > button { flex: 1 1 100%; border-radius: 0 0 6px 6px; height: var(--row-lg); }
  .lookup-caps { display: none; }
}

/* "More ways to search": a content-width flex row, not an auto-fit grid. */
.more-search { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: end; margin-top: var(--s3); }
.more-search .form-row { margin: 0; }
.more-search select { width: auto; }
.w-mid { --w: 12ch; }

/* Machine fields are fixed by nature — a ZIP/year/phone must NOT focus-expand to 38ch (the R1
   overflow contract is for proportional text). Equal specificity to R1's rule, later in the file. */
input.w-code:focus, input.w-year:focus, input.w-zip:focus,
input.w-money:focus, input.w-phone:focus, input.w-regid:focus { width: min(100%, var(--w)); }


/* ==============================================================================================
   4 · SHELL & COMPONENTS
   The top bar and dashboard, then each screen's own rules.
   ============================================================================================== */

/* ============================ Top bar ============================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 0 22px;
    height: 60px;
}
.nav-cb { display: none; }

.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--teal); color: #fff; font-size: 18px;
}
.brand-mark.bellows { background: var(--amber); }
.brand-mark.anvil { background: var(--steel); color: var(--steel-ink); }

/* System switcher: the brand at top-left is a dropdown that flips between Foundry (field & comms)
   and Bellows (finance). Makes Bellows read as a peer system you switch INTO, not a tab tacked on
   the end of the field nav. Built on <details> so it works with no JS. */
.brand-switch { position: relative; }
.brand-switch > summary { list-style: none; cursor: pointer; padding: 4px 8px 4px 4px;
    border-radius: 10px; }
.brand-switch > summary::-webkit-details-marker { display: none; }
.brand-switch > summary::marker { content: ""; }
.brand-switch > summary:hover { background: var(--surface-2); }
.brand-switch > summary .caret { font-size: 15px; color: var(--muted); margin-left: 2px;
    transition: transform .15s ease; }
.brand-switch[open] > summary .caret { transform: rotate(180deg); }
.brand-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 320; min-width: 320px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
    box-shadow: var(--shadow-lg, var(--shadow)); padding: 7px; display: flex;
    flex-direction: column; gap: 3px; animation: brandMenuIn .13s ease; }
@keyframes brandMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.brand-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 11px;
    border-radius: 10px; color: var(--ink); text-decoration: none; }
.brand-menu a:hover { background: var(--surface-2); text-decoration: none; }
.brand-menu a.on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.brand-menu .bm-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand-menu .bm-txt strong { font-size: 15px; font-weight: 700; }
.brand-menu .bm-txt small { color: var(--muted); font-size: 12px; font-weight: 400; }

.nav-toggle {
    display: none; margin-left: auto; cursor: pointer;
    font-size: 24px; color: var(--ink-2); padding: 4px 6px; border-radius: 8px;
}
.nav-toggle:hover { background: var(--surface-2); }

/* min-width:0 — a flex item won't shrink below its content by default, so a long nav shoved the
   account menu past the right edge of the window and put a horizontal scrollbar on every page.
   The nav scrolls within itself instead. */
.nav-collapse { display: flex; align-items: center; flex: 1; gap: 18px; min-width: 0; }
/* NO overflow here. `overflow-x: auto` forces overflow-y to compute to auto too, which turns this
   into a scroll container — and the dropdowns are absolutely positioned BELOW it, so they get
   clipped out of existence. Space is made by hiding this nav when the sidebar is docked (below)
   and by letting items compress, never by scrolling. */
.mainnav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mainnav .nav-link { white-space: nowrap; }
/* Nine sections plus the committee chip and account menu is a tight fit on a 1280 laptop — tighten
   the nav rather than let the last item slide under the account cluster. */
@media (max-width: 1439px) {
    .mainnav { gap: 1px; }
    .mainnav .nav-link { padding: 8px 7px; font-size: 14px; }
}

.nav-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ink-2); font-weight: 500; font-size: 14.5px;
    padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.nav-link:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav-link.active,
.nav-group.active > .nav-link { background: var(--teal-50); color: var(--teal-dark); }
.caret { font-size: 14px; opacity: .7; }

/* Dropdown groups (Lists, Canvassing) */
.nav-group { position: relative; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 210px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.nav-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px;
}
.nav-menu a:hover { background: var(--surface-2); text-decoration: none; }
.nav-menu a i { color: var(--muted); font-size: 18px; }

/* Right cluster */
.userbox { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.campaign-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-800);
    padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600;
    max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campaign-chip:hover { background: var(--teal-100); text-decoration: none; }
/* A flex item's bare text never ellipsizes; the name needs its own box to truncate in. */
.campaign-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1439px) { .campaign-chip { max-width: 170px; } }
.campaign-chip i { font-size: 15px; }

.acct { position: relative; }
.acct > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 8px 5px 5px; border-radius: 24px; border: 1px solid var(--line);
}
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { background: var(--surface-2); }
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
}
.acct-name { font-size: 14px; color: var(--ink-2); font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Docked, the rail takes 260px from the top bar; below 1600 the account menu shows just the avatar
   (the name is in the menu) so ten nav sections still fit beside the committee chip. */
@media (min-width: 1440px) and (max-width: 1599px) { .nav-open .acct-name { display: none; } }
.acct-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 220px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.acct-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; }
.acct-head .muted { font-size: 12px; }
.acct-menu a, .acct-menu .logout button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px;
    background: none; border: none; cursor: pointer; font: inherit; text-align: left;
}
.acct-menu a:hover, .acct-menu .logout button:hover { background: var(--surface-2); text-decoration: none; }
.acct-menu i { color: var(--muted); font-size: 18px; }
.logout { margin: 0; }

/* ============================ Content ============================ */
.content { max-width: 1180px; margin: 0 auto; padding: 28px 24px; }

/* ====================== Dashboard launchpad ====================== */
.dash-head { margin-bottom: 6px; }
.dash-head h1 { margin-bottom: 2px; }
.dash-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.dash-stat {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: 7px 14px; font-size: 13px; color: var(--ink-2);
}
.dash-stat i { color: var(--muted); font-size: 16px; }
.dash-stat strong { color: var(--ink); }

.launch-group { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted); margin: 26px 0 12px; }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.launch-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px 18px; color: var(--ink);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.launch-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); text-decoration: none; transform: translateY(-1px); }
.launch-ico {
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}
.launch-card h3 { margin: 0 0 3px; font-size: 15px; }
.launch-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ico-teal { background: var(--teal-50); color: var(--teal-dark); }
.ico-blue { background: #eff6ff; color: #1d4ed8; }
.ico-amber { background: #fffbeb; color: #b45309; }
.ico-violet { background: #f5f3ff; color: #6d28d9; }
.ico-slate { background: var(--surface-2); color: var(--ink-2); }
.ico-steel { background: var(--steel-50); color: var(--steel-800); }

/* ============================ Login ============================ */
.login-wrap { max-width: 380px; margin: 9vh auto 0; background: var(--surface); padding: 34px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.login-wrap h1 { color: var(--ink); text-align: center; }
.subtitle { text-align: center; color: var(--muted); margin-top: 0; }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 13px; font-weight: 600; margin-top: 8px; }
.login-form button { margin-top: 16px; background: var(--teal); color: #fff; border: none; border-radius: 8px; padding: 11px; font-weight: 600; cursor: pointer; }
.login-form button:hover { background: var(--teal-dark); }
.error { color: var(--red); font-size: 14px; }
/* My List's apply panel: label rail, welded controls, button; rows divided by hairlines. */
.apply-rows { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.apply-rows + .apply-rows { margin-top: 24px; }
.apply-rows--heavy { border-left: 3px solid var(--amber); }
.apply-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
    margin: 0; padding: var(--s3) var(--s4); }
.apply-row + .apply-row { border-top: 1px solid var(--line); }
.apply-lbl { width: 14ch; flex: none; font-weight: 600; font-size: 14px; }
.apply-row .unit > select { width: auto; max-width: 26ch; }
.apply-note { margin: 0; padding: 0 var(--s4) var(--s3); font-size: var(--t-sm); }

/* Console — the create-account form (radio pw pair) + the inline reset-password disclosure. */
.acct-create { max-width: 560px; }
.pw-method { display: flex; flex-direction: column; gap: 10px; }
.pw-opt { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; cursor: pointer; }
.pw-opt > input[type="radio"] { margin-top: 3px; flex: none; }
.pw-opt-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reset-pw > summary { cursor: pointer; color: var(--teal-dark); font-size: 13px; font-weight: 600;
    list-style: none; white-space: nowrap; }
.reset-pw > summary::-webkit-details-marker { display: none; }
.reset-pw[open] > summary { color: var(--muted); }
.reset-form { margin-top: 8px; }
.reset-form .form-row { margin-bottom: 8px; }
td.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Column mapping */
.map-table { max-width: 640px; margin-bottom: 24px; }
.map-table select { width: 100%; }

/* Detail */
.detail-grid h2 { font-size: 16px; margin-top: 24px; }
.detail-grid th { width: 220px; }

/* Quick Look Up search form */
.lookup-form { margin-bottom: var(--s6); }  /* v3.2.0: card dropped — the .lookup-bar is the instrument */
/* v3.2.0: removed `.lookup-form .form-actions { justify-content: flex-end }` — the Search
   button is welded onto the right end of the .lookup-bar now, not floated far below. */

/* List builder */
.builder { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: start; }
.builder-main h3 { font-size: 15px; margin: 20px 0 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.builder-main h3:first-of-type { border-top: none; padding-top: 0; }
.builder-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; }
.builder-side h3 { font-size: 15px; margin: 14px 0 8px; }
.step { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.step ul { margin: 4px 0 0 16px; padding: 0; }
.preview-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.preview-counts > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.preview-counts .num { display: block; font-size: 20px; font-weight: 700; color: var(--teal-dark); }
.preview-counts .lbl { font-size: 11px; color: var(--muted); }

/* Vertical criteria fields (VAN-style: label left, control right, stacked) */
.vfields { display: flex; flex-direction: column; gap: 12px; }
.vrow { display: flex; align-items: flex-start; gap: 14px; }
.vrow > label { flex: 0 0 130px; text-align: right; font-weight: 600; font-size: 14px; color: var(--ink-2); padding-top: 8px; }
.vrow > .vctl { flex: 1; min-width: 0; }
.vctl.inline2 { display: flex; gap: 8px; align-items: center; }
.vctl.inline2 > * { flex: 1; }

/* District field: clickable (blue) label toggles dropdown <-> multi-select checkboxes */
.dlabel {
    flex: 0 0 130px; text-align: right; font-weight: 600; font-size: 14px; padding-top: 8px;
    background: none; border: none; cursor: pointer; color: var(--teal-dark);
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
    font-family: inherit;
}
.dlabel:hover { color: var(--teal); }
.district-field .dsingle[hidden] { display: none; }
.dmulti { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface-2); }
.dmulti-actions { font-size: 12px; margin-bottom: 6px; }
.dmulti-list { display: flex; flex-wrap: wrap; gap: 6px 16px; max-height: 180px; overflow-y: auto; }
@media (max-width: 700px) { .dlabel { text-align: left; flex-basis: auto; padding-top: 0; } }
.disabled-panel > summary { color: var(--muted); }
.soon { font-size: 11px; font-weight: 600; color: var(--amber); background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 1px 8px; margin-left: 8px; }
@media (max-width: 700px) {
  .vrow { flex-direction: column; gap: 4px; }
  .vrow > label { text-align: left; flex-basis: auto; padding-top: 0; }
  .vctl.inline2 { flex-direction: column; align-items: stretch; }
}
.star { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 16px; color: var(--line-2); line-height: 1; }
.star.on { color: #f59e0b; }
.run-btn { background: var(--green); width: 100%; text-align: center; justify-content: center; }
.run-btn:hover { background: #065f46; }
.preview-btn { width: 100%; }
/* "How many" for My List / a saved list: one hero figure, the rest a quiet run. */
.count-strip { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 22px; margin: 6px 0 14px; }
.cs-hero { font-size: var(--t-lg); color: var(--ink-2); }
.cs-hero strong { font-size: var(--t-3xl); line-height: var(--lh-3xl); color: var(--teal-dark);
    font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.cs-run { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--muted); font-size: var(--t-sm); }
.cs-run strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-run > span + span::before { content: "·"; margin: 0 10px; color: var(--line-2); }

/* My List toolbar */
/* ===================== Bounded, scrollable table =====================
   The house pattern for any list that can grow without limit. The page stays a fixed, readable
   height and the rows scroll inside it with the header pinned — so nothing is hidden (no
   truncation, no "show all") and no screen turns into an endless dump. */
.table-scroll { overflow: auto; max-height: 380px; border: 1px solid var(--line);
    border-radius: var(--radius-lg); background: var(--surface); }
.table-scroll table { border-collapse: separate; border-spacing: 0; overflow: visible;
    border-radius: 0; margin: 0; }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2);
    border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-2); }
.table-scroll.tall { max-height: 560px; }
.table-scroll.short { max-height: 240px; }

/* ===================== Filter bar =====================
   Scope before results. Range presets read as one segmented control; the narrowing selects sit
   underneath so the common choice is one click and the rare one is still there. */
.filterbar { display: flex; flex-direction: column; gap: 10px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; margin: 14px 0 10px; }
.fb-ranges { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--bg);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px; align-self: flex-start; }
.fb-range { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--ink-2); white-space: nowrap; }
.fb-range:hover { color: var(--ink); text-decoration: none; background: var(--surface); }
.fb-range.on { background: var(--teal); color: #fff; }
.fb-range.on:hover { background: var(--teal); color: #fff; }
.fb-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.fb-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.fb-field > span { font-weight: 600; color: var(--muted); text-transform: uppercase;
    letter-spacing: .04em; font-size: 10.5px; }
.fb-field select, .fb-field input { min-width: 150px; padding: 7px 9px; font-size: 13.5px; }
.fb-clear { align-self: flex-end; font-size: 13px; padding-bottom: 8px; }
.fb-apply { align-self: flex-end; }

/* ===================== Multi-select facet =====================
   Tick more than one. Closed it reports the selection; open it's a checkbox list. */
.multi { position: relative; display: flex; flex-direction: column; gap: 3px; }
.multi-label { font-weight: 600; color: var(--muted); text-transform: uppercase;
    letter-spacing: .04em; font-size: 10.5px; }
.multi-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
    min-width: 168px; height: 36px; padding: 0 10px; font: inherit; font-size: 13.5px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
    border-radius: 8px; cursor: pointer; text-align: left; }
.multi-btn:hover { border-color: var(--teal); }
.multi-btn i { font-size: 15px; color: var(--muted); flex: none; }
.multi-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi.has-sel .multi-btn { border-color: var(--teal); background: var(--teal-50); font-weight: 600; }
.multi-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 100%;
    max-width: 320px; background: var(--surface); border: 1px solid var(--line-2);
    border-radius: 10px; box-shadow: var(--shadow); padding: 8px; }
.multi-search { width: 100%; margin-bottom: 6px; padding: 6px 8px; font-size: 13px; }
.multi-opts { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.multi-opt { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 6px;
    font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.multi-opt:hover { background: var(--teal-50); }
.multi-opt input { flex: none; }
.multi-none { margin: 4px 6px; font-size: 13px; }
.multi-clear { margin: 6px 0 0 6px; }
.scope-line { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }

/* Headline numbers for a report — bigger than .dash-stat, evenly sized. */
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin: 0 0 18px; }
.result-stats .stat { min-width: 0; }
.result-stats .num { font-variant-numeric: tabular-nums; }

/* Proportion bars — a count next to a bar reads instantly; a bare number in a table does not. */
.mini-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mini-bars li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 10px;
    align-items: center; font-size: 13.5px; }
.mb-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-track { height: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.mb-fill { display: block; height: 100%; background: var(--teal); }
.mb-n { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 42px; text-align: right; }

.report-block { margin-top: 22px; }
.rb-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rb-head h2 { margin: 0; font-size: 17px; }
.rb-head .muted { margin: 0; font-size: 13px; }
.rb-geo { display: flex; align-items: center; gap: 6px; margin: 0; }
.rb-geo select { width: auto; height: 30px; padding: 0 8px; }
.rb-more { margin: 8px 0 0; font-size: 13px; }
.q-name { margin: 0 0 2px; min-width: 170px; font-size: 14px; }
.q-total { margin: 0 0 10px; font-size: 12.5px; }

/* One empty state everywhere, instead of a bare "No results." in a table cell. */
.empty-state { text-align: center; padding: 46px 24px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-lg); }
.empty-state > i { font-size: 34px; color: var(--line-2); display: block; margin-bottom: 10px; }
.empty-state h2 { margin: 0 0 6px; font-size: 18px; }
.empty-state .muted { margin: 0 0 16px; max-width: 46ch; margin-left: auto; margin-right: auto; }
.empty-state .btn + .btn { margin-left: 8px; }
/* Inside a table the state replaces the whole body, so drop the nested border and let the table's
   own frame hold it. */
.empty-row > td { padding: 0; border: 0; background: none; }
.empty-row .empty-state { border: 0; border-radius: 0; }

/* Call desk: the ask leads, then one-tap outcomes. A caller logs ~60 of these an hour. */
.ask-strip { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber);
    border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 12px; }
.ask-main { display: flex; flex-direction: column; }
.ask-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ask-num { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
    color: var(--amber); font-variant-numeric: tabular-nums; }
.ask-side { display: flex; flex-direction: column; gap: 1px; }
.ask-side-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ask-side-val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ask-call { font-variant-numeric: tabular-nums; }
.ask-nophone { margin-left: auto; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
/* Primary + alt phone stacked so the caller sees both without leaving the desk. */
.ask-phones { margin-left: auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ask-call-alt { font-size: 13px; font-variant-numeric: tabular-nums; padding: 5px 10px; text-align: center; }

/* All-reach contact card — every phone, email, and address surface visible during the call
   so the candidate never has to jump into the full donor record for a second number. */
.contact-card { padding: 12px 16px; margin-bottom: 12px; }
.contact-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px;
    font-size: 14px; align-items: baseline; }
.cg-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    font-weight: 600; padding-top: 2px; }
.cg-val { color: var(--ink); word-break: break-word; }
.cg-val a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cg-val a:hover { color: var(--amber); border-bottom-color: currentColor; }

/* Last call — the context you need before they pick up, above the form rather than under it. */
.last-call { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-size: 13px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 9px 14px; margin-bottom: 12px; }
.lc-when { font-weight: 700; color: var(--ink-2); }
.lc-status { font-weight: 600; }
.lc-amt { color: var(--ink-2); }
.lc-amt.good { color: var(--green); font-weight: 600; }
.lc-note { color: var(--muted); font-style: italic; flex: 1; min-width: 200px; }

.oc-card h3 { margin-top: 0; }
.oc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.oc-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px;
    padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
    border-radius: var(--radius); text-align: center; }
.oc-btn i { font-size: 17px; color: var(--muted); }
.oc-btn:hover { border-color: var(--teal); background: var(--teal-50); }
.oc-btn:hover i { color: var(--teal-dark); }
.oc-btn.good { border-color: var(--green); color: var(--green); }
.oc-btn.good i { color: var(--green); }
.oc-btn.good:hover { background: var(--teal-50); }
.oc-btn.bad:hover { border-color: var(--red); background: transparent; color: var(--red); }
.oc-btn.small { min-height: 42px; font-size: 13px; font-weight: 500; }
.oc-more, .oc-extra { margin-top: 10px; }
.oc-more > summary, .oc-extra > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 2px; }
.oc-more > summary:hover, .oc-extra > summary:hover { color: var(--teal-dark); }
.oc-more .oc-grid { margin-top: 6px; }
/* v3.4.0 (R6): outcome tiers — the two money outcomes lead (big), the rest tier below. */
.oc-tiered { grid-template-columns: 1fr 1fr; }
.oc-tiered .oc-btn.lead { min-height: 68px; font-size: var(--t-lg); }
.oc-tiered .tier-2 { grid-column: 1 / -1; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
/* The amount is the .ask-field instrument (welded $, 9ch mono), not a bordered box inside the card. */
.oc-amount { margin-top: var(--s3); background: transparent; border: 0; border-radius: 0; padding: 0; }
.oc-amount label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s2); }
.oc-amount-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* Rarely-used search fields, tucked but one click away. */
.more-fields { margin-top: 12px; }
.more-fields > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--teal-dark);
    padding: 6px 2px; list-style: none; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::before { content: "\ea5f"; font-family: "tabler-icons"; font-weight: 400;
    margin-right: 5px; display: inline-block; transition: transform .12s; }
.more-fields[open] > summary::before { transform: rotate(90deg); }

/* Voter record identity strip — who this person is, before any panel is opened. */
.vr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 16px; }
.vr-id { min-width: 0; }
.vr-id h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; }
.vr-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px;
    font-size: 14px; color: var(--ink-2); }
.vr-party { font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
    border-radius: 999px; padding: 3px 10px; background: var(--bg); border: 1px solid var(--line-2); }
.vr-party.p-dem { color: #60a5fa; border-color: #1e3a8a; background: #131e33; }
.vr-party.p-rep { color: #f87171; border-color: #7f1d1d; background: #2b1414; }
.vr-party.p-non, .vr-party.p-npp { color: var(--ink-2); }
.vr-status { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
    background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); }
.vr-status.s-a { color: var(--green); border-color: #14532d; }
.vr-reach { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 14px; }
.vr-reach a, .vr-reach span { display: inline-flex; align-items: center; gap: 5px; }
.vr-reach i { color: var(--muted); }
.vr-actions { text-align: right; }
.vr-last { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; max-width: 280px; }
.panel-sub { font-size: 14px; margin: 18px 0 2px; }

/* Light theme keeps the party chips readable too. */
:root:not([data-theme="dark"]) .vr-party.p-dem { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
:root:not([data-theme="dark"]) .vr-party.p-rep { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

/* Script builder: show the branching on the page instead of one click down. */
.el-q { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 8px; font-size: 14px; }
.el-q i { color: var(--teal-dark); }
.branch-map { list-style: none; margin: 0 0 8px; padding: 0 0 0 2px; display: grid; gap: 3px; }
.branch-map li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.branch-map i { color: var(--line-2); font-size: 14px; }
.bm-ans { color: var(--ink-2); }
.bm-goes { color: var(--muted); }
.bm-goes.set { color: var(--teal-dark); font-weight: 600; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.in-use { display: flex; align-items: baseline; gap: 7px; }

/* Script preview — reads as a sandbox, never mistakable for the live screen. */
.preview-note { background: var(--teal-50); border: 1px solid var(--teal); display: flex;
    align-items: baseline; gap: 8px; }
.preview-screen { border: 2px dashed var(--line-2); border-radius: var(--radius-lg);
    padding: 20px; margin-top: 14px; }
.preview-step { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 8px; }
.preview-trail { font-size: 12px; color: var(--muted); margin: 12px 0 0; display: flex;
    align-items: center; gap: 6px; }

/* Dashboard status board — the 8am read. Numbers lead; the launchpad moves below. */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
    margin: 18px 0; }
.board-tile { display: flex; flex-direction: column; gap: 2px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; color: var(--ink); }
a.board-tile:hover { border-color: var(--teal); text-decoration: none; }
.bt-num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums; }
.bt-lbl { font-size: 13px; color: var(--ink-2); }
.bt-delta { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; }
.bt-delta.up { color: var(--green); }
.bt-delta.down { color: var(--red); }

.dash-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-head h2 { margin: 0; font-size: 16px; }
.card-head a { font-size: 12px; }
.card-sub { font-size: 12px; margin: 2px 0 12px; }
.live-list { list-style: none; margin: 0; padding: 0; }
.live-list li { padding: 9px 0; border-top: 1px solid var(--line); }
.live-list li:first-child { border-top: 0; }
.ll-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ll-name { font-weight: 600; font-size: 14px; }
.ll-code { font-size: 12px; letter-spacing: .1em; font-weight: 700; color: var(--teal-dark);
    background: none; border: 0; padding: 0; }
.ll-bar { height: 5px; background: var(--bg); border-radius: 999px; overflow: hidden; margin: 6px 0 4px; }
.ll-bar span { display: block; height: 100%; background: var(--teal); }
.ll-meta { font-size: 12px; color: var(--muted); }
table.lean th, table.lean td { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
table.lean tbody tr:last-child td { border-bottom: 0; }
table.lean { background: none; }

/* The launchpad is a destination list, not the morning read — it collapses under the board. */
.all-features { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 8px; }
.all-features > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
    display: flex; align-items: center; gap: 7px; padding: 8px 2px; list-style: none; }
.all-features > summary::-webkit-details-marker { display: none; }
.all-features > summary:hover { color: var(--teal-dark); }

/* Right-align counts so a column of numbers reads as a column. */
.num-col { text-align: right; font-variant-numeric: tabular-nums; }
th.num-col { text-align: right; }

/* "+ New X" in a page head: the create form is the rarest action on a library screen, so it opens
   from a button instead of occupying the top of the page above the thing you came to see. */
.inline-new > summary { list-style: none; cursor: pointer; }
.inline-new > summary::-webkit-details-marker { display: none; }
.inline-new-form { display: flex; gap: 8px; margin-top: 10px; }
.inline-new-form input { min-width: 240px; }

/* A disabled control must never look clickable — .btn had no [disabled] rule at all, so a
   "Apply to 0 voters" button rendered in full primary teal. */
.btn[disabled], .btn.is-disabled, button.primary[disabled] {
    opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; }

/* Grouped by intent, with a quiet caption over each cluster — a flat row of identical chips makes
   the reader test every label to find the one they want. */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0; align-items: flex-end; }
.tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: relative; }
.tool-group + .tool-group::before { content: ""; position: absolute; left: -11px; top: 4px; bottom: 4px;
    width: 1px; background: var(--line); }
.tool-label { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
/* One height for every chip in the row, whatever's inside it. */
.toolbar .tool { display: inline-flex; align-items: center; gap: 6px; height: 36px;
    border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px;
    padding: 0 12px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.toolbar .tool i { font-size: 15px; color: var(--muted); }
.toolbar a.tool:hover { border-color: var(--teal); text-decoration: none; }
.toolbar a.tool:hover i { color: var(--teal-dark); }
.toolbar .tool.disabled { color: var(--muted); opacity: .55; cursor: not-allowed; }

/* Notes */
.notes-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 22px; }
.notes-block h2 { margin-top: 0; font-size: 16px; }
.note { border-left: 3px solid var(--line); padding: 6px 12px; margin-bottom: 8px; }
.note.pinned { border-left-color: #f59e0b; background: #fffbeb; }
.note-meta { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.note-form { margin-top: 12px; }
.note-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; }
.note-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }

/* Engagement chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-800); border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 13px; }
.chip-x { background: none; border: none; cursor: pointer; color: var(--teal-800); font-size: 15px; line-height: 1; padding: 0 2px; }
.chip-x:hover { color: var(--red); }
.inline-apply { display: flex; gap: 8px; align-items: center; max-width: 420px; }
.inline-apply select { flex: 1; }

/* Voter record */
.record-panels { max-width: 760px; }

/* R8 pt2/pt3 — record tiers: collapsed panels preview their own data; Addresses+Phones+Email fuse
   into one "Reach them" card; and the file data (districts / voting / registration) drops to a
   quiet, borderless reference tier at the bottom. */
.panel-preview { margin-left: auto; padding-left: 14px; min-width: 0; color: var(--muted);
    font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel[open] > summary .panel-preview { display: none; }
.panel-count { margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums; }

/* Reach them — one card, three hairline-separated sections. */
.reach-sec + .reach-sec { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.reach-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    font-weight: 700; margin: 0 0 6px; }
.reach-add { margin-top: 4px; }
.reach-add > summary { cursor: pointer; color: var(--teal-dark); font-size: 13px; font-weight: 600;
    list-style: none; padding: 4px 0; display: inline-block; }
.reach-add > summary::-webkit-details-marker { display: none; }
.reach-add[open] > summary { color: var(--muted); }

/* Reference tier — file data, quiet and borderless at the bottom. */
.record-reference { margin-top: 22px; }
.record-reference-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700; margin: 0 0 4px; padding-left: 2px; }
.panel.ref { background: transparent; border: 0; border-radius: 0; }
.panel.ref + .panel.ref { border-top: 1px solid var(--line); }
.panel.ref > summary { color: var(--ink-2); font-weight: 600; padding: 11px 2px; font-size: 14px; }
.panel.ref .panel-body { padding: 0 2px 14px; }
.locked { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; margin-left: 6px; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.add-row input, .add-row select { flex: 0 1 auto; }
.add-row input[name="full_line"], .add-row input[name="number"] { flex: 1 1 180px; }
.edit-inline { display: inline-block; margin: 0 8px; }
.edit-inline > summary { cursor: pointer; color: var(--teal-dark); font-size: 13px; list-style: none; display: inline; }
.edit-inline > summary::-webkit-details-marker { display: none; }
.edit-inline .add-row { margin-top: 6px; }
.script-text { white-space: pre-wrap; font-size: 14px; margin-top: 6px; }
.script-block { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }

/* Guided canvass run (mobile-first) */
/* margin auto — this had a max-width but no centring, so it sat 28px off-centre inside the
   outreach column and looked accidental on any wide screen. */
.canvass-screen { max-width: 620px; margin: 0 auto; }
.canvass-screen .form-row label { font-size: 15px; }
.canvass-screen select, .canvass-screen textarea { padding: 12px; font-size: 16px; }
.btn-big { width: 100%; justify-content: center; padding: 14px; font-size: 17px; }
.run-progress { margin: 8px 0 16px; }
.run-bar { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.run-bar span { display: block; height: 100%; background: var(--teal); }
.run-start { padding: 13px 22px; font-size: 16px; }
.src-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 400; cursor: pointer; }
.src-row:hover { border-color: var(--line-2); }

/* Code-entry outreach launcher */
/* A card, like the sign-in screen — a single-task page floating on the raw background reads as
   an unfinished form rather than a deliberate destination. */
.code-launch { max-width: 420px; margin: 6vh auto 0; text-align: center; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px 26px;
    box-shadow: var(--shadow-sm); }
.code-launch h1 { font-size: 24px; margin: 0 0 6px; }
.code-launch-ico { width: 52px; height: 52px; font-size: 28px; margin: 0 auto 14px; }
/* Input over button, both full width: the code is the task, and "Go" was a 80px chip next to a
   350px field — the one primary action shouldn't be the smallest thing on the page. */
.code-form { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 8px; }
.code-form input { text-align: center; font-size: 26px; letter-spacing: .18em; text-transform: uppercase;
    padding: 16px 14px; font-weight: 700; }
/* The placeholder is a hint, not a value — shown in the same shouted, letter-spaced caps as a real
   code it looks like the field is already filled in. */
.code-form input::placeholder { text-transform: none; letter-spacing: normal; font-size: 16px;
    font-weight: 400; color: var(--muted); }
.code-form .btn { justify-content: center; padding: 14px; font-size: 17px; }
.code-manage { margin-top: 18px; font-size: 13px; }
/* The number IS the task on a call screen, so it gets the weight — and it's teal, not green,
   because green is semantic elsewhere in Foundry (success messages, healthy stats). */
.call-cta { margin: 0 0 18px; background: var(--teal); font-size: 20px; padding: 18px;
    box-shadow: var(--shadow-sm); font-variant-numeric: tabular-nums; }
.call-cta:hover { background: var(--teal-dark); }

/* Separate outreach shell (MiniVAN / phone-bank — no main app nav) */
.ob-body { margin: 0; background: var(--bg); }
.ob-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; background: var(--ink); color: #fff; padding: 0 16px; height: 54px; }
.ob-title { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-exit { color: #fff; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ob-exit:hover { text-decoration: underline; color: #fff; }
.ob-main { max-width: 680px; margin: 0 auto; padding: 16px; }
/* Progress and the offline button share one row instead of the button sitting inside a paragraph
   with descriptive text wrapping raggedly around it. */
.walk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin: 2px 0 12px; }
.ob-progress { font-size: 14px; color: var(--ink-2); margin: 0; }
.ob-progress strong { font-size: 17px; color: var(--ink); }
.offline-btn { white-space: nowrap; }
/* Roughly a third of the screen, never more, and docked under the top bar: the map stays in view
   while the roster scrolls beneath it, so the walker can keep their bearings while picking the next
   door. The dock carries the page background so rows slide under it rather than showing around
   the map's rounded corners. */
#cmap { height: clamp(200px, 36vh, 320px); border: 1px solid var(--line); border-radius: var(--radius); }
.ob-mapdock { position: sticky; top: 54px; z-index: 10; background: var(--bg);
    margin: 0 -16px; padding: 4px 16px 8px; }
.ob-list { margin-top: 12px; }
/* "Where am I" — the live GPS dot and the button that recenters on it. */
.gps-btn { display: flex !important; align-items: center; justify-content: center; font-size: 18px;
    color: var(--ink) !important; background: var(--surface) !important; cursor: pointer; }
.gps-btn.on { color: #2563eb !important; }
.gps-btn.err { color: var(--muted) !important; }
.gps-btn.wait i { animation: gps-pulse 1s ease-in-out infinite; }
@keyframes gps-pulse { 50% { opacity: .3; } }

/* Households, not a flat list of people: one address header, then everyone behind that door. */
.ob-hh { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    margin-bottom: 10px; overflow: hidden; }
.ob-hh-addr { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 11px 14px; border-top: 1px solid var(--line);
    color: var(--ink); font-size: 16px; }
.ob-hh .ob-row:first-of-type { border-top: 0; }
.ob-row:hover { background: var(--teal-50); text-decoration: none; }
.ob-row.done { opacity: .55; }
/* Name on its own line, details beneath — a single run-on line of NAME · ADDRESS · AGE · PARTY
   wraps mid-address on a phone and is hard to scan door to door. */
.ob-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-who strong { font-size: 16px; line-height: 1.25; font-weight: 600; }
.ob-sub { font-size: 13px; color: var(--muted); }
.ob-chev { flex: none; font-size: 18px; color: var(--line-2); }
.ob-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
    font-weight: 600; color: var(--green); background: var(--teal-50); border-radius: 999px;
    padding: 3px 9px; white-space: nowrap; }

/* Desktop: put the map beside the roster instead of stranding a phone-width column in the middle
   of a wide screen with the map pushing every name below the fold. */
@media (min-width: 900px) {
    .ob-main { max-width: 1040px; }
    .ob-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
    .ob-split .ob-mapdock { top: 70px; margin: 0; padding: 0; }
    .ob-split #cmap { height: calc(100vh - 190px); max-height: none; }
    .ob-split .ob-list { margin-top: 0; }
    .ob-split .ob-list-head { margin-top: 0; }
}
.pin-pop strong { display: block; margin-bottom: 6px; }
.pin-row { display: block; padding: 8px 4px; border-top: 1px solid var(--line); color: var(--teal-dark); font-size: 14px; }
.pin-row.done { color: var(--muted); }

/* Per-voter canvass screen: identity head, tabs, branching stepper, big tap targets.
   Built for a phone held one-handed outdoors: large type, generous targets, one clear next step. */
.cv-head { margin-bottom: 14px; }
.cv-head h1 { margin: 0 0 4px; font-size: 27px; line-height: 1.15; }
/* Separators are drawn by CSS, never typed into the template — so a voter with no age/sex can't
   render a stray leading "·". */
.cv-meta { margin: 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; }
.cv-meta > span + span::before { content: "·"; margin: 0 8px; color: var(--line-2); }
.cv-meta .cv-party { font-weight: 600; color: var(--ink-2); }
.cv-nophone { display: flex; align-items: center; gap: 8px; }

.cv-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 16px; overflow-x: auto; }
.cv-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px;
    font: inherit; font-weight: 500; font-size: 15px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cv-tab:hover { color: var(--ink-2); }
.cv-tab.active { color: var(--teal-dark); border-bottom-color: var(--teal); }
.step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px; }
.step-card h3 { margin: 0 0 6px; font-size: 17px; }
.bigbtns { display: flex; flex-direction: column; gap: 10px; }
.bigbtn { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line-2);
    border-radius: 12px; padding: 16px 18px; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; }
.bigbtn:hover { border-color: var(--teal); background: var(--teal-50); }
/* Outlined, not solid — script navigation shouldn't compete with the call button or with Save
   for the eye. Only the one true commit action stays a solid slab. */
.bigbtn.next-btn { text-align: center; background: var(--surface); color: var(--teal-dark);
    border-color: var(--teal); font-weight: 600; }
.bigbtn.next-btn:hover { background: var(--teal-50); }
.bigbtn.good { border-color: #a7f3d0; color: var(--green); }
.bigbtn.ghost { border-style: dashed; color: var(--muted); }
.back-btn { background: none; border: none; color: var(--muted); font: inherit; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }

/* Dispositions. A flat column of 15 identical full-width buttons is the thing that read as
   "computer-made" — a raw dump of the vocabulary. Now: the handful that cover most attempts sit
   in a compact grid, the long tail hides behind a disclosure, and both are visually quieter than
   the real primary action (Next / Save). */
.cantreach { margin-top: 18px; border-top: 1px solid var(--line); }
.cantreach > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2);
    padding: 12px 2px; list-style: none; display: flex; align-items: center; gap: 6px; }
.cantreach > summary::-webkit-details-marker { display: none; }
.cantreach > summary::before { content: "\ea5f"; font-family: "tabler-icons"; font-weight: 400;
    color: var(--muted); transition: transform .15s ease; }
.cantreach[open] > summary::before { transform: rotate(90deg); }
.cantreach > summary:hover { color: var(--teal-dark); }
.disp-wrap { padding-bottom: 4px; }
.disp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }
.disp-grid .bigbtn { text-align: center; padding: 14px 10px; font-size: 15px; }
.bigbtn.full { text-align: center; margin-top: 8px; display: flex; align-items: center;
    justify-content: center; gap: 8px; }
.more-disp { margin-top: 8px; }
.more-disp > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 2px; }
.more-disp > summary:hover { color: var(--teal-dark); }
/* Quieter than the primary four — otherwise opening the disclosure just restores the flat wall of
   identical buttons it was meant to defeat. */
.more-disp .disp-grid { margin-top: 6px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.more-disp .disp-grid .bigbtn { padding: 10px 8px; font-size: 13.5px; color: var(--ink-2);
    border-color: var(--line); }
.kv { width: 100%; }
.kv td { padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv td:first-child { color: var(--muted); width: 38%; }
.linklike { background: none; border: 0; color: var(--teal-700); cursor: pointer; padding: 0 4px; vertical-align: middle; }
.linklike:hover { color: var(--teal, #14b8a6); }

/* Reports overview — dependency-free CSS charts */
.win-toggle{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.win-toggle a{padding:6px 12px; font-size:13px; color:var(--muted); text-decoration:none; border-right:1px solid var(--line);}
.win-toggle a:last-child{border-right:0;}
.win-toggle a.on{background:var(--teal); color:#fff; font-weight:600;}
.rep-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;}
@media(max-width:760px){.rep-grid{grid-template-columns:1fr;}}
.rep-card{padding:18px;}
.rep-card h2{font-size:16px; margin:0 0 14px;}
.hbar-row{display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:10px; margin:7px 0; font-size:13.5px;}
.hbar-lbl{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hbar-lbl small{display:block; font-size:11px; line-height:1;}
.hbar-track{background:var(--surface-2); border-radius:6px; height:16px; overflow:hidden;}
.hbar-fill{display:block; height:100%; background:var(--teal); border-radius:6px; min-width:2px;}
.hbar-fill.cov{background:var(--green);}
.hbar-n{text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink);}
/* daily trend (vertical bars) */
.trend{display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:6px;}
.trend-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px;}
.trend-bar{width:100%; max-width:26px; background:var(--teal); border-radius:4px 4px 0 0; min-height:2px; transition:height .2s;}
.trend-n{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
.trend-dow{font-size:10px; color:var(--muted); text-transform:uppercase;}

/* Grid data entry */
.grid-actions{display:flex; align-items:center; gap:12px; margin:12px 0; flex-wrap:wrap;}
/* Save is always the rightmost thing, on every page — it used to jump to the left edge on page 2
   because the layout depended on how many buttons happened to be present. */
.grid-actions > .btn:not(.secondary){margin-left:auto;}
/* The scrollport. Sticky headers need a scrolling ancestor, and the global `table{overflow:hidden}`
   (there for border-radius) makes the table clip its own sticky cells — so the box lives here and
   the table opts out. */
.grid-scroll{overflow:auto; max-height:calc(100vh - 260px); border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface);}
.grid-entry{border-collapse:separate; border-spacing:0; width:100%; min-width:520px; overflow:visible; border-radius:0;}
.grid-entry th{position:sticky; top:0; background:var(--surface-2); text-align:left; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:9px 10px;
  border-bottom:0; box-shadow:inset 0 -1px 0 var(--line-2); z-index:3;}
.grid-entry td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.grid-entry tr:nth-child(even) td{background:var(--surface-2);}
/* Keep the name pinned while you scroll sideways through questions — otherwise you're answering
   Q3 for a row whose name left the screen. Sticky cells need an opaque background. */
.grid-entry .who{position:sticky; left:0; z-index:2; width:99%; min-width:190px;
  background:var(--surface); box-shadow:1px 0 0 var(--line);}
.grid-entry tr:nth-child(even) .who{background:var(--surface-2);}
.grid-entry th.who{z-index:4; background:var(--surface-2);}
.grid-entry .who strong{display:block; font-size:14px; line-height:1.2;}
.grid-entry .who .muted{font-size:12px;}
/* Let the name column absorb the slack so the dropdowns don't stretch to 600px on a wide screen. */
.grid-entry td:not(.who), .grid-entry th:not(.who){width:1%; white-space:nowrap;}
.grid-entry select{width:100%; min-width:150px; max-width:220px; min-height:40px; padding:8px 10px; font-size:15px;}
/* Light up the row you're working, and flag the ones that will actually save. */
.grid-entry tbody tr:hover td, .grid-entry tbody tr:focus-within td{background:var(--teal-50);}
.grid-entry tbody tr:focus-within .who, .grid-entry tbody tr:hover .who{background:var(--teal-50);}
.grid-entry tr.touched .who{box-shadow:inset 3px 0 0 var(--teal), 1px 0 0 var(--line);}
/* A save bar you can always reach — this screen runs ~2,600px tall with 50 rows on it. */
.grid-save-bar{position:sticky; bottom:0; z-index:4; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); margin-top:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 14px rgba(15,23,42,.06);}
@media (max-width:700px){
  /* 16px is the exact threshold below which iOS zooms the whole page on focus. */
  .grid-entry select{font-size:16px; min-height:44px; min-width:130px;}
  .grid-entry td{padding:8px 10px;}
  .grid-scroll{max-height:calc(100vh - 300px);}
}

/* Single-task setup form on its own panel, sized to the form — a full-width heading over a 560px
   form with no surface under either reads as a fragment, not a page. */
.setup-card{max-width:620px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:22px 24px 24px;}
.setup-card .page-head{margin-bottom:6px;}
.setup-card h1{font-size:22px; margin:0;}
.setup-card .stacked-form{max-width:none; margin-top:18px;}
/* The one line that says WHICH list you're about to freeze — not boilerplate. */
.setup-source{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:15px;}
.setup-source i{color:var(--teal-dark);}
/* .muted hard-sets 14px, so <small class="muted"> wasn't small. */
.hint{display:block; margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.45;}

/* R9 pt4 — A2P business-profile: completeness strip up top + the registration-constants summary. */
.a2p-strip { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 9px 13px; margin: 4px 0 16px; font-size: 14px; }
.a2p-strip i { font-size: 17px; margin-top: 1px; flex: none; }
.a2p-todo { border-left: 3px solid var(--amber); }
.a2p-todo i { color: var(--amber); }
.a2p-ok { border-left: 3px solid var(--green); }
.a2p-ok i { color: var(--green); }
.a2p-consts { margin-top: 12px; }

/* Script setup: which "couldn't reach them" outcomes volunteers may record. */
.disp-setup{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px; margin-top:18px;}
.disp-setup h2{margin:0 0 4px; font-size:18px;}
.disp-groups{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin:16px 0;}
.disp-group{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px 10px; margin:0;}
.disp-group legend{font-size:13px; font-weight:700; padding:0 6px; color:var(--ink);}
.disp-help{font-size:12px; margin:0 0 8px;}
.disp-group .chk{display:flex; align-items:center; gap:7px; padding:4px 0; font-size:14px;}
.disp-star{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--teal-dark); background:var(--teal-50); border-radius:999px; padding:1px 7px;}
.disp-all{margin-top:6px;}
.disp-preview{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
.disp-preview h3{margin:0 0 10px; font-size:14px;}
.disp-preview h4{margin:0 0 7px; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:5px;}
.disp-preview-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px;}
.disp-tag{display:inline-block; font-size:12.5px; border:1px solid var(--line-2); border-radius:999px;
  padding:3px 10px; margin:0 5px 5px 0; color:var(--ink-2);}
.disp-tag.up{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600;}
.disp-legend{margin:12px 0 0; font-size:12px;}

/* Phone bank cards — the caller code is the hero, not a clipped table cell. */
.pb-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; margin-top:16px;}
.pb-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px;}
.pb-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pb-id h2{margin:0 0 2px; font-size:17px;}
.pb-id .muted{margin:0; font-size:13px;}
.pb-top .btn{flex:none;}
.pb-code{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 12px;
  background:var(--bg); border:1px dashed var(--line-2); border-radius:var(--radius); padding:10px 14px;}
.pb-code-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.pb-code code{font-size:22px; font-weight:700; letter-spacing:.16em; background:none; border:none;
  padding:0; color:var(--teal-dark); font-variant-numeric:tabular-nums;}
.pb-copy{margin-left:auto;}
.pb-actions{display:flex; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:11px;}
.pb-actions form{margin:0;}

/* ---- Counts & crosstabs (v3.9.0): a banner table ----------------------------------------
   The controls are a label rail + welded .unit pairs ("Party | BY | Sex"). The table scrolls
   inside .xt-wrap (never the page): header rows stick to the top, the totals row to the bottom,
   and the row label + Total columns to the left, so the denominator stays in view however wide
   the breakdowns run. Header rows are a fixed height so the 2nd/3rd sticky rows know their top. */
.xt-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s2) 0 var(--s3); }
.xt-starts-lbl { font-size: var(--t-sm); color: var(--muted); margin-right: 2px; white-space: nowrap; }
.xt-starts .chip { padding: 3px 10px; text-decoration: none; }
.xt-starts .chip:hover { border-color: var(--teal); }
.xt-saved { margin-top: calc(-1 * var(--s2)); }
.xt-saved-chip { padding: 2px 4px 2px 10px; }
.xt-saved-chip a { color: inherit; text-decoration: none; }
.xt-saved-chip a:hover { text-decoration: underline; }
.xt-saved-chip form { display: inline; margin: 0; }
.xt-form { display: grid; gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s3) var(--s4); }
/* line 1 — what's counted: unit · source · % mode */
.xt-measure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5);
    padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.xt-field { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.xt-lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); white-space: nowrap; }
/* lines 2–3 — the layout: a label rail, then only the fields in use */
.xt-axis { display: flex; align-items: flex-start; gap: var(--s3); }
.xt-axis > .xt-lbl { width: 8ch; flex: none; line-height: var(--row); }
.xt-slots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.xt-form select { height: var(--row); padding: 0 9px; }   /* the global 9px vertical pad clips a 30px select */
/* Fixed widths, not the global min(100%, --w): a % width inside a shrink-wrapped .unit makes the
   unit reserve each select's natural (widest-option) width and leaves a dead box at the end. */
.xt-src { width: calc(28ch * var(--ch-adj)); max-width: 100%; }
.xt-form .unit > select { width: calc(19ch * var(--ch-adj)); height: calc(var(--row) - 2px); }
.xt-form .unit > select[data-split] { width: calc(16ch * var(--ch-adj)); }
.unit > .xt-plus, .unit > .xt-x { background: var(--surface-2); cursor: pointer; white-space: nowrap; }
.unit > .xt-plus { font-size: var(--t-xs); font-weight: 600; color: var(--teal-dark); }
.unit > .xt-plus:hover { background: var(--teal-50); }
.unit > .xt-x { font-size: 17px; line-height: 1; color: var(--muted); padding: 0 10px; }
.unit > .xt-x:hover { color: var(--red); }
.xt-add { height: var(--row); }

.xt-result { position: relative; transition: opacity .15s; }
.xt-result.htmx-request { opacity: .45; }
.xt-error { padding: var(--s3) var(--s4); border: 1px solid var(--amber); border-radius: var(--radius);
    background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
.xt-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.xt-summary { margin: 0 0 var(--s2); }
.xt-summary strong:first-child { font-size: var(--t-lg); }
.xt-onfile { margin: 0 0 var(--s3); font-size: var(--t-sm); }
.xt-bar-actions { display: flex; align-items: flex-start; gap: var(--s2); margin-left: auto; }   /* stays at the right edge even when it wraps, so the save popover never runs off the left */
.xt-save { position: relative; }
.xt-save > summary { list-style: none; cursor: pointer; }
.xt-save > summary::-webkit-details-marker { display: none; }
.xt-save-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(380px, 90vw);
    display: grid; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--surface);
    border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); }
.xt-save-row { display: flex; gap: var(--s2); }
.xt-save-row input { flex: 1; height: var(--row); padding: 0 9px; }
.xt-save-form .muted { margin: 0; font-size: var(--t-xs); }

.xt-wrap { --xt-h: 32px; --xt-lab: 190px; overflow: auto; max-height: min(76vh, 960px);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.xt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%;
    font-size: var(--t-sm); font-variant-numeric: tabular-nums;
    overflow: visible; border-radius: 0; }   /* the global table{overflow:hidden} would trap sticky cells */
.xt th, .xt td { padding: 5px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line);
    background: var(--surface); }
.xt thead th { position: sticky; top: 0; z-index: 2; height: var(--xt-h); box-sizing: border-box;
    background: var(--surface-2); color: var(--muted); font-weight: 600; border-bottom-color: var(--line-2); }
.xt thead tr:nth-child(2) th { top: var(--xt-h); }
.xt thead tr:nth-child(3) th { top: calc(var(--xt-h) * 2); }
.xt .xt-btitle { text-align: center; color: var(--ink-2); border-left: 2px solid var(--line-2); }
.xt .xt-grp { text-align: center; color: var(--ink-2); }
.xt .first { border-left: 2px solid var(--line-2); }
/* sticky left: the row label, then the Total column right beside it */
.xt .xt-corner, .xt .xt-rowh { position: sticky; left: 0; z-index: 1; text-align: left;
    width: var(--xt-lab); min-width: var(--xt-lab); max-width: var(--xt-lab);
    overflow: hidden; text-overflow: ellipsis; }
.xt .xt-corner { z-index: 3; color: var(--ink); }
.xt .xt-tot, .xt td.t { position: sticky; left: var(--xt-lab); z-index: 1;
    border-right: 1px solid var(--line-2); }
.xt thead .xt-tot { z-index: 3; color: var(--ink); }
.xt .xt-rowh { font-weight: 600; color: var(--ink); }
.xt td.t { font-weight: 700; }
.xt tr.sub > * { background: var(--surface-2); font-weight: 700; }
.xt tr.ind .xt-rowh { padding-left: 24px; font-weight: 500; }
.xt tfoot th, .xt tfoot td { position: sticky; bottom: 0; z-index: 1; font-weight: 700;
    background: var(--surface-2); border-top: 2px solid var(--line-2); border-bottom: 0; }
.xt tfoot .xt-rowh, .xt tfoot td.t { z-index: 2; }
/* a cell: the share leads when one is asked for, the count follows small */
.xt .pc { display: block; font-weight: 600; color: var(--ink); }
.xt .pc + .n { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: 400; }
.xt.heat tbody td.c { background: color-mix(in srgb, var(--teal) calc(var(--h, 0) * 30%), var(--surface)); }
.xt.heat tbody tr.sub td.c { background: color-mix(in srgb, var(--teal) calc(var(--h, 0) * 30%), var(--surface-2)); }
.xt td.c, .xt td.t { cursor: pointer; }
.xt td.c:hover, .xt td.t:hover { box-shadow: inset 0 0 0 2px var(--teal-100); }
.xt td.is-picked { box-shadow: inset 0 0 0 2px var(--teal); }
.xt-notes { margin: var(--s3) 0 0; padding-left: 18px; color: var(--muted); font-size: var(--t-sm); }
.xt-pop { position: absolute; z-index: 20; max-width: min(440px, 92vw); padding: var(--s3) var(--s4);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: var(--shadow); }
.xt-pop-what { margin: 0 0 var(--s2); font-size: var(--t-sm); }
.xt-pop-actions { display: flex; align-items: center; gap: var(--s3); }
.xt-pop-warn { margin: var(--s2) 0 0; font-size: var(--t-xs); }
@media (max-width: 767px) {
    .xt-axis { flex-direction: column; gap: var(--s1); }
    .xt-axis > .xt-lbl { line-height: normal; }
    .xt-field, .xt-src { width: 100%; }
    .xt-slots, .xt-slot, .xt-form .unit { width: 100%; }
    .xt-form .unit > select, .xt-form .unit > select[data-split] { width: auto; flex: 1 1 100%; }
    .xt-measure .seg { max-width: 100%; overflow-x: auto; }
    .xt-wrap { --xt-lab: 128px; max-height: 70vh; }
    .xt .xt-tot, .xt td.t { position: static; }   /* on a phone only the label column stays put */
}

/* Bellows network tables: give each card a wider minimum (so it doesn't shrink to a squished
   ~250px), keep number columns on one line + right-aligned, and stack to one column when narrow. */
/* Roomier card grid: wider minimum so cards don't shrink to a squished ~250px, stacking to
   one column when narrow; wide tables scroll inside the card instead of cramming. */
.wide-cards, .net-cards { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.wide-cards .card, .net-cards .card { overflow-x: auto; }

/* R9 pt2 — the account-detail page: two real cards (a 420px profile column + the memberships
   panel), explicit role saves with an elevation confirm, and the role legend as a disclosure. */
.acct-cards { grid-template-columns: 420px minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .acct-cards { grid-template-columns: 1fr; } }
.acct-cards form { margin: 0; }
.acct-cards .acct-add { margin-top: 14px; }   /* (0,2,0) beats `.acct-cards form` (0,1,1) */
.acct-section { margin-top: 20px; }
.acct-head-actions { display: inline-flex; align-items: center; gap: var(--s3); }
.acct-head-actions form { margin: 0; }
.acct-status-ok { color: var(--green); }
.role-set { display: flex; align-items: center; gap: 8px; }
.acct-add { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.acct-add .form-row { margin-bottom: 0; }
.role-legend { margin-top: 20px; }
.role-legend > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--teal-dark);
    list-style: none; padding: 6px 0; }
.role-legend > summary::-webkit-details-marker { display: none; }
.role-legend table { margin-top: 8px; }
/* Network tables also keep their number columns on one line + right-aligned. */
.net-cards th, .net-cards td:not(:first-child) { white-space: nowrap; }
.net-cards td:not(:first-child), .net-cards th:not(:first-child) { text-align: right; }

/* Candidate dashboard hero — leads the candidate straight to call time. */
.candidate-hero { display: flex; align-items: center; gap: 16px; text-decoration: none;
    background: var(--amber); color: #fff; border-radius: var(--radius-lg); padding: 18px 22px;
    margin: 4px 0 22px; box-shadow: var(--shadow-sm); }
.candidate-hero:hover { filter: brightness(1.05); }
.candidate-hero .ch-ico { font-size: 30px; display: flex; }
.candidate-hero .ch-text { flex: 1; }
.candidate-hero h2 { margin: 0; color: #fff; }
.candidate-hero p { margin: 2px 0 0; color: rgba(255,255,255,.9); font-size: 14px; }
.candidate-hero .ch-go { font-size: 24px; }

/* "View as" impersonation — a FIXED amber ring around the viewport + a fixed pill, out of document
   flow (R10 v3.8.1), so it can't scroll away and a superadmin can't forget they're viewing as
   someone else. The ring is pointer-events:none so it never blocks a click. */
.impersonate-ring { position: fixed; inset: 0; z-index: 500; pointer-events: none;
    border: 3px solid var(--amber); }
.impersonate-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 501;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: calc(100% - 32px);
    padding: 9px 16px; border-radius: 999px;
    background: var(--amber); color: #fff; font-size: 14px; box-shadow: var(--shadow-lg, var(--shadow)); }
.impersonate-bar .imp-real { opacity: .85; }
.impersonate-bar .btn { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; }
.impersonate-bar .btn:hover { background: rgba(255,255,255,.3); }

/* Provider mode badge — rendered at the top of every texting page so the operator can
   tell at a glance whether they're on the fake carrier or hitting real Twilio. */
.tx-provider-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
    padding: 7px 14px; border-radius: 999px; font-size: 12px; line-height: 1.3;
    font-weight: 500; letter-spacing: .02em; border: 1px solid var(--line); }
.tx-provider-badge strong { font-weight: 700; letter-spacing: .06em; }
.tx-provider-badge .tx-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tx-provider-badge .tx-badge-sub { color: currentColor; opacity: .7; font-weight: 400; font-size: 11px; }
.tx-provider-badge.tx-sandbox { background: color-mix(in srgb, var(--amber) 12%, transparent);
    color: var(--amber, #b45309); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.tx-provider-badge.tx-sandbox .tx-badge-dot { background: var(--amber, #b45309); }
.tx-provider-badge.tx-live { background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red, #b91c1c); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.tx-provider-badge.tx-live .tx-badge-dot { background: var(--red, #b91c1c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }

/* Bellows call desk — two-pane: persistent queue (left) + selected donor detail (right). */
.ct-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }
.ct-queue { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    position: sticky; top: 74px; display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.ct-queue-head { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ct-progress { font-size: 12px; color: var(--muted); }
.ct-filter { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ct-filter select { width: 100%; }
.ct-list { overflow-y: auto; padding: 6px; }
.ct-item { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 8px;
    text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.ct-item:hover { background: var(--surface-2); }
.ct-item.active { background: var(--surface-2); border-color: var(--amber); }
.ct-item-main { flex: 1; min-width: 0; }
.ct-name { font-weight: 600; font-size: 14px; }
.ct-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9px; flex: none;
    background: var(--line); color: var(--muted); white-space: nowrap; }
.ct-pill.done { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.ct-pill.good { background: var(--teal-100); color: var(--teal-800); }
/* v3.4.1 (R6 pt2): the queue item is 2 lines; the ask gets its own right column (amber tabular)
   so it's never ellipsised away, with the status pill beneath it. */
.ct-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ct-ask { font-size: 13px; font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }
/* v3.4.1 (R6 pt2): the session tally had NO rule — give it tabular numerals + a green raised figure. */
.sess-tally { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; margin-right: var(--s4); }
.sess-tally strong { color: var(--ink); font-weight: 700; }
.sess-tally strong.good { color: var(--green); }
.ct-detail { min-width: 0; }
.ct-empty { text-align: center; padding: 60px 20px; }
@media (max-width: 800px) {
    .ct-layout { grid-template-columns: 1fr; }
    .ct-queue { position: static; max-height: 420px; }
}
[data-theme="dark"] .ct-pill.good { background: #0f2a1f; color: #6ee7b7; }

/* ============================================================================================
   Call desk rebuild (v3.6.3) — Focus/List modes, a scoreboard top bar, a warm per-donor hook,
   and a celebration when a call turns into money. Candidates dread call time; Focus mode shows
   one person and one next action, and makes progress feel like a game.
   ============================================================================================ */

/* Top bar: the scoreboard LEADS (the game); the view toggle + demoted utilities sit on the right. */
.ct-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 24px;
    flex-wrap: wrap; margin: 0 0 18px; }
.ct-score { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }
.ct-score-cell { display: flex; flex-direction: column; line-height: 1.02; }
.ct-score-cell.is-zero { display: none; }
.ct-score-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
    font-variant-numeric: tabular-nums; }
.ct-score-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); margin-top: 3px; }
.ct-score-money.good .ct-score-num { color: var(--green); }
.ct-score-money:not(.good) .ct-score-num { color: var(--amber); }

/* Goal bar — call time as measurable progress toward the number that matters. */
.ct-goal { min-width: 190px; display: flex; flex-direction: column; gap: 5px; }
.ct-goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 13px; font-variant-numeric: tabular-nums; }
.ct-goal-lbl { font-weight: 700; }
.ct-goal-pct { font-weight: 800; color: var(--amber); }
.ct-goal-bar { height: 8px; border-radius: 99px; background: var(--surface-2);
    border: 1px solid var(--line); overflow: hidden; }
.ct-goal-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--amber);
    transition: width .5s ease; }

@keyframes ctBump { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ct-score-cell.bump { animation: ctBump .5s ease; }

.ct-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Focus / List segmented toggle. */
.ct-mode { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-2);
    border-radius: 10px; padding: 3px; }
.ct-mode-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
    color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 6px 12px; border-radius: 8px; }
.ct-mode-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.ct-browse { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; padding: 7px 12px; border-radius: 9px; }
.ct-browse:hover { background: var(--surface-2); }

.ct-utils { display: inline-flex; align-items: center; gap: 4px; }
.ct-util { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px;
    text-decoration: none; padding: 7px 10px; border-radius: 8px; background: none; border: 0;
    cursor: pointer; font-weight: 500; }
.ct-util:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.ct-util-form { margin: 0; display: inline; }

/* ---- Mode: FOCUS (default) — one donor as a hero, the queue tucked into a drawer ---- */
.ct-root.mode-focus .ct-layout { display: block; }
.ct-root.mode-focus .ct-detail { max-width: 720px; margin: 0 auto; }
.ct-root.mode-focus .ct-queue { display: none; }
.ct-root.mode-focus .ask-strip { padding: 20px 24px; gap: 26px; }
.ct-root.mode-focus .ask-num { font-size: 52px; }
.ct-root.mode-focus .ask-call { font-size: 18px; padding: 14px 22px; }
.ct-root.mode-focus .ct-detail-head h2 { font-size: 30px; }
.ct-root.mode-list .ct-browse { display: none; }

/* ---- Mode: LIST — the classic two-pane ---- */
.ct-root.mode-list .ct-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }

/* Position badge + head. */
.ct-detail-head { align-items: flex-start; }
.ct-detail-head-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-detail-head-actions { display: inline-flex; gap: 8px; flex: none; }
.ct-root.mode-list .ct-skip { display: none; }   /* in List mode you just click the next queue row */
.ct-pos { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--amber); display: inline-flex; align-items: center; gap: 5px; }

/* Pin the reveal-amount field so it can't stretch and shove "Log it" sideways when the input
   blurs — the button used to jump on reveal, inviting a misclick. */
.oc-amount-row .ask-field { flex: none; }
.oc-amount-row .ask-field input { width: 9ch; }

/* Warm hook — who they are, why they'd give, and a plain-language opener. */
.ct-hook { margin: 0 0 14px; }
.ct-hook-who { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.ct-hook-why { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 7px; }
.ct-hook-sig { font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.ct-hook-sig strong { color: var(--ink); }
.ct-hook-sig.good, .ct-hook-sig.good strong { color: var(--green); }
.ct-hook-sig a { color: var(--amber); text-decoration: none; font-weight: 600; }
.ct-hook-say { margin-top: 10px; font-size: 14px; color: var(--ink); background: var(--surface-2);
    border-left: 3px solid var(--amber); border-radius: 8px; padding: 9px 13px; display: flex;
    gap: 8px; align-items: flex-start; }
.ct-hook-say i { color: var(--amber); margin-top: 1px; flex: none; }

/* Queue close (X) — only inside the Focus drawer. */
.ct-queue-close { display: none; position: absolute; top: 8px; right: 8px; border: 0; background: none;
    color: var(--muted); cursor: pointer; font-size: 20px; padding: 4px; border-radius: 8px; line-height: 1; }
.ct-queue-close:hover { background: var(--surface-2); color: var(--ink); }

/* Browse-list drawer (Focus mode): the queue slides in over a backdrop. */
.ct-drawer-backdrop { display: none; }
.ct-root.mode-focus.drawer-open .ct-drawer-backdrop { display: block; position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45); z-index: 300; }
.ct-root.mode-focus.drawer-open .ct-queue { display: flex; position: fixed; top: 0; left: 0; bottom: 0;
    width: 360px; max-width: 88vw; max-height: 100vh; z-index: 310; border-radius: 0;
    box-shadow: var(--shadow-lg, var(--shadow)); animation: ctDrawerIn .18s ease; }
.ct-root.mode-focus.drawer-open .ct-queue-close { display: block; }
@keyframes ctDrawerIn { from { transform: translateX(-100%); } to { transform: none; } }

/* Celebration — a call became money. Fires a centered card + pops the emoji. */
.ct-celebrate { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -8px); z-index: 400;
    pointer-events: none; opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.ct-celebrate.show { opacity: 1; transform: translate(-50%, 0); }
.ct-celebrate-card { display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--surface); border: 1px solid var(--line-2); border-top: 4px solid var(--green);
    border-radius: 16px; box-shadow: var(--shadow-lg, var(--shadow)); padding: 18px 36px; }
.ct-celebrate-emoji { font-size: 34px; animation: ctPop .5s ease; }
.ct-celebrate-amt { font-size: 32px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.ct-celebrate-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
@keyframes ctPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 800px) {
    .ct-root.mode-list .ct-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ct-score-num { font-size: 24px; }
    .ct-root.mode-focus .ask-num { font-size: 40px; }
    .ct-topbar-right { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-score-cell.bump, .ct-celebrate-emoji, .ct-root.mode-focus.drawer-open .ct-queue { animation: none; }
    .ct-celebrate, .ct-goal-bar > span { transition: none; }
}

/* Bellows — the finance/fundraising sub-app identity (warm ember accent vs Foundry teal). */
.bellows-bar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin: -4px 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--amber); }
.bellows-brand { font-size: 20px; font-weight: 800; color: var(--amber); text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px; letter-spacing: .2px; }
.bellows-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.bellows-nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none;
    font-size: 14px; font-weight: 600; }
.bellows-nav a:hover { background: var(--surface-2); color: var(--ink); }
.bellows-nav a.active { background: var(--amber); color: #fff; }

/* Feature launcher — the left hamburger + searchable feature list (VAN-style). */
.feat-btn { background: none; border: 0; color: var(--ink); cursor: pointer; font-size: 20px;
    padding: 6px 9px; margin-right: 4px; border-radius: 8px; display: inline-flex; align-items: center; }
.feat-btn:hover { background: var(--surface-2); color: var(--teal); }
.feat-drawer { position: fixed; inset: 0; z-index: 300; }
.feat-drawer[hidden] { display: none; }
.feat-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.feat-panel { position: absolute; top: 0; left: 0; height: 100%; width: 350px; max-width: 88vw;
    background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow);
    display: flex; flex-direction: column; animation: featIn .16s ease; }
@keyframes featIn { from { transform: translateX(-100%); } to { transform: none; } }
.feat-search { display: flex; align-items: center; gap: 9px; padding: 14px 14px; border-bottom: 1px solid var(--line); }
.feat-search > i { color: var(--muted); font-size: 18px; }
.feat-search input { flex: 1; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.feat-esc { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
    border-radius: 6px; font-size: 12px; padding: 3px 8px; cursor: pointer; }

/* Docked sidebar (wide screens). Open by default and remembered, the way VoteBuilder's left nav
   behaves — so it has to make room for itself rather than sit on top of the page like a modal.

   The breakpoint is set by arithmetic, not taste: the top bar needs ~1162px for the hamburger,
   brand, nine nav sections (ten in GOTV season), committee chip and account menu. The top nav must stay visible at all
   times, so we only dock where BOTH fit — 1440px with a 260px rail and the committee chip capped.
   Narrower than that, the sidebar opens as an overlay instead and the page keeps its full width. */
@media (min-width: 1440px) {
    .nav-open .feat-drawer:not([hidden]) { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 200; }
    .nav-open .feat-drawer .feat-backdrop { display: none; }
    .nav-open .feat-panel { position: fixed; width: 260px; box-shadow: none; animation: none; }
    /* Push the chrome and the page over, rather than overlapping them. */
    .nav-open .topbar { margin-left: 260px; }
    /* R10 (v3.8.0): CENTER the content column in the space beside the docked rail instead of pinning
       it to the rail — margin-left:260 with margin-right:auto dumped ALL the slack into the right
       gutter (~480px of dead space on a 1920 screen). This splits it: left = 260 + half the leftover
       (so the column clears the 260px rail and then centers in what's left), right = the other half. */
    .nav-open .content { margin-left: calc(260px + (100% - 1440px) / 2); margin-right: auto; }
    .nav-open .feat-esc { display: none; }   /* Esc is a modal affordance; docked, it isn't one */
    /* The committee name is the most elastic thing up here — let it ellipsis rather than push the
       nav off the bar. Hovering still shows the full name via its title. */
    .nav-open .campaign-chip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Docking costs the bar 280px, so the nav needs its compact sizing here too — otherwise the
       items are wider than the box they were shrunk into and the last one spills out underneath
       the committee chip. (min-width:0 lets the box shrink; nothing stops the CONTENT overflowing,
       and we can't clip it without killing the dropdowns again — so it has to genuinely fit.) */
    .nav-open .mainnav { gap: 1px; }
    .nav-open .mainnav .nav-link { padding: 8px 7px; font-size: 14px; }
}
.feat-list { overflow-y: auto; padding: 6px 8px 16px; flex: 1; }
.cmd-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    margin: 14px 10px 3px; font-weight: 700; }
.cmd-item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 8px;
    color: var(--ink); text-decoration: none; font-size: 15px; }
.cmd-item:hover, .cmd-item.hi { background: var(--surface-2); color: var(--teal-dark); }
.cmd-item > i { font-size: 18px; color: var(--muted); width: 20px; text-align: center; flex: none; }
.cmd-item:hover > i, .cmd-item.hi > i { color: var(--teal); }
.cmd-item .nav-badge { margin-left: auto; }
.feat-empty { color: var(--muted); padding: 24px; text-align: center; }
[data-theme="dark"] .cmd-item:hover, [data-theme="dark"] .cmd-item.hi { color: var(--teal-100); }
.row-done td { color: var(--muted); }

/* Walk packet (print) */
.packet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    border-bottom: 2px solid var(--line-2); padding-bottom: 12px; margin-bottom: 14px; }
.packet-head h1 { margin: 0 0 4px; font-size: 22px; }
.packet-meta { margin: 0; font-size: 13px; color: var(--ink-2); }
/* The code reads like a boarding pass — a volunteer types it into Outreach to walk this packet
   on a phone, so it has to survive a photocopy and be readable at arm's length. */
.packet-code { flex: none; text-align: center; border: 2px solid var(--line-2);
    border-radius: var(--radius); padding: 8px 16px; }
.packet-code-label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); }
.packet-code code { display: block; font-size: 26px; font-weight: 700; letter-spacing: .18em;
    background: none; border: none; padding: 2px 0; color: var(--ink); }
.packet-code-help { display: block; font-size: 9px; color: var(--muted); }
.packet-key { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px;
    margin-bottom: 12px; font-size: 12px; display: flex; gap: 10px; align-items: baseline; }
.packet-key strong { white-space: nowrap; }
.packet-table { width: 100%; border-collapse: collapse; }
.packet-table th, .packet-table td { font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); }
.markcell { min-width: 70px; }
.packet-runfoot { display: none; }

/* Folders section */
.folder-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 16px; }
.folder-card > h2 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.folder-card > h2 i { color: var(--teal); }
.folder-card.unfiled > h2 i { color: var(--muted); }
.folder-table { width: auto; min-width: 60%; background: none; border: none; }
.folder-table td { border-bottom: 1px solid var(--line); padding: 8px 14px 8px 0; }
.folder-table tr:last-child td { border-bottom: none; }
.folder-table tbody tr:hover td { background: none; }
.ftype { width: 92px; }
.type-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.type-tag.type-0 { background: var(--teal-50); color: var(--teal-800); }
.type-tag.type-1 { background: #eff6ff; color: #1d4ed8; }
.type-tag.type-2 { background: #f5f3ff; color: #6d28d9; }

/* Save-as type chooser */
.save-type { display: flex; flex-direction: column; gap: 8px; }
.save-type .chk { font-weight: 400; }
.folder-picker .new-folder-input { width: 100%; }

/* Drag-and-drop script builder */
.sortable-el { transition: border-color .12s, opacity .12s; }
.sortable-head { display: flex; align-items: center; gap: 8px; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.sortable-el.dragging { opacity: .5; border-color: var(--teal); box-shadow: var(--shadow); }
details.addel > summary { cursor: pointer; font-weight: 600; padding: 12px 16px; list-style: none; }
details.addel > summary::-webkit-details-marker { display: none; }

/* Outreach roster heading */
.ob-list-head { font-size: 15px; margin: 16px 0 8px; }

/* My Turfs list */
.turf-table .folder-row td { background: var(--surface-2); font-weight: 600; color: var(--ink-2); border-top: 1px solid var(--line); }
.turf-table .folder-row td i { color: var(--muted); margin-right: 4px; }
.turf-table .turf-name { padding-left: 26px; }
.row-actions a { font-size: 18px; color: var(--ink-2); margin-right: 12px; }
.row-actions a:hover { color: var(--teal-dark); text-decoration: none; }

/* Turf cutting */
.turf-cut { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
#turfside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; position: sticky; top: 76px; }
#turfside h3 { margin: 0 0 8px; font-size: 15px; }
.turf-row { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.turf-row.remaining { font-weight: 600; border-bottom: none; margin-top: 6px; color: var(--teal-dark); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.packet-script .script-block { font-size: 13px; }
.ck { display: inline-block; margin: 0 10px 2px 0; white-space: nowrap; font-size: 12px; }

@media print {
  /* Dark is the default theme and printers don't print page backgrounds — without this reset a
     walk packet comes out as near-white text on white paper. Force ink-on-paper regardless of
     which theme the director happens to be using on screen. */
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f4f7;
    --ink: #000000; --ink-2: #1a1a1a; --muted: #444444;
    --line: #bbbbbb; --line-2: #888888;
    --teal: #0f766e; --teal-dark: #0f766e; --teal-50: #ffffff; --teal-100: #e6fffb;
    --shadow: none; --shadow-sm: none;
  }
  body { background: #fff !important; color: #000 !important; }
  .topbar, .packet-controls, .feat-drawer, .impersonate-bar, .impersonate-ring, .messages { display: none !important; }
  .content { max-width: none; padding: 0; }
  .script-block { background: none; border: 1px solid #999; }
  /* Never clip a printed page: scroll boxes exist for screens, paper has no scrollbar. */
  .table-scroll, .grid-scroll, .multi-opts { max-height: none !important; overflow: visible !important; }
  .table-scroll thead th, .grid-entry th, .grid-entry .who { position: static !important; box-shadow: none !important; }
  .card, .panel, .setup-card, .pb-card, .empty-state { box-shadow: none !important; border-color: #bbb !important; }
  a { color: #000 !important; text-decoration: none !important; }
  tr, .ob-hh, .pb-card, .card { break-inside: avoid; }

  /* Walk packet: leave room at the foot of every sheet and pin the code strip into it. A packet
     gets split between volunteers, so a loose page must still name its turf and its code. */
  @page { margin: 12mm 10mm 16mm; }
  .packet-runfoot { display: block; position: fixed; bottom: 0; left: 0; right: 0;
      border-top: 1px solid #999; padding-top: 3px; font-size: 10px; color: #333; }
  .packet-runfoot strong { letter-spacing: .12em; }
  .packet-head { break-after: avoid; }
  .packet-key { break-inside: avoid; }
  .packet-table thead { display: table-header-group; }  /* repeat column headers per page */
  .packet-table tfoot { display: table-footer-group; }
}

/* Builder side column (VAN-style) */
.builder-side-col { display: flex; flex-direction: column; gap: 12px; }
/* The WHOLE right column is sticky and capped to the viewport (it used to be only the steps card,
   which, once 3-4 steps made it taller than the screen, stayed stuck and slid over Run Search).
   Inside, only the step list shrinks + scrolls; Preview, counts and Run Search always stay visible. */
@media (min-width: 801px) {
  .builder-side-col { position: sticky; top: 76px; max-height: calc(100vh - 92px); }
  .builder-side { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
  .bsteps { min-height: 60px; overflow-y: auto; flex: 0 1 auto; margin: 0 -4px; padding: 0 4px; }
  .side-actions { flex: none; }
}
.bside-defaults { margin: 0; font-size: 13px; }
.builder-side h3 .count-pill { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; margin-left: 4px; vertical-align: 1px; }
.bstep { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.bstep > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; }
.bstep > summary::-webkit-details-marker { display: none; }
.bstep > summary::before { content: "▸"; color: var(--muted); flex: none; }
.bstep[open] > summary::before { content: "▾"; }
.bstep-title { flex: 1; min-width: 0; }
.bstep-peek { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bstep[open] .bstep-peek { display: none; }
.bstep-acts { flex: none; display: flex; gap: 8px; }
.bstep ul { margin: 0 10px 8px 34px; padding: 0; }
.bstep-empty { margin: 0 10px 8px 28px; }
.bstep-active { border-color: var(--teal); background: var(--teal-50); }
.step-indicator { margin: 16px 0 8px; }
.step-active { border-color: var(--teal); background: var(--teal-50); }
.preview-hint { text-align: center; margin: 10px 0; }
.side-actions { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; }
.addstep-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.addstep-row .run-btn { flex: 1; }
.addstep { position: relative; }
.addstep > summary { list-style: none; cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 14px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.addstep > summary::-webkit-details-marker { display: none; }
.addstep-menu { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; min-width: 170px; display: flex; flex-direction: column; }
.addstep-menu .link-btn { text-align: left; text-decoration: none; padding: 8px 10px; border-radius: 6px; color: var(--ink); }
.addstep-menu .link-btn:hover { background: var(--surface-2); }

/* ============================ Responsive ============================ */
/* Ten sections (nine, plus GOTV in season), the committee chip and the account menu need ~1240px;
   narrower than that the nav folds behind the menu button rather than sliding under the chip. */
@media (max-width: 1259px) {
  .nav-toggle { display: inline-flex; }
  .brand { margin-right: auto; }
  .nav-collapse {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px; max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .nav-cb:checked ~ .nav-collapse { display: flex; }
  .mainnav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 11px 12px; font-size: 15px; }
  .nav-group { position: static; }
  .nav-group > summary { justify-content: space-between; }
  .nav-menu { position: static; box-shadow: none; border: none; border-radius: 0;
    padding: 2px 0 6px 22px; min-width: 0; }
  .userbox { margin-left: 0; flex-direction: column; align-items: stretch; gap: 8px;
    margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
  .campaign-chip { max-width: none; justify-content: center; }
  .acct { width: 100%; }
  .acct > summary { width: 100%; justify-content: flex-start; border: none; padding: 9px 12px; }
  .acct-menu { position: static; box-shadow: none; border: none; padding: 2px 0 0 22px; min-width: 0; }
}

@media (max-width: 800px) {
  .builder { grid-template-columns: 1fr; }
  .turf-cut { grid-template-columns: 1fr; }
  #turfside { position: static; }
  .content { padding: 20px 16px; }
  .preview-counts { grid-template-columns: repeat(2, 1fr); }
}

/* Bulk Upload hub */
.bulk-sec { margin-top: 16px; }
.bulk-sec .card { max-width: 640px; }
.bulk-sec h2 { font-size: 17px; margin: 0 0 12px; }
.src-choice { display: flex; flex-direction: column; gap: 6px; }
.src-choice .radio { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.src-choice .radio input { width: auto; margin: 0; }

/* Coverage bar (canvass results) */
.cov-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px;
  background: var(--line); vertical-align: middle; overflow: hidden; margin-right: 6px; }
.cov-fill { display: block; height: 100%; background: var(--teal, #0d9488); border-radius: 4px; }

/* Login tagline (Foundry / Silver Basin Strategies) */
.login-wrap .tagline { margin-top: -6px; margin-bottom: 18px; font-style: italic;
  color: var(--muted, #64748b); font-size: 14px; }

/* Settings — theme picker */
.theme-choice { display: flex; gap: 12px; margin: 8px 0 4px; flex-wrap: wrap; }
.theme-opt { cursor: pointer; }
.theme-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-swatch { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px;
  border-radius: var(--radius); border: 2px solid var(--line-2); font-weight: 600; }
.swatch-dark { background: #0b111f; color: #e6eaf2; }
.swatch-light { background: #f1f5f9; color: #0f172a; }
.theme-opt input:checked + .theme-swatch { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }

/* Version stamp in the account menu */
.acct-ver { padding: 8px 14px 10px; font-size: 12px; border-top: 1px solid var(--line); }

/* Donor database — filter panel + list meta */
.donor-filters { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.donor-filters .filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.donor-filters input[type=text], .donor-filters select { padding: 7px 10px; }
.donor-filters .grow { flex: 1; min-width: 220px; }
.donor-filters .narrow { max-width: 120px; }
.donor-filters .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
    color: var(--muted); white-space: nowrap; }
.list-meta { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.btn.sm { padding: 5px 10px; font-size: 13px; }

/* Fundraising goal card (dashboard) */
.goal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 16px 20px; margin: 18px 0; }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
    gap: 6px; margin-bottom: 10px; }
.goal-label { font-weight: 600; color: var(--ink); }
.goal-figures { font-size: 15px; }
.goal-bar { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.goal-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width .3s; }
.goal-pct { font-size: 12px; margin-top: 6px; }

/* Coordination (coordinated campaigns) */
.field { display: block; margin-bottom: 14px; }
.field > span:first-child { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; }
.field input[type=text], .field select { width: 100%; padding: 8px 10px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; margin: 6px 0; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill.ok, .pill.good { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent); }
ul.tidy { margin: 6px 0 0; padding-left: 18px; }
ul.tidy li { margin: 3px 0; }

/* --- Power dialer magic-link invites (R1b) --------------------------------
   Redemption page for volunteers (dial-redeem, dial-expired) + director's
   invite-management page (invite-card, invite-head, invite-actions, claimants).
   Uses the same tokens the rest of the app is on so a theme change flows
   through without a redeploy. */
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--red) 85%, black); }

.dial-expired { max-width: 440px; margin: 60px auto 24px; padding: 0 16px; text-align: center; }
.dial-expired .empty-icon { font-size: 44px; color: var(--muted); margin-bottom: 12px; }
.dial-expired h1 { margin: 0 0 8px; font-size: 22px; }

.row-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-top: 12px; }
.row-form label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px;
    font-weight: 600; font-size: 14px; }
.row-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); }
.row-form .fine, p.fine { font-size: 13px; color: var(--muted); }

.invite-card { margin-top: 14px; }
.invite-card.invite-dead { opacity: 0.65; }
.invite-head { display: flex; justify-content: space-between; gap: 12px; align-items: start;
    flex-wrap: wrap; }
.invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-url { margin-top: 12px; padding: 10px 12px; background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.invite-url code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

table.claimants { margin-top: 10px; }
table.claimants th, table.claimants td { padding: 6px 10px; font-size: 14px; }

/* --- Browser power dialer (R1c, redesigned v2.36.4) -------------------
   Volunteer-facing surface. Warm, generous whitespace, primary action
   dominant, disposition buttons color-coded by tone (positive / neutral /
   negative) so a caller isn't picking from a grid of look-alikes. */

.dialer { max-width: 640px; margin: 0 auto; padding: 20px 16px 40px; }

/* Ready screen — the first thing the volunteer sees. Feels like a warm
   welcome, not a HUD. */
.d-ready { text-align: center; padding: 32px 16px; }
.d-ready-icon { font-size: 56px; color: var(--teal); margin-bottom: 8px; }
.d-ready h1 { font-size: 28px; margin: 6px 0 8px; }
.d-ready-body { color: var(--muted); max-width: 440px; margin: 0 auto 24px;
    font-size: 15px; line-height: 1.5; }
.d-ready-fine { max-width: 380px; margin: 14px auto 0; }

/* The primary action button is BIG, teal, and unmistakable. */
.d-primary { width: 100%; max-width: 380px; padding: 16px 22px; font-size: 17px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--teal) 25%, transparent); }
.d-primary.danger { box-shadow: 0 2px 8px color-mix(in srgb, var(--red) 25%, transparent); }

/* Card layout: no boxes-inside-boxes. Each section breathes. */
.d-card { display: flex; flex-direction: column; gap: 22px; }

/* Small status crumbs — state + timer + progress on one quiet line, not a HUD. */
.d-crumbs { display: flex; align-items: baseline; gap: 12px; font-size: 13px;
    color: var(--muted); flex-wrap: wrap; }
.d-state { font-weight: 600; color: var(--ink-2); }
.d-timer { font-variant-numeric: tabular-nums; }
.d-progress { margin-left: auto; }

/* The person you're calling. Name is a proper headline. */
.d-person h1 { font-size: 28px; margin: 0 0 6px; line-height: 1.2; }

/* v2.38.6: highlight-and-fade cue that fires when a new voter loads. Even a
   volunteer scrolled below the fold catches the flash in their peripheral
   vision when they scroll back up. Pairs with a scrollIntoView() call in
   dialer.js so this is the second cue, not the only one. */
@keyframes dFlashPulse {
    0%   { background: color-mix(in srgb, var(--teal) 22%, transparent);
           box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 22%, transparent); }
    60%  { background: color-mix(in srgb, var(--teal) 12%, transparent);
           box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 10%, transparent); }
    100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
.d-person.d-flash {
    animation: dFlashPulse 1.6s ease-out;
    border-radius: 10px; padding: 8px 10px; margin: -8px -10px 0;
}
@media (prefers-reduced-motion: reduce) {
    .d-person.d-flash { animation: none; }
}

.d-person-meta { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.d-person-meta span + span { margin-left: 10px; }
.d-person-phone { font-size: 20px; font-weight: 600; margin: 0;
    color: var(--ink); display: flex; align-items: center; gap: 8px; }
.d-person-phone .ti { color: var(--teal); font-size: 22px; }

/* Actions: primary call/hangup dominates; skip + mute sit modestly below. */
.d-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.d-actions-secondary { display: flex; gap: 10px; margin-top: 4px; }

/* Script section — labeled softly, no card border shouting at the volunteer. */
.d-script-label, .d-outcome-label { font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
    margin-bottom: 6px; }
.d-script { padding-top: 6px; border-top: 1px solid var(--line); }

/* Disposition buttons — flow, not grid. Color-coded by what happened. */
.d-outcome { padding-top: 6px; border-top: 1px solid var(--line); }
.d-outcome-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.d-outcome-btn { padding: 12px 18px; font: inherit; font-size: 15px;
    border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink); cursor: pointer;
    transition: background .12s, border-color .12s, transform .06s; }
.d-outcome-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
.d-outcome-btn:active { transform: translateY(1px); }

/* Positive outcomes — green tint */
.d-outcome-btn.d-tone-canvassed,
.d-outcome-btn.d-tone-left-message {
    background: color-mix(in srgb, var(--green) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--green) 40%, var(--line));
    color: var(--green);
}
.d-outcome-btn.d-tone-canvassed:hover,
.d-outcome-btn.d-tone-left-message:hover {
    background: color-mix(in srgb, var(--green) 16%, var(--surface));
}
/* Neutral outcomes stay default — no color, they're the vast majority */
/* Refusal / DNC — amber */
.d-outcome-btn.d-tone-refused,
.d-outcome-btn.d-tone-not-interested,
.d-outcome-btn.d-tone-do-not-call {
    background: color-mix(in srgb, var(--amber) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--amber) 40%, var(--line));
    color: var(--amber);
}
/* Bad-number type — red-ish, quieter */
.d-outcome-btn.d-tone-wrong-number,
.d-outcome-btn.d-tone-disconnected,
.d-outcome-btn.d-tone-deceased {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 30%, var(--line));
}

.d-outcome-more { margin-top: 6px; }
.d-outcome-more summary { color: var(--muted); font-size: 14px; cursor: pointer;
    padding: 4px 0; }
.d-outcome textarea#d-note { width: 100%; margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
    resize: vertical; }
.d-outcome textarea#d-note::placeholder { color: var(--muted); }

/* End of queue — celebratory, not clinical. */
.d-done { text-align: center; padding: 40px 20px; }
.d-done-icon { font-size: 60px; color: var(--amber); margin-bottom: 8px; }
.d-done h1 { font-size: 30px; margin: 6px 0 10px; }
.d-done-body { color: var(--muted); max-width: 460px; margin: 0 auto 24px;
    font-size: 16px; line-height: 1.5; }
.d-done-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Redemption page — warmer welcome, less form-y. */
.dial-redeem { max-width: 440px; margin: 40px auto 24px; padding: 0 20px; }
.dial-redeem .dr-eyebrow { font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.08em; margin: 0 0 4px; }
.dial-redeem h1 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; }
.dial-redeem .dr-intro { color: var(--ink-2); font-size: 16px; line-height: 1.5;
    margin: 0 0 24px; }
.dial-redeem .dr-form { display: flex; flex-direction: column; gap: 14px; }
.dial-redeem .dr-form label { display: flex; flex-direction: column; gap: 4px;
    font-weight: 600; font-size: 14px; }
.dial-redeem .dr-form input { padding: 12px 14px; font-size: 16px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink); }
/* v3.0.0: removed the one-off .dial-redeem input:focus outline — fields use the global
   box-shadow focus ring; interactive controls use the :focus-visible outline. */
.dial-redeem .dr-go { margin-top: 6px; padding: 14px 22px; font-size: 17px; }
.dial-redeem .dr-fine { margin: 8px 0 0; font-size: 13px; }
.dial-redeem .err { color: var(--red); font-size: 13px; font-weight: 400; }

/* Ghost button — quieter than secondary, for tertiary actions like Skip / End. */
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn.ghost:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }

/* Caller-ID pool table (R2). */
.calleridnum-table { width: 100%; margin-top: 12px; }
.calleridnum-table th, .calleridnum-table td { padding: 8px 10px; font-size: 14px; vertical-align: middle; }
.calleridnum-inactive { opacity: 0.55; }
.calleridnum-flagged { background: color-mix(in srgb, var(--red) 8%, transparent); }
.pool-bar { display: inline-block; width: 100px; height: 6px; background: var(--surface-2);
    border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.pool-bar-fill { height: 100%; background: var(--green); transition: width .2s; }
.pool-bar-fill.pool-bar-warm { background: var(--amber); }
.pool-bar-fill.pool-bar-hot { background: var(--red); }

/* --- Call-time sticky-note messages + live manager (v2.35) ------------ */
/* v3.4.1 (R6 pt2): fixed top-right so a sticky note arriving mid-dial slides in from the side
   instead of shoving the whole desk down ~70px while the pointer is on "Gave now". */
.ct-msg-stack { position: fixed; top: 72px; right: 20px; z-index: 50; margin: 0;
    width: min(360px, calc(100vw - 40px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ct-msg-stack .ct-msg { pointer-events: auto; }
.ct-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    background: color-mix(in srgb, var(--teal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
    border-radius: 10px; animation: ct-msg-in .18s ease-out; }
.ct-msg-urgent { background: color-mix(in srgb, var(--amber) 18%, transparent);
    border-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.ct-msg-body { flex: 1; font-size: 15px; line-height: 1.35; }
.ct-msg-meta { font-size: 12px; margin-top: 4px; }
.ct-msg-dismiss { border: 0; background: transparent; color: var(--muted);
    cursor: pointer; padding: 6px 8px; border-radius: 6px; font-size: 18px; }
.ct-msg-dismiss:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
@keyframes ct-msg-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* v2.38.7: Call-time MANAGER pane. One pane per active caller — leads with
   the caller's identity + a timer, then the sticky-note compose (so the
   director never has to scroll to send one), then a two-column body:
   LEFT = the same donor pane the caller is looking at (reused partial in
   readonly mode); RIGHT = this session's activity log. Collapses to one
   column on narrow screens so it stays usable on a laptop half-screen. */
.ct-mgr { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 16px;
    box-shadow: var(--shadow-sm); }
.ct-mgr-slow { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.ct-mgr-head { display: flex; justify-content: space-between; gap: 16px;
    align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.ct-mgr-timer { text-align: right; min-width: 180px; font-variant-numeric: tabular-nums; color: var(--muted); }
.ct-mgr-timer-lbl { font-size: var(--t-xs); }
.ct-mgr-timer-num { font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; }  /* v3.5.1 (R7): size lives here now, not inline */
/* Above 5 min the timer becomes an actual alarm — grows + an amber pill label the
   director catches peripherally while scanning several panes. */
.ct-mgr-timer-slow { color: var(--amber); }
.ct-mgr-timer-slow .ct-mgr-timer-num { font-size: var(--t-3xl); }
.ct-mgr-timer-slow .ct-mgr-timer-lbl { display: inline-flex; align-items: center; gap: 4px;
    color: var(--amber); font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 16%, transparent); }
.ct-mgr-compose { display: flex; gap: 8px; align-items: center;
    padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ct-mgr-compose input[type=text] { flex: 1 1 320px; padding: 9px 11px;
    border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--surface); color: var(--ink); font-size: 14.5px; }
.ct-mgr-urgent { display: flex; align-items: center; gap: 6px; font-size: 13px;
    color: var(--muted); flex: 0 0 auto; }
.ct-mgr-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 18px; margin-top: 8px; }  /* v3.5.1 (R7): activity log is the wider column now */
@media (max-width: 1100px) { .ct-mgr-body { grid-template-columns: 1fr; } }
.ct-mgr-section-lbl { font-size: 13px; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 6px; }
.ct-mgr-section-lbl .ti { color: var(--teal); }
.ct-mgr-donor, .ct-mgr-log { min-width: 0; }
.ct-mgr-log-list { list-style: none; padding: 0; margin: 0;
    max-height: 620px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ct-mgr-log-item { display: grid; grid-template-columns: 84px 1fr; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ct-mgr-log-item:last-child { border-bottom: 0; }
.ct-mgr-log-when { font-size: 12px; font-variant-numeric: tabular-nums;
    white-space: nowrap; padding-top: 2px; }
.ct-mgr-log-body strong { margin-right: 6px; }
.ct-mgr-log-amt { display: inline-block; margin-left: 8px; font-size: 13px;
    color: var(--muted); }
.ct-mgr-log-amt.good { color: var(--green); font-weight: 600; }
.ct-mgr-log-note { margin-top: 4px; font-size: 13px; color: var(--muted);
    font-style: italic; }

/* ===== Call-time Monitor: the discrete call-list peek ===== */
.ct-mgr-list { margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ct-mgr-list > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: var(--t-sm);
    display: flex; align-items: center; gap: 8px; list-style: none; }
.ct-mgr-list > summary::-webkit-details-marker { display: none; }
.ct-mgr-list > summary::after { content: "\ea5f"; font-family: "tabler-icons"; font-weight: 400;
    margin-left: auto; color: var(--muted); transition: transform .12s; }
.ct-mgr-list[open] > summary::after { transform: rotate(90deg); }
.ct-mgr-list-body { list-style: none; margin: 0; padding: 0 0 4px; max-height: 340px; overflow-y: auto; }
.cml-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
    padding: 7px 14px; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.cml-row.is-current { background: var(--teal-50); }
.cml-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cml-ask { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; }
.cml-empty { padding: 10px 14px; }

/* ================= v3 R8: voter record (voter_detail) ================= */
/* "What we call them": the fused name .unit + Save at the row's end. */
.vr-name-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
/* Address add/edit: an explicit grid (kind / street / city / state / zip / save) — replaces the
   .add-row flex arithmetic that rendered City wider than Street and the width:56/90px magic numbers. */
.vr-addr-row { display: grid; grid-template-columns: 7rem minmax(0,1fr) 20ch 5ch 11ch auto;
    gap: var(--s2); align-items: center; margin-top: var(--s3); }
.vr-addr-row > input, .vr-addr-row > select { width: 100%; }
@media (max-width: 700px){
  .vr-addr-row { grid-template-columns: 1fr 1fr; }
  .vr-addr-row > button { grid-column: 1 / -1; }
}

/* --- Attempt log (QC) ------------------------------------------------------
   One row per attempt with its exact time; a header row per day. Quick door
   attempts get an amber edge so a run of them reads at a glance. */
.fb-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px; padding-bottom: 8px; }
.log-table td { white-space: nowrap; }
.log-table .log-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.log-table tr.log-day td { background: var(--surface-2); border-top: 1px solid var(--line); padding-top: 10px; }
.log-table tr.log-quick td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.log-flag { display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 999px; font-size: 11.5px;
    font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.log-flag.quick { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.log-legend { font-size: 12.5px; margin-top: 14px; line-height: 1.9; }

/* ==== Texting (v3.8.18): campaign builder, results, Conversations inbox ===================
   Scale to Win's flow, Foundry-native: campaigns start from a list, tags write the voter
   record. All .tx-* and tokens only, so both themes work. */
.tx-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: var(--s3) 0 var(--s5); }
.tx-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; color: var(--muted);
    font-size: var(--t-sm); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tx-tabs a:hover { color: var(--ink); }
.tx-tabs a.on { color: var(--teal-dark); border-bottom-color: var(--teal); }
.tx-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--teal);
    color: #fff; font-size: var(--t-xs); line-height: 18px; text-align: center; font-weight: 700; }
.tx-note { padding: 8px 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
    font-size: var(--t-sm); color: var(--ink-2); margin: var(--s3) 0; }
.tx-note.warn { background: color-mix(in srgb, var(--amber) 10%, transparent);
    border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--ink); }
.tx-warn-text { color: var(--amber); }
.tx-tight { margin: 4px 0 10px; }
.tx-gap { margin-top: var(--s4); }
.tx-empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.tx-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); }
.tx-filterbar select { width: auto; max-width: 220px; }
.tx-camps td.num, .tx-camps th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
td.actions form { display: inline; margin: 0; }
.tx-camps .pill { margin-left: 6px; }
.tx-mini-bar { width: 120px; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
    display: inline-block; vertical-align: middle; margin-right: 6px; }
.tx-mini-bar span { display: block; height: 100%; background: var(--teal); }
.tx-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; margin-bottom: var(--s4); }

/* builder: step rail + body */
.tx-builder { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.tx-steps { list-style: none; margin: 0; padding: 0; position: sticky; top: 70px; }
.tx-steps li a, .tx-steps li > span { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius);
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.tx-steps li a:hover { background: var(--surface-2); color: var(--ink); }
.tx-steps li.on a, .tx-steps li.on > span { background: var(--teal-50); color: var(--teal-dark); }
.tx-step-n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-flex;
    align-items: center; justify-content: center; font-size: var(--t-xs); flex: none; }
.tx-steps li.on .tx-step-n { border-color: var(--teal); background: var(--teal); color: #fff; }
.tx-steps li.done:not(.on) .tx-step-n { border-color: var(--teal); color: var(--teal-dark); font-size: 0; }
.tx-steps li.done:not(.on) .tx-step-n::after { content: "\2713"; font-size: 12px; }
.tx-step-body h2 { margin-top: 0; }
.tx-rule { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-size: var(--t-sm); }
.tx-rule input[type=number] { display: inline-block; margin: 0 4px; }
.tx-funnel-total { font-size: var(--t-lg); margin: 4px 0 12px; }
.tx-funnel-total .num { font-size: var(--t-2xl); font-weight: 700; color: var(--ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.tx-funnel-rows { width: 100%; border: 0; box-shadow: none; }
.tx-funnel-rows td { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); background: none; }
.tx-funnel-rows td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tx-funnel-rows tr.minus td { color: var(--muted); }
.tx-spin { display: inline-block; animation: tx-spin 1s linear infinite; }
@keyframes tx-spin { to { transform: rotate(360deg); } }
.tx-pulse { animation: tx-pulse 1.4s ease-in-out infinite; }
@keyframes tx-pulse { 50% { opacity: .35; } }

/* composer + phone preview */
.tx-compose { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: var(--s4); align-items: start; }
.tx-compose-side { display: flex; flex-direction: column; gap: var(--s4); }
.tx-compose-side h3 { margin: 0 0 4px; font-size: var(--t-md); }
.tx-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tx-fields .btn { font-family: var(--mono); }
#tx-msg { width: 100%; font-size: var(--t-md); line-height: 1.5; }
.tx-meter { font-size: var(--t-sm); color: var(--muted); margin-top: 6px; min-height: 1.4em; }
.tx-meter.warn { color: var(--amber); }
.tx-file { position: relative; overflow: hidden; cursor: pointer; }
.tx-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tx-phone { border: 1px solid var(--line); border-radius: 22px; background: var(--surface-2); overflow: hidden; }
.tx-phone-head { padding: 8px 14px; font-size: var(--t-xs); color: var(--muted); border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 8px; }
.tx-phone-body { padding: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-height: 460px; overflow: auto; }
.tx-phone-sm { margin-top: var(--s4); }
.tx-phone-sm .tx-phone-body { max-height: 320px; }
.tx-mms { max-width: 220px; max-height: 260px; border-radius: 14px; object-fit: cover; display: block; }

/* message bubbles */
.tx-bubble { max-width: 85%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere;
    font-size: var(--t-sm); line-height: 1.45; }
.tx-bubble.out { align-self: flex-end; background: var(--teal-100); color: var(--teal-800); border-bottom-right-radius: 5px; }
.tx-bubble.in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; }
.tx-bubble.empty { opacity: .55; font-style: italic; }
.tx-convo .tx-bubble { white-space: normal; }           /* markup inside; only the text keeps its breaks */
.tx-bubble-text { white-space: pre-wrap; }
.tx-bubble-meta { font-size: var(--t-xs); opacity: .7; margin-top: 4px; }
.tx-bubble .tx-mms { margin-bottom: 6px; }
.tx-marker { align-self: stretch; text-align: center; font-size: var(--t-xs); color: var(--muted); margin: 10px 0 2px; position: relative; }
.tx-marker::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.tx-marker span { position: relative; background: var(--surface-2); padding: 0 8px; }

/* review + launch */
.tx-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 8px; cursor: pointer; font-weight: 400; }
.tx-mode:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.tx-mode input { margin-top: 3px; }
.tx-batch { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); margin-top: 6px; }
.tx-problems { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.tx-problems li { color: var(--amber); font-size: var(--t-sm); margin: 4px 0; }
.tx-launch-btn { font-size: var(--t-md); padding: 11px 22px; }
.tx-delete { margin-top: var(--s4); text-align: right; }

/* results */
.tx-progress-card { margin-bottom: var(--s4); }
.tx-progress-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tx-progress-title { font-weight: 700; font-size: var(--t-lg); color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.tx-progress-card .goal-fill { background: var(--teal); }
.tx-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s4); align-items: start; margin-bottom: var(--s4); }
.tx-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.tx-rate { text-align: center; padding: 6px 0 10px; }
.tx-rate .num { display: block; font-size: var(--t-2xl); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tx-rate .lbl { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tx-rate.bad .num { color: var(--red); }
.tx-rate-kv { grid-column: 1 / -1; }
.tx-rate-kv td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tx-section { margin-bottom: var(--s3); }
.tx-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.tx-section > summary::-webkit-details-marker { display: none; }
.tx-section > summary h2 { margin: 0; font-size: var(--t-md); }
.tx-section[open] > summary { margin-bottom: var(--s3); }
.tx-nowrap { white-space: nowrap; }
.tx-more { position: relative; }
.tx-more > summary { list-style: none; }
.tx-more > summary::-webkit-details-marker { display: none; }
.tx-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.tx-more-menu form { margin: 0; }
.tx-more-menu button, .tx-more-menu a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0;
    background: none; color: var(--ink); font: inherit; font-size: var(--t-sm); text-align: left; border-radius: 6px;
    cursor: pointer; text-decoration: none; }
.tx-more-menu button:hover, .tx-more-menu a:hover { background: var(--surface-2); }

/* Conversations inbox */
.tx-inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.tx-thread-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.tx-list-head { padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-xs); }
.tx-thread { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line);
    text-decoration: none; color: var(--ink); }
.tx-thread:hover { background: var(--surface-2); }
.tx-thread.on { background: var(--teal-50); box-shadow: inset 3px 0 0 var(--teal); }
.tx-thread-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tx-thread-snip { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-right: 6px; vertical-align: middle; }
.tx-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; }
.tx-thread-pane { min-width: 0; }
.tx-pane-empty { text-align: center; color: var(--muted); padding: 80px 20px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); }
.tx-pane-empty .ti { font-size: 34px; }
.tx-back { display: none; margin-bottom: 8px; }

/* one conversation */
.tx-convo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tx-convo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tx-convo-head h2 { margin: 0; font-size: var(--t-lg); }
.tx-convo-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); }
.tx-convo-main { padding: 12px 16px; border-right: 1px solid var(--line); min-width: 0; }
.tx-messages { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; min-height: 160px; overflow-y: auto;
    padding: 10px; background: var(--surface-2); border-radius: var(--radius); }
.tx-reply { margin-top: 10px; }
.tx-reply textarea { width: 100%; }
.tx-reply-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tx-reply-bar .form-actions { margin: 0; }
.tx-convo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tx-convo-actions form { margin: 0; }
.tx-danger-ghost { background: transparent; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); }
.tx-danger-ghost:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.tx-convo-side { padding: 12px 14px; min-width: 0; }
.tx-sidetabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.tx-sidetabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 7px 4px;
    font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--muted); cursor: pointer; }
.tx-sidetabs button.on { color: var(--teal-dark); border-bottom-color: var(--teal); }
.tx-sidepanel { max-height: 58vh; overflow-y: auto; }
.tx-side-h { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 10px 0 4px; font-weight: 700; }
.tx-canned-search { width: 100%; margin-bottom: 6px; }
.tx-canned { display: block; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 10px; margin-bottom: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.tx-canned:hover { border-color: var(--teal); background: var(--teal-50); }
.tx-canned strong { display: block; font-size: var(--t-sm); }
.tx-canned span { display: block; font-size: var(--t-xs); color: var(--muted); }
.tx-tagbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-tagbtns form { margin: 0; }
.tx-tagbtn { background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; font: inherit;
    font-size: var(--t-sm); color: var(--ink); cursor: pointer; }
.tx-tagbtn:hover { border-color: var(--teal); color: var(--teal-dark); }
.tx-tagbtn.on { background: var(--teal-50); border-color: var(--teal); color: var(--teal-dark); cursor: default; }
.tx-kv-tight td { padding: 5px 2px; font-size: var(--t-sm); }
.tx-note-form textarea { width: 100%; }
.tx-note-form .btn { margin-top: 6px; }
.tx-notecard { border-top: 1px solid var(--line); padding: 8px 0; }
.tx-notecard p { margin: 0 0 2px; white-space: pre-wrap; font-size: var(--t-sm); }
.pill.tx-pill-bad { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.pill.tx-pill-wait { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.tx-thread-nav { display: flex; justify-content: space-between; margin-bottom: 10px; }

/* texter (volunteer) screen */
.tx-batch-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; }
.tx-batch-row .tx-bubble { margin-top: 4px; max-width: 100%; }
.tx-big { font-size: 17px; padding: 12px 26px; }

@media (max-width: 900px) {
    .tx-builder { grid-template-columns: 1fr; }
    .tx-steps { position: static; display: flex; overflow-x: auto; gap: 4px; }
    .tx-steps li { flex: none; }
    .tx-two, .tx-compose, .tx-results, .tx-convo-grid { grid-template-columns: 1fr; }
    .tx-convo-main { border-right: 0; border-bottom: 1px solid var(--line); }
    .tx-inbox { grid-template-columns: 1fr; }
    .tx-inbox.has-selected .tx-thread-list { display: none; }
    .tx-inbox.has-selected .tx-back { display: inline-block; }
    body:has(.tx-inbox.has-selected) .tx-inbox-filters { display: none; }   /* a phone shows one thing at a time */
    .tx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .tx-tabs a { white-space: nowrap; }
    .tx-filterbar .seg { max-width: 100%; overflow-x: auto; }
    .tx-filterbar select { max-width: 100%; }
    .tx-messages { max-height: 60vh; }
    .tx-mini-bar { width: 60px; }
}

/* ---- Events (v3.11.0): shifts, RSVPs, door check-in, results --------------------------------- */
.ev-tabs { display: flex; gap: 4px; margin: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ev-tabs a { padding: 8px 14px; color: var(--muted); font-weight: 600; font-size: var(--t-sm);
    border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.ev-tabs a:hover { color: var(--ink); }
.ev-tabs a.on { color: var(--teal-dark); border-bottom-color: var(--teal); }
.ev-table td, .ev-table th { vertical-align: top; }
.ev-table .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.ev-when { white-space: nowrap; font-size: var(--t-sm); }
.ev-table td.ev-name { min-width: 18ch; }
@media (max-width: 700px) { .ev-when { white-space: normal; min-width: 12ch; } }
.ev-cancelled td { opacity: .6; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 var(--s2); color: var(--ink-2); }
.ev-meta i { color: var(--muted); }
.ev-desc { color: var(--ink-2); max-width: 70ch; margin: 0 0 var(--s3); }
.ev-h { font-size: var(--t-md); margin: 0 0 var(--s3); }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s4); align-items: start; margin: var(--s4) 0; }
.ev-side { display: grid; gap: var(--s4); }
.ev-shift + .ev-shift { border-top: 1px solid var(--line); margin-top: var(--s3); padding-top: var(--s3); }
.ev-shift-top { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.ev-shift-nums { font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.ev-good { color: var(--green); font-weight: 600; }
.ev-bar { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 6px 0; overflow: hidden; }
.ev-bar > span { display: block; height: 100%; background: var(--teal); max-width: 100%; }
.ev-shift-foot { font-size: var(--t-sm); }
.ev-inline { display: inline; margin: 0; }
.ev-link { display: flex; gap: var(--s2); align-items: center; margin: var(--s2) 0; flex-wrap: wrap; }
.ev-link input { flex: 1 1 220px; font-family: var(--mono); font-size: var(--t-xs); height: 32px; padding: 0 8px; }
.ev-actions { display: flex; gap: var(--s4); align-items: center; margin: 0; font-size: var(--t-sm); }
.ev-share-new > summary, .ev-add > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ev-share-new > summary::-webkit-details-marker, .ev-add > summary::-webkit-details-marker { display: none; }
.ev-share-form { display: grid; gap: var(--s2); margin: var(--s3) 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); }
.ev-share-form label { display: grid; gap: 4px; font-size: var(--t-sm); font-weight: 600; }
.ev-share-form label.chk { display: flex; gap: 6px; font-weight: 400; }
.ev-sharelink { padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.ev-sharelink.is-off { opacity: .6; }
.ev-filters { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s3) 0; }
.ev-filters select, .ev-filters input { width: auto; height: 32px; padding: 0 8px; }
.ev-add { margin: 0 0 var(--s3); }
.ev-add-form { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ev-contact { font-size: var(--t-sm); }
.ev-status { width: auto; height: 30px; padding: 0 6px; font-size: var(--t-sm); }
.ev-table tr.st-attended td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.ev-table tr.st-cancelled td, .ev-table tr.st-no_show td { color: var(--muted); }
/* the shift editor: one row per shift, columns sized by what they hold */
.ev-shifts { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.ev-shift-head, .ev-shift-row { display: grid; grid-template-columns: 16ch 15ch 15ch minmax(10ch, 1fr) 8ch 10ch; gap: var(--s2); align-items: center; }
.ev-shift-head { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ev-shift-head i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.ev-shift-row > input { width: 100%; height: var(--row); padding: 0 8px; }
.ev-del { font-size: var(--t-xs); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
/* the door */
.ev-here { font-size: var(--t-lg); color: var(--ink-2); }
.ev-here strong { font-size: var(--t-2xl); color: var(--green); font-variant-numeric: tabular-nums; }
.ev-find { width: 100%; height: var(--row-lg); font-size: var(--t-md); margin: var(--s2) 0 var(--s3); }
.ev-checkin { list-style: none; margin: 0 0 var(--s5); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ev-checkin > li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); }
.ev-checkin > li + li { border-top: 1px solid var(--line); }
.ev-checkin > li.is-here { background: color-mix(in srgb, var(--green) 8%, var(--surface)); }
.ev-checkin form { margin: 0; }
.ev-ci-who { display: grid; }
.ev-ci-who .muted { font-size: var(--t-sm); }
.ev-ci-btn { min-width: 8.5rem; height: 44px; justify-content: center; font-size: var(--t-md); }
.ev-ci-btn.is-here { color: var(--green); }
.ev-none { padding: var(--s4); }
.ev-walkin > summary { cursor: pointer; }
.ev-listbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s2) var(--s4);
    border-bottom: 1px solid var(--line); margin: var(--s3) 0 var(--s4); }
.ev-listbar .ev-tabs { border-bottom: 0; margin: 0; }
.ev-catfilter { margin: 0 0 6px; }
.ev-catfilter .chip { padding: 3px 12px; text-decoration: none; background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.ev-catfilter .chip:hover { border-color: var(--teal); }
.ev-catfilter .chip.on { background: var(--teal-50); border-color: var(--teal); color: var(--teal-800); font-weight: 600; }
.pill.ev-pill-shift { background: var(--teal-50); color: var(--teal-800); }
.ev-catpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.ev-cat { display: flex; gap: var(--s3); align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2);
    border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.ev-cat:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.ev-cat input { margin-top: 3px; flex: none; }
.ev-cat > span { display: grid; gap: 2px; }
.ev-cat small { color: var(--muted); font-size: var(--t-sm); }
.ev-qs { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.ev-q-row { display: grid; grid-template-columns: minmax(18ch, 2fr) 16ch minmax(16ch, 1.5fr) 13ch auto; gap: var(--s2); align-items: center; }
.ev-q-row input, .ev-q-row select { width: 100%; height: var(--row); padding: 0 9px; }   /* the global 9px vertical pad clips a 30px select */
.ev-q-row:has(.ev-q-opts[hidden]) { grid-template-columns: minmax(18ch, 2fr) 16ch 13ch auto; }
.ev-table td.ev-who { min-width: 22ch; }
.ev-answers { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--t-xs); color: var(--ink); }
.ev-answers span { color: var(--muted); }
@media (max-width: 720px) {
    .ev-q-row, .ev-q-row:has(.ev-q-opts[hidden]) { grid-template-columns: 1fr 1fr; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); }
    .ev-q-row [name=q_label], .ev-q-row .ev-q-opts { grid-column: 1 / -1; }
}
.ev-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); margin-top: var(--s5); }
.ev-days { list-style: none; margin: 0; padding: 0; columns: 2; font-size: var(--t-sm); }
.ev-days li { display: flex; justify-content: space-between; gap: var(--s3); padding: 3px 0; break-inside: avoid; }
.ev-subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 var(--s3); font-size: var(--t-sm); }
.ev-subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    color: var(--ink-2); text-decoration: none; border: 1px solid transparent; }
.ev-subnav a:hover { background: var(--surface-2); }
.ev-subnav a.on { background: var(--teal-50); border-color: var(--teal-100); color: var(--teal-800); font-weight: 600; }
.ev-tab-n { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 999px;
    background: var(--surface-2); color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: center; }
.ev-tabs a.on .ev-tab-n { background: var(--teal-50); color: var(--teal-800); }
.ev-h3 { font-size: var(--t-sm); margin: 0 0 var(--s2); }
.ev-bad { color: var(--red); }
.ev-code { font-family: var(--mono); font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em;
    padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink); }
.ev-worklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); }
.ev-worklist i { color: var(--muted); }
.ev-handout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s3);
    padding: var(--s3) var(--s4); border: 1px dashed var(--teal); border-radius: var(--radius); background: var(--teal-50); }
.ev-handout .ev-code { font-size: var(--t-lg); background: var(--surface); }
.ev-work { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.ev-work-find { width: 100%; height: var(--row); padding: 0 9px; margin-bottom: 6px; }
.ev-picklist { max-height: 200px; overflow: auto; display: grid; gap: 2px; padding: 6px 8px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--t-sm); }
.ev-picklist label.chk { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
/* calendar */
.ev-cal { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin: var(--s3) 0 var(--s4); }
.ev-cal-head, .ev-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ev-cal-head span { padding: 6px 8px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line); }
.ev-cal-week + .ev-cal-week { border-top: 1px solid var(--line); }
.ev-cal-day { min-height: 104px; padding: 4px 5px 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-cal-day + .ev-cal-day { border-left: 1px solid var(--line); }
.ev-cal-day.is-out { background: var(--bg); }
.ev-cal-day.is-out .ev-cal-num { color: var(--muted); opacity: .6; }
.ev-cal-num { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); align-self: flex-end; min-width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ev-cal-day.is-today .ev-cal-num { background: var(--teal); color: #fff; }
.ev-cal-item { display: block; padding: 2px 6px; border-radius: 4px; font-size: var(--t-xs); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
    background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--ink);
    border-left: 3px solid var(--amber); }
.ev-cal-item.is-shift { background: var(--teal-50); border-left-color: var(--teal); }
.ev-cal-item.is-cancelled { text-decoration: line-through; opacity: .55; }
.ev-cal-item:hover { filter: brightness(.96); }
.ev-cal-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-agenda { display: none; list-style: none; margin: var(--s3) 0 var(--s4); padding: 0; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface); }
.ev-agenda li { padding: var(--s2) var(--s3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ev-agenda li + li { border-top: 1px solid var(--line); }
.ev-agenda li.is-cancelled { opacity: .6; }
.ev-subscribe { margin-top: var(--s4); }
@media (max-width: 760px) { .ev-cal { display: none; } .ev-agenda { display: block; } }
.ev-look { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.ev-upload { display: grid; gap: 6px; align-content: start; }
.ev-upload .ev-h3 { margin: 0; }
.ev-upload input[type=file] { font-size: var(--t-sm); max-width: 100%; color: var(--muted); }
.ev-upload input[type=file]::file-selector-button { font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
    margin-right: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); }
.ev-upload input[type=file]::file-selector-button:hover { background: var(--surface-2); }
.ev-upload-now { margin: 0; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-sm); }
.ev-upload-now img { max-width: 220px; max-height: 90px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); }
.ev-cropper { display: grid; gap: 10px; margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface-2); }
.ev-fit { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ev-fit label.chk { font-size: var(--t-sm); display: inline-flex; gap: 6px; align-items: center; }
.ev-crop-work { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
.ev-crop-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; overflow: hidden;
    border-radius: 6px; user-select: none; touch-action: none; background: var(--surface); }
.ev-crop-img { display: block; max-width: 100%; max-height: 280px; pointer-events: none; }
.ev-crop-box { position: absolute; cursor: move; outline: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(8, 12, 22, .6);
    background-image: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)), linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)),
                      linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)), linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35));
    background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; background-repeat: no-repeat;
    background-position: 33.33% 0, 66.66% 0, 0 33.33%, 0 66.66%; }
.ev-crop-box:focus-visible { outline: 3px solid var(--teal); }
.ev-crop-side { display: grid; gap: 8px; flex: 1 1 180px; min-width: 160px; }
.ev-crop-zoom { display: grid; gap: 4px; font-size: var(--t-sm); font-weight: 600; }
.ev-crop-zoom input { width: 100%; accent-color: var(--teal); }
.ev-crop-preview { max-width: 520px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.vr-ballot { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 999px;
    padding: 2px 9px; border: 1px solid var(--line-2); color: var(--ink-2); }
.vr-ballot.b-accepted, .vr-ballot.b-returned, .vr-ballot.b-early, .vr-ballot.b-eday { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.vr-ballot.b-rejected { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.vr-ballot.b-sent, .vr-ballot.b-told { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.cv-site { margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.cv-site i { color: var(--teal-dark); }
.vr-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--t-sm); }
/* GOTV board */
.stat.warn .num { color: var(--amber); }
.gotv-elect { font-weight: 400; font-size: .7em; }
.gotv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s2); font-size: var(--t-sm); }
.gotv-filters label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.gotv-filters select { width: auto; height: var(--row); padding: 0 9px; max-width: 320px; }
.gotv-asof { margin-left: auto; }
.gotv-cards { margin-top: var(--s3); }
.gotv-meter { height: 14px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.gotv-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--green)); border-radius: 7px; }
.gotv-meter-lbl { margin: 6px 0 var(--s3); font-size: var(--t-sm); }
.gotv-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gotv-actions form { margin: 0; }
.gotv-actions .btn[disabled] { opacity: .5; cursor: default; }
.gotv-n { display: inline-block; min-width: 1.6em; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.22);
    font-variant-numeric: tabular-nums; text-align: center; }
.btn.secondary .gotv-n { background: var(--surface-2); }
.gotv-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s5); margin-top: var(--s5); align-items: start; }
.gotv-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.gotv-sec-head .ev-catfilter { margin: 0; }
.gotv-table-wrap { max-height: 560px; }
.gotv-table td, .gotv-table th { padding-top: 6px; padding-bottom: 6px; }
.gotv-bar-cell { white-space: nowrap; }
.gotv-bar { display: inline-block; vertical-align: middle; width: 110px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.gotv-bar > span { display: block; height: 100%; background: var(--teal); }
.gotv-pct { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--ink-2); display: inline-block; min-width: 3.5em; }
.gotv-side { display: grid; gap: var(--s5); }
.gotv-ballots { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-sm); }
.gotv-ballots li { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 10px; border-radius: 6px; background: var(--surface-2); }
.gotv-ballots li.b-rejected strong { color: var(--red); }
.gotv-ballots li.b-sent strong { color: var(--amber); }
.gotv-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.gotv-settings { display: grid; gap: var(--s2); }
.gotv-settings label.chk { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); }
@media (max-width: 900px) { .gotv-cols { grid-template-columns: 1fr; } .gotv-asof { margin-left: 0; } }
.pb-rounds { margin: var(--s3) 0 var(--s4); }
.pb-rounds-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.pb-rounds-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pb-rounds-bar .pb-tried { display: block; height: 100%; background: var(--teal); }
.ev-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-swatch { position: relative; cursor: pointer; }
.ev-swatch input { position: absolute; opacity: 0; }
.ev-swatch > span[aria-hidden] { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line-2); }
.ev-swatch input:checked + span[aria-hidden] { box-shadow: 0 0 0 2px var(--ink); }
.ev-swatch input:focus-visible + span[aria-hidden] { outline: 3px solid var(--teal-100); outline-offset: 2px; }
.sw-teal > span[aria-hidden] { background: #0d9488; }
.sw-blue > span[aria-hidden] { background: #2563eb; }
.sw-purple > span[aria-hidden] { background: #7c3aed; }
.sw-red > span[aria-hidden] { background: #dc2626; }
.sw-amber > span[aria-hidden] { background: #b45309; }
.sw-green > span[aria-hidden] { background: #15803d; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
    .ev-shift-head { display: none; }
    .ev-shift-row { grid-template-columns: 1fr 1fr; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); }
    .ev-shift-row input[name=shift_date], .ev-shift-row input[name=shift_label] { grid-column: 1 / -1; }
}

/* ---- Public pages (v3.11.0): event sign-up + view-only share links. No app chrome. ---------- */
.pub-body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; }
.pub-bar { padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pub-host { font-weight: 700; color: var(--ink); }
.pub-main { flex: 1; padding: 28px 16px 40px; }
.pub-foot { padding: 16px 20px; text-align: center; color: var(--muted); font-size: var(--t-xs); }
.pub-card { max-width: 620px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 24px 24px 28px; box-shadow: var(--shadow-sm); }
.pub-card.pub-wide { max-width: 980px; }
.pub-card h1 { margin: 0 0 var(--s3); }
.pub-kicker { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-dark); }
.pub-facts { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 4px; color: var(--ink-2); }
.pub-facts i { color: var(--muted); margin-right: 4px; }
.pub-desc { color: var(--ink-2); }
.pub-form { display: grid; gap: var(--s3); margin-top: var(--s4); }
.pub-shifts { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.pub-shifts legend { font-weight: 700; margin-bottom: var(--s2); }
.pub-shift { display: flex; align-items: center; gap: var(--s3); padding: 12px 14px; border: 1px solid var(--line-2);
    border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.pub-shift:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.pub-shift.is-full { opacity: .55; cursor: not-allowed; }
.pub-shift input { width: 20px; height: 20px; flex: none; }
.pub-left { margin-left: auto; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pub-grid label { display: grid; gap: 4px; font-size: var(--t-sm); font-weight: 600; }
.pub-grid input { width: 100%; height: 44px; font-size: 16px; }     /* 16px: no iOS zoom on focus */
.pub-hint { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.pub-sms { font-size: var(--t-sm); display: flex; gap: 8px; align-items: flex-start; }
.pub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pub-go { height: 48px; font-size: var(--t-md); justify-content: center; }
.pub-done { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.pub-done li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.pub-done-act { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pub-cancel { font-size: var(--t-sm); color: var(--muted); }
.pub-grid select { width: 100%; height: 44px; font-size: 16px; }
.pub-rsvp { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pub-rsvp legend { font-weight: 700; margin-bottom: var(--s2); }
.pub-rsvp label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2);
    border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.pub-rsvp label:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.pub-rsvp input { width: 20px; height: 20px; flex: none; margin: 0; }
.pub-qs { display: grid; gap: var(--s3); }
.pub-q { display: grid; gap: 4px; font-size: var(--t-sm); font-weight: 600; border: 0; padding: 0; margin: 0; }
.pub-q legend { padding: 0; margin-bottom: 4px; }
fieldset.pub-q { display: flex; flex-wrap: wrap; gap: 6px 20px; }
fieldset.pub-q legend { width: 100%; }
fieldset.pub-q label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: var(--t-md); }
.pub-q input[type=text], .pub-q select { width: 100%; height: 44px; font-size: 16px; font-weight: 400; }
.pub-q input[type=radio] { width: 20px; height: 20px; margin: 0; }
.pub-give { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--ink-2); }
.pub-give .btn { display: inline-flex; }
.pub-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.pub-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.pub-list-row > div { display: grid; gap: 2px; min-width: 0; }
.pub-list-main { flex: 1; }
.pub-list-row .pub-kicker { margin: 0; }
.pub-list-name { font-size: var(--t-md); }
.pub-list-when { font-size: var(--t-sm); color: var(--ink-2); }
.pub-list-when i { color: var(--muted); margin-right: 2px; }
/* --- The public event page: a hero, the event's own color, date tiles, sharing --- */
/* An event's color re-points the accent tokens, so every public style (buttons, selected tiles,
   links) follows it in light and dark alike. Teal is the house color and needs no override. */
.pub-body[data-accent=blue]   { --teal: #2563eb; --teal-dark: #1d4ed8; --teal-50: #eff6ff; --teal-100: #dbeafe; --teal-800: #1e3a8a; }
.pub-body[data-accent=purple] { --teal: #7c3aed; --teal-dark: #6d28d9; --teal-50: #f5f3ff; --teal-100: #ede9fe; --teal-800: #4c1d95; }
.pub-body[data-accent=red]    { --teal: #dc2626; --teal-dark: #b91c1c; --teal-50: #fef2f2; --teal-100: #fee2e2; --teal-800: #7f1d1d; }
.pub-body[data-accent=amber]  { --teal: #b45309; --teal-dark: #92400e; --teal-50: #fffbeb; --teal-100: #fef3c7; --teal-800: #78350f; }
.pub-body[data-accent=green]  { --teal: #15803d; --teal-dark: #166534; --teal-50: #f0fdf4; --teal-100: #dcfce7; --teal-800: #14532d; }
:root[data-theme="dark"] .pub-body[data-accent=blue]   { --teal: #3b82f6; --teal-dark: #93c5fd; --teal-50: #10213f; --teal-100: #172e57; --teal-800: #bfdbfe; }
:root[data-theme="dark"] .pub-body[data-accent=purple] { --teal: #8b5cf6; --teal-dark: #c4b5fd; --teal-50: #1f1838; --teal-100: #2b2150; --teal-800: #ddd6fe; }
:root[data-theme="dark"] .pub-body[data-accent=red]    { --teal: #ef4444; --teal-dark: #fca5a5; --teal-50: #2c1416; --teal-100: #3f1a1d; --teal-800: #fecaca; }
:root[data-theme="dark"] .pub-body[data-accent=amber]  { --teal: #d97706; --teal-dark: #fcd34d; --teal-50: #2b2110; --teal-100: #3d2e12; --teal-800: #fde68a; }
:root[data-theme="dark"] .pub-body[data-accent=green]  { --teal: #16a34a; --teal-dark: #86efac; --teal-50: #0f2a1b; --teal-100: #153a25; --teal-800: #bbf7d0; }
.pub-body .btn:not(.secondary):hover { background: var(--teal); filter: brightness(1.08); }
.pub-body { background: radial-gradient(1100px 380px at 50% -120px, color-mix(in srgb, var(--teal) 22%, transparent), transparent 75%) no-repeat, var(--bg); }
.pub-host { display: inline-flex; align-items: center; gap: 10px; }
.pub-host-mark { width: 10px; height: 10px; border-radius: 3px; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.sr-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pub-card.pub-event { max-width: 720px; padding: 0; overflow: hidden; }
.pub-in { padding: 22px 28px 28px; }
.pub-hero { position: relative; height: 168px; overflow: hidden; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--teal) 0%, color-mix(in srgb, var(--teal) 50%, #0b111f) 100%); }
.pub-hero::before { content: ""; position: absolute; inset: 0; opacity: .18;
    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 18px 18px; }
.pub-hero-art { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.14); box-shadow: 0 0 0 14px rgba(255,255,255,.07), 0 0 0 30px rgba(255,255,255,.04); }
.pub-hero-art i { font-size: 54px; color: #fff; }
.pub-hero.has-banner { height: auto; display: block; background: #0b111f; }
.pub-hero.has-banner::before { display: none; }
.pub-hero-blur { position: absolute; inset: -30px; background-size: cover; background-position: center;
    filter: blur(28px) brightness(.65) saturate(1.2); }
.pub-hero-img { position: relative; display: block; max-width: 100%; max-height: 380px; margin: 0 auto; }
.pub-hero.is-short .pub-hero-img { max-height: 200px; }
.pub-crop { position: relative; width: 100%; justify-self: stretch; aspect-ratio: 5 / 2; overflow: hidden; background: var(--surface-2); }
.pub-crop img { position: absolute; display: block; max-width: none; height: auto; }

.pub-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pub-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--teal); color: #fff; }
.pub-badge.is-soft { background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100);
    text-transform: none; letter-spacing: 0; font-weight: 600; }
.pub-title { font-size: clamp(1.7rem, 4.6vw, 2.35rem); line-height: 1.12; margin: 0 0 4px; letter-spacing: -.01em; }
.pub-by { margin: 0 0 var(--s3); color: var(--muted); font-weight: 600; }
.pub-event .pub-facts { gap: 8px; margin-bottom: var(--s3); }
.pub-event .pub-facts li { display: flex; gap: 10px; align-items: flex-start; }
.pub-event .pub-facts i { color: var(--teal-dark); font-size: 18px; margin: 1px 0 0; }
.pub-dir { margin-left: 6px; font-weight: 600; white-space: nowrap; }
.pub-proof { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3); padding: 10px 14px;
    border-radius: var(--radius); background: var(--teal-50); border: 1px solid var(--teal-100); }
.pub-proof-faces { display: inline-flex; }
.pub-proof-faces i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
    background: var(--teal); color: #fff; border: 2px solid var(--surface); }
.pub-proof-faces i + i { margin-left: -9px; opacity: .85; }
.pub-proof-faces i + i + i { opacity: .7; }
.pub-event .pub-desc { margin-bottom: var(--s3); }
.pub-event .pub-desc p { margin: 0 0 .7em; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--s4); }
.pub-share { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-share-ico { padding-left: 9px; padding-right: 9px; }
.pub-share .btn i, .pub-actions .btn i { font-size: 16px; }

.pub-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.pub-step > legend { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-md); margin-bottom: var(--s3); padding: 0; }
.pub-step-n { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    background: var(--teal); color: #fff; font-size: var(--t-sm); }
.pub-step-hint { font-weight: 400; font-size: var(--t-sm); color: var(--muted); }
.pub-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px; }
.pub-tile { position: relative; display: flex; gap: 12px; align-items: stretch; padding: 10px; cursor: pointer;
    border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface);
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
    animation: pub-rise .35s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.pub-tile:hover { border-color: var(--teal); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pub-tile input { position: absolute; opacity: 0; pointer-events: none; }
.pub-tile:has(input:focus-visible) { outline: 3px solid var(--teal-100); outline-offset: 1px; }
.pub-tile:has(input:checked) { border-color: var(--teal); background: var(--teal-50); box-shadow: 0 0 0 1px var(--teal); }
.pub-tile.is-full { cursor: not-allowed; opacity: .5; }
.pub-tile.is-full:hover { transform: none; border-color: var(--line-2); box-shadow: none; }
.pub-date { flex: none; width: 54px; border-radius: 9px; overflow: hidden; text-align: center; display: grid;
    align-content: start; background: var(--surface-2); border: 1px solid var(--line); }
.pub-date-m { display: block; background: var(--teal); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; padding: 2px 0; }
.pub-date-d { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; padding-top: 3px; color: var(--ink); }
.pub-date-w { display: block; font-size: 11px; color: var(--muted); padding-bottom: 4px; }
.pub-tile-body { display: grid; gap: 2px; align-content: center; min-width: 0; flex: 1; padding-right: 18px; }
.pub-tile-body strong { font-size: var(--t-md); }
.pub-tile-label { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-tile-spots { font-size: var(--t-xs); color: var(--muted); }
.pub-tile-spots.is-few { color: var(--amber); font-weight: 700; }
.pub-tile-bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 3px; }
.pub-tile-bar > span { display: block; height: 100%; background: var(--teal); border-radius: 2px; max-width: 100%; }
.pub-tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--line-2); background: var(--surface); color: transparent; transition: all .15s; }
.pub-tick i { font-size: 14px; }
.pub-tile:has(input:checked) .pub-tick { background: var(--teal); border-color: var(--teal); color: #fff; animation: pub-pop .25s ease-out; }
.pub-hurry { margin: 0; color: var(--amber); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.pub-event .pub-form { gap: var(--s4); }
.pub-submit { position: sticky; bottom: 0; z-index: 2; margin: 0 -28px; padding: 12px 28px 14px;
    background: linear-gradient(to top, var(--surface) 70%, transparent); }
.pub-go { width: 100%; height: 52px; font-size: var(--t-md); border-radius: 12px; transition: transform .15s, box-shadow .15s; }
.pub-go.is-ready { box-shadow: 0 6px 18px -6px var(--teal); }
.pub-go:active { transform: scale(.99); }
.pub-done-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--s3);
    background: var(--teal); color: #fff; animation: pub-pop .4s ease-out; box-shadow: 0 0 0 8px var(--teal-50); }
.pub-done-mark i { font-size: 28px; }
.pub-friend { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pub-friend h2 { font-size: var(--t-lg); margin: 0 0 4px; }
.pub-friend .pub-actions { margin: var(--s3) 0 0; }
.pub-list-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: none; }
@keyframes pub-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pub-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pub-tile, .pub-tick, .pub-done-mark { animation: none !important; transition: none; } }
@media (max-width: 560px) {
    .pub-in { padding: 18px 16px 22px; }
    .pub-submit { margin: 0 -16px; padding: 10px 16px 12px; }
    .pub-hero { height: 132px; }
    .pub-hero-art { width: 84px; height: 84px; }
    .pub-hero-art i { font-size: 42px; }
    .pub-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .pub-grid { grid-template-columns: 1fr; } .pub-card { padding: 18px 16px 22px; } }


/* ==============================================================================================
   ANVIL (v3.17.0) — Nevada legislative tracking. Steel sub-brand; mode-aware (newsroom /
   lobbying / advocacy) via the templates, not the CSS.
   ============================================================================================== */

/* ---- Sub-bar: tabs, quick search, session picker ---- */
.anvil-bar { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
    margin: -4px 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--steel); }
.anvil-nav { display: flex; gap: 2px 18px; flex-wrap: wrap; align-items: center; }
.anvil-nav a { position: relative; padding: 6px 0; color: var(--muted); text-decoration: none;
    font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.anvil-nav a:hover { color: var(--ink); }
.anvil-nav a.active { color: var(--ink); }
.anvil-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 4px;
    background: var(--steel); border-radius: 2px 2px 0 0; }
.anvil-nav-gap { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.anvil-search { position: relative; flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.anvil-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.anvil-search input { padding-left: 32px; height: 36px; }
.anvil-session select { height: 36px; padding: 0 8px; font-size: 13px; }

/* ---- Shared atoms ---- */
.h-count { font-size: var(--t-lg); font-weight: 600; margin-left: 4px; }
.small { font-size: 12.5px; }
.ok-text { color: var(--green); }
.link-sm { font-size: 12px; margin-left: 6px; }
.report-kicker { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--steel); }
a.stat-link { color: inherit; text-decoration: none; transition: border-color .12s; }
a.stat-link:hover { border-color: var(--steel); }
.bill-tag { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 13px;
    padding: 1px 7px; border-radius: 6px; background: var(--steel-50); color: var(--steel-800);
    border: 1px solid var(--steel-100); white-space: nowrap; text-decoration: none; }
a.bill-tag:hover { border-color: var(--steel); text-decoration: none; }
.bill-tag.bdr { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.bill-tag.is-mine { background: var(--steel); color: var(--steel-ink); border-color: var(--steel); }
.chips-inline { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.party { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; font-weight: 700;
    border-radius: 4px; padding: 0 4px; background: var(--surface-2); color: var(--muted); }
.party-D { background: color-mix(in srgb, #2563eb 16%, transparent); color: #2563eb; }
.party-R { background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; }
[data-theme="dark"] .party-D { color: #93c5fd; }
[data-theme="dark"] .party-R { color: #fca5a5; }

/* Positions (lobbying / advocacy) and the newsroom's neutral "following" chip */
.pos { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
.pos i { font-size: 12px; }
.pos-support { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green);
    border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.pos-oppose { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red);
    border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.pos-amend { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.pos-neutral { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.pos-monitor, .pos-follow { background: var(--steel-50); color: var(--steel-800); border-color: var(--steel-100); }
.pos-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }

/* Stage pills — where a bill is in its life */
.stage { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    white-space: nowrap; background: var(--steel-50); color: var(--steel-800); border: 1px solid var(--steel-100);
    text-decoration: none; }
.stage-filed, .stage-bdr { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.stage-governor { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber);
    border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.stage-law { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.stage-vetoed { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red);
    border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.stage-dead, .stage-ended { background: var(--surface-2); color: var(--muted); border-color: var(--line);
    text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Deadline tone */
.days { display: inline-block; font-weight: 700; font-variant-numeric: tabular-nums; }
.days-ok { color: var(--green); }
.days-warn { color: var(--amber); }
.days-bad { color: var(--red); }

/* Whip stances */
.stance { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.stance-yes { background: var(--green); color: #fff; }
.stance-lean_yes { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.stance-undecided { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.stance-lean_no { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.stance-no { background: var(--red); color: #fff; }
[data-theme="dark"] .stance-yes, [data-theme="dark"] .stance-no { color: #0b111f; }

/* ---- Dashboard ---- */
.anvil-clock { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; }
.anvil-clock i { color: var(--steel); }
.scoreboard { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 18px; border: 1px solid var(--line);
    border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.sb-cell { flex: 1 1 120px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
    color: var(--ink); text-decoration: none; border-left: 1px solid var(--line); }
.sb-cell:first-child { border-left: 0; }
a.sb-cell:hover { background: var(--surface-2); text-decoration: none; }
.sb-cell strong { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sb-cell span { font-size: 12px; color: var(--muted); }
.sb-law strong { color: var(--green); }
.sb-vetoed strong { color: var(--red); }
.sb-dead strong { color: var(--muted); }
.sb-active strong { color: var(--steel); }
.sb-today { background: var(--steel-50); }
.sb-today strong { color: var(--steel); }
.deadline-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.dl-chip { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; padding: 8px 12px;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--steel);
    border-radius: var(--radius); flex: 1 1 220px; }
.dl-day { font-weight: 800; color: var(--steel); font-size: 13px; }
.dl-date { font-weight: 600; font-size: 13px; }
.dl-label { grid-column: 1 / -1; font-size: 13.5px; }
.dl-rule { grid-column: 1 / -1; font-size: 11.5px; }
.anvil-dash { margin-top: 4px; }
.anvil-dash .card { padding: 16px 18px; }
.feed li { display: flex; flex-direction: column; gap: 3px; }
.feed-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feed-text { font-size: 13.5px; color: var(--ink-2); }
.hearing-row, .radar-row { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: start; }
.hearing-row .when { display: flex; flex-direction: column; font-size: 13px; }
.radar-row { grid-template-columns: 54px 1fr; }
.radar-row .days { font-size: 15px; }

/* ---- Bill lists ---- */
.fb-grow { flex: 1 1 260px; }
.fb-grow input { width: 100%; }
.fb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; align-self: flex-end; padding-bottom: 8px; }
.bill-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); overflow: hidden; }
.bill-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 6px 16px; padding: 12px 16px;
    border-top: 1px solid var(--line); align-items: start; }
.bill-row:first-child { border-top: 0; }
.bill-row.is-mine { box-shadow: inset 3px 0 0 var(--steel); }
.br-num { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.br-summary { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.4; }
a.br-summary:hover { color: var(--steel); text-decoration: none; }
.br-meta { font-size: 12.5px; margin-top: 3px; }
.br-hearing { font-size: 12.5px; color: var(--steel); font-weight: 600; margin-top: 3px; }
.br-track { justify-self: end; }
.track-form { margin: 0; }
.track-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    border: 1px dashed var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit;
    font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.track-btn:hover { border-style: solid; border-color: var(--steel); color: var(--steel); }

/* ---- Bill page ---- */
.bill-head { margin-bottom: 16px; }
.bill-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.bill-num { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--steel); letter-spacing: .02em; }
.bill-summary { font-size: var(--t-xl); line-height: 1.3; margin: 2px 0 4px; max-width: 70ch; }
.bill-sub { margin: 0 0 12px; }
.synced { font-size: 12px; }
.track { list-style: none; display: flex; margin: 8px 0 0; padding: 0; counter-reset: step; max-width: 760px; }
.track li { flex: 1; position: relative; padding-top: 18px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; }
.track li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px; background: var(--line); }
.track li::after { content: ""; position: absolute; top: 0; left: 50%; width: 13px; height: 13px; margin-left: -6.5px;
    border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
.track li.t-done { color: var(--ink-2); }
.track li.t-done::before { background: var(--steel); }
.track li.t-done::after { background: var(--steel); border-color: var(--steel); }
.track li.t-here { color: var(--steel); }
.track li.t-here::before { background: linear-gradient(90deg, var(--steel) 50%, var(--line) 50%); }
.track li.t-here::after { border-color: var(--steel); box-shadow: 0 0 0 4px var(--steel-100); }
.bill-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.bill-main, .bill-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sec-h { font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sec-h i { color: var(--steel); }
.sec-note { font-size: 12px; font-weight: 400; }
.sub-h { font-size: 13px; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.deadline-card { display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: var(--radius-lg);
    border: 1px solid var(--line); border-left: 4px solid currentColor; background: var(--surface); }
.deadline-card > div:last-child { color: var(--ink); }
.dc-days { display: flex; flex-direction: column; align-items: center; min-width: 64px; line-height: 1; }
.dc-days strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.dc-days span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.dc-label { font-weight: 700; }
.hearing-big { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.hearing-big:first-of-type { border-top: 0; padding-top: 0; }
.hearing-big .when { display: flex; flex-direction: column; font-size: 14px; color: var(--steel); }
.hearing-big .links { display: flex; gap: 14px; margin-top: 4px; font-size: 13px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); max-height: 460px; overflow: auto; }
.timeline li { position: relative; padding: 0 0 12px 10px; display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--line-2); }
.timeline li.latest::before { background: var(--steel); border-color: var(--steel); }
.timeline li.latest .tl-text { font-weight: 600; }
.tl-date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.digest p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; max-width: 75ch; }
.digest.clamp { max-height: 15.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent); }
.title-det { margin-top: 10px; font-size: 13px; color: var(--muted); }
.title-det summary { cursor: pointer; font-weight: 600; }
.vote-y { color: var(--green); font-weight: 700; }
.vote-n { color: var(--red); font-weight: 700; }
.doc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.doc { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 13px; color: var(--ink); background: var(--surface-2); }
.doc:hover { border-color: var(--steel); text-decoration: none; }
.doc.amend { background: var(--surface); }
.pos-form { padding: 10px 12px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius); margin-bottom: 4px; }
.pos-edge-support { border-left-color: var(--green); }
.pos-edge-oppose { border-left-color: var(--red); }
.pos-edge-amend { border-left-color: var(--amber); }
.pos-edge-neutral { border-left-color: var(--line-2); }
.pos-edge-monitor { border-left-color: var(--steel); }
.pos-form-head { margin-bottom: 6px; font-size: 14px; }
.pos-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pos-fields select { width: auto; flex: 1 1 120px; padding: 6px 8px; font-size: 13px; }
.pos-form textarea, .note-form textarea { font-size: 13.5px; }
.pos-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.pos-stop { margin: 0 0 12px; text-align: right; }
.pos-add { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.member-list li:first-child { border-top: 0; }
.whip-mini { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
ul.tidy.plain { list-style: none; padding: 0; }
ul.tidy.plain li { margin: 5px 0; font-size: 13.5px; }
.note-form { margin-bottom: 10px; }
.notes-list { list-style: none; margin: 0; padding: 0; }
.notes-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.notes-list li:first-child { border-top: 0; }

/* ---- My bills / groups / reports ---- */
.tracked td { vertical-align: top; }
.t-bill { min-width: 230px; }
.t-sum { font-size: 13px; margin-top: 3px; }
.t-note { margin-top: 3px; }
tr.row-conflict td { background: color-mix(in srgb, var(--red) 6%, transparent); }
tr.is-mine td:first-child { box-shadow: inset 3px 0 0 var(--steel); }
.client-card.is-off { opacity: .6; }
.card-cta { margin-top: 10px !important; color: var(--steel) !important; font-weight: 600; font-size: 13px; }
.report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 30px; }
.report-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--steel);
    padding-bottom: 14px; margin-bottom: 18px; }
.report-head h1 { margin: 0; }
.report-tally { display: flex; gap: 18px; }
.report-tally div { display: flex; flex-direction: column; align-items: center; }
.report-tally strong { font-size: 24px; }
.report-tally span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.report-sec { margin-bottom: 22px; }
.report-sec h2 { font-size: 17px; margin: 0 0 8px; }
.report-moves { margin: 0; padding-left: 18px; font-size: 14px; }
.report-moves li { margin: 4px 0; }
.report-moves ul { margin: 2px 0 6px; padding-left: 16px; color: var(--ink-2); font-size: 13px; }
.report-table td { vertical-align: top; font-size: 13.5px; }
.report-foot { margin: 20px 0 0; font-size: 12px; }

/* ---- Calendar (month) + committee week ---- */
.cal-switch { display: inline-flex; gap: 2px; padding: 3px; margin: -6px 0 14px; background: var(--bg);
    border: 1px solid var(--line); border-radius: 999px; }
.cal-switch a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.cal-switch a.on { background: var(--steel); color: var(--steel-ink); }
.cal-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 10px 0 0; }
.cal-filters .chips { margin: 0; }
.cal-group select { width: auto; padding: 6px 8px; font-size: 13px; }
.anvil-cal .ev-cal-day.is-today .ev-cal-num { background: var(--steel); color: var(--steel-ink); }
.ev-cal-item.ac-hearing { background: var(--steel-50); border-left-color: var(--steel); }
.ev-cal-item.ac-move { background: color-mix(in srgb, var(--green) 12%, var(--surface)); border-left-color: var(--green); }
.ev-cal-item.ac-deadline { background: color-mix(in srgb, var(--red) 10%, var(--surface)); border-left-color: var(--red); font-weight: 600; }
span.ev-cal-item { cursor: default; }
.cal-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.cal-dot.ac-hearing { background: var(--steel); }
.cal-dot.ac-move { background: var(--green); }
.cal-dot.ac-deadline { background: var(--red); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; margin: -6px 0 12px; }
.week { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.week-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 12px; }
.week-day.is-today { border-color: var(--steel); box-shadow: 0 0 0 2px var(--steel-100); }
.week-h { font-size: 14px; margin: 0 0 8px; }
.mtg { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.mtg:first-of-type { border-top: 0; }
.mtg.is-off { opacity: .55; }
.mtg.has-mine .mtg-time { color: var(--steel); }
.mtg-time { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mtg-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.mtg-bills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mtg-bills .bill-tag { font-size: 11.5px; padding: 0 5px; }
/* Interim committee meetings: the months between sessions (muted gray, quieter than a hearing). */
.ev-cal-item.ac-interim { background: color-mix(in srgb, var(--muted) 10%, var(--surface)); border-left-color: var(--muted); }
.cal-dot.ac-interim { background: var(--muted); }
.mtg.is-interim .mtg-time { color: var(--ink-2); }
.pill.interim-pill { font-size: 10.5px; padding: 0 6px; vertical-align: 1px; }
.mtg-note { font-size: 12.5px; color: var(--amber); font-weight: 600; margin: 2px 0; }
.mtg-where summary { cursor: pointer; color: var(--muted); margin-top: 3px; }
.mtg-where ul { margin: 4px 0 0; }
.hearing-row.is-off { opacity: .6; }
.rail-h { font-size: 13px; margin: 14px 0 6px; }
.interim-h { font-size: 16px; margin: 22px 0 8px; }
.interim-next { margin: 0 0 6px; }
.bdr-rows { list-style: none; margin: 0; padding: 0; }
.bdr-rows li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.bdr-rows li:first-child { border-top: 0; }
.bdr-rows li.is-mine { background: var(--steel-50); }
.bdr-rows .t-link { display: block; margin-top: 3px; }
.feed-opt { margin: 6px 0 2px; }
.pw-temp-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
@media (max-width: 640px) {
    .cal-switch { display: flex; flex-wrap: wrap; border-radius: 14px; }
    .cal-switch a { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
}

/* ---- Today in the Legislature ---- */
.today-pick input { height: 36px; width: auto; }
.today-jump { margin: 0 0 14px; }
.today-jump .chip { padding: 3px 11px; }
.today-jump strong { margin-left: 4px; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.today-grid > div, .today-grid > aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.today-h { padding-left: 10px; border-left: 4px solid var(--steel); }
.today-signed { border-left-color: var(--green); }
.today-vetoed, .today-died { border-left-color: var(--red); }
.today-governor, .today-amended { border-left-color: var(--amber); }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.today-list li:first-child { border-top: 0; }
.today-list li.is-mine { box-shadow: inset 3px 0 0 var(--steel); padding-left: 10px; }
.today-sum { font-size: 14px; margin-left: 4px; }
.vote-list { list-style: none; margin: 0; padding: 0; }
.vote-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.vote-list li:first-child { border-top: 0; }
.vote-list li.is-close .vote-bar { outline: 2px solid var(--amber); outline-offset: 1px; }
.vote-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 5px 0 3px; background: var(--line); }
.vote-bar .vy { background: var(--green); }
.vote-bar .vn { background: var(--red); }

/* ---- Legislators ---- */
.leg-cell { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.leg-ph { width: 34px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--surface-2); flex: none; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.leg-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.leg-photo { width: 96px; height: 120px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.leg-head h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.leg-head h1 .party { font-size: 12px; padding: 2px 8px; }
.leg-contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }

/* ---- Whip / vote count ---- */
.whip-tally { margin-bottom: 14px; }
.wt-nums { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 10px; }
.wt-nums div { display: flex; flex-direction: column; }
.wt-nums strong { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wt-nums span { font-size: 12px; color: var(--muted); }
.wt-need strong { color: var(--steel); }
.wt-bar { position: relative; display: flex; height: 14px; border-radius: 7px; background: var(--surface-2);
    border: 1px solid var(--line); overflow: visible; }
.wt-seg:first-child { border-radius: 7px 0 0 7px; }
.wt-seg.stance-undecided { border: 0; }
.wt-line { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.whip-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.whip-form select { width: auto; padding: 5px 8px; font-size: 13px; font-weight: 600; }
.whip-form input[type=text] { flex: 1 1 180px; padding: 5px 8px; font-size: 13px; }
.stance-sel.stance-yes, .stance-sel.stance-no { border: 0; }

/* ---- Watch ---- */
.watch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.watch-grid > aside { display: flex; flex-direction: column; gap: 14px; }
.hit-list { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); overflow: hidden; }
.hit { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 12px 14px; border-top: 1px solid var(--line); }
.hit:first-child { border-top: 0; }
.hit-body { font-size: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hit-actions form { display: flex; gap: 6px; }
.watch-rules { list-style: none; margin: 0; padding: 0; }
.watch-rules li { padding: 8px 0; border-top: 1px solid var(--line); }
.watch-rules li:first-child { border-top: 0; }
.watch-rules li.is-off { opacity: .6; }
.watch-acts { display: flex; gap: 12px; margin-top: 4px; }
.watch-acts form { margin: 0; }

@media (max-width: 1100px) {
    .bill-grid, .today-grid, .watch-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .anvil-search { max-width: none; margin-left: 0; }
    .bill-row { grid-template-columns: 1fr; }
    .br-num { flex-direction: row; align-items: center; }
    .br-track { justify-self: start; }
    .track li span { display: none; }
    .timeline li { grid-template-columns: 1fr; gap: 0; }
    .hearing-big { grid-template-columns: 1fr; }
    .report { padding: 18px 16px; }
    .leg-head { flex-direction: column; }
}
@media print {
    .no-print, .anvil-bar, .cal-switch { display: none !important; }
    .report { border: 0; padding: 0; }
    .report-head { border-bottom-color: #000; }
    .report-table tr { break-inside: avoid; }
}

/* ---- Anvil front door (sign-in, set password) + the plain brand for one-system users ---- */
.brand-solo { padding: 4px 8px 4px 4px; border-radius: 10px; text-decoration: none; }
.brand-solo:hover { background: var(--surface-2); text-decoration: none; }
.anvil-login-mark { text-align: center; margin-bottom: 6px; }
.anvil-login-mark .brand-mark { width: 46px; height: 46px; font-size: 26px; border-radius: 13px; }
.anvil-login h1 { margin-bottom: 2px; }
.anvil-login .subtitle { font-size: 13px; }
.anvil-login .tagline { text-align: center; }
.anvil-login .login-form button { background: var(--steel); color: var(--steel-ink); }
.anvil-login .login-form button:hover { background: var(--steel); filter: brightness(1.08); }

/* ---- Anvil polish: one-row tools, single-follow beat labels, unfollow, row links ---- */
.anvil-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: 1 1 340px; max-width: 560px; }
.anvil-tools .anvil-search { margin-left: 0; flex: 1 1 200px; max-width: none; }
.anvil-tools .anvil-session { flex: none; }
.anvil-acct { position: relative; flex: none; }
.anvil-acct > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); font-size: 13px; font-weight: 600;
    cursor: pointer; max-width: 220px; }
.anvil-acct > summary::-webkit-details-marker { display: none; }
.anvil-acct > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anvil-acct > summary .ti-hammer { color: var(--steel); }
.anvil-acct-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 240px; max-height: 60vh; overflow: auto;
    padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.anvil-acct-menu p { margin: 4px 8px 6px; }
.anvil-acct-menu form { margin: 0; }
.anvil-acct-menu button, .anvil-acct-menu a { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.anvil-acct-menu button:hover, .anvil-acct-menu a:hover { background: var(--steel-50); }
.anvil-acct-menu button.on { font-weight: 700; color: var(--steel); }
.anvil-acct-menu a { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }

/* ---- Anvil home (v3.20): tiles, on purpose ----------------------------------------------------
   A 12-column grid whose rows split unevenly (8/4, 7/5, 8/4). One lead tile (the session: lede in
   sentences + the 120-day ruler, a big faint session numeral behind it), one solid steel tile with a
   single big number, and plain tiles shaped by their content: a two-column list, a tear-off-calendar
   agenda, a dashed "invitation" tile when there's nothing yet. Small-caps labels, serif numerals. */
.ah { --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; max-width: 1240px; }
.ah-dateline { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 9px; }
.ah-dateline span { white-space: nowrap; }
.ah-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.ah-lower { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; margin-top: 14px; align-items: start; }
.ah-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.t { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 20px 18px; }
.t-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 4px; }
.t-label { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-count { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin-left: 3px; }
.t-more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.t-more:hover { color: var(--ink); }
.t-more::after { content: " →"; }
.t-pos { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.t-pos .pos { font-size: 11.5px; text-decoration: none; }
.t-foot { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.t-foot a { color: var(--muted); }
.t-foot a:hover { color: var(--ink); }
.t-empty { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 56ch; }
.t-empty p { margin: 0 0 10px; }

/* Lead tile: the session. */
.t-hero { grid-column: span 8; padding: 22px 28px 16px; overflow: hidden;
    background: linear-gradient(140deg, color-mix(in srgb, var(--steel) 16%, var(--surface)) 0%, var(--surface) 58%);
    border-color: color-mix(in srgb, var(--steel) 34%, var(--line)); }
.t-hero::after { content: attr(data-num); position: absolute; right: 18px; top: -26px; font-family: var(--serif);
    font-size: 168px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--steel); opacity: .08;
    pointer-events: none; }
.t-hero > * { position: relative; z-index: 1; }
.ah-title { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05;
    letter-spacing: -.012em; margin: 0 0 10px; color: var(--ink); }
.ah-lede { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 58ch; margin: 0 0 4px; }
.ah-lede strong { color: var(--ink); font-weight: 700; }
.ah-lede a { color: inherit; text-decoration: underline; text-decoration-color: var(--steel); text-decoration-thickness: 2px;
    text-underline-offset: 3px; }
.ah-lede a:hover { color: var(--ink); }
.ah-mine { color: var(--ink); }
.ah-alarm { color: var(--red) !important; text-decoration-color: var(--red) !important; font-weight: 700; }

/* The 120 days: the two ends labelled above, a tick per deadline, and each house's pair of
   deadlines gathered under a bracket — drafted, not charted. Day numbers are in the tooltips. */
.ah-ruler { margin: 14px 0 0; padding: 24px 0 72px; }
.ah-track { position: relative; height: 4px; background: var(--line-2); border-radius: 2px; }
.ah-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--steel); border-radius: 2px; }
.ah-tick { position: absolute; top: -5px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink-2); }
.ah-tick.past { background: var(--muted); }
.ah-end { position: absolute; bottom: 14px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ah-end b { color: var(--ink); font-weight: 700; margin-right: 2px; }
.ah-end.is-start { left: 0; }
.ah-end.is-finish { right: 0; }
.ah-end.past b { color: var(--muted); }
.ah-bracket { position: absolute; top: 13px; height: 7px; margin-left: -1px; border: 1.5px solid var(--muted);
    border-top: 0; border-radius: 0 0 4px 4px; }
.ah-bk { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
    align-items: center; gap: 1px; white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.ah-bk em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ah-bk b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ah-bk .past, .ah-bk .past b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.ah-bracket.past { border-color: var(--line-2); }
.ah-ruler.is-before .ah-track { background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }
.ah-now { position: absolute; top: -8px; width: 10px; height: 20px; margin-left: -5px; border-radius: 3px;
    background: var(--steel); box-shadow: 0 0 0 3px var(--surface); z-index: 1; }
.ah-now b { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.ah-ruler-m { display: none; }

/* The one big number — the only solid tile. */
.t-clock { grid-column: span 4; display: flex; flex-direction: column; background: var(--steel); border-color: var(--steel);
    color: var(--steel-ink); padding: 18px 22px 18px; }
.t-clock .t-label { color: color-mix(in srgb, var(--steel-ink) 72%, transparent); }
.clock-num { margin: auto 0 0; font-family: var(--serif); font-size: clamp(72px, 7.5vw, 104px); font-weight: 600;
    line-height: .88; letter-spacing: -.035em; font-variant-numeric: lining-nums; }
.clock-num small { font-size: .32em; letter-spacing: 0; margin-left: 4px; opacity: .7; }
.clock-unit { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; }
.clock-foot { margin: 16px 0 0; padding-top: 10px; font-size: 13px; line-height: 1.4;
    border-top: 1px solid color-mix(in srgb, var(--steel-ink) 28%, transparent); }
.clock-foot a { color: inherit; }

/* Your bills. */
.ah-bills, .ah-record { list-style: none; margin: 0; padding: 0; }
.ah-bills li { display: grid; grid-template-columns: 9.5ch minmax(0, 1fr) auto; gap: 0 14px; align-items: start;
    padding: 12px 0; border-top: 1px solid var(--line); }
.ah-bills li:first-child { border-top: 0; }
.ah-bills .bill-tag, .ah-record .bill-tag { justify-self: start; margin-top: 1px; }
.ah-bills li.is-moved { margin: 0 -20px; padding-left: 17px; padding-right: 20px; border-left: 3px solid var(--steel);
    background: color-mix(in srgb, var(--steel) 6%, transparent); }
.ah-sum { color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.4; font-weight: 500; }
.ah-sum:hover { text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 3px; }
.ah-news { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ah-news b { color: var(--steel); font-weight: 700; margin-right: 4px; }
.ah-meta { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ah-due { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 2px; }

/* Coming up: tear-off date blocks on a paper-toned tile. */
.t-agenda { background: var(--surface-2); }
.ag-day { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px 0 4px;
    border-top: 1px dashed var(--line-2); }
.t-head + .ag-day { border-top: 0; padding-top: 6px; }
.ag-date { align-self: start; display: flex; flex-direction: column; align-items: center; padding: 5px 0 6px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 2px 0 var(--line-2); }
.ag-date b { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1; color: var(--ink); }
.ag-date span { margin-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ag-date small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ag-day.is-today .ag-date { background: var(--steel); border-color: var(--steel); box-shadow: 0 2px 0 color-mix(in srgb, var(--steel) 55%, var(--line-2)); }
.ag-day.is-today .ag-date b, .ag-day.is-today .ag-date span, .ag-day.is-today .ag-date small { color: var(--steel-ink); }
.ag-day ul { list-style: none; margin: 0; padding: 0; }
.ag-ev { padding: 0 0 10px; }
.ag-time { display: block; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); margin-bottom: 1px; }
.ag-deadline .ag-time { color: var(--red); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.ag-title { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.35; }
a.ag-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.ag-ev .bill-tag { font-size: 12px; }
.ag-ev .pill { font-size: 10.5px; padding: 0 6px; margin-left: 4px; }
.ag-where { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.t-agenda .mtg-note { font-size: 12px; }

/* New on the record: a wide tile, so the list runs in two columns. */
.t-record .ah-record { columns: 2; column-gap: 28px; }
.t-record .ah-record li { grid-template-columns: minmax(0, 1fr); }
.t-record .ah-record li .ah-meta { grid-column: 1; }
.t-record .ah-record .bill-tag { margin-bottom: 4px; font-size: 12px; }
.ah-record li { break-inside: avoid; display: grid; grid-template-columns: 9.5ch minmax(0, 1fr); gap: 0 12px;
    padding: 11px 0; border-bottom: 1px solid var(--line); }
.ah-record li .ah-meta { grid-column: 2; margin-top: 3px; }
.ah-record .ah-sum { font-size: 14px; }

/* Watch: the matches, or — dashed, like a to-do — the pitch for setting one up. */
.t-watch:not(.has-hits) { background: transparent; border: 1.5px dashed var(--line-2); }
.t-watch.has-hits { border-left: 4px solid var(--amber); }
.t-watch .ah-record li { grid-template-columns: minmax(0, 1fr); }
.t-watch .ah-record li .ah-meta { grid-column: 1; }
.t-watch .ah-record .bill-tag { margin-bottom: 3px; }
.watch-pitch { margin: 10px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.watch-pitch em { font-style: italic; color: var(--ink); }

@media (max-width: 1100px) {
    .t-hero { grid-column: span 12; }
    .t-clock { grid-column: span 12; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
    .t-balance { grid-column: span 12; }
    .t-clock .t-label { flex-basis: 100%; }
    .clock-num { margin: 0; font-size: 64px; }
    .clock-unit { margin: 0; }
    .clock-foot { margin: 0 0 0 auto; padding: 0; border: 0; }
    .ah-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .t-record .ah-record { columns: 1; }
}
@media (max-width: 860px) {
    .ah-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .t { padding: 14px 16px 16px; border-radius: 12px; }
    .t-hero { padding: 18px 18px 12px; }
    .t-hero::after { font-size: 120px; top: -16px; }
    .ah-lede { font-size: 17px; }
    .ah-bk { display: none; }
    .ah-ruler { padding-bottom: 0; }
    .ah-ruler-m { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
    .ah-dateline { flex-direction: column; }
    .ah-dateline span[aria-hidden] { display: none; }
    .ah-bills li { grid-template-columns: minmax(0, 1fr) auto; }
    .ah-bills .bill-tag { grid-column: 1 / -1; margin-bottom: 4px; }
    .ah-bills li.is-moved { margin: 0 -16px; padding-left: 13px; padding-right: 16px; }
    .ah-record li { grid-template-columns: minmax(0, 1fr); }
    .ah-record li .ah-meta { grid-column: 1; }
    .ah-record .bill-tag { margin-bottom: 4px; }
    .clock-foot { margin-left: 0; flex-basis: 100%; }
}
/* ---- Anvil inner pages: the same family as the home page ------------------------------------
   Every panel under Anvil's bar is a tile (14px corners), and section headings are small-caps
   labels — no icon on every heading. Counts in a heading read as serif numerals. */
.anvil-bar ~ * .panel-card, .anvil-bar ~ .panel-card { border-radius: 14px; }
.anvil-bar ~ * .sec-h, .anvil-bar ~ .panel-card .sec-h { font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); gap: 8px; margin-bottom: 10px; }
.anvil-bar ~ * .sec-h > i.ti { display: none; }
.anvil-bar ~ * .sec-h .sec-note { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; }
.anvil-bar ~ * .sec-h > .muted:not(.sec-note) { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ah .panel-card { padding: 16px 20px 18px; }
.ah .panel-card.is-invite, .ah .t.is-invite { background: transparent; border: 1.5px dashed var(--line-2); }
.t-more-note { margin-left: auto; font-size: 12.5px; color: var(--muted); }

/* Today. */
.td-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 16px 0 2px; font-size: 13.5px; font-weight: 600; }
.td-nav a { color: var(--muted); text-decoration: none; }
.td-nav a:hover { color: var(--ink); }
.td-nav .today-pick { margin: 0 0 0 auto; }
.td-nav .today-pick input { height: 32px; padding: 0 8px; font-size: 13px; }
.td .vote-list { margin: 0; }
.ah-lower.is-single { grid-template-columns: minmax(0, 1fr); }

/* List pages (Bills, BDRs, Legislators): the search is the lead tile's one control; everything else
   folds under "More filters" (open on its own when a filter is in use). */
.lst-hero .ah-lede { max-width: 62ch; }
.lst-search { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lst-q { display: flex; align-items: center; max-width: 660px; padding: 4px 4px 4px 14px; background: var(--surface);
    border: 1px solid var(--line-2); border-radius: 12px; }
.lst-q > i { color: var(--muted); font-size: 17px; }
.lst-q input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 9px 10px; font-size: 16px; }
.lst-q input:focus { outline: none; box-shadow: none; }
.lst-q:focus-within { border-color: var(--steel); box-shadow: 0 0 0 3px var(--steel-100); }
.lst-q .btn { border-radius: 9px; }
.lst-more > summary { list-style: none; cursor: pointer; width: max-content; font-size: 13px; font-weight: 600; color: var(--muted); }
.lst-more > summary::-webkit-details-marker { display: none; }
.lst-more > summary::after { content: " ▾"; font-size: 11px; }
.lst-more[open] > summary::after { content: " ▴"; }
.lst-more > summary:hover { color: var(--ink); }
.lst-on { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--steel); color: var(--steel-ink); }
.lst-more .fb-fields { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.lst .fb-ranges { align-self: flex-start; }
.lst .fb-range.on, .lst .fb-range.on:hover { background: var(--steel); color: var(--steel-ink); }
.lst-aside { margin: 12px 0 0; font-size: 13px; }
.lst-aside a { color: var(--muted); }
.lst-aside a:hover { color: var(--ink); }
.lst-count { margin: 20px 4px 8px; font-size: 12.5px; color: var(--muted); }
.lst .bill-list { border-radius: 14px; }
.lst-table { padding: 0; overflow: hidden; }
.lst-table .table-scroll { border: 0; border-radius: 0; margin: 0; }

/* Party balance: one bar per house, a tick at the bare majority. */
.t-balance { grid-column: span 4; }
.bal { margin-top: 16px; }
.bal-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 7px; font-size: 12.5px; color: var(--muted); }
.bal-h b { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.bal-bar { position: relative; display: flex; height: 16px; border-radius: 8px; background: var(--line); }
.bal-bar > span:first-child { border-radius: 8px 0 0 8px; }
.bal-bar > span:last-of-type { border-radius: 0 8px 8px 0; }
.bal-bar > span:only-of-type { border-radius: 8px; }
.bal-D { background: #3b82f6; }
.bal-R { background: #ef4444; }
.bal-bar > span:not(.bal-D):not(.bal-R), .bal-key i:not(.bal-D):not(.bal-R) { background: var(--muted); }
.bal-half { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.bal-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.bal-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.bal-key b { color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.bal-foot { margin: 16px 0 0; font-size: 12px; color: var(--muted); }

/* The month grid's entries: time first, two lines before they clip, today's cell ringed. */
.cal-hero .cal-mast { margin: 0 0 12px; }
.cal-hero .cal-filters { margin: 0; }
.anvil-cal .ev-cal-item { padding: 3px 7px; border-radius: 6px; white-space: normal; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.anvil-cal .ev-cal-time { font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 2px; }
.anvil-cal .ev-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--steel); }

/* Committees: Assembly and Senate side by side (the Assembly has more, so it gets more room). */
.cm-houses { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 14px; margin-top: 14px; align-items: start; }
.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 11px 0; border-top: 1px solid var(--line); }
.cm-list li:first-child { border-top: 0; }
.cm-name { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.cm-name:hover { text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 3px; }
.cm-abbr { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.cm-list .ah-meta { margin-top: 3px; }
.cm-list .ah-meta a { color: inherit; }
.cm-held { display: grid; justify-items: end; text-align: right; line-height: 1.1; min-width: 64px; }
.cm-held b { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); }
.cm-held span { font-size: 11.5px; color: var(--muted); }
.cm-held em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--steel); margin-top: 2px; }
.cm-none { color: var(--line-2); font-size: 18px; }
.cm-pending { margin-top: 14px; padding: 22px 24px; }
.cm-pending-line { margin: 6px 0 0; font-family: var(--serif); font-size: 18px; color: var(--ink-2); }
.cm .interim-next { margin-top: 14px; }
.cm .interim-h { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 24px 4px 8px; }
@media (max-width: 860px) { .cm-houses { grid-template-columns: minmax(0, 1fr); } }

/* A legislator. */
.lg-who { display: flex; gap: 18px; align-items: center; margin-bottom: 10px; }
.lg-photo { width: 84px; height: 104px; object-fit: cover; border-radius: 10px; border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line-2), 4px 5px 0 color-mix(in srgb, var(--steel) 30%, transparent); }
.lg-hero .ah-title { margin: 0 0 6px; }
.lg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lg-tags .party { font-size: 12px; padding: 2px 8px; }
.lg-status { font-size: 14px; }
.lg .leg-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.lg-nelis { font-size: 13px; color: var(--muted); }
.lg-offices { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* Calendar (month) and the committee week. */
.cal-mast { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; margin: 2px 0 16px; }
.cal-mast .ah-title { margin-bottom: 6px; }
.cal-mast .ah-lede { margin: 0; }
.cal-year { color: var(--muted); font-weight: 500; }
.cal-nav { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.cal-nav a { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cal-nav a:hover { color: var(--ink); background: var(--surface-2); }
.cal-page .cal-filters { margin-bottom: 12px; }
.anvil-cal.t { padding: 0; overflow: hidden; }
.anvil-cal .ev-cal-head span { font-size: 10.5px; letter-spacing: .12em; font-weight: 800; color: var(--muted); }
.anvil-cal .ev-cal-num { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }
.anvil-cal .ev-cal-day:first-child, .anvil-cal .ev-cal-day:last-child { background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.anvil-cal .ev-cal-day.is-out { background: var(--bg); }
.wk-page .week-day { border-radius: 14px; padding: 12px 14px; }
.wk-page .week-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: inherit; }
.wk-page .week-h .ag-date { width: 46px; flex: none; }
.wk-dayname { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; color: var(--ink); }
.wk-dayname em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.wk-page .week-day.is-today .ag-date { background: var(--steel); border-color: var(--steel); }
.wk-page .week-day.is-today .ag-date b, .wk-page .week-day.is-today .ag-date span, .wk-page .week-day.is-today .ag-date small { color: var(--steel-ink); }
.ah-lower.is-single > .ah-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: start; }

/* The bill page. */
.bp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.bp-id .bill-num { font-size: 16px; }
.bp-title { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.18;
    letter-spacing: -.008em; margin: 0 0 10px; color: var(--ink); max-width: 30ch; }
.bp-latest { font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; margin-top: 8px; }
.bp-latest b { color: var(--steel); margin-right: 4px; }
.bp-hero .track { margin-top: 18px; max-width: none; }
.bp-hero .track li:not(.t-done)::after { background: var(--surface); }
.bp-src { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.bp-src a { color: var(--muted); }
.bp-src a:hover { color: var(--ink); }
.bp .timeline { max-height: none; overflow: visible; }
.bp-more { margin-top: 2px; }
.bp-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px 14px; }
.bp-more > summary:hover { color: var(--ink); }
.bp-digest { background: var(--surface-2); }
.bp-digest .digest p { font-family: var(--serif); font-size: 16px; line-height: 1.62; color: var(--ink); }

/* The big-number tile takes the colour of what the number means. */
.clock-num.is-date { font-size: clamp(54px, 5.6vw, 76px); }
.clock-num small.pre { font-size: .34em; letter-spacing: 0; margin-right: 8px; opacity: .8; vertical-align: .9em; }
.t-clock.tone-law { background: color-mix(in srgb, var(--green) 82%, #000); border-color: transparent; color: #fff; }
.t-clock.tone-bad { background: color-mix(in srgb, var(--red) 84%, #000); border-color: transparent; color: #fff; }
.t-clock.tone-law .t-label, .t-clock.tone-bad .t-label { color: rgba(255, 255, 255, .78); }
.t-clock.tone-law .clock-foot, .t-clock.tone-bad .clock-foot { border-top-color: rgba(255, 255, 255, .3); }
.t-clock.tone-dead { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.t-clock.tone-dead .t-label { color: var(--muted); }
.t-clock.tone-dead .clock-foot { border-top-color: var(--line-2); }

.beat-picks { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.beat-picks legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); padding: 0; margin-bottom: 4px; }
.beat-pick { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line-2);
    border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); }
.beat-pick:has(input:checked) { background: var(--steel-50); border-color: var(--steel); color: var(--steel-800); font-weight: 600; }
.beat-pick input { margin: 0; }
.t-act { white-space: nowrap; text-align: right; width: 1%; }
.t-act form { margin: 0; }
.unfollow-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px;
    font-weight: 600; cursor: pointer; }
.unfollow-btn:hover { border-color: var(--red); color: var(--red); }
a.t-link { color: var(--ink); }
a.t-link:hover { color: var(--steel); text-decoration: none; }
a.row-link { display: block; color: var(--ink); text-decoration: none; }
a.row-link:hover .row-link-text { color: var(--steel); }
a.row-link:hover .bill-tag { border-color: var(--steel); }
@media (max-width: 700px) { .anvil-tools { max-width: none; flex-basis: 100%; } }

/* ---- Anvil's remaining pages (v3.24): the desk, the drafts, the people ---------------------- */
/* A pill group that marks where you are (inbox trays, whip scope). */
.cal-nav a.on { background: var(--steel); color: var(--steel-ink); }
.cal-nav a b { font-family: var(--serif); font-weight: 600; margin-left: 3px; }
/* A quiet text button, for row actions that shouldn't shout. */
.trk-act { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
    cursor: pointer; text-decoration: none; white-space: nowrap; }
.trk-act:hover { color: var(--ink); }
.trk-act.danger:hover { color: var(--red); }

/* My bills: live ones on a tile, finished ones on a quieter one. */
.trk-lists { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.trk-list.is-done { background: transparent; }
.trk-list.is-done .ah-sum { color: var(--ink-2); font-weight: 400; }
.trk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; padding-top: 1px; }
.trk-side form { margin: 0; }
.trk-when { font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.trk-when b { display: block; font-size: 13px; color: var(--ink); }
.ah-bills li.is-conflict { margin: 0 -20px; padding-left: 17px; padding-right: 20px; border-left: 3px solid var(--red); }
.trk-warn { margin: 5px 0 0; font-size: 12.5px; font-weight: 700; color: var(--red); }
.trk-note { margin: 5px 0 0; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.trk-note b { font-family: system-ui, sans-serif; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.trk-empty { margin-top: 14px; }

/* Watch. */
.wt-trays { margin-top: 18px; width: max-content; max-width: 100%; flex-wrap: wrap; }
.wt-why { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-2); }
.wt-why mark { background: color-mix(in srgb, var(--amber) 26%, transparent); color: var(--ink); padding: 0 4px; border-radius: 3px; }
.wt-hits .hit-actions form { flex-direction: column; align-items: stretch; margin: 0; }
.wt-list { list-style: none; margin: 0; padding: 0; }
.wt-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.wt-list li:first-child { border-top: 0; padding-top: 6px; }
.wt-list li.is-off { opacity: .6; }
.wt-name strong { font-size: 15px; }
.wt-terms { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0; }
.wt-terms span { font-family: var(--mono); font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.wt-acts { margin-left: auto; display: inline-flex; gap: 12px; }
.wt-acts form { margin: 0; }
.wt-new .stacked-form { margin-top: 8px; }
.wt-first { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; margin-top: 14px; align-items: start; }
.wt-steps { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: step; }
.wt-steps li { position: relative; padding: 10px 0 10px 40px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-2); counter-increment: step; }
.wt-steps li:first-child { border-top: 0; }
.wt-steps li::before { content: counter(step); position: absolute; left: 0; top: 4px; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--steel); line-height: 1.2; }
.wt-steps b { color: var(--ink); }
@media (max-width: 860px) { .wt-first { grid-template-columns: minmax(0, 1fr); } }

/* Clients / beats / issues: a tile each, the count as a big numeral. */
.cl-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 680px; }
.cl-add input { flex: 2 1 220px; min-width: 0; }
.cl-add input + input { flex: 1 1 160px; }
.cl-grid, .acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; margin-top: 14px; }
.cl-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.cl-card:hover { border-color: var(--steel); transform: translateY(-1px); }
.cl-card.is-off { opacity: .6; }
.cl-name { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; margin: 0; color: var(--ink); }
.cl-contact { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.cl-n { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.cl-n b { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1; color: var(--ink); margin-right: 3px; }
.cl-bar { display: flex; height: 6px; margin: 10px 0 0; border-radius: 3px; overflow: hidden; background: var(--line); }
.cl-bar .is-support { background: var(--green); }
.cl-bar .is-oppose { background: var(--red); }
.cl-bar .is-other { background: var(--line-2); }
.cl-split { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.cl-cta { margin: auto 0 0; padding-top: 16px; font-size: 13px; font-weight: 600; color: var(--steel); }
.cl-first { margin-top: 14px; }
.cl-first-line { margin: 6px 0 0; font-family: var(--serif); font-size: 18px; color: var(--ink-2); }

/* A client report: one sheet of paper, in Anvil's type. */
.rp-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rp-bar .ah-dateline { margin: 0; }
.rp-bar .ah-dateline a { color: inherit; }
.rp-acts { display: flex; gap: 8px; }
.rp .report { border-radius: 14px; padding: 30px 36px; }
.rp .report-head { border-bottom: 3px double var(--line-2); padding-bottom: 16px; }
.rp .report-kicker { letter-spacing: .14em; }
.rp .report-head h1 { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 40px); font-weight: 600; line-height: 1.08; margin: 2px 0 4px; }
.rp .report-tally { gap: 22px; }
.rp .report-tally strong { font-family: var(--serif); font-size: 36px; font-weight: 600; line-height: 1; }
.rp .report-sec h2 { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 0 0 10px; }
.rp-n { font-family: var(--serif); font-size: 17px; letter-spacing: 0; color: var(--ink); margin-left: 4px; }
.rp .report-foot { font-family: var(--serif); font-style: italic; }
.rp-edit { margin-top: 22px; border-radius: 14px; }

/* A committee. */
.cmd-title { max-width: 26ch; }
.cmd .ah-dateline a, .wp .ah-dateline a { color: inherit; }

/* The whip count. */
.wp-bill { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 70ch; }
.wp-bill a { font-weight: 700; color: var(--ink); margin-right: 4px; }
.wp-hero .wt-bar { margin: 16px 0 0; }
.wp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.wp-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.wp-key-line { margin-left: auto; font-weight: 700; color: var(--ink-2); }
.wp-controls { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.wp-controls .cal-nav { flex-wrap: wrap; }
.wp-table { margin-top: 14px; }

/* Team. */
.tm-list, .tm-reqs { list-style: none; margin: 0; padding: 0; }
.tm-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 11px 0; border-top: 1px solid var(--line); }
.tm-list li:first-child, .tm-reqs li:first-child { border-top: 0; }
.tm-list form { margin: 0; }
.tm-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
    border: 1px solid var(--line-2); font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tm-who strong { font-size: 15px; }
.tm-who .ah-meta { margin-top: 2px; }
.tm-reqs li { padding: 10px 0; border-top: 1px solid var(--line); }

/* Anvil accounts and the locked door. */
.acc-card { display: flex; flex-direction: column; }
.acc-card.is-open { border-color: var(--steel); box-shadow: inset 4px 0 0 var(--steel); }
.acc-card.is-off { opacity: .6; }
.acc-card .cl-name { margin-top: 4px; }
.acc-act { margin-top: auto; padding-top: 14px; }
.acc-act form { margin: 0; }
.clock-num.acc-now { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.01em; }
.lk { max-width: 860px; }
.lk-hero { padding-bottom: 22px; }

/* The committee week's days sit under its lead tiles. */
.wk-page .week { margin-top: 14px; }

@media (max-width: 700px) {
    .rp .report { padding: 18px 16px; }
    /* On a phone a followed bill / a match reads top to bottom: number, summary, then when and what to do. */
    .ah-bills.trk-rows li, .ah-bills.wt-hits li { grid-template-columns: minmax(0, 1fr); }
    .ah-bills.trk-rows .bill-tag, .ah-bills.wt-hits .bill-tag { margin-bottom: 4px; }
    .trk-side { grid-column: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;
        gap: 6px 14px; margin-top: 8px; text-align: left; }
    .trk-when b { display: inline; margin-right: 4px; }
    .wt-hits .hit-actions { grid-column: 1; margin-top: 8px; }
    .wt-hits .hit-actions form { flex-direction: row; }
    .wp-key-line { margin-left: 0; }
}
@media (max-width: 600px) {
    .ah-bills li.is-conflict { margin: 0 -16px; padding-left: 13px; padding-right: 16px; }
}
@media print {
    .rp .report { border: 0; padding: 0; }
    .rp-bar, .rp-edit { display: none !important; }
}

/* ---- Roll calls: who voted how ---- */
.rollcall { border-top: 1px solid var(--line); padding: 8px 0; }
.rollcall:first-child { border-top: 0; padding-top: 0; }
.rollcall > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rollcall > summary::-webkit-details-marker { display: none; }
.rollcall > summary::marker { content: ""; }
.rollcall > summary:hover .rc-title strong { color: var(--steel); }
.rc-open { margin-left: auto; }
.rollcall[open] .rc-open i { transform: rotate(180deg); }
.rc-close { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.rc-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; margin-top: 8px; }
.rc-side h4 { margin: 0 0 4px; font-size: 13px; }
.rc-side ul { list-style: none; margin: 0; padding: 0; font-size: 13px; columns: 2 150px; column-gap: 14px; }
.rc-side li { break-inside: avoid; padding: 1px 0; }
.rc-yea h4 { color: var(--green); }
.rc-nay h4 { color: var(--red); }
.rc-result { margin: 6px 0 0; }
.rc-loading i { display: inline-block; animation: rcspin 1s linear infinite; }
@keyframes rcspin { to { transform: rotate(360deg); } }
.vote-choice { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
    background: var(--surface-2); color: var(--ink-2); }
.vc-yea { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.vc-nay { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
@media (prefers-reduced-motion: reduce) { .rc-loading i { animation: none; } }

/* ---- Sortable table headers (table.sortable — any table can opt in) ---- */
th.sort-th { padding: 0; }
.sort-btn { display: flex; align-items: center; gap: 5px; width: 100%; padding: 10px 14px; border: 0; background: none;
    font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.sort-btn::after { content: "↕"; font-size: 11px; opacity: .3; }
.sort-btn:hover { color: var(--ink); }
.sort-btn:hover::after { opacity: .7; }
th[aria-sort="ascending"] .sort-btn::after { content: "▲"; opacity: .85; }
th[aria-sort="descending"] .sort-btn::after { content: "▼"; opacity: .85; }
th[aria-sort] .sort-btn { color: var(--ink); }
.sort-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
@media print { .sort-btn::after { content: none; } }
.leg-status { margin: 4px 0 0; font-size: 13.5px; color: var(--amber); }
.leg-offices { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; }