/* ──────────────────────────────────────────────────────────────────
   Reminders — app.css
   Aesthetic: editorial / lamplit. Dark first, paper on request.
   Type: Fraunces (display) · Inter Tight (text) · JetBrains Mono (captions)
   Accent: tungsten amber. No bootstrap. No gradients on heroes.
   ────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter+Tight:wght@300..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ----------------------------------------------- */
:root {
    /* Palette — dark (default) */
    --ink-0:   #0b0b0d;   /* page */
    --ink-1:   #111115;   /* panel */
    --ink-2:   #17171c;   /* raised */
    --ink-3:   #1f2026;   /* hover */
    --ink-4:   #2a2b33;   /* divider strong */
    --rule:    rgba(255,255,255,0.07);
    --rule-strong: rgba(255,255,255,0.12);

    --fg-0:    #ece8e1;   /* primary text (warm off-white) */
    --fg-1:    #b8b4ac;   /* secondary */
    --fg-2:    #7d7a74;   /* muted */
    --fg-3:    #55534e;   /* faint */

    --accent:       #e9b872;   /* tungsten amber */
    --accent-hot:   #f4c988;
    --accent-dim:   #9c7c4d;
    --accent-ink:   #1a140a;   /* text on accent */

    --danger:  #e07a5f;
    --ok:      #a7b97b;
    --info:    #8fb3c4;

    /* Shape */
    --radius-s: 4px;
    --radius-m: 6px;
    --radius-l: 10px;

    /* Type scale */
    --fs-micro: 11px;
    --fs-xs:    12px;
    --fs-sm:    13px;
    --fs-md:    14px;
    --fs-lg:    16px;
    --fs-xl:    20px;
    --fs-2xl:   28px;
    --fs-3xl:   40px;

    --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', 'Georgia', serif;
    --font-sans:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Motion */
    --ease: cubic-bezier(.2,.6,.2,1);
}

[data-theme="light"] {
    --ink-0:   #f7f4ee;
    --ink-1:   #ffffff;
    --ink-2:   #fbf8f2;
    --ink-3:   #efe9dd;
    --ink-4:   #d9d1c0;
    --rule:    rgba(0,0,0,0.08);
    --rule-strong: rgba(0,0,0,0.14);

    --fg-0:    #1a1815;
    --fg-1:    #4a4740;
    --fg-2:    #76736b;
    --fg-3:    #aaa69d;

    --accent:       #a4661e;
    --accent-hot:   #8a5316;
    --accent-dim:   #c68e4d;
    --accent-ink:   #fffdf7;
}

/* ---------- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
    /* Offset for the sticky .topbar (52px) + .marketing-nav (~70px) when
       scrolling to in-page anchors. Sized to clear the marketing nav since
       it's the taller of the two; the app topbar just gets extra breathing
       room. Includes space for section badges (e.g. .settings-header-num
       "01" markers) that sit above the heading — those need to land below
       the sticky bar too, not behind it. */
    scroll-padding-top: 96px;
}
/* Anchor targets get their own offset too. scroll-padding-top alone covers
   hash nav; scroll-margin-top covers element.scrollIntoView() and keeps
   any top border / section number visible instead of tucked behind the bar. */
:target,
[id] {
    scroll-margin-top: 96px;
}
html, body {
    margin: 0;
    padding: 0;
    background: var(--ink-0);
    color: var(--fg-0);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: 1.5;
    font-feature-settings: 'ss01', 'cv11', 'tnum';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 500; color: var(--fg-0); }
a { color: var(--fg-0); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout shell ---------------------------------------- */
.page {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
    background: var(--ink-0);
}
.sidebar {
    border-right: 1px solid var(--rule);
    background: var(--ink-1);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
main.shell-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.topbar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid var(--rule);
    background: var(--ink-0);
    position: sticky;
    top: 0;
    z-index: 5;
}
.topbar .crumbs {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.04em;
}
.topbar .crumbs strong {
    color: var(--fg-0);
    font-weight: 500;
}
.topbar .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-xs);
    color: var(--fg-1);
    text-decoration: none;
    border-radius: 999px;
    padding: 2px 8px 2px 2px;
    transition: background 120ms var(--ease), color 120ms var(--ease);
}
.topbar a.user-chip:hover { color: var(--fg-0); background: var(--ink-2); }
.topbar .user-chip .avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-dim), var(--accent));
    color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    font-family: var(--font-mono);
}

.content {
    flex: 1;
    padding: 40px 48px 80px;
    width: 100%;
    /* Full-width: max-width removed. Dense ledger data reads better
       across the full viewport than in a Medium-style 1180px column. */
}

/* ---------- Sidebar nav ----------------------------------------- */
.brand {
    padding: 20px 22px 24px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
}
.brand-mark {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--fg-0);
}
.brand-mark em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 400;
}
.brand-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--fg-2);
    text-transform: uppercase;
}
.brand-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    /* Vertically centre with the wordmark cap-line rather than the whole
       two-line text block (which would drift a few px below). */
    align-self: center;
}

.nav-section {
    padding: 18px 14px 6px;
}
.nav-heading {
    padding: 0 10px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--fg-3);
    text-transform: uppercase;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: var(--radius-s);
    color: var(--fg-1);
    font-size: var(--fs-sm);
    transition: background 120ms var(--ease), color 120ms var(--ease);
    position: relative;
}
.nav-link:hover { background: var(--ink-2); color: var(--fg-0); }
.nav-link.active {
    background: var(--ink-2);
    color: var(--fg-0);
}
.nav-link.active::before {
    content: '';
    position: absolute;
    left: -14px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.nav-link .ic {
    width: 15px; height: 15px;
    opacity: 0.75;
    flex: 0 0 15px;
}
.nav-link.active .ic { opacity: 1; color: var(--accent); }

.theme-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--fg-1);
    height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-s);
    font-size: var(--fs-xs);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 120ms var(--ease);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
.theme-toggle:hover { border-color: var(--fg-2); color: var(--fg-0); }
.theme-toggle .theme-dark-only,
.theme-toggle .theme-light-only {
    display: inline-flex; align-items: center; gap: 6px;
}
/* Dark is default: show the "switch to light" variant (sun + LIGHT). */
.theme-toggle .theme-light-only { display: none; }
/* In light mode: show the "switch to dark" variant (moon + DARK). */
[data-theme="light"] .theme-toggle .theme-dark-only { display: none; }
[data-theme="light"] .theme-toggle .theme-light-only { display: inline-flex; }

/* ---------- Page title block ------------------------------------ */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
    animation: fadeUp 400ms var(--ease) both;
}
.page-head > * { min-width: 0; }
.page-head h1 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-size: var(--fs-3xl);
    letter-spacing: -0.02em;
    line-height: 1;
}
.page-head h1 em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 300;
}
.page-head .sub {
    color: var(--fg-2);
    font-size: var(--fs-sm);
    margin-top: 8px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* ---------- Buttons --------------------------------------------- */
.btn {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--rule-strong);
    background: var(--ink-2);
    color: var(--fg-0);
    padding: 7px 14px;
    font-size: var(--fs-sm);
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 120ms var(--ease);
    font-weight: 500;
    letter-spacing: -0.005em;
    font-family: var(--font-sans);
}
.btn:hover { background: var(--ink-3); border-color: var(--fg-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.btn.primary:hover { background: var(--accent-hot); border-color: var(--accent-hot); }
.btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--fg-1);
    padding: 6px 10px;
}
.btn.ghost:hover { background: var(--ink-2); color: var(--fg-0); }
.btn.danger {
    color: var(--danger);
    border-color: rgba(224,122,95,0.28);
}
.btn.danger:hover { background: rgba(224,122,95,0.08); border-color: var(--danger); }
.btn.sm { padding: 4px 9px; font-size: var(--fs-xs); }

/* ---------- Inputs --------------------------------------------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.field label, .label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
}
.input, .select, .textarea {
    background: var(--ink-1);
    border: 1px solid var(--rule-strong);
    color: var(--fg-0);
    padding: 8px 11px;
    border-radius: var(--radius-s);
    font-size: var(--fs-sm);
    width: 100%;
    transition: border-color 120ms var(--ease), background 120ms var(--ease);
    font-family: var(--font-sans);
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent-dim);
    background: var(--ink-2);
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.help {
    font-size: var(--fs-xs);
    color: var(--fg-2);
    margin-top: -6px;
    margin-bottom: 16px;
    font-style: italic;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 14, 'wght' 400;
}

.segment {
    display: inline-flex;
    padding: 2px;
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    gap: 2px;
}
.segment button {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--fg-1);
    padding: 5px 12px;
    font-size: var(--fs-xs);
    cursor: pointer;
    border-radius: 3px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    transition: all 100ms var(--ease);
}
.segment button:hover { color: var(--fg-0); }
.segment button.on {
    background: var(--ink-0);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.toggle input { display: none; }
.toggle .track {
    width: 30px; height: 16px;
    background: var(--ink-3);
    border-radius: 16px;
    position: relative;
    transition: background 140ms var(--ease);
    border: 1px solid var(--rule-strong);
}
.toggle .track::after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 12px; height: 12px;
    background: var(--fg-1);
    border-radius: 50%;
    transition: transform 160ms var(--ease), background 140ms var(--ease);
}
.toggle input:checked + .track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(14px); background: var(--accent-ink); }

/* ---------- Chips, tags ----------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
    border: 1px solid var(--rule-strong);
    background: var(--ink-2);
    color: var(--fg-1);
    line-height: 1.5;
}
.chip .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fg-2);
}
.tag-chip {
    padding: 2px 8px;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    border-radius: 4px;
    letter-spacing: 0.01em;
    border: 1px solid;
    white-space: nowrap;
}

.area-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--fg-1);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.area-pill .swatch {
    width: 8px; height: 8px; border-radius: 2px;
    flex: 0 0 8px;
}

/* ---------- Cards / rows --------------------------------------- */
.area-section {
    margin-bottom: 40px;
    animation: fadeUp 400ms var(--ease) both;
}
.area-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 14px;
}
.area-heading .strip {
    width: 3px; height: 20px; border-radius: 3px;
}
.area-heading h2 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 400;
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
}
.area-heading .count {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    margin-left: auto;
    letter-spacing: 0.06em;
}

