/* Self-hosted Archivo/Barlow (readiness plan §1.7). Previously loaded from
   fonts.googleapis.com/fonts.gstatic.com on every page -- including
   journey-token pages, where that made the token-bearing URL a Referer
   candidate to a third party. WOFF2 files under static/fonts/ are the
   "latin" subset only (Latin-1 + common punctuation/symbols): sufficient
   for this app's English recruiting content; latin-ext and vietnamese
   subsets were not carried over. Both families are OFL-licensed. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/archivo-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/static/fonts/archivo-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/static/fonts/archivo-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/static/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/barlow-700.woff2') format('woff2');
}

/* Phoenix Insurance funnel prototype — "1B" design system (2026-07-12).
   Implements the approved Claude Design direction (Phoenix App Pages.dc.html):
   Archivo/Barlow type, flame-orange gradient CTAs, tinted selectable option
   rows, score bars + rings, styled chat bubbles, dark gradient hero.
   Token values + WCAG rationale: clients/phoenix-insurance/brand/brand.json.

   Computed contrast ratios (WCAG 2.1 AA):
     --ink (#17171A) on --base (#FFFFFF):        17.89:1  (passes AA/AAA, any size)
     --slate (#4A4A52) on --base:                 8.78:1  (passes AA/AAA, any size)
     --muted (#6B6B73) on --base:                 5.28:1  (passes AA normal text)
     --link (#B9500B) on --base:                  4.98:1  (passes AA normal text)
     white on --link (#B9500B):                   4.98:1  (passes AA normal text —
                                                  used for SMALL solid buttons)
     white on --flame-bottom (#E15D0A):           3.64:1  (passes AA large-bold only,
                                                  >=18.66px/700 — used for LARGE
                                                  gradient CTAs at 1.2rem/700)
     white on --green (#1F5C3A):                  7.92:1  (passes AA/AAA)
     --amber-text (#7a5a00) on #FBF1DD tint:      ~5.6:1  (passes AA normal text)
     --flame-text (#994009) on #FCEEE1 tint:       5.97:1  (passes AA normal text —
                                                  role-card monogram badges; replaces
                                                  --flame-orange there, 2.74:1, failing)
   #8A8A93 (--faint) is reserved for decorative info only (e.g. timeline
   timestamps) — never sole-source text, and confirmed to fail AA (2.73:1
   on white) by the Phase 5 readiness-plan axe-core harness. Question
   kickers and the screener typing indicator were moved to --muted after
   that harness flagged them as real, sighted-visible text, not
   decoration; --faint's remaining uses have not been re-audited by that
   harness (out of its seven declared surfaces) and should not be assumed
   safe. */

:root {
    --flame-orange: #EE6B0B;
    --flame-top: #F7A11E;
    --flame-bottom: #E15D0A;
    --ember-red: #CC3A1E;
    --gold-spark: #F5A623;
    --ink: #17171A;
    --slate: #4A4A52;
    --muted: #6B6B73;
    --faint: #8A8A93;
    --section-tint: #F4F7FB;
    --panel-tint: #F7F8FB;
    --base: #FFFFFF;
    --link: #B9500B;
    --border: #E2E1E5;
    --border-soft: #ECEBEE;
    --input-border: #D8D6DA;
    --track: #EDECEF;
    --sel-bg: #FCF2E8;
    --sel-border: #EE6B0B;
    --chip-warm-bg: #FCF2E8;
    --chip-warm-border: #F3D8BC;
    --green: #1F5C3A;
    --green-tint: #E7F0EB;
    --amber-text: #7a5a00;
    --amber-tint: #FBF1DD;
    --amber-border: #EED9A8;
    /* Text-safe darkened warm/orange, for the same reason --amber-text
       exists: --flame-orange (#EE6B0B) on #FCEEE1 measures 2.74:1, which
       fails AA even at large-bold sizes (Phase 5 readiness-plan a11y floor,
       axe-core color-contrast, .mono-warm). Use this token, never
       --flame-orange, whenever warm/orange text sits on a light tint. */
    --flame-text: #994009;

    --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --grad-flame: linear-gradient(180deg, var(--flame-top), var(--flame-bottom));
    --radius-card: 14px;
    --radius-input: 9px;

    --color-success: #1f5c3a;
    --color-warning: #7a5a00;
    --color-danger: var(--ember-red);
    --focus-ring: 3px solid #1a5aa8;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--base);
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

h1 {
    font-weight: 900;
}

h2, h3 {
    font-weight: 800;
}

a {
    color: var(--link);
}

a:hover,
a:focus {
    color: var(--ember-red);
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -3rem;
    left: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: #ffffff;
    text-decoration: none;
    transition: top 0.1s ease-in-out;
}

.skip-link:focus {
    top: 0;
}

/* ---------------------------------------------------------------- header */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 1.1rem 2rem;
    background: var(--base);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
}

