/* ── CSS Custom Properties — dark mode from day one ─────────────────────────── */

:root {
    --ba-status-bar-h: 37px;   /* height of .fico-status-bar — used by FICO terminal height calc */
    --bg-primary:       #ffffff;
    --bg-secondary:     #f5f5f5;
    --bg-card:          #ffffff;
    --bg-input:         #ffffff;
    --text-primary:     #1a1a2e;
    --text-secondary:   #666666;
    --text-muted:       #999999;
    /* Alias: several shared components (modals, crew card, photos) use
       var(--text) for primary text. It was never defined, so it fell back to
       a dark slate — fine on a white card, unreadable on the dark card in
       dark mode. Map it to --text-primary so it stays theme-aware. Custom
       properties resolve lazily, so this single :root alias is correct in
       both themes (no need to repeat it in the dark blocks). */
    --text:             var(--text-primary);
    --brand-blue:       #0071bc;
    --brand-orange:     #f7931e;
    --accent:           #0071bc;
    --accent-hover:     #005a96;
    --accent-light:     #e6f1fa;
    --border:           #e0e0e0;
    --border-focus:     #0071bc;
    --success:          #34c759;
    --warning:          #ff9500;
    --danger:           #ff3b30;
    --danger-light:     #fff0ef;
    --nav-bg:           #1a1a2e;
    --nav-text:         #f0f0f0;
    --nav-active:       #0071bc;
    --shadow-sm:        0 1px 3px rgba(0,0,0,.08);
    --shadow-md:        0 4px 12px rgba(0,0,0,.1);
    --radius-sm:        4px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --transition:       0.15s ease;
    --font-body:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:        'SF Mono', Consolas, 'Liberation Mono', monospace;
    --font-size-base:   16px;
    --max-width:        480px;
    --max-width-wide:   900px;

    /* ── eNigel loader — add/remove .enigel-loader--animated to swap           */
    /* between the SMIL SVG animation and the CSS fallback spinner.             */
}

[data-theme="dark"] {
    --bg-primary:       #1a1a2e;
    --bg-secondary:     #16213e;
    --bg-card:          #0f2544;
    --bg-input:         #16213e;
    --brand-orange:     #ffaa55;
    --brand-blue:       #4da3ff;
    --text-primary:     #f0f0f0;
    --text-secondary:   #aaaaaa;
    --text-muted:       #777777;
    --accent:           #4da3ff;
    --accent-hover:     #70b8ff;
    --accent-light:     #0d2240;
    --border:           #2a2a4a;
    --border-focus:     #4da3ff;
    --success:          #30d158;
    --warning:          #ff9f0a;
    --danger:           #ff453a;
    --danger-light:     #2a0d0d;
    --nav-bg:           #0f0f1e;
    --nav-text:         #d0d0e0;
    --nav-active:       #4da3ff;
    --shadow-sm:        0 1px 3px rgba(0,0,0,.3);
    --shadow-md:        0 4px 12px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary:       #1a1a2e;
        --bg-secondary:     #16213e;
        --bg-card:          #0f2544;
        --bg-input:         #16213e;
        --brand-orange:     #ffaa55;
        --brand-blue:       #4da3ff;
        --text-primary:     #f0f0f0;
        --text-secondary:   #aaaaaa;
        --text-muted:       #777777;
        --accent:           #4da3ff;
        --accent-hover:     #70b8ff;
        --accent-light:     #0d2240;
        --border:           #2a2a4a;
        --border-focus:     #4da3ff;
        --success:          #30d158;
        --warning:          #ff9f0a;
        --danger:           #ff453a;
        --danger-light:     #2a0d0d;
        --nav-bg:           #0f0f1e;
        --nav-text:         #d0d0e0;
        --nav-active:       #4da3ff;
        --shadow-sm:        0 1px 3px rgba(0,0,0,.3);
        --shadow-md:        0 4px 12px rgba(0,0,0,.4);
    }
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */

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

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    background: var(--bg-primary); /* default — overridden in PWA mode below */
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    transition: background var(--transition), color var(--transition);
}

body:has(.login-page) {
    overscroll-behavior: none;
}

/* ── Typography ──────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────────────────────── */

.page-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.container--wide {
    max-width: var(--max-width-wide);
}

/* ── Card ────────────────────────────────────────────────────────────────────── */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

/* ── Logo ────────────────────────────────────────────────────────────────────── */

.logo {
    display: block;
    margin: 0 auto 40px;
    height: 40px;
    width: auto;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.logo-mark .e { color: var(--brand-orange); }
.logo-mark .name { color: var(--brand-blue); }

/* ── Forms ───────────────────────────────────────────────────────────────────── */

.form-group {
    margin-bottom: 20px;
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.input-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
}

.input-wrap:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(0,113,188,.12);
}

.input-prefix,
.input-suffix {
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    white-space: nowrap;
    user-select: none;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    line-height: 46px;
}

.input-suffix {
    border-right: none;
    border-left: 1px solid var(--border);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    min-height: 48px;
}

input::placeholder { color: var(--text-muted); }

/* Standalone input (no wrap) */
input.input {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
}

input.input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(0,113,188,.12);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition);
    min-height: 48px;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--accent);
    color: #fff;
    width: 100%;
}

.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
}

.btn--secondary:hover:not(:disabled) { background: var(--border); }

.btn--danger {
    background: var(--danger);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    color: var(--accent);
    padding: 8px 16px;
}

.btn--ghost:hover:not(:disabled) { background: var(--accent-light); }

/* Destructive in-row action — red bold link style. Use for Delete / Clear /
 * Reset / Deactivate etc. when the button sits next to other row actions
 * (Edit, Restore) rather than as a standalone CTA. Tax editor + QB saved
 * briefs + admin destructive rows all use this. Pair with .btn--sm for
 * compact rows. */
.btn--danger-link {
    background: transparent;
    color: var(--danger);
    border: 1px solid transparent;
    font-weight: 600;
    padding: 8px 16px;
}

.btn--danger-link:hover:not(:disabled),
.btn--danger-link:focus-visible {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    outline: none;
}

.btn--danger-link:disabled { opacity: 0.4; cursor: progress; }

/* ── Tabbed card ──────────────────────────────────────────────────────────
 * Reusable pattern: a single card with a tab strip across the top and the
 * active panel filling the body. Active tab joins the body seamlessly (no
 * border between them); inactive tabs sit slightly recessed.
 *
 *   <div class="tab-card">
 *     <div class="tab-card__tabs" role="tablist">
 *       <button class="tab-card__tab is-active" data-mode="x">…</button>
 *       <button class="tab-card__tab"           data-mode="y">…</button>
 *     </div>
 *     <div class="tab-card__body">
 *       <div class="tab-card__panel" data-mode="x">…</div>
 *       <div class="tab-card__panel" data-mode="y" hidden>…</div>
 *     </div>
 *   </div>
 *
 * Panels go INSIDE the body — don't put .card on them, the wrapper provides
 * the card visuals. First used by Staff Travel; ready to graft onto admin
 * pages with sub-views (e.g. checklist, security log) when those want tabs.
 */