.occurrence-card {
    display: grid;
    grid-template-columns: 3px 1fr auto;
    gap: 16px;
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--rule);
    transition: background 120ms var(--ease);
    align-items: start;
}
.occurrence-card:hover { background: var(--ink-1); }
.occurrence-card .edge {
    align-self: stretch;
    border-radius: 3px;
    opacity: 0.85;
}
.occurrence-card .body h3 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 36, 'wght' 500;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.occurrence-card .body p {
    color: var(--fg-2);
    font-size: var(--fs-sm);
    margin: 0 0 8px;
    line-height: 1.5;
}
.occurrence-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    color: var(--fg-2);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.occurrence-card .meta .due {
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
}
.occurrence-card .meta .due.soon { color: var(--accent); }
.occurrence-card .meta .due.overdue { color: var(--danger); }
.occurrence-card .actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 120ms var(--ease);
}
.occurrence-card:hover .actions { opacity: 1; }
.occurrence-card:focus-within .actions { opacity: 1; }

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
}
.tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--fg-2);
    cursor: pointer;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
    transition: all 120ms var(--ease);
}
.tabs button:hover { color: var(--fg-0); }
.tabs button.on {
    color: var(--fg-0);
    border-bottom-color: var(--accent);
}

.channel-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px 32px;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    align-items: center;
}
.channel-row .kind {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-1);
    display: flex; align-items: center; gap: 8px;
}
.channel-row .recipient {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-0);
    overflow-wrap: anywhere;
}
.channel-row .state { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); }
.channel-row .state.on { color: var(--ok); }

.icon-btn {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--fg-2);
    width: 28px; height: 28px;
    border-radius: var(--radius-s);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 120ms var(--ease);
}
.icon-btn:hover { background: var(--ink-3); color: var(--fg-0); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(224,122,95,0.08); }

.modal-veil {
    position: fixed; inset: 0;
    background: rgba(5,5,7,0.6);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    animation: fade 180ms var(--ease) both;
}
.modal {
    background: var(--ink-1);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-m);
    padding: 24px;
    width: min(460px, 92vw);
    box-shadow: 0 24px 48px rgba(0,0,0,0.4);
    animation: pop 200ms var(--ease) both;
}
.modal h3 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 400;
    font-size: var(--fs-xl);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}
.modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 20px;
}

.empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--fg-2);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-m);
    background: var(--ink-1);
}
.empty .glyph {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 300;
    font-size: 48px;
    color: var(--accent-dim);
    margin-bottom: 8px;
    line-height: 1;
}
.empty h4 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 48, 'wght' 500;
    font-size: var(--fs-lg);
    color: var(--fg-1);
    margin-bottom: 4px;
}
.empty p { font-size: var(--fs-sm); max-width: 360px; margin: 0 auto; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    max-width: 760px;
}
.form-grid .span-2 { grid-column: span 2; }

.form-section {
    border-top: 1px solid var(--rule);
    padding-top: 24px;
    margin-top: 24px;
}
.form-section .legend {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 16px;
}

.icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 14px;
}

.row-list { border-top: 1px solid var(--rule); }

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.toolbar .left, .toolbar .right {
    display: flex; gap: 10px; align-items: center;
}

.notice {
    padding: 12px 14px;
    border: 1px solid var(--rule-strong);
    border-left: 3px solid var(--accent);
    background: var(--ink-1);
    border-radius: var(--radius-s);
    font-size: var(--fs-sm);
    color: var(--fg-1);
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 400;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.stagger > * { animation: fadeUp 400ms var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 140ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; }
.stagger > *:nth-child(6) { animation-delay: 220ms; }

@media (max-width: 960px) {
    .page { grid-template-columns: 64px 1fr; }
    .brand-mark, .brand-sub, .nav-link .label-text, .nav-heading { display: none; }
    .brand { padding: 14px 10px; justify-content: center; flex-wrap: nowrap; }
    .brand-icon { width: 32px; height: 32px; }
    .nav-link { justify-content: center; padding: 10px; }
    .nav-link.active::before { display: none; }
    .content { padding: 28px 20px 60px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
    .channel-row { grid-template-columns: 90px 1fr auto; }
}

#blazor-error-ui {
    background: var(--ink-1);
    border-top: 1px solid var(--danger);
    color: var(--fg-0);
    padding: 12px 20px;
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    font-size: var(--fs-sm);
    font-family: var(--font-sans);
}
#blazor-error-ui .dismiss, #blazor-error-ui .reload {
    color: var(--accent);
    margin-left: 10px;
    cursor: pointer;
}

.link-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    color: var(--fg-2);
    margin-bottom: 16px;
    transition: color 120ms var(--ease);
}
.link-back:hover { color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   Settings — the user's desk. One ledger page, five chapters,
   hairline rules between. Editorial section numbers, mono meta.
   ────────────────────────────────────────────────────────────── */

.settings-marginalia {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.04em;
    min-width: 0;
    flex: 0 1 auto;
}
.settings-marginalia-key {
    color: var(--accent);
    font-size: 16px;
    line-height: 1;
}
.settings-marginalia-val {
    color: var(--fg-1);
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    text-align: right;
}

.settings-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 12px 0 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--rule);
    animation: fadeUp 400ms var(--ease) both;
}
.settings-toc-link {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    transition: color 120ms var(--ease);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
.settings-toc-link:hover { color: var(--accent); border-bottom-color: var(--accent-dim); }
.settings-toc-link.danger:hover { color: var(--danger); border-bottom-color: rgba(224,122,95,0.4); }
.settings-toc-num {
    color: var(--fg-3);
    font-size: 10px;
    letter-spacing: 0.16em;
}

.settings-section {
    padding: 40px 0 48px;
    border-top: 1px solid var(--rule);
    animation: fadeUp 400ms var(--ease) both;
}
.settings-section:first-of-type { border-top: 0; padding-top: 8px; }
.settings-section.danger-zone { border-top-color: rgba(224,122,95,0.28); }

.settings-header {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 24px;
}
.settings-header-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-dim);
    border-top: 1px solid var(--accent-dim);
    padding-top: 6px;
    min-width: 42px;
}
.settings-h2 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 450;
    font-size: var(--fs-2xl);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 4px;
}
.settings-lede {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-md);
    color: var(--fg-2);
    line-height: 1.5;
    margin: 0;
    max-width: 52ch;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    max-width: 760px;
    padding-left: 60px;
}
.settings-grid .field { margin-bottom: 0; }

.settings-inline-inputs {
    display: inline-flex;
    gap: 10px;
    align-items: stretch;
}

.settings-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 14px 0 0 60px;
    border-top: 1px dashed var(--rule);
    flex-wrap: wrap;
}
.settings-row-meta .kv {
    grid-template-columns: 80px 1fr;
    gap: 4px 14px;
    font-size: var(--fs-sm);
}

.settings-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-left: 60px;
}
.settings-section .help { padding-left: 60px; }
.settings-section > .notice { margin-left: 60px; }

/* Channel cards — two prominent tiles side by side */
.channel-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    padding-left: 60px;
    max-width: 920px;
}
.channel-card {
    border: 1px solid var(--rule-strong);
    background: var(--ink-1);
    border-radius: var(--radius-m);
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.channel-card:hover { border-color: var(--fg-3); }

/* Subscription paywall — channel kind locked behind a higher tier.
   Blur the card content, draw an overlay with a lock + upgrade CTA on top.
   Pointer events are killed on the children so the underlying form can't
   be reached; the overlay re-enables them locally so the Upgrade button
   stays clickable. */
.channel-card.locked {
    overflow: hidden;
    cursor: not-allowed;
}
.channel-card.locked > *:not(.channel-lock-overlay) {
    filter: blur(2px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.channel-card.locked:hover { border-color: var(--rule-strong); }

/* Lock indicator on a paywalled card. Just a small accented padlock in
   the top-right — the paywall messaging itself lives in the single
   .channel-cap-notice banner above the grid, not on every card. */
.channel-lock-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ink-2);
    border: 1px solid var(--rule-strong);
    color: var(--accent);
    z-index: 2;
    pointer-events: none;
}
.channel-lock-overlay .icon { width: 14px; height: 14px; }

/* Banner above the channel grid when capped. Sits on top of channel-cards. */
.channel-cap-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-m);
    background: rgba(233, 184, 114, 0.06);
}
.channel-cap-notice .cap-icon {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.channel-cap-notice .cap-icon .icon { width: 20px; height: 20px; }
.channel-cap-notice .cap-body {
    flex: 1;
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.5;
}
.channel-cap-notice .cap-body strong {
    color: var(--fg-0);
    font-weight: 500;
    margin-right: 4px;
}

.channel-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rule);
}
.channel-kind {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-1);
}
.channel-kind .icon { color: var(--accent); width: 16px; height: 16px; flex: 0 0 16px; }
.channel-help {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    line-height: 1.5;
    margin: 0;
}
.channel-help .inline-mark { color: var(--fg-0); }
.channel-help a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
.channel-help a:hover { color: var(--accent-hot); }
.channel-help .kbd {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    background: var(--ink-2);
    border: 1px solid var(--rule);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--fg-1);
    overflow-wrap: anywhere;
}
.channel-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
}
.channel-foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.toggle-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Telegram three-step setup — editorial numbered list in the
   lamplit ledger voice. Mono step-markers, Fraunces body. */
