/* Shared filled actions for the standalone HTML pages.

   Page-specific styles still own layout (flex behaviour, spacing and responsive rules).
   Keeping the fill, type and disabled state here means the public/auth surfaces no longer
   drift when the primary action treatment changes. */
.fp-filled-action {
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
}

.fp-filled-action--full {
    width: 100%;
    padding: 12px;
    transition:
        filter 0.15s ease,
        box-shadow 0.15s ease;
}

.fp-filled-action--full:hover,
.fp-filled-action--full:focus-visible {
    filter: brightness(1.08);
    box-shadow:
        0 0 0 3px var(--accent-soft),
        var(--shadow);
}

a.fp-filled-action {
    text-decoration: none;
}

a.fp-filled-action:hover,
a.fp-filled-action:focus-visible,
:root[data-theme="dark"] .fp-filled-action {
    color: #000000;
}

.fp-filled-action:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Shared Fareplan wordmark treatment. */
.fareplan-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: -8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.fareplan-brand:hover,
.fareplan-brand:focus-visible {
    filter: brightness(1.12);
}

.fareplan-brand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fareplan-brand__mark {
    color: var(--accent);
    font-size: 20px;
    line-height: 1;
}

.fareplan-brand__name {
    letter-spacing: 0.2px;
}

.fareplan-brand:hover .fareplan-brand__name,
.fareplan-brand:focus-visible .fareplan-brand__name {
    color: var(--accent);
}

/* Shared compact theme control for public information pages. The homepage keeps its
   existing scoped class because its spacing was tuned with the two-column landing layout;
   both controls use the same script, values and visual language. */
.public-topline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.public-theme-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    flex: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.public-theme-seg button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.public-theme-seg button:hover,
.public-theme-seg button:focus-visible {
    color: var(--text);
}
.public-theme-seg button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.public-theme-seg button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow);
}
@media (max-width: 440px) {
    /* The wordmark already links home. Removing the duplicate word on narrow screens leaves
       all three theme choices full-sized rather than squeezing four controls into one row. */
    .public-topline-actions .back {
        display: none;
    }
}

/* Page: about.html */
.page-about {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --surface-2: #dfe2e7;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
.page-about[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --surface-2: #1f232b;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.page-about * {
    box-sizing: border-box;
}
.page-about {
    scroll-behavior: smooth;
}
.page-about body {
    margin: 0;
    padding: calc(26px + env(safe-area-inset-top)) 18px 48px;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}
.page-about .wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}
.page-about .topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.page-about .back {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-decoration: none;
    padding: 7px 8px;
    border-radius: 8px;
}
.page-about .back {
    margin-right: -8px;
}
.page-about .back:hover,
.page-about .back:focus-visible {
    background: var(--surface);
    color: var(--accent);
}
.page-about main {
    margin-top: 54px;
}
.page-about .eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.page-about h1 {
    margin: 0;
    font-size: clamp(22px, 6.7vw, 52px);
    line-height: 1;
    letter-spacing: -1.8px;
    white-space: nowrap;
}
.page-about .lede {
    max-width: 620px;
    margin: 20px 0 20px;
    color: var(--text);
    font-size: clamp(17px, 3vw, 21px);
    line-height: 1.55;
}
.page-about .name-note {
    max-width: 620px;
    margin: 0 0 42px;
    padding-left: 15px;
    border-left: 2px solid var(--accent);
    color: var(--muted);
    line-height: 1.6;
}
.page-about .name-note strong {
    color: var(--text);
}
.page-about .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.page-about .tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.page-about .tile {
    padding: 19px 18px;
}
.page-about .tile .icon {
    display: block;
    font-size: 22px;
    margin-bottom: 13px;
}
.page-about .tile h2 {
    font-size: 15px;
    margin: 0 0 7px;
}
.page-about .tile p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}
.page-about .principle {
    max-width: 630px;
    margin: 46px 0;
}
.page-about .principle h2 {
    font-size: 22px;
    margin: 0 0 10px;
}
.page-about .principle p {
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}
.page-about footer {
    margin-top: 30px;
    color: var(--muted);
    font-size: 12px;
}
.page-about footer a {
    color: var(--muted);
}
.page-about [hidden] {
    display: none !important;
}
@media (max-width: 640px) {
    .page-about main {
        margin-top: 38px;
    }
    .page-about .grid {
        grid-template-columns: 1fr;
    }
    .page-about .tile {
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 10px;
    }
    .page-about .tile .icon {
        grid-row: span 2;
        margin: 0;
    }
}

/* Page: account-access.html */
.page-account-access {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --danger: #a3342f;
    --danger-soft: #f3d7d4;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
.page-account-access[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --danger: #f08a84;
    --danger-soft: #351d1d;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.page-account-access * {
    box-sizing: border-box;
}
.page-account-access body {
    min-height: 100vh;
    margin: 0;
    padding: calc(28px + env(safe-area-inset-top)) 18px 48px;
    display: grid;
    place-items: start center;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.page-account-access .wrap {
    width: 100%;
    max-width: 620px;
}
.page-account-access .fareplan-brand {
    margin-bottom: 36px;
}
.page-account-access .card {
    padding: clamp(24px, 5vw, 38px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.page-account-access .alert {
    margin: 0;
    padding-left: 18px;
    border-left: 4px solid var(--danger);
    color: var(--text);
    font-size: clamp(24px, 5vw, 34px);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.5px;
}
.page-account-access .guidance {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}
.page-account-access .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}
.page-account-access .action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--accent);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}
.page-account-access .action:hover,
.page-account-access .action:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.page-account-access .action.home {
    color: var(--text);
    background: transparent;
    border-color: var(--border);
}
.page-account-access[data-theme="dark"] .action.home {
    color: #fff;
}
.page-account-access #support-status {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.page-account-access [hidden] {
    display: none !important;
}
@media (max-width: 520px) {
    .page-account-access .actions {
        grid-template-columns: 1fr;
    }
}