.tab-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.tab-card__tabs {
    display: flex;
    gap: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab-card__tab {
    flex: 1 1 0;
    min-width: max-content;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-bottom-color var(--transition);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.tab-card__tab:last-child { border-right: none; }

.tab-card__tab:hover:not(.is-active):not(:disabled) {
    background: var(--bg-card);
    color: var(--text);
}

.tab-card__tab.is-active {
    background: var(--bg-card);
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent);
    cursor: default;
}

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

.tab-card__body {
    padding: 20px;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    margin-bottom: 20px;
}

.alert--error {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.alert--success {
    background: #f0fff4;
    color: #1a7a3c;
    border: 1px solid var(--success);
}

/* ── Auth-cancelled banner (injected by auth-cancel.js) ─────────────────────── */

.auth-cancelled-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 16px;
    background: var(--warning-light, #fff7e0);
    color: var(--warning, #8a6100);
    border: 1px solid var(--warning, #d49a00);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: 1.4;
}

.auth-cancelled-banner__close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.7;
}

.auth-cancelled-banner__close:hover { opacity: 1; }

/* ── Login page ──────────────────────────────────────────────────────────────── */

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    background: var(--bg-primary);
    overflow-y: auto;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    box-shadow: var(--shadow-md);
}

/* BA-branded login pages — /ba/login + /stafftravel/connect get the tailfin
   image with a dark gradient overlay so the white card stands out. The
   overlay sits in a ::before so it can't shift the card itself. */
.login-page--ba {
    background-color: #0a223d;
    position: relative;
}
.login-page--ba::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 34, 61, 0.55) 0%, rgba(10, 34, 61, 0.85) 100%),
                url('/assets/images/ba-tailfin.jpg') center/cover no-repeat;
    z-index: 0;
    pointer-events: none;
}
.login-page--ba .login-card {
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Hero login screen — landing page + registration form get a rotating
   BA-fleet background, three images cross-fading on a 24s cycle. The
   .login-bg wrapper holds three absolute layers + a gradient overlay
   that anchors the white card on top. Negative animation-delays put
   layer 1 already at peak visibility on first paint (no black flash).
   prefers-reduced-motion users get layer 1 only, no animation. */
.login-page--hero {
    background-color: #0a223d;
    position: relative;
}
.login-page--hero .login-card {
    position: relative;
    z-index: 1;
    box-shadow: 0 14px 60px rgba(0, 0, 0, 0.55);
}
.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.login-bg__layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    will-change: opacity;
    animation: login-bg-fade 24s infinite ease-in-out;
}
/* background-image URLs are injected inline by the server — three
 * random picks from /assets/images/login-bg/ on every render via
 * LoginBackgrounds::pickThree(). Only animation timing lives here. */
.login-bg__layer--1 { animation-delay: -1.5s;  /* starts at "fully visible" peak */ }
.login-bg__layer--2 { animation-delay: -9.5s; }
.login-bg__layer--3 { animation-delay: -17.5s; }
.login-bg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 34, 61, 0.40) 0%, rgba(10, 34, 61, 0.78) 100%);
}

