/* Flight Ops Cockpit — Weight & Balance
   ===========================================================================
   THEMING CONTRACT

   Every colour, typeface and shadow used on screen comes from a token below.
   Nothing in the component rules is a literal, which tools/check-tokens.mjs
   enforces, so a host can re-skin the whole module without touching it:

     #wandb-root {            // or whatever element you mount into
       --ink: var(--cms-text);
       --accent: var(--cms-primary);
       --on-accent: var(--cms-on-primary);
       --font-body: var(--cms-font);
       ...
     }

   Custom properties set on the mount root beat these :root defaults for
   everything inside it, so the host always wins — including over the
   day / night blocks further down. Set the tokens and this module
   stops having opinions.

   Two rules keep that promise honest, both learned the hard way:

   1. No component rule may set a colour, and that includes a rule whose
      selector merely starts with :root — `:root[data-theme="dark"] .foo` is a
      component rule, it outranks the host's own tokens, and a host overriding
      the token underneath it changes nothing. Derive the dark variant from a
      token instead. check-tokens.mjs now catches this.
   2. A token must not be defined as var() of another token. A custom property
      containing var() is resolved on the element that declares it and inherits
      already resolved, so `--x: var(--accent)` on :root bakes in OUR accent and
      ignores a host that overrides --accent on the mount root. Keep tokens
      literal, and derive at the point of use.

   Print is deliberately exempt: @media print uses literal black and white
   because a printed loadsheet has no theme and must stay legible on any
   printer.
   ===========================================================================
   Tokens first: the complete light palette on bare :root, redefined for the two
   dark states. Status colours were validated for contrast and colour-vision
   separation; they always ship with a word, never colour alone. */

/* Three palettes, all in the Flight Ops CMS identity (ink #0F0F0F, one gold
   #E6B92C, Poppins / Oswald):

     CMS     dark, always. Bare :root — the CMS has no light theme, so this
             module does not follow the system setting when the CMS hosts it.
     DAY     Cockpit day mode. Light ground; the gold darkens to #8F6B0E so it
             still reads as text on white (4.9:1).
     NIGHT   Cockpit night mode. CMS dark with the whites dimmed and the
             airframe drawn dark, so the brightest thing on an iPad in a dark
             cockpit is no longer a white fuselage.

   Cockpit selects day or night itself (Day / Auto / Night, stored as
   flightOpsTheme) and writes the result to body: data-effective-theme="day"
   or "night", plus the night-mode class. The blocks below key off exactly
   that, so the trim sheet switches with the rest of Cockpit, live, with no
   code on the Cockpit side. A host using data-theme on <html> gets the same
   two palettes. Tokens set on the mount root still beat all of these. */