.brand:hover,
.brand:focus {
    color: var(--ink);
    opacity: 0.85;
}

.brand-logo {
    display: block;
    height: auto;
    max-width: 200px;
    width: 100%;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.site-nav a {
    color: var(--slate);
    text-decoration: none;
    padding: 0.25rem 0;
}

.site-nav a:hover,
.site-nav a:focus {
    color: var(--link);
}

/* Active page: ink text + flame underline, per the 1B header treatment. */
.site-nav a.nav-active {
    color: var(--ink);
    font-weight: 700;
    border-bottom: 3px solid var(--flame-orange);
    padding-bottom: 3px;
}

/* The nav's Apply link is a compact gradient pill. Small text (<18.66px)
   cannot sit on #E15D0A (3.64:1), so small buttons use solid --link
   (#B9500B, 4.98:1 with white — AA normal text). */
.site-nav a.btn {
    padding: 0.5rem 1.1rem;
    min-height: 0;
    min-width: 0;
    font-size: 0.95rem;
    border-radius: 8px;
    background: var(--link);
    color: #ffffff;
    font-weight: 700;
}

.site-nav a.btn:hover,
.site-nav a.btn:focus {
    text-decoration: none;
    color: #ffffff;
    background: var(--ember-red);
}

.nav-link-secondary {
    font-size: 0.85rem;
    color: var(--muted);
}

.nav-link-secondary:hover,
.nav-link-secondary:focus {
    color: var(--link);
}

.nav-logout-form {
    display: inline;
    margin: 0;
}

.nav-logout-btn {
    border: 0;
    background: transparent;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.nav-logout-btn:hover,
.nav-logout-btn:focus {
    color: var(--link);
}

.form-hint {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 400;
}

.form-error {
    margin: 0 0 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e8b4b4;
    border-radius: 8px;
    background: #fdf2f2;
    color: #8a1f1f;
    font-size: 0.9rem;
}

/* Mobile-first breakpoint: below this, the nav + brand no longer fit on
   one row without cramming (PRD UX-1's phone application target).
   `flex-wrap` above already lets the nav drop to its own row. */
@media (max-width: 480px) {
    .site-header {
        padding: 0.75rem 1rem;
    }

    .site-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 0.35rem 0.85rem;
        font-size: 0.9rem;
    }
}

main {
    padding: 1.75rem 1rem 3.5rem;
}

main.full-width {
    padding: 1.75rem 0 3.5rem 0;
    margin: 0;
}

/* Per-page width containers (1B page grid). */
.page-narrow {
    max-width: 680px;
    margin: 0 auto;
}

.page-mid {
    max-width: 760px;
    margin: 0 auto;
}

.page-wide {
    max-width: 1180px;
    margin: 0 auto;
}

.site-footer {
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
    border-top: 1px solid var(--border-soft);
}

.site-footer p {
    margin: 0.25rem 0;
}

/* ---------------------------------------------------------------- buttons */

/* Large gradient CTA. At 1.2rem/700 the label qualifies as WCAG "large
   text" (>=18.66px bold), which only needs 3:1. The gradient's lighter
   stop (--flame-top, 2.09:1 with white) is confined to a thin gloss
   sliver at the very top via the 12% stop, so glyphs render on the flat
   --flame-bottom region (3.64:1, passing the large-bold threshold). */
.btn {
    display: inline-block;
    padding: 0.8rem 1.7rem;
    min-height: 44px;
    min-width: 44px;
    background: linear-gradient(180deg, var(--flame-top) 0%, var(--flame-bottom) 12%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover,
.btn:focus {
    filter: brightness(0.93);
    color: #ffffff;
}

.btn:focus-visible,
button:focus-visible {
    outline: none;
}

/* Small solid button: white on #B9500B = 4.98:1, AA at any size. */
.btn-sm {
    padding: 0.65rem 1.25rem;
    min-height: 0;
    font-size: 0.9rem;
    border-radius: 9px;
    background: var(--link);
}

.btn-sm:hover,
.btn-sm:focus {
    filter: none;
    background: var(--ember-red);
}

.btn-secondary {
    background: var(--base);
    color: var(--link);
    border: 1px solid var(--input-border);
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--ember-red);
    filter: none;
    background: var(--section-tint);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ---------------------------------------------------------------- forms */

label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin: 1rem 0 0.35rem;
}

input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--base);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-input);
}