/* Page: admin.html */
.page-admin {
    --bg: #0f1115;
    --surface: #181b21;
    --surface-2: #21252d;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --warn: #e0a75b;
    --warn-soft: #33280f;
    --danger: #f08a84;
    --danger-soft: #3a1e1c;
}
.page-admin * {
    box-sizing: border-box;
}
.page-admin [hidden] {
    display: none !important;
}
.page-admin body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 26px 18px 60px;
}
.page-admin .wrap {
    max-width: 1120px;
    margin: 0 auto;
}
.page-admin .heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.page-admin .back {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 11px;
}
.page-admin .back:hover,
.page-admin .back:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.page-admin h1 {
    font-size: 22px;
    margin: 0 0 4px;
}
.page-admin .sub {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 6px;
}
/* Says out loud where this is and how it is reached, because an admin panel that looks
     identical in every environment is how somebody bans a real account by accident. */
.page-admin .env {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 18px;
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--muted);
}
.page-admin .env b {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}
.page-admin .env.production b {
    color: var(--danger);
}

.page-admin .bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.page-admin #q {
    flex: 1;
    min-width: 220px;
}
.page-admin input,
.page-admin select,
.page-admin textarea {
    font: inherit;
    font-size: 13.5px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}
.page-admin input::placeholder {
    color: var(--muted);
}
.page-admin button {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 13px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
}
.page-admin button.primary {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.page-admin button.warn {
    background: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn);
}
.page-admin button.danger {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}
.page-admin button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-admin table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.page-admin th {
    text-align: left;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.page-admin td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
/* Hover belongs to desktop only. Touch browsers keep a synthetic hover after a tap, and
     at the card breakpoint that state fought the mobile cell rules and made the separator
     and Tools control appear to jump. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
    .page-admin tr:hover td {
        background: var(--surface);
    }
}
.page-admin .who {
    font-weight: 600;
}
.page-admin .who small {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 12px;
}
.page-admin .pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
}
.page-admin .pill.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.page-admin .pill.banned {
    background: var(--danger-soft);
    color: var(--danger);
}
.page-admin .pill.locked {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn);
}
.page-admin .pill.pending_deletion {
    background: var(--warn-soft);
    color: var(--warn);
}
.page-admin .pill.pending {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn);
}
.page-admin .pill.invited,
.page-admin .pill.notified {
    background: var(--accent-soft);
    color: var(--accent);
}
.page-admin .pill.launch-contact {
    background: var(--surface-2);
    color: var(--muted);
}
.page-admin .pill.admin {
    background: var(--warn-soft);
    color: var(--warn);
}
.page-admin .pill.protected {
    background: var(--accent-soft);
    color: var(--accent);
    margin-left: 4px;
}
.page-admin .pill.password-set {
    background: var(--accent-soft);
    color: var(--accent);
    margin-left: 4px;
}
.page-admin .pill.no-password {
    background: var(--warn-soft);
    color: var(--warn);
    margin-left: 4px;
}
.page-admin .pill.reset-required {
    background: var(--warn-soft);
    color: var(--warn);
    margin-left: 4px;
    border: 1px solid var(--warn);
}
/* One button per row. The grouping moved into the menu it opens; see the note there. */
.page-admin .acts {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
/* Never two lines for a date. It is the narrowest column and the least important one, so
     it should not be what gives way when the action column grows. */
.page-admin .c-created {
    color: var(--muted);
    white-space: nowrap;
}
.page-admin .reason {
    color: var(--muted);
}
.page-admin .pill.super_admin {
    background: var(--danger-soft);
    color: var(--danger);
}
.page-admin .pill.root {
    background: var(--danger);
    color: #14161a;
}
.page-admin .rootnote {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

/* Filters as toggle chips rather than multi-selects. A multi-select hides what is
     currently applied behind a scroll box; chips show every active filter at a glance,
     which matters when the answer on screen is a subset and you need to know why. */
.page-admin .filters {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.page-admin .fgroup {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.page-admin .flabel {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    font-weight: 700;
    margin-right: 2px;
}
.page-admin .chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
}
.page-admin .chip[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.page-admin .counts {
    color: var(--muted);
    font-size: 12.5px;
    margin-left: auto;
}
.page-admin .counts b {
    color: var(--text);
}
.page-admin .err {
    color: var(--danger);
    font-size: 13px;
    min-height: 18px;
    margin: 10px 0;
}
.page-admin .confirm-copy {
    margin-bottom: 14px;
}
.page-admin .modal-error {
    min-height: 0;
    margin: 0 0 10px;
}
.page-admin .ok {
    color: var(--accent);
    font-size: 13px;
    min-height: 18px;
    margin: 10px 0;
}

.page-admin dialog {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    padding: 20px;
    max-width: 460px;
    width: calc(100% - 32px);
}
/* The trail is a log rather than a form: it needs the width for a timestamp and a line
     of text on one row, and a scroll region so the page behind it does not move. */
.page-admin dialog.wide {
    max-width: 720px;
}
/* The audit history may contain hundreds of rows. Constrain the dialog to the viewport
     and scroll only its body, leaving the title and Close button permanently reachable. */
.page-admin #trailer {
    max-height: calc(100dvh - 24px);
    padding: 0;
    overflow: hidden;
}
.page-admin #trailer[open] {
    display: flex;
    flex-direction: column;
}
.page-admin .trail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.page-admin .trail-head h2 {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.page-admin .trail-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.page-admin .trail-body {
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}
.page-admin .trail-body > .row {
    margin-top: 10px;
}

/* The Tools menu. A modal dialog placed by hand rather than centred, so it reads as a
     menu hanging off its button while still getting Escape and a backdrop for free. */
.page-admin dialog.menu {
    position: fixed;
    margin: 0;
    width: 250px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    overflow-y: auto;
}
.page-admin dialog.menu::backdrop {
    background: transparent;
}
.page-admin dialog.menu .who {
    font-size: 11.5px;
    color: var(--muted);
    margin: 0;
    padding: 6px 10px 8px;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--border);
}
.page-admin .mi {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 10px 10px;
    border-radius: 8px;
    font-weight: 500;
}
.page-admin .mi:hover,
.page-admin .mi:focus-visible {
    background: var(--surface-2);
}
.page-admin .mi.danger {
    color: var(--danger);
}
.page-admin .mi.warn {
    color: var(--warn);
}
/* The same three groups as before, now expressed vertically. Delete keeps the wider gap:
     it is the one item where a mis-aimed tap costs something. */
.page-admin dialog.menu hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 6px 4px;
}
.page-admin dialog.menu hr.wide {
    margin: 16px 4px;
}
/* On a phone it is a sheet at the bottom of the screen rather than a dropdown pinned to
     its button. A 250px menu hanging off a full-width button has to be squeezed somewhere,
     and the somewhere is always either off the edge or across the row you were looking at.
     Bottom of the screen is also where a thumb already is. */
.page-admin dialog.menu.sheet {
    top: auto;
    bottom: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
}
.page-admin dialog.menu.sheet::backdrop {
    background: rgba(8, 10, 14, 0.55);
}
.page-admin .activity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 18px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 13px;
}
.page-admin .activity div span {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    margin-bottom: 2px;
}
.page-admin .activity b {
    font-weight: 600;
    overflow-wrap: anywhere;
}
.page-admin .trail {
    border-top: 1px solid var(--border);
}
.page-admin .ev {
    display: grid;
    grid-template-columns: 225px 1fr;
    gap: 12px;
    font-size: 12.5px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--border);
}
.page-admin .ev time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.page-admin .ev .act {
    font-weight: 600;
}
.page-admin .ev .meta {
    color: var(--muted);
    overflow-wrap: anywhere;
}
.page-admin dialog::backdrop {
    background: rgba(8, 10, 14, 0.6);
}
.page-admin dialog h2 {
    margin: 0 0 12px;
    font-size: 16px;
}
.page-admin .field {
    display: block;
    margin-bottom: 10px;
}
.page-admin .field span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.page-admin .field input,
.page-admin .field select,
.page-admin .field textarea {
    width: 100%;
}
.page-admin .checks {
    display: flex;
    gap: 14px;
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--muted);
}
.page-admin .checks label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.page-admin .row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}
.page-admin .archive-summary {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55;
}
.page-admin .archive-summary b {
    color: var(--text);
}

