/* ==========================================================================
   FL510 — EXTERNAL MEMBER PORTAL components (E0 kit, 2026-07-22)
   --------------------------------------------------------------------------
   The mockup (external-design-final.html) components that are NOT part of the shared
   portal shell (portal-shell.css). Everything here is scoped under `.external-shell`,
   which also carries `.portal-shell` (shared chrome) and `.ds` (design-system base), so
   the `--ps-*` shell locals and `--ds-*` semantic tokens are both in scope.

   TOKEN DISCIPLINE: no forked palette. Colors resolve to the SEMANTIC `--ds-*` tier
   (light/dark + manual [data-theme] swap in one place) or the shell's `--ps-*` locals.
   PER-TAIL HUES DO NOT COME FROM `--ds-aircraft-N`, AND `--ex-accent` HAS NO PRODUCER
   (corrected 2026-07-30). A tail's hue is the operator's PICKED colour, else the colour
   DERIVED from its registration, resolved by Services/DesignSystemPalette.Resolve and
   emitted by Razor as the inline `--ds-ac-l`/`--ds-ac-d` pair plus the `.ds-tail` marker
   class. The `--ex-accent`/`--ex-accent-on` properties used below are DEAD: their only
   producer was Services/AircraftAccentPalette.cs, which was injected nowhere
   (docs/LANDMINES.md "Dead code that looks alive") and was DELETED on 2026-07-31 on the
   operator's clearance, along with the appsettings config table it read. Nothing produces
   these two properties now, so every `var(--ex-accent, …)` site below always renders its
   fallback. Removing the `var(--ex-accent, …)` call sites themselves is still open work in
   BACKLOG 111 — not done here, and inert either way.

   TERMINOLOGY (byte-exact, mobile-design-standards.md): TTAF (airframe) · TIS (air) ·
   Engine (billing meter). No other meter vocabulary — no synonyms — in any partial.

   E0 ships the full component kit; E1 wires only the Home surface (feed + gate + persona
   + coming-soon). The record/gate/ring/envelope components are the foundation later
   deploys (Currency, My Flights, booking) render against.
   ========================================================================== */

.external-shell {
    /* severity locals (semantic tier) + per-component washes via color-mix */
    --ex-good: var(--ds-ok);        --ex-good-wash: var(--ps-good-wash);
    --ex-warn: var(--ds-warn);      --ex-warn-wash: var(--ps-warn-wash);
    --ex-crit: var(--ds-danger);    --ex-crit-wash: var(--ps-crit-wash);
    --ex-info: var(--ds-info);      --ex-info-wash: var(--ps-info-wash);
}

/* ============ home dashboard body ============ */
.external-shell .ex-home { max-width: 760px; margin: 0 auto; }
.external-shell .ex-welcome { padding: 8px 4px 18px; }
.external-shell .ex-welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.external-shell .ex-welcome h2 { margin: 0; font-size: 22px; font-weight: 660; letter-spacing: -.02em; flex: 1; min-width: 0; }
.external-shell .ex-welcome p { margin: 5px 0 0; font-size: 14px; color: var(--ps-ink-3); line-height: 1.5; }

.external-shell .ex-blocklabel {
    display: flex; align-items: center; gap: 9px; margin: 18px 4px 12px;
    font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ps-ink-3);
}
.external-shell .ex-blocklabel .ex-ct {
    font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 750; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 99px; background: var(--ex-warn-wash); color: var(--ex-warn);
}
.external-shell .ex-blocklabel .ex-ct.is-clear { background: var(--ex-good-wash); color: var(--ex-good); }
.external-shell .ex-blocklabel .ex-rule { flex: 1; height: 1px; background: var(--ps-line); }

/* ============ prioritised action feed (the "Needs you" list) ============ */
.external-shell .ex-actions { display: flex; flex-direction: column; gap: 10px; }
.external-shell .ex-actionrow {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 15px 15px 15px 18px; text-decoration: none; color: inherit;
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card); overflow: hidden;
    transition: transform .16s var(--ps-ease), border-color .16s, box-shadow .16s;
}
.external-shell .ex-actionrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ps-ink-faint); }
.external-shell .ex-actionrow.sev-warn::before { background: var(--ex-warn); }
.external-shell .ex-actionrow.sev-info::before { background: var(--ex-info); }
.external-shell .ex-actionrow.sev-good::before { background: var(--ex-good); }
.external-shell .ex-actionrow.sev-crit::before { background: var(--ex-crit); }
.external-shell .ex-actionrow:hover { transform: translateY(-2px); border-color: var(--ps-line-strong); box-shadow: var(--ps-shadow-pop); }
.external-shell .ex-actionrow:active { transform: translateY(0); }
.external-shell .ex-actionrow .ex-aicon {
    width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: var(--ps-surface-2); color: var(--ps-ink-2); border: 1px solid var(--ps-line);
}
.external-shell .ex-actionrow.sev-warn .ex-aicon { background: var(--ex-warn-wash); color: var(--ex-warn); border-color: transparent; }
.external-shell .ex-actionrow.sev-info .ex-aicon { background: var(--ex-info-wash); color: var(--ex-info); border-color: transparent; }
.external-shell .ex-actionrow.sev-good .ex-aicon { background: var(--ex-good-wash); color: var(--ex-good); border-color: transparent; }
.external-shell .ex-actionrow.sev-crit .ex-aicon { background: var(--ex-crit-wash); color: var(--ex-crit); border-color: transparent; }
.external-shell .ex-actionrow .ex-aicon svg { width: 21px; height: 21px; }
.external-shell .ex-actionrow .ex-abody { flex: 1; min-width: 0; }
.external-shell .ex-actionrow .ex-atop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.external-shell .ex-actionrow .ex-atitle { font-size: 15.5px; font-weight: 640; letter-spacing: -.01em; }
.external-shell .ex-actionrow .ex-asub { font-size: 13px; color: var(--ps-ink-3); margin-top: 3px; line-height: 1.45; }
.external-shell .ex-atag {
    display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 750;
    letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; flex: none;
    background: var(--ps-surface-2); color: var(--ps-ink-3); border: 1px solid var(--ps-line);
}
.external-shell .ex-atag.is-warn { background: var(--ex-warn-wash); color: var(--ex-warn); border-color: transparent; }
.external-shell .ex-atag.is-info { background: var(--ex-info-wash); color: var(--ex-info); border-color: transparent; }
.external-shell .ex-atag.is-good { background: var(--ex-good-wash); color: var(--ex-good); border-color: transparent; }
.external-shell .ex-atag.is-crit { background: var(--ex-crit-wash); color: var(--ex-crit); border-color: transparent; }
.external-shell .ex-actionrow .ex-go { color: var(--ps-ink-faint); flex: none; transition: transform .16s var(--ps-ease), color .16s; }
.external-shell .ex-actionrow:hover .ex-go { transform: translateX(3px); color: var(--ps-primary); }
.external-shell .ex-actionrow .ex-go svg { width: 19px; height: 19px; }

.external-shell .ex-allclear {
    display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-radius: var(--ps-radius);
    background: var(--ex-good-wash); border: 1px solid color-mix(in srgb, var(--ex-good) 22%, transparent);
    color: var(--ps-ink); font-size: 13.5px; line-height: 1.45;
}
.external-shell .ex-allclear svg { width: 20px; height: 20px; color: var(--ex-good); flex: none; }
.external-shell .ex-allclear b { color: var(--ex-good); font-weight: 700; }