.field-error {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
}

/* Supporting copy under a question label — e.g. the reference-only note on the
   target-salary question, which must read as guidance, not as an error. */
.field-help {
    color: var(--slate);
    font-size: 0.85rem;
    margin: 0.2rem 0 0.5rem;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.1rem;
}

@media (max-width: 480px) {
    .field-grid {
        grid-template-columns: 1fr;
    }
}

fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.35rem;
    margin: 1.35rem 0 0;
}

legend {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0 0.4rem;
}

/* Borderless fieldset for pages where each item is its own card. */
.fieldset-plain {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Keep legends in the accessibility tree without visual duplication of
   the styled .part-eyebrow headings that precede them. */
.visually-hidden-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.knockout-question {
    margin-bottom: 1.25rem;
}

.knockout-question > label {
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 0 0.6rem;
}

/* Selectable option rows (1B): bordered card rows that highlight orange
   when their radio is checked. The native radio stays visible (accent-
   colored) so the control works and stays accessible without :has(). */
.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin: 0 0 0.5rem;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
    background: var(--base);
}

.radio-option:hover {
    border-color: var(--flame-orange);
}

.radio-option:has(input:checked) {
    background: var(--sel-bg);
    border-color: var(--sel-border);
}

/* Checkboxes were omitted here until 2026-09-01, so every `.radio-option`
   holding one -- the knockout picker AND the applicant consent control on
   `/apply` -- rendered a browser-default blue box at its own size. The
   missing `min-width` also let it detach from its label inside the flex row,
   leaving a gap between the control and the text it belongs to. */
.radio-option input[type="radio"],
.radio-option input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    margin: 0.15rem 0 0;
    padding: 0;
    accent-color: var(--flame-orange);
}

.option-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.option-grid-2 .radio-option {
    margin: 0;
    align-items: center;
}

@media (max-width: 480px) {
    .option-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Section eyebrows (1B part headers). */
.part-eyebrow {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--link);
    margin: 1.6rem 0 1rem;
}

.item-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    /* --faint (2.7:1 on white) fails AA even at this weight -- axe-core
       flagged "Question N of M" (Phase 5 readiness-plan a11y floor) as a
       real, visible contrast failure, not decorative. --muted (5.28:1)
       is the established readable-secondary-text token elsewhere in this
       stylesheet (e.g. .progress-count). */
    color: var(--muted);
    margin: 0 0 0.5rem;
}

.reading-passage {
    margin: 0 0 0.75rem;
    padding: 0.8rem 0.95rem;
    background: var(--panel-tint);
    border-left: 3px solid var(--flame-orange);
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--slate);
}

/* Progress bar (assessment). */
.progress-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.9rem 0 1.6rem;
}

.progress-track {
    flex: 1;
    height: 8px;
    background: var(--track);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--flame-top), var(--flame-bottom));
    border-radius: 999px;
}

.progress-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- badges */

.badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.badge-simulated {
    background: var(--section-tint);
    color: var(--slate);
    border: 1px solid var(--border);
}

.badge-live {
    background: var(--green);
    color: #ffffff;
}

.badge-warm {
    background: var(--amber-tint);
    color: var(--amber-text);
    border: 1px solid var(--amber-border);
}

.badge-stage-ready {
    background: var(--green);
    color: #ffffff;
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.35rem;
    margin-bottom: 1.1rem;
    background: var(--base);
}

/* ---------------------------------------------------------------- kanban */

.kanban {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 1rem;
    width: 100%;
}

.kanban-column {
    flex: 0 0 260px;
    background: var(--panel-tint);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 0.75rem;
    max-height: 70vh;
    overflow-y: auto;
}

.kanban-column h3 {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin: 0.25rem 0.25rem 0.75rem;
}

.empty-state {
    color: var(--muted);
    font-size: 0.875rem;
    padding: 0.5rem 0.25rem;
}

/* ---------------------------------------------------------------- screener */

.screener-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 1.25rem 0;
}