/* On a phone the five column table has nowhere to put the action buttons but a crushed
     stack against the left edge, which is both unreadable and easy to mis-tap. Below this
     width each row becomes a card: who it is, then the pills, then the buttons underneath
     the account they act on. The grouping survives the change, which is the point: the
     separators become horizontal rules so Delete is still visibly on its own. */
@media (max-width: 760px) {
    .page-admin body {
        padding: 18px 12px 48px;
    }
    .page-admin thead {
        display: none;
    }
    .page-admin table,
    .page-admin tbody,
    .page-admin tr,
    .page-admin td {
        display: block;
        width: 100%;
    }
    .page-admin tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 12px 14px;
        margin-bottom: 12px;
    }
    .page-admin td {
        border-bottom: 0;
        padding: 0;
        background: none;
    }
    .page-admin .who {
        font-size: 15px;
        margin-bottom: 8px;
    }
    /* width:auto matters: the td rule above sets 100%, which would put each pill on its
       own line instead of letting role and status sit together. */
    .page-admin .c-role,
    .page-admin .c-status {
        display: inline-block;
        width: auto;
        margin: 0 6px 8px 0;
    }
    /* Desktop can afford to reserve the message line against layout shift. On a phone that
       is 40px of nothing between the filters and the first account. */
    .page-admin .err:empty,
    .page-admin .ok:empty {
        min-height: 0;
        margin: 0;
    }
    .page-admin .c-created {
        color: var(--muted);
        font-size: 12.5px;
        margin-bottom: 4px;
    }
    .page-admin .c-created::before {
        content: "created ";
    }
    .page-admin .c-acts {
        border-top: 1px solid var(--border);
        margin-top: 6px;
        padding-top: 12px;
    }
    /* Full width and thumb-sized. There is one button now, so it can afford to be the
       easiest thing on the card to hit; what it opens is where the care is needed. */
    .page-admin .acts {
        justify-content: flex-start;
    }
    .page-admin .acts button {
        flex: 1 1 auto;
        min-height: 44px;
        padding: 10px 14px;
    }
    /* Roomier rows in the menu itself, for the same reason. */
    .page-admin .mi {
        padding: 13px 12px;
    }
    .page-admin .counts {
        margin-left: 0;
        width: 100%;
    }
    /* One column, because a 150px timestamp gutter leaves nothing for the event itself. */
    .page-admin .ev {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .page-admin #trailer {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
    }
    .page-admin .trail-head {
        padding: 10px 12px;
    }
    .page-admin .trail-body {
        padding: 10px 12px 12px;
    }
}