/* ============ book CTA (gated by the server BookingGate verdict) ============ */
.external-shell .ex-bookcta {
    display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 16px 18px; border-radius: var(--ps-radius);
    background: var(--ps-primary); color: var(--ps-primary-on); text-decoration: none; box-shadow: var(--ps-shadow-card);
    transition: transform .16s var(--ps-ease), filter .16s, box-shadow .16s, background .16s;
}
.external-shell .ex-bookcta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: var(--ps-shadow-pop); }
.external-shell .ex-bookcta:active { transform: translateY(0); }
.external-shell .ex-bookcta .ex-bicon { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.external-shell .ex-bookcta .ex-bicon svg { width: 21px; height: 21px; }
.external-shell .ex-bookcta .ex-bbody { flex: 1; min-width: 0; }
.external-shell .ex-bookcta .ex-bt { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.external-shell .ex-bookcta .ex-bs { display: block; font-size: 12.5px; opacity: .85; margin-top: 2px; }
.external-shell .ex-bookcta .ex-go { flex: none; }
.external-shell .ex-bookcta .ex-go svg { width: 19px; height: 19px; }
/* locked = server verdict CanBook == false: a non-link, honest "resolve these first" state */
.external-shell .ex-bookcta.is-locked { background: var(--ps-surface); color: var(--ps-ink-2); border: 1px solid var(--ps-line); box-shadow: var(--ps-shadow-card); cursor: default; }
.external-shell .ex-bookcta.is-locked:hover { filter: none; transform: none; background: var(--ps-surface-2); box-shadow: var(--ps-shadow-card); }
.external-shell .ex-bookcta.is-locked .ex-bicon { background: var(--ex-warn-wash); color: var(--ex-warn); }
.external-shell .ex-bookcta.is-locked .ex-bt { color: var(--ps-ink); }
.external-shell .ex-bookcta.is-locked .ex-bs { color: var(--ex-warn); opacity: 1; font-weight: 650; }

/* ============ persona segmented toggle (capability-gated, CSS-only / no-JS) ============
   Driven by sibling radio inputs (.ex-persona-radio) + the :checked general-sibling combinator,
   so the persona swap works with JavaScript OFF — same discipline as the no-JS nav sheet. */
.external-shell .ex-persona-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.external-shell .ex-persona { display: inline-flex; background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: 12px; padding: 4px; gap: 4px; flex: none; }
.external-shell .ex-persona label {
    display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--ps-ink-3);
    padding: 7px 14px; border-radius: 9px; cursor: pointer; min-height: 36px;
    transition: background .15s, color .15s, box-shadow .15s;
}
.external-shell .ex-persona label svg { width: 14px; height: 14px; }
.external-shell #ex-pr:checked ~ * .ex-persona label[for="ex-pr"],
.external-shell #ex-po:checked ~ * .ex-persona label[for="ex-po"],
.external-shell #ex-pi:checked ~ * .ex-persona label[for="ex-pi"] {
    background: var(--ps-surface); color: var(--ps-primary); box-shadow: var(--ps-shadow-card);
}
/* grids: hidden by default, revealed by the matching persona radio */
.external-shell .ex-personagrid { display: none; }
.external-shell #ex-pr:checked ~ .ex-personagrid.ex-grid-renter { display: grid; }
.external-shell #ex-po:checked ~ .ex-personagrid.ex-grid-owner { display: grid; }
.external-shell #ex-pi:checked ~ .ex-personagrid.ex-grid-instructor { display: grid; }
/* single-persona accounts get no radios at all → the lone grid shows unconditionally */
.external-shell .ex-personagrid.is-solo { display: grid; }

/* ============ coming-soon card (honest placeholder tracks) ============ */
.external-shell .ex-soon {
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px;
    background: var(--ps-surface); border: 1px dashed var(--ps-line-strong); border-radius: var(--ps-radius);
}
.external-shell .ex-soon .ex-chead { display: flex; align-items: flex-start; gap: 12px; }
.external-shell .ex-soon .ex-glyph {
    width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: var(--ps-surface-2); color: var(--ps-ink-3);
}
.external-shell .ex-soon .ex-glyph svg { width: 19px; height: 19px; }
.external-shell .ex-soon .ex-ctitle { flex: 1; min-width: 0; }
.external-shell .ex-soon h3 { margin: 1px 0 0; font-size: 16px; font-weight: 640; letter-spacing: -.01em; }
.external-shell .ex-soon .ex-soonbadge { font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--ex-info-wash); color: var(--ex-info); flex: none; }
.external-shell .ex-soon p { margin: 0; font-size: 13px; color: var(--ps-ink-3); line-height: 1.5; }
.external-shell .ex-soon .ex-notify {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; text-decoration: none;
    font-size: 12.5px; font-weight: 650; color: var(--ps-primary); padding: 8px 12px; min-height: 40px;
    border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ps-primary) 26%, transparent); background: var(--ps-primary-wash);
}
.external-shell .ex-soon .ex-notify svg { width: 15px; height: 15px; }

/* ============ owner statement card (E5 foundation; honest — figures render only when backed) ============ */
.external-shell .ex-stmt {
    position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden;
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow-card);
    transition: transform .16s var(--ps-ease), border-color .16s, box-shadow .16s;
}
.external-shell .ex-stmt:hover { transform: translateY(-2px); border-color: var(--ps-line-strong); box-shadow: var(--ps-shadow-pop); }
.external-shell .ex-stmt .ex-accentbar { height: 4px; width: 100%; display: flex; }
.external-shell .ex-stmt .ex-accentbar i { flex: 1; display: block; }
.external-shell .ex-stmt .ex-stmt-top { padding: 16px 17px 4px; display: flex; align-items: flex-start; gap: 13px; }
.external-shell .ex-stmt .ex-seal { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--ps-primary-wash); color: var(--ps-primary); font-weight: 750; font-size: 13px; }
.external-shell .ex-stmt .ex-etitle { flex: 1; min-width: 0; }
.external-shell .ex-stmt .ex-ekind { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ps-ink-3); }
.external-shell .ex-stmt h3 { margin: 2px 0 0; font-size: 18px; font-weight: 660; letter-spacing: -.015em; }
.external-shell .ex-stmt .ex-esub { font-size: 12.5px; color: var(--ps-ink-3); margin-top: 2px; }