@keyframes login-bg-fade {
    0%   { opacity: 0; }
    6%   { opacity: 1; }
    33%  { opacity: 1; }
    39%  { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .login-bg__layer { animation: none; opacity: 0; }
    .login-bg__layer--1 { opacity: 1; }
}

.login-logo-wrap {
    text-align: center;
    margin-bottom: 36px;
}

.login-logo {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto 10px;
}

/* ── Registration step progress bar ─────────────────────────────────────────── */

.reg-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    position: relative;
}
.reg-steps::before {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(10% + 13px);
    right: calc(10% + 13px);
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.reg-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
}
.reg-step__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-muted);
}
.reg-step__label {
    font-size: 0.625rem;
    color: var(--text-muted);
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
}
.reg-step--done .reg-step__dot {
    background: var(--success, #22c55e);
    border-color: var(--success, #22c55e);
    color: #fff;
}
.reg-step--active .reg-step__dot {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
    background: var(--bg-card);
}
.reg-step--active .reg-step__label {
    color: var(--text);
    font-weight: 600;
}

/* ── Registration welcome — animated tick ────────────────────────────────────── */

.reg-tick-wrap {
    text-align: center;
    margin: 8px 0 24px;
}
.reg-tick-svg {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
}
.reg-tick-circle {
    fill: none;
    stroke: var(--success, #22c55e);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: reg-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.reg-tick-check {
    fill: none;
    stroke: var(--success, #22c55e);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: reg-check 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.65s forwards;
}
@keyframes reg-circle {
    to { stroke-dashoffset: 0; }
}
@keyframes reg-check {
    to { stroke-dashoffset: 0; }
}
.reg-welcome-btn {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.reg-welcome-btn--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Offline banner ──────────────────────────────────────────────────────────── */

.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--warning);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    transform: translateY(-100%);
    transition: transform var(--transition);
    z-index: 9999;
}

.offline-banner.visible { transform: translateY(0); }

/* ── Navigation shell ────────────────────────────────────────────────────────── */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* .app-header rule lives further down (line ~925) where it's safe-area
 * aware. Don't add an earlier override here — they used to coexist and
 * the older one (no padding-top: env-safe-area-inset-top) ended up
 * confusing the cascade on iOS PWA, hiding the hamburger under the
 * status bar on Logbook. Single source of truth wins. */

.app-content {
    flex: 1;
    padding: 24px 16px;
    max-width: var(--max-width-wide);
    margin: 0 auto;
    width: 100%;
}

/* Bottom tab nav — phone */
.app-nav {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

.app-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.6875rem;
    gap: 4px;
    min-height: 56px;
    transition: color var(--transition);
}

.app-nav__item.active { color: var(--nav-active); }

/* ── Utilities ───────────────────────────────────────────────────────────────── */

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

.text-center { text-align: center; }
.text-muted   { color: var(--text-muted); font-size: 0.875rem; }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }

/* ── Loading / spinner ───────────────────────────────────────────────────────── */

.spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── App layout — sidebar shell ──────────────────────────────────────────────── */

:root {
    --app-header-h:  56px;
    --sidebar-w:     264px;
}

/* app-shell wraps sidebar + app-body (column on mobile, row on desktop) */
.app-shell {
    display: flex;
    flex-direction: column;
}

/* app-body contains the top header (mobile) + main content */
.app-body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────────── */

.app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--nav-bg);
    color: var(--nav-text);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar.is-open {
    transform: translateX(0);
}

/* Sidebar header: logo + close button */
.app-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(18px + env(safe-area-inset-top)) 20px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.app-sidebar__logo {
    text-decoration: none;
}

/* ── Hamburger toggle (mobile header) ───────────────────────────────────────── */

.nav-toggle {
    background: none;
    border: none;
    color: var(--nav-text);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    margin-left: -8px;
    flex-shrink: 0;
}

.nav-toggle:hover { background: rgba(255,255,255,.1); }

/* Close button inside sidebar (mobile only) */
.nav-close {
    background: none;
    border: none;
    color: var(--nav-text);
    opacity: 0.6;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.nav-close:hover { opacity: 1; background: rgba(255,255,255,.1); }

/* ── Mobile overlay ──────────────────────────────────────────────────────────── */

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

body.nav-open { overflow: hidden; }

/* ── App header (mobile top bar) ─────────────────────────────────────────────── */

.app-header {
    background: var(--nav-bg);
    color: var(--nav-text);
    /* In standalone PWA with viewport-fit=cover, env(safe-area-inset-top)
     * equals the status bar / Dynamic Island height — pushes the
     * hamburger / logo / theme-toggle below the transparent system
     * overlay. max() guards against the iPhone-15 corner case where
     * env() momentarily resolves to 0 on certain navigations (most
     * visible on Logbook); we ALWAYS reserve at least 44px so the
     * icons can't end up under the status bar even if the CSS env
     * lookup fails.
     * Padding is rendered as a discrete declaration so it can't be
     * accidentally clobbered by a later `padding: …` shorthand. */
    padding-left:  16px;
    padding-right: 16px;
    padding-top:   max(env(safe-area-inset-top), 44px);
    height: calc(var(--app-header-h) + max(env(safe-area-inset-top), 44px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.app-header__logo { text-decoration: none; }

/* Theme toggle button in the mobile header top-right */
.app-header__theme-btn {
    background: none;
    border: none;
    color: var(--nav-text);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-right: -8px;
}
.app-header__theme-btn:hover { background: rgba(255,255,255,.1); }

/* Hidden on desktop — sidebar theme toggle handles it there */
@media (min-width: 768px) {
    .app-header__theme-btn { display: none; }
}

.app-header__end { width: 38px; flex-shrink: 0; } /* balances hamburger width */

/* ── Sidebar nav list ─────────────────────────────────────────────────────────── */

.sidebar-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;   /* let the flex child actually scroll rather than grow */
}

/* Static zones that stay put while .sidebar-nav scrolls between them:
   Home pinned at the top; theme toggle + Sign out pinned above the footer
   logo. Both are flex-shrink:0 siblings of the scrolling list. */
.sidebar-top,
.sidebar-actions {
    flex-shrink: 0;
    padding: 6px 0;
}
.sidebar-top {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-actions {
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-nav__heading {
    padding: 14px 20px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    pointer-events: none;
    user-select: none;
}

.sidebar-nav__sep {
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: 6px 14px;
}

.sidebar-nav__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 20px;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    opacity: .75;
    transition: background var(--transition), opacity var(--transition);
}

.sidebar-nav__item:hover {
    background: rgba(255,255,255,.07);
    opacity: 1;
    text-decoration: none;
}

.sidebar-nav__item.active,
.sidebar-nav__item[aria-current="page"] {
    color: var(--nav-active);
    background: rgba(0,113,188,.18);
    opacity: 1;
}

.sidebar-nav__item--signout {
    color: var(--danger);
    opacity: .7;
}

.sidebar-nav__item--signout:hover {
    background: rgba(255,59,48,.1);
    color: var(--danger);
    opacity: 1;
}

/* Theme toggle button — resets browser button chrome so it matches <a> nav items */
.sidebar-nav__item--theme {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.theme-toggle-label {
    pointer-events: none;
}

.sidebar-nav__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Logo image ──────────────────────────────────────────────────────────────── */

/* The SVG logo uses #000080 fills that vanish on the dark sidebar background.
   brightness(3) lifts them to a visible dark blue without blowing out orange/blue. */
.nav-logo {
    display: block;
    height: auto;
    width: auto;
    flex-shrink: 0;
    align-self: flex-start; /* prevent stretch inside flex columns */
}

.nav-logo--sidebar { height: 24px; }
.nav-logo--header  { height: 20px; }
.nav-logo--footer  { height: 14px; opacity: 0.55; }

/* ── Sidebar footer ──────────────────────────────────────────────────────────── */

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.logo-mark--sm { font-size: 1rem; }

.sidebar-footer__version {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.28);
    margin-top: 2px;
}

.sidebar-footer__build {
    font-size: 0.625rem;
    color: rgba(255,255,255,.28);
    font-family: var(--font-mono);
}

.sidebar-footer__link {
    font-size: 0.6875rem;
    color: rgba(255,255,255,.35);
    text-decoration: none;
}

.sidebar-footer__link:hover {
    color: rgba(255,255,255,.65);
    text-decoration: underline;
}

/* ── Tablet+ overrides ───────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    :root {
        --app-header-h: 0px;
    }

    /* Shell becomes a side-by-side row */
    .app-shell {
        flex-direction: row;
        min-height: 100dvh;
        min-height: 100vh;
    }

    /* Sidebar: always visible, sticky, full height */
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100dvh;
        height: 100vh;
        flex-shrink: 0;
        transform: translateX(0) !important;
        transition: none !important;
    }

    /* Close button and hamburger not needed on desktop */
    .nav-close  { display: none; }
    .nav-toggle { display: none; }

    /* Overlay never shown on desktop */
    .nav-overlay { display: none !important; }

    /* Top header hidden — sidebar handles navigation */
    .app-header { display: none; }

    /* Body takes remaining width */
    .app-body {
        flex: 1;
        min-width: 0;
    }

    .app-content { padding: 32px; }

    .app-nav { display: none; }

    .login-card { padding: 48px 40px; }
}

/* ── Passkey hero (login-page passkey-first view) ────────────────────────── */

.passkey-hero {
    text-align: center;
    margin-bottom: 28px;
}

.passkey-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    margin: 0 auto 16px;
}

.passkey-hero__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.passkey-hero__sub {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ── Passkey setup modal ──────────────────────────────────────────────────── */

.passkey-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.passkey-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 380px;
    width: 100%;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.passkey-modal__icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.passkey-modal__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.passkey-modal__body {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0 0 24px;
    line-height: 1.5;
}

.passkey-modal__skip {
    display: block;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
}

/* ── eNigel branded loader ─────────────────────────────────────────────────
 *
 * HTML structure (render via LoaderView::html($message)):
 *
 *   <div class="enigel-loader enigel-loader--animated" role="status">
 *     <div class="enigel-loader__stage" aria-hidden="true">
 *       <svg>…eN logo + SMIL-animated plane…</svg>
 *     </div>
 *     <div class="enigel-loader__fallback" aria-hidden="true"></div>  ← spinner
 *     <p   class="enigel-loader__msg">Working…</p>
 *   </div>
 *
 * --animated class: shows stage, hides fallback spinner.
 * Remove --animated to fall back to the CSS spinner.
 * ─────────────────────────────────────────────────────────────────────────── */

.enigel-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 0 8px;
}

/* ── Animation stage (plane + logo) — hidden until animated mode enabled ── */

.enigel-loader__stage {
    position: relative;
    width: 100px;
    height: 100px;
    display: none;                          /* shown when --enigel-loader-animated:1 */
}

@supports (display: none) {
    /* When animation is activated, replace display:none with flex */
    :root[style*="--enigel-loader-animated: 1"] .enigel-loader__stage,
    .enigel-loader--animated .enigel-loader__stage {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Fallback spinner — shown when animation not yet active ────────────── */

.enigel-loader__fallback {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: enigel-spin 0.75s linear infinite;
    /* Hidden when animated mode is active */
    display: block;
}

.enigel-loader--animated .enigel-loader__fallback {
    display: none;
}

@keyframes enigel-spin {
    to { transform: rotate(360deg); }
}

/* ── Message text ──────────────────────────────────────────────────────── */

.enigel-loader__msg {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
    min-height: 1.4em;
    transition: opacity 0.2s;
}

/* ── FICO typing-indicator bubble — square, spinner only ───────────────── */

#fico-waiting-loader:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: var(--radius-lg); /* override chat-tail radius */
}

#fico-waiting-loader .enigel-loader {
    padding: 0;
    gap: 0;
}

#fico-waiting-loader .enigel-loader__msg {
    display: none;
}

/* ── Legal document pages (/terms, /privacy, /cookies) ─────────────────── */

.legal-doc { font-size: 0.9375rem; line-height: 1.75; }

.legal-doc .doc-header {
    border-bottom: 2px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 32px;
}
.legal-doc .doc-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.legal-doc .version {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}
.legal-doc .preamble {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.legal-doc h2 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin: 36px 0 14px;
}
.legal-doc h3 { font-size: 0.9375rem; color: var(--text-primary); margin: 16px 0 8px; }
.legal-doc p  { margin: 8px 0; color: var(--text-secondary); }

.legal-doc .subclause    { margin: 6px 0 4px; padding-left: 2em; }
.legal-doc .subsubclause { margin: 4px 0;     padding-left: 4em; }
.legal-doc .subclause .num    { font-weight: 600; display: inline-block; min-width: 4em;   color: var(--text-secondary); }
.legal-doc .subsubclause .num { font-weight: 600; display: inline-block; min-width: 5.5em; color: var(--text-secondary); }

.legal-doc .info-box {
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 0.875rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-primary);
}

