/* ==========================================================================
   RosterRadar · Design System 3 ("Operations")
   A neutral, business-grade interface: ink on paper, hairline borders,
   tabular type, colour reserved for meaning. Mobile first.
   Order: tokens · base · shell · components · roster · pages · public · print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --bg: #f6f6f7;            /* canvas, sidebar */
    --panel: #ffffff;         /* content surfaces */
    --subtle: #f4f4f5;        /* fills, hover, table heads */
    --muted: #ebebed;         /* pressed, tracks */
    --line: #e4e4e7;          /* hairlines */
    --line-strong: #d4d4d8;   /* inputs, emphasised borders */
    --overlay: rgb(9 9 11 / 0.4);

    --ink: #09090b;
    --ink-2: #52525b;
    --ink-3: #71717a;
    --ink-4: #a1a1aa;

    --primary: #18181b;
    --primary-hover: #27272a;
    --on-primary: #ffffff;
    --accent: #4f46e5;
    --accent-soft: #eef0ff;
    --focus: #6366f1;

    --ok: #15803d;
    --ok-soft: #ecfdf3;
    --warn: #b45309;
    --warn-soft: #fffbeb;
    --bad: #dc2626;
    --bad-soft: #fef2f2;

    /* Duty status palette: dots, calendar marks, labels */
    --d-flight: #2563eb;
    --d-ground: #0e7490;
    --d-standby: #d97706;
    --d-reserve: #c2410c;
    --d-nightstop: #6d28d9;
    --d-off: #15803d;
    --d-vacation: #a21caf;
    --d-unpaid: #be185d;
    --d-sick: #dc2626;
    --d-blocked: #71717a;
    --d-ac: #71717a;

    --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --t-xs: 0.6875rem;
    --t-sm: 0.75rem;
    --t-md: 0.8125rem;
    --t-base: 0.875rem;
    --t-lg: 1rem;
    --t-xl: 1.25rem;
    --t-2xl: 1.5rem;
    --t-3xl: 2rem;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --shadow-sm: 0 1px 2px rgb(9 9 11 / 0.05);
    --shadow-md: 0 4px 16px rgb(9 9 11 / 0.08), 0 1px 3px rgb(9 9 11 / 0.06);
    --shadow-lg: 0 16px 48px rgb(9 9 11 / 0.16), 0 2px 6px rgb(9 9 11 / 0.06);

    --ease: cubic-bezier(0.2, 0, 0, 1);
    --fast: 120ms;
    --normal: 200ms;

    --topbar-h: 52px;
    --tabbar-h: 58px;
    --rail-w: 76px;
    --sidebar-w: 248px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --gutter: 16px;
    --control-h: 44px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #09090b;
    --panel: #111113;
    --subtle: #18181b;
    --muted: #222226;
    --line: #232327;
    --line-strong: #323238;
    --overlay: rgb(0 0 0 / 0.6);
    --ink: #ededef;
    --ink-2: #a1a1aa;
    --ink-3: #8b8b94;
    --ink-4: #5c5c64;
    --primary: #ededef;
    --primary-hover: #ffffff;
    --on-primary: #09090b;
    --accent: #8b8cf7;
    --accent-soft: #1d1d3a;
    --focus: #8b8cf7;
    --ok: #4ade80;
    --ok-soft: #0f2419;
    --warn: #fbbf24;
    --warn-soft: #2a2110;
    --bad: #f87171;
    --bad-soft: #2c1414;
    --d-flight: #60a5fa;
    --d-ground: #22d3ee;
    --d-standby: #fbbf24;
    --d-reserve: #fb923c;
    --d-nightstop: #a78bfa;
    --d-off: #4ade80;
    --d-vacation: #e879f9;
    --d-unpaid: #f472b6;
    --d-sick: #f87171;
    --d-blocked: #8b8b94;
    --d-ac: #8b8b94;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.6);
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --control-h: 36px; } }
@media (pointer: coarse) { :root { --control-h: 44px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) { body { font-size: var(--t-base); } }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--xs { width: 12px; height: 12px; stroke-width: 2.25; }
.icon--sm { width: 15px; height: 15px; stroke-width: 2; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 28px; height: 28px; stroke-width: 1.5; }
.icon--spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mono { font-family: var(--mono); letter-spacing: -0.01em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: var(--t-md); }
.xsmall { font-size: var(--t-sm); }
.strong { font-weight: 600; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.block { display: block; }
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s4)); }
.stack-2 { --gap: var(--s2); }
.stack-3 { --gap: var(--s3); }
.stack-8 { --gap: var(--s8); }
.row { display: flex; align-items: center; gap: var(--gap, var(--s3)); min-width: 0; }
.row-2 { --gap: var(--s2); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.wide-only { display: none !important; }
@media (min-width: 640px) { .wide-only { display: inline-flex !important; } .narrow-only { display: none !important; } }
.desktop-only { display: none !important; }
@media (min-width: 1024px) { .desktop-only { display: revert !important; } .mobile-only { display: none !important; } }

/* --------------------------------------------------------------------------
   3. Shell
   Phone: top bar + 4-tab bar · Tablet: icon rail · Desktop: sidebar + inset panel
   -------------------------------------------------------------------------- */
.shell { min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }

.nav {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding-bottom: var(--safe-bottom);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
}
.nav .nav__head, .nav .nav__groups, .nav .nav__foot { display: none; }
.nav__bar { display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); max-width: 560px; margin: 0 auto; }
.nav__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 100%; color: var(--ink-3);
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none;
}
.nav__item:hover { color: var(--ink); text-decoration: none; }
.nav__item .icon { width: 22px; height: 22px; }
.nav__item[aria-current="page"] { color: var(--ink); }
.nav__item[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 32%; right: 32%; height: 2px; border-radius: 0 0 2px 2px; background: var(--ink); }
.nav__badge {
    position: absolute; top: 8px; left: calc(50% + 6px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--bad); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--panel);
}