/* ============ net verdict banner (credit vs balance-due) ============ */
.external-shell .ex-netverdict { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid; }
.external-shell .ex-netverdict .ex-nv-i { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.external-shell .ex-netverdict .ex-nv-i svg { width: 19px; height: 19px; }
.external-shell .ex-netverdict .ex-nv-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.external-shell .ex-netverdict .ex-nv-k { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.external-shell .ex-netverdict .ex-nv-v { font-family: var(--ps-mono); font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.external-shell .ex-netverdict.is-credit { background: var(--ex-good-wash); border-color: color-mix(in srgb, var(--ex-good) 26%, transparent); }
.external-shell .ex-netverdict.is-credit .ex-nv-i { background: var(--ex-good); color: #fff; }
.external-shell .ex-netverdict.is-credit .ex-nv-k, .external-shell .ex-netverdict.is-credit .ex-nv-v { color: var(--ex-good); }
.external-shell .ex-netverdict.is-due { background: var(--ex-crit-wash); border-color: color-mix(in srgb, var(--ex-crit) 26%, transparent); }
.external-shell .ex-netverdict.is-due .ex-nv-i { background: var(--ex-crit); color: #fff; }
.external-shell .ex-netverdict.is-due .ex-nv-k, .external-shell .ex-netverdict.is-due .ex-nv-v { color: var(--ex-crit); }

/* ============ readiness gate (two-tier: must-fix vs CFI-curable) ============ */
.external-shell .ex-gate { display: flex; flex-direction: column; gap: 8px; }
.external-shell .ex-gaterow {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    background: var(--ps-surface); border: 1px solid var(--ps-line);
}
.external-shell .ex-gaterow .ex-gi { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--ps-surface-2); color: var(--ps-ink-3); }
.external-shell .ex-gaterow .ex-gi svg { width: 17px; height: 17px; }
.external-shell .ex-gaterow .ex-gb { flex: 1; min-width: 0; }
.external-shell .ex-gaterow .ex-gt { font-size: 13.5px; font-weight: 640; }
.external-shell .ex-gaterow .ex-gd { font-size: 12px; color: var(--ps-ink-3); margin-top: 1px; line-height: 1.45; }
.external-shell .ex-gaterow.is-ok .ex-gi { background: var(--ex-good-wash); color: var(--ex-good); }
.external-shell .ex-gaterow.is-mustfix { border-color: color-mix(in srgb, var(--ex-crit) 30%, transparent); }
.external-shell .ex-gaterow.is-mustfix .ex-gi { background: var(--ex-crit-wash); color: var(--ex-crit); }
.external-shell .ex-gaterow.is-curable .ex-gi { background: var(--ex-warn-wash); color: var(--ex-warn); }

/* ============ currency status ring (SVG donut) ============ */
.external-shell .ex-curwrap { display: flex; align-items: center; gap: 18px; padding: 15px 16px; background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: 14px; flex-wrap: wrap; }
.external-shell .ex-ringwrap { position: relative; width: 112px; height: 112px; flex: none; }
.external-shell .ex-ringsvg { width: 112px; height: 112px; transform: rotate(-90deg); }
.external-shell .ex-ring-track { fill: none; stroke: var(--ps-surface); stroke-width: 11; }
.external-shell .ex-ring-seg { fill: none; stroke-width: 11; stroke-linecap: round; }
.external-shell .ex-ring-seg.is-good { stroke: var(--ex-good); }
.external-shell .ex-ring-seg.is-warn { stroke: var(--ex-warn); }
.external-shell .ex-ring-seg.is-crit { stroke: var(--ex-crit); }
.external-shell .ex-ringctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.external-shell .ex-ringctr .ex-rc-s { font-size: 15px; font-weight: 720; letter-spacing: -.01em; color: var(--ex-good); }
.external-shell .ex-ringctr .ex-rc-s.is-warn { color: var(--ex-warn); }
.external-shell .ex-ringctr .ex-rc-sub { font-size: 10.5px; color: var(--ps-ink-3); font-weight: 600; }
.external-shell .ex-curlist { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 9px; }
.external-shell .ex-curitem { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.external-shell .ex-curitem .ex-cd { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.external-shell .ex-curitem .ex-cd.is-good { background: var(--ex-good); }
.external-shell .ex-curitem .ex-cd.is-warn { background: var(--ex-warn); }
.external-shell .ex-curitem .ex-cd.is-crit { background: var(--ex-crit); }
.external-shell .ex-curitem .ex-cn { flex: 1; color: var(--ps-ink-2); font-weight: 550; min-width: 0; }
.external-shell .ex-curitem .ex-cv { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ps-ink); flex: none; }
.external-shell .ex-curitem .ex-cv.is-warn { color: var(--ex-warn); }

/* ============ reservation-envelope + leg record (My Flights / completed / owner) ============ */
.external-shell .ex-envelope {
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card); overflow: hidden;
    border-left: 4px solid var(--ex-accent, var(--ps-line-strong));
}
.external-shell .ex-envelope .ex-env-head { padding: 13px 15px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--ps-line); }
.external-shell .ex-envelope .ex-env-tail { font-family: var(--ps-mono); font-size: 14px; font-weight: 750; }
.external-shell .ex-leg { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--ps-line); }
.external-shell .ex-leg:last-child { border-bottom: none; }
.external-shell .ex-leg .ex-legwin { font-size: 12.5px; color: var(--ps-ink-2); font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.external-shell .ex-leg .ex-legmeter { font-family: var(--ps-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* meter triad — Engine (billing) · TIS (air) · TTAF (airframe). Byte-exact labels. */
.external-shell .ex-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ps-line); border: 1px solid var(--ps-line); border-radius: 12px; overflow: hidden; }
.external-shell .ex-meter { background: var(--ps-surface); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.external-shell .ex-meter .ex-ml { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ps-ink-3); }
.external-shell .ex-meter .ex-mv { font-family: var(--ps-mono); font-size: 15px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.external-shell .ex-meter .ex-mv small { font-size: 10px; font-weight: 600; color: var(--ps-ink-3); }
.external-shell .ex-meter .ex-mv.is-empty { color: var(--ps-ink-faint); }

/* ============ 5-node lifecycle timeline (per-tail hue) ============ */
.external-shell .ex-jbar { list-style: none; margin: 0; padding: 0; display: flex; }
.external-shell .ex-jn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; min-width: 0; }
.external-shell .ex-jn::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--ps-line); z-index: 0; }
.external-shell .ex-jn:first-child::before { display: none; }
.external-shell .ex-jd { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-surface); border: 2px solid var(--ps-line); color: var(--ps-ink-faint); }
.external-shell .ex-jd svg { width: 14px; height: 14px; }
.external-shell .ex-jl { font-size: 9.5px; font-weight: 650; line-height: 1.15; color: var(--ps-ink-3); max-width: 62px; }
.external-shell .ex-jn.is-done .ex-jd { background: var(--ex-accent, var(--ex-good)); border-color: var(--ex-accent, var(--ex-good)); color: var(--ex-accent-on, #fff); }
.external-shell .ex-jn.is-done::before, .external-shell .ex-jn.is-active::before { background: var(--ex-accent, var(--ex-good)); }
.external-shell .ex-jn.is-active .ex-jd { background: var(--ps-primary); border-color: var(--ps-primary); color: var(--ps-primary-on); box-shadow: 0 0 0 4px var(--ps-primary-wash); }
.external-shell .ex-jn.is-active .ex-jl { color: var(--ps-primary); font-weight: 800; }

/* ============ collapsed-by-default detail cards (operator standing pattern) ============ */
.external-shell .ex-accard { background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: 14px; overflow: hidden; }
.external-shell .ex-accard > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 14px 16px; min-height: 44px;
    font-size: 14.5px; font-weight: 640;
}
.external-shell .ex-accard > summary::-webkit-details-marker { display: none; }
.external-shell .ex-accard > summary .ex-chev { margin-left: auto; color: var(--ps-ink-faint); transition: transform .18s var(--ps-ease); }
.external-shell .ex-accard[open] > summary .ex-chev { transform: rotate(90deg); }
.external-shell .ex-accard .ex-acbody { padding: 0 16px 15px; display: flex; flex-direction: column; gap: 13px; }
.external-shell .ex-stackcard { background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.external-shell .ex-stackcard h4 { margin: 0; font-size: 14.5px; font-weight: 640; }

/* ============ guided section lead (info/good/warn/crit) ============ */
.external-shell .ex-section { padding: 18px 4px; display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; width: 100%; }
.external-shell .ex-lead { display: flex; gap: 12px; padding: 15px 16px; border-radius: 14px; background: var(--ex-info-wash); border: 1px solid color-mix(in srgb, var(--ex-info) 20%, transparent); }
.external-shell .ex-lead .ex-li { color: var(--ex-info); flex: none; margin-top: 1px; }
.external-shell .ex-lead .ex-li svg { width: 19px; height: 19px; display: block; }
.external-shell .ex-lead .ex-lt { font-size: 13.5px; line-height: 1.55; color: var(--ps-ink); }
.external-shell .ex-lead .ex-lt b { color: var(--ex-info); font-weight: 700; }
.external-shell .ex-lead.is-good { background: var(--ex-good-wash); border-color: color-mix(in srgb, var(--ex-good) 22%, transparent); }
.external-shell .ex-lead.is-good .ex-li, .external-shell .ex-lead.is-good .ex-lt b { color: var(--ex-good); }
.external-shell .ex-lead.is-warn { background: var(--ex-warn-wash); border-color: color-mix(in srgb, var(--ex-warn) 24%, transparent); }
.external-shell .ex-lead.is-warn .ex-li, .external-shell .ex-lead.is-warn .ex-lt b { color: var(--ex-warn); }
.external-shell .ex-lead.is-crit { background: var(--ex-crit-wash); border-color: color-mix(in srgb, var(--ex-crit) 26%, transparent); }
.external-shell .ex-lead.is-crit .ex-li, .external-shell .ex-lead.is-crit .ex-lt b { color: var(--ex-crit); }

/* ==========================================================================
   E2 + E3 sheet components (2026-07-22) — the focused feed-target + re-skin surfaces
   (acknowledgments, gov-ID capture, insurance confirm, request-a-CFI, currency, profile).
   All scoped under .external-shell; all colors resolve to --ps-* / --ex-*.
   ========================================================================== */

/* ---- module head + section scaffolding for a focused sub-page ---- */
.external-shell .ex-modhead { display: flex; align-items: center; gap: 12px; padding: 6px 4px 4px; }
.external-shell .ex-modhead .ex-mglyph { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--ps-primary-wash); color: var(--ps-primary); }
.external-shell .ex-modhead .ex-mglyph svg { width: 20px; height: 20px; }
.external-shell .ex-modhead .ex-mt { min-width: 0; }
.external-shell .ex-modhead h1, .external-shell .ex-modhead h2 { margin: 1px 0 0; font-size: 20px; font-weight: 660; letter-spacing: -.02em; }
.external-shell .ex-sectlbl { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ps-ink-3); margin: 6px 2px 0; }
.external-shell .ex-note { font-size: 12.5px; color: var(--ps-ink-3); line-height: 1.5; }
.external-shell .ex-note b { color: var(--ps-ink-2); }
.external-shell .ex-actrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- buttons (external kit; --ps-* tokens; 44px targets) ---- */
.external-shell .ex-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 650; text-decoration: none;
    cursor: pointer; border: 1px solid var(--ps-line); background: var(--ps-surface); color: var(--ps-ink);
    transition: background .15s var(--ps-ease), border-color .15s, transform .12s, filter .15s;
}
.external-shell .ex-btn svg { width: 17px; height: 17px; }
.external-shell .ex-btn:hover { background: var(--ps-surface-2); border-color: var(--ps-line-strong); }
.external-shell .ex-btn:active { transform: translateY(1px); }
.external-shell .ex-btn.block { width: 100%; }
.external-shell .ex-btn.solid { background: var(--ps-primary); color: var(--ps-primary-on); border-color: transparent; }
.external-shell .ex-btn.solid:hover { filter: brightness(1.05); background: var(--ps-primary); }
.external-shell .ex-btn.good { background: var(--ex-good); color: #fff; border-color: transparent; }
.external-shell .ex-btn.good:hover { filter: brightness(1.05); }
.external-shell .ex-btn:disabled, .external-shell .ex-btn.is-disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; }