.legal-doc ul.data-list { list-style: none; padding-left: 1.5em; margin: 8px 0; }
.legal-doc ul.data-list li { margin: 4px 0; font-size: 0.875rem; color: var(--text-secondary); }
.legal-doc ul.data-list li::before { content: "→"; display: inline-block; width: 1.2em; margin-left: -1.5em; color: var(--accent); }

.legal-doc .processor {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin: 12px 0;
    color: var(--text-secondary);
}
.legal-doc .processor .note { font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; }

.legal-doc .rights-table,
.legal-doc .cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.875rem;
}
.legal-doc .rights-table th,
.legal-doc .cookie-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 9px 12px;
    text-align: left;
    border: 1px solid var(--border);
}
.legal-doc .rights-table td,
.legal-doc .cookie-table td {
    padding: 9px 12px;
    border: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-secondary);
}
.legal-doc .rights-table tr:nth-child(even) td,
.legal-doc .cookie-table tr:nth-child(even) td { background: var(--bg-secondary); }

.legal-doc .tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.legal-doc .legal-footer {
    margin-top: 48px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* ── Backwards-compatible aliases (used in older markup) ───────────────── */

.working-overlay   { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 0 8px; }
.working-spinner   { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: enigel-spin 0.75s linear infinite; }
.working-msg       { font-size: 0.9375rem; color: var(--text-secondary); margin: 0; text-align: center; min-height: 1.4em; }

/* ── FICO chat mini-app ───────────────────────────────────────────────────── */

.fico-status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    position: sticky;
    top: var(--app-header-h, 56px);
    z-index: 10;
}

.fico-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fico-status-identity {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.fico-status-badge {
    color: var(--text-muted);
    flex-shrink: 0;
}

.fico-timer {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 2.8em;
}

.fico-timer--warn  { color: var(--warning); }
.fico-timer--crit  { color: var(--danger);  font-weight: 600; }

.fico-status-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fico-status-action {
    color: var(--accent);
    font-size: 0.8125rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.fico-status-action:hover { text-decoration: underline; }

.fico-status-sep {
    color: var(--text-muted);
    user-select: none;
}

.fico-history {
    flex: 1;
    min-height: 0;            /* flex child must be 0 to allow shrink + scroll in Chrome */
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-anchor: auto;  /* browser keeps scroll at bottom when new content added */
    /* Terminal-style throughout — a nod to legacy FICO. Every bubble, system
       line, and intro string inherits the monospace face. */
    font-family: var(--font-mono, monospace);
}
.fico-history * {
    font-family: inherit;
}

.fico-bubble {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* User command — right-aligned, accent background */
.fico-bubble--sent {
    align-self: flex-end;
    background: var(--accent);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    font-family: var(--font-mono, monospace);
}

/* FICO response — left-aligned, monospace, secondary background */
.fico-bubble--received {
    align-self: flex-start;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
}

/* System / info message — centred, muted */
.fico-bubble--system {
    align-self: center;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
    border: none;
    padding: 4px 0;
}

.fico-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
    flex-shrink: 0;
    /* Stick to bottom of viewport like a native messaging app */
    position: sticky;
    bottom: 0;
}

.fico-input {
    flex: 1;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 22px;        /* pill shape — iMessage / WhatsApp style */
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color var(--transition), box-shadow var(--transition);
    /* Prevent iOS from zooming on focus (need 16px minimum) */
    font-size: 1rem;
}

.fico-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(0,113,188,.12);
}

.fico-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Send button — circular to match pill input */
#fico-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.fico-clear-btn:hover { color: var(--danger) !important; }

/* ── FICO hot-links — clickable tokens in responses that pop up follow-on ──
   queries. Inline, same monospace glyphs as the surrounding text so the
   FICO column alignment is preserved exactly. */
.fico-hot {
    color: var(--accent);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    border-radius: 3px;
}
.fico-hot:hover,
.fico-hot:focus-visible {
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

/* FT (flight times) ETD/ETA — bold + RAG delay colour. Monospace so bold
   doesn't shift the columns. */
.fico-ftm         { font-weight: 700; }
.fico-ftm--green  { color: var(--success); }
.fico-ftm--amber  { color: var(--warning); }
.fico-ftm--red    { color: var(--danger); }

/* Pop-up of follow-on actions for a hot-link. Positioned in JS. */
.fico-pop {
    position: absolute;
    z-index: 200;
    min-width: 180px;
    max-width: 280px;
    padding: 6px;
    background: var(--surface, var(--bg-secondary, #ffffff));
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}
.fico-pop__head {
    padding: 6px 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: normal;
    word-break: break-word;
}
.fico-pop__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary, var(--text, #111));
    cursor: pointer;
}
.fico-pop__item:hover,
.fico-pop__item:focus-visible {
    background: var(--accent);
    color: #ffffff;
    outline: none;
}

/* ── FICO intro (ASCII box + starter commands, shown when the chat is empty) ── */
/* Intro renders as a plain FICO response bubble (--received): mono, black
   text, no extra chrome. Only the starter-command links (.fico-hot) are
   coloured. Rules below are layout-only. */
.fico-intro__art {
    margin: 0 0 8px;
    white-space: pre;        /* keep the box columns intact */
    overflow-x: auto;
}
.fico-intro__sub  { margin: 0 0 12px; }
.fico-intro__hint { margin: 0 0 8px; }
.fico-intro__cmd  { margin: 3px 0; }

/* ── BA status bar icon buttons (ping / disconnect) ──────────────────────── */

.fico-status-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0.65;
    transition: opacity var(--transition), background var(--transition);
    font-family: inherit;
    font-size: inherit;
}

.fico-status-icon-btn:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255,255,255,.12);
}

.fico-status-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Settings page ───────────────────────────────────────────────────────────── */

.settings-section { margin-bottom: 28px; }
.settings-section h2 {
    font-size: 1rem; font-weight: 600; margin-bottom: 12px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.settings-passkey-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
    transition: opacity 0.25s ease;
}
.settings-passkey-row:last-of-type { border-bottom: none; }
.settings-passkey-info { flex: 1; min-width: 0; }
.settings-passkey-label {
    font-weight: 500; font-size: 0.9375rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-passkey-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.settings-msg { font-size: 0.8125rem; margin-top: 8px; display: block; min-height: 1.2em; }
.settings-msg--ok  { color: var(--success); }
.settings-msg--err { color: var(--danger); }

/* Advanced section — collapsed by default, separates power-user controls
   (v1 import + force-update) from the everyday settings cards above. */
.settings-advanced { margin-top: 24px; }
.settings-advanced > summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 10px 0;
    border-top: 1px solid var(--border);
    list-style: none;
    user-select: none;
}
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
}
.settings-advanced[open] > summary::before { transform: rotate(90deg); }
.settings-advanced[open] > summary { color: var(--text); }
.settings-advanced__hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 4px 0 16px;
}

/* ── Peek ────────────────────────────────────────────────────────────────────── */