.chat-bubble {
    max-width: 82%;
    padding: 0.75rem 0.95rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.chat-bubble p {
    margin: 0.25rem 0 0;
}

.chat-bubble-screener {
    align-self: flex-start;
    background: var(--section-tint);
    border: 1px solid #E7E6E9;
    border-radius: 4px 14px 14px 14px;
}

.chat-bubble-candidate {
    align-self: flex-end;
    background: #FFF7F0;
    border: 1px solid var(--chip-warm-border);
    border-radius: 14px 4px 14px 14px;
}

.chat-bubble strong {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.chat-bubble-candidate strong {
    color: var(--link);
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* --faint fails AA (Phase 5 a11y floor, axe-core color-contrast) --
       this text is only hidden via the `hidden` attribute while idle, so
       while visible (screener JS toggles it) it is real, sighted-visible
       text, not decoration. --muted matches .item-kicker's fix above. */
    color: var(--muted);
    font-size: 0.85rem;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C3C2C6;
    animation: typing-pulse 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-pulse {
    0%, 60%, 100% { opacity: 0.35; }
    30% { opacity: 1; }
}

.screener-input-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-end;
    margin-top: 1.25rem;
}

.screener-input-row textarea {
    flex: 1;
}

.screener-input-row .btn {
    flex: none;
}

.screener-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.screener-heading h1 {
    margin: 0;
}

/* ---------------------------------------------------------------- dashboard */

.funnel-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 1rem 1.5rem;
}

.metric-actions {
    gap: 0.5rem;
}

.metric-actions .btn {
    text-align: center;
}

.dashboard-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 1rem 0.75rem;
}

.dashboard-search label {
    margin: 0;
    font-weight: 600;
}

/* Each control is a label + input pair that wraps as a unit, so a narrow
   viewport never strands a label on its own row away from its control.
   The shared `input, select, textarea` rule supplies the visual treatment;
   only the flex sizing lives here. */
.dashboard-search-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 1 auto;
    min-width: 0;
}

.dashboard-search-field-q {
    flex: 1 1 260px;
    min-width: 200px;
}

.dashboard-search-field select {
    min-width: 12rem;
}

.dashboard-search-summary {
    margin: 0 1rem 1rem;
    color: var(--slate);
}

/* An invalid `role`/`stage` re-renders the unfiltered board with this note
   rather than a 422 or the 500 page, so it must read as an explanation of
   what the board is showing -- hence --color-danger text on the page
   background, not a filled alert banner. */
.dashboard-search-error {
    margin: 0 1rem 0.75rem;
    color: var(--color-danger);
    font-weight: 600;
}

/* Stage-aware next-step CTA on the candidate detail page */
.next-step {
    border-left: 3px solid var(--flame-orange);
}

.metric-tile {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--panel-tint);
}

.metric-value {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.candidate-card {
    display: block;
    text-decoration: none;
    color: var(--ink);
    background: var(--base);
}

.candidate-card:hover,
.candidate-card:focus {
    border-color: var(--flame-orange);
    box-shadow: 0 10px 24px -14px rgba(225, 93, 10, 0.5);
}

.candidate-card-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

.candidate-summary {
    color: var(--muted);
    font-size: 0.9rem;
}

.decline-reason {
    color: var(--color-danger);
    font-weight: 600;
}

/* ------------------------------------------------------------- detail page */

.detail-head {
    display: flex;
    gap: 1.1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.detail-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    background: #EFEFF1;
    color: var(--slate);
}

.detail-avatar.tint-ready {
    background: var(--green-tint);
    color: var(--green);
}

.detail-avatar.tint-review {
    background: var(--amber-tint);
    color: var(--amber-text);
}

.detail-head-main {
    flex: 1;
    min-width: 220px;
}

.detail-head-main h1 {
    margin: 0;
    font-size: 1.6rem;
}

.detail-head .btn {
    white-space: nowrap;
}

.back-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 0.9rem;
}

.back-link:hover,
.back-link:focus {
    color: var(--link);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 700px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-grid .card {
    margin-bottom: 0;
}

.detail-side {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Score-bar breakdown rows (detail + brief). */
.score-bars {
    margin: 0;
}

.score-bar-row {
    margin-bottom: 0.8rem;
}

.score-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.score-bar-labels .score-name {
    font-weight: 600;
}

.score-bar-labels .score-val {
    font-weight: 700;
    color: var(--slate);
}

.score-bar-track {
    height: 8px;
    background: var(--track);
    border-radius: 999px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--flame-top), var(--flame-bottom));
    border-radius: 999px;
}

.composite-headline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.composite-headline h2 {
    margin: 0;
    font-size: 1rem;
}

.composite-headline .composite-num {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
}