/* ---- selectable choice chips (request-a-CFI "what do you need") ---- */
.external-shell .ex-choice {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; border-radius: 12px;
    font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ps-ink-2);
    background: var(--ps-surface); border: 1px solid var(--ps-line); transition: border-color .15s, background .15s, color .15s;
}
.external-shell .ex-choice:hover { border-color: var(--ps-line-strong); }
.external-shell .ex-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.external-shell .ex-choice.is-selected,
.external-shell .ex-choice:has(input:checked) { border-color: var(--ps-primary); color: var(--ps-primary); background: var(--ps-primary-wash); box-shadow: inset 0 0 0 1px var(--ps-primary); }
.external-shell .ex-choice:focus-within { outline: 3px solid var(--ds-accent); outline-offset: 2px; }

/* ---- key/value rows (verify, profile, request-a-CFI preferences) ---- */
.external-shell .ex-kv { display: flex; flex-direction: column; }
.external-shell .ex-kvline { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ps-line); }
.external-shell .ex-kvline:last-child { border-bottom: none; }
.external-shell .ex-kvline .ex-k { font-size: 13px; color: var(--ps-ink-3); flex: none; }
.external-shell .ex-kvline .ex-v { font-size: 13.5px; font-weight: 620; color: var(--ps-ink); text-align: right; min-width: 0; }
.external-shell .ex-kvline .ex-v.mono { font-family: var(--ps-mono); font-variant-numeric: tabular-nums; }

/* ---- status pill (good/warn/crit/info/muted) with inline glyph ---- */
.external-shell .ex-status {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1;
    padding: 5px 10px; border-radius: 999px; background: var(--ps-surface-2); color: var(--ps-ink-3); border: 1px solid var(--ps-line);
}
.external-shell .ex-status svg { width: 14px; height: 14px; }
.external-shell .ex-status.is-good { background: var(--ex-good-wash); color: var(--ex-good); border-color: transparent; }
.external-shell .ex-status.is-warn { background: var(--ex-warn-wash); color: var(--ex-warn); border-color: transparent; }
.external-shell .ex-status.is-crit { background: var(--ex-crit-wash); color: var(--ex-crit); border-color: transparent; }
.external-shell .ex-status.is-info { background: var(--ex-info-wash); color: var(--ex-info); border-color: transparent; }

/* ---- gov-ID dashed capture target (idcard) ---- */
.external-shell .ex-idcard {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
    padding: 26px 18px; border-radius: 16px; cursor: pointer;
    background: var(--ps-surface-2); border: 2px dashed var(--ps-line-strong);
    transition: border-color .15s, background .15s;
}
.external-shell .ex-idcard:hover { border-color: var(--ps-primary); background: var(--ps-primary-wash); }
.external-shell .ex-idcard .ex-camring { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-surface); color: var(--ps-primary); border: 1px solid var(--ps-line); }
.external-shell .ex-idcard .ex-camring svg { width: 24px; height: 24px; }
.external-shell .ex-idcard .ex-it { font-size: 15px; font-weight: 640; color: var(--ps-ink); }
.external-shell .ex-idcard .ex-is { font-size: 12.5px; color: var(--ps-ink-3); line-height: 1.45; max-width: 320px; }
.external-shell .ex-idcard input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.external-shell .ex-idcard.is-done { border-style: solid; border-color: color-mix(in srgb, var(--ex-good) 40%, transparent); background: var(--ex-good-wash); }
.external-shell .ex-idcard.is-done .ex-camring { color: var(--ex-good); }
.external-shell .ex-idslot { display: flex; flex-direction: column; gap: 10px; }
.external-shell .ex-idslot .ex-idslot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.external-shell .ex-idslot .ex-idslot-head .ex-idside { font-size: 13px; font-weight: 700; color: var(--ps-ink-2); }

/* ---- security assurance row ---- */
.external-shell .ex-securow { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ps-ink-3); }
.external-shell .ex-securow svg { width: 16px; height: 16px; flex: none; color: var(--ex-good); }

/* ---- acknowledgment card (E2c) ---- */
.external-shell .ex-ackcard { background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow-card); overflow: hidden; }
.external-shell .ex-ackcard .ex-ah { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px 10px; }
.external-shell .ex-ackcard .ex-aicn { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--ex-warn-wash); color: var(--ex-warn); }
.external-shell .ex-ackcard .ex-aicn svg { width: 19px; height: 19px; }
.external-shell .ex-ackcard .ex-at { flex: 1; min-width: 0; }
.external-shell .ex-ackcard .ex-atl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.external-shell .ex-ackcard .ex-atl h4 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.external-shell .ex-ackcard .ex-ameta { font-size: 12px; color: var(--ps-ink-3); margin-top: 2px; }
.external-shell .ex-ackcard .ex-ab { padding: 0 15px 12px; font-size: 13.5px; line-height: 1.55; color: var(--ps-ink-2); }
.external-shell .ex-ackcard .ex-af { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-top: 1px solid var(--ps-line); background: var(--ps-surface-2); }
.external-shell .ex-ackcheck { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ps-ink); cursor: pointer; }
.external-shell .ex-ackcheck input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--ps-primary); }

