/* ============================================================================
   redesign:web-WS8a-account — Account area: Settings (7 sections), Aircraft Setup,
   Profile & certificates, Inbox, Support, Sign in.
   Loaded after kit.css. TOKENS ONLY (--c-* and the kit's own custom properties): no hex, no rgb(),
   radius 0, nothing animates, nothing pulses. scripts/account_test.js lints this file.
   Floors: 11px for uppercase tracked labels, 12px for everything else; every control that is a
   tap target keeps a >= 44px hit area (the kit .btn / .seg already do; nav rows and checkbox rows
   are 44px tall outright).
   CONTENTS
     1  screen frame + two-column layout (the CONTAINER decides, never the device)
     2  settings nav (aside), search, results
     3  panels: cards, checkbox rows, field grids, read-only values, save bar
     4  theme picker (the shell's picker, restyled as the handoff's 40px segmented strip)
     5  tables (devices / passkeys / crew / altimeter) and the pairing card
     6  Aircraft Setup (aircraft list rows, role notes)
     7  Profile (certificates & dates)
     8  Inbox
     9  Support
    10  Sign in
   ============================================================================ */

/* ---- 1. frame ----------------------------------------------------------------- */
.acct-screen { max-width: var(--content-max, 1240px); }
.acct-cq { container-type: inline-size; container-name: acct; margin-top: 16px; }
.acct-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container acct (min-width: 760px) {
  .acct-layout:not(.solo) { grid-template-columns: 250px minmax(0, 1fr); }
  /* the section nav stays in view while a long section scrolls (the shell's own sticky strip is --shell-stick tall) */
  .acct-layout:not(.solo) > .acct-aside { position: sticky; top: calc(var(--shell-stick, 44px) + 12px); }
  .acct-layout:not(.solo) > .acct-aside.acct-nav-aside { max-height: calc(100vh - var(--shell-stick, 44px) - 24px); overflow-y: auto; }
}
.acct-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.acct-main > .seg-wrap { margin: 0; }
.acct-sec[hidden] { display: none; }
.acct-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- 2. aside: search + section nav ----------------------------------------- */
.acct-aside { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.acct-search input { min-height: 40px; }
.acct-results { border: 1px solid var(--c-line); background: var(--c-bg); }
.acct-results[hidden] { display: none; }
.acct-results .acct-res {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 44px; padding: 7px 10px; margin: 0;
  background: transparent; color: var(--c-ink); border: 0; border-bottom: 1px solid var(--c-line-2); border-radius: 0; text-align: left; cursor: pointer; font: inherit;
}
.acct-results .acct-res:last-child { border-bottom: 0; }
.acct-results .acct-res:hover, .acct-results .acct-res:focus-visible { background: var(--c-hover-row); }
.acct-res-label { font-size: 14px; }
.acct-res-where { font: 600 11px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.acct-results .acct-none { padding: 10px; font-size: 13px; color: var(--c-ink-2); }
.acct-nav { display: flex; flex-direction: column; }
.acct-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; box-sizing: border-box;
  border-left: 3px solid transparent; color: var(--c-ink); font-size: 13.5px; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.acct-nav a:hover { background: var(--c-hover-row); text-decoration: none; }
.acct-nav a[aria-current="page"] { border-left-color: var(--c-accent); background: var(--c-accent-tint); }
.acct-nav a:focus-visible { outline-offset: -2px; }
.acct-nav .acct-sub { font: 600 11px/1.2 var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-2); white-space: nowrap; }
.acct-nav .acct-sub:empty { display: none; }
.acct-nav-sep { margin: 10px 10px 2px; font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
@container acct (max-width: 759.98px) {
  .acct-nav { flex-direction: row; overflow-x: auto; border: 1px solid var(--c-line); scrollbar-width: thin; }
  .acct-nav a { flex: 0 0 auto; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .acct-nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
  .acct-nav-sep { flex: 0 0 auto; align-self: center; margin: 0 4px 0 10px; }
}

/* ---- 3. panels ------------------------------------------------------------- */
.acct-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items: start; }
.acct-grid.one { grid-template-columns: minmax(0, 1fr); }
.acct-card { padding: 14px; min-width: 0; }
.acct-card > h3, .acct-card > .acct-h { margin: 0 0 8px; font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.acct-card > h3 .sub, .acct-card > .acct-h .sub { font: 400 12px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
.acct-card h4 { margin: 14px 0 6px; font: 600 15px/1.2 var(--font-heading); letter-spacing: .02em; color: var(--c-ink); }
.acct-card h4 .sub { font: 400 12px/1.3 var(--font-body); color: var(--c-ink-3); }
.acct-card .sub { color: var(--c-ink-2); font-size: 13px; margin: 4px 0 0; }
.acct-card p.sub { margin: 0 0 10px; }
.acct-card .field > .sub, .acct-card .field > span.sub { display: block; font-size: 12px; color: var(--c-ink-3); margin-top: 3px; }
.acct-card .field label .sub { font-size: 12px; color: var(--c-ink-3); }
.acct-card .acct-actions { margin-top: 14px; }
.acct-card a { color: var(--c-accent-ink); }
.acct-two { display: grid; gap: 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container acct (max-width: 520px) { .acct-two, .acct-three { grid-template-columns: minmax(0, 1fr); } }
.acct-checks { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
label.acct-check {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 4px 0; box-sizing: border-box;
  font-size: 14px; color: var(--c-ink); cursor: pointer; border-bottom: 1px solid var(--c-line-2);
}
label.acct-check > input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
label.acct-check .sub { margin: 0; font-size: 12px; color: var(--c-ink-3); }
.acct-value { font-size: 15px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.acct-value-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--c-line-2); font-size: 14px; }
.acct-value-row > span:first-child { color: var(--c-ink-2); }
.acct-hint { font-size: 12px; color: var(--c-ink-3); }
.acct-role-note { margin: 10px 0 0; font-size: 12px; color: var(--c-ink-2); }
.acct-role-note .tag { margin-right: 6px; }
.acct-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; padding: 10px 14px; background: var(--c-bg); border: 1px solid var(--c-line-control); border-left: 3px solid var(--c-accent);
}
.acct-savebar[hidden] { display: none; }
.acct-savebar .acct-dirty { font-size: 13px; color: var(--c-ink-2); }
.acct-savebar.dirty { border-left-color: var(--c-caution); }
.acct-savebar.dirty .acct-dirty { color: var(--c-caution); font-weight: 600; }
@media (max-width: 767.98px) { .acct-savebar { bottom: calc(var(--shell-tabbar-h, 60px) + env(safe-area-inset-bottom, 0px)); } }
.acct-card .inline-error, .acct-sec > .inline-error { margin-top: 10px; }

/* ---- 4. theme picker (shell markup, handoff look) ----------------------------- */
.acct-theme .theme-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--c-line-control); }
.acct-theme .theme-seg-btn {
  height: 44px; padding: 0 14px; margin: 0; border: 0; border-left: 1px solid var(--c-line-control); border-radius: 0;
  background: transparent; color: var(--c-ink-2); font: 600 13px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase;
}
.acct-theme .theme-seg-btn:first-child { border-left: 0; }
.acct-theme .theme-seg-btn:hover { background: var(--c-hover-btn); color: var(--c-ink); }
.acct-theme .theme-seg-btn.active { background: var(--c-accent-solid); color: var(--c-on-accent); }
.acct-theme .theme-hint { margin: 10px 0 0; font-size: 13px; color: var(--c-ink-2); }

/* ---- 5. tables + pairing ------------------------------------------------------- */
.acct-scroll { overflow-x: auto; max-width: 100%; }
.acct-scroll > table { min-width: 560px; }
.acct-scroll .btn { white-space: nowrap; }
.acct-notif-grid td:nth-child(n+2), .acct-notif-grid th:nth-child(n+2) { text-align: center; width: 1%; white-space: nowrap; }
.acct-notif-grid label.cell { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; cursor: pointer; }
.acct-notif-grid label.cell input { margin: 0; width: 18px; height: 18px; }
.acct-rev { opacity: .6; }
.acct-pre { white-space: pre-wrap; font-size: 12px; margin: 0; color: var(--c-ink-2); }
.acct-pair { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* A QR code only scans as dark modules on a LIGHT quiet zone, in every theme — the one place a fixed light ground is correct. */
.acct-qr { background: white; padding: 12px; line-height: 0; }
.acct-code { font: 600 36px/1.1 var(--font-heading); letter-spacing: .3em; text-align: center; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.acct-sync-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; }
.acct-sync-row .st { font: 600 11px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.acct-sync-row .st.failed { color: var(--c-blocking); }
.acct-sync-row .msg { grid-column: 1 / -1; font-size: 12px; color: var(--c-ink-2); overflow-wrap: anywhere; }

/* ---- 6. Aircraft Setup ----------------------------------------------------------- */
.acct-ac-list { display: flex; flex-direction: column; }
.acct-ac {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 10px; margin: 0; box-sizing: border-box;
  border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--c-line-2); border-radius: 0; background: transparent; color: var(--c-ink);
  font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.acct-ac:hover { background: var(--c-hover-row); }
.acct-ac.sel { border-left-color: var(--c-accent); background: var(--c-accent-tint); }
/* redesign:web-integrator — the "Selected" tag sat on the selected row's own tint (two tints stacked: 4.3:1 at Dusk); on that row it is outline-only */
.acct-ac.sel .tag-accent { background: transparent; border-color: var(--c-accent); }
.acct-ac .tail { font: 600 17px/1.1 var(--font-heading); letter-spacing: .02em; }
.acct-ac .meta { font-size: 12px; color: var(--c-ink-2); }
.acct-add-plane { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acct-add-plane input { max-width: 160px; }
#cc_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
#cc_grid .field { margin: 0; }
.acct-altcal { max-height: 420px; overflow: auto; margin-top: 8px; }
.acct-altcal td input { min-width: 90px; }

/* ---- 7. Profile: certificates & dates ------------------------------------------------ */
.acct-dates td.d-label { font-weight: 600; }
.acct-dates td.d-chip, .acct-dates th.d-chip { white-space: nowrap; width: 1%; }
.acct-dates td.d-why { text-align: right; white-space: nowrap; width: 1%; }
.acct-dates .d-val { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
/* narrow container: each record becomes a two-line row so the STATUS chip and Why? are never scrolled out of sight */
@container acct (max-width: 620px) {
  .acct-dates.acct-scroll > table { min-width: 0; }
  .acct-dates thead { display: none; }
  .acct-dates table, .acct-dates tbody { display: block; }
  .acct-dates tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--c-line-2); }
  .acct-dates td { border: 0; padding: 0; }
  .acct-dates td.d-label { grid-column: 1; grid-row: 1; }
  .acct-dates td.d-chip { grid-column: 2; grid-row: 1; justify-self: end; width: auto; }
  .acct-dates td.d-val { grid-column: 1; grid-row: 2; }
  .acct-dates td.d-why { grid-column: 2; grid-row: 2; justify-self: end; width: auto; }
}

/* ---- 8. Inbox ------------------------------------------------------------------------- */
.ib-screen { max-width: 900px; }
.ib-content { margin-top: 16px; }
.ib-content .seg-wrap { margin: 0 0 10px; }
.ib-list { list-style: none; margin: 0; padding: 0; }
.ib-row { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--c-line-2); border-left: 3px solid transparent; }
.ib-row:last-child { border-bottom: 0; }
.ib-row.unread { border-left-color: var(--c-accent); }
.ib-main {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  min-height: 56px; padding: 10px 6px 10px 14px; margin: 0; box-sizing: border-box; background: transparent; color: var(--c-ink); border: 0; border-radius: 0;
  font: inherit; text-align: left; cursor: pointer;
}
.ib-main:hover { background: var(--c-hover-row); }
.ib-main:focus-visible { outline-offset: -2px; }
.ib-cat { font: 600 11px/1.3 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); padding-top: 3px; }
.ib-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ib-title { font-size: 14.5px; font-weight: 400; overflow-wrap: anywhere; }
.ib-row.unread .ib-title { font-weight: 700; }
.ib-text .ib-body { font-size: 13px; color: var(--c-ink-2); overflow-wrap: anywhere; }
.ib-dest { font-size: 12px; color: var(--c-ink-3); }
.ib-when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--c-ink-2); white-space: nowrap; padding-top: 2px; }
.ib-state { font: 600 11px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-ink); }
.ib-del { align-self: center; margin: 0 6px 0 0; flex: 0 0 auto; }
.ib-sync-list { display: block; margin-top: 6px; }
.ib-sync-row { display: block; font-size: 13px; color: var(--c-ink); padding: 2px 0; }
.ib-sync-row .ib-msg { color: var(--c-ink-2); }
@media (max-width: 599.98px) {
  .ib-main { grid-template-columns: minmax(0, 1fr) auto; }
  .ib-cat { grid-column: 1 / -1; padding-top: 0; }
}