.composite-num.band-advance { color: var(--green); }
.composite-num.band-review { color: var(--amber-text); }
.composite-num.band-decline { color: var(--slate); }

.composite-total {
    font-size: 0.95rem;
}

.kv-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.kv-list .kv-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.kv-list .kv-row span:first-child {
    color: var(--slate);
}

.kv-list .kv-row span:last-child {
    font-weight: 700;
}

.score-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}

.score-table th,
.score-table td {
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.9rem;
}

.event-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-timeline li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #EEEDF0;
}

.event-timeline li::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--flame-orange);
}

.event-type {
    font-weight: 600;
    font-size: 0.9rem;
}

.event-time {
    margin-left: auto;
    color: var(--faint);
    font-size: 0.8rem;
}

.webhook-payload {
    margin-top: 0.75rem;
}

.webhook-json {
    background: var(--ink);
    color: #ffffff;
    padding: 0.9rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.8rem;
}

/* ------------------------------------------------------------- brief page */

.brief-eyebrow {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--link);
    margin-bottom: 0.5rem;
}

.brief-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 1.35rem;
    margin-bottom: 1.5rem;
}

.brief-head h1 {
    margin: 0 0 0.35rem;
    font-size: 2rem;
}

.score-ring-wrap {
    text-align: center;
}

.score-ring {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.score-ring-inner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--base);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
}

.score-ring-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--green);
    margin-top: 0.4rem;
    text-transform: uppercase;
}

.brief-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.35rem;
    margin-bottom: 1.35rem;
}

@media (max-width: 640px) {
    .brief-grid {
        grid-template-columns: 1fr;
    }
}

.brief-col-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin: 0 0 0.85rem;
}

.brief-col-title.title-strengths { color: var(--green); }
.brief-col-title.title-focus { color: var(--link); }

.brief-point {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.55rem;
}

.brief-point .point-mark {
    font-weight: 800;
    margin-top: 1px;
}

.brief-point .mark-strength { color: var(--green); }
.brief-point .mark-focus { color: var(--link); }

.brief-flags {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.35rem;
    font-size: 0.9rem;
}

.brief-flags.flags-clear {
    background: var(--green-tint);
}

.brief-flags.flags-present {
    background: var(--amber-tint);
    border: 1px solid var(--amber-border);
}

.brief-flags ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.brief-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}

/* ------------------------------------------------------------- landing */

.landing-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #17171A 0%, #4a2a10 55%, #E15D0A 132%);
    color: #ffffff;
    padding: 3rem 2rem 2.75rem;
    border-radius: var(--radius-card);
}

.landing-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(247, 161, 30, 0.35), transparent 70%);
    pointer-events: none;
}

.landing-hero .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 660px;
}

.landing-hero .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFCF9A;
    margin-bottom: 0.9rem;
}

.landing-hero h1 {
    margin: 0 0 0.9rem;
    font-size: 2.35rem;
    line-height: 1.05;
}

.landing-hero .lede {
    margin: 0 0 1.4rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #EDE7E2;
    max-width: 52ch;
}

/* Hero CTA: ink text on white — 17.9:1, passes everything. */
.btn-hero {
    display: inline-block;
    color: var(--ink);
    background: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 9px;
    padding: 0.85rem 1.6rem;
    text-decoration: none;
}

.btn-hero:hover,
.btn-hero:focus {
    color: var(--ink);
    background: var(--section-tint);
}

.trust-strip {
    display: block;
    padding: 0.9rem 1.35rem;
    margin: 1rem 0 1.5rem;
    background: var(--panel-tint);
    border: 1px solid #E9E8EB;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
}

.role-mono {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    background: #EFEFF1;
    color: var(--slate);
}

.role-type {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--link);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.landing-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .landing-detail-grid {
        grid-template-columns: 1fr;
    }
}

.landing-panel {
    background: var(--panel-tint);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 1.35rem;
}

.landing-panel h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.landing-panel p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--slate);
    line-height: 1.55;
}

.benefits-section {
    margin-top: 0.85rem;
}

.benefits-section p {
    margin: 0 0 0.85rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1.1rem;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--ink);
}

.benefits-list li::before {
    content: "\2713";
    color: var(--flame-orange);
    font-weight: 800;
}

.landing-cta {
    text-align: center;
    margin: 1.75rem 0 0.5rem;
}

/* One line and one button to the marketing careers page, in the slot the
   role grid used to fill (plan 2026-09-23, Phase 2). */
