/*
 * GDF AirCore — Product Experience refinement layer (2026-07-11)
 *
 * A restrained evolution of FLIGHT DECK: clearer hierarchy, calmer density,
 * stronger interaction affordances and intentional responsive data views.
 * No workflow, permission, public-display or persistence behaviour lives here.
 */

:root {
    --aircore-canvas: #edf0ea;
    --aircore-paper: #fbfcf9;
    --aircore-paper-raised: #ffffff;
    --aircore-ink: #101a14;
    --aircore-rule: #cbd3c8;
    --aircore-rule-quiet: #e1e6df;
    --aircore-command: #0a2114;
    --aircore-command-raised: #12331f;
    --aircore-gold: #e3b522;
    --aircore-focus: 0 0 0 3px rgba(227, 181, 34, .48);
    --aircore-header-h: 68px;
    --aircore-context-h: 40px;
    --aircore-shell-offset: calc(var(--aircore-header-h) + var(--aircore-context-h));
    --aircore-content: 1560px;
    --aircore-readable: 68ch;
    --font-sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
    --font-display: "Avenir Next Condensed", "Arial Narrow", "Segoe UI", sans-serif;
}

html { background: var(--aircore-canvas); }

body {
    background-color: var(--aircore-canvas);
    background-image:
        linear-gradient(rgba(16, 42, 27, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 27, .018) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--aircore-ink);
    font-family: var(--font-sans);
}