/* ---- currency detail rows (E3a) — reuses the ring from the E0 kit ---- */
.external-shell .ex-currgrid { display: flex; flex-direction: column; gap: 8px; }
.external-shell .ex-currow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ps-surface); border: 1px solid var(--ps-line); }
.external-shell .ex-currow.attn { border-color: color-mix(in srgb, var(--ex-warn) 30%, transparent); }
.external-shell .ex-currow .ex-cicn { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--ps-surface-2); color: var(--ps-ink-3); }
.external-shell .ex-currow.attn .ex-cicn { background: var(--ex-warn-wash); color: var(--ex-warn); }
.external-shell .ex-currow .ex-cicn svg { width: 17px; height: 17px; }
.external-shell .ex-currow .ex-cbody { flex: 1; min-width: 0; }
.external-shell .ex-currow .ex-cttl { font-size: 14px; font-weight: 640; }
.external-shell .ex-currow .ex-csub { font-size: 12px; color: var(--ps-ink-3); margin-top: 1px; line-height: 1.4; }

/* ---- profile / forms on the shell (E3c) ---- */
.external-shell .ex-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
@media (min-width: 620px) { .external-shell .ex-form-grid.is-two { grid-template-columns: 1fr 1fr; } }
.external-shell .ex-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.external-shell .ex-alert.is-good { background: var(--ex-good-wash); color: var(--ex-good); border: 1px solid color-mix(in srgb, var(--ex-good) 24%, transparent); }
.external-shell .ex-alert.is-crit { background: var(--ex-crit-wash); color: var(--ex-crit); border: 1px solid color-mix(in srgb, var(--ex-crit) 26%, transparent); }
.external-shell .ex-alert svg { width: 18px; height: 18px; flex: none; }
.external-shell .ex-field-error { display: block; font-size: 12px; color: var(--ex-crit); margin-top: 4px; }
.external-shell .ex-val-summary { margin: 0; }
.external-shell .ex-val-summary ul { margin: 0; padding-left: 18px; }

/* ---- notifications list (E3d) ---- */
.external-shell .ex-notiflist { display: flex; flex-direction: column; gap: 10px; }
.external-shell .ex-notifrow { display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px; background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow-card); }
.external-shell .ex-notifrow.is-unread { border-left: 3px solid var(--ps-primary); }
.external-shell .ex-notifrow .ex-nfi { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--ps-surface-2); color: var(--ps-ink-3); }
.external-shell .ex-notifrow .ex-nfi svg { width: 18px; height: 18px; }
.external-shell .ex-notifrow.is-unread .ex-nfi { background: var(--ps-primary-wash); color: var(--ps-primary); }
.external-shell .ex-notifrow .ex-nfb { flex: 1; min-width: 0; }
.external-shell .ex-notifrow .ex-nfhead { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.external-shell .ex-notifrow .ex-nft { font-size: 14.5px; font-weight: 640; }
.external-shell .ex-notifrow .ex-nfd { font-size: 11px; color: var(--ps-ink-faint); flex: none; }
.external-shell .ex-notifrow .ex-nfs { font-size: 13px; color: var(--ps-ink-3); margin-top: 3px; line-height: 1.45; }
.external-shell .ex-notifrow .ex-nfact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.external-shell .ex-inlineform { display: inline; }

/* ==========================================================================
   EXTERNAL UX E4a + E4b — the SCHEDULE surface and the BOOKING form.
   --------------------------------------------------------------------------
   Mobile-first: every rule below is the ~390px layout; the only widening is
   the two @media blocks at the end. Every interactive target is >= 44px.
   Colors come from the --ps-* / --ex-* locals already defined above (which in
   turn resolve to the design-system tokens) — no forked palette, and per-tail
   hues always come through the ONE seam (DesignSystemPalette.Resolve → inline
   --ds-ac-l/--ds-ac-d + .ds-tail; picked colour, else registration-derived) so
   the calendar grid, the legend swatch and the aircraft picker can never
   disagree. NOT --ds-aircraft-N: that palette is superseded reference only.

   The calendar GRID itself is styled by calendar-grid.css under the .ds scope
   and is deliberately NOT restyled here: the external and internal calendars
   are the same component, and forking its CSS would silently un-share them.
   ========================================================================== */

.external-shell .ex-schedule { display: flex; flex-direction: column; gap: 14px; padding: 16px 4px 28px; max-width: 860px; margin: 0 auto; width: 100%; }
.external-shell .ex-schedule .ex-sectlbl { margin-top: 6px; }

/* ---- "happening now" hero (renders only when a real flight is out) ---- */
.external-shell .ex-nowhero {
    display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--ps-radius);
    background: var(--ex-good-wash); border: 1px solid color-mix(in srgb, var(--ex-good) 30%, transparent);
    text-decoration: none; color: var(--ps-ink); min-height: 44px;
    transition: transform .16s var(--ps-ease), box-shadow .16s;
}
.external-shell .ex-nowhero:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow-pop); }
.external-shell .ex-nowdot {
    width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ex-good);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ex-good) 22%, transparent);
}
.external-shell .ex-nowbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.external-shell .ex-nowkick { font-size: 10.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--ex-good); }
.external-shell .ex-nowtitle { font-size: 15.5px; font-weight: 660; letter-spacing: -.01em; }
.external-shell .ex-nowsub { font-size: 12.5px; color: var(--ps-ink-3); }

/* ---- calendar wrapper + top chrome row ---- */
.external-shell .ex-calwrap {
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card); padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 10px;
}
.external-shell .ex-caltop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.external-shell .ex-caltop .ds-cal-viewtoggle { flex: 1; min-width: 0; }
.external-shell .ex-filterbtn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--ps-line); background: var(--ps-surface-2); color: var(--ps-ink-2);
    font-size: 13.5px; font-weight: 650; text-decoration: none; flex: none; position: relative;
}
.external-shell .ex-filterbtn:hover { border-color: var(--ps-line-strong); }
.external-shell .ex-filterbtn svg { width: 17px; height: 17px; }
.external-shell .ex-filterdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ps-primary); flex: none; }

/* ---- availability-mode toggle (E4e) — same shape as the filter button, so the two read as a pair ---- */
.external-shell .ex-availbtn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--ps-line); background: var(--ps-surface-2); color: var(--ps-ink-2);
    font-size: 13.5px; font-weight: 650; text-decoration: none; flex: none;
}
.external-shell .ex-availbtn:hover { border-color: var(--ps-line-strong); }
.external-shell .ex-availbtn.is-on { border-color: var(--ps-primary); color: var(--ps-primary); background: var(--ps-primary-wash); }
.external-shell .ex-availbtn svg { width: 17px; height: 17px; }

/* ==========================================================================
   AVAILABILITY MODE (E4e) — per-aircraft open-slot cards, mobile-first.
   Every slot row is a >= 44px tap target and wraps rather than scrolling
   sideways at 390px. Per-tail hues come from the one seam — the operator's picked
   colour, else the registration-derived one (DesignSystemPalette.Resolve → inline
   --ds-ac-l/--ds-ac-d + .ds-tail), never --ds-aircraft-N and never a forked
   palette — and nothing here touches calendar-grid.css.
   ========================================================================== */