.peek-caution {
    background: var(--warning-light, #fffbeb);
    color: var(--warning-dark, #92400e);
    border: 1px solid var(--warning, #d97706);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

.peek-form-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
}

.peek-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.peek-form-row .form-group {
    flex: 1 1 140px;
    margin-bottom: 0;
}

.peek-form-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 12px;
}

.peek-result {
    border-radius: var(--radius);
    padding: 20px 24px;
    border: 1px solid var(--border);
}

.peek-result--found {
    background: #f0fff4;
    border-color: var(--success);
}

[data-theme="dark"] .peek-result--found {
    background: rgba(26, 122, 60, 0.12);
}

.peek-result--not-found,
.peek-result--not-on-flight {
    background: var(--bg-secondary);
}

.peek-result__hurray {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
    margin-bottom: 8px;
}

.peek-result__crew {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 8px;
}

.peek-result__cache {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.peek-refresh-btn {
    background: none;
    border: none;
    color: var(--brand-blue);
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

/* Bidpack trips containing the looked-up sector. Sits inside the result card
 * below the crew summary. One row per trip: ref + month, then a chip row. */
.peek-trips {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.peek-trips__title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.peek-trips__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.peek-trip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.peek-trip__ref {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.peek-trip__date {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.peek-trip__chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* Shared flight chips — visually identical to the roster calendar's HEAVY
 * (accent fill) and POSITIONING (teal, seat icon) sector chips. */
.peek-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0 7px;
    border-radius: 4px;
    line-height: 1.6;
    white-space: nowrap;
}

.peek-chip svg {
    flex-shrink: 0;
    vertical-align: -1px;
}

.peek-chip--fleet {
    background: var(--bg-secondary);
    color: var(--text-secondary, var(--text-muted));
    border: 1px solid var(--border);
}

.peek-chip--seat {
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.peek-chip--heavy {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.peek-chip--positioning {
    --peek-teal: #14b8a6;
    background: color-mix(in srgb, var(--peek-teal) 18%, transparent);
    color: var(--peek-teal);
    border: 1px solid color-mix(in srgb, var(--peek-teal) 40%, transparent);
}

/* Trip ref rendered as a button → opens the reconstructed-trip modal. */
.peek-trip__ref--link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.peek-trip__ref--link:hover {
    color: var(--accent-hover);
}

/* ── Trip detail modal (old-school BA bidpack reconstruction) ───────────── */
/* Peek trip modal — content styles only. Chrome is now provided by
 * .rc-modal* (from roster-calendar.css) so the modal matches every
 * other modal in the app. The old peek-trip-modal chrome rules
 * (native <dialog> positioning, ::backdrop, __head, __close) were
 * dropped when peek.js was migrated to the rc-modal sheet pattern. */

.peek-trip-modal__title {
    font-size: 1rem;
    font-weight: 700;
}

.peek-trip-modal__msg {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Two-column key/value header. */
.peek-trip-modal__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0 0 16px;
    font-size: 0.9375rem;
}

.peek-trip-modal__meta dt {
    color: var(--text-muted);
    font-weight: 600;
}

.peek-trip-modal__meta dd {
    margin: 0;
    font-weight: 600;
}

/* Fixed-width sector block — the bidpack line, monospace. */
.peek-trip-modal__sectors {
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
    color: var(--text-primary);
}

/* "Previously found" rows that carry a trips disclosure: drop the flight
 * row's separator so the flight + its trips read as one grouped block, the
 * trips row provides the bottom border. */
/* Scoped under .peek-history-table so this out-specifies the generic
 * `.peek-history-table td` border-bottom (equal specificity otherwise → the
 * later generic rule would win and the line would stay). */
.peek-history-table .peek-history__row--has-trips > td {
    border-bottom: none;
    padding-bottom: 4px;
}

.peek-history__trips-row > td {
    padding: 0 12px 12px 0;
    border-bottom: 1px solid var(--border-subtle, var(--border));
}

/* Collapsible "Flight found in following trips" link → expands the trip list. */
.peek-trips-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    user-select: none;
}

.peek-trips-disclosure > summary::-webkit-details-marker {
    display: none;
}

/* Right-pointing caret, rotates down when open. */
.peek-trips-disclosure > summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

.peek-trips-disclosure[open] > summary::before {
    transform: rotate(90deg);
}

.peek-trips-disclosure > .peek-trips__list {
    margin-top: 10px;
}

.peek-history-section {
    margin-top: 32px;
}

.peek-history-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.peek-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.peek-history-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid var(--border);
}

.peek-history-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--border-subtle, var(--border));
    vertical-align: middle;
}

.peek-history-table tr:last-child td {
    border-bottom: none;
}

/* ── Roster sync nudge card ─────────────────────────────────────────────── */

.roster-sync-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
    border-radius: var(--radius);
}

.roster-sync-card__icon {
    flex-shrink: 0;
    color: var(--warning);
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.roster-sync-card__icon svg {
    width: 20px;
    height: 20px;
}

.roster-sync-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    flex: 1;
}

.roster-sync-card__msg {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text);
    flex: 1;
    min-width: 200px;
}

.roster-sync-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition);
}

.roster-sync-card__btn:hover {
    background: var(--accent-hover);
}

/* ── Superuser banner ───────────────────────────────────────────────────────── */

.superuser-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: #b91c1c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.superuser-banner__msg {
    flex: 1;
    text-align: center;
}

.superuser-banner__end {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.superuser-banner__end:hover {
    background: rgba(255,255,255,0.35);
}

/* Push app content down when banner is visible */
body:has(.superuser-banner) .app-shell {
    margin-top: 38px;
}

/* ── Support ────────────────────────────────────────────────────────────────── */

.sidebar-nav__badge {
    margin-left: auto;
    background: var(--danger, #ef4444);
    color: #fff;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 6px;
    line-height: 1.4;
}

/* Padlock on paid nav items when the user's sub is inactive — purely
   visual; the LicenseGuard redirects to /subscription if they click. */
.sidebar-nav__lock {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #94a3b8);
    opacity: 0.7;
}
.sidebar-nav__lock svg {
    width: 14px;
    height: 14px;
}
.sidebar-nav__item:hover .sidebar-nav__lock,
.sidebar-nav__item.active .sidebar-nav__lock {
    opacity: 1;
}

.support-ticket-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition);
}

.support-ticket-row:last-child {
    border-bottom: none;
}

.support-ticket-row:hover {
    background: var(--bg-secondary);
}

.support-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.support-textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

.support-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.support-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-msg {
    max-width: 85%;
}

.support-msg--user {
    align-self: flex-end;
}

.support-msg--admin {
    align-self: flex-start;
}

.support-msg__meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 4px;
}

.support-msg__sender {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.support-msg__time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.support-msg__body {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 0.875rem;
    line-height: 1.55;
    word-break: break-word;
}

.support-msg--user .support-msg__body {
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
}

.support-msg--admin .support-msg__body {
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
}

.support-msg__img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-sm);
    margin-top: 8px;
    cursor: pointer;
}

/* ── Admin pages editor ────────────────────────────────────────────────────── */

.page-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.page-card:last-child { border-bottom: none; }
.page-card__info { display: flex; flex-direction: column; gap: 2px; }
.page-card__meta { font-size: 0.8125rem; color: var(--text-muted); }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.8125rem;
}
.admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.admin-section-header h1 {
    font-size: 1.125rem;
    margin: 0;
}

.btn--sm {
    padding: 5px 12px;
    font-size: 0.8125rem;
}

/* ── Segmented control (notification prefs) ────────────────────────────────── */