.landing-careers-link {
    text-align: center;
    margin: 1.25rem 0 1.9rem;
}

.landing-careers-link p {
    margin: 0 0 0.75rem;
}

/* ------------------------------------------------------------- campaigns */

.campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.campaign-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: box-shadow 0.12s ease;
}

.campaign-card:hover {
    box-shadow: 0 12px 28px -16px rgba(23, 23, 26, 0.4);
}

.campaign-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.25rem;
}

.campaign-media {
    aspect-ratio: 1 / 1;
    background: var(--section-tint);
    overflow: hidden;
}

.campaign-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.campaign-media.media-fallback::after {
    content: "Sample creative";
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--muted);
    font-size: 0.85rem;
}

.campaign-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--section-tint);
    border: 1px solid #E7E6E9;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

.tag-platform {
    color: var(--link);
    background: var(--chip-warm-bg);
    border-color: var(--chip-warm-border);
    font-weight: 700;
}

.tag-validation {
    color: #7a5a00;
    background: #FBF1DD;
    border-color: #EED9A8;
    font-weight: 700;
}

.campaign-card h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.campaign-hook {
    margin: 0;
    font-size: 1rem;
    font-style: italic;
    font-weight: 600;
    color: var(--link);
    line-height: 1.35;
}

.campaign-primary-text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--slate);
    line-height: 1.5;
}

.campaign-creative {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}

.campaign-creative strong {
    color: var(--ink);
}

.campaign-validation {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid #EED9A8;
    border-radius: 8px;
    background: #FBF1DD;
    color: #7a5a00;
    font-size: 0.8rem;
    line-height: 1.45;
}

.campaign-hashtags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    padding: 0;
    margin: 0;
}

.campaign-hashtags li {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--link);
}

/* Required-field markers for the operator admin forms.
   The 2026-07-30 QA pass found "Register an experiment" labelling optional
   fields "(optional)" while required fields carried no marker at all, so a
   blank `control_copy_version` silently blocked submission. Driven off the
   `required` attribute with `:has()` so the marker cannot drift from the
   validation: adding `required` to a field marks it automatically. `required`
   already conveys the state to assistive tech, so the asterisk is visual only. */
.required-note {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 0.75rem;
}

/* `::before`, not `::after`: these labels wrap their control, so an `::after`
   marker would land past the input instead of beside the label text. */
.campaign-create-form label:has(> input[required])::before,
.campaign-create-form label:has(> select[required])::before,
.campaign-create-form label:has(> textarea[required])::before {
    content: "* ";
    color: var(--color-danger);
    font-weight: 700;
}

/* `::after`, not `::before`: the Approve / Request-changes forms use sibling
   `<label for=...>` + `<input>` markup rather than a wrapping label, so the
   control isn't a descendant of the label for `:has(>...)` to match, and a
   leading `::before` marker would land in front of the label text instead of
   beside it. */
form.card > label:has(+ input[required])::after,
form.card > label:has(+ textarea[required])::after {
    content: " *";
    color: var(--color-danger);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Header navigation (2026-08-31, revised)

   Matches thephoenixinsurance.com's own header rather than inventing a
   second visual language: a short row of bold slate items, each group behind
   a labelled dropdown with a chevron, flame-orange for the current section,
   and the CTA as the site's signature gradient pill. The previous flat strip
   of eleven links was reported as "very busy" -- it was.

   Built on <details>/<summary>, which is a disclosure widget natively: it
   opens with Enter or Space, is announced correctly, and works with JS off.
   `static/app.js` adds only the niceties (Escape, outside-click, one open at
   a time).
--------------------------------------------------------------------------- */

.site-nav {
    gap: 0.5rem 1.75rem;
}

/* --- Dropdown trigger ---------------------------------------------------- */

.nav-menu {
    position: relative;
}

.nav-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--slate);
    font-weight: 600;
    padding: 0.25rem 0;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}

/* The default disclosure triangle, replaced by the chevron below. */
.nav-menu-trigger::-webkit-details-marker { display: none; }
.nav-menu-trigger::marker { content: ""; }

/* Chevron, rotating to point up when the panel is open -- the affordance the
   live site uses on About / Auto / Personal / Business. */
.nav-menu-trigger::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform 120ms ease;
}

.nav-menu[open] > .nav-menu-trigger::after {
    transform: translateY(0.08em) rotate(-135deg);
}

.nav-menu-trigger:hover,
.nav-menu-trigger:focus-visible {
    color: var(--link);
}

