/* Quorus phone app (plan D10).
   Identity: deep ink, capitol gold, civic blue. System fonts only (the CSP
   allows no external fonts), serif for headlines, tabular numerals for every
   time and tally. Classes only: the CSP forbids inline styles. */

/* ---- tokens ------------------------------------------------------------------------- */

:root {
    color-scheme: light dark;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, "New York", "Iowan Old Style", Charter, "Source Serif Pro", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --paper: #f4f1ea;
    --card: #ffffff;
    --card-2: #efebe1;
    --ink: #121a26;
    --ink-2: #3c4657;
    --ink-3: #636d7e;
    --rule: #e3ddd0;
    --rule-2: #cfc6b4;
    --masthead: #121a26;
    --masthead-2: #1b2535;
    --masthead-ink: #f3efe6;
    --masthead-ink-2: #aab3c2;
    --gold: #8a6210;           /* gold as text on paper: AA */
    --gold-strong: #d4a640;    /* gold as a fill or on ink */
    --gold-wash: #f6ebd0;
    --blue: #1d5aa6;
    --blue-wash: #e3edf9;
    --live: #c2321f;
    --live-wash: #fbe6e1;
    --ok: #1d7448;
    --ok-wash: #def1e5;
    --warn: #845400;
    --warn-wash: #fbefd6;
    --quote-bg: #fbf7ec;
    --btn: #121a26;
    --btn-ink: #f7f4ed;
    --btn-off: #d9d3c6;
    --btn-off-ink: #6b665c;
    --focus: #1d5aa6;
    --shadow: 0 1px 2px rgba(18, 26, 38, .05), 0 6px 20px rgba(18, 26, 38, .06);
    --shadow-up: 0 -1px 0 rgba(18, 26, 38, .06), 0 -8px 24px rgba(18, 26, 38, .06);
    --bar: rgba(255, 255, 255, .86);

    --radius: 16px;
    --radius-s: 11px;
    --gutter: 16px;
    --maxw: 640px;
    --mh: 52px;               /* masthead bar height */
    --strip: 0px;             /* replay strip height when shown */
    --tabbar: 58px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0d1219;
        --card: #151c27;
        --card-2: #1b2431;
        --ink: #e9edf3;
        --ink-2: #b6bfcc;
        --ink-3: #8994a5;
        --rule: #243041;
        --rule-2: #334157;
        --masthead: #0a0f15;
        --masthead-2: #121a24;
        --gold: #e5b858;
        --gold-strong: #e0b04c;
        --gold-wash: #2e2410;
        --blue: #86b6f2;
        --blue-wash: #13243a;
        --live: #ff6d59;
        --live-wash: #3a1610;
        --ok: #62d097;
        --ok-wash: #102a1c;
        --warn: #f2bd52;
        --warn-wash: #2f240c;
        --quote-bg: #1a202a;
        --btn: #e0b04c;
        --btn-ink: #121a26;
        --btn-off: #283244;
        --btn-off-ink: #8592a5;
        --focus: #86b6f2;
        --shadow: 0 0 0 1px rgba(0, 0, 0, .2);
        --shadow-up: 0 -1px 0 rgba(255, 255, 255, .05);
        --bar: rgba(16, 22, 31, .88);
    }
}

/* ---- base ---------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background: var(--paper);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: var(--blue); text-underline-offset: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; }
strong { font-weight: 650; }

:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 6px;
}
main:focus-visible, h1:focus-visible { outline: none; }
/* On ink (masthead, replay strip, hero) the focus ring is gold. */
.masthead :focus-visible, .hero :focus-visible, .cta-card:focus-visible { outline-color: #ebc36a; }

.num, time { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 10px;
}
.skip-link:focus { top: calc(env(safe-area-inset-top) + 8px); }

.icon { flex: none; display: block; }

.noscript { padding: 24px; }

/* ---- boot and splash ------------------------------------------------------------------------ */

.boot, .splash {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: var(--masthead);
    color: var(--masthead-ink);
    padding: 24px;
    text-align: center;
}
.boot__mark, .splash__mark { border-radius: 16px; }
.boot__name, .splash__name { font: 700 28px/1 var(--font-serif); letter-spacing: .01em; }
.splash__msg { color: var(--masthead-ink-2); }

/* ---- frame --------------------------------------------------------------------------------------- */

.app { min-height: 100vh; min-height: 100dvh; }
.app--replay { --strip: 34px; }

.main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px var(--gutter) calc(var(--tabbar) + env(safe-area-inset-bottom) + 32px);
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.main--public { max-width: none; padding: 0 0 calc(env(safe-area-inset-bottom) + 32px); }

.masthead {
    position: sticky; top: 0; z-index: 30;
    background: var(--masthead);
    color: var(--masthead-ink);
    padding-top: env(safe-area-inset-top);
}
.masthead__bar {
    display: flex; align-items: center; gap: 6px;
    height: var(--mh);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
}
.masthead__spacer { flex: 1; }

.wordmark {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 0 8px;
    color: var(--masthead-ink); text-decoration: none;
}
.wordmark__mark { border-radius: 7px; }
.wordmark__name { font: 700 21px/1 var(--font-serif); letter-spacing: .015em; }

.masthead__back {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 44px; padding: 0 12px 0 4px;
    background: none; border: 0; border-radius: 10px;
    color: var(--masthead-ink); font-weight: 550; font-size: 16px;
}
.masthead__back:active { background: rgba(255, 255, 255, .08); }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 0; border-radius: 50%; background: none; color: var(--ink-2);
}
.icon-btn:active { background: var(--card-2); }
.icon-btn--masthead { color: var(--masthead-ink-2); }
.icon-btn--masthead:active { background: rgba(255, 255, 255, .08); }
.icon-btn--small { width: 44px; height: 44px; }

/* The persistent replay strip: always on ink, always gold. */
.replay-strip {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: var(--strip);
    padding: 7px var(--gutter);
    border: 0; border-top: 1px solid rgba(224, 176, 76, .18);
    background: linear-gradient(180deg, rgba(212, 166, 64, .16), rgba(212, 166, 64, .09));
    color: #ebc36a;
    font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.replay-strip__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-strip__dot {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    background: #ebc36a;
    animation: pulse-gold 2s ease-out infinite;
}
.replay-strip__dot.is-paused { background: transparent; box-shadow: inset 0 0 0 2px #ebc36a; animation: none; }

/* ---- tab bar -------------------------------------------------------------------------------------- */

.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--bar);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    box-shadow: var(--shadow-up);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__inner {
    display: grid; grid-template-columns: repeat(2, 1fr);
    max-width: var(--maxw); margin: 0 auto; height: var(--tabbar);
}
.tabbar__inner--3 { grid-template-columns: repeat(3, 1fr); }
.tabbar__inner--4 { grid-template-columns: repeat(4, 1fr); }
.tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 44px;
    color: var(--ink-3); text-decoration: none;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    position: relative;
}
.tab.is-active { color: var(--ink); }
.tab.is-active::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: var(--gold-strong);
}
.tab--live { color: var(--live); }
.tab--live.is-active { color: var(--live); }
.tab__icon { position: relative; }
.tab__badge {
    position: absolute; top: -5px; right: -11px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--live); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--card);
}
.live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--live);
    animation: pulse-live 1.8s ease-out infinite;
}
.live-dot--tab { position: absolute; top: -2px; right: -4px; box-shadow: 0 0 0 2px var(--card); }
/* A Quorus reply arrived while you were on another tab. */
.tab__dot {
    position: absolute; top: -2px; right: -5px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gold-strong); box-shadow: 0 0 0 2px var(--card);
}

/* ---- banner, toasts, update ------------------------------------------------------------------------- */