/* Page: email-change.html */
.page-email-change {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #181b21;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
}
.page-email-change * {
    box-sizing: border-box;
}
.page-email-change body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 40px 16px;
}
.page-email-change .wrap {
    max-width: 440px;
    margin: auto;
}
.page-email-change .card {
    margin-top: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 22px;
}
.page-email-change h1 {
    font-size: 21px;
    margin: 0 0 8px;
}
.page-email-change p {
    color: var(--muted);
    line-height: 1.5;
}
.page-email-change .address {
    color: var(--text);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.page-email-change button,
.page-email-change a.action {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    border-radius: 9px;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    background: #16332a;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}
.page-email-change .err {
    color: #f08a84;
}

/* Page: fareplan-home.html */
.page-fareplan-home {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --surface-2: #dfe2e7;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --danger: #a3342f;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
/* Keyed on the attribute, not `prefers-color-scheme`, because the choice is the
     visitor's and it has to survive into the app. The script in <head> sets the attribute
     from the same `fareplan.theme` key the app writes, so picking dark here means the
     calendar is dark when you sign in. */
.page-fareplan-home[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --surface-2: #1f232b;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --danger: #f08a84;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.page-fareplan-home * {
    box-sizing: border-box;
}
.page-fareplan-home body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
    padding: 0 0 48px;
}
.page-fareplan-home .wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 26px 18px 0;
}

/* A product-state notice, not a warning about something the visitor did. Yellow gives it
     enough separation from the pitch without borrowing red from errors or green from the
     primary action. Its inner content follows the same 960px line as the page below. */
.page-fareplan-home .invite-banner {
    width: 100%;
    background: #f4d88b;
    color: #2b220d;
    border-bottom: 1px solid #c9a848;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition: height 440ms ease, opacity 360ms ease, border-color 360ms ease;
}
.page-fareplan-home .invite-banner.is-dismissing {
    opacity: 0;
    border-color: transparent;
}
.page-fareplan-home .invite-banner__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: calc(14px + env(safe-area-inset-top)) 18px 16px;
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(420px, 1.15fr);
    gap: 18px 28px;
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease;
}
.page-fareplan-home .invite-banner__inner.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}
.page-fareplan-home .invite-success {
    max-width: 960px;
    min-height: 88px;
    margin: 0 auto;
    padding: calc(18px + env(safe-area-inset-top)) 18px 20px;
    display: grid;
    place-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(7px) scale(0.98);
    transition: opacity 320ms ease, transform 320ms ease;
    outline: none;
}
.page-fareplan-home .invite-success[hidden] {
    display: none;
}
.page-fareplan-home .invite-success.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.page-fareplan-home .invite-success strong,
.page-fareplan-home .invite-success span {
    display: block;
}
.page-fareplan-home .invite-success strong {
    font-size: 24px;
    margin-bottom: 5px;
}
.page-fareplan-home .invite-success span {
    font-size: 17px;
    line-height: 1.45;
}
.page-fareplan-home .interest-confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.page-fareplan-home .interest-confetti__piece {
    position: absolute;
    top: -16px;
    left: var(--x);
    width: 8px;
    height: 13px;
    border-radius: 2px;
    background: var(--confetti-colour);
    opacity: 0;
    animation: interest-confetti-fall var(--duration) cubic-bezier(0.18, 0.7, 0.35, 1)
        var(--delay) forwards;
}
.page-fareplan-home .interest-confetti__piece:nth-child(3n) {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
@keyframes interest-confetti-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), var(--fall), 0) rotate(var(--turn));
    }
}
.page-fareplan-home .invite-banner__copy strong,
.page-fareplan-home .invite-banner__copy span {
    display: block;
}
.page-fareplan-home .invite-banner__copy strong {
    font-size: 16px;
    margin-bottom: 4px;
}
.page-fareplan-home .invite-banner__copy span {
    font-size: 13.5px;
    line-height: 1.45;
}
.page-fareplan-home .interest-form {
    display: grid;
    grid-template-columns:
        minmax(88px, 0.75fr) minmax(100px, 0.85fr) minmax(155px, 1.2fr) auto;
    gap: 5px 8px;
    align-items: end;
}
.page-fareplan-home .interest-form label {
    margin: 0;
    color: #2b220d;
    font-size: 11px;
    grid-row: 1;
}
.page-fareplan-home .interest-form input {
    margin: 0;
    padding: 9px 10px;
    min-width: 0;
    color: #1a1d23;
    background: rgba(255, 255, 255, 0.68);
    border-color: #b8973e;
    grid-row: 2;
}
.page-fareplan-home .interest-form input:focus {
    outline-color: #715812;
}
.page-fareplan-home .interest-submit {
    grid-row: 2;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #2b220d;
    border-radius: 10px;
    color: #fff;
    background: #2b220d;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.page-fareplan-home .interest-submit:hover,
.page-fareplan-home .interest-submit:focus-visible {
    background: #493916;
}
.page-fareplan-home .interest-submit:disabled {
    opacity: 0.72;
    cursor: wait;
}
.page-fareplan-home .interest-note {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: #493916;
}
.page-fareplan-home .interest-note.success {
    color: #24563f;
    font-weight: 700;
}
.page-fareplan-home .interest-note.error {
    color: #842e29;
    font-weight: 700;
}
.page-fareplan-home .interest-website {
    display: none;
}
@media (max-width: 800px) {
    .page-fareplan-home .invite-banner__inner {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .page-fareplan-home .interest-form {
        grid-template-columns: 1fr;
    }
    .page-fareplan-home .interest-form label,
    .page-fareplan-home .interest-form input,
    .page-fareplan-home .interest-submit {
        grid-row: auto;
    }
    .page-fareplan-home .interest-note {
        grid-column: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-fareplan-home .invite-banner,
    .page-fareplan-home .invite-banner__inner,
    .page-fareplan-home .invite-success {
        transition: none;
    }
    .page-fareplan-home .interest-confetti {
        display: none;
    }
}

/* Pitch on the left, sign-in on the right; stacked on a phone with the form FIRST,
     because someone who already has an account is not here to read the pitch again. */
.page-fareplan-home .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 40px;
    align-items: start;
}
@media (max-width: 860px) {
    .page-fareplan-home .split {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .page-fareplan-home .pitch {
        order: 2;
    }
    .page-fareplan-home .signin {
        order: 1;
    }
}

/* Brand left, theme picker right, on the one line above the split. */
.page-fareplan-home .topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
}
.page-fareplan-home .theme-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    flex: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.page-fareplan-home .theme-seg button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.page-fareplan-home .theme-seg button:hover {
    color: var(--text);
}
.page-fareplan-home .theme-seg button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow);
}

/* Sized so each sentence holds one line. The <br /> already fixes where the break goes,
     so anything that does not fit turns into a third line rather than a wider one. The old
     5vw/40px overflowed from roughly 1200px down: measured, the pitch column tops out at
     548px and only fits this copy up to about 36px, and it narrows faster than 5vw shrinks
     as the split closes. 3.2vw tracks the column instead of the window. */