.main { min-width: 0; }
.topbar {
    position: sticky; top: 0; z-index: 30; padding-top: var(--safe-top);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--normal) var(--ease);
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar__inner { display: flex; align-items: center; gap: var(--s2); height: var(--topbar-h); padding: 0 var(--gutter); max-width: var(--page-max, 1160px); margin: 0 auto; }
.topbar__title { flex: 1 1 auto; min-width: 0; font-size: var(--t-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { display: flex; align-items: center; gap: var(--s1); }
.topbar__brand { display: flex; }
.topbar__back { margin-left: -8px; }

.content { padding: var(--s2) var(--gutter) var(--s12); max-width: var(--page-max, 1160px); margin: 0 auto; }
@media (max-width: 639px) { .content { padding-bottom: var(--s6); } } /* the tab bar already ends the page */
#view:focus { outline: none; }
.offline { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: 6px var(--gutter); background: var(--warn-soft); color: var(--warn); border-top: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); font-size: var(--t-sm); font-weight: 500; }

@media (min-width: 640px) {
    .shell { padding-bottom: 0; padding-left: var(--rail-w); }
    .nav {
        top: 0; right: auto; width: var(--rail-w);
        display: flex; flex-direction: column; align-items: stretch;
        padding: calc(var(--safe-top) + var(--s3)) var(--s2) var(--s4);
        background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
        border-top: 0; border-right: 1px solid var(--line);
    }
    .nav .nav__head { display: flex; justify-content: center; margin-bottom: var(--s5); }
    .nav .nav__head-text { display: none; }
    .nav__bar { display: flex; flex-direction: column; gap: var(--s1); height: auto; width: 100%; }
    .nav__item { height: 56px; border-radius: var(--r-md); }
    .nav__item:hover { background: var(--muted); }
    .nav__item[aria-current="page"] { background: var(--panel); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
    .nav__item[aria-current="page"]::before { display: none; }
    .nav__badge { top: 6px; }
    .topbar__brand { display: none; }
}

@media (min-width: 1024px) {
    body.shell-body { background: var(--bg); }
    .shell { padding-left: var(--sidebar-w); }
    .nav { width: var(--sidebar-w); padding: calc(var(--safe-top) + var(--s4)) var(--s3) var(--s3); border-right: 0; }
    .nav .nav__head { justify-content: flex-start; padding: 0 var(--s2); gap: 10px; align-items: center; margin-bottom: var(--s6); }
    .nav .nav__head-text { display: flex; flex-direction: column; min-width: 0; }
    .nav .nav__groups { display: flex; flex-direction: column; gap: var(--s5); }
    .nav__list { display: flex; flex-direction: column; gap: 1px; }
    .nav__label { display: block; padding: 0 var(--s3); margin-bottom: var(--s1); font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); }
    .nav .nav__bar { display: none; }
    .nav__item {
        flex-direction: row; justify-content: flex-start; gap: 10px;
        height: 32px; padding: 0 10px; border-radius: var(--r-sm);
        color: var(--ink-2); font-size: var(--t-base); font-weight: 500; letter-spacing: 0;
    }
    .nav__item .icon { width: 16px; height: 16px; }
    .nav__item[aria-current="page"] { color: var(--ink); }
    .nav__badge { position: static; margin-left: auto; box-shadow: none; }
    .nav .nav__foot { display: block; margin-top: auto; }
    .main { margin: var(--s2) var(--s2) var(--s2) 0; min-height: calc(100dvh - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
    .topbar { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.nav__user { display: flex; align-items: center; gap: 10px; padding: var(--s2); border-radius: var(--r-md); color: var(--ink); }
.nav__user:hover { background: var(--muted); text-decoration: none; }
.nav__user-name { display: block; font-size: var(--t-md); font-weight: 600; }
.nav__user-meta { display: block; font-size: var(--t-sm); color: var(--ink-3); }
.nav__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s2) 0; margin-top: var(--s2); border-top: 1px solid var(--line); }
.version { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #0ea5e9; color: #fff; }
.brand__mark .icon { width: 20px; height: 20px; stroke-width: 1.75; }
.brand__mark--sm { width: 28px; height: 28px; border-radius: 7px; }
.brand__mark--sm .icon { width: 18px; height: 18px; }
.brand__mark--lg { width: 44px; height: 44px; border-radius: 11px; }
.brand__mark--lg .icon { width: 28px; height: 28px; }
.brand__name { font-weight: 650; font-size: var(--t-lg); letter-spacing: -0.02em; line-height: 1.2; }
.brand__sub { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.2; }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    height: var(--control-h); padding: 0 var(--s4);
    border-radius: var(--r-sm); border: 1px solid var(--line-strong);
    background: var(--panel); color: var(--ink);
    font-size: var(--t-base); font-weight: 500; line-height: 1; white-space: nowrap;
    text-decoration: none; box-shadow: var(--shadow-sm);
    transition: background var(--fast), border-color var(--fast), color var(--fast);
    user-select: none; -webkit-user-select: none;
}
.btn:hover { background: var(--subtle); text-decoration: none; }
.btn:active { background: var(--muted); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn--ghost:hover { background: var(--subtle); color: var(--ink); }
.btn--ghost[aria-pressed="true"] { background: var(--subtle); color: var(--ink); }
.btn--danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn--danger-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--bad); }
.btn--danger-ghost:hover { background: var(--bad-soft); }
.btn--sm { height: 32px; padding: 0 var(--s3); font-size: var(--t-md); }
.btn--lg { height: 48px; padding: 0 var(--s5); font-size: var(--t-lg); }
.btn--block { width: 100%; }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--icon.btn--sm { width: 32px; }
.btn.is-loading { pointer-events: none; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.panel--pad { padding: var(--s4); }
@media (min-width: 640px) { .panel--pad { padding: var(--s5); } }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 46px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.panel__title { font-size: var(--t-base); font-weight: 600; }
.panel__sub { font-size: var(--t-sm); color: var(--ink-3); }
.panel__body { padding: var(--s4); }
.panel__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s4); padding: var(--s4) 0 var(--s5); }
.page-head__eyebrow { font-size: var(--t-md); color: var(--ink-3); font-weight: 500; }
.page-head__title { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.025em; }
.page-head__desc { font-size: var(--t-md); color: var(--ink-3); margin-top: 2px; }
@media (min-width: 1024px) { .page-head { padding-top: var(--s6); } .page-head__title { font-size: 1.75rem; } }
.page-head__actions { display: flex; gap: var(--s2); }

.section { display: flex; flex-direction: column; gap: var(--s3); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.section__title { font-size: var(--t-base); font-weight: 600; }
.section__link { font-size: var(--t-md); font-weight: 500; color: var(--ink-2); }

.rows > * + * { border-top: 1px solid var(--line); }
.rowitem { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 54px; padding: var(--s3) var(--s4); background: none; border: 0; text-align: left; color: var(--ink); text-decoration: none; }
a.rowitem:hover, button.rowitem:hover { background: var(--subtle); text-decoration: none; }
.rowitem__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--ink-2); flex: none; background: var(--panel); }
.rowitem__body { flex: 1 1 auto; min-width: 0; }
.rowitem__title { display: block; font-weight: 500; }
.rowitem__sub { display: block; font-size: var(--t-md); color: var(--ink-3); margin-top: 1px; }
.rowitem__trail { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); flex: none; font-size: var(--t-md); }
.rowitem--danger, .rowitem--danger .rowitem__icon { color: var(--bad); }
.panel > .rows > :first-child > .rowitem, .panel > .rows > .rowitem:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.panel > .rows > :last-child > .rowitem, .panel > .rows > .rowitem:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--t-md); font-weight: 500; }
.field__hint { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.grid-2 { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 480px) { .grid-2 { grid-template-columns: 2fr 1fr; } }
.input, .select, .textarea {
    width: 100%; height: var(--control-h); padding: 0 var(--s3);
    border-radius: var(--r-sm); border: 1px solid var(--line-strong);
    background: var(--panel); color: var(--ink); font-size: 16px; box-shadow: var(--shadow-sm);
    transition: border-color var(--fast), box-shadow var(--fast);
    appearance: none; -webkit-appearance: none;
}
@media (min-width: 1024px) and (pointer: fine) { .input, .select, .textarea { font-size: var(--t-base); } }
.textarea { height: auto; min-height: 120px; padding: var(--s3); resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); }
.input--code { text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.08em; }
.input--mono { font-family: var(--mono); font-size: 14px; }
.select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
.select--sm { height: 32px; font-size: var(--t-md); width: auto; }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.input-icon > .input { padding-left: 38px; }
.check { display: flex; align-items: center; gap: var(--s2); min-height: 40px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

.switch { position: relative; display: inline-flex; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch__track { width: 40px; height: 24px; border-radius: 12px; background: var(--muted); border: 1px solid var(--line-strong); position: relative; transition: background var(--normal) var(--ease); }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform var(--normal) var(--ease); }
.switch input:checked + .switch__track { background: var(--primary); border-color: var(--primary); }
:root[data-theme="dark"] .switch input:checked + .switch__track::after { background: var(--on-primary); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }

.options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.options label { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: 0 var(--s2); font-size: var(--t-md); font-weight: 500; color: var(--ink-2); cursor: pointer; background: var(--panel); }
.options label + label { border-left: 1px solid var(--line-strong); }
.options label input { position: absolute; opacity: 0; pointer-events: none; }
.options label:hover { background: var(--subtle); color: var(--ink); }
.options label:has(input:checked) { background: var(--subtle); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.options label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }

.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: var(--t-base); font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px 2px 0 0; }
.tab__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--subtle); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; line-height: 18px; text-align: center; }
.tab__count--alert { background: var(--bad); color: #fff; }

.toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; background: var(--subtle); color: var(--ink-2); border: 1px solid var(--line); }
.badge--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.badge--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.badge--bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.code { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--subtle); font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d, var(--ink-4)); flex: none; }
.dot--live { position: relative; }
.dot--live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--d); opacity: 0.35; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.7); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }

.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--subtle); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.avatar--sm { width: 28px; height: 28px; font-size: 10px; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--t-lg); }

.alert { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--a-line, var(--line)); background: var(--a-bg, var(--subtle)); font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.alert > .icon { color: var(--a-fg, var(--ink-2)); margin-top: 1px; }
.alert__title { font-weight: 600; font-size: var(--t-base); }
.alert--info { --a-fg: var(--accent); --a-bg: var(--accent-soft); --a-line: color-mix(in srgb, var(--accent) 22%, transparent); }
.alert--ok { --a-fg: var(--ok); --a-bg: var(--ok-soft); --a-line: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert--warn { --a-fg: var(--warn); --a-bg: var(--warn-soft); --a-line: color-mix(in srgb, var(--warn) 25%, transparent); }
.alert--bad { --a-fg: var(--bad); --a-bg: var(--bad-soft); --a-line: color-mix(in srgb, var(--bad) 22%, transparent); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s10) var(--s6); }
.empty--sm { padding: var(--s6) var(--s4); }
.empty__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--ink-3); margin-bottom: var(--s2); box-shadow: var(--shadow-sm); background: var(--panel); }
.empty__title { font-weight: 600; }
.empty__text { max-width: 40ch; font-size: var(--t-md); color: var(--ink-3); }
.empty .btn { margin-top: var(--s3); }

.skel { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--subtle), var(--muted), var(--subtle)); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.skel--line { height: 12px; }
.skel--row { height: 52px; }
.skel--block { height: 180px; border-radius: var(--r-md); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.toasts { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3)); display: flex; flex-direction: column; gap: var(--s2); width: min(420px, calc(100% - 32px)); pointer-events: none; }
@media (min-width: 640px) { .toasts { bottom: var(--s6); left: auto; right: var(--s6); transform: none; } }
.site-body .toasts { bottom: calc(var(--safe-bottom) + var(--s4)); }
.toast { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); border-radius: var(--r-md); background: #18181b; color: #fafafa; border: 1px solid #27272a; box-shadow: var(--shadow-lg); font-size: var(--t-md); font-weight: 500; pointer-events: auto; animation: toast-in var(--normal) var(--ease); }
.toast.is-leaving { animation: toast-out var(--normal) var(--ease) forwards; }
.toast--success .icon { color: #4ade80; }
.toast--error .icon { color: #f87171; }
.toast--info .icon { color: #a5b4fc; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - var(--safe-top) - 16px); margin: 0; padding: 0; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.sheet:not([open]) { display: none; }
.sheet:focus { outline: none; }
.sheet::backdrop { background: var(--overlay); }
.sheet[open] { animation: sheet-up 260ms var(--ease); }
.sheet[open]::backdrop { animation: fade-in 260ms var(--ease); }
.sheet.is-closing { animation: sheet-down 180ms var(--ease) forwards; }
.sheet.is-closing::backdrop { animation: fade-out 180ms var(--ease) forwards; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 8px auto 0; flex: none; }
.sheet__head { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--line); flex: none; }
.sheet__titles { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.sheet__title { font-size: var(--t-lg); font-weight: 600; }
.sheet__subtitle { font-size: var(--t-md); color: var(--ink-3); margin-top: 1px; }
.sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--s5); }
.sheet__body--flush { padding: 0; }
.sheet__foot { flex: none; display: flex; gap: var(--s3); padding: var(--s3) var(--s5) calc(var(--s3) + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--subtle); }
.sheet__foot .btn { flex: 1 1 0; }
.sheet--alert .sheet__head { display: none; }
.sheet--alert .sheet__body { padding-top: var(--s6); }
.sheet__alert-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--k, var(--ink-2)); margin-bottom: var(--s4); box-shadow: var(--shadow-sm); }
@media (min-width: 640px) {
    .sheet { inset: 0; margin: auto; width: min(520px, calc(100% - 48px)); height: fit-content; max-height: min(760px, calc(100dvh - 64px)); border-radius: var(--r-lg); border: 1px solid var(--line); }
    .sheet--alert { width: min(420px, calc(100% - 48px)); }
    .sheet[open] { animation: pop-in var(--normal) var(--ease); }
    .sheet.is-closing { animation: pop-out var(--fast) var(--ease) forwards; }
    .sheet__grip { display: none; }
    .sheet__foot { padding-bottom: var(--s3); }
    @keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
    @keyframes pop-out { to { opacity: 0; transform: scale(0.985); } }
}
body:has(.sheet[open]) { overflow: hidden; }

.fab { position: fixed; z-index: 35; right: var(--gutter); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3)); display: inline-flex; align-items: center; gap: var(--s2); height: 38px; padding: 0 var(--s4); border-radius: 19px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font-size: var(--t-md); font-weight: 500; box-shadow: var(--shadow-md); transition: transform var(--normal) var(--ease), opacity var(--normal); }
.fab.is-hidden { transform: translateY(16px); opacity: 0; pointer-events: none; }
@media (min-width: 640px) { .fab { bottom: var(--s6); } }
.actionbar { position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-bottom)); padding: var(--s3) var(--gutter); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transition: transform var(--normal) var(--ease), opacity var(--normal); }
.actionbar.is-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.actionbar__inner { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: var(--s3); }
@media (min-width: 640px) { .actionbar { left: var(--rail-w); bottom: 0; } }
@media (min-width: 1024px) { .actionbar { left: calc(var(--sidebar-w) + 1px); right: 9px; bottom: 9px; border-radius: 0 0 var(--r-lg) var(--r-lg); } }

.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.kv > div { padding: var(--s3) var(--s4); min-width: 0; border-top: 1px solid var(--line); }
.kv > div:nth-child(-n + 2) { border-top: 0; }
.kv > div:nth-child(even) { border-left: 1px solid var(--line); }
.kv > .kv__wide { grid-column: 1 / -1; border-left: 0; }
.kv dt { font-size: var(--t-sm); color: var(--ink-3); }
.kv dd { margin-top: 2px; font-weight: 500; overflow-wrap: anywhere; }
.kv dd .kind { white-space: normal; align-items: baseline; }
.raw { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-2); background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   6. Roster
   -------------------------------------------------------------------------- */
.d-flight { --d: var(--d-flight); }
.d-ground { --d: var(--d-ground); }
.d-standby { --d: var(--d-standby); }
.d-reserve { --d: var(--d-reserve); }
.d-nightstop { --d: var(--d-nightstop); }
.d-off { --d: var(--d-off); }
.d-vacation { --d: var(--d-vacation); }
.d-unpaid { --d: var(--d-unpaid); }
.d-sick { --d: var(--d-sick); }
.d-blocked { --d: var(--d-blocked); }
.d-ac { --d: var(--d-ac); }
.kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.kind::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--d); flex: none; }