.banner-slot {
    position: fixed; z-index: 40; left: 0; right: 0;
    top: calc(env(safe-area-inset-top) + var(--mh) + var(--strip) + 8px);
    pointer-events: none;
    padding: 0 var(--gutter);
}
.banner {
    pointer-events: auto;
    display: flex; align-items: center; gap: 4px;
    max-width: calc(var(--maxw) - 2 * var(--gutter)); margin: 0 auto;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--rule); border-left: 4px solid var(--gold-strong);
    border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 15, 21, .22);
    animation: drop-in .28s cubic-bezier(.2, .8, .2, 1);
}
.banner__body {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 12px 4px 12px 14px; color: inherit; text-decoration: none;
}
.banner__eyebrow { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.banner__headline { font: 650 16px/1.3 var(--font-serif); }

.toasts {
    position: fixed; z-index: 45; left: 0; right: 0;
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 var(--gutter); pointer-events: none;
}
.app--public .toasts { bottom: calc(env(safe-area-inset-bottom) + 16px); }
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    max-width: 520px; padding: 11px 8px 11px 16px; min-height: 48px;
    background: var(--ink); color: var(--paper);
    border-radius: 12px; box-shadow: 0 10px 28px rgba(10, 15, 21, .28);
    font-size: 15px;
    animation: rise-in .22s ease-out;
}
.toast__action {
    min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: var(--gold-strong); font-weight: 700;
}

.update {
    position: fixed; z-index: 44; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 12px);
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    border: 0; border-radius: 22px;
    background: var(--gold-strong); color: #121a26; font-weight: 700;
    box-shadow: 0 10px 28px rgba(10, 15, 21, .25);
}
.app--public .update { bottom: calc(env(safe-area-inset-bottom) + 16px); }

/* ---- typography -------------------------------------------------------------------------------------- */

.screen-head { margin: 6px 0 22px; display: flex; flex-direction: column; gap: 6px; }
.display { font: 700 34px/1.05 var(--font-serif); letter-spacing: -.012em; }
.title { font: 700 27px/1.15 var(--font-serif); letter-spacing: -.008em; }
.h2 { font: 700 21px/1.25 var(--font-serif); }
.lede { color: var(--ink-2); font-size: 16.5px; }
.lede__new { color: var(--gold); font-weight: 700; text-decoration: none; }
.eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow--date { color: var(--gold); }
.fine { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.hint { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-3); }

/* ---- sections, cards, lists ---------------------------------------------------------------------------- */

.section { margin-top: 28px; }
.section__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
}
.section__link { font-size: 14px; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.section__note { font-size: 13.5px; color: var(--ink-3); margin: -2px 0 10px; }

.card {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.list { overflow: hidden; }
.list > * + * { border-top: 1px solid var(--rule); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack--gap { margin-top: 16px; }

.empty {
    padding: 18px 16px;
    border: 1px dashed var(--rule-2);
    border-radius: var(--radius);
    color: var(--ink-2);
}
.empty__title { font-weight: 650; color: var(--ink); }
.empty__body { margin-top: 4px; font-size: 15px; }

.errorbox {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    margin: 12px 0; padding: 12px 14px;
    border-radius: var(--radius-s);
    background: var(--live-wash); color: var(--live);
    font-weight: 550;
}

.notice {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 12px 0; padding: 12px 14px;
    border-radius: var(--radius-s);
    background: var(--blue-wash); color: var(--ink);
    font-size: 15px; text-decoration: none;
}
.notice .icon { color: var(--blue); margin-top: 2px; }
.notice--ok { background: var(--ok-wash); }
.notice--ok .icon { color: var(--ok); }
a.notice { align-items: center; }
a.notice span { flex: 1; }
a.notice strong { color: var(--ok); }

.skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.skel {
    height: 18px; border-radius: 8px;
    background: linear-gradient(90deg, var(--card-2) 0%, var(--rule) 50%, var(--card-2) 100%) 0 0 / 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
.skel--0 { width: 92%; height: 64px; border-radius: var(--radius); }
.skel--1 { width: 70%; }
.skel--2 { width: 84%; }

.loading { display: flex; justify-content: center; padding: 24px; }
.spinner {
    display: inline-block; width: 20px; height: 20px; flex: none;
    border: 2.5px solid var(--rule-2); border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.spinner--light { border-color: rgba(255, 255, 255, .25); border-top-color: currentColor; }
.spinner--small { width: 15px; height: 15px; border-width: 2px; }

/* ---- buttons and controls ---------------------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 18px;
    border: 1px solid transparent; border-radius: 13px;
    font-size: 16px; font-weight: 650; line-height: 1.2;
    text-decoration: none; text-align: center;
    transition: transform .08s ease, background-color .15s ease, opacity .15s ease;
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .45; }
/* Filled buttons stay opaque when disabled (they can sit over content). */
.btn--primary:disabled, .btn--gold:disabled { opacity: 1; background: var(--btn-off); color: var(--btn-off-ink); }
.btn--primary { background: var(--btn); color: var(--btn-ink); }
.btn--gold { background: var(--gold-strong); color: #121a26; }
.btn--quiet { background: var(--card); color: var(--ink); border-color: var(--rule-2); }
.btn--danger { background: var(--live); color: #fff; }
.btn--danger-text { color: var(--live); }
.btn--block { display: flex; width: 100%; }
.btn--tall { min-height: 60px; justify-content: flex-start; padding: 8px 16px; }
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.btn__sub { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.btn + .btn, .btn--block + .btn--block { margin-top: 10px; }

.linkbtn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 2px;
    border: 0; background: none;
    color: var(--blue); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.linkbtn--center { display: flex; justify-content: center; width: 100%; margin-top: 8px; }

.chipbtn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--rule-2); border-radius: 20px;
    background: var(--card); color: var(--ink);
    font-size: 14.5px; font-weight: 550;
}
.chipbtn[aria-pressed="true"] { background: var(--ok-wash); border-color: transparent; color: var(--ok); }
.chipbtn--quiet { color: var(--ink-3); border-style: dashed; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }

.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 9px;
    border-radius: 12px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.chip--replay { background: var(--gold-wash); color: var(--gold); }
.chip--provisional { background: var(--warn-wash); color: var(--warn); }
.chip--official { background: var(--ok-wash); color: var(--ok); }
.chip--corrected { background: var(--blue-wash); color: var(--blue); }
.chip--watched { background: var(--gold-wash); color: var(--gold); }
.chip--live { background: var(--live-wash); color: var(--live); }
.chip--muted { background: var(--card-2); color: var(--ink-3); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.choice {
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--rule-2); border-radius: 22px;
    background: var(--card); color: var(--ink);
    font-size: 15px; font-weight: 600;
}
.choice--small { min-height: 40px; padding: 0 13px; font-size: 14.5px; }
.choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.segmented {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--card-2); border-radius: 12px;
}
.segmented button {
    min-height: 40px; min-width: 64px; padding: 0 14px;
    border: 0; border-radius: 9px; background: transparent;
    color: var(--ink-2); font-weight: 650;
}
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segmented--rates button { min-width: 52px; padding: 0 10px; }

.field__label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.field__help { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.input {
    display: block; width: 100%;
    min-height: 48px; padding: 11px 14px;
    border: 1px solid var(--rule-2); border-radius: 12px;
    background: var(--card); color: var(--ink);
    font-size: 16px;   /* ≥16px: no zoom on focus in iOS */
}
.input::placeholder { color: var(--ink-3); opacity: .8; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: transparent; }
.input--area { resize: vertical; min-height: 84px; line-height: 1.45; }
.input--big { font-size: 18px; min-height: 132px; padding: 14px 16px; }
.input--code {
    font-family: var(--font-mono); font-size: 28px; font-weight: 600;
    letter-spacing: .2em; text-align: center; text-transform: uppercase;
    min-height: 64px;
}
.inline { display: flex; gap: 8px; }
.inline .input { flex: 1; }
.inline .btn { flex: none; }

.switch { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 52px; height: 32px; margin: 0; cursor: pointer; }
.switch__track {
    flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px;
    background: var(--rule-2); transition: background-color .15s ease;
}
.switch__track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease;
}
.switch input:checked + .switch__track { background: var(--ok); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch input:disabled, .switch:has(input:disabled) { cursor: default; }
.switch input:disabled + .switch__track { opacity: .55; }
.switch__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.switch__text span { color: var(--ink-3); font-size: 13.5px; }

.kbd {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
    padding: 1px 8px; border-radius: 7px;
    background: var(--card-2); border: 1px solid var(--rule);
    font-weight: 650; font-size: 14px;
}

.progress {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; height: 4px; margin: 10px 0 2px;
    border: 0; border-radius: 2px;
    background: linear-gradient(90deg, var(--rule) 0%, var(--gold-strong) 45%, var(--rule) 90%) 0 0 / 220% 100%;
    animation: shimmer 1.3s linear infinite;
}
.progress::-webkit-progress-bar { background: transparent; }
.progress::-moz-progress-bar { background: transparent; }

meter { width: 64px; height: 8px; }
meter::-webkit-meter-bar { background: var(--rule); border: 0; border-radius: 4px; height: 8px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--gold-strong); border-radius: 4px; }

/* ---- live badge, bills -------------------------------------------------------------------------------------- */

.live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
    color: var(--live);
}
.live-badge__dur { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.live-badge--recess { color: var(--warn); }
.live-badge--ended, .live-badge--later { color: var(--ink-3); }

.billnum {
    display: inline-block;
    font-family: var(--font-mono); font-size: .88em; font-weight: 700; letter-spacing: .01em;
    color: var(--blue);
    white-space: nowrap;
}
.billnum--big { font-size: 22px; }

/* ---- Today ------------------------------------------------------------------------------------------------ */

.hscroll {
    display: flex; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px;
    scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: none; }

.wtile {
    display: flex; flex-direction: column; gap: 6px;
    width: 216px; min-height: 118px; padding: 14px;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink); text-decoration: none;
}
.wtile__name { font-weight: 700; line-height: 1.25; }
.wtile__counts { margin-top: auto; font-size: 13px; color: var(--ink-3); }
.wtile--new {
    width: 128px; align-items: center; justify-content: center; text-align: center;
    border-style: dashed; box-shadow: none; background: transparent; color: var(--ink-2); font-weight: 650;
}

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-3); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); flex: none; }
.status.is-listening { color: var(--ok); font-weight: 600; }
.status.is-listening .status__dot { background: var(--ok); animation: pulse-ok 2s ease-out infinite; }
.status.is-paused { color: var(--warn); }
.status.is-paused .status__dot { background: var(--warn); }

.cta-card {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px;
    padding: 16px; border-radius: var(--radius);
    background: var(--masthead); color: var(--masthead-ink); text-decoration: none;
}
.cta-card__title { font: 700 19px/1.25 var(--font-serif); color: #ebc36a; }
.cta-card__body { grid-column: 1; font-size: 14.5px; color: var(--masthead-ink-2); }
.cta-card .icon { grid-row: 1 / span 2; grid-column: 2; color: #ebc36a; }

.meeting-card {
    display: flex; flex-direction: column; gap: 5px;
    padding: 14px 16px;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink); text-decoration: none;
    position: relative; overflow: hidden;
}
.meeting-card--watched::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold-strong);
}
.meeting-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.meeting-card__title { font: 650 18px/1.25 var(--font-serif); }
.meeting-card__room { font-size: 13.5px; color: var(--ink-3); }
.meeting-card__now {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px;
    margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--rule);
    font-size: 15px;
}
.meeting-card__label { font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.meeting-card__item { color: var(--ink-2); flex-basis: 100%; }

.upcoming { display: flex; gap: 14px; padding: 13px 16px; align-items: baseline; }
.upcoming__when { flex: none; width: 112px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.upcoming__what { display: flex; flex-direction: column; min-width: 0; }
.upcoming__title { font-weight: 600; }
.upcoming__room { font-size: 13.5px; color: var(--ink-3); }

.fgroup + .fgroup { margin-top: 18px; }
.fgroup__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; margin-bottom: 4px;
    color: var(--ink); text-decoration: none;
    font: 650 17px/1.3 var(--font-serif);
}
.fgroup__count {
    min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--card-2); color: var(--ink-2);
    font: 700 12.5px/22px var(--font); text-align: center;
}