.page-fareplan-home h1 {
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.12;
    margin: 0 0 12px;
    letter-spacing: -0.4px;
}
.page-fareplan-home h1 em {
    font-style: normal;
    color: var(--accent);
}
/* The pitch reads at full contrast. --text is near-white on dark and near-black on
     light, so one value covers both; --muted was a grey that sat between the two and read
     as washed out in dark mode particularly. The headline keeps its own treatment above. */
.page-fareplan-home .lede {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 26px;
    max-width: 46ch;
}

.page-fareplan-home .points {
    display: grid;
    gap: 15px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}
.page-fareplan-home .points li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.page-fareplan-home .points .ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: none;
    font-size: 17px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-fareplan-home .points b {
    display: block;
    font-size: 14.5px;
    margin: 0 0 2px;
}
.page-fareplan-home .points span {
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
.page-fareplan-home .soon {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 2px 6px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 6px;
}

.page-fareplan-home .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: var(--shadow);
}
.page-fareplan-home .session-pending {
    min-height: 278px;
    display: grid;
    align-content: center;
    text-align: center;
}
.page-fareplan-home .session-pending .sub {
    margin-bottom: 0;
}
/* Sticky only where there is room to scroll past it and no keyboard to fight. */
@media (min-width: 861px) {
    .page-fareplan-home .card {
        position: sticky;
        top: 24px;
    }
}
/* The card heading carries the accent, the same mint the brand mark and the ‹em› in the
     headline use. It is the one green thing in the column, so it reads as the entry point
     rather than as decoration. */
.page-fareplan-home .card h2 {
    font-size: 18px;
    margin: 0 0 3px;
    color: var(--accent);
    font-weight: 800;
}
/* --text, not --muted, so it is near-white on dark and near-black on light from the one
     rule. Muted was fine as supporting text and too quiet now the labels carry the accent. */
.page-fareplan-home .card .sub {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 18px;
}
.page-fareplan-home label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--accent);
}
/* 16px stays: anything smaller and iOS Safari zooms the page on focus. */
.page-fareplan-home input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
}
.page-fareplan-home input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
/* Chrome paints its own background on an autofilled field and ignores background-color
     outright. An inset shadow the height of the field is the one thing it does honour, and
     -webkit-text-fill-color is what actually colours autofilled text. Firefox needs none
     of this and is unaffected by it. */
.page-fareplan-home input:-webkit-autofill,
.page-fareplan-home input:-webkit-autofill:hover,
.page-fareplan-home input:-webkit-autofill:focus,
.page-fareplan-home input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    box-shadow: 0 0 0 1000px var(--bg) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}
.page-fareplan-home .cta {
    display: block;
    text-align: center;
}
.page-fareplan-home [hidden] {
    display: none !important;
}
.page-fareplan-home .err {
    color: var(--danger);
    font-size: 13px;
    margin: 0 0 12px;
    min-height: 17px;
}
.page-fareplan-home .alt {
    margin: 13px 0 0;
    text-align: center;
    font-size: 14px;
}
.page-fareplan-home .alt a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.page-fareplan-home .alt a:hover {
    color: var(--accent);
    text-decoration: underline;
}
/* The dev-instance line is the one thing deliberately left quiet. It is a label on the
     environment, not part of the pitch, and shouting it would put it level with the copy. */
.page-fareplan-home footer {
    margin-top: 34px;
    color: var(--muted);
    font-size: 12px;
}
.page-fareplan-home footer a {
    color: var(--muted);
}
.page-fareplan-home dialog {
    width: min(420px, calc(100% - 32px));
    padding: 22px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.page-fareplan-home dialog::backdrop {
    background: rgba(5, 7, 10, 0.68);
}
.page-fareplan-home dialog h2 {
    margin: 0 0 5px;
    font-size: 19px;
    color: var(--accent);
}
.page-fareplan-home dialog p {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
.page-fareplan-home dialog .actions {
    display: flex;
    gap: 9px;
}
.page-fareplan-home dialog .actions button {
    width: auto;
    flex: 1;
}
.page-fareplan-home dialog .secondary {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

/* Page: hub.html */
.page-hub {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
    --env-fg: #b5741f;
    --env-bg: #f7ecd9;
    --env-border: #e0c79c;
}
@media (prefers-color-scheme: dark) {
    .page-hub {
        --bg: #0f1115;
        --surface: #181b21;
        --text: #e8eaed;
        --muted: #9aa2af;
        --border: #2a2f38;
        --accent: #4fbf8b;
        --accent-soft: #16332a;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
        --env-fg: #e0a75b;
        --env-bg: #2a2113;
        --env-border: #4a3a1e;
    }
}
.page-hub * {
    box-sizing: border-box;
}
.page-hub body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: calc(28px + env(safe-area-inset-top)) 18px 40px;
}
.page-hub .wrap {
    max-width: 640px;
    margin: 0 auto;
}
.page-hub header {
    margin-bottom: 22px;
}
.page-hub h1 {
    font-size: 24px;
    margin: 0 0 3px;
    letter-spacing: 0.2px;
}
.page-hub .sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

/* Environment banner. Reported by the server from the deployment marker rather than
     hardcoded, so it cannot keep claiming "dev" after the connection string moves. */
.page-hub .env {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--env-border);
    background: var(--env-bg);
    border-radius: 12px;
    padding: 11px 13px;
    margin: 0 0 18px;
}
.page-hub .env-tag {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    background: var(--env-fg);
    padding: 3px 8px;
    border-radius: 999px;
    flex: none;
    margin-top: 1px;
}
.page-hub .env-text {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
    margin: 0;
}
.page-hub .env-text b {
    color: var(--env-fg);
}
.page-hub .env[hidden] {
    display: none;
}
.page-hub .grid {
    display: grid;
    gap: 12px;
}
.page-hub a.tool {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 16px;
    box-shadow: var(--shadow);
    transition: transform 0.12s;
}
.page-hub a.tool:active {
    transform: scale(0.99);
}
.page-hub .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.page-hub .meta {
    flex: 1;
    min-width: 0;
}
.page-hub .tname {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 2px;
}
.page-hub .tdesc {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}
.page-hub .chev {
    color: var(--muted);
    font-size: 22px;
}
.page-hub .tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--accent);
    padding: 1px 6px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 4px;
}
/* One badge per tier, so which environment you are about to open is readable at a
     glance rather than inferred from the port number. */