:root {
  --ground: #0F0F0F;
  --ground-image: radial-gradient(ellipse 42% 105% at 9% -18%, rgba(230, 185, 44, .055), rgba(230, 185, 44, 0) 62%);
  --surface: #141414;
  --surface-2: #1A1A1A;
  --ink: #F2F3F3;
  --ink-2: #A7AFB4;
  --ink-3: #8E969B;
  --line: #2E2E2E;
  --line-2: #232323;
  --accent: #E6B92C;
  --accent-soft: #E6B92C24;
  --on-accent: #0F0F0F;
  --logo-plate: #FFFFFF;
  --env-wash: .14;
  --good: #6FCF97;
  --good-soft: #25824B33;
  --warn: #F2A541;
  --warn-soft: #F2A54124;
  --crit: #FF7A72;
  --crit-soft: #FF675F26;
  --seat-empty: #1A1A1A;
  --seat-fill: #3A2F0E;
  --acft-livery: #4A4A4A;
  --acft-livery-2: #5A5A5A;
  --acft-band: #B9B9B6;
  --acft-skin: #E8E8E6;
  --acft-line: #BDBDBD;
  --cabin-floor: #2A2722;
  --cabin-aisle: #3A342A;
  --seat-leather: #3A3530;
  --seat-stitch: #6B6253;
  --window-glass: #1F1F1F;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --font-placard: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:root[data-theme="light"],
body[data-effective-theme="day"] {
  --ground: #F4F4F5;
  --ground-image: radial-gradient(ellipse 42% 105% at 9% -18%, rgba(230, 185, 44, .10), rgba(230, 185, 44, 0) 62%);
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --ink: #0F0F0F;
  --ink-2: #4A4F52;
  --ink-3: #5E6367;
  --line: #DEDEDE;
  --line-2: #EBEBEB;
  --accent: #8A6A14;
  --accent-soft: #FBF4DF;
  --on-accent: #FFFFFF;
  --logo-plate: #FFFFFF;
  --env-wash: .16;
  --good: #1F7A47;
  --good-soft: #E3F2E9;
  --warn: #9A5B00;
  --warn-soft: #FBEFD9;
  --crit: #B3271E;
  --crit-soft: #FBE7E4;
  --seat-empty: #FFFFFF;
  --seat-fill: #F7EBC6;
  --acft-livery: #3A3A3A;
  --acft-livery-2: #4A4A4A;
  --acft-band: #B9B9B6;
  --acft-skin: #FFFFFF;
  --acft-line: #C9C9C9;
  --cabin-floor: #F0ECE3;
  --cabin-aisle: #DDD3C1;
  --seat-leather: #E9E3D7;
  --seat-stitch: #B8AD97;
  --window-glass: #2A2A2A;
  --shadow: 0 1px 2px rgba(15, 15, 15, .05), 0 10px 30px -22px rgba(15, 15, 15, .45);
}

:root[data-theme="dark"],
body.night-mode,
body[data-effective-theme="night"] {
  --ground: #0A0A0A;
  --ground-image: none;
  --surface: #111111;
  --surface-2: #161616;
  --ink: #DEDFDB;
  --ink-2: #9AA1A6;
  --ink-3: #858C91;
  --line: #262626;
  --line-2: #1D1D1D;
  --accent: #D4AA2A;
  --accent-soft: #D4AA2A1F;
  --on-accent: #0F0F0F;
  --logo-plate: #FFFFFF;
  --env-wash: .14;
  --good: #6FCF97;
  --good-soft: #25824B33;
  --warn: #F2A541;
  --warn-soft: #F2A54124;
  --crit: #FF7A72;
  --crit-soft: #FF675F26;
  --seat-empty: #1A1A1A;
  --seat-fill: #33290C;
  --acft-livery: #333333;
  --acft-livery-2: #3E3E3E;
  --acft-band: #4E4E4C;
  --acft-skin: #242424;
  --acft-line: #4A4A4A;
  --cabin-floor: #1E1C19;
  --cabin-aisle: #2B2720;
  --seat-leather: #2E2A26;
  --seat-stitch: #57503F;
  --window-glass: #0A0A0A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

/* Elements below set their own display, which would otherwise beat the
   hidden attribute. The published artifact skeleton carries this rule; the
   module has to bring its own so it behaves the same inside Cockpit. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  background-image: var(--ground-image);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.wb-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 0 48px;
}

/* ---------- header ---------- */

.wb-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  margin-inline: -16px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.wb-brand-mark {
  font-family: var(--font-placard);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.wb-brand-mark span { color: var(--accent); }
.wb-brand-sub {
  font-family: var(--font-placard);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.wb-tail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}
.wb-tail img {
  height: 18px; width: auto; display: block;
  background: var(--logo-plate); padding: 3px 5px; border-radius: 999px;
}
.wb-tail-reg {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
}
.wb-tail-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

.wb-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* ---------- controls ---------- */

.wb-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.wb-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-placard);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
}
.wb-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.wb-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-placard);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.wb-btn:hover { border-color: var(--accent); color: var(--accent); }