.finding-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; padding: 12px 12px 12px 14px;
    color: var(--ink); text-decoration: none;
}
.finding-row:active { background: var(--card-2); }
.finding-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
.finding-row--unread .finding-row__dot { background: var(--gold-strong); }
.finding-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.finding-row__headline { font: 600 16.5px/1.3 var(--font-serif); }
.finding-row--unread .finding-row__headline { font-weight: 750; }
.finding-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ink-3); }
.finding-row__status { font-weight: 650; color: var(--ok); }
.finding-row__status--prov { color: var(--warn); }
.finding-row__watcher { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.finding-row .icon { color: var(--ink-3); }

/* ---- Finding --------------------------------------------------------------------------------------------------- */

.finding { display: flex; flex-direction: column; gap: 14px; }
.finding__chips { margin-top: 4px; }
.finding__headline { font: 700 29px/1.14 var(--font-serif); letter-spacing: -.01em; }
.finding__source { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.finding__meeting {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    min-height: 32px; color: var(--blue); font-weight: 600; text-decoration: none; font-size: 15px;
}

.quote {
    margin: 4px 0 0; padding: 14px 16px 16px;
    background: var(--quote-bg); border-left: 3px solid var(--gold-strong);
    border-radius: 4px var(--radius-s) var(--radius-s) 4px;
}
.quote__label { font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }
.quote__text { margin: 8px 0 0; font: 400 19px/1.5 var(--font-serif); color: var(--ink); }

.facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.facts__row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; padding-top: 1px; }
.facts dd { margin: 0; font-size: 15.5px; }

.why { display: flex; flex-direction: column; gap: 6px; }
.why p { color: var(--ink-2); }
.why__watcher { font-size: 14px; }

.finding__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.actionbar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    overflow: hidden;
}
.action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 60px; border: 0; background: none; color: var(--ink);
    font-size: 13px; font-weight: 650;
}
.action + .action { border-left: 1px solid var(--rule); }
.action[aria-expanded="true"] { background: var(--card-2); color: var(--blue); }
.action:active { background: var(--card-2); }

.confirm {
    padding: 14px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--rule-2);
    display: flex; flex-direction: column; gap: 12px;
}
.confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm__actions .btn + .btn { margin-top: 0; }

.ask {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--rule);
}
.ask__head { display: flex; align-items: center; justify-content: space-between; }
.ask__note { font-size: 13.5px; color: var(--ink-3); }
.turns { display: flex; flex-direction: column; gap: 12px; }
.turn { display: flex; flex-direction: column; gap: 8px; }
.turn__q {
    align-self: flex-end; max-width: 85%;
    padding: 9px 13px; border-radius: 16px 16px 4px 16px;
    background: var(--ink); color: var(--paper); font-weight: 550;
}
.turn__a {
    align-self: flex-start; max-width: 100%;
    padding: 11px 13px; border-radius: 16px 16px 16px 4px;
    background: var(--card-2); display: flex; flex-direction: column; gap: 8px;
}
.turn__a--pending { flex-direction: row; align-items: center; gap: 10px; color: var(--ink-3); }
.turn__asof { font-size: 12.5px; color: var(--ink-3); }
.cites { display: flex; flex-direction: column; gap: 2px; }
.cite { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; font-weight: 600; text-decoration: none; }
.askbar { display: flex; gap: 8px; }
.askbar .input { flex: 1; }
.askbar .btn { flex: none; }

.feedback { padding-top: 6px; border-top: 1px solid var(--rule); }
.feedback__row { display: flex; align-items: center; gap: 8px; }
.feedback__label { flex: 1; font-size: 14.5px; color: var(--ink-2); font-weight: 550; }
.thumb {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--rule-2); background: var(--card);
    font-size: 20px; line-height: 1;
}
.thumb[aria-pressed="true"] { background: var(--gold-wash); border-color: var(--gold-strong); }
.reasons { margin-top: 10px; }
.reasons__q { font-weight: 650; margin-bottom: 8px; }