.page-hub .tag.stg {
    background: #b7791f;
}
.page-hub .tag.dev {
    background: #7b6ef6;
}
.page-hub .group {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 18px 2px 2px;
}
.page-hub .group:first-of-type {
    margin-top: 0;
}
.page-hub footer {
    margin-top: 26px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

/* Page: login.html */
.page-login {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --danger: #a3342f;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
/* Keyed on the attribute rather than the OS, so this page follows the theme picked on
     the landing page instead of disagreeing with it. */
.page-login[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --danger: #f08a84;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.page-login * {
    box-sizing: border-box;
}
.page-login body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: calc(28px + env(safe-area-inset-top)) 18px 40px;
    -webkit-text-size-adjust: 100%;
}

/* No viewport-sized body on a phone, at all.

     Centring a card inside a 100vh body means the browser re-centres every time the
     keyboard changes the viewport. Switching that to 100dvh was meant to fix it and may
     well have made it worse, since dvh tracks the keyboard animation frame by frame. Both
     are gone below: the card just sits at the top in normal flow, which cannot thrash
     because there is nothing to recompute.

     Centring comes back only on a screen big enough that no keyboard will ever resize it. */
@media (min-width: 700px) and (min-height: 720px) {
    .page-login body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.page-login .card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: var(--shadow);
}
/* Reuses the landing-page brand colours and hover behaviour, at the larger login size. */
.page-login h1 {
    font-size: 22px;
    margin: 0 0 3px;
    letter-spacing: 0.2px;
    font-weight: 800;
}
.page-login h1 .fareplan-brand,
.page-login h1 .fareplan-brand__mark {
    font-size: inherit;
}
/* --text, not --muted, so it is near-white on dark and near-black on light from the one
     rule. Muted was fine as supporting text and too quiet now the labels carry the accent. */
.page-login .sub {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 20px;
}
.page-login label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--accent);
}
/* 16px stays: anything smaller and iOS Safari zooms the page on focus. */
.page-login input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
}
.page-login input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
/* Chrome paints its own background on an autofilled field and ignores background-color
     outright. An inset shadow the height of the field is the one thing it does honour, and
     -webkit-text-fill-color is what actually colours autofilled text. Firefox needs none
     of this and is unaffected by it. */
.page-login input:-webkit-autofill,
.page-login input:-webkit-autofill:hover,
.page-login input:-webkit-autofill:focus,
.page-login input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    box-shadow: 0 0 0 1000px var(--bg) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}
.page-login .err {
    color: var(--danger);
    font-size: 13px;
    margin: 0 0 14px;
    min-height: 17px;
}
/* Sits inside the card, so the track is --bg against the card's --surface to read as
     inset. Every rule here has to out-specify the page's global `button`, which is the
     full-width green submit. */
.page-login .theme-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    margin: 18px auto 0;
    width: max-content;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.page-login .theme-seg button {
    width: auto;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.page-login .theme-seg button:hover {
    color: var(--text);
}
.page-login .theme-seg button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--accent);
}

.page-login .alt {
    margin: 13px 0 0;
    text-align: center;
    font-size: 14px;
}
.page-login .alt a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.page-login .alt a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.page-login .reset-sent {
    color: var(--accent);
}
.page-login .ok {
    color: var(--accent);
    font-size: 13px;
    margin: 0 0 14px;
}

/* Page: logout.html */
.page-logout {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --surface-2: #dfe2e7;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --danger: #a3342f;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
/* Keyed on the attribute rather than the OS, so this page follows the theme picked on
     the landing page instead of disagreeing with it. */
.page-logout[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --surface-2: #1f232b;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --danger: #f08a84;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.page-logout * {
    box-sizing: border-box;
}
.page-logout body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(28px + env(safe-area-inset-top)) 18px 40px;
    min-height: 100vh;
    min-height: 100dvh;
}
.page-logout .card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 24px;
    box-shadow: var(--shadow);
}
.page-logout .mark {
    font-size: 30px;
    color: var(--accent);
    line-height: 1;
}
.page-logout h1 {
    font-size: 21px;
    margin: 12px 0 6px;
}
.page-logout p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
}
.page-logout .count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
}
.page-logout .cta {
    display: block;
}
.page-logout .ring {
    height: 4px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 18px;
}
.page-logout .ring > i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    transition: width 1s linear;
}
.page-logout .err {
    color: var(--danger);
    font-size: 13px;
    margin: 0 0 14px;
}