.tg-intro { display: flex; flex-direction: column; gap: 10px; }
.tg-lede {
    margin: 0;
    font-variation-settings: 'opsz' 18, 'wght' 440;
    color: var(--fg-1);
}
.tg-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px solid var(--rule);
    padding-left: 14px;
}
.tg-steps li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: baseline;
}
.tg-step-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    color: var(--accent);
    line-height: 1.5;
}
.tg-step-body {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--fg-1);
}
.tg-step-body strong {
    font-weight: 600;
    color: var(--fg-0);
    font-variation-settings: 'opsz' 18, 'wght' 560;
}
.tg-step-body .kbd {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    background: var(--ink-2);
    border: 1px solid var(--rule);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--fg-1);
    overflow-wrap: anywhere;
}
.tg-step-body a {
    color: var(--accent);
    border-bottom: 1px solid var(--accent-dim);
}
.tg-step-body a:hover { color: var(--accent-hot); }
.channel-footnote {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 12, 'wght' 380;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--fg-2);
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.channel-footnote-mark {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    flex: 0 0 auto;
}

/* Danger zone — quiet by default, sharper when expanded */
.danger-zone .settings-header-num {
    color: var(--danger);
    border-top-color: rgba(224,122,95,0.6);
}
.danger-panel {
    border: 1px solid rgba(224,122,95,0.32);
    background: rgba(224,122,95,0.04);
    border-radius: var(--radius-m);
    padding: 20px 22px 18px;
    margin-left: 60px;
    max-width: 720px;
    animation: fadeUp 260ms var(--ease) both;
}
.danger-line {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-md);
    color: var(--fg-1);
    line-height: 1.55;
    margin: 0 0 14px;
}
.danger-line strong {
    color: var(--fg-0);
    font-weight: 500;
    font-style: normal;
}
.danger-panel .field { margin-bottom: 10px; }
.danger-panel .notice {
    margin-left: 0;
    margin-bottom: 10px;
}

@media (max-width: 860px) {
    .settings-grid {
        grid-template-columns: 1fr;
        padding-left: 0;
    }
    .settings-header { grid-template-columns: 1fr; gap: 10px; }
    .settings-header-num { min-width: 0; }
    .settings-row-meta,
    .settings-row-actions,
    .settings-section .help,
    .settings-section > .notice,
    .channel-cards,
    .danger-panel {
        padding-left: 0;
        margin-left: 0;
    }
    .settings-row-meta { border-top-color: var(--rule); }
    .settings-row-actions { justify-content: stretch; }
    .settings-row-actions .btn { flex: 1; justify-content: center; }
    .settings-marginalia { display: none; }
}

.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 18px; font-size: var(--fs-sm); }
.kv dt {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.04em;
}
.kv dd { margin: 0; color: var(--fg-0); }

.completion-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-sm);
}
.completion-row .when {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}
.completion-row .note {
    color: var(--fg-1);
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 400;
}

/* ──────────────────────────────────────────────────────────────
   Admin surface — "ledger keeper's desk"
   Hairline tables, mono metadata, restrained pills.
   No competing palette — reuses tokens.
   ────────────────────────────────────────────────────────────── */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--ink-1);
    margin-bottom: 40px;
}
.stat-tile {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--ink-1);
    transition: background 140ms var(--ease);
    position: relative;
}
.stat-tile:hover { background: var(--ink-2); }
.stat-tile.alert::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--danger);
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.stat-value {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-size: 44px;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
}
.stat-tile.alert .stat-value { color: var(--danger); }

/* Clickable stat tile — used by the "New accounts awaiting review" tile on
   /admin. Reuses .stat-tile + .alert visuals; we just need the hover cue to
   read as a link rather than a dead panel, and to recolor the amber stripe
   so the awaiting-review state reads as attention-not-danger. */
a.stat-tile.review-tile { color: inherit; cursor: pointer; }
a.stat-tile.review-tile:hover .stat-value { color: var(--accent); }
a.stat-tile.review-tile:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}
.stat-tile.review-tile.alert::before { background: var(--accent); }
.stat-tile.review-tile.alert .stat-value { color: var(--accent); }
.stat-foot {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.02em;
}

.admin-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.admin-panel {
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background: var(--ink-1);
    padding: 18px 20px 12px;
    animation: fadeUp 400ms var(--ease) both;
}
.admin-panel .panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
}
.admin-panel .panel-head h2 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 450;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
}
.admin-panel .panel-link {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--fg-2);
    transition: color 120ms var(--ease);
}
.admin-panel .panel-link:hover { color: var(--accent); }
.admin-panel .panel-empty {
    padding: 24px 0 12px;
    color: var(--fg-3);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-sm);
}

/* --- Admin tables — hairline rows, fixed-column grids ------------ */
.admin-table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
    animation: fadeUp 400ms var(--ease) both;
}
.admin-table .at-row {
    display: grid;
    gap: 14px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--rule);
    align-items: center;
    transition: background 120ms var(--ease);
    font-size: var(--fs-sm);
    color: var(--fg-1);
}
.admin-table .at-row:not(.at-head):hover { background: var(--ink-1); }
.admin-table .at-row.at-head {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding-top: 8px;
    padding-bottom: 8px;
}
.admin-table .at-row .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.admin-table .at-row .mono.small { font-size: var(--fs-xs); }
.admin-table .at-row .mono.num { text-align: right; color: var(--fg-0); }
.admin-table .at-row .email { color: var(--fg-0); overflow-wrap: anywhere; }
.admin-table .at-row.at-head .mono.num { text-align: right; }

.admin-table .at-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Column grids per table variant — keeps header/body aligned. */
.admin-table.compact .at-row { grid-template-columns: 1.6fr 1fr 90px; }
.admin-table.compact .at-row.fail,
.admin-table.compact .at-row.at-head.fail { grid-template-columns: 90px 1.4fr 90px 2fr; }

.admin-table.users .at-row {
    grid-template-columns: 1.8fr 1.2fr 100px 90px 110px 1fr;
}
/* /admin/users with the review column on — one extra track for the stamp /
   Mark-reviewed button. Keeping the original .users selector above lets any
   consumer without the extra column still render. */
.admin-table.users.review-users .at-row {
    grid-template-columns: 1.7fr 1fr 90px 170px 80px 100px 1fr;
}
.admin-table.users .review-cell {
    display: inline-flex;
    align-items: center;
}
.role-badge.reviewed {
    color: var(--fg-2);
    border-color: var(--rule-strong);
    background: var(--ink-2);
    letter-spacing: 0.1em;
}
.btn.accent {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}
.btn.accent:hover {
    background: var(--accent-hot);
    border-color: var(--accent-hot);
}
.admin-table.series .at-row {
    grid-template-columns: 1.6fr 1.4fr 1.3fr 1.1fr 0.9fr 80px 90px 1.3fr;
}
.admin-table.deliveries .at-row {
    grid-template-columns: 100px 1.3fr 100px 1.3fr 70px 1.8fr 100px;
}
.admin-table.subscriptions .at-row {
    grid-template-columns: 1.8fr 130px 110px 140px 110px 110px 1fr;
}
.admin-table.channels .at-row {
    grid-template-columns: 1.1fr 110px 2fr 130px 1fr;
}
.admin-table.channels .channel-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fg-0);
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 36, 'wght' 500;
    font-size: var(--fs-md);
    letter-spacing: -0.005em;
}
.admin-table.channels .channel-name-cell .marker {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fg-3);
    flex: 0 0 6px;
    box-shadow: 0 0 0 0 transparent;
    transition: background 180ms var(--ease), box-shadow 220ms var(--ease);
}
.admin-table.channels .at-row.on .channel-name-cell .marker {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(233,184,114,0.18);
}
.admin-table.channels .desc-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-2);
    font-size: var(--fs-sm);
}
.admin-table.channels .desc-cell .desc-input {
    flex: 1;
    background: transparent;
    border: 1px dashed transparent;
    color: var(--fg-1);
    font-family: inherit;
    font-size: var(--fs-sm);
    padding: 4px 6px;
    border-radius: 4px;
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
    min-width: 0;
}
.admin-table.channels .desc-cell .desc-input::placeholder { color: var(--fg-3); font-style: italic; }
.admin-table.channels .desc-cell .desc-input:hover { border-color: var(--rule); }
.admin-table.channels .desc-cell .desc-input:focus {
    outline: none;
    border-color: var(--accent-dim);
    background: var(--ink-2);
}
.admin-table.channels .at-row.off {
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 10px,
            rgba(255,255,255,0.015) 10px 11px
        );
}
.admin-table.channels .at-row.off .channel-name-cell {
    color: var(--fg-2);
}
.sub-tier-select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    padding: 4px 8px;
}