.wb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 13px 5px 10px;
  font-family: var(--font-placard);
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.wb-status .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wb-status.is-ok   { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.wb-status.is-ok .dot { background: var(--good); }
.wb-status.is-bad  { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.wb-status.is-bad .dot { background: var(--crit); }

button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- layout ---------- */

.wb-sector {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0 4px;
}
.wb-field { display: flex; flex-direction: column; gap: 3px; }
.wb-field label {
  font-family: var(--font-placard);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wb-field input {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 9px;
  width: 128px;
}
.wb-field input::placeholder { color: var(--ink-3); }

.wb-grid {
  display: grid;
  grid-template-columns: minmax(276px, 330px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 1080px) { .wb-grid { grid-template-columns: minmax(268px, 320px) minmax(0, 1fr); } }
@media (max-width: 760px)  { .wb-grid { grid-template-columns: minmax(0, 1fr); } }

.wb-inputwrap { display: flex; align-items: center; gap: 7px; }

.wb-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wb-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
}
.wb-panel-title {
  font-family: var(--font-placard);
  font-size: 15px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}
.wb-panel-note { font-size: 11px; color: var(--ink-3); }
.wb-panel-body { padding: 14px; }

/* ---------- cabin cutaway ---------- */

.wb-cabin { display: flex; justify-content: center; padding: 4px 0 2px; }
.wb-cabin svg { width: 100%; max-width: 296px; height: auto; display: block; }

/* airframe */
.acft-body {
  fill: var(--acft-skin);
  stroke: var(--acft-livery);
  stroke-width: 2;
  stroke-linejoin: round;
}
.acft-livery { fill: var(--acft-band); }
.acft-wing {
  fill: var(--acft-livery);
  stroke: var(--acft-livery);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.acft-nacelle {
  fill: var(--acft-livery-2);
  stroke: var(--acft-skin);
  stroke-width: 1.5;
  stroke-opacity: .35;
}
.acft-glass { fill: var(--window-glass); stroke: var(--acft-livery); stroke-width: 2; }
.acft-pane { fill: none; stroke: var(--acft-skin); stroke-width: 1.6; opacity: .55; }
.acft-window { fill: var(--window-glass); stroke: none; opacity: .88; }
.acft-door { fill: none; stroke: var(--window-glass); stroke-width: 1.3; opacity: .7; }
.acft-line { stroke: var(--acft-line); stroke-width: 1.2; }
.cabin-floor { fill: var(--cabin-floor); }
.cabin-aisle { fill: var(--cabin-aisle); opacity: .8; }

/* seats */
.seat-hit { cursor: pointer; }
.seat-box {
  fill: var(--seat-leather);
  stroke: var(--seat-stitch);
  stroke-width: 1.3;
  transition: fill .12s ease, stroke .12s ease;
}
.seat-arm, .seat-back { fill: var(--seat-stitch); transition: fill .12s ease; }
.seat-hit[data-filled="1"] .seat-box { fill: var(--seat-fill); stroke: var(--accent); stroke-width: 1.8; }
.seat-hit[data-filled="1"] .seat-arm,
.seat-hit[data-filled="1"] .seat-back { fill: var(--accent); }
.seat-hit[data-selected="1"] .seat-box { stroke: var(--accent); stroke-width: 3; }
.seat-hit:hover .seat-box { stroke: var(--accent); }
.seat-hit:hover .seat-arm, .seat-hit:hover .seat-back { fill: var(--accent); }
.seat-hit:focus { outline: none; }
.seat-hit:focus-visible .seat-box { stroke: var(--accent); stroke-width: 3; }

.seat-id {
  font-family: var(--font-placard);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  fill: var(--ink-2);
  text-anchor: middle;
  pointer-events: none;
}
.seat-hit[data-filled="1"] .seat-id { fill: var(--accent); }
.seat-wt {
  font-family: var(--font-data);
  font-size: 9px;
  fill: var(--ink);
  text-anchor: middle;
  pointer-events: none;
}

/* station ruler */
.ruler-line, .ruler-tick { stroke: var(--line); stroke-width: 1.2; }
.ruler-num {
  font-family: var(--font-data);
  font-size: 9px;
  fill: var(--ink-3);
  text-anchor: middle;
}
.ruler-caption {
  font-family: var(--font-placard);
  font-size: 9px;
  letter-spacing: .14em;
  fill: var(--ink-3);
  text-anchor: start;
}
.zone-label {
  font-family: var(--font-placard);
  font-size: 10px;
  letter-spacing: .12em;
  fill: var(--ink-3);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- seat editor ---------- */

.wb-editor { border-top: 1px solid var(--line-2); padding: 12px 14px 14px; background: var(--surface-2); }
.wb-editor-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px;
}
.wb-editor-who {
  font-family: var(--font-placard); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
}
.wb-editor-arm { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }
.wb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.wb-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.wb-chip b { font-family: var(--font-placard); font-size: 13px; letter-spacing: .08em; color: var(--ink); }
.wb-chip span { font-family: var(--font-data); font-size: 11px; color: var(--ink-3); }
.wb-chip:hover { border-color: var(--accent); }
.wb-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.wb-chip[aria-pressed="true"] b { color: var(--accent); }
.wb-editor-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- baggage + fuel inputs ---------- */

.wb-loadrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
}
.wb-loadrow:last-child { border-bottom: 0; }
.wb-loadrow-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wb-loadrow-label b {
  font-family: var(--font-placard); font-weight: 500; font-size: 15px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.wb-loadrow-label small { font-size: 11px; color: var(--ink-3); }
.wb-input {
  font-family: var(--font-data);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  width: 104px;
}
.wb-input.is-over { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.wb-unit { font-family: var(--font-placard); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }

.wb-derived {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 11px; margin-top: 10px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 12px; color: var(--ink-2);
}
.wb-derived b { font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- trim table ---------- */

.wb-table-scroll { overflow-x: auto; }
table.wb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wb-table th {
  font-family: var(--font-placard);
  font-size: 11px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding: 0 8px 7px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.wb-table th:first-child { text-align: left; padding-left: 0; }
.wb-table td {
  font-family: var(--font-data);
  font-size: 12.5px;
  text-align: right;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
  color: var(--ink);
}
.wb-table td:first-child {
  text-align: left; padding-left: 0;
  font-family: var(--font-body); font-size: 13px; color: var(--ink-2);
}
/* Numbers must never wrap or scroll out of sight; labels may do either.
   A host supplying a wider face than our condensed default (Inter rather
   than Barlow Condensed is ~15% wider) used to push the MOMENT column past
   the panel edge, where overlay scrollbars made a scrollable table look like
   a broken one. Letting the label column wrap absorbs the extra width in the
   one column that can afford it. */
.wb-table th:first-child, .wb-table td:first-child { white-space: normal; }
.wb-table th:not(:first-child), .wb-table td:not(:first-child) {
  white-space: nowrap; width: 1%;
}
.wb-table tr.is-zero td { color: var(--ink-3); }
.wb-table tr.is-zero td:first-child { color: var(--ink-3); }
.wb-table tr.wb-subtotal td {
  font-weight: 600;
  border-top: 1.5px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}
.wb-table tr.wb-subtotal td:first-child {
  font-family: var(--font-placard); font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.wb-lim { font-size: 11px; color: var(--ink-3); font-family: var(--font-data); }
.wb-table tr.is-over td { background: var(--crit-soft); color: var(--crit); }
.wb-table tr.is-over td:first-child { color: var(--crit); }
.wb-table tr.is-near td { background: var(--warn-soft); }

/* ---------- checks ---------- */

.wb-checks { display: flex; flex-direction: column; gap: 6px; }
.wb-check {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px 7px 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}
.wb-check .stripe { align-self: stretch; }
.wb-check-label {
  font-family: var(--font-placard); font-size: 14px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.wb-check-val {
  font-family: var(--font-data); font-size: 12px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink);
}
.wb-check-val em { font-style: normal; color: var(--ink-3); }
.wb-check.is-ok   .stripe { background: var(--good); }
.wb-check.is-near .stripe { background: var(--warn); }
.wb-check.is-near { background: var(--warn-soft); }
.wb-check.is-near .wb-check-val { color: var(--warn); }
.wb-check.is-over .stripe { background: var(--crit); }
.wb-check.is-over { background: var(--crit-soft); border-color: var(--crit); }
.wb-check.is-over .wb-check-label, .wb-check.is-over .wb-check-val { color: var(--crit); }
.wb-check.is-over .wb-check-val em { color: var(--crit); }

.wb-advisory {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--warn); background: var(--warn-soft);
  color: var(--warn); border-radius: 8px; padding: 8px 10px;
  font-size: 12px; margin-top: 8px;
}
.wb-advisory svg { flex: none; margin-top: 1px; }

/* ---------- envelope ---------- */

.wb-envelope svg { width: 100%; height: auto; display: block; }
.env-grid { stroke: var(--line-2); stroke-width: 1; }
.env-axis { stroke: var(--line); stroke-width: 1.5; }
.env-tick {
  font-family: var(--font-data); font-size: 9px; fill: var(--ink-3);
}
.env-axis-title {
  font-family: var(--font-placard); font-size: 10px;
  letter-spacing: .14em; fill: var(--ink-3); text-transform: uppercase;
}
/* The envelope interior is the accent washed back, not a second colour. Done
   with fill-opacity rather than a translucent token because a custom property
   containing var() is resolved on the element that DECLARES it and inherits
   already-resolved — so `--env-fill: var(--accent-soft)` on :root would bake in
   our own palette and ignore a host that overrides --accent-soft on the mount
   root. An opacity is a plain number, so there is nothing to resolve: this
   follows whatever accent the host sets, in both light and dark, with no token
   for the host to remember. */
.env-poly {
  fill: var(--accent); fill-opacity: var(--env-wash);
  stroke: var(--accent); stroke-width: 2;
}
.env-zfwline { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.env-trim { stroke: var(--ink); stroke-width: 2; fill: none; }
.env-pt-ring { stroke: var(--surface); stroke-width: 2; }
.env-pt-label {
  font-family: var(--font-placard); font-size: 11px;
  letter-spacing: .09em; fill: var(--ink); text-transform: uppercase;
}
.env-legend { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 10px; font-size: 11px; color: var(--ink-2); }
.env-legend span { display: inline-flex; align-items: center; gap: 6px; }
.env-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.env-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 420px) { .env-readout { grid-template-columns: minmax(0, 1fr); } }
.env-card {
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 8px 10px; background: var(--surface-2);
}
.env-card.is-out { border-color: var(--crit); background: var(--crit-soft); }
.env-card-k {
  font-family: var(--font-placard); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.env-card-v {
  font-family: var(--font-data); font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 1px;
}
.env-card-m { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.env-card.is-out .env-card-k, .env-card.is-out .env-card-v, .env-card.is-out .env-card-m { color: var(--crit); }

/* ---------- declaration ---------- */

.wb-decl {
  margin-top: 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end;
}
@media (max-width: 760px) { .wb-decl { grid-template-columns: 1fr; } }
.wb-decl p { margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 62ch; }
.wb-decl-sign { min-width: 240px; }
.wb-sign-line { border-bottom: 1px solid var(--ink-3); height: 30px; }
.wb-sign-cap {
  font-family: var(--font-placard); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px;
}
.wb-source {
  margin-top: 12px; font-size: 11px; color: var(--ink-3); line-height: 1.6;
}

/* ---------- print ---------- */

@media print {
  :root { --ground: #fff; --surface: #fff; --surface-2: #fff; --shadow: none; }
  body { background: #fff; font-size: 11px; }
  .wb-head { position: static; border-bottom: 1.5px solid #000; }
  .wb-head-right .wb-btn, .wb-seg { display: none; }
  .wb-editor, .wb-chips { display: none; }
  .wb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .wb-panel { break-inside: avoid; border-color: #999; }
  .wb-decl { break-inside: avoid; }
  .env-legend { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- WCA approval chip (header) ---------- */

.wb-cert-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 13px 5px 10px;
  font-family: var(--font-placard);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-cert-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); }
.wb-cert-chip.is-ok { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.wb-cert-chip.is-ok .dot { background: var(--good); }
.wb-cert-chip.is-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.wb-cert-chip.is-warn .dot { background: var(--warn); }
.wb-cert-chip:hover { border-color: var(--accent); }

.wb-decl-cert { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.wb-decl-cert.is-warn { color: var(--warn); }

.wb-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.wb-btn-primary:hover { filter: brightness(1.08); color: var(--on-accent); }
.wb-btn:disabled { opacity: .45; cursor: not-allowed; }
.wb-btn:disabled:hover { border-color: var(--line); color: var(--ink); }
.wb-btn-sm { padding: 3px 9px; font-size: 12px; }

/* ---------- setup & certification page ---------- */

.cfg-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 14px;
  align-items: start;
  padding-top: 14px;
}
@media (max-width: 1000px) { .cfg-wrap { grid-template-columns: minmax(0, 1fr); } }
.cfg-main, .cfg-aside { display: flex; flex-direction: column; gap: 14px; }
.cfg-aside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); }
@media (max-width: 1000px) { .cfg-aside { position: static; } }

.cfg-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
  font-size: 13px;
}
.cfg-dl dt {
  font-family: var(--font-placard);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: baseline;
}
.cfg-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

table.cfg-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-data);
  font-size: 12.5px;
}
table.cfg-table th {
  font-family: var(--font-placard);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.cfg-table th:first-child { text-align: left; padding-left: 0; }
table.cfg-table td {
  text-align: right;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  white-space: nowrap;
}
table.cfg-table td:first-child {
  text-align: left; padding-left: 0;
  font-family: var(--font-body); font-size: 13px; color: var(--ink-2);
}
.cfg-table .cfg-k { color: var(--ink-3); font-size: 11.5px; }
.cfg-table-sm { font-size: 11.5px; }
.cfg-table-sm td { padding: 2px 6px; }

.cfg-split { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 720px) { .cfg-split { grid-template-columns: minmax(0, 1fr); } }
.cfg-envelope svg { width: 100%; height: auto; }

.cfg-fuel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .cfg-fuel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cfg-note { font-size: 12px; color: var(--ink-3); margin: 10px 0 0; max-width: 68ch; }

.cfg-sum {
  font-family: var(--font-data);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* source data flags */
.cfg-panel-alert { border-color: var(--warn); }
.cfg-flags { display: flex; flex-direction: column; gap: 8px; }
.cfg-flag {
  display: grid;
  grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
  gap: 2px 16px;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface-2);
}
@media (max-width: 600px) { .cfg-flag { grid-template-columns: minmax(0, 1fr); } }
.cfg-flag-k {
  font-family: var(--font-placard);
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cfg-flag-v { font-family: var(--font-data); font-size: 12px; color: var(--ink); }
.cfg-flag-v em { font-style: normal; color: var(--ink-3); padding: 0 4px; }
.cfg-flag-n { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.cfg-flag.is-ok { border-left-color: var(--good); }
.cfg-flag.is-minor { border-left-color: var(--warn); background: var(--warn-soft); }
.cfg-flag.is-major { border-left-color: var(--crit); background: var(--crit-soft); border-color: var(--crit); }
.cfg-flag.is-major .cfg-flag-k, .cfg-flag.is-major .cfg-flag-v, .cfg-flag.is-major .cfg-flag-n { color: var(--crit); }

/* certification form */
.cfg-check { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cfg-check label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.cfg-check input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.cfg-check input:checked + span { color: var(--ink); }

.cfg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .cfg-fields { grid-template-columns: minmax(0, 1fr); } }
.cfg-fields .wb-field input { width: 100%; }
.cfg-form textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  width: 100%;
  resize: vertical;
}

.cfg-sig-wrap { margin: 14px 0; }
.cfg-sig-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.cfg-sig-head label {
  font-family: var(--font-placard);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cfg-sig {
  display: block;
  width: 100%;
  height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  touch-action: none;
  cursor: crosshair;
}
.cfg-sig-rule {
  font-family: var(--font-placard);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-top: 4px;
}

.cfg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cfg-ready { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* issued certificate */
.cfg-cert { border-left: 4px solid var(--line); padding-left: 12px; }
.cfg-cert.is-ok { border-left-color: var(--good); }
.cfg-cert.is-warn { border-left-color: var(--warn); }
.cfg-cert.is-bad { border-left-color: var(--crit); }
.cfg-cert-state {
  font-family: var(--font-placard);
  font-size: 17px;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cfg-cert.is-ok .cfg-cert-state { color: var(--good); }
.cfg-cert.is-warn .cfg-cert-state { color: var(--warn); }
.cfg-cert.is-bad .cfg-cert-state { color: var(--crit); }
.cfg-cert-warn { font-size: 12.5px; color: var(--warn); margin: 0 0 10px; }
.cfg-cert.is-bad .cfg-cert-warn { color: var(--crit); }
.cfg-cert-body {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 14px;
  margin: 0 0 12px;
  font-size: 13px;
}
.cfg-cert-body dt {
  font-family: var(--font-placard);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cfg-cert-body dd { margin: 0; overflow-wrap: anywhere; }
.cfg-mono { font-family: var(--font-data); font-size: 12px; }
.cfg-diff { color: var(--warn); }
.cfg-sig-shown {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 6px 10px 8px;
  background: var(--surface-2);
  margin-bottom: 12px;
}
.cfg-sig-shown img { display: block; max-height: 80px; width: auto; max-width: 100%; }
.cfg-sig-shown span {
  display: block;
  border-top: 1px solid var(--ink-3);
  padding-top: 4px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
}

@media print {
  .cfg-aside { position: static; }
  .cfg-wrap { grid-template-columns: minmax(0, 1fr); }
  .cfg-check input { -webkit-appearance: checkbox; appearance: checkbox; }
  .wb-cert-chip { border-color: #000; }
}

.wb-tail-pick {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 0 18px 0 0;
  margin: 0;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 6px top 7px, right 2px top 7px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.wb-tail-pick:hover { color: var(--accent); }
.wb-tail-pick option { background: var(--surface); color: var(--ink); }

/* ---------- quick fill ---------- */

.wb-quick {
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  padding: 9px 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wb-quick-row { display: flex; align-items: center; gap: 7px; }
.wb-quick-k {
  font-family: var(--font-placard);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 42px;
  flex: none;
}
.wb-quick-fill { flex: 1; justify-content: center; }
.wb-quick-n {
  font-family: var(--font-data);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 44px;
  text-align: center;
}
.wb-step {
  appearance: none;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.wb-step:hover { border-color: var(--accent); color: var(--accent); }
.wb-step:active { background: var(--accent-soft); }
.wb-quick-sel {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 22px 7px 9px;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 10px top 15px, right 6px top 15px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.wb-quick-sel:hover { border-color: var(--accent); }

.wb-presets { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 9px; }
.wb-presets .wb-chip { flex: 1; justify-content: center; min-width: 58px; }

@media print { .wb-quick, .wb-presets { display: none; } }

/* ---------- setup page: guided checks ---------- */

.cfg-check li { display: flex; align-items: flex-start; gap: 8px; }
.cfg-check label { flex: 1; min-width: 0; }
.cfg-check-goto {
  appearance: none;
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--font-placard);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.cfg-check-goto:hover { border-color: var(--accent); color: var(--accent); }

@keyframes cfgFlash {
  0%   { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.cfg-flash { animation: cfgFlash 1.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .cfg-flash { animation: none; border-color: var(--accent); }
}

.cfg-sig-tools { display: flex; align-items: center; gap: 7px; }
.cfg-sig-modes button { padding: 3px 10px; font-size: 12px; }
.cfg-sig-typed {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 22px 12px;
  font-family: 'Barlow Condensed', cursive, sans-serif;
  font-size: 30px;
  letter-spacing: .02em;
}
.cfg-sig-script {
  font-family: 'Barlow Condensed', cursive, sans-serif;
  font-size: 28px;
  color: var(--ink);
  padding: 4px 2px 6px;
}

/* ---------- approval gate ---------- */

.wb-gate {
  margin-top: 14px;
  border: 1px solid var(--warn);
  border-left-width: 5px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 10px;
  padding: 11px 14px;
}
.wb-gate.is-bad { border-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.wb-gate-mark {
  font-family: var(--font-placard);
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wb-gate p { margin: 4px 0 0; font-size: 12.5px; max-width: 86ch; }

@media print {
  /* An unapproved sheet must not be able to look like an approved one. */
  .wb-gate {
    border: 2px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .wb-gate-mark { font-size: 19px; }
  #wbSheet:has(.wb-gate:not([hidden])) .wb-decl::after {
    content: 'NOT WCA APPROVED';
    display: block;
    grid-column: 1 / -1;
    margin-top: 8px;
    font-family: var(--font-placard);
    font-size: 17px;
    letter-spacing: .22em;
    border: 2px solid #000;
    padding: 5px 9px;
    text-align: center;
  }
}

/* ---------- embedded mode ---------- */
/* Mounted inside a host that owns the page — the CMS Aircraft section. The
   module drops its brand lockup, its aircraft picker and its sticky header,
   and stops claiming the page's own gutters. */

.wb-root--embedded { display: block; }

.wb-head--embedded {
  position: static;
  margin-inline: 0;
  padding: 0 0 10px;
  background: transparent;
  gap: 10px;
}
.wb-root--embedded .wb-sector { padding-top: 10px; }
.wb-root--embedded .wb-gate { margin-top: 0; }
.wb-root--embedded .cfg-aside { top: 12px; }

.wb-gate-list { margin: 7px 0 0; padding-left: 18px; font-size: 12.5px; }
.wb-gate-list li { margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- Part B amendments ---------- */
/* The one editable part of the W&B data. Styled to read like the paper form:
   a weighed baseline, each alteration, and the running total that the
   loadsheet actually calculates on. */

.cfg-chip {
  font: inherit; font-size: 11.5px; font-family: var(--font-placard);
  letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.cfg-chip:hover { border-color: var(--accent); color: var(--accent); }

.am-table td, .am-table th { white-space: nowrap; }
/* Date and alteration read as text, left-aligned; everything after them is a
   figure, so it is right-aligned and tabular. */
.am-table th:nth-child(-n+2), .am-table td:nth-child(-n+2) { text-align: left; }
.am-table th:nth-child(2), .am-table td:nth-child(2) { white-space: normal; min-width: 180px; }
.am-table th:nth-child(n+3), .am-table td:nth-child(n+3) { text-align: right; }
.am-table td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
.am-date { font-family: var(--font-data); font-size: 12px; color: var(--ink-3); }
.am-desc { color: var(--ink); }
.am-ref { display: block; font-size: 11px; color: var(--ink-3); }
.am-pos { color: var(--ink); }
.am-neg { color: var(--ink-2); }
.am-strike { text-align: right; }

.am-table tr.am-base td { background: var(--surface-2); color: var(--ink-2); }
.am-table tr.am-effective td {
  font-weight: 600; color: var(--ink);
  border-top: 1.5px solid var(--line);
  background: var(--surface-2);
}

.am-advice {
  border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn);
  border-radius: 9px; padding: 9px 11px; margin-bottom: 10px; font-size: 12.5px;
}
.am-advice p { margin: 0 0 4px; }
.am-advice p:last-child { margin-bottom: 0; }

.am-add, .am-lock {
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px; margin-top: 12px; background: var(--surface-2);
}
.am-add-head, .am-lock-head {
  font-family: var(--font-placard); font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px;
}
.am-add-grid { display: grid; gap: 9px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.am-f-date { grid-column: span 3; }
.am-f-desc { grid-column: span 9; }
.am-f-sign { grid-column: span 3; }
.am-f-wt   { grid-column: span 2; }
.am-f-arm  { grid-column: span 2; }
.am-f-ref  { grid-column: span 5; }
@media (max-width: 720px) {
  .am-f-date, .am-f-desc, .am-f-sign, .am-f-wt, .am-f-arm, .am-f-ref { grid-column: span 12; }
}
.am-add-grid .wb-field input { width: 100%; }
.am-f-sign .wb-seg { width: 100%; }
.am-f-sign .wb-seg button { flex: 1; }

.am-prev {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.am-prev b { color: var(--ink); font-family: var(--font-data); }
.am-prev-idle { color: var(--ink-3); }
.am-delta { color: var(--ink-3); font-family: var(--font-data); font-size: 11.5px; }
.am-prev-flag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); font-size: 11px;
}
.am-add-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.am-add-actions .cfg-note { margin: 0; flex: 1 1 220px; }

.am-err {
  margin-top: 9px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid var(--crit); background: var(--crit-soft); color: var(--crit);
}

.am-lock.is-ok { border-color: var(--good); }
.am-lock.is-ok .am-lock-head { color: var(--good); }
.am-lock.is-bad { border-color: var(--crit); background: var(--crit-soft); }
.am-lock.is-bad .am-lock-head { color: var(--crit); }
.am-lock p { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); }
.am-lock-dl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px;
  margin: 0 0 9px; font-size: 12.5px;
}
.am-lock-dl dt { color: var(--ink-3); }
.am-lock-dl dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.am-breaches { margin: 0 0 9px; padding-left: 18px; font-size: 12.5px; color: var(--crit); }
.am-lock-form .wb-field input, .am-unlock .wb-field input { width: 100%; }
.am-lock-form { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
@media (max-width: 720px) { .am-lock-form { grid-template-columns: minmax(0, 1fr); } }
.am-unlock { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.am-unlock .wb-field { flex: 1 1 220px; }
.am-why { margin-top: 12px; }

@media print {
  .am-add, .am-lock-form, .am-unlock, .am-strike, .am-prev { display: none; }
}

/* V5.5.195 — touch targets. On a touch screen (the Cockpit iPad, a phone on the ramp) every control on
   the sheet is at least 44 px, Apple's minimum for a reliable tap. A desktop with a mouse keeps the
   compact layout unchanged. */
@media (pointer: coarse) {
  .wb-btn, .wb-seg button, .wb-input, .wb-field input, .wb-sheet select, .wb-wrap select { min-height: 44px; }
  .wb-step { width: 44px; height: 44px; }
  .cfg-check input { width: 24px; height: 24px; }
}
.wb-btn.is-undo { border-color: var(--accent); color: var(--accent); }

/* V5.5.209 — a couch along the cabin wall, drawn once behind its places */
.couch-frame { fill: var(--seat-leather); stroke: var(--seat-stitch); stroke-width: 1.3; opacity: .55; }
.wb-editor-note { margin: 6px 0 2px; font-size: 12px; font-weight: 700; color: var(--warn); }