/* Page: reset.html */
.page-reset {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --danger: #a3342f;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
@media (prefers-color-scheme: dark) {
    .page-reset {
        --bg: #0f1115;
        --surface: #181b21;
        --text: #e8eaed;
        --muted: #9aa2af;
        --border: #2a2f38;
        --accent: #4fbf8b;
        --danger: #f08a84;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
}
.page-reset * {
    box-sizing: border-box;
}
.page-reset body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: calc(28px + env(safe-area-inset-top)) 18px 40px;
    -webkit-text-size-adjust: 100%;
}

/* No viewport-sized body on a phone, at all.

     Centring a card inside a 100vh body means the browser re-centres every time the
     keyboard changes the viewport. Switching that to 100dvh was meant to fix it and may
     well have made it worse, since dvh tracks the keyboard animation frame by frame. Both
     are gone below: the card just sits at the top in normal flow, which cannot thrash
     because there is nothing to recompute.

     Centring comes back only on a screen big enough that no keyboard will ever resize it. */
@media (min-width: 700px) and (min-height: 720px) {
    .page-reset body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.page-reset .card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: var(--shadow);
}
.page-reset h1 {
    font-size: 22px;
    margin: 0 0 3px;
    letter-spacing: 0.2px;
}
.page-reset .sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 20px;
}
.page-reset .notice {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 18px;
}
.page-reset label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
}
.page-reset input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
}
.page-reset input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.page-reset .err {
    color: var(--danger);
    font-size: 13px;
    margin: 0 0 14px;
    min-height: 17px;
}
.page-reset .hint {
    color: var(--muted);
    font-size: 12px;
    margin: -8px 0 15px;
}
.page-reset .done {
    text-align: center;
}
.page-reset .done p {
    font-size: 14px;
    line-height: 1.5;
}
.page-reset a {
    color: var(--accent);
}
.page-reset footer {
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.page-reset footer a,
.page-reset footer a:hover {
    color: inherit;
    text-decoration: none;
}
.page-reset footer a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.page-reset [hidden] {
    display: none !important;
}

/* Page: roadmap.html */
.page-roadmap {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --surface-2: #dfe2e7;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --doing: #b5741f;
    --doing-soft: #f5e6cf;
    --blocked: #a3342f;
    --blocked-soft: #f6dcda;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
@media (prefers-color-scheme: dark) {
    .page-roadmap {
        --bg: #0f1115;
        --surface: #181b21;
        --surface-2: #1f232b;
        --text: #e8eaed;
        --muted: #9aa2af;
        --border: #2a2f38;
        --accent: #4fbf8b;
        --accent-soft: #16332a;
        --doing: #e0a75b;
        --doing-soft: #33280f;
        --blocked: #f08a84;
        --blocked-soft: #3a1e1c;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
}
.page-roadmap * {
    box-sizing: border-box;
}
.page-roadmap {
    scroll-behavior: smooth;
}
.page-roadmap #list h2 {
    scroll-margin-top: 16px;
}
.page-roadmap body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: calc(24px + env(safe-area-inset-top)) 16px 60px;
}
.page-roadmap .wrap {
    max-width: 1040px;
    margin: 0 auto;
}

/* Two columns on a wide screen, stacked on a narrow one. The contents pane is sticky
     so it stays put while the list scrolls, which is the only reason it earns its width. */
.page-roadmap .layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 30px;
}
@media (max-width: 820px) {
    .page-roadmap .layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.page-roadmap .toc {
    position: sticky;
    top: 18px;
    align-self: start;
}
@media (max-width: 820px) {
    .page-roadmap .toc {
        position: static;
    }
}
.page-roadmap .toc h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    margin: 0 0 8px;
    font-weight: 700;
}
.page-roadmap .toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-roadmap .toc a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    padding: 7px 9px;
    border-radius: 9px;
    border-left: 2px solid transparent;
}
.page-roadmap .toc a:hover {
    background: var(--surface);
    color: var(--text);
}
.page-roadmap .toc a.on {
    background: var(--surface);
    color: var(--text);
    border-left-color: var(--accent);
    font-weight: 600;
}
.page-roadmap .toc a.complete .toc-name {
    text-decoration: line-through;
    opacity: 0.65;
}
.page-roadmap .toc-num {
    flex: none;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
}
.page-roadmap .toc-name {
    flex: 1;
    min-width: 0;
}
.page-roadmap .toc-count {
    flex: none;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}
/* A phase with nothing left to show under the current filter is dimmed rather than
     removed, so the shape of the plan does not change as you filter. */
.page-roadmap .toc a.empty {
    opacity: 0.38;
}
.page-roadmap header {
    margin-bottom: 18px;
}
.page-roadmap .back {
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.page-roadmap .back:hover {
    color: var(--accent);
}
.page-roadmap h1 {
    font-size: 25px;
    margin: 8px 0 4px;
    letter-spacing: 0.2px;
}
.page-roadmap .sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 14px;
}

.page-roadmap .bar {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}
.page-roadmap .bar > i {
    display: block;
    height: 100%;
    background: var(--accent);
    width: 0;
    transition: width 0.3s;
}
.page-roadmap .barlabel {
    font-size: 12px;
    color: var(--muted);
    margin: 7px 0 0;
}

.page-roadmap .filters {
    display: flex;
    gap: 7px;
    margin: 18px 0 6px;
    flex-wrap: wrap;
}
.page-roadmap .filters button {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.page-roadmap .filters button.on {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.page-roadmap h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    margin: 26px 0 10px;
    font-weight: 700;
}
.page-roadmap .item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 13px 14px;
    margin-bottom: 9px;
    box-shadow: var(--shadow);
}
.page-roadmap .item.done {
    opacity: 0.62;
}
.page-roadmap .row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
/* Tabular figures and a fixed width so the titles line up down the column. */
.page-roadmap .ref {
    flex: none;
    min-width: 30px;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--muted);
    padding-top: 2px;
    letter-spacing: 0.3px;
}
.page-roadmap .item.done .ref {
    color: var(--accent);
}
.page-roadmap .title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 3px;
    flex: 1;
}
.page-roadmap .item.done .title {
    text-decoration: line-through;
}
.page-roadmap .detail {
    color: var(--text);
    font-size: 13.5px;
    margin: 5px 0 0;
    line-height: 1.45;
}
.page-roadmap .why {
    color: var(--muted);
    font-size: 12.5px;
    margin: 7px 0 0;
    line-height: 1.45;
    border-left: 2px solid var(--border);
    padding-left: 9px;
}
.page-roadmap .why b {
    color: var(--muted);
    font-weight: 700;
}
.page-roadmap .meta {
    color: var(--muted);
    font-size: 11.5px;
    margin: 8px 0 0;
}