/* Agenda: day blocks with a date column */
.agenda { display: flex; flex-direction: column; }
.agenda-month { position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: var(--s4) 0 var(--s2); background: var(--panel); font-size: var(--t-md); font-weight: 600; box-shadow: 0 1px 0 var(--line); }
.agenda-month span { font-weight: 400; color: var(--ink-3); font-size: var(--t-sm); }
.agenda-day { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + var(--safe-top) + 44px); }
@media (min-width: 640px) { .agenda-day { grid-template-columns: 60px minmax(0, 1fr); gap: 0 var(--s4); } }
.agenda-day__date { position: sticky; top: calc(var(--topbar-h) + var(--safe-top) + 48px); align-self: start; display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.agenda-day__dow { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.agenda-day__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.agenda-day--today .agenda-day__num { background: var(--accent); color: #fff; font-size: 16px; }
.agenda-day--today .agenda-day__dow { color: var(--accent); }
.agenda-day--past .agenda-day__num, .agenda-day--past .agenda-day__dow { color: var(--ink-4); }
.agenda-day__items { display: flex; flex-direction: column; min-width: 0; }
.agenda-day.is-flash .agenda-day__items { animation: flash 1.4s var(--ease); border-radius: var(--r-md); }
@keyframes flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }

/* Entry: one roster line (time · status · details) */
.entry { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: start; gap: var(--s3); width: calc(100% + 16px); margin: 0 -8px; padding: 7px 8px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; text-align: left; }
button.entry:hover { background: var(--subtle); }
.entry__time { font-family: var(--mono); font-size: var(--t-md); line-height: 1.4; color: var(--ink); white-space: nowrap; }
.entry__time span { display: block; color: var(--ink-3); }
.entry__time sup { font-size: 9px; color: var(--accent); margin-left: 1px; }
.entry__time--allday { font-family: var(--font); font-size: var(--t-sm); color: var(--ink-3); padding-top: 1px; }
.entry__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.entry__title { display: flex; align-items: center; gap: var(--s2); font-weight: 500; min-width: 0; line-height: 1.4; }
.entry__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.entry__route { font-family: var(--mono); letter-spacing: -0.01em; }
.entry__arrow { color: var(--ink-4); }
.entry__city { font-weight: 400; color: var(--ink-2); }
.entry__cities { font-size: var(--t-md); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.entry__meta { font-size: var(--t-md); color: var(--ink-3); display: flex; column-gap: var(--s2); min-width: 0; white-space: nowrap; overflow: hidden; }
.agenda-month + .agenda-day { border-top: 0; }
.entry__meta > * + *::before { content: "·"; margin-right: var(--s2); color: var(--ink-4); }
.entry__side { display: flex; align-items: center; gap: var(--s2); padding-top: 1px; color: var(--ink-3); font-size: var(--t-md); white-space: nowrap; }
.entry.is-past .entry__title, .entry.is-past .entry__time { color: var(--ink-3); }
.entry--blocked .entry__title > span { text-decoration: line-through; text-decoration-color: var(--ink-4); }
@media (max-width: 380px) { .entry { grid-template-columns: 62px minmax(0, 1fr) auto; gap: var(--s2); } }

.wx { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--t-md); white-space: nowrap; }
.wx .icon { width: 16px; height: 16px; }
.wx__t { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); }
.wx__t b { font-weight: 600; color: var(--ink); }
.wx.is-loading { opacity: 0.4; }
/* Lists on phones (schedule, Today's upcoming nightstops): the high only, so city and currency keep their room */
@media (max-width: 479px) { .entry__side .wx__min, .entry__side .wx--none, .rowitem__trail .wx__min, .rowitem__trail .wx--none { display: none; } }
.wx--sun .icon { color: #d97706; }
.wx--rain .icon, .wx--storm .icon { color: #2563eb; }
.wx--snow .icon { color: #0284c7; }
:root[data-theme="dark"] .wx--sun .icon { color: #fbbf24; }
:root[data-theme="dark"] .wx--rain .icon, :root[data-theme="dark"] .wx--storm .icon { color: #60a5fa; }

/* Month calendar: thin-line grid */
.cal { overflow: hidden; }
.cal__head { display: flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.cal__title { flex: 1; font-weight: 600; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dow span { padding: 6px 0; text-align: center; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--subtle); }
.cal__cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 58px; padding: 5px 2px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); text-align: center; font-size: var(--t-md); min-width: 0; }
.cal__grid > .cal__cell:nth-child(7n) { border-right: 0; }
.cal__cell--blank { background: var(--subtle); }
.cal__cell--weekend:not(.cal__cell--blank) { background: color-mix(in srgb, var(--subtle) 45%, var(--panel)); }
button.cal__cell:hover { background: var(--subtle); }
.cal__num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--t-md); font-weight: 500; flex: none; }
.cal__cell--today .cal__num { background: var(--accent); color: #fff; font-weight: 600; }
.cal__cell.is-selected { background: var(--accent-soft); }
.cal__marks { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal__marks i { width: 6px; height: 6px; border-radius: 2px; background: var(--d); }
.cal__label { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--d, var(--ink-3)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__lines { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); }
@media (min-width: 1280px) {
    .cal--roomy .cal__cell { min-height: 84px; align-items: stretch; text-align: left; padding: 5px 6px; }
    .cal--roomy .cal__num { width: 22px; height: 22px; font-size: var(--t-sm); }
    .cal--roomy .cal__marks, .cal--roomy .cal__label { display: none; }
    .cal--roomy .cal__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .cal--roomy .cal__line { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-2); white-space: nowrap; overflow: hidden; min-width: 0; }
    .cal--roomy .cal__line::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--d); flex: none; }
    .cal--roomy .cal__line span { overflow: hidden; text-overflow: ellipsis; }
}

/* Route headline in the detail sheet */
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s3); }
.route__end { display: flex; flex-direction: column; min-width: 0; }
.route__end--to { text-align: right; }
.route__code { font-family: var(--mono); font-size: 2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.route__city { font-size: var(--t-md); color: var(--ink-3); margin-top: 6px; }
.route__time { font-family: var(--mono); font-size: var(--t-lg); margin-top: 2px; }
.route__mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 28px; color: var(--ink-3); font-size: var(--t-sm); font-family: var(--mono); }
.route__line { width: 56px; height: 1px; background: var(--line-strong); position: relative; }
.route__line::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 6px solid var(--line-strong); }

/* --------------------------------------------------------------------------
   7. Pages
   -------------------------------------------------------------------------- */
.layout { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
.layout__side { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
@media (min-width: 1024px) {
    .layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--s8); }
    .layout--wide-side { grid-template-columns: minmax(0, 1fr) 400px; }
    .layout__side--sticky { position: sticky; top: calc(var(--topbar-h) + var(--s4)); max-height: calc(100dvh - var(--topbar-h) - 40px); overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 1280px) { .layout { grid-template-columns: minmax(0, 1fr) 360px; } .layout--wide-side { grid-template-columns: minmax(0, 1fr) 460px; } }
.narrow { max-width: 820px; margin: 0 auto; width: 100%; }

/* KPI tiles */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.stat { padding: var(--s3) var(--s4); min-width: 0; }
.stat:nth-child(even) { border-left: 1px solid var(--line); }
.stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat + .stat { border-left: 1px solid var(--line); }
    .stat:nth-child(n + 3) { border-top: 0; }
}
.stat__label { font-size: var(--t-sm); color: var(--ink-3); }
.stat__value { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; line-height: 1.2; }
.stat__unit { font-size: var(--t-md); color: var(--ink-3); font-weight: 500; margin-left: 2px; letter-spacing: 0; }