.nav-menu-trigger:focus-visible {
    outline: 2px solid var(--flame-orange);
    outline-offset: 3px;
    border-radius: 3px;
}

.nav-menu-trigger.nav-active {
    color: var(--ink);
    font-weight: 700;
}

/* --- Dropdown panel ------------------------------------------------------ */

.nav-menu-panel {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: -0.9rem;
    z-index: 40;
    min-width: 15.5rem;
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0;
    background: var(--base-white, #ffffff);
    border: 1px solid var(--border, #E2E1E5);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(23, 23, 26, 0.13);
}

.nav-menu-panel a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

/* Hairline separators between rows, as on the live site's Business menu. */
.nav-menu-panel a + a {
    border-top: 1px solid var(--border-soft, #ECEBEE);
}

.nav-menu-panel a:hover,
.nav-menu-panel a:focus-visible {
    background: var(--chip-bg, #FCF2E8);
    color: var(--link);
}

.nav-menu-panel a.nav-menu-current {
    color: var(--link);
    box-shadow: inset 3px 0 0 var(--flame-orange);
}

/* Second line: what the screen is for. Muted token (#6B6B73, 5.28:1) rather
   than the faint decorative one, because this is real information. */
.nav-menu-hint {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted, #6B6B73);
    white-space: normal;
}

/* --- CTA and utility ----------------------------------------------------- */

/* Pushes Apply and the session control to the right, the way the live site
   separates its nav from GET INSURED NOW / Contact Us. */
.site-nav .nav-cta {
    margin-left: auto;
}

@media (max-width: 900px) {
    /* Wrapped rows: `margin-left: auto` would strand the CTA on its own line. */
    .site-nav .nav-cta {
        margin-left: 0;
    }

    /* A panel positioned absolutely inside a wrapped row overflows the
       viewport, so it becomes an inline expansion instead. */
    .nav-menu-panel {
        position: static;
        min-width: 0;
        box-shadow: none;
        border-radius: 8px;
        margin: 0.4rem 0 0.2rem;
    }
}

/* ------------------------------------------------------- roles admin (2026-09-01)

   Reported as "very wonky". Every defect below traced to a missing rule
   rather than to a judgement call, so the fixes are additive and scoped:

   1. There is no generic `table` rule in this stylesheet -- only
      `.score-table`. `/admin/roles` rendered a bare <table> on browser
      defaults, which centred the headers against left-aligned content, sized
      columns from their content (so the knockout <ul> ballooned and squeezed
      the role title), and centred cells vertically, leaving "Open" floating
      in the middle of a ~400px row.
   2. The knockout set rendered as a bulleted <ul> inside a cell -- reference
      detail at the same visual weight as the role's identity, and the sole
      reason a row was ~400px instead of ~90px.
   3. `Retire` was a full `.btn`, while `Edit`/`Apply link` were plain links:
      the irreversible action carried the most visual weight and the
      reversible ones the least.

   Scoped to `.roles-table` rather than bare `table`: the compliance,
   acquisition and campaign screens also render bare tables with the same
   defect, and widening this is a separate, deliberate change.
--------------------------------------------------------------------------- */

.roles-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.roles-table th {
    text-align: left;
    vertical-align: bottom;
    padding: 0.55rem 0.75rem;
    background: var(--panel-tint);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-display);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.roles-table td {
    /* `top`, not the browser default `middle`: a row is as tall as its
       tallest cell, and centring the short cells against it is what produced
       the acres of whitespace around the status badge. */
    vertical-align: top;
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.9rem;
}

.roles-table tr:last-child td {
    border-bottom: 0;
}

.roles-table .col-role { width: 26%; }
.roles-table .col-status { width: 8.5rem; }
.roles-table .col-knockouts { width: auto; }
.roles-table .col-actions { width: 12rem; }

.role-identity {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.role-identity strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}

/* The slug sits under the title rather than in its own narrow column, where
   `account-manager-personal-lines` broke mid-word across two lines. */
.role-identity code {
    font-size: 0.78rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* Knockout keys as chips: the same information, read as a set rather than as
   a paragraph, and it no longer drives the row height. */
.knockout-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.knockout-chips li {
    /* Chips must not wrap: a wrapped chip is several lines tall and puts the
       row height straight back where the bulleted list had it. Compact labels
       (`KNOCKOUT_QUESTION_CHIP_LABELS`) keep them short enough to hold. */
    white-space: nowrap;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: var(--section-tint);
    border: 1px solid var(--border);
    color: var(--slate);
}

.badge-open {
    background: var(--green-tint);
    color: var(--green);
}

.role-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
}

.role-actions form {
    margin: 0;
}

/* The destructive action, deliberately quiet. Still a real button with the
   same label and one click -- it just no longer outweighs Edit. */
.btn-quiet {
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-quiet:hover,
.btn-quiet:focus-visible {
    color: var(--ember-red);
}

/* --- Multi-select option lists -------------------------------------------

   `.radio-option:has(input:checked)` fills the whole row with `--sel-bg` and
   outlines it in `--sel-border`. That is right for a RADIO group, where
   exactly one row is ever selected. The knockout picker is checkboxes with
   most boxes ticked, so the same treatment painted four adjacent rows solid
   orange and the selected state stopped distinguishing anything.

   `.option-multi` keeps the card white and marks selection with a flame rail,
   so a ticked list still reads as a list. Applied only where selection is
   multiple; the applicant-facing radio groups are untouched.
-------------------------------------------------------------------------- */

.option-multi {
    border-left-width: 3px;
}

.option-multi:has(input:checked) {
    background: var(--base);
    border-color: var(--border);
    border-left-color: var(--flame-orange);
}

.option-note {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--chip-warm-bg);
    border: 1px solid var(--chip-warm-border);
    color: var(--flame-text);
}

/* A question that never declines anyone is reference data, not a knockout.
   It previously rendered "Declines on:" with nothing after it. */
.option-note-reference {
    background: var(--section-tint);
    border-color: var(--border);
    color: var(--slate);
}

/* The two licensing wordings are alternatives. The instruction said so in
   prose; this makes the constraint visible in the layout. */
.option-alternatives {
    margin-top: 0.9rem;
    padding: 0.85rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    background: var(--panel-tint);
}

.option-alternatives > p {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 720px) {
    .roles-table,
    .roles-table thead,
    .roles-table tbody,
    .roles-table tr,
    .roles-table td {
        display: block;
        width: auto;
    }

    /* Headers are meaningless once the row stacks; the cells carry their own
       labels below. Hidden from sight AND from the a11y tree together, so a
       screen reader is not read a column header that no longer applies. */
    .roles-table thead {
        display: none;
    }

    .roles-table tr {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border-soft);
    }

    .roles-table td {
        padding: 0.3rem 0;
        border-bottom: 0;
    }
}

/* The page is `.page-wide` so the roles table has room, but a form at 1180px
   is a poor measure to read or fill in. The form card keeps its own width. */
.roles-form-card {
    max-width: 780px;
}

/* The eyebrow can carry an inline badge (e.g. "Operator only"); keep them on
   one baseline with a gap rather than relying on source whitespace. */
.eyebrow:has(.badge) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Campaign Admin field hints and Step 2 orientation strip (2026-09-09)

   The 2026-09-08 operator session found the "Create a campaign" fields gave
   no example of what belonged in them ("this needs like some e.g. text in
   grey") and the page never said which workflow step it was, so the guide
   had to be open in a second tab. `.field-hint` is the grey line under a
   control; the strip lists the Step 2 substeps from _workflow_steps.html as
   chips (same shape as `.chip`) that deep-link into the Workflow Guide. */
.field-hint {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
    margin-top: 0.25rem;
}

.campaign-create-form input::placeholder,
.campaign-create-form textarea::placeholder {
    color: var(--muted);
    opacity: 0.8;
}

.kit-steps {
    margin: 0 0 1.25rem;
}

.kit-steps-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate);
    margin: 0 0 0.4rem;
}

.kit-steps-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.kit-steps-strip a {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--section-tint);
    border: 1px solid #E7E6E9;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    text-decoration: none;
}

.kit-steps-strip a:hover,
.kit-steps-strip a:focus-visible {
    text-decoration: underline;
}

.kit-step-id {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    margin-right: 0.15rem;
}

.kit-steps-note {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0.5rem 0 0;
}

/* Inline checkbox rows (the Platforms picker on Campaign Admin). Without
   this, the generic `label { display: block }` and `input { width: 100% }`
   rules stacked each checkbox above its text at full width, so the boxes
   floated mid-row with the platform names underneath (Michael's 2026-09-09
   review: "these are off center"). Same control sizing as `.radio-option`. */
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem 1.25rem 0.35rem 0;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    margin: 0;
    padding: 0;
    accent-color: var(--flame-orange);
}

.campaign-create-form fieldset .field-hint {
    margin: 0 0 0.5rem;
}