.series-title-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.series-link {
    color: var(--fg-0);
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 36, 'wght' 500;
    font-size: var(--fs-md);
    letter-spacing: -0.005em;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms var(--ease), color 120ms var(--ease);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.series-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent-dim);
}

.meta-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
}

.err-cell {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--danger);
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.admin-table .at-row.fail { background: rgba(224,122,95,0.04); }
.admin-table .at-row.fail:hover { background: rgba(224,122,95,0.08); }

.correlation a.series-link {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variation-settings: normal;
}

/* --- Badges / pills ---------------------------------------------- */
.role-badge {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
    background: var(--ink-2);
    line-height: 1.5;
    margin-left: 6px;
}
.role-badge:first-child { margin-left: 0; }
.role-badge.admin {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(233,184,114,0.08);
}
.role-badge.super {
    color: var(--accent-hot);
    border-color: var(--accent);
    background: rgba(233,184,114,0.14);
}
.role-badge.fail {
    color: var(--danger);
    border-color: rgba(224,122,95,0.32);
    background: rgba(224,122,95,0.08);
}

.state-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
}
.state-pill.on {
    color: var(--ok);
    border-color: rgba(167,185,123,0.36);
    background: rgba(167,185,123,0.06);
}
.state-pill.off {
    color: var(--fg-3);
    border-color: var(--rule-strong);
    background: transparent;
}

.result-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
}
.result-pill.ok {
    color: var(--ok);
    border-color: rgba(167,185,123,0.36);
    background: rgba(167,185,123,0.06);
}
.result-pill.fail {
    color: var(--danger);
    border-color: rgba(224,122,95,0.36);
    background: rgba(224,122,95,0.06);
}

/* --- Responsive shrinks for admin tables ------------------------- */
@media (max-width: 1200px) {
    .admin-split { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .stat-tile { border-right: 0; }
    .admin-table.users .at-row,
    .admin-table.series .at-row,
    .admin-table.deliveries .at-row,
    .admin-table.subscriptions .at-row,
    .admin-table.channels .at-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .admin-table .at-row.at-head { display: none; }
    .admin-table .at-actions { justify-content: flex-start; margin-top: 6px; }
}

/* ──────────────────────────────────────────────────────────────
   Marketing / landing — editorial lamplit ledger
   ────────────────────────────────────────────────────────────── */

/* Shell */
.marketing-shell {
    min-height: 100vh;
    background: var(--ink-0);
    display: flex;
    flex-direction: column;
    /* subtle grain / vellum feel without overpowering */
    background-image:
        radial-gradient(ellipse at 85% -10%, rgba(233,184,114,0.06), transparent 55%),
        radial-gradient(ellipse at 5% 110%, rgba(233,184,114,0.035), transparent 50%);
}

/* Top nav */
.marketing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 48px;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    background: rgba(11,11,13,0.72);
    backdrop-filter: saturate(140%) blur(10px);
    z-index: 20;
}
[data-theme="light"] .marketing-nav {
    background: rgba(247,244,238,0.78);
}
.marketing-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    color: var(--fg-0);
}
.marketing-brand .brand-mark { font-size: 22px; }
.marketing-brand .brand-sub { position: relative; top: -1px; }
.marketing-nav-links {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}
.nav-quiet {
    font-size: var(--fs-sm);
    color: var(--fg-1);
    letter-spacing: 0.01em;
    transition: color 120ms var(--ease);
}
.nav-quiet:hover { color: var(--accent); }
.btn.lg {
    padding: 11px 20px;
    font-size: var(--fs-md);
    border-radius: var(--radius-s);
}

.marketing-main {
    flex: 1;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 72px 48px 96px;
}

/* ── Hero ── */
.hero { padding-bottom: 96px; border-bottom: 1px solid var(--rule); }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 28px;
}
.kicker-bar {
    display: inline-block;
    width: 36px;
    height: 1px;
    background: var(--accent);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 64px;
    align-items: start;
}

.hero-headline {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 350;
    font-size: clamp(40px, 6.2vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--fg-0);
    margin-bottom: 28px;
}
.hero-headline em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 300;
}
.hero-lede {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 24, 'wght' 380;
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.55;
    color: var(--fg-1);
    max-width: 54ch;
    margin: 0 0 32px;
}
.inline-mark {
    border-bottom: 1px solid var(--accent-dim);
    color: var(--fg-0);
    padding-bottom: 1px;
}

.hero-cta-row {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.hero-signals {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.02em;
}
.hero-signals span { display: inline-flex; align-items: center; gap: 6px; }
.hero-signals .icon { color: var(--accent); width: 12px; height: 12px; }
.hero-signals .dot-sep { color: var(--fg-3); }

/* Ledger mock card */
.hero-ledger {
    border: 1px solid var(--rule-strong);
    background: var(--ink-1);
    border-radius: var(--radius-m);
    padding: 22px 22px 18px;
    position: relative;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(233,184,114,0.04);
}
.hero-ledger::before {
    content: '';
    position: absolute;
    top: -8px; left: -8px;
    width: 42px; height: 42px;
    border-top: 1px solid var(--accent-dim);
    border-left: 1px solid var(--accent-dim);
    border-top-left-radius: var(--radius-m);
    opacity: 0.7;
    pointer-events: none;
}
.hero-ledger::after {
    content: '';
    position: absolute;
    bottom: -8px; right: -8px;
    width: 42px; height: 42px;
    border-bottom: 1px solid var(--accent-dim);
    border-right: 1px solid var(--accent-dim);
    border-bottom-right-radius: var(--radius-m);
    opacity: 0.7;
    pointer-events: none;
}
.ledger-stamp {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--rule-strong);
    margin-bottom: 18px;
}
.stamp-row { display: flex; flex-direction: column; gap: 2px; }
.stamp-key {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.stamp-val {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}
.ledger-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ledger-heading .strip { width: 3px; height: 18px; border-radius: 3px; }
.ledger-heading .strip-amber { background: var(--accent); }
.ledger-heading h3 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 450;
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
}
.ledger-heading .count {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-3);
    margin-left: auto;
}
.ledger-row {
    display: grid;
    grid-template-columns: 3px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
.ledger-row.muted { opacity: 0.72; }
.ledger-row .edge { align-self: stretch; border-radius: 3px; }
.edge-amber { background: var(--accent); }
.edge-sage  { background: #a7b97b; }
.edge-slate { background: #8fb3c4; }
.ledger-title {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 36, 'wght' 500;
    font-size: var(--fs-md);
    color: var(--fg-0);
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.ledger-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
    letter-spacing: 0.02em;
}
.ledger-meta .due { color: var(--fg-0); font-variant-numeric: tabular-nums; }
.ledger-meta .due.soon { color: var(--accent); }
.anchor-pill {
    padding: 1px 6px;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    color: var(--fg-2);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ledger-footnote {
    margin-top: 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    border-top: 1px solid var(--rule);
    padding-top: 10px;
}

/* ── Section heads ── */
.section-head {
    margin: 96px 0 48px;
    max-width: 780px;
}
.feature-set .section-head { margin-top: 24px; }
.section-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-dim);
    margin-bottom: 16px;
}
.section-title {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 380;
    font-size: clamp(32px, 4.5vw, 52px);
    letter-spacing: -0.02em;
    line-height: 1.04;
    margin-bottom: 18px;
}
.section-title em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 300;
}
.section-lede {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-lg);
    color: var(--fg-1);
    line-height: 1.55;
    margin: 0;
    max-width: 62ch;
}

/* ── Feature rows (editorial alternating) ── */
.feature-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 56px;
    align-items: start;
    padding: 40px 0;
    border-top: 1px solid var(--rule);
}
.feature-row:last-of-type { border-bottom: 1px solid var(--rule); }
.feature-row.reverse { grid-template-columns: 1fr 180px; }
.feature-row.reverse .feature-mark { order: 2; justify-self: end; text-align: right; }
.feature-row.reverse .feature-text { order: 1; }

.feature-mark {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding-top: 4px;
}
.feature-icon {
    width: 40px;
    height: 40px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-3);
    border-top: 1px solid var(--accent-dim);
    padding-top: 6px;
    min-width: 42px;
}
.feature-text h3 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 460;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -0.015em;
    line-height: 1.18;
    margin-bottom: 12px;
}
.feature-text h3 em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 72, 'wght' 350;
}
.feature-text p {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-lg);
    color: var(--fg-1);
    line-height: 1.6;
    max-width: 58ch;
    margin: 0;
}
.feature-text p em {
    font-style: italic;
    color: var(--fg-0);
}