/* Briefing (next / current duty) */
.brief__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--subtle); border-radius: var(--r-md) var(--r-md) 0 0; }
.brief__state { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-md); font-weight: 500; }
.brief__main { padding: var(--s5) var(--s4); display: grid; gap: var(--s4); }
@media (min-width: 640px) { .brief__main { grid-template-columns: 1fr auto; align-items: end; padding: var(--s5); } }
.brief__when { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.brief__what { color: var(--ink-2); margin-top: 4px; }
@media (min-width: 640px) { .brief__count { text-align: right; } }
.brief__count-value { font-family: var(--mono); font-size: 2rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.brief__count-label { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; }
.brief__legs { border-top: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lp-shot .panel { overflow: hidden; }
@media (max-width: 479px) {
    .lp-shot { padding: 6px 6px 0; }
    .lp-shot__main { padding: 14px 10px; }
    .lp-shot .table { font-size: 11px; }
    .lp-shot .table th, .lp-shot .table td { padding-left: 8px; padding-right: 8px; }
    .lp-shot .brief__main { padding: 14px 12px !important; }
}

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.table th { text-align: left; font-weight: 500; font-size: var(--t-sm); color: var(--ink-3); padding: 7px var(--s4); background: var(--subtle); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { font-family: var(--mono); white-space: nowrap; }
.table .end { text-align: right; }
.table tbody tr.is-link { cursor: pointer; }
.table tbody tr.is-link:hover td { background: var(--subtle); }
.table tr.is-past td { color: var(--ink-3); }
@media (max-width: 559px) { .table .hide-sm { display: none; } .table th, .table td { padding-left: var(--s3); padding-right: var(--s3); } }

/* Week strip */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.week__day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--s2) 2px var(--s3); color: var(--ink); text-decoration: none; min-width: 0; }
.week__day + .week__day { border-left: 1px solid var(--line); }
.week__day:hover { background: var(--subtle); text-decoration: none; }
.week__dow { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.week__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 600; font-size: var(--t-base); }
.week__day--today .week__num { background: var(--accent); color: #fff; }
.week__label { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-2); max-width: 100%; overflow: hidden; }
.week__label::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--d, transparent); flex: none; }
.week__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Roster updates on Today (changes since the last visit, newly published roster) */
.changes .panel__head { padding-right: var(--s2); }
.changes__icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent-soft); }
.changes .rows > .rowitem + .rowitem { border-top: 1px solid var(--line); }
.changes__push { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--subtle); border-radius: 0 0 var(--r-md) var(--r-md); }
.changes__push-title { font-weight: 500; font-size: var(--t-md); }
.changes__push-actions { display: flex; gap: var(--s2); margin-left: auto; }
.week__day--changed { position: relative; }
.week__day--changed::after { content: ""; position: absolute; top: 6px; right: calc(50% - 19px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.changes-list { display: flex; flex-direction: column; gap: var(--s5); }
.change + .change { border-top: 1px solid var(--line); padding-top: var(--s5); }
.change--published { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r-md); background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.change--published > .icon { color: var(--accent); }
.change--published:hover { text-decoration: none; }
.change__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.change__day { font-weight: 600; }
.change__open { margin-left: auto; font-size: var(--t-md); font-weight: 500; }
.change__label { margin-top: var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.change__lines { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.change__line { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: baseline; gap: var(--s3); padding: 5px var(--s2); border-radius: var(--r-sm); font-size: var(--t-md); }
.change__line .kind { font-size: var(--t-md); color: var(--ink); }
.change__what { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change__time { font-family: var(--mono); color: var(--ink-2); white-space: nowrap; }
.change__line--old { color: var(--ink-3); }
.change__line--old .kind, .change__line--old .change__what, .change__line--old .change__time { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.change__line--new { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.change__line--new .change__time { color: var(--ink); font-weight: 500; }
.change__line--none { display: block; color: var(--ink-3); font-style: italic; }

/* People */
.person { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 60px; }
.person__body { flex: 1 1 auto; min-width: 0; color: inherit; }
a.person__body:hover { text-decoration: none; }
.person__name { font-weight: 500; }
.person__meta { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-md); color: var(--ink-3); min-width: 0; margin-top: 1px; }
.person__airline { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; padding-top: 1px; }
.person__actions { display: flex; gap: var(--s1); flex: none; }
.person--select { cursor: pointer; }
.person--select:hover { background: var(--subtle); }
.person__check { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; background: var(--panel); }
.person--select[aria-checked="true"] .person__check { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-sel { max-width: 100%; border-radius: 999px; }
.chip-sel .icon { flex: none; color: var(--ink-3); }
@media (max-width: 479px) {
    .person--wrap { flex-wrap: wrap; }
    .person--wrap .person__body { flex-basis: 100%; }
    .person--wrap .person__actions { width: 100%; }
    .person--wrap .person__actions .btn { flex: 1; }
}
.addrow { cursor: pointer; }
.addrow:hover { background: var(--subtle); }
.addrow .rowitem__title { color: var(--accent); font-weight: 600; }
.addrow__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent); }
.sheet-label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.invite-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--subtle); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.invite-card__head { display: flex; gap: var(--s3); align-items: flex-start; }
.invite-card__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.invite-card__title { font-weight: 600; }
.invite-card__text { font-size: var(--t-md); color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.invite-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.invite-card__foot { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: calc(var(--s1) * -1); }
.invite-card__link { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.linkbox { display: flex; gap: var(--s2); }
.linkbox .input { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
/* Help steps with screenshots (Crew › "Change your invite link") */
.help-steps { list-style: none; display: flex; flex-direction: column; gap: var(--s6); }
.help-step { display: flex; flex-direction: column; gap: var(--s3); }
.help-step__text { display: flex; gap: var(--s2); align-items: baseline; font-size: var(--t-md); }
.help-step__text b { font-weight: 600; }
.help-step__shot { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--subtle); }
.help-step__shot img { display: block; width: 100%; height: auto; }
/* Install steps (assets/js/pwa.js) */
.install-steps .rowitem { align-items: flex-start; }
.install-steps .rowitem__body { font-size: var(--t-md); line-height: 1.45; }
.install-steps__n { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.shot--dark { display: none !important; }
:root[data-theme="dark"] .shot--light { display: none !important; }
:root[data-theme="dark"] .shot--dark { display: block !important; }

/* Compare */
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--t-md); }
.cmp th { position: sticky; top: calc(var(--topbar-h) + var(--safe-top)); z-index: 3; background: var(--panel); text-align: left; font-weight: 500; font-size: var(--t-sm); color: var(--ink-3); padding: var(--s2); border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { width: 56px; }
.cmp td { vertical-align: top; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
.cmp tr.is-match td { background: color-mix(in srgb, var(--ok-soft) 75%, transparent); }
.cmp tr.is-match td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.cmp__date { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.04em; }
.cmp__date b { display: block; font-size: var(--t-lg); color: var(--ink); font-weight: 600; letter-spacing: -0.02em; text-transform: none; }
.cmp__item { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.cmp__item + .cmp__item { margin-top: 6px; }
.cmp__item .dot { transform: translateY(-1px); }
.cmp__text { min-width: 0; }
.cmp__title { font-weight: 500; overflow-wrap: anywhere; }
.cmp__sub { font-size: var(--t-sm); color: var(--ink-3); font-family: var(--mono); overflow-wrap: anywhere; }
.cmp__done { display: flex; gap: 4px; align-items: center; margin-top: 6px; font-size: var(--t-sm); font-weight: 500; color: var(--ok); font-family: var(--mono); }


/* Account: grouped lists. Phones show the menu or one section (settings.php?section=…), desktop both side by side.
   Every line is a .rowitem (icon, one-line title, value / switch / check on the right); one short note per group. */
.account { max-width: 560px; margin: 0 auto; width: 100%; padding-top: var(--s2); }
.account--menu .account__detail { display: none; }
.account:not(.account--menu) .account__menu { display: none; }
.account__heading { display: none; }
.acct-group { margin-bottom: var(--s6); }
.acct-group__label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 0 var(--s4); margin-bottom: var(--s2); }
.acct-group__note { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3); padding: var(--s2) var(--s4) 0; }
.acct-group .rows > * + * { border-top: 1px solid var(--line); }
.acct-group .rows > :empty { display: none; }
.acct-group button.rowitem:disabled { color: var(--ink-4); background: none; cursor: default; }
.acct-group .rowitem { min-height: 52px; }
.acct-group .rowitem__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-group .rowitem__sub { font-size: var(--t-sm); }
.acct-group .rowitem__sub[hidden] { display: none; }
.rowitem:has(.rowitem__value) .rowitem__body { flex-shrink: 0; max-width: 60%; }
.acct-group .rowitem__trail { flex: 0 1 auto; min-width: 0; margin-left: auto; justify-content: flex-end; }
.rowitem__value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.rowitem__value .dot { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.rowitem__icon .dot { width: 10px; height: 10px; }
label.rowitem { cursor: pointer; }
label.rowitem:hover { background: var(--subtle); }
.rowitem--choice { position: relative; }
.rowitem--choice input { position: absolute; opacity: 0; pointer-events: none; }
.rowitem__check { display: flex; color: var(--accent); opacity: 0; }
.rowitem--choice:has(input:checked) .rowitem__check { opacity: 1; }
.rowitem--choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.acct-id { min-height: 76px; }
.acct-id .avatar { width: 48px; height: 48px; font-size: var(--t-base); }
.acct-id__name { display: block; font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-alert:not(:empty) { margin-bottom: var(--s6); }
.acct-version { font-size: var(--t-xs); color: var(--ink-4); text-align: center; }
@media (min-width: 1024px) {
    .account { max-width: 940px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s8); align-items: start; }
    .account:not(.account--menu) .account__menu, .account--menu .account__detail { display: block; }
    .account__menu { position: sticky; top: var(--s6); }
    .account__menu .rowitem[aria-current="page"] { background: var(--subtle); }
    .account__heading { display: block; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s5); }
}

/* --------------------------------------------------------------------------
   8. Public pages
   -------------------------------------------------------------------------- */
.site-body { --page-max: 1120px; background: var(--panel); --topbar-h: 60px; }
/* Short pages (errors, expired links): the footer stays at the bottom of the screen */
.site-body { display: flex; flex-direction: column; min-height: 100dvh; }
.site-body > main { flex: 1 0 auto; }
.site-bar { position: sticky; top: 0; z-index: 30; padding-top: var(--safe-top); background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.site-bar__inner { display: flex; align-items: center; gap: var(--s4); height: 60px; padding: 0 var(--gutter); max-width: var(--page-max); margin: 0 auto; }
.site-bar__nav { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.site-bar__link { display: none; color: var(--ink-2); font-size: var(--t-base); font-weight: 500; padding: 0 var(--s2); }
.site-bar__link:hover { color: var(--ink); text-decoration: none; }
@media (min-width: 760px) { .site-bar__link { display: inline; } }
.site-foot { border-top: 1px solid var(--line); background: var(--bg); }
.site-foot__inner { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; padding: var(--s10) var(--gutter) calc(var(--s10) + var(--safe-bottom)); max-width: var(--page-max); margin: 0 auto; color: var(--ink-3); font-size: var(--t-md); }
@media (min-width: 760px) { .site-foot__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.site-foot__links a, .site-foot__links button { color: var(--ink-2); font-weight: 500; background: none; border: 0; padding: 0; font-size: inherit; }

/* Landing */
.lp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.lp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 25%, transparent 75%); }
.lp-hero__inner { position: relative; max-width: var(--page-max); margin: 0 auto; padding: var(--s16) var(--gutter) 0; text-align: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: var(--s2); height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: var(--t-md); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.lp-title { font-size: clamp(2.25rem, 6.4vw, 4.25rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; margin: var(--s6) auto 0; max-width: 15ch; }
.lp-lead { font-size: clamp(1rem, 2vw, 1.1875rem); color: var(--ink-2); max-width: 58ch; margin: var(--s5) auto 0; line-height: 1.6; }
.lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s8); }
.lp-note { margin-top: var(--s4); font-size: var(--t-md); color: var(--ink-3); }
.lp-shot { margin: var(--s12) auto 0; max-width: 1040px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--muted); padding: 8px 8px 0; box-shadow: var(--shadow-lg); text-align: left; }
.lp-shot__frame { border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--panel); overflow: hidden; }
.lp-shot__body { display: grid; grid-template-columns: 1fr; min-height: 380px; }
@media (min-width: 860px) { .lp-shot__body { grid-template-columns: 180px minmax(0, 1fr) 340px; } }
.lp-shot__side .rowitem__sub, .lp-shot__side .rowitem__title { white-space: nowrap; }
.lp-shot__nav { display: none; padding: 16px 10px; border-right: 1px solid var(--line); background: var(--bg); }
@media (min-width: 860px) { .lp-shot__nav { display: flex; flex-direction: column; gap: 2px; } }
.lp-shot__nav div { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
.lp-shot__nav div.on { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.lp-shot__main { padding: 20px; min-width: 0; }
.lp-shot__side { display: none; padding: 20px; border-left: 1px solid var(--line); }
@media (min-width: 860px) { .lp-shot__side { display: flex; } } /* flex keeps the .stack gap between the panels */
.lp-section { max-width: var(--page-max); margin: 0 auto; padding: var(--s16) var(--gutter); }
.lp-section__head { max-width: 640px; margin-bottom: var(--s10); }
.lp-kicker { font-size: var(--t-md); font-weight: 600; color: var(--accent); }
.lp-h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; margin-top: var(--s2); }
.lp-p { color: var(--ink-2); margin-top: var(--s3); font-size: var(--t-lg); line-height: 1.6; }
.lp-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .lp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-feature { padding: var(--s8) var(--s6); background: var(--panel); border-top: 1px solid var(--line); }
.lp-feature:first-child { border-top: 0; }
@media (min-width: 640px) and (max-width: 999px) { .lp-feature:nth-child(2) { border-top: 0; } .lp-feature:nth-child(even) { border-left: 1px solid var(--line); } .lp-feature:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .lp-feature:nth-child(-n + 3) { border-top: 0; } .lp-feature:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); } }
.lp-feature__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--ink); margin-bottom: var(--s5); box-shadow: var(--shadow-sm); }
.lp-feature__title { font-weight: 600; font-size: var(--t-lg); }
.lp-feature__text { color: var(--ink-2); margin-top: var(--s2); line-height: 1.6; }
.lp-steps { display: grid; gap: var(--s8); counter-reset: step; }
@media (min-width: 800px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { counter-increment: step; padding-top: var(--s5); border-top: 1px solid var(--ink); }
.lp-step::before { content: "0" counter(step); display: block; font-family: var(--mono); font-size: var(--t-md); color: var(--ink-3); margin-bottom: var(--s3); }
/* Request your airline (index.php #airline, assets/js/airline_request.js): one card, an aside on the
   canvas colour and the form in numbered groups divided by hairlines; the aside moves below the form on phones */
.lp-req { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
@media (min-width: 960px) { .lp-req { grid-template-columns: 320px minmax(0, 1fr); } }
.lp-req__aside { order: 2; display: flex; flex-direction: column; gap: var(--s8); padding: var(--s6) var(--s5); background: var(--bg); border-top: 1px solid var(--line); }
@media (min-width: 960px) { .lp-req__aside { order: 0; padding: var(--s8); border-top: 0; border-right: 1px solid var(--line); } }
.lp-req__label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); }
.lp-req__airlines { list-style: none; display: flex; flex-direction: column; gap: var(--s2); font-weight: 500; }
.lp-req__airlines li { display: flex; align-items: center; gap: var(--s2); }
.lp-req__steps { list-style: none; counter-reset: req; display: flex; flex-direction: column; gap: var(--s4); }
.lp-req__steps li { counter-increment: req; display: grid; grid-template-columns: 28px minmax(0, 1fr); color: var(--ink-2); font-size: var(--t-md); line-height: 1.55; }
.lp-req__steps li::before { content: "0" counter(req); font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); padding-top: 1px; }
.lp-req__steps b { color: var(--ink); font-weight: 600; }
.lp-req__privacy { display: flex; gap: var(--s2); margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); }
.lp-req__privacy > .icon { flex: none; margin-top: 2px; }
.lp-req__main { min-width: 0; display: flex; flex-direction: column; }
.lp-req__main > form { flex: 1; display: flex; flex-direction: column; }
.lp-req__main > .empty { flex: 1; justify-content: center; }
/* Groups are divs, not fieldsets: Safari/iPad won't make a legend a grid item, so the fields fell into the 180px column */
.lp-req__group { min-width: 0; padding: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .lp-req__group { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s8); padding: var(--s8); } }
.lp-req__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); font-weight: 600; font-size: var(--t-lg); letter-spacing: 0; }
@media (min-width: 760px) { .lp-req__head { margin-bottom: 0; align-self: start; padding-top: 2px; } }
.lp-req__head .badge { font-weight: 500; }
.lp-req__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.lp-req__fields { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.lp-req__desc { color: var(--ink-3); font-size: var(--t-md); line-height: 1.55; margin-top: -2px; }
.lp-req__add { align-self: flex-start; }
.lp-req__pair { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .lp-req__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-req__foot { margin-top: auto; display: flex; flex-direction: column-reverse; gap: var(--s4); padding: var(--s5); background: var(--subtle); }
@media (min-width: 760px) { .lp-req__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s8); padding: var(--s5) var(--s8); } }
.lp-req__foot .btn { flex: none; }
.lp-req__spam { display: flex; gap: var(--s2); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-3); max-width: 46ch; }
.lp-req__spam > .icon { flex: none; margin-top: 2px; }
.lp-link { display: flex; gap: var(--s2); }
.lp-link .input-icon { flex: 1; min-width: 0; }
.lp-link__status { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3); }
.lp-link__status .icon { flex: none; margin-top: 1px; }
.lp-link__status--ok { color: var(--ok); }
.lp-link__status--bad { color: var(--bad); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); }
.lp-band { border-radius: var(--r-lg); background: #09090b; color: #fafafa; padding: var(--s12) var(--s6); text-align: center; }
.lp-band .lp-p { color: #a1a1aa; }
.lp-band .btn--primary { background: #fafafa; border-color: #fafafa; color: #09090b; }

/* Auth */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--panel); }
.auth__main { display: flex; flex-direction: column; min-height: 100dvh; padding: calc(var(--safe-top) + var(--s5)) var(--gutter) calc(var(--safe-bottom) + var(--s5)); }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.auth__center { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 380px; margin: 0 auto; padding: var(--s10) 0; }
.auth__invite { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); margin-bottom: var(--s6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--subtle); font-size: var(--t-md); color: var(--ink-2); }
.auth__invite b { color: var(--ink); font-weight: 600; }
.auth__choices { margin-top: var(--s8); }
.auth__choices .rowitem { align-items: center; }
.auth__choices .rowitem__sub { line-height: 1.4; }
.auth__title { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.03em; }
.auth__lead { color: var(--ink-2); margin-top: var(--s2); }
.auth__form { margin-top: var(--s8); }
.auth__alt { margin-top: var(--s6); text-align: center; color: var(--ink-3); font-size: var(--t-md); }
.auth__legal { color: var(--ink-3); font-size: var(--t-sm); text-align: center; line-height: 1.5; }
.auth__status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.auth__status-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--k, var(--ink)); box-shadow: var(--shadow-sm); margin-bottom: var(--s3); }
.auth__links { display: flex; justify-content: center; gap: var(--s5); font-size: var(--t-md); }
.auth__links a, .auth__links button { color: var(--ink-3); background: none; border: 0; padding: 0; font-size: inherit; }
.auth__aside { display: none; }
@media (min-width: 1024px) {
    .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .auth__aside { display: flex; flex-direction: column; justify-content: space-between; margin: var(--s3); padding: var(--s10); border-radius: var(--r-lg); background: #09090b; color: #fafafa; position: relative; overflow: hidden; }
    .auth__aside::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#1c1c20 1px, transparent 1px), linear-gradient(90deg, #1c1c20 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent 75%); }
    .auth__aside > * { position: relative; }
    .auth__aside .brand { color: #fafafa; }
    .auth__quote { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; max-width: 22ch; }
    .auth__quote-by { margin-top: var(--s4); color: #a1a1aa; }
    .auth__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); border-top: 1px solid #27272a; padding-top: var(--s6); }
    .auth__fact b { display: block; font-size: var(--t-lg); font-weight: 600; }
    .auth__fact span { color: #a1a1aa; font-size: var(--t-md); }
}

/* Documents */
.doc { max-width: 720px; margin: 0 auto; padding: var(--s12) var(--gutter) var(--s10); }
.doc__title { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.04em; }
.doc__meta { color: var(--ink-3); font-size: var(--t-md); margin-top: var(--s2); }
/* A single message in the middle of the screen (404 page) */
.site-body > main:has(> .doc--center) { display: flex; flex-direction: column; justify-content: center; }
.doc--center { width: 100%; }
@media (min-width: 1024px) {
    .doc--center .empty { gap: var(--s3); }
    .doc--center .empty__icon { width: 56px; height: 56px; }
    .doc--center .empty__title { font-size: var(--t-3xl); letter-spacing: -0.03em; }
    .doc--center .empty__text { font-size: var(--t-base); max-width: 46ch; }
}
.prose { margin-top: var(--s8); color: var(--ink-2); line-height: 1.75; font-size: 15px; }
.prose h2 { color: var(--ink); font-size: var(--t-lg); margin: var(--s8) 0 var(--s3); }
.prose h3 { color: var(--ink); font-size: var(--t-base); margin: var(--s5) 0 var(--s2); }
.prose p, .prose ul { margin: 0 0 var(--s4); }
.prose ul { padding-left: 1.25rem; list-style: disc; }
.prose li { margin-bottom: var(--s2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.shared-head { display: flex; align-items: center; gap: var(--s4); padding: var(--s6) 0 var(--s5); }

/* --------------------------------------------------------------------------
   9. Transitions & print
   -------------------------------------------------------------------------- */
/* New screens fade in gently. No page snapshots, so the nav and top bar never flicker. */
.view-enter { animation: view-in 160ms var(--ease) both; }
.share-cta { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.share-cta__body { display: flex; gap: var(--s3); padding: var(--s4); }
.share-cta__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-sm); background: var(--panel); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.share-cta__actions { padding: 0 var(--s4) var(--s4) calc(var(--s4) + 36px + var(--s3)); }
@media (max-width: 479px) { .share-cta__actions { padding-left: var(--s4); } .share-cta__actions .btn { width: 100%; } }
@keyframes view-in { from { opacity: 0.35; } }
.view-loading { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s6); }

@media print {
    :root, :root[data-theme="dark"] { --bg: #fff; --panel: #fff; --subtle: #f4f4f5; --line: #d4d4d8; --ink: #000; --ink-2: #333; --ink-3: #555; }
    @page { margin: 12mm; size: A4; }
    body { background: #fff; font-size: 11px; }
    .no-print, .nav, .topbar, .site-bar, .site-foot, .fab, .toasts, .layout__side { display: none !important; }
    .shell { padding: 0 !important; }
    .main { margin: 0 !important; border: 0 !important; box-shadow: none !important; }
    .layout { display: block; }
    .agenda-day { break-inside: avoid; }
    .agenda-day__date, .agenda-month { position: static; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Narrow phones: tighter agenda lines */
.entry__meta .mono { font-size: 0.95em; letter-spacing: -0.03em; }
@media (max-width: 479px) {
    .entry { grid-template-columns: 58px minmax(0, 1fr) auto; gap: var(--s2) 10px; }
    .entry__side > .icon { display: none; }
    .entry__time { font-size: var(--t-sm); }
    .entry__route { letter-spacing: -0.03em; }
    .agenda-day { grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--s2); }
}
@media (min-width: 1024px) {
    .btn.desktop-only, .page-head__actions.desktop-only { display: inline-flex !important; }
    .topbar__title { font-size: var(--t-base); font-weight: 500; color: var(--ink-3); }
}

/* --------------------------------------------------------------------------
   Month overview (Schedule › Month): the whole month at a glance
   -------------------------------------------------------------------------- */
.mb { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mb__head { display: flex; align-items: center; gap: var(--s1); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.mb__title { flex: 1; font-size: var(--t-lg); font-weight: 600; }
.mb__summary { display: flex; flex-wrap: wrap; gap: 4px var(--s4); padding: 10px var(--s4); border-bottom: 1px solid var(--line); background: var(--subtle); font-size: var(--t-sm); color: var(--ink-3); }
.mb__summary b { font-family: var(--mono); font-weight: 600; color: var(--ink); margin-right: 2px; }
.mb__dow, .mb__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mb__dow span { padding: 6px 0; text-align: center; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.mb__cell {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 0; min-height: 74px; padding: 6px 4px 5px;
    border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--panel); color: var(--ink); text-align: left; font: inherit;
    overflow: hidden;
}
.mb__grid > .mb__cell:nth-child(7n) { border-right: 0; }
.mb__grid > .mb__cell:nth-last-child(-n + 7) { border-bottom: 0; }
.mb__cell:hover { background: var(--subtle); }
.mb__cell--weekend { background: color-mix(in srgb, var(--subtle) 50%, var(--panel)); }
.mb__cell--fill { background: color-mix(in srgb, var(--d) 11%, var(--panel)); }
.mb__cell--fill:hover { background: color-mix(in srgb, var(--d) 17%, var(--panel)); }
.mb__cell[class*=" d-"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--d); }
.mb__cell--other > * { opacity: 0.4; }
.mb__cell--past:not(.mb__cell--today) > * { opacity: 0.6; }
.mb__cell--other.mb__cell--past > * { opacity: 0.3; }
.mb__num { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 2px; border-radius: 11px; font-size: var(--t-sm); font-weight: 600; }
.mb__cell--today .mb__num { background: var(--accent); color: #fff; }
.mb__tag { margin-top: auto; max-width: 100%; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--d, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb__sub { max-width: 100%; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; }
.mb__lines, .mb__more { display: none; }
.mb .legend { border-top: 1px solid var(--line); align-items: center; }
@media (min-width: 640px) {
    .mb__cell { min-height: 108px; padding: 6px 8px 6px; gap: 4px; }
    .mb__tag, .mb__sub { display: none; }
    .mb__lines { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; }
    .mb__line { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; line-height: 1.3; white-space: nowrap; }
    .mb__line::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--d); flex: none; }
    .mb__line time { font-family: var(--mono); color: var(--ink-3); flex: none; }
    .mb__line span { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; }
    .mb__more { display: block; font-size: 10.5px; color: var(--ink-3); padding-left: 11px; }
}
@media (min-width: 1280px) { .mb__cell { min-height: 124px; } .mb__line { font-size: 11.5px; } }

@media (max-width: 639px) {
    .sched-head { padding: var(--s2) 0 var(--s3); }
    .sched-head .page-head__title, .sched-head .page-head__desc { display: none; }
    .sched--month .sched-head { display: none; }
    .sched--month .mb { margin-top: var(--s3); }
    .mb__cell { min-height: 60px; padding-top: 5px; }
    /* Wrap onto a second line instead of scrolling sideways, so nothing is hidden. */
    .mb__summary { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px var(--s3); padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
    .mb__head { padding-top: 4px; padding-bottom: 4px; }
}

/* Compact view switch in the top bar (Schedule: List / Month) */
.viewswitch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; margin-right: var(--s1); box-shadow: var(--shadow-sm); }
.viewswitch button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; background: var(--panel); color: var(--ink-3); font-size: var(--t-md); font-weight: 500; }
.viewswitch button + button { border-left: 1px solid var(--line-strong); }
.viewswitch button:hover { color: var(--ink); background: var(--subtle); }
.viewswitch button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
@media (max-width: 400px) { .viewswitch button span { display: none; } .viewswitch button { padding: 0 9px; } }

/* --------------------------------------------------------------------------
   Update screen (assets/js/pwa.js): shown while a new version installs and restarts
   -------------------------------------------------------------------------- */
.updating { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s6); background: var(--bg); text-align: center; animation: updating-in 160ms var(--ease) both; }
.updating__logo { width: 64px; height: 64px; border-radius: 14px; margin-bottom: var(--s3); animation: updating-pulse 1.6s ease-in-out infinite; }
.updating__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }
.updating__step { font-size: var(--t-md); color: var(--ink-3); min-height: 1.5em; }
.updating__bar { position: relative; width: 140px; height: 3px; margin-top: var(--s4); border-radius: 2px; background: var(--line); overflow: hidden; }
.updating__bar span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 2px; background: var(--ink); animation: updating-bar 1.1s ease-in-out infinite; }
@keyframes updating-in { from { opacity: 0; } }
@keyframes updating-pulse { 50% { transform: scale(0.94); opacity: 0.85; } }
@keyframes updating-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .updating, .updating__logo, .updating__bar span { animation: none; } }

/* --------------------------------------------------------------------------
   Admin mode (assets/js/app/views/admin.js). Phone first: lists, no wide tables.
   -------------------------------------------------------------------------- */
.stat__sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.stats--admin .stat__value { font-variant-numeric: tabular-nums; }

/* Key / value list inside a panel (one pair per line; .kv is the 2-column grid of the duty sheet) */
.kvlist { margin: 0; }
.kvlist > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 9px var(--s4); font-size: var(--t-md); }
.kvlist > div + div { border-top: 1px solid var(--line); }
.kvlist dt { color: var(--ink-3); min-width: 0; }
.kvlist dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* Airline rows and user rows: multi-line, wrap instead of overflowing */
.airline-row, .user-row { align-items: flex-start; }
.airline-row .rowitem__trail, .user-row .rowitem__trail { align-self: center; }
.airline-row__figs { display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin-top: 4px; font-size: var(--t-md); color: var(--ink-2); }
.airline-row__figs b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.airline-row .rowitem__sub { margin-top: 2px; }
.user-row__meta { display: flex; align-items: center; gap: var(--s2); min-width: 0; margin-top: 4px; font-size: var(--t-md); color: var(--ink-3); }
.user-row__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.log-detail { overflow-wrap: anywhere; }
.cleanup-next { flex-direction: column; align-items: flex-end; gap: 0; text-align: right; color: var(--ink-2); }

/* Sign-ups per week: neutral columns, the current week in ink */
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; height: 128px; }
.bars__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.bars__n { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); line-height: 1; margin-bottom: 4px; }
.bars__bar { display: block; width: 100%; max-width: 28px; border-radius: 3px 3px 0 0; background: var(--line-strong); }
.bars__col:last-child .bars__bar { background: var(--ink); }
.bars__axis { display: flex; justify-content: space-between; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); }