.seg-control {
    display: flex;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.seg-btn {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-right: 1px solid var(--border);
    transition: background var(--transition), color var(--transition);
    user-select: none;
    white-space: nowrap;
}
.seg-btn:last-child { border-right: none; }
.seg-btn input { position: absolute; opacity: 0; width: 0; height: 0; }

.seg-btn--active {
    background: var(--accent);
    color: #fff;
}
.seg-btn:not(.seg-btn--active):not(.seg-btn--disabled):hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.seg-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.notif-row:last-of-type { border-bottom: none; }
.notif-row__text { flex: 1; min-width: 0; }
.notif-row__label { font-weight: 500; font-size: 0.875rem; margin-bottom: 2px; }
.notif-row__desc { font-size: 0.8125rem; color: var(--text-muted); }

@media (max-width: 480px) {
    .notif-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ── Site announcement banner ───────────────────────────────────────────────── */

.announcement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

.announcement--info     { background: #dbeafe; color: #1e40af; }
.announcement--warning  { background: #fef3c7; color: #92400e; }
.announcement--critical { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .announcement--info     { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .announcement--warning  { background: #3d2a00; color: #fcd34d; }
[data-theme="dark"] .announcement--critical { background: #3d0000; color: #fca5a5; }

.announcement__msg { flex: 1; }

.announcement__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 4px;
    color: inherit;
    opacity: 0.6;
    flex-shrink: 0;
}
.announcement__dismiss:hover { opacity: 1; }

/* Announcement rotator — fade transition + page indicator */
.announcement { transition: opacity 0.28s ease; }
.announcement__page {
    font-size: 0.75rem;
    opacity: 0.65;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Admin rate limits ──────────────────────────────────────────────────────── */

.rl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.rl-row:last-child { border-bottom: none; }

.rl-row__info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.rl-bucket    { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.rl-desc      { font-size: 0.75rem; color: var(--text-muted); }

.rl-row__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rl-field         { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.rl-label         { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; }
.rl-input         { width: 70px; padding: 4px 6px; font-size: 0.8125rem; text-align: center; }
.rl-toggle        { width: 16px; height: 16px; cursor: pointer; margin-top: 2px; }
.rl-field--toggle { min-width: 32px; }
.rl-updated       { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; }

/* ── Tax amendment edit page ─────────────────────────────────────────────────── */

.tax-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tax-edit-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-left: 10px;
}

.tax-edit-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 0.8125rem;
}
.tax-edit-month-link {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition);
}
.tax-edit-month-link:hover { background: var(--bg-secondary); }

.tax-edit-day {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tax-edit-day__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.tax-edit-day__label { font-weight: 600; font-size: 0.875rem; }
.tax-edit-day__actions { display: flex; gap: 6px; }
.tax-edit-empty { padding: 6px 12px; font-size: 0.8125rem; color: var(--text-muted); }

.tax-edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.tax-edit-row:last-child { border-bottom: none; }
.tax-edit-row__info { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.tax-edit-row__code { font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.tax-edit-row__times { font-size: 0.8125rem; color: var(--text-muted); }
.tax-edit-row__btns { display: flex; gap: 4px; flex-shrink: 0; }
.tax-edit-row--deleted { opacity: 0.38; }
.tax-edit-row--amended { background: color-mix(in srgb, var(--accent) 6%, var(--bg-primary)); }
.tax-edit-row--amended .tax-edit-row__code::after { content: ' ✎'; color: var(--accent); font-weight: 400; font-size: 0.75rem; }

.tax-status-note { display: block; font-size: 0.75rem; margin-top: 2px; }
.tax-status-note--deleted { color: var(--danger, #ef4444); font-style: italic; }
.tax-status-note--amended { color: var(--accent); }


/* Date column on each sector/duty row */
.tax-row-date {
    display: inline-block;
    min-width: 52px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.tax-amended-badge { color: var(--accent); font-size: 0.75rem; margin-left: 3px; }
.tax-manual-badge  { background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-left: 3px; }
.tax-dh-badge      { background: var(--text-muted); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; }

.tax-inline-form {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}
.tax-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.tax-form-row label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8125rem; flex: 1; min-width: 120px; }
.tax-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tax-clash-warn { font-size: 0.8125rem; color: var(--warning, #f59e0b); }

.tax-sector-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.8125rem;
}
.tax-sector-row input { padding: 4px 6px; font-size: 0.8125rem; }

/* Phone-only view prompt */
.phone-only { display: none; }
@media (max-width: 600px) {
    .phone-only  { display: block; }
    .desktop-only { display: none !important; }
}

.tax-edit-trip__dates { font-weight: 700; font-size: 0.875rem; margin-right: 8px; }
.tax-edit-trip__route { font-size: 0.875rem; color: var(--text-primary); margin-right: 8px; }

.tax-day-sel  { font-size: 0.8125rem; padding: 3px 4px; }
.tax-time-in  { font-size: 0.8125rem; padding: 3px 4px; width: 80px; }

/* ── PWA standalone: fullscreen, no-bounce, keyboard-aware ─────────────────── */
/*
 * These rules only apply when the app is running as an installed PWA
 * (Add to Home Screen). In a regular browser tab, display-mode is 'browser'
 * and none of these apply.
 *
 * Goals:
 *  1. Dark header extends into status bar area (black-translucent effect)
 *  2. Content sits below the status bar safe-area, not underneath it
 *  3. No elastic/bounce scroll at the page level
 *  4. Keyboard appearance shrinks the content area from the bottom — header stays pinned
 *  5. Bottom home-indicator area respected
 */

/* ── PWA scroll/layout lock ─────────────────────────────────────────────────
 * Applied via BOTH the CSS media query AND the .pwa-mode JS class (added by
 * app.js on DOMContentLoaded). The JS class is the reliable fallback for iOS
 * where @media (display-mode: standalone) can be inconsistent.
 *
 * Safe-area insets (header height, sidebar padding, bottom padding) are now
 * in the BASE rules above — env() returns 0 in regular browser so they're
 * harmless outside the PWA. Only overflow/bounce/height rules need the guard.
 * ─────────────────────────────────────────────────────────────────────────── */

@media (display-mode: standalone) {
    /* html fills the safe-area chrome (status bar top, home indicator bottom).
       Dark nav colour matches the sidebar so both sides of the bottom bar are uniform. */
    html                  { background: var(--nav-bg); }
    html, body            { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
    .app-shell            { height: 100dvh; overflow: hidden; }
    .app-body             { height: 100dvh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
    .app-content          { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .app-nav              { padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0; }
    .login-page           { height: 100dvh; overflow-y: auto; overscroll-behavior: none; padding-top: env(safe-area-inset-top); }
}

/* Tablet+ PWA: mobile header hidden at ≥768px so app-body owns all safe-area chrome.
 * padding-top/bottom on app-body filled with nav-bg → matches sidebar on both ends.
 * app-content gets explicit bg-primary so content stays light inside the dark frame.
 * padding-bottom moves from app-content to app-body so the home-indicator strip is dark. */
@media (display-mode: standalone) and (min-width: 768px) {
    .app-body    { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); background: var(--nav-bg); }
    /* max-width:100% overrides the 900px cap so bg-primary fills the full column — no dark side strips */
    .app-content { background: var(--bg-primary); padding-bottom: 24px; max-width: 100%; }
}

/* Phone PWA — frame the content with dark safe-area chrome. body bg picks
 * up nav-bg so the home-indicator strip reads as iOS native chrome rather
 * than a white bar bleeding off the bottom of the content. .app-content
 * gets explicit bg-primary so the content area itself stays the right
 * background — without this it inherits transparent through .app-body to
 * the now-dark body. */
@media (display-mode: standalone) and (max-width: 767px) {
    body         { background: var(--nav-bg); }
    .app-content { background: var(--bg-primary); }
}
@media (max-width: 767px) {
    html.pwa-mode body         { background: var(--nav-bg); }
    html.pwa-mode .app-content { background: var(--bg-primary); }
}

/* JS class fallback — identical rules, applied by app.js when navigator.standalone
   or matchMedia standalone is true. Overrides base rules via higher specificity. */
html.pwa-mode             { background: var(--nav-bg); }
html.pwa-mode,
html.pwa-mode body        { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
html.pwa-mode .app-shell  { height: 100dvh; overflow: hidden; }
html.pwa-mode .app-body   { height: 100dvh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
html.pwa-mode .app-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
html.pwa-mode .app-nav    { padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0; }
html.pwa-mode .login-page { height: 100dvh; overflow-y: auto; overscroll-behavior: none; padding-top: env(safe-area-inset-top); }

@media (min-width: 768px) {
    html.pwa-mode .app-body    { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); background: var(--nav-bg); }
    html.pwa-mode .app-content { background: var(--bg-primary); padding-bottom: 24px; }
}

/* ── Update banner — visible in both browser tabs and PWA ───────────────────
 * Stale tabs across a deploy hit the same "old assets" trap as the PWA, so
 * showing the banner in both contexts catches it for everyone. JS still
 * guards with the wasControlled snapshot to prevent first-visit false positives.
 * Override the element's inline `style="display:flex"` so the [hidden] attribute
 * works natively. */
#update-banner[hidden] { display: none !important; }
#update-banner:not([hidden]) { display: flex !important; }

/* Same trap as #update-banner: #install-card carries an inline
 * style="display:flex", which beats the UA [hidden]{display:none} rule — so
 * the card showed even in standalone (PWA) where install-card.js leaves it
 * hidden. These !important rules let the [hidden] attribute drive visibility.
 * install-card.js toggles card.hidden to reveal the iOS / Android state. */
#install-card[hidden] { display: none !important; }
#install-card:not([hidden]) { display: flex !important; }

/* ── Front-door "Where's the old eNigel gone?" modal ──────────────────────────
 * Shown on the unauthenticated login/register page. Native <dialog> element
 * (browser-supported back to ~2022 across Safari/Chrome/Firefox), opened by
 * auth-legacy-modal.js. Plain card chrome — no animation, no overlay
 * gradient; the front door is meant to be calm. */
.auth-legacy-link {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 6px 0;
}
.auth-legacy-link:hover,
.auth-legacy-link:focus-visible {
    color: var(--text);
    text-decoration-color: currentColor;
    outline: none;
}
/* ── Standard modal (.rc-modal) ──────────────────────────────────────────────
 * App-wide modal pattern used by Fleetlist popup, trip popup, crew
 * details, the front-door legacy explainer etc. Bottom-sheet on
 * mobile, centred dialog on desktop. Toggle via `hidden` attribute
 * on the wrapping .rc-modal element; backdrop and close button both
 * carry data-rc-modal-close so a single delegated handler can wire
 * dismissal in JS. Lives in app.css (not roster-calendar.css) so
 * unauthenticated pages have it too. */
.rc-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;     /* sheet slides up from the bottom */
    justify-content: center;
}
.rc-modal[hidden] { display: none; }

.rc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: rcFadeIn 0.15s ease-out;
}
.rc-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    background: var(--bg-card, var(--surface, #ffffff));
    color: var(--text, #0f172a);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 16px 20px 32px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: rcSheetUp 0.22s ease-out;
}
.rc-modal__close {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px 10px;
}
.rc-modal__body {
    margin-top: 14px;
}

@media (min-width: 768px) {
    .rc-modal           { align-items: center; }
    .rc-modal__sheet    {
        border-radius: var(--radius, 12px);
        max-height: 80vh;
        animation: rcFadeIn 0.18s ease-out;
    }
}

@keyframes rcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Front-door legacy explainer — modal body styling ───────────────────────
 * The wrapper uses the standard .rc-modal classes above. These rules
 * only style the italic-heading typography inside the body. */
.auth-legacy-body {
    font-size: 0.9375rem;
    line-height: 1.55;
    padding: 4px 6px 0;
}
.auth-legacy-body h2 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
}
.auth-legacy-body h2 + p   { margin-top: 0; }
.auth-legacy-body p + h2   { margin-top: 18px; }
.auth-legacy-body p        { margin: 0 0 12px; }

/* ── Standby status badge — shared: Staff Travel + Quick Brief ──────────────
 * Used via JS (stafftravel.js) and server-side PHP (QuickBriefController).
 * Always included in app.css so available to both apps without extra CSS loads.
 *
 * Colours: Confirmed = green, Waitlist = blue, Standby = amber, Other = muted */
.standby-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.standby-badge--confirmed { background: var(--success); color: #fff; }
.standby-badge--waitlist  { background: #3b82f6;        color: #fff; }
.standby-badge--standby   { background: var(--warning);  color: #fff; }
.standby-badge--other     { background: var(--surface);  color: var(--text-muted); border: 1px solid var(--border); }

/* ── Standby table — shared: Staff Travel + Quick Brief ─────────────────────*/
.standby-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.standby-table th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.standby-table td {
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.standby-table tr:last-child td { border-bottom: none; }

/* ── Dashboard — Fleetlist review ticker (destination card) ──────────────────
   Pure-CSS marquee. The track holds the content twice; translateX -50%
   loops seamlessly. Pause on hover so a passing title can be read.
*/
.dest-reviews {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.dest-reviews__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dest-reviews__viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.dest-reviews__track {
    display: inline-flex;
    gap: 0;
    white-space: nowrap;
    animation-name: dest-reviews-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}
.dest-reviews__viewport:hover .dest-reviews__track { animation-play-state: paused; }
.dest-reviews__group {
    font-size: 0.8125rem;
    color: var(--text-muted);
    padding-right: 24px;
}
@keyframes dest-reviews-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .dest-reviews__track { animation: none; }
}

/* ── Crew tablet ─────────────────────────────────────────────────────────────
 * Wherever a 5-letter crew code is displayed enriched with rank + name via
 * FlightCrew::displayFor() / displayManyByCode(). Reusable across Dashboard,
 * Logbook, Staff Travel, Quick Brief — single look so the future click-for-
 * live-Fleetlist modal wires up in one place. */
.crew-tablet {
    display: inline-block;
    padding: 2px 8px;
    background: var(--surface-raised, var(--surface));
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.crew-tablet:hover {
    background: var(--surface, var(--bg-secondary));
    border-color: var(--accent, var(--border));
}

/* Action variant — used wherever a tablet IS a button (e.g. the
 * "Fleetlist details" tablet on each QB crew card). Resets the
 * <button> defaults and gives it the cursor + accent border on hover. */
button.crew-tablet {
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.crew-tablet--action {
    color: var(--accent, var(--text));
    font-weight: 500;
}
.crew-tablet--action:hover,
.crew-tablet--action:focus-visible {
    background: var(--accent, var(--bg-secondary));
    color: #fff;
    border-color: var(--accent, var(--border));
    outline: none;
}

/* ── Flight-card loads detail (shared by Staff Travel + Quick Brief) ──────────
   "Tap to see full loads detail" link + the modal tables (Booked / Derived). */
.fc-loads-link {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 10px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fc-loads-link:hover { color: var(--accent-hover); }

/* Live onloading pill — appears on Staff Travel flight cards within 2h
 * of STD. Opens the onloading modal (check-in countdown + standby
 * list). Same .rc-modal sheet shape as the loads modal. */
.fc-onload-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 4px 0 10px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.fc-onload-pill:hover {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.fc-onload-pill::before {
    content: '●';
    color: var(--success, #16a34a);
    font-size: 0.625rem;
    animation: fc-onload-pulse 1.4s ease-in-out infinite;
}
@keyframes fc-onload-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.fc-onload-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.fc-onload-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fc-onload-countdown {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.fc-onload-countdown--closed {
    color: var(--danger, #c0392b);
}
.fc-onload-countdown__when {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 18px;
}
.fc-onload-totals {
    display: flex;
    gap: 18px;
    margin: 0 0 18px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.fc-onload-totals__item {
    display: flex;
    flex-direction: column;
}
.fc-onload-totals__num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.fc-onload-totals__lbl {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.fc-onload-list-h {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fc-onload-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 12px 0;
}
.fc-onload-footer {
    margin: 18px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-style: italic;
}

.fc-loads-modal-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 14px;
}
.fc-loads-table-wrap { margin-bottom: 16px; }
.fc-loads-table-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.fc-loads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.fc-loads-table th,
.fc-loads-table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: center;
}
.fc-loads-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
}
.fc-loads-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary, var(--text-muted));
    background: var(--bg-secondary);
    white-space: nowrap;
}
.fc-loads-note {
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--text-muted));
    margin: 0 0 12px;
}
.fc-loads-legend {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 4px 0 0;
}

/* ── Staff-travel onload/cabin code tablet + breakdown modal ──────────────────
   Clickable code in the standby list → .rc-modal breakdown (staff-codes.js). */
.sc-code-tablet {
    font: inherit;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface-raised, var(--surface));
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.sc-code-tablet:hover,
.sc-code-tablet:focus-visible {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    outline: none;
}

.sc-modal-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 14px;
}
.sc-modal-code {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 5px;
    background: var(--accent);
    color: #fff;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
}
.sc-section { margin-bottom: 16px; }
.sc-section:last-of-type { margin-bottom: 0; }
.sc-section__head {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--accent);
}
.sc-section__head span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}
.sc-row {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--border);
}
.sc-row:first-of-type { border-top: none; }
.sc-row__code {
    flex: 0 0 auto;
    min-width: 26px;
    font-weight: 700;
    color: var(--accent);
}
.sc-row__desc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text);
}
.sc-none {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ── Next-trip dashboard card ──────────────────────────────────────────────
   Single timeline replacing the old "Next flight + Next duty + Destination
   info" trio. Sectors / layovers / home blocks render one after the other
   in time order; in-progress events surface at the top. Same .card surface
   as everything else on /home, with an accent stripe between blocks. */

.trip-card {
    margin-bottom: 16px;
    padding: 20px 24px;
}

.trip-card__kicker {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.trip-card__before {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: var(--surface-raised, var(--surface));
    border-left: 3px solid var(--warning, #d49a00);
    border-radius: 4px;
    font-size: 0.8125rem;
}

.trip-card__before-kicker {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.trip-card__before-text { font-weight: 600; }

.trip-card__before-when {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.trip-card__header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.trip-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.trip-card__number {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised, var(--surface));
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    letter-spacing: 0.04em;
}

/* Report stamp sits between the trip header and the events; Clear stamp
   anchors the bottom of the card. Standalone rows now — the old
   .trip-card__stamps cluster is gone. align-items:baseline so the muted
   local-time span (smaller font) sits on the same baseline as the bold
   UTC time — visually flush instead of riding high. */
.trip-card__stamp {
    font-size: 0.8125rem;
    color: var(--text);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0;
    margin: 0;
}

/* Hairline dividers along the timeline — Report, each event, Clear. The
   .trip-card__events container drops its gap; per-event padding + the
   border-top do the rhythm. Consistent treatment across stamps + events
   keeps the "timeline" feeling uniform. */
.trip-card__event + .trip-card__event,
.trip-card__stamp + .trip-card__events,
.trip-card__events + .trip-card__stamp,
.trip-card__stamp + .trip-card__stamp {
    border-top: 1px solid var(--border);
}

.trip-card__stamp-label {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 50px;
}

.trip-card__stamp-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trip-card__stamp-date { color: var(--text-muted); }

.trip-card__events {
    display: flex;
    flex-direction: column;
    /* Spacing comes from per-event padding + the hairline divider; no
       flex gap so the lines sit flush against the next event's padding. */
    gap: 0;
}

.trip-card__empty {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

/* Sector — flight number + dep/arr times in a single horizontal line with
   the Quick Brief tablet (when within 72h) on the right. */

.trip-card__event {
    /* No horizontal padding — events should align flush with the rest of
       the card's content (trip header, stamps, kicker). Vertical padding
       kept for breathing room. */
    padding: 10px 0;
    border-radius: 6px;
    background: var(--surface-raised, transparent);
}

.trip-card__event--sector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trip-card__sector-line {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.trip-card__sector-fn {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trip-card__sector-leg {
    color: var(--text);
    line-height: 1.4;
}

.trip-card__sector-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trip-card__local {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 400;
}

.trip-card__sector-arrow {
    color: var(--text-muted);
    padding: 0 2px;
}

.trip-card__qb-btn {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--accent-soft, rgba(0, 113, 188, 0.12));
    color: var(--accent, #0071bc);
    border: 1px solid var(--accent-border, rgba(0, 113, 188, 0.3));
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.trip-card__qb-btn:hover { background: var(--accent-soft-hover, rgba(0, 113, 188, 0.2)); }
.trip-card__qb-btn:active { transform: translateY(1px); }

/* Layover / home — same raised-surface chrome as sectors. Accent stripe
   removed per user request — the headline + iata tag already differentiate
   the block type without a coloured edge. */

.trip-card__layover-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.trip-card__layover-headline {
    font-size: 0.9375rem;
    font-weight: 600;
}

.trip-card__layover-iata {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface, transparent);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.trip-card__layover-row {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 4px 0 0;
    color: var(--text);
}

/* "Current weather in {city}" / "Forecast for {city} on {date}" — small
   muted lead-in above the icon/temp/wind line so the reader knows what
   timeframe the data represents. */
.trip-card__weather-headline {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin: 4px 0 0;
}

.trip-card__layover-row b { font-weight: 600; color: var(--text-muted); }

.trip-card__hotel-addr,
.trip-card__fx-note {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.trip-card__pickup {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    font-variant-numeric: tabular-nums;
}

/* DocuNet deep-link pills — same square DocuNet tablet as .qb-defect__ddg
   on Quick Brief / .qb-briefing-pill on QB airfield briefings, so the
   crew brain treats them as the same kind of action. */
.trip-card__brief-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
}
.trip-card__brief-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent-bg, rgba(10, 77, 140, 0.12));
    color: var(--accent, #0a4d8c);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.1;
    border: 1px solid color-mix(in srgb, var(--accent, #0a4d8c) 25%, transparent);
}
.trip-card__brief-pill:hover,
.trip-card__brief-pill:focus-visible {
    background: color-mix(in srgb, var(--accent, #0a4d8c) 18%, transparent);
    text-decoration: none;
}
.trip-card__brief-pill-arrow {
    font-size: 0.75rem;
    line-height: 1;
}

/* Ground-only fallback (no trip in the window) — small variant of the
   card with one-line label and date. */

.trip-card--ground .trip-card__ground-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.9375rem;
}

.trip-card--ground .trip-card__ground-label { font-weight: 600; }
.trip-card--ground .trip-card__ground-when  { color: var(--text-muted); font-size: 0.8125rem; }

/* ── NextFlight tour schedule list + plane-position rail ──────────────────────
   Vertical list of the airframe's sectors; dotted rail on the right with a
   downward plane marking where the aircraft is along the schedule (by time). */
.nf-tour { position: relative; padding-left: 30px; }
.nf-tour__row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    font-size: 0.875rem;
    transition: opacity 0.2s;
}
.nf-tour__row.is-done { opacity: 0.45; }   /* completed sectors look "done" */
.nf-tour__date {
    flex: 0 0 64px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8125rem;
}
.nf-tour__leg { font-variant-numeric: tabular-nums; }
.nf-tour__row.is-ours .nf-tour__leg { font-weight: 700; color: var(--accent); }
.nf-tour__marker {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
}
/* Progress rail on the LEFT — solid above the plane (flown), dashed below. */
.nf-tour__rail { position: absolute; left: 12px; width: 0; }
.nf-tour__rail-solid  { position: absolute; left: 0; width: 0; border-left: 2px solid var(--accent); }
.nf-tour__rail-dashed { position: absolute; left: 0; width: 0; border-left: 2px dashed var(--text-muted); opacity: 0.6; }
.nf-tour__plane {
    position: absolute;
    left: 0;
    transform: translate(-50%, -50%);
    color: var(--accent);
    line-height: 0;
}
.nf-tour__plane svg { display: block; }

/* ICAO location-sign style stand box (near-black panel, airport yellow text). */
.nf-stand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    background: #16181c;
    border: 1px solid #2a2d33;
    border-radius: 7px;
    padding: 7px 14px;
}
.nf-stand__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #f5c518;
    opacity: 0.85;
}
.nf-stand__num {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #f5c518;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}