/* ── Pricing ── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--ink-1);
}
.pricing-tile {
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: 1px solid var(--rule);
    background: var(--ink-1);
    position: relative;
    transition: background 140ms var(--ease);
}
.pricing-tile:last-child { border-right: 0; }
.pricing-tile:hover { background: var(--ink-2); }

.pricing-tile.recommended {
    background: var(--ink-2);
    box-shadow: inset 0 0 0 1px rgba(233,184,114,0.24);
}
.recommended-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent-dim);
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(233,184,114,0.06);
}

.tier-head { display: flex; flex-direction: column; gap: 4px; }
.tier-name {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 480;
    font-size: 26px;
    letter-spacing: -0.015em;
    color: var(--fg-0);
}
.tier-byline {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    line-height: 1.4;
}

.price-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.price-mono {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 380;
    font-size: 48px;
    letter-spacing: -0.03em;
    color: var(--fg-0);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.price-line.amber .price-mono { color: var(--accent); }
.price-per {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-2);
    letter-spacing: 0.02em;
}
.price-rule {
    height: 1px;
    background: var(--rule);
    margin: 2px 0 6px;
}
.price-underline {
    height: 2px;
    width: 56px;
    background: var(--accent);
    margin: 4px 0 2px;
    border-radius: 2px;
}
.price-alt {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.02em;
}

.tier-feats {
    list-style: none;
    padding: 0;
    margin: 8px 0 18px;
    display: flex;
    flex-direction: column;
}
.tier-feats li {
    font-size: var(--fs-sm);
    color: var(--fg-1);
    padding: 9px 0;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.tier-feats li:last-child { border-bottom: 1px solid var(--rule); }
.feat-mark {
    display: inline-block;
    min-width: 12px;
    font-family: var(--font-mono);
    color: var(--fg-3);
    font-size: var(--fs-sm);
}
.feat-mark.amber { color: var(--accent); font-weight: 600; }
.soon-tag {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    border: 1px solid var(--rule-strong);
    padding: 1px 5px;
    border-radius: 2px;
}

.tier-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: var(--radius-s);
    font-size: var(--fs-sm);
    font-weight: 500;
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--fg-0);
    transition: all 140ms var(--ease);
    text-decoration: none;
    font-family: var(--font-sans);
    letter-spacing: -0.005em;
}
.tier-cta:hover { background: var(--ink-3); border-color: var(--fg-3); }
.tier-cta.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.tier-cta.primary:hover { background: var(--accent-hot); border-color: var(--accent-hot); }
.tier-cta.ghost { color: var(--fg-1); }
.tier-cta.ghost:hover { color: var(--fg-0); }

.tier-footnote {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-xs);
    color: var(--fg-3);
    text-align: center;
    margin-top: 2px;
}

/* ── Closing CTA ── */
.closing {
    margin-top: 112px;
    text-align: center;
    padding: 80px 0 40px;
}
.closing-rule {
    width: 1px;
    height: 64px;
    background: var(--accent-dim);
    margin: 0 auto 40px;
}
.closing-line {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 360;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--fg-0);
    margin: 0 auto 32px;
    max-width: 22ch;
}
.closing-line em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 300;
}
.closing-foot {
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-3);
    letter-spacing: 0.06em;
}

/* ── Footer ── */
.marketing-footer {
    margin-top: 80px;
    padding: 40px 48px 28px;
    border-top: 1px solid var(--rule);
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.footer-rule {
    height: 1px;
    background: var(--rule);
    margin-bottom: 32px;
    display: none;
}
.footer-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--rule);
}
.footer-brand .brand-mark.small {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--fg-0);
}
.footer-brand .brand-mark.small em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 400;
}
.footer-tag {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    margin-top: 6px;
    max-width: 32ch;
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-head {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 4px;
}
.footer-col a {
    font-size: var(--fs-sm);
    color: var(--fg-1);
    transition: color 120ms var(--ease);
}
.footer-col a:hover { color: var(--accent); }
.footer-col a[aria-disabled="true"] { color: var(--fg-3); cursor: default; }
.footer-col a[aria-disabled="true"]:hover { color: var(--fg-3); }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-3);
    letter-spacing: 0.02em;
}

/* ── Auth card (login/register/logout re-styled in marketing layout) ── */
.auth-stage {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}
.auth-card {
    width: min(440px, 100%);
    background: var(--ink-1);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-m);
    padding: 40px 36px 32px;
    position: relative;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 28px; right: 28px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.auth-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-dim);
    margin-bottom: 12px;
}
.auth-title {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-size: 40px;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}
.auth-title em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 300;
}
.auth-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-md);
    color: var(--fg-2);
    margin-bottom: 28px;
}
.auth-divider {
    height: 1px;
    background: var(--rule);
    margin: 22px 0 18px;
}
.auth-foot {
    font-size: var(--fs-sm);
    color: var(--fg-2);
    text-align: center;
}
.auth-foot a { color: var(--accent); }
.auth-foot a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .marketing-nav { padding: 18px 24px; }
    .marketing-main { padding: 48px 24px 72px; }
    .marketing-footer { padding: 32px 24px 24px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-ledger { max-width: 100%; overflow: hidden; }
    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 72px 1fr;
        gap: 24px;
        padding: 28px 0;
    }
    .feature-row.reverse .feature-mark { order: 0; justify-self: start; text-align: left; }
    .feature-row.reverse .feature-text { order: 0; }
    .feature-icon { width: 28px; height: 28px; }
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-tile { border-right: 0; border-bottom: 1px solid var(--rule); }
    .pricing-tile:last-child { border-bottom: 0; }
    .footer-row { grid-template-columns: 1fr; gap: 28px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .marketing-nav-links { gap: 14px; }
    .marketing-nav-links .nav-quiet { display: none; }
}

/* ──────────────────────────────────────────────────────────────
   Global a11y / interaction polish
   ────────────────────────────────────────────────────────────── */

/* Accessible focus ring — amber, inset + outer for clarity */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.btn:focus-visible,
.tier-cta:focus-visible {
    outline: 2px solid var(--accent-hot);
    outline-offset: 2px;
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    outline: 2px solid var(--accent-dim);
    outline-offset: 0;
}

/* Active press state — slight, tactile */
.btn:active { transform: translateY(0.5px); }
.btn:disabled:active { transform: none; }

/* Hover elevation for cards (shared) */
.occurrence-card:hover,
.channel-card:hover {
    box-shadow: 0 0 0 1px rgba(233,184,114,0.12), 0 6px 18px rgba(0,0,0,0.22);
}

/* Skip-to-content — shown only when focused */
.skip-link {
    position: fixed;
    top: 8px; left: 8px;
    background: var(--ink-1);
    color: var(--fg-0);
    border: 1px solid var(--accent);
    padding: 8px 14px;
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: translateY(-200%);
    transition: transform 140ms var(--ease);
    z-index: 1000;
}
.skip-link:focus { transform: translateY(0); outline: none; }

/* Prefer-reduced-motion — tone down our little animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active { transform: none; }
}

/* ──────────────────────────────────────────────────────────────
   Toasts — short-lived confirmations, rail bottom-right.
   ────────────────────────────────────────────────────────────── */
.toast-rail {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
    max-width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px 12px;
    align-items: center;
    background: var(--ink-1);
    border: 1px solid var(--rule-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-s);
    padding: 10px 12px 10px 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.32);
    pointer-events: auto;
    animation: toast-in 220ms var(--ease) both;
}
.toast-kick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}
.toast-kick .icon { width: 12px; height: 12px; }
.toast-body {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 400;
    font-size: var(--fs-sm);
    color: var(--fg-0);
    line-height: 1.4;
}
.toast-x {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--fg-3);
    width: 22px; height: 22px;
    cursor: pointer;
    border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 120ms var(--ease);
}
.toast-x:hover { color: var(--fg-0); background: var(--ink-2); }
.toast.toast-info { border-left-color: var(--info); }
.toast.toast-info .toast-kick { color: var(--info); }
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-error .toast-kick { color: var(--danger); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────
   Skeleton shimmer — a polite "still setting the table" affordance.
   ────────────────────────────────────────────────────────────── */
.skel-block {
    display: block;
    background: linear-gradient(
        90deg,
        var(--ink-1) 0%,
        var(--ink-2) 40%,
        var(--ink-3) 50%,
        var(--ink-2) 60%,
        var(--ink-1) 100%
    );
    background-size: 240% 100%;
    animation: skel-shimmer 1.4s var(--ease) infinite;
    border-radius: 3px;
}
.skel-round { border-radius: 999px; }
@keyframes skel-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

.skel-row {
    display: grid;
    grid-template-columns: 3px 1fr 120px;
    gap: 14px;
    padding: 14px 8px;
    border-bottom: 1px solid var(--rule);
    align-items: center;
}
.skel-edge { width: 3px; align-self: stretch; border-radius: 3px; background: var(--ink-3); }
.skel-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skel-title { height: 14px; }
.skel-meta { height: 10px; }
.skel-action { height: 26px; border-radius: var(--radius-s); }

.skel-stack { display: flex; flex-direction: column; gap: 10px; }
.skel-heading {
    height: 18px; width: 180px; margin-bottom: 12px;
}

/* ──────────────────────────────────────────────────────────────
   Error banner — recoverable, inline, with optional retry.
   ────────────────────────────────────────────────────────────── */
.error-banner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px 16px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(224,122,95,0.32);
    border-left: 3px solid var(--danger);
    background: rgba(224,122,95,0.05);
    border-radius: var(--radius-s);
    margin-bottom: 20px;
    animation: fadeUp 240ms var(--ease) both;
}
.error-kick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--danger);
}
.error-kick .icon { width: 13px; height: 13px; }
.error-body { min-width: 0; }
.error-msg {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 400;
    font-size: var(--fs-sm);
    color: var(--fg-0);
    line-height: 1.45;
}
.error-hint {
    font-size: var(--fs-xs);
    color: var(--fg-2);
    margin-top: 2px;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
@media (max-width: 600px) {
    .error-banner { grid-template-columns: 1fr; gap: 8px; }
    .error-banner .btn { justify-self: start; }
}

/* Informational variant — reuses the .error-kick / .error-body / .error-msg
   children but tinted with the accent instead of the danger colour. */
.notice-banner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px 16px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(233,184,114,0.32);
    border-left: 3px solid var(--accent);
    background: rgba(233,184,114,0.06);
    border-radius: var(--radius-s);
    margin-bottom: 20px;
    animation: fadeUp 240ms var(--ease) both;
}
.notice-banner .error-kick { color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   Form validation — Blazor injects .valid/.invalid; style ourselves.
   ────────────────────────────────────────────────────────────── */
.field .validation-message {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--danger);
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.input.invalid, .select.invalid, .textarea.invalid {
    border-color: rgba(224,122,95,0.6);
    background: rgba(224,122,95,0.04);
}
.input.modified.valid {
    border-color: rgba(167,185,123,0.36);
}
.req-mark { color: var(--accent); margin-left: 3px; font-weight: 600; }

/* Password rules panel */
.password-rules {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.02em;
}
.password-rules .rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.password-rules .rule .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--fg-3);
    transition: background 120ms var(--ease);
}
.password-rules .rule.ok .dot { background: var(--ok); }
.password-rules .rule.ok { color: var(--fg-1); }