.page-roadmap .pill {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 999px;
    flex: none;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--muted);
}
.page-roadmap .pill.todo {
    background: var(--surface-2);
    color: var(--muted);
}
.page-roadmap .pill.doing {
    background: var(--doing-soft);
    color: var(--doing);
}
.page-roadmap .pill.done {
    background: var(--accent-soft);
    color: var(--accent);
}
.page-roadmap .pill.blocked {
    background: var(--blocked-soft);
    color: var(--blocked);
}
/* Signed out the list is readable but not movable, so the pills stop pretending to be
     buttons rather than failing on click. */
.page-roadmap body.readonly .pill {
    cursor: default;
    opacity: 0.72;
}

/* Being signed out has to be visible before you click, and it has to come with the way
     out of it. Until this page went public a signed-out visit was redirected to /login, so
     "I cannot move an item" was never a state you could sit in without noticing. Now it is
     the ordinary state for any visitor, and a pill that silently refuses reads as a broken
     page rather than a closed door. */
.page-roadmap .signin {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}
.page-roadmap body.readonly .signin {
    display: flex;
}
.page-roadmap .signin a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 4px 12px;
}
.page-roadmap .signin a:hover {
    background: var(--accent-soft);
}

.page-roadmap footer {
    margin-top: 34px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.page-roadmap .err {
    color: var(--blocked);
    font-size: 13px;
    min-height: 18px;
    margin: 10px 0 0;
}

/* Page: settings.html */
.page-settings {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --surface2: #dfe2e7;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --danger: #a3342f;
}
.page-settings[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --surface2: #1f232b;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --danger: #f08a84;
}
.page-settings * {
    box-sizing: border-box;
}
.page-settings body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 24px 16px 64px;
}
.page-settings .wrap {
    max-width: 680px;
    margin: auto;
}
.page-settings .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.page-settings .back {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.page-settings .back:hover {
    text-decoration: underline;
}
.page-settings h1 {
    font-size: 25px;
    margin: 0 0 6px;
}
.page-settings .intro {
    color: var(--muted);
    margin: 0 0 22px;
}
.page-settings .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
}
.page-settings h2 {
    font-size: 17px;
    margin: 0 0 4px;
}
.page-settings .desc {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 16px;
}
.page-settings .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    .page-settings .grid {
        grid-template-columns: 1fr;
    }
    .page-settings .top {
        align-items: flex-start;
        gap: 16px;
    }
}
.page-settings label {
    display: block;
    font-size: 12px;
    font-weight: 750;
    color: var(--accent);
    margin-bottom: 6px;
}
.page-settings input {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 11px;
    margin-bottom: 13px;
}
.page-settings input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.page-settings button {
    font: inherit;
    font-weight: 700;
    border: 1px solid var(--accent);
    border-radius: 9px;
    padding: 10px 14px;
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
}
.page-settings button:disabled {
    opacity: 0.55;
    cursor: default;
}
.page-settings .msg {
    min-height: 18px;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--accent);
}
.page-settings .msg.err {
    color: var(--danger);
}
.page-settings .danger {
    border-color: var(--danger);
}
.page-settings .danger h2 {
    color: var(--danger);
}
.page-settings .danger button {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
.page-settings .current {
    font-weight: 700;
    overflow-wrap: anywhere;
}
.page-settings .root-note {
    color: var(--muted);
    font-size: 13px;
    margin: 12px 0 0;
}

/* Page: support.html */
.page-support {
    --bg: #d9dbe0;
    --surface: #e7e9ed;
    --text: #1a1d23;
    --muted: #565c69;
    --border: #bec3cb;
    --accent: #2f7d5b;
    --accent-soft: #cfe9dc;
    --shadow:
        0 1px 3px rgba(20, 24, 31, 0.08), 0 8px 24px rgba(20, 24, 31, 0.06);
}
.page-support[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #181b21;
    --text: #e8eaed;
    --muted: #9aa2af;
    --border: #2a2f38;
    --accent: #4fbf8b;
    --accent-soft: #16332a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.page-support * {
    box-sizing: border-box;
}
.page-support body {
    margin: 0;
    padding: calc(26px + env(safe-area-inset-top)) 18px 48px;
    background: var(--bg);
    color: var(--text);
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}
.page-support .wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}
.page-support .topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.page-support .back {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-decoration: none;
    padding: 7px 8px;
    margin-right: -8px;
    border-radius: 8px;
}
.page-support .back:hover,
.page-support .back:focus-visible {
    background: var(--surface);
    color: var(--accent);
}
.page-support main {
    margin-top: 54px;
}
.page-support .eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.page-support h1 {
    margin: 0;
    font-size: clamp(32px, 7vw, 52px);
    line-height: 1;
    letter-spacing: -1.8px;
}
.page-support .lede {
    max-width: 620px;
    margin: 20px 0 32px;
    color: var(--text);
    font-size: clamp(17px, 3vw, 21px);
    line-height: 1.55;
}
.page-support .support-card {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.page-support .support-card h2 {
    font-size: 22px;
    margin: 0 0 10px;
}
.page-support .support-card p {
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}
.page-support .support-card p + p {
    margin-top: 12px;
}
.page-support .support-card a:not(.support-action) {
    color: var(--accent);
    font-weight: 700;
}
.page-support .support-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 15px;
    font-size: 15px;
    font-weight: 800;
    transition:
        filter 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}
.page-support .support-action:hover,
.page-support .support-action:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    box-shadow:
        0 0 0 3px var(--accent-soft),
        var(--shadow);
}
.page-support[data-theme="dark"] .support-action:hover,
.page-support[data-theme="dark"] .support-action:focus-visible {
    color: #000;
}
.page-support .support-action:active {
    transform: scale(0.98);
}
.page-support #support-status {
    margin-top: 15px;
    font-size: 13px;
}
.page-support footer {
    margin-top: 30px;
    color: var(--muted);
    font-size: 12px;
}
.page-support footer a {
    color: var(--muted);
}
.page-support [hidden] {
    display: none !important;
}
@media (max-width: 640px) {
    .page-support main {
        margin-top: 38px;
    }
}