/* Command shell: identity first, utilities quiet, active location unmistakable. */
.fd-bar {
    height: var(--aircore-header-h);
    min-height: var(--aircore-header-h);
    padding-inline: clamp(14px, 2.1vw, 34px);
    background: var(--aircore-command);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.fd-ident { min-width: 188px; gap: 10px; }
.fd-ident img { width: 32px; height: 32px; object-fit: contain; }
.fd-wordmark { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; }
.fd-ident-name { letter-spacing: .055em; white-space: nowrap; }
.fd-ident-name strong { font-weight: 800; }
.fd-ident-sub { opacity: 1; color:#e9cd6f; letter-spacing: .16em; font-size: .64rem; font-weight:700; }

.fd-tabs a {
    min-height: 46px;
    padding-inline: 14px;
    border-inline: 1px solid transparent;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.fd-tabs a:hover {
    background: rgba(255, 255, 255, .055);
    border-inline-color: rgba(255, 255, 255, .07);
}

.fd-tabs a.active {
    background: var(--aircore-command-raised);
    color: #fff;
}

.topbar {
    min-height: var(--aircore-context-h);
    height: var(--aircore-context-h);
    padding-inline: clamp(16px, 2.4vw, 38px);
    border-bottom-color: var(--aircore-rule);
    background: rgba(251, 252, 249, .97);
    top: var(--aircore-header-h);
}

.aircore-shell-ready .topbar > div:first-child { min-height: 0; }
.aircore-shell-ready .topbar h1 { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.aircore-shell-ready.aircore-has-page-header .topbar h1 { display: none; }
.aircore-shell-ready .topbar .fd-sections { margin-left: 0; }
.aircore-header-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.aircore-header-tools .topbar-search,
.aircore-header-tools .topbar-bell {
    min-width: 40px;
    min-height: 40px;
    border-color: transparent;
    background: transparent;
    color: rgba(255,255,255,.88);
}
.aircore-header-tools .topbar-search { width: 40px; padding: 0; justify-content: center; }
.aircore-header-tools .topbar-search-text,
.aircore-header-tools .topbar-search-kbd { display: none; }
.aircore-header-tools .topbar-search:hover,
.aircore-header-tools .topbar-bell:hover { background: rgba(255,255,255,.08); color:#fff; }
.aircore-header-tools .bell-popover { color: var(--aircore-ink); }
.mobile-nav-toggle { color: #fff; background: transparent; border-color: transparent; }
.mobile-nav-toggle:hover { background: rgba(255,255,255,.08); }
.mobile-nav-toggle .jags-icon { width: 22px; height: 22px; }
.user-menu-button { border-left-color: rgba(255,255,255,.1); }
.fd-avatar-bezel { padding: 0; border-color: transparent; border-radius: 50%; background: transparent; }
.fd-avatar-bezel .jags-avatar { border-radius: 50%; }

.content {
    width: min(100%, var(--aircore-content));
    margin-inline: auto;
    padding: clamp(20px, 2.4vw, 38px);
}

/* Page purpose and hierarchy. Descriptions never become full-width walls. */
.page-header {
    position: relative;
    margin: 0 0 clamp(20px, 2.1vw, 30px);
    padding: 0 0 15px 15px;
    border-bottom: 1px solid var(--aircore-rule);
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 2px auto 18px 0;
    width: 3px;
    background: var(--aircore-gold);
}

.page-header h2 {
    max-width: 22ch;
    margin-top: 5px;
    font-family: var(--font-sans);
    font-size: clamp(1.7rem, 2.3vw, 2.35rem);
    font-weight: 720;
    line-height: 1.05;
    text-transform: none;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.page-header p,
.section-desc,
.card > p.muted { max-width: var(--aircore-readable); text-wrap: pretty; }

.eyebrow {
    color: var(--muted-strong);
    font-family: var(--font-mono);
    letter-spacing: .11em;
}

/* Surfaces: group only related information; make interactive surfaces obvious. */
.card:not(.card-hero) {
    background: var(--aircore-paper);
    border-color: var(--aircore-rule-quiet);
    transition: border-color 150ms ease, background-color 150ms ease;
}

a.card:not(.card-hero):hover {
    background: var(--aircore-paper-raised);
    border-color: var(--border-strong);
}

.section-title {
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--aircore-rule-quiet);
}

.section-title h2,
.section-title h3 {
    letter-spacing: .015em;
    text-wrap: balance;
}

.btn,
button,
input,
select,
textarea { transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 80ms ease; }

.btn:hover { transform: translateY(-1px); }
.btn:active, button:active { transform: translateY(1px); }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--aircore-focus);
}

.btn-primary, .btn-gold { font-weight: 700; letter-spacing: .025em; }

/* Dense records: stable scanning lines and restrained row feedback. */
.table-wrap,
.tbl-wrap { border-color: var(--aircore-rule); background: var(--aircore-paper); }

.tbl thead th,
table thead th {
    background: #e7ebe4;
    color: #354239;
    letter-spacing: .07em;
}

.tbl tbody tr:nth-child(even),
table.data-table tbody tr:nth-child(even) { background: rgba(220, 226, 217, .18); }

.tbl tbody tr:hover,
table.data-table tbody tr:hover { background: rgba(227, 181, 34, .075); }

.tbl td, .tbl th { vertical-align: middle; }
.mono, time, [data-time], .stat .value { font-variant-numeric: tabular-nums slashed-zero; }

/* Notices signal type with an edge and label; colour is never the only cue. */
.alert, .notice, .gdf-demo-notice { border-left-width: 3px; }
.gdf-demo-notice { background: #f4efd8; color: #5a4810; }

.aircore-section-nav {
    position: sticky;
    top: var(--aircore-shell-offset);
    z-index: 40;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    margin: 0 0 22px;
    border: 1px solid var(--aircore-rule);
    background: rgba(251, 252, 249, .97);
    box-shadow: 0 7px 18px rgba(10, 33, 20, .055);
    scrollbar-width: thin;
}
.aircore-section-nav__label,
.aircore-section-nav a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 8px 12px;
    white-space: nowrap;
}
.aircore-section-nav__label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--aircore-command);
    color: #fff;
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.aircore-section-nav a {
    border-right: 1px solid var(--aircore-rule-quiet);
    color: var(--muted-strong);
    font-size: .75rem;
    font-weight: 650;
    text-decoration: none;
}
.aircore-section-nav a:hover,
.aircore-section-nav a:focus-visible { background: #f4efd8; color: var(--text-strong); }

/* Connected mission lifecycle — compact context, never a blocking wizard. */
.aircore-flow {
    display: grid;
    grid-template-columns: minmax(145px, .7fr) minmax(0, 4fr);
    gap: 0;
    margin: 0 0 22px;
    border: 1px solid var(--aircore-rule);
    background: var(--aircore-paper);
}

.aircore-flow__label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px 14px;
    border-right: 1px solid var(--aircore-rule);
    background: var(--aircore-command);
    color: #fff;
    font-family: var(--font-display);
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.aircore-flow__label small {
    color: rgba(255, 255, 255, .64);
    font-family: var(--font-sans);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}

.aircore-flow ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aircore-flow li { position: relative; min-width: 0; border-right: 1px solid var(--aircore-rule-quiet); }
.aircore-flow li:last-child { border-right: 0; }
.aircore-flow li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--aircore-rule);
    border-right: 1px solid var(--aircore-rule);
    background: var(--aircore-paper);
    transform: translateY(-50%) rotate(45deg);
}
.aircore-flow li:last-child::after { display: none; }

.aircore-flow a {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    color: var(--muted-strong);
    text-decoration: none;
}
.aircore-flow a:hover { background: #f1f4ef; color: var(--text-strong); }
.aircore-flow a span { font-size: .77rem; font-weight: 700; letter-spacing: .035em; }
.aircore-flow a small { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.aircore-flow .is-current { box-shadow: inset 0 -3px var(--aircore-gold); }
.aircore-flow .is-current a { background: #f4efd8; color: var(--text-strong); }

/* Mobile is a different operating surface, not a squeezed desktop. */
@media (max-width: 900px) {
    :root { --aircore-header-h: 62px; --aircore-context-h: 0px; }
    body { background-image: none; }
    .fd-bar { height:auto; min-height:var(--aircore-header-h); padding-inline: 10px; }
    .fd-ident { min-width: 0; }
    .fd-ident-name { font-size: .72rem; }
    .fd-ident-sub { display: inline; font-size: .55rem; }
    .fd-ident img { width: 29px; height: 29px; }
    .aircore-shell-ready .topbar { display: none; }
    .aircore-header-tools { margin-left: auto; }
    .aircore-header-tools .topbar-search,
    .aircore-header-tools .topbar-bell { width: 40px; min-width:40px; height:40px; }
    .fd-clock, .fd-page-title { display:none; }
    .content { padding: 18px 14px var(--mobile-bottom-nav-clearance); }
    .page-header { margin-bottom: 16px; padding: 0 0 12px 12px; }
    .page-header::before { bottom: 14px; }
    .page-header h2 { max-width: none; font-size: clamp(1.55rem, 7vw, 1.9rem); }
    .page-header p { font-size: .92rem; line-height: 1.45; }
    .card { padding: 16px; }
    .section-title { align-items: flex-start; }
    /* The mobile bottom nav is now the floating command dock (styled in
       layout.php). Its former white-bar overrides lived here and are gone —
       the dock is a self-contained deep-green surface. */
    .aircore-flow {
        display: block;
        overflow: hidden;
        margin-bottom: 18px;
    }
    .aircore-flow__label {
        min-height: 44px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-right: 0;
    }
    .aircore-flow ol {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .aircore-flow li { flex: 0 0 108px; scroll-snap-align: start; }
    .aircore-flow a { min-height: 56px; }
    .aircore-section-nav { position:relative; top:auto; margin-inline: -14px; border-inline: 0; }
}

@media (max-width: 520px) {
    .fd-ident { gap:7px; }
    .fd-ident-name { letter-spacing:.035em; }
    .aircore-header-tools { gap:0; }
    .user-menu { margin-left:0; }
}

@media (forced-colors: active) {
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px; box-shadow:none !important; }
}

/* Command-dock quick-actions sheet — bottom sheet raised by the dock's (+)
   button when a role has multiple primary actions. Operational-paper content
   surface (dark text), distinct from the deep-green command dock. Backdrop
   9090 / sheet 9100 mirror the drawer pair; toasts (9500) and cmdk (9300)
   stay above. Hidden until .is-open is toggled by aircore-experience.js. */
html.dock-sheet-open,
body.dock-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
}
.dock-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9090;
    background: rgba(10, 33, 20, .46);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-med, 220ms) ease, visibility var(--motion-med, 220ms) ease;
}
.dock-sheet-backdrop.is-open { opacity: 1; visibility: visible; }
.dock-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9100;
    margin-inline: auto;
    max-width: 480px;
    background: var(--aircore-paper, #fbfcf9);
    color: var(--aircore-ink, #101a14);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 40px rgba(6, 18, 11, .28);
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform var(--motion-med, 220ms) var(--ease-premium, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.dock-sheet.is-open { transform: translateY(0); }
.dock-sheet__grip {
    width: 40px; height: 4px;
    margin: 4px auto 10px;
    border-radius: 2px;
    background: var(--aircore-rule, #cbd3c8);
}
.dock-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 6px;
}
.dock-sheet__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--muted-strong, #354239);
}
.dock-sheet__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--aircore-rule-quiet, #e1e6df);
    border-radius: 10px;
    background: transparent;
    color: var(--aircore-ink, #101a14);
    cursor: pointer;
}
.dock-sheet__close:focus-visible { outline: none; box-shadow: var(--aircore-focus); }
.dock-sheet__actions { display: flex; flex-direction: column; gap: 4px; }
.dock-sheet__action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 12px;
    color: var(--aircore-ink, #101a14);
    text-decoration: none;
    font-weight: 650;
    font-size: 1rem;
}
.dock-sheet__action .jags-icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--aircore-command, #0a2114); }
.dock-sheet__action .ic-spark { fill: var(--aircore-gold, #e3b522); }
.dock-sheet__action:hover,
.dock-sheet__action:active { background: rgba(227, 181, 34, .12); }
.dock-sheet__action:focus-visible { outline: none; box-shadow: var(--aircore-focus); }
@media (prefers-reduced-motion: reduce) {
    .dock-sheet,
    .dock-sheet-backdrop { transition: none !important; }
}
@media print { .dock-sheet, .dock-sheet-backdrop { display: none !important; } }

@media (max-width: 700px) {
    .table-wrap,
    .tbl-wrap {
        border-inline: 0;
        margin-inline: -16px;
        border-radius: 0;
    }
    .form-actions.sticky {
        background: rgba(251, 252, 249, .98);
        border-color: var(--aircore-rule);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-tabs a, .card, .btn, button, input, select, textarea { transition: none !important; }
    .btn:hover, .btn:active, button:active { transform: none; }
}

@media print {
    body { background: #fff !important; }
    .content { width: 100%; max-width: none; padding: 0; }
}

/* ============================================================
   Cross-document View Transitions (I2 — navigation feel)
   ------------------------------------------------------------
   Native MPA cross-fade. The opt-in lives ONLY in this stylesheet,
   which is linked by the staff shell and the auth blank shell — NOT
   by the dark display/wallboard shells or the self-contained kiosk
   pages. So the transition is auto-scoped to in-app navigations and
   can never fire to/from a wallboard. Browsers without cross-document
   support ignore this whole block and fall back to the shell's
   .is-navigating fade + top progress bar. No JS required for the core.
   ============================================================ */
@view-transition { navigation: auto; }

/* Persistent command shell — the top command bar, the desktop context
   bar and the mobile command dock hold steady across the swap instead
   of cross-fading with the page body. Identical name on both documents
   means the browser keeps the element in place (no flash). Each name is
   rendered at most once per page, so there is never a duplicate-name
   collision that would abort the transition. */
.fd-bar                        { view-transition-name: gdf-command-bar; }
.topbar                        { view-transition-name: gdf-context-bar; }
.mobile-bottom-nav.mobile-dock { view-transition-name: gdf-command-dock; }

/* Only the page body animates: the old view fades out, the new view
   fades in with a subtle 6px rise (the same settle as the shell's
   jagsPageIn entrance). Medium duration, premium easing — restrained,
   never bouncy. */
@keyframes gdf-vt-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
::view-transition-group(root) { animation-duration: var(--motion-med, 220ms); }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--motion-med, 220ms);
    animation-timing-function: var(--ease-premium, cubic-bezier(.2, .8, .2, 1));
}
::view-transition-new(root) { animation-name: gdf-vt-rise; }

/* Named shell parts hold — they must not animate. */
::view-transition-old(gdf-command-bar),  ::view-transition-new(gdf-command-bar),
::view-transition-old(gdf-context-bar),  ::view-transition-new(gdf-context-bar),
::view-transition-old(gdf-command-dock), ::view-transition-new(gdf-command-dock) {
    animation: none;
}

/* On VT-capable browsers the cross-fade IS the transition, so retire the
   shell's JS opacity dim (.is-navigating) and the jagsPageIn entrance to
   avoid a double animation. @supports is resolved before first paint, so
   the entrance is suppressed from frame one — a JS class toggle would
   race the CSS animation and cannot guarantee that. Non-VT browsers keep
   both effects (this @supports test is false there). aircore-experience
   loads after the shell CSS, so these equal-specificity rules win the
   cascade with no !important. The named-selector caveat (Chrome 111–125
   support the property but not cross-doc @view-transition, so they lose
   the entrance and navigate instantly) is accepted — navigation stays
   correct and that band is vanishing. */
@supports (view-transition-name: none) {
    body.is-navigating .main > .content { opacity: 1; }
    .main > .content                    { animation: none; }
}

/* Respect reduced motion — snap instantly, no view-transition animation. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* Instant tap feedback on nav controls. A full page transition can't cover
   the moment between tap and swap; a fast press state makes touch feel
   immediate. The command dock already presses (.mobile-dock__item:active
   in the shell), so only the domain tabs and lifecycle ribbon need it. */
@media (prefers-reduced-motion: no-preference) {
    .fd-tabs a:active,
    .aircore-flow a:active { transform: scale(.97); }
}
.fd-tabs a,
.aircore-flow a,
.mobile-dock__item { -webkit-tap-highlight-color: transparent; }