/* ---- 9. Support ------------------------------------------------------------------------ */
.sp-screen { max-width: var(--content-max, 1240px); }
.sp-form { margin-top: 16px; }
.sp-form .field textarea { min-height: 110px; }
.sp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sp-thread { display: flex; flex-direction: column; gap: 10px; }
.sp-msg { border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-control); padding: 10px 14px; background: var(--c-bg); }
.sp-msg.support { border-left-color: var(--c-accent); }
.sp-msg .sp-who { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--c-ink-2); }
.sp-msg .sp-who b { font: 600 13px/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.sp-msg .sp-text { white-space: pre-wrap; margin-top: 6px; overflow-wrap: anywhere; font-size: 14px; }
.sp-att { margin-top: 8px; font-size: 13px; }
.sp-att a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-accent-ink); }
.sp-att svg { flex: 0 0 auto; }
.sp-reply textarea { min-height: 96px; }
.sp-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent-ink); font-size: 14px; }

/* ---- 10. Sign in ---------------------------------------------------------------------------- */
.acct-login-wrap { min-height: 100svh; display: grid; place-items: start center; padding: 40px 16px 24px; background: var(--c-bg); }
.acct-login { width: 100%; max-width: 520px; }
.acct-login .wordmark { justify-content: center; font-size: 34px; gap: 2px; }
.acct-login .wordmark .wm-box { padding: 0 6px; }
.acct-login .acct-tagline { text-align: center; font: 500 12px/1.2 var(--font-heading); letter-spacing: .26em; text-transform: uppercase; color: var(--c-ink-2); margin: 8px 0 24px; }
.acct-login .acct-signin { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.acct-login .acct-kicker { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); }
.acct-login .btn.xl { width: 100%; flex-direction: row; justify-content: space-between; font-size: 16px; min-height: 48px; }
.acct-login .btn.xl .btn-sub { font: 400 12px/1.2 var(--font-body); opacity: .9; }
.acct-login .acct-or { display: flex; align-items: center; gap: 10px; font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.acct-login .acct-or::before, .acct-login .acct-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-line); }
.acct-login .field { margin-bottom: 0; }
.acct-login input { min-height: 44px; font-size: 16px; }
.acct-login input.otp { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; font-size: 22px; }
.acct-login .acct-foot { font-size: 13px; color: var(--c-ink-2); text-align: center; margin: 4px 0 0; }
.acct-login .acct-foot a { color: var(--c-accent-ink); }
#loginStep { display: flex; flex-direction: column; gap: 10px; }
.acct-login .state-band, .acct-login .notice { margin: 0; }
#loginMsg:empty { display: none; }