/* ---- Votes ----------------------------------------------------------------------------------------------------- */

.vote { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.vote--compact { padding: 12px 16px; }
.vote__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vote__motion { font-weight: 700; }
.vote__time { font-size: 13px; color: var(--ink-3); flex: none; }
.vote__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.vote__quote { font-size: 14px; color: var(--ink-2); }
.tally {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0;
    color: var(--ink);
}
.tally__sep { color: var(--ink-3); }
.tally__end { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.tally__outcome { padding: 1px 7px; border-radius: 6px; font-weight: 750; }
.tally__outcome--pass { background: var(--ok-wash); color: var(--ok); }
.tally__outcome--fail { background: var(--live-wash); color: var(--live); }
.roll { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding-top: 6px; border-top: 1px solid var(--rule); }
.roll__row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 14.5px; }
.roll__row--n { color: var(--live); font-weight: 650; }
.roll__row--y .num { color: var(--ok); }

/* ---- Meeting -------------------------------------------------------------------------------------------------- */

.meeting-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; }
.screen--meeting > .btn { margin-top: -4px; }
.screen--meeting > .btn + .btn { margin-top: 10px; }
.now { padding: 16px; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--blue); }
.now__title { font: 650 20px/1.3 var(--font-serif); }
.now__sponsors { font-size: 14.5px; color: var(--ink-2); }
.now__since { font-size: 13.5px; color: var(--ink-3); }

.mybill { display: flex; align-items: baseline; gap: 12px; padding: 13px 16px; }
.mybill__when { color: var(--ink-2); font-size: 15px; }
.mybill--now { background: var(--gold-wash); }
.mybill--now .mybill__when strong { color: var(--gold); }

.nextitem { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; }
.nextitem__title { color: var(--ink-2); font-size: 15px; }

.earlier { margin-top: 10px; }
.earlier > summary, .highlights > summary {
    min-height: 44px; display: flex; align-items: center;
    color: var(--blue); font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none;
}
.earlier > summary::-webkit-details-marker, .highlights > summary::-webkit-details-marker, .transcript > summary::-webkit-details-marker { display: none; }

.transcript {
    margin-top: 28px;
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
}
.transcript__summary {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 60px; padding: 12px 16px; justify-content: center;
    cursor: pointer; list-style: none; position: relative;
    font-weight: 700;
}
.transcript__summary::after {
    content: "Show"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 14px; font-weight: 600; color: var(--blue);
}
.transcript[open] .transcript__summary::after { content: "Hide"; }
.transcript__label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.transcript__list { border-top: 1px solid var(--rule); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.chunk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 11px 16px; }
.chunk + .chunk { border-top: 1px solid var(--rule); }
.chunk__time { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.chunk__speaker { font-size: 13px; font-weight: 700; color: var(--gold); }
.chunk__text { flex-basis: 100%; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.transcript__empty { padding: 12px 16px 16px; color: var(--ink-3); font-size: 14.5px; }
.transcript .btn { margin: 0 16px 16px; width: calc(100% - 32px); }

/* ---- Watchers ---------------------------------------------------------------------------------------------------- */

.wcard { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; color: var(--ink); text-decoration: none; }
.wcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wcard__name { font: 650 18px/1.25 var(--font-serif); }
.wcard__counts { font-size: 13px; color: var(--ink-3); }
.wbox .wcard { border-radius: var(--radius) var(--radius) 0 0; }
.wcard__keep {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 2px 16px 12px; font-size: 13px; color: var(--ink-3);
}
.wday { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }

.rules { display: flex; flex-direction: column; gap: 8px; }
.rules li { display: flex; gap: 9px; align-items: flex-start; font-size: 15.5px; }
.rules li .icon { margin-top: 3px; color: var(--ok); }
.rules--compact { gap: 3px; }
.rules--compact li { font-size: 14px; color: var(--ink-2); }
.rules--compact li::before { content: "·"; color: var(--ink-3); font-weight: 700; }
.request { margin-top: 12px; font-size: 14.5px; color: var(--ink-3); font-style: italic; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s);
}
.tile__n { font: 700 26px/1.1 var(--font-serif); }
.tile__l { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }

.revise { margin-top: 16px; }
.revise__form { display: flex; flex-direction: column; gap: 8px; }
.revise__form .field__label { margin-top: 0; }
.revise__form .btn { align-self: flex-start; }

.diff {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--rule-2);
}
.diff__title { font-weight: 700; }
.diff__lines { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.diff__line { display: flex; gap: 8px; padding: 6px 10px; border-radius: 8px; }
.diff__line--add { background: var(--ok-wash); color: var(--ok); }
.diff__line--del { background: var(--live-wash); color: var(--live); text-decoration: line-through; }
.diff__sign { font-family: var(--font-mono); font-weight: 700; }
.diff__after-label { font-size: 13px; font-weight: 650; color: var(--ink-3); }

.closecalls { display: flex; flex-direction: column; gap: 10px; }
.closecall {
    display: flex; flex-direction: column; gap: 6px;
    padding: 13px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s);
}
.closecall__meta { font-size: 12.5px; color: var(--ink-3); }
.closecall__text { font: 400 15px/1.45 var(--font-serif); color: var(--ink-2); }
.closecall__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.closecall__score { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-right: auto; }

.danger { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.danger .btn + .btn { margin-top: 0; }

/* ---- New watcher -------------------------------------------------------------------------------------------- */

.compose { display: flex; flex-direction: column; gap: 10px; }
.agent-say {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--radius-s);
    background: var(--blue-wash); color: var(--ink);
}
.agent-say .icon { color: var(--blue); margin-top: 2px; }
.examples-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.example-pick {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    padding: 11px 14px; min-height: 56px;
    border: 1px solid var(--rule); border-radius: var(--radius-s);
    background: var(--card); color: var(--ink);
}
.example-pick__who { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.example-pick__text { font: 400 15.5px/1.4 var(--font-serif); }
.btn--sticky {
    position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 10px);
    margin-top: 12px; box-shadow: 0 8px 22px rgba(10, 15, 21, .18);
}