/* Password eye toggle, inline with input */
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 40px; }
.password-wrap .eye {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    background: transparent;
    border: 0;
    color: var(--fg-2);
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 120ms var(--ease), background 120ms var(--ease);
}
.password-wrap .eye:hover { color: var(--fg-0); background: var(--ink-2); }
.password-wrap .eye .eye-hide,
.password-wrap .eye.is-on .eye-show { display: none; }
.password-wrap .eye.is-on .eye-hide { display: inline-flex; }

/* Remember-me toggle line */
.remember-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 14px;
}

/* ──────────────────────────────────────────────────────────────
   Filter chips (dashboard)
   ────────────────────────────────────────────────────────────── */
.filter-chips {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    animation: fadeUp 340ms var(--ease) both;
}
.filter-chip {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--fg-1);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 120ms var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filter-chip:hover { color: var(--fg-0); border-color: var(--fg-3); }
.filter-chip.on {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(233,184,114,0.08);
}
.filter-chip .ct {
    font-size: 10px;
    color: var(--fg-3);
    padding-left: 4px;
    border-left: 1px solid var(--rule);
    margin-left: 2px;
}
.filter-chip.on .ct { color: var(--accent-dim); border-left-color: var(--accent-dim); }

/* Saving indicator in button body */
.btn.is-saving { position: relative; }
.btn .spin {
    width: 12px; height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────
   Recurrence / Notify summary lines (SeriesEdit)
   ────────────────────────────────────────────────────────────── */
.summary-line {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-s);
    background: var(--ink-1);
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 400;
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: 1.45;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    align-items: baseline;
}
.summary-line .summary-kick {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-dim);
}
.summary-line .summary-value { color: var(--fg-0); }

/* SeriesList skeleton alt grid */
@media (min-width: 961px) {
    .skel-row.series-skel {
        grid-template-columns: 3px 1fr 180px 120px 90px;
    }
}

/* Tabs — focus style */
.tabs button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Hamburger button in the topbar — shown only on narrow screens. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    color: var(--fg-0);
    cursor: pointer;
    padding: 0;
    transition: background 120ms var(--ease);
}
.nav-toggle:hover { background: var(--ink-2); }
.nav-toggle .icon { width: 18px; height: 18px; }

/* Scrim behind the drawer at narrow widths. Hidden on wide layouts. */
.sidebar-scrim { display: none; }

/* Narrow screens: sidebar becomes an off-canvas drawer on the LEFT,
   toggled by the hamburger in the topbar. */
@media (max-width: 720px) {
    .page { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: auto;
        width: 260px;
        max-width: 82vw;
        height: 100vh;
        border-right: 1px solid var(--rule);
        border-top: 0;
        background: var(--ink-1);
        z-index: 40;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 200ms var(--ease);
        box-shadow: 4px 0 18px rgba(0,0,0,0.35);
    }
    .page.sidebar-open .sidebar { transform: translateX(0); }

    .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 35;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms var(--ease);
    }
    .page.sidebar-open .sidebar-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-toggle { display: inline-flex; }

    /* Restore full-width nav contents inside the drawer — override the
       icon-only rules that kick in at the 960px breakpoint. */
    .sidebar .brand { display: flex; padding: 20px 22px 24px; justify-content: flex-start; }
    .brand-mark { display: block; }
    .brand-sub { display: block; }
    .brand-icon { width: 36px; height: 36px; }
    .nav-link .label-text { display: inline; }
    .nav-heading { display: block; }
    .nav-link { justify-content: flex-start; padding: 7px 10px; }
    .nav-link.active::before { display: block; }

    .content { padding: 24px 18px 60px; }
    .topbar { padding: 0 12px; }
    .topbar .user-chip span:not(.avatar) { display: none; }
    .settings-toc { gap: 12px 14px; }
    .area-heading h2 { font-size: var(--fs-lg); }
    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .page-head h1 { font-size: var(--fs-2xl); }
    .toast-rail { right: 12px; left: 12px; bottom: 16px; max-width: unset; }
}

/* Tables horizontally scroll on narrow screens */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Pending row state — when a mutation is in-flight */
.is-pending { opacity: 0.6; pointer-events: none; }

/* Occurrence row buttons always visible on touch devices (can't hover) */
@media (hover: none) {
    .occurrence-card .actions { opacity: 1 !important; }
}

/* ──────────────────────────────────────────────────────────────────
   Billing · /billing page
   Editorial "accountant's broadsheet". The current plan sits on a
   stamped folio; tariff reuses the pricing-grid from Landing with a
   "current plan" swap; history is a ruled ledger with mono amounts.
   ────────────────────────────────────────────────────────────────── */

.billing-section {
    position: relative;
    padding: 28px 0 32px;
}
.billing-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    padding-left: 4px;
}
.billing-header-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    color: var(--fg-3);
    padding-top: 6px;
    min-width: 36px;
}
.billing-h2 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    font-size: var(--fs-xl);
    letter-spacing: -0.012em;
}
.billing-lede {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    color: var(--fg-2);
    font-size: var(--fs-sm);
}

/* Hairline — the editorial divider between sections. Not a full rule; it's
   short and offset, the way a broadsheet section break actually looks. */
.billing-hairline {
    height: 1px;
    width: 120px;
    background: var(--rule-strong);
    margin: 8px 0 8px 44px;
    position: relative;
}
.billing-hairline::before {
    content: "§";
    position: absolute;
    left: -22px;
    top: -10px;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 24, 'wght' 380;
    font-style: italic;
    font-size: 14px;
    color: var(--accent-dim);
}

/* ── Current plan card — the stamped folio ── */
.billing-plan-card {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 28px;
    padding: 26px 28px 24px;
    background: var(--ink-1);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    position: relative;
    overflow: hidden;
    animation: fadeUp 380ms var(--ease) both;
}
.billing-plan-card::before {
    /* a tungsten-amber edge, like a ledger ribbon */
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--accent-dim);
    opacity: 0.5;
}
.billing-plan-card.is-comped::before { background: var(--accent); opacity: 0.9; }
.billing-plan-card.is-winding-down::before { background: var(--danger); opacity: 0.7; }

.billing-plan-eyebrow .kick {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.billing-plan-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 10px;
}
.billing-plan-name {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 144, 'wght' 380;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--fg-0);
}
.billing-plan-name em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 420;
}

.billing-plan-copy {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--fg-1);
    margin: 0 0 16px;
    max-width: 52ch;
}
.billing-plan-copy em {
    font-style: italic;
    color: var(--fg-0);
}
.billing-plan-copy strong {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--fg-0);
}
.billing-plan-copy .mono {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--fg-0);
    letter-spacing: 0.01em;
}

.billing-plan-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-size: var(--fs-xs);
}
.billing-plan-meta .kv-kick {
    font-family: var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.billing-plan-meta .kv-val {
    font-family: var(--font-mono);
    color: var(--fg-1);
    letter-spacing: 0.02em;
}

/* Right column — resume button OR trial-dial OR decorative glyph */
.billing-plan-aside {
    border-left: 1px solid var(--rule);
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.billing-aside-glyph {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 300;
    font-size: 72px;
    color: var(--accent-dim);
    opacity: 0.4;
    line-height: 0.8;
    letter-spacing: -0.03em;
}
.billing-aside-foot {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-xs);
    color: var(--fg-3);
    line-height: 1.5;
}

/* 14-day trial dial — a horizontal rule that fills amber as the trial
   elapses. Bar, not wheel — reads faster in a sidebar column. */
.trial-dial {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trial-dial-rule {
    height: 6px;
    background: var(--ink-3);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.trial-dial-rule::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--pct, 0%);
    background: linear-gradient(90deg, var(--accent-dim) 0%, var(--accent) 100%);
    transition: width 420ms var(--ease);
}
.trial-dial-foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--fg-2);
    text-transform: lowercase;
}

/* ── Tariff grid — reuses .pricing-grid from Landing with a tweak ── */
.billing-tariff .pricing-tile.is-current {
    background: var(--ink-2);
    box-shadow: inset 0 0 0 1px rgba(233,184,114,0.22);
}
.recommended-tag.current {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(233,184,114,0.10);
}
.tier-cta:disabled {
    opacity: 0.55;
    cursor: default;
    background: transparent;
    border-color: var(--rule);
    color: var(--fg-2);
}
.tier-cta:disabled:hover { background: transparent; border-color: var(--rule); }