.external-shell .ex-avpanel { display: flex; flex-direction: column; gap: 10px; }
.external-shell .ex-avtitle { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ps-ink); }
.external-shell .ex-avlist { display: flex; flex-direction: column; gap: 11px; }
.external-shell .ex-avcard {
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card); overflow: hidden;
}
.external-shell .ex-avhead {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 14px; border-bottom: 1px solid var(--ps-line);
}
.external-shell .ex-avtail { font-size: 14px; font-weight: 720; letter-spacing: -.01em; }
.external-shell .ex-avmeta { font-size: 11.5px; color: var(--ps-ink-3); flex: 1; min-width: 0; }
.external-shell .ex-avcount { font-size: 11.5px; font-weight: 700; color: var(--ps-primary); flex: none; font-variant-numeric: tabular-nums; }
.external-shell .ex-avcount.is-none { color: var(--ps-ink-faint); }
.external-shell .ex-slot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px;
    padding: 11px 14px; border-bottom: 1px solid var(--ps-line);
    text-decoration: none; color: var(--ps-ink); transition: background .12s;
}
.external-shell .ex-slot:last-child { border-bottom: none; }
.external-shell .ex-slot:hover { background: var(--ps-surface-2); }
.external-shell .ex-slotrange { font-size: 13.5px; font-weight: 680; flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.external-shell .ex-slotdur { font-size: 11.5px; color: var(--ps-ink-3); flex: none; font-variant-numeric: tabular-nums; }
.external-shell .ex-slot .ex-go { color: var(--ps-ink-faint); flex: none; display: inline-flex; }
.external-shell .ex-slot .ex-go svg { width: 16px; height: 16px; }
.external-shell .ex-avnone { margin: 0; padding: 13px 14px; font-size: 12.5px; color: var(--ps-ink-faint); }
.external-shell .ex-avmin { margin: 0; padding: 9px 14px 11px; font-size: 11px; color: var(--ps-ink-faint); }
/* BACKLOG 84 — a window ANOTHER renter is holding. It is a <div>, not an <a>: not bookable right now.
   Colour is NOT the sole cue (the row carries the words "Held while someone finishes booking — until
   <time>"), so this only needs to read as inert rather than as a tappable slot. */
.external-shell .ex-slot.is-held { cursor: default; background: var(--ps-surface-2); }
.external-shell .ex-slot.is-held:hover { background: var(--ps-surface-2); }
.external-shell .ex-slot.is-held .ex-slotrange { color: var(--ps-ink-3); }
/* BACKLOG 84 — the booking form's hold panel. Flat flow, one column: it sits inside the form between
   the time pickers and "who's flying", and must stack cleanly at the 390px phone viewport. */
.external-shell .ex-holdblock { display: flex; flex-direction: column; gap: 8px; }
.external-shell .ex-holdlist { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ps-ink-3); }
.external-shell .ex-holdlist li { margin: 2px 0; }

/* Agenda "book this day" affordance (external-only; the internal surface passes no URL). */
.ds .ds-agenda__book {
    align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
    border-radius: 12px; background: var(--ds-accent); color: var(--ds-accent-on);
    font-size: 13.5px; font-weight: 650; text-decoration: none;
}
.ds .ds-agenda__book:hover { filter: brightness(1.05); }

/* ---- per-tail legend ---- */
.external-shell .ex-taillegend { gap: 8px; }
.external-shell .ex-swatch-all {
    background: linear-gradient(135deg, var(--ds-aircraft-1), var(--ds-aircraft-3), var(--ds-aircraft-5));
}

/* ---- "your reservations" rows ---- */
.external-shell .ex-reslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.external-shell .ex-resrow {
    display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--ps-radius);
    background: var(--ps-surface); border: 1px solid var(--ps-line); box-shadow: var(--ps-shadow-card); flex-wrap: wrap;
}
.external-shell .ex-resrow.is-cancelled { opacity: .62; }
.external-shell .ex-resrow.is-cancelled .ex-restail { text-decoration: line-through; }
.external-shell .ex-resmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ps-ink); min-height: 44px; justify-content: center; }
.external-shell .ex-restail { font-size: 14.5px; font-weight: 640; letter-spacing: -.01em; }
.external-shell .ex-reswhen { font-size: 12.5px; color: var(--ps-ink-3); }
.external-shell .ex-resroute { font-size: 12px; color: var(--ps-ink-faint); }
.external-shell .ex-resactions { display: flex; gap: 8px; flex: none; }

/* ---- filter bottom sheet (same :target contract as the portal sheet) ---- */
.portal-shell #ext-schedule-filter.ps-sheet {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 90vh;
    border-radius: 20px 20px 0 0; box-shadow: var(--ps-shadow-sheet);
    transform: translateY(100%); visibility: hidden;
    transition: transform .34s var(--ps-ease), visibility 0s linear .34s;
    will-change: transform;
}
.portal-shell #ext-schedule-filter.ps-sheet.is-open,
.portal-shell #ext-schedule-filter.ps-sheet:target {
    transform: translateY(0); visibility: visible;
    transition: transform .34s var(--ps-ease), visibility 0s;
}
body:has(.portal-shell #ext-schedule-filter:target) .portal-shell .ps-scrim { opacity: 1; visibility: visible; }
.portal-shell #ext-schedule-filter .ps-sheet-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 10px;
}
.external-shell .ex-filterrows, .portal-shell .ex-filterrows { display: flex; flex-direction: column; gap: 8px; }
.portal-shell .ex-filterrow {
    display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 14px; border-radius: 12px;
    background: var(--ps-surface-2); border: 1px solid var(--ps-line); text-decoration: none; color: var(--ps-ink-2);
    font-size: 14px; font-weight: 600;
}
.portal-shell .ex-filterrow:hover { border-color: var(--ps-line-strong); }
.portal-shell .ex-filterrow.is-on { border-color: var(--ps-primary); color: var(--ps-primary); background: var(--ps-primary-wash); }
.portal-shell .ex-filterlbl { flex: 1; min-width: 0; }
.portal-shell .ex-filterform { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

/* ==========================================================================
   BOOKING FORM (E4b)
   ========================================================================== */
.external-shell .ex-book .ex-modhead { margin-bottom: 2px; }
.external-shell .ex-bookform { display: flex; flex-direction: column; gap: 14px; }
.external-shell .ex-req { color: var(--ex-crit); font-weight: 800; }

/* Native controls, 16px text so iOS Safari never zooms on focus. */
.external-shell .ex-input {
    width: 100%; font-size: 16px; color: var(--ps-ink); background: var(--ps-surface);
    border: 1px solid var(--ps-line-strong); border-radius: 11px; padding: 12px 13px; min-height: 48px; outline: none;
}
.external-shell .ex-input:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
.external-shell .ex-kv > .ex-k { font-size: 12.5px; font-weight: 700; color: var(--ps-ink-2); margin-bottom: 6px; display: block; }
.external-shell .ex-kv > .ex-note { margin-top: 5px; }
.external-shell .ex-whoflying .ex-choice { flex: 1 1 auto; justify-content: center; }

/* Acknowledgment / toggle checkbox rows — the whole row is the target. */
.external-shell .ex-ackcheck {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border-radius: 12px;
    background: var(--ps-surface-2); border: 1px solid var(--ps-line);
    font-size: 13px; line-height: 1.5; color: var(--ps-ink-2); cursor: pointer; min-height: 44px;
}
.external-shell .ex-ackcheck:has(input:checked) { border-color: var(--ps-primary); background: var(--ps-primary-wash); }
.external-shell .ex-ackcheck input { width: 22px; height: 22px; accent-color: var(--ps-primary); flex: none; cursor: pointer; margin-top: 1px; }
.external-shell .ex-ackblock { display: flex; flex-direction: column; gap: 6px; }

/* Cost-preview lines. Tabular numerals so the figures line up. */
.external-shell .ex-billline {
    display: flex; align-items: center; gap: 13px; padding: 13px 15px;
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: 13px;
}
.external-shell .ex-billline .ex-bm { flex: 1; min-width: 0; }
.external-shell .ex-billline .ex-bk { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ps-ink-3); }
.external-shell .ex-billline .ex-bv { font-family: var(--ps-mono); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* The book-ahead ("required to check out") gate tier — distinct from must-fix and from curable, so
   the renter can tell "this stops the booking" from "this stops the flight" at a glance. */
.external-shell .ex-gaterow.is-checkout { border-color: color-mix(in srgb, var(--ex-info) 34%, transparent); }
.external-shell .ex-gaterow.is-checkout .ex-gi { background: var(--ex-info-wash); color: var(--ex-info); }
.external-shell .ex-gaterow .ex-gtier { display: block; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; color: var(--ps-ink-faint); }
.external-shell .ex-gaterow.is-mustfix .ex-gtier { color: var(--ex-crit); }
.external-shell .ex-gaterow.is-curable .ex-gtier { color: var(--ex-warn); }
.external-shell .ex-gaterow.is-checkout .ex-gtier { color: var(--ex-info); }
.external-shell .ex-gaterow .ex-gact {
    flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px;
    font-size: 12.5px; font-weight: 700; color: var(--ps-primary); text-decoration: none;
}
.external-shell .ex-gaterow .ex-gact svg { width: 14px; height: 14px; }
.external-shell .ex-gaterow .ex-gnote { flex: none; font-size: 11.5px; color: var(--ps-ink-faint); max-width: 40%; }

/* Sticky submit foot — the ONE next action stays reachable without scrolling back. */
.external-shell .ex-bookfoot {
    position: sticky; bottom: 0; z-index: 2; margin-top: 6px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ps-bg) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--ps-line); display: flex; flex-direction: column; gap: 8px;
}
.external-shell .ex-bookfoot .ex-note { text-align: center; }