/* Filters: stacked on phones, one line on wider screens */
.admin-filters { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.admin-filters__q { grid-column: 1 / -1; }
.admin-filters .select { min-width: 0; }
@media (min-width: 720px) { .admin-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } .admin-filters__q { grid-column: auto; } }

.admin-to { display: grid; gap: var(--s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .admin-to { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.admin-to-user { padding: 6px 6px 6px var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--subtle); }
.admin-to-user .icon { vertical-align: -3px; color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.admin-more summary { cursor: pointer; font-size: var(--t-md); font-weight: 500; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; gap: var(--s2); list-style: none; }
.admin-more summary::-webkit-details-marker { display: none; }
.admin-more summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--fast, 120ms) var(--ease); margin: 0 3px; }
.admin-more[open] summary::before { transform: rotate(45deg); }
.admin-more summary:hover { color: var(--ink); }
.admin-mail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.admin-mail-actions .btn--primary { grid-column: 1 / -1; }
@media (min-width: 560px) { .admin-mail-actions { display: flex; justify-content: flex-end; } }

.timeline { list-style: decimal; margin: 0; padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 18px); font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); }
.timeline li + li { margin-top: var(--s2); }
.timeline b { color: var(--ink); font-weight: 600; }
.timeline li::marker { color: var(--ink-3); font-family: var(--mono); font-size: var(--t-sm); }

/* E-mail preview: the real HTML in a sandboxed frame */
.mail-preview { display: block; width: 100%; height: min(70dvh, 680px); border: 0; background: #f6f6f7; }
@media (min-width: 640px) { .sheet--wide { width: min(640px, calc(100% - 48px)); } }

/* In-app notices (main.js): between the top bar and the content, scroll away with the page */
.notices { display: flex; flex-direction: column; gap: var(--s2); max-width: var(--page-max, 1160px); margin: 0 auto; padding: var(--s3) var(--gutter) 0; }
.notices[hidden] { display: none; }
.notice { align-items: flex-start; padding-right: var(--s2); overflow-wrap: anywhere; }
.notice__close { margin: -4px 0 -4px auto; flex: none; color: var(--ink-3); }

/* Admin: retention cohorts, notices */
.stats--flush { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.stats--flush .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
@media (min-width: 720px) { .stats--flush { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats--flush .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } }
.cohort__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s3); margin-top: 4px; font-size: var(--t-md); }
.cohort__figs b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 480px) { .cohort__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.notice-row { align-items: flex-start; }