/* ── Payment history ledger ── */
.billing-history {
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    background: var(--ink-1);
    overflow: hidden;
}
.history-row {
    display: grid;
    grid-template-columns: 150px 1fr 120px 1.4fr;
    gap: 16px;
    align-items: start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rule);
    font-size: var(--fs-sm);
}
.history-row:last-child { border-bottom: 0; }
.history-row.history-head {
    background: var(--ink-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 10px 18px;
}

.history-row .col-when .when-rel {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--fg-1);
}
.history-row .col-when .when-abs {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-xs);
    color: var(--fg-3);
    margin-top: 2px;
}

.history-row .col-event {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.history-kind-text {
    color: var(--fg-0);
    line-height: 1.35;
}
.history-kind-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 1px solid var(--rule-strong);
    background: var(--ink-2);
    color: var(--fg-2);
    white-space: nowrap;
    line-height: 1.4;
}
.history-kind-chip.amber {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(233,184,114,0.08);
}
.history-kind-chip.warn {
    color: var(--danger);
    border-color: rgba(224,122,95,0.45);
    background: rgba(224,122,95,0.06);
}
.history-kind-chip.ok {
    color: var(--ok);
    border-color: rgba(167,185,123,0.45);
    background: rgba(167,185,123,0.06);
}
.history-kind-chip.neutral { /* default */ }

.history-row .col-amount {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-md);
    color: var(--fg-0);
    text-align: right;
}
.history-row .col-amount .dash,
.history-row .col-note .dash {
    color: var(--fg-3);
}
.history-row .col-note .note-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    color: var(--fg-1);
    line-height: 1.45;
}

/* ── Small print ── */
.billing-smallprint {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    line-height: 1.65;
    max-width: 68ch;
    padding: 4px 0 8px;
}
.billing-smallprint em {
    font-style: italic;
    color: var(--fg-1);
    letter-spacing: 0.01em;
}

/* Confirm-switch modal body copy */
.modal-body-text {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--fg-1);
    margin: 0 0 18px;
}
.modal-body-text em { color: var(--accent); font-style: italic; }

/* ── Dashboard onboarding banner ── */
.onboarding-banner {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 16px 18px 18px;
    margin-bottom: 28px;
    background: var(--ink-1);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-m);
    animation: fadeUp 380ms var(--ease) both;
    position: relative;
}
.onboarding-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(233,184,114,0.08);
    border: 1px solid var(--accent-dim);
    color: var(--accent);
}
.onboarding-mark .icon { width: 18px; height: 18px; }
.onboarding-headline {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
    color: var(--fg-0);
    line-height: 1.25;
}
.onboarding-headline em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 72, 'wght' 420;
}
.onboarding-copy {
    margin: 4px 0 12px;
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.55;
    max-width: 60ch;
}
.onboarding-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.onboarding-x {
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--fg-3);
    cursor: pointer;
    align-self: start;
    border-radius: var(--radius-s);
    transition: color 140ms var(--ease), background 140ms var(--ease);
}
.onboarding-x:hover { color: var(--fg-0); background: var(--ink-2); }
.onboarding-x .icon { width: 14px; height: 14px; }

/* ── SeriesEdit soft warning (no-channels) ── */
.soft-warn {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    background: var(--ink-1);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-s);
}
.soft-warn-glyph { color: var(--accent); width: 18px; height: 18px; margin-top: 2px; }
.soft-warn-head {
    font-size: var(--fs-sm);
    color: var(--fg-0);
    font-weight: 500;
    margin-bottom: 3px;
}
.soft-warn-head em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 14, 'wght' 420;
}
.soft-warn-copy {
    font-size: var(--fs-xs);
    color: var(--fg-2);
    line-height: 1.5;
}
.soft-warn-link {
    margin-left: 6px;
    color: var(--accent);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}
.soft-warn-link:hover { color: var(--accent-hot); }

/* Responsive — billing page */
@media (max-width: 960px) {
    .billing-plan-card {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .billing-plan-aside {
        border-left: 0;
        border-top: 1px solid var(--rule);
        padding-left: 0;
        padding-top: 18px;
    }
    .history-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
    }
    .history-row.history-head { display: none; }
    .history-row .col-when { grid-column: 1 / 2; }
    .history-row .col-amount { grid-column: 2 / 3; text-align: right; }
    .history-row .col-event { grid-column: 1 / 3; order: -1; }
    .history-row .col-note { grid-column: 1 / 3; }
    .onboarding-banner {
        grid-template-columns: 36px 1fr;
    }
    .onboarding-x {
        grid-column: 2 / 3;
        justify-self: end;
        margin-top: -40px;
    }
}

/* ──────────────────────────────────────────────────────────────────
   Request-access flow — Landing pricing "beta" stamp, /billing pending
   banner + welcome ribbon + deny note, tile "pending" CTA, admin
   upgrade-requests page. Reuses the same token palette (tungsten amber,
   warm near-black, Fraunces/Inter Tight/JetBrains Mono).
   ────────────────────────────────────────────────────────────────── */

/* ── Landing & billing: the "Invite-only beta" stamp that replaces $4/$8 ── */
.price-line.is-beta {
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 2px;
    margin-top: 6px;
    border-top: 1px solid var(--rule);
}
.price-beta-stamp {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px 9px;
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-s);
    background: rgba(233,184,114,0.06);
    position: relative;
    transform: rotate(-1.2deg);
    transform-origin: left center;
}
.price-beta-stamp::before {
    /* A second, offset underline — reads like a rubber stamp that didn't
       land perfectly square. Keeps the editorial feel. */
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 1px;
    background: var(--accent-dim);
    opacity: 0.35;
}
.price-line.is-beta .beta-sigil {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 72, 'wght' 400;
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
}
.price-line.is-beta .beta-word {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
}
.price-beta-aside {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.02em;
}

/* ── Billing page: pending-request banner ── */
.request-banner {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 16px 18px;
    margin-bottom: 22px;
    background: var(--ink-1);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-m);
    position: relative;
    overflow: hidden;
    animation: fadeUp 380ms var(--ease) both;
}
.request-banner::after {
    /* Decorative amber "§" folio mark, faint, top-right — gives the banner
       the same stamped feel as the ledger cards. */
    content: "§";
    position: absolute;
    top: -18px;
    right: 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 300;
    font-size: 88px;
    color: var(--accent);
    opacity: 0.05;
    pointer-events: none;
}
.request-banner-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(233,184,114,0.08);
    border: 1px solid var(--accent-dim);
    color: var(--accent);
}
.request-banner-mark .icon { width: 18px; height: 18px; }
.request-banner-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.request-banner-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.request-banner-head .kick { color: var(--accent); }
.request-banner-head .dot-sep { opacity: 0.6; letter-spacing: 0; }
.request-banner-line {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-size: var(--fs-md);
    color: var(--fg-0);
    line-height: 1.5;
}
.request-banner-line em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 18, 'wght' 420;
}
.request-banner-note {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    line-height: 1.5;
    padding-top: 2px;
    max-width: 62ch;
}
.request-banner-x {
    align-self: start;
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-s);
    color: var(--fg-1);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.request-banner-x:hover:not(:disabled) {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(224,122,95,0.06);
}
.request-banner-x:disabled { opacity: 0.5; cursor: default; }

/* ── Billing page: welcome ribbon (latest request = Approved, within 7d) ── */
.welcome-ribbon {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: start;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: linear-gradient(180deg, rgba(233,184,114,0.08) 0%, rgba(233,184,114,0.02) 100%);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-m);
    animation: fadeUp 380ms var(--ease) both;
}
.welcome-sigil {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 300;
    font-size: 38px;
    line-height: 1;
    color: var(--accent);
    margin-top: -2px;
}
.welcome-body { display: flex; flex-direction: column; gap: 4px; }
.welcome-head {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 420;
    font-size: var(--fs-lg);
    color: var(--fg-0);
    letter-spacing: -0.005em;
}
.welcome-head em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 18, 'wght' 440;
}
.welcome-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.5;
    max-width: 62ch;
}
.welcome-note {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    padding-top: 4px;
    max-width: 62ch;
}

/* ── Billing page: deny note (latest request = Denied, within 30d) ── */
.deny-note {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 16px;
    align-items: start;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: rgba(224,122,95,0.04);
    border: 1px solid rgba(224,122,95,0.35);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-m);
    animation: fadeUp 380ms var(--ease) both;
}
.deny-sigil {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 48, 'wght' 400;
    font-size: 22px;
    line-height: 1;
    color: var(--danger);
    margin-top: 2px;
}
.deny-body { display: flex; flex-direction: column; gap: 4px; }
.deny-head {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 420;
    font-size: var(--fs-md);
    color: var(--fg-0);
}
.deny-head em {
    font-style: italic;
    color: var(--danger);
    font-variation-settings: 'opsz' 18, 'wght' 440;
}
.deny-note-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.5;
    padding-top: 2px;
    max-width: 62ch;
}
.deny-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    font-size: var(--fs-sm);
    color: var(--fg-2);
}