@media (min-width: 720px) {
    .external-shell .ex-schedule { padding: 22px 8px 60px; gap: 16px; }
    .external-shell .ex-calwrap { padding: 16px 18px 12px; }
    .external-shell .ex-book { max-width: 680px; }
}

@media (prefers-reduced-motion: reduce) {
    .external-shell .ex-nowhero,
    .portal-shell #ext-schedule-filter.ps-sheet { transition-duration: .01ms; }
    .external-shell .ex-nowhero:hover { transform: none; }
}

/* ==========================================================================
   OWNER PORTAL (external UX E5) — scoped `own-*`
   --------------------------------------------------------------------------
   The entity -> aircraft card spine for /OwnerPortal, re-skinned onto this shell.
   Prefixed `own-` exactly as the mockup scopes its owner additions, so these rules
   cannot collide with the `ex-*` component kit or the `ps-*` shell locals.

   MOBILE-FIRST: designed at ~390px; every rule below is the phone layout, and the
   only media query is a min-width enhancement. Summaries and controls clear the
   44px touch floor; nothing scrolls horizontally.

   Per-tail hue arrives as the inline `--ds-ac-l`/`--ds-ac-d` pair (collapsed to
   `--ds-ac` by the `.ds-tail` layer in tokens.css) that Razor sets from
   Services/DesignSystemPalette.Resolve — the single seam: the operator's PICKED
   `ManagedAircraftRecord.AccentColorHex`, else the registration-derived colour.
   `ResolveAccentSlot` named here until 2026-07-30 is DELETED, and the superseded
   `AccentColorSlot` is read by nothing. Never colour by roster order.

   NO MONEY COMPONENTS. There is deliberately no statement card, fee row, expense
   line or net-verdict style here: that model is not built, so nothing may render it.
   ========================================================================== */

/* ---- at-a-glance stat tiles ---- */
.external-shell .own-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.external-shell .own-stat {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; min-width: 0;
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm);
}
.external-shell .own-sk { font-size: 11px; font-weight: 650; letter-spacing: .03em; color: var(--ps-ink-3); }
.external-shell .own-sv { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ds-text-primary); }

/* ---- key/value blocks ---- */
.external-shell .own-kv { display: flex; flex-direction: column; gap: 0; margin: 0; }
.external-shell .own-kvline {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 9px 0; border-bottom: 1px solid var(--ps-line);
}
.external-shell .own-kvline:last-child { border-bottom: none; }
.external-shell .own-kvline dt { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ps-ink-3); }
.external-shell .own-kvline dd { margin: 0; font-size: 14px; color: var(--ds-text-primary); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ---- section labels inside cards ---- */
.external-shell .own-sectlbl {
    margin: 16px 0 8px; font-size: 11px; font-weight: 750; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ps-ink-3);
}

/* ---- plain informational rows (activity, maintenance, readiness, history) ---- */
.external-shell .own-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.external-shell .own-rows > li,
.external-shell .own-mx > li {
    display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; min-width: 0;
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm);
}
.external-shell .own-mx { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.external-shell .own-mxn { font-size: 14px; font-weight: 650; color: var(--ds-text-primary); overflow-wrap: anywhere; }

/* ---- alerts (TempData banners + persisted-state notices) ---- */
.external-shell .own-alert {
    padding: 12px 14px; border-radius: var(--ps-radius-sm); font-size: 13.5px; line-height: 1.5;
    background: var(--ex-info-wash); color: var(--ex-info); border: 1px solid transparent;
}
.external-shell .own-alert.is-good { background: var(--ex-good-wash); color: var(--ex-good); }
.external-shell .own-alert.is-crit { background: var(--ex-crit-wash); color: var(--ex-crit); }

/* ---- entity fold-card (collapsed by default, native <details>, no JS) ---- */
.external-shell .own-entity {
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card); overflow: hidden; margin-top: 12px;
}
.external-shell .own-ehead,
.external-shell .own-achead {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; min-height: 56px; -webkit-user-select: none; user-select: none;
}
.external-shell .own-ehead::-webkit-details-marker,
.external-shell .own-achead::-webkit-details-marker { display: none; }
.external-shell .own-ehead:focus-visible,
.external-shell .own-achead:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: -3px; }
.external-shell .own-eb,
.external-shell .own-acb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.external-shell .own-etn { font-size: 15px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.external-shell .own-etm,
.external-shell .own-acm { font-size: 12px; color: var(--ps-ink-3); overflow-wrap: anywhere; }
.external-shell .own-ebody { padding: 2px 14px 16px; border-top: 1px solid var(--ps-line); }
.external-shell .own-chev {
    flex: none; width: 18px; height: 18px; color: var(--ps-ink-3);
    transition: transform var(--ds-motion-base) var(--ds-ease);
}
.external-shell details[open] > .own-ehead .own-chev,
.external-shell details[open] > .own-achead .own-chev,
.external-shell details[open] > .own-shead .own-chev { transform: rotate(90deg); }

/* ---- page-level section fold (2026-08-05, operator ruling): every OwnerPortal/Index.cshtml
   section but "At a glance" collapses the same way as the entity/aircraft fold-cards above — native
   <details>, closed by default, no JS required. The <summary> carries the section's own <h2> (so the
   fluid .ds h2 type ramp still applies — only margin/flex layout are added here) plus an optional
   .ps-chip count (the "shared family" chip from portal-shell.css — no new chip CSS needed) so a
   collapsed section still tells the member how many things are in it. */
.external-shell .own-section {
    background: var(--ps-surface); border: 1px solid var(--ps-line); border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card); overflow: hidden;
}
.external-shell .own-shead {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; min-height: 44px; -webkit-user-select: none; user-select: none;
}
.external-shell .own-shead::-webkit-details-marker { display: none; }
.external-shell .own-shead:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: -3px; }
.external-shell .own-shead h2 { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.external-shell .own-sbody { padding: 2px 16px 18px; border-top: 1px solid var(--ps-line); }

/* ---- aircraft sub-card ---- */
.external-shell .own-aclist { display: flex; flex-direction: column; gap: 10px; }
.external-shell .own-ac {
    background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: var(--ps-radius-sm);
    overflow: hidden; margin-top: 10px;
}
.external-shell .own-aclist > .own-ac { margin-top: 0; }
.external-shell .own-hue { flex: none; width: 6px; align-self: stretch; min-height: 34px; border-radius: 3px; background: var(--ds-ac, var(--ps-ink-faint)); }
.external-shell .own-actn { font-size: 15px; font-weight: 750; letter-spacing: .02em; }
.external-shell .own-acbody { padding: 2px 13px 15px; border-top: 1px solid var(--ps-line); background: var(--ps-surface); }

/* ---- maintenance-posture pill on the collapsed aircraft headline ---- */
.external-shell .own-pill {
    flex: none; max-width: 45%; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
    line-height: 1.3; text-align: center; background: var(--ps-surface-2); color: var(--ps-ink-2);
}
.external-shell .own-pill.is-good { background: var(--ex-good-wash); color: var(--ex-good); }
.external-shell .own-pill.is-warn { background: var(--ex-warn-wash); color: var(--ex-warn); }
.external-shell .own-pill.is-crit { background: var(--ex-crit-wash); color: var(--ex-crit); }

/* ---- opt-in checkbox row: the whole row is the target, checkbox keeps its own size ---- */
.external-shell .own-check {
    display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; min-height: 44px;
    margin-bottom: var(--ds-space-4); border-radius: var(--ps-radius-sm);
    background: var(--ps-surface-2); border: 1px solid var(--ps-line);
    font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ps-ink-2); cursor: pointer;
}
.external-shell .own-check input[type="checkbox"] {
    width: 22px; height: 22px; min-height: 22px; flex: none; margin-top: 1px; padding: 0;
    accent-color: var(--ps-primary); cursor: pointer;
}