.steps { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.step { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-3); }
.step__mark { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; }
.step--todo .step__mark { box-shadow: inset 0 0 0 2px var(--rule-2); }
.step--active { color: var(--ink); font-weight: 600; }
.step--done { color: var(--ink-2); }
.step--done .step__mark { background: var(--ok); color: #fff; }

.plans { display: flex; flex-direction: column; gap: 14px; }
.plan { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.plan__name { font: 700 21px/1.2 var(--font-serif); }
.plans__actions { margin-top: 4px; }

.backtest { padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.backtest__status { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.backtest__result { font-size: 15.5px; }
.backtest__result strong { color: var(--gold); }
.examples { display: flex; flex-direction: column; gap: 8px; }
.examples__label { font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.example { padding: 10px 12px; background: var(--quote-bg); border-radius: 10px; }
.example__quote { font: 400 14.5px/1.45 var(--font-serif); color: var(--ink-2); }
.example__meta { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.example__meta .linkbtn { min-height: 32px; font-size: 13px; }

/* ---- Get Quorus ---------------------------------------------------------------------------------------------- */

.get { min-height: 100vh; }
.hero {
    background:
        radial-gradient(120% 80% at 85% 0%, rgba(212, 166, 64, .22), rgba(212, 166, 64, 0) 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(74, 139, 222, .18), rgba(74, 139, 222, 0) 60%),
        var(--masthead);
    color: var(--masthead-ink);
    padding: calc(env(safe-area-inset-top) + 36px) var(--gutter) 56px;
}
.hero__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.hero__mark { border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); margin-bottom: 8px; }
.hero__name { font: 700 44px/1 var(--font-serif); letter-spacing: .005em; }
.hero__tag { font: italic 400 22px/1.3 var(--font-serif); color: #ebc36a; }
.hero__body { font-size: 16.5px; line-height: 1.55; color: var(--masthead-ink-2); max-width: 36em; }

.get__body {
    max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 0;
    display: flex; flex-direction: column; gap: 22px;
}
/* A leading card (the invite code, or "you're signed in") overlaps the hero. */
.get__body > .card:first-child, .get__body > .notice:first-child { margin-top: -52px; }
.get__body > .notice:first-child { box-shadow: var(--shadow); }
.codecard { padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.code {
    display: flex; gap: .5em;
    font-family: var(--font-mono); font-size: 40px; font-weight: 700; letter-spacing: .14em; line-height: 1.1;
    color: var(--ink);
}
.codecard__note { font-size: 14.5px; color: var(--ink-2); }
.get__section { display: flex; flex-direction: column; gap: 12px; }
.pitch { padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.pitch__lead { font-weight: 600; }
.pitch__ask { display: flex; flex-direction: column; gap: 4px; font: 400 17px/1.45 var(--font-serif); }
.install-steps { display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; }
.install-steps__n {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--paper); font-weight: 700; font-size: 14.5px;
}
.install-steps p { padding-top: 3px; }

/* ---- Join ----------------------------------------------------------------------------------------------------- */

.join {
    max-width: 520px; margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 20px) var(--gutter) 24px;
}
.join__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.join__mark { border-radius: 10px; }
.join__step { display: flex; flex-direction: column; gap: 10px; }
.join__step > .btn { margin-top: 14px; }
.join__step > .btn + .btn { margin-top: 0; }
.progress-dots { display: flex; gap: 6px; }
.progress-dots__dot { width: 22px; height: 5px; border-radius: 3px; background: var(--rule-2); }
.progress-dots__dot.is-on { background: var(--gold-strong); }

.starters { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.starter {
    display: flex; gap: 12px; align-items: flex-start; width: 100%;
    padding: 14px; text-align: left; color: var(--ink);
}
.starter.is-on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.starter:disabled { opacity: .7; }                     /* already on (an intake finished later) */
.starter__check {
    flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 2px var(--rule-2);
}
.starter.is-on .starter__check { background: var(--ok); color: #fff; box-shadow: none; }
.starter__body { display: flex; flex-direction: column; gap: 3px; }
.starter__name { font: 650 17px/1.25 var(--font-serif); }
.starter__lines { font-size: 14px; color: var(--ink-2); }
.starter__est { font-size: 13px; color: var(--gold); font-weight: 650; }
/* Starters without a profile (assistant plan §18): the way to the intake, and back to the topics. */
.owncard { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; margin-top: 6px; }
.owncard__title { font: 650 17px/1.25 var(--font-serif); }
.owncard__text { font-size: 15px; color: var(--ink-2); }
.owncard .btn { margin-top: 4px; }
.starters__back { align-self: flex-start; }

.notif {
    display: flex; gap: 11px; align-items: flex-start;
    margin: 6px 0; padding: 12px 13px;
    border-radius: 20px;
    background: rgba(240, 240, 245, .72);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 6px 20px rgba(10, 15, 21, .12);
    color: #111;
}
.notif__icon { border-radius: 9px; }
.notif__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif__top { display: flex; justify-content: space-between; font-size: 12.5px; color: #555; text-transform: uppercase; letter-spacing: .03em; }
.notif__title { font-weight: 650; font-size: 15px; line-height: 1.3; }
.notif__text { font-size: 14.5px; line-height: 1.35; color: #333; }
@media (prefers-color-scheme: dark) {
    .notif { background: rgba(48, 52, 60, .78); color: #f2f2f2; }
    .notif__top { color: #b8b8b8; }
    .notif__text { color: #dcdcdc; }
}

/* ---- Settings ----------------------------------------------------------------------------------------------- */

.form { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.form .field__label:first-child { margin-top: 0; }
.setting__status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.row-link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 600;
}

/* ---- Sheet (Replay controls) --------------------------------------------------------------------------------- */

.sheet {
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh;
    margin: 0 auto; padding: 0;
    border: 0; background: transparent; color: var(--ink);
    overflow: visible;
}
.sheet::backdrop { background: rgba(6, 9, 14, .5); }
.sheet[open] .sheet__panel { animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
.sheet__panel {
    max-height: 92vh; max-height: 92dvh; overflow-y: auto;
    padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
    background: var(--card);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 40px rgba(6, 9, 14, .3);
    display: flex; flex-direction: column; gap: 12px;
}
.sheet__grab { width: 40px; height: 5px; border-radius: 3px; background: var(--rule-2); margin: 0 auto 2px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; }
.sheet__title { font: 700 22px/1.2 var(--font-serif); }
.sheet__clock { font: 700 40px/1 var(--font-serif); letter-spacing: -.01em; }
.sheet__sub { color: var(--ink-3); font-size: 14.5px; margin-top: -4px; }
.sheet__text { color: var(--ink-2); }
.sheet .btn + .btn { margin-top: 0; }

.transport { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.transport__play {
    width: 64px; height: 64px; flex: none; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold-strong); color: #121a26;
    box-shadow: 0 6px 16px rgba(212, 166, 64, .35);
}
.transport__play:disabled { opacity: .5; }
.transport .segmented { flex: 1; justify-content: space-between; }
.transport .segmented button { flex: 1; min-width: 0; }
.highlights ol { display: flex; flex-direction: column; gap: 6px; padding: 0 0 6px; font-size: 14.5px; }
.highlights li .num { font-weight: 650; margin-right: 6px; }

/* ---- Today: Change day, more, earlier --------------------------------------------------------------------- */

.screen-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.daylink {
    position: relative; flex: none;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 12px; border-radius: 17px;
    background: var(--blue-wash); color: var(--blue);
    font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap;
}
.daylink::before { content: ""; position: absolute; inset: -5px 0; }          /* a 44px tap target */
.daylink:active { filter: brightness(.96); }

.more { margin-top: 2px; }
.upcoming--watched { box-shadow: inset 4px 0 0 var(--gold-strong); }
.upcoming__chip { margin-top: 5px; }

.earlier-today__summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; margin-bottom: 6px;
    cursor: pointer; list-style: none;
}
.earlier-today__summary::-webkit-details-marker { display: none; }
.earlier-today__count { font-size: 13.5px; color: var(--ink-3); margin-right: auto; }
.earlier-today__summary::after { content: "Show"; font-size: 14px; font-weight: 600; color: var(--blue); }
.earlier-today[open] .earlier-today__summary::after { content: "Hide"; }

.ended {
    display: flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 11px 12px 11px 16px;
    color: var(--ink); text-decoration: none;
}
.ended:active { background: var(--card-2); }
.ended__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ended__title { font-weight: 600; line-height: 1.3; }
.ended__meta { font-size: 13px; color: var(--ink-3); }
.ended .icon { color: var(--ink-3); }

.cta-card--days { margin-bottom: -4px; }

/* ---- Days: month calendar ------------------------------------------------------------------------------------- */

.cal { padding: 8px 8px 12px; }
.cal__head { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; }
.cal__title {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
    font: 700 19px/1.2 var(--font-serif); text-align: center;
}
.cal__head .icon-btn:disabled { opacity: .3; }
.cal__weekdays, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__weekdays span {
    padding: 4px 0 6px; text-align: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3);
}
.cal__cell { min-width: 0; }
.cal__day {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 48px; border-radius: 12px;
    border: 1.5px solid transparent;
    color: var(--ink); text-decoration: none;
}
.cal__n { font-size: 16px; font-weight: 650; line-height: 1; }
.cal__dots { display: flex; gap: 3px; height: 5px; }
.cal__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
/* Grey: no hearings (or nothing compiled). Plain text, not a button. */
.cal__day.is-quiet { color: var(--ink-3); opacity: .55; }
.cal__day.is-quiet .cal__n { font-weight: 500; }
/* A day with hearings is a tappable tile. */
.cal__day.has-hearings { background: var(--card-2); }
.cal__day.has-hearings:active { filter: brightness(.95); }
/* Ring: your bills are on its agenda. */
.cal__day.has-mine { box-shadow: inset 0 0 0 2px var(--gold-strong); }
/* Dashed: not ready to replay (for you). */
.cal__day.is-unready { background: transparent; border-style: dashed; border-color: var(--rule-2); color: var(--ink-2); }
.cal__day.is-unready .cal__dot { background: var(--ink-3); }
/* You're here: this person's current world is this day. */
.cal__day.is-current { background: var(--ink); color: var(--paper); }
.cal__day.is-current .cal__dot { background: var(--gold-strong); }
.cal__day.is-current.has-mine { box-shadow: inset 0 0 0 2px var(--gold-strong), inset 0 0 0 4px var(--ink); }

.cal-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule);
    font-size: 12.5px; color: var(--ink-3);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend__key { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 16px; height: 16px; border-radius: 5px; flex: none; }
.cal-legend__key--dots { background: var(--card-2); }
.cal-legend__key--dots .cal__dot { width: 4px; height: 4px; }
.cal-legend__key--mine { background: var(--card-2); box-shadow: inset 0 0 0 2px var(--gold-strong); }
.cal-legend__key--here { background: var(--ink); }
.cal-legend__key--unready { border: 1.5px dashed var(--rule-2); }

.dayrow {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 10px 12px 10px 16px;
    color: var(--ink); text-decoration: none;
}
.dayrow:active { background: var(--card-2); }
.dayrow__when { flex: none; width: 92px; font-weight: 650; }
.dayrow__bills { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.dayrow .icon { color: var(--ink-3); }

.days__note { margin-top: 24px; }
.nowrap { white-space: nowrap; }

/* ---- Days: one day ---------------------------------------------------------------------------------------------- */

.dayactions { display: flex; flex-direction: column; gap: 10px; }
.dayactions .btn + .btn { margin-top: 0; }
.dayactions .notice { margin: 0; }
.dayactions .errorbox { margin: 0; }
.optline {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 44px; padding: 4px 2px;
    border: 0; background: none; text-align: left;
    color: var(--ink-2); font-size: 14px;
}
.optline__change { flex: none; color: var(--blue); font-weight: 650; }

.daychips { display: flex; flex-wrap: wrap; gap: 6px; }
.daychip {
    padding: 4px 10px; border-radius: 13px;
    background: var(--card); border: 1px solid var(--rule);
    font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-2);
}
.daychip--more { position: relative; min-height: 28px; border-style: dashed; color: var(--blue); }
.daychip--more::before { content: ""; position: absolute; inset: -8px 0; }       /* a 44px tap target */

.dayhearing { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 8px; position: relative; }
.dayhearing--mine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold-strong); }
.dayhearing__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dayhearing__when { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.dayhearing__title { font: 650 17px/1.3 var(--font-serif); }
.dayhearing__room { font-size: 13.5px; color: var(--ink-3); }
.dayhearing__none { font-size: 13.5px; color: var(--ink-3); padding: 6px 0 8px; }
.dayhearing__agenda > summary {
    min-height: 44px; display: flex; align-items: center;
    color: var(--blue); font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none;
}
.dayhearing__agenda > summary::-webkit-details-marker { display: none; }
.agenda { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
.agenda__item { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.agenda__item.is-mine { margin: 0 -8px; padding: 5px 8px; border-radius: 8px; background: var(--gold-wash); color: var(--ink); }
.agenda__text { min-width: 0; }
.agenda__yours { color: var(--gold); font-weight: 700; }

.tag {
    display: inline-flex; align-items: center; flex: none;
    height: 22px; padding: 0 8px; border-radius: 11px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.tag--ok { background: var(--ok-wash); color: var(--ok); }
.tag--muted { background: var(--card-2); color: var(--ink-3); }
.tag--warn { background: var(--warn-wash); color: var(--warn); }

/* ---- Replay options and controls ------------------------------------------------------------------------------- */

.optsheet { display: flex; flex-direction: column; gap: 6px; }
.optsheet .field__label { margin: 12px 0 2px; }
.optsheet .switch { margin-top: 14px; }
.optsheet .btn { margin-top: 12px; }
.optsheet .errorbox { margin: 8px 0 0; }
.select {
    -webkit-appearance: none; appearance: none;
    padding-right: 40px;
    background-color: var(--card);
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
    text-overflow: ellipsis;
}
.segmented--wide { display: flex; }
.segmented--wide button { flex: 1; min-width: 0; padding: 0 8px; }
.jump .field__label { margin-top: 4px; }

/* ---- Quorus chat (assistant plan §6) ------------------------------------------------------------------------- */

/* The chat fills the screen so the composer sits at the bottom even when the thread is short. */
.main--chat { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
.chat {
    display: flex; flex-direction: column;
    min-height: calc(100vh - var(--mh) - var(--strip) - var(--tabbar) - 18px);
    min-height: calc(100dvh - var(--mh) - var(--strip) - env(safe-area-inset-top) - var(--tabbar) - env(safe-area-inset-bottom) - 18px);
}
.chat__head { margin-bottom: 12px; gap: 2px; }
.chat__sub { font-size: 14px; font-weight: 600; color: var(--gold); }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.chat__intro { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.chat__intro .linkbtn { align-self: flex-start; }
.chat__chips { margin: 4px 0 10px; }
.chat .errorbox { margin: 4px 0 8px; }
.chat > .notice { margin: 0 0 12px; }

.msg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.msg--user { align-items: flex-end; }
.msg--assistant { align-items: stretch; }
.msg__bubble {
    max-width: 100%;
    padding: 10px 13px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg--user .msg__bubble {
    max-width: 85%;
    border-radius: 18px 18px 4px 18px;
    background: var(--ink); color: var(--paper);
}
.msg--pending .msg__bubble { opacity: .75; }
.msg--assistant > .msg__bubble {
    align-self: flex-start;
    border-radius: 18px 18px 18px 4px;
    background: var(--card); border: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 8px;
}
.msg__text { font-size: 16px; line-height: 1.5; }
.msg--failed > .msg__bubble { background: transparent; border-style: dashed; color: var(--ink-2); }
.msg__context { max-width: 85%; font-size: 12.5px; font-weight: 650; color: var(--ink-3); text-align: right; }
.msg__note {
    padding: 7px 10px; border-radius: 9px;
    background: var(--warn-wash); color: var(--warn);
    font-size: 13.5px; font-weight: 600; white-space: normal;
}
.msg__meta { font-size: 12px; color: var(--ink-3); padding-left: 4px; }
.msg__findings { margin: 0; }
.msg__bubble .cites { white-space: normal; border-top: 1px solid var(--rule); padding-top: 4px; }
.msg__bubble--status { white-space: normal; }
.msg__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.msg__actions .btn { min-height: 40px; padding: 0 14px; }
.msg__actions .btn + .btn { margin-top: 0; }

.stagelines { display: flex; flex-direction: column; gap: 6px; }
.stageline { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-3); }
.stageline.is-active { color: var(--ink); font-weight: 600; }
.stageline__mark { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.stageline.is-done .stageline__mark { color: var(--ok); }

/* A divider naming the current segment when older ones sit above it. */
.segmark {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.segmark::before, .segmark::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Older segments: greyed and read-only. */
.oldsegs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.oldseg { border: 1px dashed var(--rule-2); border-radius: var(--radius-s); }
.oldseg__summary {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px;
    min-height: 44px; padding: 10px 14px; cursor: pointer; list-style: none;
}
.oldseg__summary::-webkit-details-marker { display: none; }
.oldseg__label { font-weight: 650; color: var(--ink-2); }
.oldseg__meta { font-size: 12.5px; color: var(--ink-3); }
.oldseg__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 14px; opacity: .72; filter: grayscale(.6); }

/* Proposals: one tap to turn on. */
.proposal {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; border-radius: var(--radius);
    background: var(--card-2); border: 1px solid var(--rule);
}
.proposal.is-open { background: var(--gold-wash); border-color: var(--gold-strong); }
.proposal .plan { box-shadow: none; }
.proposal__title { font: 700 18px/1.25 var(--font-serif); }
.proposal__text { color: var(--ink-2); font-size: 15px; }
.proposal__lines { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.proposal__lines li::before { content: "· "; color: var(--ink-3); font-weight: 700; }
.proposal__list { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.proposal__list a { font-weight: 600; text-decoration: none; }
.proposal__list--muted { color: var(--ink-3); }
.proposal__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; color: var(--ink-3); font-weight: 600; }
.proposal__status--ok { color: var(--ok); }
.proposal__status a { font-weight: 600; text-decoration: none; }
.proposal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.proposal__actions .btn { flex: 1 1 auto; padding: 0 16px; white-space: nowrap; }
.proposal__actions .btn + .btn { margin-top: 0; }
.proposal__actions .btn--quiet { flex-grow: 0; }
.proposal .errorbox { margin: 0; }
.plan__est { font-size: 14.5px; color: var(--ink-2); }
.plan__est strong { color: var(--gold); }
.lifetime { display: flex; flex-direction: column; gap: 6px; }
.lifetime__note { font-size: 13px; color: var(--ink-3); }
.switch--plan { margin-top: 2px; }

/* The profile, as a card (proposals, the intake's draft). */
.pcard { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.pcard--empty { font-size: 14.5px; color: var(--ink-3); border-top: 0; }
.pcard__row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.pcard dt { font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; padding-top: 2px; }
.pcard dd { margin: 0; font-size: 15px; min-width: 0; }
.pcard__list { display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }

/* A problem or an idea for the Quorus team (a request card), in the person's words: their line breaks show. */
.proposal--request .proposal__title, .reqcard__body { overflow-wrap: anywhere; }
.reqcard__body, .reqcard__fact dd { white-space: pre-line; }
.reqcard__facts { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.reqcard__fact dt { font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.reqcard__fact dd { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
/* "Sent to the Quorus team · see Settings → Your requests" wraps beside its tick, not under it. */
.proposal--request .proposal__status > span { flex: 1 1 0; min-width: 0; }

/* The composer: sticky above the tab bar; while typing on a phone the tab bar steps
   aside and the composer rides just above the keyboard. */
.composer {
    position: sticky; z-index: 5;
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
    margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 10px;
    background: var(--paper);
    box-shadow: 0 -10px 14px -10px rgba(10, 15, 21, .14);
    display: flex; flex-direction: column; gap: 6px;
}
.composer__row { display: flex; align-items: flex-end; gap: 8px; }
.composer__input {
    flex: 1; min-height: 46px; max-height: 40vh;
    padding: 11px 14px; border-radius: 23px;
    resize: none; line-height: 1.4;
    font-size: 16px;               /* ≥16px: no zoom on focus in iOS */
    field-sizing: content;
}
.composer__input:disabled { opacity: .6; }
.composer__send {
    flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--btn); color: var(--btn-ink);
}
.composer__send:disabled { background: var(--btn-off); color: var(--btn-off-ink); }
.composer__ctx {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 2px 2px 12px; border-radius: 12px;
    background: var(--blue-wash); color: var(--ink); font-size: 13.5px; font-weight: 600;
}
.composer__ctx > .icon { color: var(--blue); }
.composer__ctxlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer__ctx .icon-btn { width: 36px; height: 36px; position: relative; }
.composer__ctx .icon-btn::before { content: ""; position: absolute; inset: -4px; }       /* a 44px tap target */
.composer__count { font-size: 12.5px; color: var(--warn); text-align: right; }

/* Toasts clear the composer (and the voice bar above it). */
.app:has(.main--chat) .toasts { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 76px); }
.app:has(.main--chat .voicebar) .toasts { bottom: auto; top: calc(var(--mh) + var(--strip) + env(safe-area-inset-top) + 12px); }

/* ---- Voice (assistant plan §13.2) ---------------------------------------------------------------------------- */

/* The remote audio element: playing, never shown. */
.voice-audio { display: none; }

/* The mic beside Send. */
.composer__mic {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule-2); background: var(--card); color: var(--ink);
}
.composer__mic:active { background: var(--card-2); }

/* The voice bar: above the composer while a conversation is on (and its notice, error or end line). */
.voicebar {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 10px 10px 12px; border-radius: var(--radius-s);
    background: var(--card); border: 1px solid var(--rule);
    animation: rise-in .18s ease-out;
}
.voicebar--listening, .voicebar--speaking, .voicebar--working, .voicebar--muted, .voicebar--busy { border-color: var(--gold-strong); }
.voicebar--notice { background: var(--blue-wash); border-color: transparent; }
.voicebar--error { background: var(--live-wash); border-color: transparent; }
.voicebar--error .voicebar__msg { color: var(--ink); font-weight: 550; }
.voicebar--ended { flex-direction: row; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; }
.voicebar--ended .voicebar__msg { flex: 1; min-width: 0; }
.voicebar__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.voicebar__dot {
    width: 12px; height: 12px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rule-2);
}
.voicebar--listening .voicebar__dot { background: var(--ok); animation: pulse-ok 2s ease-out infinite; }
.voicebar--speaking .voicebar__dot { background: var(--gold-strong); animation: pulse-gold 1.4s ease-out infinite; }
.voicebar--muted .voicebar__dot { background: var(--live); }
.voicebar--working .voicebar__dot, .voicebar--busy .voicebar__dot { width: 16px; height: 16px; background: none; }
.voicebar__status { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.voicebar__label { font-size: 16px; font-weight: 650; }
.voicebar__stage { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voicebar__time { flex: none; font-size: 13.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.voicebar__time.is-low { color: var(--warn); }
.voicebar__mute { color: var(--ink); }
.voicebar__mute.is-on { background: var(--live-wash); color: var(--live); }
.voicebar__end { flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: 15px; }
.voicebar__warn { font-size: 13.5px; font-weight: 600; color: var(--warn); }
.voicebar__hint, .voicebar__fine { font-size: 13.5px; color: var(--ink-3); font-weight: 500; }
.voicebar__msg { font-size: 14.5px; line-height: 1.45; }
.voicebar__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.voicebar__btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.voicebar__actions .btn + .btn { margin-top: 0; }
.voicebar__tap { min-height: 44px; }
.voicebar .btn--block + .voicecaps { margin-top: 0; }

/* Live captions: the latest words on each side, as text. */
.voicecaps {
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 7px; border-top: 1px solid var(--rule);
}
.voicecap { display: flex; gap: 8px; font-size: 14.5px; line-height: 1.4; min-width: 0; }
.voicecap__who { flex: none; width: 60px; padding-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.voicecap--quorus .voicecap__who { color: var(--gold); }
.voicecap__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.voicecap--you .voicecap__text { color: var(--ink-2); }

/* Messages that came by voice carry a small tag. */
.msg__via {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3);
}
.msg--assistant > .msg__via { align-self: flex-start; padding-left: 4px; }
.msg--user > .msg__via { padding-right: 4px; }

@media (hover: none) and (pointer: coarse) {
    .app:has(.composer__input:focus) .tabbar { display: none; }
    .app:has(.composer__input:focus) .main--chat { padding-bottom: 0; }
    .app:has(.composer__input:focus) .composer { bottom: 0; }
}

/* ---- Join: the intake --------------------------------------------------------------------------------------- */

.intake__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.intake__head .linkbtn { flex: none; }
.intake__dots { display: flex; gap: 5px; margin: 2px 0 6px; }
.intake__dot { flex: 1; max-width: 36px; height: 4px; border-radius: 2px; background: var(--rule-2); }
.intake__dot.is-on { background: var(--gold-strong); }
.intake__log { margin-top: 4px; }
.intake__draft { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.intake .proposal { margin-top: 4px; }
/* "Change something" and "Save to my profile" don't share a row at phone width: stack them, Save on top. */
.intake .proposal__actions { flex-direction: column-reverse; align-items: stretch; }
.join .composer { bottom: 0; margin-top: 6px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.join__step .chat__chips { margin: 0; }

/* ---- Proactive: Your day, the brief and the recap (assistant plan §5.4, §14.6) --------------------------------- */

/* A section jumped to by #id (Today's "N new", Settings' #h-aboutyou, a card heading such as #h-requests) clears the
   sticky masthead and replay strip. */
.section__head [id], :is(h2, h3)[id] { scroll-margin-top: calc(var(--mh) + var(--strip) + env(safe-area-inset-top) + 16px); }

.yd { display: flex; flex-direction: column; gap: 8px; }
.yd-note { font-size: 13.5px; color: var(--ink-3); }
.yd-note--top { margin: -2px 0 2px; }

.yd-item__link {
    display: flex; flex-direction: column; gap: 3px;
    padding: 13px 16px; color: var(--ink); text-decoration: none;
}
.yd-item__link:active { background: var(--card-2); }
.yd-item__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.yd-item__when { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.yd-item__title { font: 650 17px/1.3 var(--font-serif); }
.yd-item__room { font-size: 13.5px; color: var(--ink-3); }
.yd-item__reasons { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.yd-reason { position: relative; padding-left: 14px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.yd-reason::before {
    content: ""; position: absolute; left: 2px; top: .55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--gold-strong);
}

.yd-list { overflow: hidden; }
.yd-group + .yd-group { border-top: 1px solid var(--rule); }
.yd-group__label {
    padding: 11px 16px 0;
    font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.yd-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 10px 12px 10px 16px;
    color: var(--ink); text-decoration: none;
}
.yd-row:active { background: var(--card-2); }
.yd-row__when { flex: none; width: 92px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.yd-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yd-row__title { font-weight: 600; line-height: 1.3; }
.yd-row__line { font-size: 14px; color: var(--ink-2); }
.yd-row .icon { color: var(--ink-3); }
.yd-skip { margin-top: 10px; }

.yd-recap { overflow: hidden; }
.yd-block { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.yd-block + .yd-block { border-top: 1px solid var(--rule); }
.yd-block__label { font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.yd-outcomes { display: flex; flex-direction: column; }
.yd-outcome {
    display: flex; flex-direction: column; gap: 4px;
    min-height: 44px; padding: 8px 0;
    color: var(--ink); text-decoration: none;
}
.yd-outcomes li + li .yd-outcome { border-top: 1px solid var(--rule); }
.yd-outcome__what { font: 650 16.5px/1.3 var(--font-serif); }
.yd-outcome__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--ink-3); }
/* A source label can be longer than a phone is wide: let it wrap inside the card (which clips). */
.yd-outcome__meta .chip { height: auto; min-height: 24px; padding: 3px 9px; white-space: normal; line-height: 1.3; }
.yd-held { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.yd-held__reason { font-size: 14.5px; font-weight: 650; }
.yd-held__items { display: flex; flex-direction: column; }
.yd-held__items a { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 550; line-height: 1.35; text-decoration: none; }
.yd-endings { display: flex; flex-direction: column; }
.yd-ending { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.yd-ending + .yd-ending { border-top: 1px solid var(--rule); }
.yd-ending__body { display: flex; flex-direction: column; min-width: 0; }
.yd-ending__name { font-weight: 600; text-decoration: none; }
.yd-ending__when { font-size: 13px; color: var(--ink-3); }
.yd-ending .chipbtn { flex: none; }

.digest__note { margin: 18px 0 12px; }

/* ---- Proactive: mutes, profile watchers, Also live, notifications ----------------------------------------------- */

.mutepanel__options { display: flex; flex-direction: column; gap: 8px; }
.mutepanel__options .btn + .btn { margin-top: 0; }
.mutepanel .btn__stack { min-width: 0; }

.wchange { margin-top: 12px; }

.alsolive { margin: -10px 0 18px; }
.alsolive__label { margin-bottom: 6px; }
.alsolive__row {
    display: flex; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px;
}
.alsolive__row::-webkit-scrollbar { display: none; }
.alsolive__row > li { flex: none; }
.alsolive__chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; max-width: 78vw; padding: 0 14px;
    border: 1px solid var(--rule-2); border-radius: 22px;
    background: var(--card); color: var(--ink);
    font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.alsolive__chip:active { background: var(--card-2); }
.alsolive__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot--recess { background: var(--warn); animation: none; }

.form__title { font: 650 17px/1.3 var(--font-serif); }
.notify__group { display: flex; flex-direction: column; }
.quiet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.quiet__field { display: flex; flex-direction: column; min-width: 0; }
.quiet__field .field__label { margin: 12px 0 6px; }
.notify .errorbox { margin: 8px 0 0; }
.mutes { margin: 2px -16px 4px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mute { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; }
.mute__body { display: flex; flex-direction: column; min-width: 0; }
.mute__what { font-weight: 600; overflow-wrap: anywhere; }
.mute__until { font-size: 13px; color: var(--ink-3); }
.mute .chipbtn { flex: none; }

/* Help us improve Quorus: what you've sent, its status and the team's note. */
.reqs { margin: 2px -16px 0; border-top: 1px solid var(--rule); }
.req { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; }
.req__title { font-weight: 600; overflow-wrap: anywhere; }
.req__meta { font-size: 13px; color: var(--ink-3); }
.req__status { font-weight: 650; }
.req__status.is-active { color: var(--blue); }
.req__status.is-done { color: var(--ok); }
.req__note { margin-top: 4px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--card-2); font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line; }
.req__notewho { font-weight: 650; color: var(--ink); }

/* ---- Email sign-in (Phase 3.2): Join, Sign in, Settings → Your email, Today's card ------------------------------- */

/* An address (masked, or your own in full): a long one wraps anywhere rather than widen the page at 320 px. */
.email-addr { font-weight: 650; overflow-wrap: anywhere; }
.emailflow__lede { color: var(--ink-2); font-size: 15px; }
/* The 6-digit code: the invite code's big monospace field, digits spaced out; the indent balances the
   space letter-spacing leaves after the last digit, so the code sits in the middle. */
.input--digits { text-transform: none; letter-spacing: .3em; text-indent: .3em; }
.resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.resend__wait { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-3); }
.linkbtn:disabled { opacity: .45; }
.emailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.emailcard { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.emailcard__text { font-weight: 600; }
.emailcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.emailcard__actions .btn { margin-top: 0; }
/* Get: "Already joined? Sign in with your email" sits under its button, not a section away. */
.get__body > .btn + .linkbtn--center { margin-top: -18px; }

/* ---- motion ---------------------------------------------------------------------------------------------------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes pulse-live { 0% { box-shadow: 0 0 0 0 rgba(194, 50, 31, .55); } 70% { box-shadow: 0 0 0 7px rgba(194, 50, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(194, 50, 31, 0); } }
@keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(235, 195, 106, .6); } 70% { box-shadow: 0 0 0 7px rgba(235, 195, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(235, 195, 106, 0); } }
@keyframes pulse-ok { 0% { box-shadow: 0 0 0 0 rgba(29, 116, 72, .45); } 70% { box-shadow: 0 0 0 6px rgba(29, 116, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 116, 72, 0); } }
@keyframes drop-in { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .live-dot, .replay-strip__dot, .status.is-listening .status__dot, .voicebar__dot { animation: none !important; }
    .spinner { animation: spin 1.6s linear infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* ---- wider screens ---------------------------------------------------------------------------------------------- */

@media (min-width: 700px) {
    :root { --gutter: 24px; }
    .display { font-size: 40px; }
    .finding__headline { font-size: 32px; }
}