/* ── Billing page: "Requested · pending" tile CTA + sub-link ── */
.tier-cta-stack {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tier-cta.pending {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(233,184,114,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: default;
}
.tier-cta.pending:hover {
    background: rgba(233,184,114,0.06);
    border-color: var(--accent-dim);
}
.tier-cta.pending .pending-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    position: relative;
    box-shadow: 0 0 0 0 rgba(233,184,114,0.6);
    animation: pendingPulse 1600ms var(--ease) infinite;
}
@keyframes pendingPulse {
    0%   { box-shadow: 0 0 0 0   rgba(233,184,114,0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(233,184,114,0); }
    100% { box-shadow: 0 0 0 0   rgba(233,184,114,0); }
}
.tier-cta-mini {
    align-self: center;
    padding: 4px 8px;
    background: transparent;
    border: 0;
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 3px;
    transition: color 140ms var(--ease);
}
.tier-cta-mini:hover { color: var(--danger); }
.tier-cta-mini:disabled { opacity: 0.5; cursor: default; }

/* ── Admin upgrade-requests page ── */
.admin-section {
    position: relative;
    padding: 28px 0 8px;
}
.admin-section-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-left: 4px;
}
.admin-section-num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    color: var(--fg-3);
    padding-top: 6px;
    min-width: 36px;
}
.admin-section-h2 {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    font-size: var(--fs-xl);
    letter-spacing: -0.012em;
}
.admin-section-lede {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    color: var(--fg-2);
    font-size: var(--fs-sm);
    max-width: 72ch;
    line-height: 1.5;
}
.admin-section-lede em {
    color: var(--accent);
    font-style: italic;
}

.admin-table.upgrade-requests.pending .at-row {
    grid-template-columns: 1.6fr 110px 110px 2.2fr 110px 180px;
}
.admin-table.upgrade-requests.history .at-row {
    grid-template-columns: 1.6fr 110px 160px 2.2fr 120px 1.4fr;
}
.admin-table.upgrade-requests .ur-note {
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.admin-table.upgrade-requests .ur-note .note-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 14, 'wght' 380;
    color: var(--fg-1);
}
.admin-table.upgrade-requests .ur-note .dash { color: var(--fg-3); }
.admin-table.upgrade-requests .at-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

/* Small tier chip used in the pending / history tables. Uses the same
   visual vocabulary as .history-kind-chip but is always lowercase and
   reads as the "name" of the tier. */
.tier-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid var(--rule-strong);
    background: var(--ink-2);
    color: var(--fg-1);
    line-height: 1.4;
}
.tier-chip.amber {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: rgba(233,184,114,0.08);
}
.tier-chip.neutral { /* default */ }

/* Approve-modal comp toggle — a labelled switch with a headline + foot.
   Reuses the existing .toggle track & input patterns. */
.comp-toggle {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 12px 12px 6px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    background: var(--ink-2);
    cursor: pointer;
    transition: border-color 140ms var(--ease), background 140ms var(--ease);
    margin-top: 4px;
}
.comp-toggle:hover { border-color: var(--accent-dim); background: rgba(233,184,114,0.04); }
.comp-toggle input[type="checkbox"] { display: none; }
.comp-toggle .track {
    display: inline-block;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--ink-4);
    position: relative;
    margin-top: 4px;
    margin-left: 6px;
    transition: background 140ms var(--ease);
}
.comp-toggle .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fg-1);
    transition: left 160ms var(--ease), background 140ms var(--ease);
}
.comp-toggle input:checked + .track { background: var(--accent-dim); }
.comp-toggle input:checked + .track::after {
    left: 18px;
    background: var(--accent);
}
.comp-toggle .comp-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.comp-toggle .comp-head {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--fg-0);
    font-weight: 500;
}
.comp-toggle .comp-foot {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--fg-2);
}

/* Inline help suffix on labels — "optional, shown to the user" */
.help-inline {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-left: 6px;
}

/* ─────────────────────────────────────────────────────────────
   Plan meter / usage meter / usage strip / upgrade prompt
   Shared visual grammar:
     track      : hairline, inset, low-contrast
     fill       : tungsten amber at 75–99%, sage below, danger at cap
     copy       : Fraunces italic for the editorial line,
                  JetBrains Mono micro-caps for the kicker
   ───────────────────────────────────────────────────────────── */

.plan-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.plan-meter-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.plan-meter-key {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-2);
}
.plan-meter-count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    color: var(--fg-0);
    letter-spacing: 0.04em;
}
.plan-meter-slash {
    color: var(--fg-3);
    margin: 0 2px;
}
.plan-meter-track {
    position: relative;
    height: 4px;
    background: var(--ink-2);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--rule);
}
.plan-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: inherit;
    transition: width 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 220ms var(--ease);
}
.plan-meter-fill.is-calm   { background: var(--ok); }
.plan-meter-fill.is-hot    { background: var(--accent); }
.plan-meter-fill.is-at-cap { background: var(--danger); }

/* ── <UsageMeter> ── */
.usage-meter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    min-width: 0;
    border-radius: var(--radius-s);
    transition: background 160ms var(--ease);
    text-decoration: none;
    color: inherit;
}
a.usage-meter:hover {
    background: var(--ink-2);
}
.usage-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.usage-meter-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-2);
}
.usage-meter-count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
    color: var(--fg-0);
    letter-spacing: 0.03em;
}
.usage-meter-slash { color: var(--fg-3); }
.usage-meter-inf {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent);
    font-size: var(--fs-md);
    line-height: 1;
}
.usage-meter-track {
    position: relative;
    height: 3px;
    background: var(--ink-2);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--rule);
}
.usage-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    transition: width 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 220ms var(--ease);
    border-radius: inherit;
}
.usage-meter-fill.is-calm   { background: var(--ok); }
.usage-meter-fill.is-hot    { background: var(--accent); }
.usage-meter-fill.is-at-cap { background: var(--danger); }
.usage-meter.is-unlimited .usage-meter-count {
    color: var(--fg-1);
}

/* ── Dashboard plan strip ── */
.usage-strip {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr;
    gap: 8px 28px;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: var(--ink-1);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent-dim);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
    transition: border-color 180ms var(--ease),
                background 180ms var(--ease),
                transform 180ms var(--ease);
    position: relative;
}
.usage-strip:hover {
    border-left-color: var(--accent);
    background: var(--ink-2);
}
.usage-strip:hover .usage-strip-arrow { transform: translateX(3px); color: var(--accent); }
.usage-strip-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.usage-strip-kick {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
}
.usage-strip-tier {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 24, 'wght' 420;
    font-size: var(--fs-lg);
    color: var(--fg-0);
    letter-spacing: -0.01em;
}
.usage-strip-arrow {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    color: var(--fg-3);
    transition: transform 220ms var(--ease), color 180ms var(--ease);
}
.usage-strip-meters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    padding-left: 12px;
    border-left: 1px dashed var(--rule);
}
.usage-strip .usage-meter { padding: 0; }
.usage-strip .usage-meter:hover { background: transparent; }

/* ── <UpgradePromptModal> ──
   Editorial, not alarmist. The meter sits centred under an italic
   headline; the CTAs align right and whisper.
*/
.upgrade-prompt-veil {
    /* lean on the base .modal-veil — this is just a hook for per-modal tweaks */
}
.modal.upgrade-prompt {
    width: min(520px, 94vw);
    padding: 28px 28px 22px;
    position: relative;
    background:
        radial-gradient(ellipse at 20% -10%, rgba(233,184,114,0.09), transparent 60%),
        var(--ink-1);
    border-top: 2px solid var(--accent-dim);
}
.upgrade-prompt-x {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 0;
    color: var(--fg-3);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color 150ms var(--ease), background 150ms var(--ease);
}
.upgrade-prompt-x:hover {
    color: var(--fg-0);
    background: var(--ink-2);
}
.upgrade-prompt-x .icon {
    width: 16px; height: 16px;
}
.upgrade-prompt-head {
    margin-bottom: 20px;
}
.upgrade-prompt-kicker {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.upgrade-prompt-sigil {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1;
    letter-spacing: 0;
    color: var(--accent);
}
.upgrade-prompt-headline {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 72, 'wght' 380;
    font-size: var(--fs-2xl);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--fg-0);
    margin: 0;
}
.upgrade-prompt-headline em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 72, 'wght' 420;
}
.upgrade-prompt-meter {
    padding: 14px 16px;
    margin: 0 0 18px;
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
}
.upgrade-prompt-meter .plan-meter-key {
    letter-spacing: 0.24em;
}
.upgrade-prompt-meter .plan-meter-count {
    font-size: var(--fs-md);
}
.upgrade-prompt-body {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 18, 'wght' 380;
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--fg-1);
    margin: 0 0 22px;
}
.upgrade-prompt-body em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 18, 'wght' 440;
}
.upgrade-prompt-body .upgrade-prompt-quant {
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--fg-0);
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
}
.upgrade-prompt-body .upgrade-prompt-unlimited {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--fg-0);
    font-variation-settings: 'opsz' 18, 'wght' 460;
}
.upgrade-prompt-cta {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 14px;
}
.upgrade-prompt-primary .icon {
    margin-left: 4px;
}
.upgrade-prompt-footnote {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    text-align: right;
}

@media (max-width: 960px) {
    .request-banner {
        grid-template-columns: 36px 1fr;
    }
    .request-banner-x {
        grid-column: 2 / 3;
        justify-self: start;
        margin-top: 4px;
    }
    .admin-table.upgrade-requests.pending .at-row,
    .admin-table.upgrade-requests.history .at-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
    }
    .admin-table.upgrade-requests .at-row.at-head { display: none; }
    .admin-table.upgrade-requests .at-actions {
        grid-column: 1 / 3;
        justify-content: flex-start;
    }
    .price-line.is-beta {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .usage-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .usage-strip-meters {
        padding-left: 0;
        border-left: 0;
        border-top: 1px dashed var(--rule);
        padding-top: 12px;
    }
    .upgrade-prompt-cta {
        flex-direction: column-reverse;
    }
    .upgrade-prompt-cta .btn {
        width: 100%;
        justify-content: center;
    }
}