/* ==========================================================================
   AT-AIRCRAFT SURFACES (FW6a slice A1, BACKLOG 108) — the reservation detail
   page and the check-out / check-in tool, `ex-lc-*` / `ex-disclosure`.
   --------------------------------------------------------------------------
   These two routes were the last external surfaces still rendering on the
   light-only `site.css` chrome. Everything they needed already existed in the
   kit above (`ex-stackcard`, `ex-kv`, `ex-gate`, `ex-ackcheck`, `ex-btn`,
   `ex-input`) EXCEPT the two components below, both of which carried a
   light-theme literal in `site.css` and therefore could not simply be
   re-parented — mobile-design-standards §8, the dark-mode trap:

     .lock-code-panel        background: #f8fafc   (light literal on a themed pane)
     .dispatch-disclosure-box  inline border rgba(128,128,128,.35)

   Mobile-first: designed at ~390px; there is no media query here because
   neither component changes shape with width. Colours resolve to the `--ps-*`
   shell locals, which carry both themes.
   ========================================================================== */

/* ---- lock-box code. Read outdoors, one-handed, often in sunlight: the code
   is the largest thing on the surface, mono + widely tracked so 0/O and 1/I
   cannot be confused, and it wraps rather than overflowing a 390px pane. ---- */
.external-shell .ex-lockcode {
    display: flex; flex-direction: column; gap: 5px; padding: 15px 16px;
    background: var(--ps-surface); border: 1px solid var(--ps-line-strong); border-radius: 12px;
}
.external-shell .ex-lockcode .ex-lc-code {
    font-family: var(--ps-mono); font-size: 34px; font-weight: 800; line-height: 1.1;
    letter-spacing: .18em; color: var(--ps-ink); overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.external-shell .ex-lockcode .ex-lc-meta { font-size: 12px; color: var(--ps-ink-2); overflow-wrap: anywhere; }

/* ---- §2.2.4 disclosure box. The `dispatch-disclosure-box--bound` class that
   `reservation-acknowledgements.js` adds still supplies the max-height/overflow
   from site.css; this rule supplies only the boundary and the text treatment,
   so the review-scope mechanism is untouched. `--ps-field-border` is the
   control-boundary token (>= 3:1, SC 1.4.11) rather than the card hairline. ---- */
.external-shell .ex-disclosure {
    padding: 12px 13px; border: 1px solid var(--ps-field-border); border-radius: 12px;
    background: var(--ps-surface);
}
.external-shell .ex-disclosure .ex-disclosure__text {
    white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; color: var(--ps-ink);
}
.external-shell .ex-disclosure .ex-disclosure__rule {
    border: none; border-top: 1px solid var(--ps-line); margin: 11px 0;
}
.external-shell .ex-disclosure .ex-disclosure__state {
    white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--ps-mono);
    font-size: 12.5px; line-height: 1.5; color: var(--ps-ink-2);
}

/* ---- retained/verbatim record text (the lease instrument, the accepted
   preimage). `pre` keeps the authored line structure — these bytes ARE the
   hash preimage and must not be re-flowed — while pre-wrap stops a 390px
   phone scrolling sideways. ---- */
.external-shell .ex-record {
    white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit;
    font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--ps-ink-2);
}
.external-shell .ex-fingerprint {
    font-family: var(--ps-mono); font-size: 12px; overflow-wrap: anywhere; color: var(--ps-ink-2);
}

/* ---- card headings. `.ex-stackcard h4` above is the kit's card heading; `h2`/`h3` get the SAME
   treatment because two cards on the Documents hub must keep those tags — the acceptance suite counts
   `<h2>Government ID</h2>` exactly once and locates the insurance card by the `<h2>Renter` prefix
   (its apostrophe HTML-encodes, so the full title cannot be matched). Without this rule they would
   inherit the fluid `.ds h2` clamp() ramp and render as page titles inside a card. ---- */
.external-shell .ex-stackcard h2 { margin: 0; font-size: 16px; font-weight: 660; letter-spacing: -.01em; }
.external-shell .ex-stackcard h3,
.external-shell .ex-idslot h3 { margin: 0; font-size: 14.5px; font-weight: 640; }

/* ---- document verification read-out (shared by the insurance card and both government-ID slots) ---- */
.external-shell .ex-verify {
    display: flex; flex-direction: column; gap: 4px; padding: 11px 13px;
    background: var(--ps-surface-2); border: 1px solid var(--ps-line); border-radius: 12px;
}
.external-shell .ex-verify strong { color: var(--ps-ink); }

/* ---- a `.ex-note` used as a list still needs its bullets indented into the pane ---- */
.external-shell ul.ex-note { margin: 0; padding-left: 18px; }
.external-shell ul.ex-note li { margin: 3px 0; }

/* ---- a fieldset borrowing the field-label layout ---- */
.external-shell fieldset.ex-kv { border: none; margin: 0; padding: 0; min-width: 0; }
.external-shell fieldset.ex-kv > legend.ex-k { padding: 0; }

/* ---- a whole row that is itself the link (the Lease Period record list) ---- */
.external-shell a.ex-currow { text-decoration: none; color: inherit; min-height: 44px; }
.external-shell a.ex-currow:hover { border-color: var(--ps-line-strong); background: var(--ps-surface-2); }

@media (min-width: 720px) {
    .external-shell .own-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .external-shell .own-pill { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .external-shell .own-chev { transition-duration: .01ms; }
}