/* Airframe illustrations. Drawn in metres; strokes stay hairline-crisp at every size. */
.airframe-art{display:block;width:100%;height:auto;overflow:visible;
  --af-body:#fff;--af-ink:#1c3449;--af-line:#93a5b2;--af-window:#2f5a77;--af-door:#7d93a3;--af-tail:#244c66;--af-mark:#ad865a;--af-engine:#eef2f5;--af-wing:#e4eaee;--af-shadow:#1c3449;--af-ghost:#ad865a;--af-seat:#cfdae1;--af-hold:#eef2f5;--af-belly:#e3e9ed;
  --af-lip:#c9d4dc;--af-core:#bccad4;--af-plug:#8d9fad;--af-strut:#8597a6;--af-oleo:#e2e9ee;--af-tyre:#22374a;--af-hub:#c2ced7;--af-beacon:#d0533e;--af-glass:#1c3449;--af-mask:#0d1b26;--af-glint:rgba(255,255,255,.6);--af-panel:#a9b8c3;--af-hinge:#bccad3}

/* Only outlines keep a hairline at every size; filled shapes and window strokes scale with the drawing. */
:is(.af-body,.af-fairing,.af-fin,.af-wing,.af-stab,.af-nacelle,.af-pylon,.af-plug,.af-core,.af-lip,.af-doors,.af-ground,.af-ghost path,.af-dim path,.af-floor,.af-seat,.af-hold){vector-effect:non-scaling-stroke}
/* Detail is drawn in metres: panel lines, hinges and gear trim thin out as a drawing shrinks, so a thumbnail
   stays clean and a large plate shows every seam. */
.af-shadow{fill:var(--af-shadow);opacity:.07}
.af-body{fill:url(#af-body-shade) var(--af-body);stroke:var(--af-ink);stroke-width:1.15;stroke-linejoin:round}
.af-fin{fill:var(--af-tail);stroke:var(--af-ink);stroke-width:1.15;stroke-linejoin:round}
.af-mark{fill:var(--af-mark)}
.af-windows{fill:none;stroke:var(--af-window);stroke-linecap:round}
.af-doors{fill:none;stroke:var(--af-door);stroke-width:.8;stroke-linejoin:round}
.af-wing,.af-stab{fill:var(--af-wing);stroke:var(--af-ink);stroke-width:.9;stroke-linejoin:round}
.af-nacelle{fill:url(#af-nacelle-shade) var(--af-engine);stroke:var(--af-ink);stroke-width:1.1;stroke-linejoin:round}
.af-pylon{fill:var(--af-wing);stroke:var(--af-ink);stroke-width:.9;stroke-linejoin:round}
.af-plug{fill:var(--af-plug);stroke:var(--af-ink);stroke-width:.8;stroke-linejoin:round}
.af-core{fill:var(--af-core);stroke:var(--af-ink);stroke-width:.8;stroke-linejoin:round}
.af-lip{fill:var(--af-lip);stroke:var(--af-ink);stroke-width:.7;stroke-linejoin:round}
.af-intake{fill:var(--af-mask);opacity:.85}
.af-seam{fill:none;stroke:var(--af-panel);stroke-width:.05}
.af-fairing{fill:url(#af-body-shade) var(--af-body);stroke:var(--af-ink);stroke-width:.9;stroke-linejoin:round}
.af-panel{fill:none;stroke:var(--af-panel);stroke-width:.06;stroke-linecap:round}
.af-hinge{fill:none;stroke:var(--af-hinge);stroke-width:.06;stroke-linecap:round;stroke-linejoin:round}
.af-hinge-dark{stroke:rgba(255,255,255,.2)}
.af-portholes{fill:none;stroke:var(--af-window);stroke-width:.19;stroke-linecap:round}
.af-mask{fill:var(--af-mask)}
.af-glass{fill:var(--af-glass)}
.af-glint{fill:none;stroke:var(--af-glint);stroke-width:.07;stroke-linecap:round}
.af-apu{fill:var(--af-tyre)}
.af-antenna{fill:var(--af-strut)}
.af-beacon{fill:var(--af-beacon)}
.af-ground{fill:none;stroke:var(--af-line);stroke-width:.8;opacity:.55}
.af-strut{fill:var(--af-strut);stroke:var(--af-ink);stroke-width:.04}
.af-oleo{fill:var(--af-oleo);stroke:var(--af-strut);stroke-width:.04}
.af-gear-door{fill:var(--af-belly);stroke:var(--af-strut);stroke-width:.05}
.af-brace{fill:none;stroke:var(--af-strut);stroke-width:.09;stroke-linecap:round;stroke-linejoin:round}
.af-tyre{fill:var(--af-tyre)}
.af-hub{fill:var(--af-hub)}
.af-canoe{stroke:var(--af-line)}
.af-ghost path{fill:none;stroke:var(--af-ghost);stroke-width:1.3;stroke-dasharray:4 3;stroke-linejoin:round}
.af-dim path{fill:none;stroke:var(--af-line);stroke-width:1}
.af-dim text{fill:var(--af-line);font:500 1.7px var(--sans)}
.af-marker path{fill:var(--af-ink)}
.af-marker text{fill:var(--af-ink);font:650 2.3px var(--sans);font-variant-numeric:tabular-nums}
.af-marker-ghost path{fill:var(--af-ghost)}
.af-marker-ghost text{fill:var(--af-ghost)}
.af-floor{stroke:var(--af-line);stroke-width:1}
.af-seat{fill:var(--af-seat);stroke:var(--af-window);stroke-width:.7}
.af-hold{fill:var(--af-hold);stroke:var(--af-line);stroke-width:.7}
.airframe-section .af-dim text{font-size:.42px}
.airframe-section .af-body{fill:var(--af-body)}

/* Figures, the details plate and the fleet guide. */
.airframe-figure{margin:14px 0 4px}
.airframe-figure figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px;font:600 9.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.af-key-ghost{display:inline-flex;align-items:center;gap:6px;color:#ad865a;letter-spacing:.04em;text-transform:none;font-weight:500;font-size:11px}
.af-key-ghost:before{content:'';width:16px;border-top:1.5px dashed currentColor}

#result-content .result-airframe{margin:6px 0 2px}
.airframe-plate{margin:6px 0 18px}
.airframe-plate-row{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:20px;margin-top:8px}
.airframe-plate .airframe-section{width:118px}
.airframe-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0}
.airframe-facts dt{font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.airframe-facts dd{margin:3px 0 0;font:550 15px/1.2 var(--sans);color:var(--text);font-variant-numeric:tabular-nums}
.fleet-link,.fleet-back{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px}
.fleet-link .icon,.fleet-back .icon{width:14px;height:14px}
.fleet-back{margin:0 0 6px}.fleet-back .icon{transform:rotate(180deg)}
.modal.fleet-dialog{max-width:860px}
.fleet-tabs{display:flex;gap:6px;margin:2px 0 8px}
.fleet-tab{min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:600 12px var(--sans);cursor:pointer}
.fleet-tab[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.fleet-list{list-style:none;margin:0;padding:0}
.fleet-row{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:end;gap:14px;width:100%;padding:12px 6px 8px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:6px}
.fleet-row:hover,.fleet-row:focus-visible{background:color-mix(in srgb,var(--lime) 6%,transparent)}
.fleet-name strong{display:block;font:600 14px/1.2 var(--sans);color:var(--text)}
.fleet-name small{display:block;margin-top:3px;font-size:10.5px;line-height:1.35;color:var(--muted)}
.app-footer .fleet-footer{display:inline-flex;align-items:center;gap:6px}
.app-footer .fleet-footer .icon{width:14px;height:14px}
@media(max-width:620px){.fleet-row{grid-template-columns:1fr;gap:4px}.airframe-plate-row{grid-template-columns:84px minmax(0,1fr);gap:14px}.airframe-plate .airframe-section{width:84px}.airframe-facts dd{font-size:13px}}
html[data-layout=mobile] .airframe-figure figcaption>span:first-child:not(:only-child){display:none}

/* Picker preview text, shared by every layout. */
.preview-copy{min-width:0}
.preview-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.preview-title strong{font:600 15px/1.2 var(--sans);color:var(--text);white-space:nowrap}
.preview-title span{font:500 12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.preview-line{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--muted)}

.preview-art{min-width:0}
.af-craft{transform-origin:0 0}
.preview-scale{font:600 9px/1.4 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.variant-stage{display:none}

/* Desktop: the aircraft panel takes two thirds of the app, and the variant tray most of the picker.
   Nothing on the stage moves between choices: one 0–80 m runway for every aircraft, a caption of fixed
   height, and one row of five variant slots. The drawing is limited by the tray's width, so the family
   column stays narrow and the sketch gets the rest. */
html[data-layout=desktop] .workspace{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
html[data-layout=desktop] .workspace #result-content{max-width:560px}
html[data-theme][data-layout=desktop] .workspace .guess-panel{--picker-height:300px}
html[data-theme][data-layout=desktop] .workspace .picker-space{grid-template-columns:minmax(0,28fr) minmax(0,72fr)}
html[data-theme][data-layout=desktop] .workspace .family-choice .choice-copy strong{font-size:18px}
html[data-theme][data-layout=desktop] .workspace .variant-tray{display:flex;flex-direction:column;gap:10px;container-type:inline-size}
html[data-theme][data-layout=desktop] .workspace .picker-empty{display:none}
html[data-layout=desktop] .variant-stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 40px;flex:1 1 auto;gap:8px;min-height:0}
html[data-layout=desktop] .variant-stage .preview-art{min-height:0;height:100%}
html[data-layout=desktop] .variant-stage .preview-art .airframe-art{width:100%;height:100%}
html[data-layout=desktop] .variant-stage .preview-copy{min-height:0;overflow:hidden}
html[data-layout=desktop] .variant-stage .preview-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-layout=desktop] .variant-stage .preview-title strong{font-size:16px}
html[data-layout=desktop] .variant-stage.is-hover .preview-title strong{color:var(--lime)}
html[data-theme][data-layout=desktop] .workspace .variant-options,html[data-theme][data-layout=desktop] .workspace .variant-options[data-count]{flex:none;display:grid;height:40px;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:40px;gap:6px}
html[data-theme][data-layout=desktop] .workspace .variant-choice{min-height:40px;padding:3px 4px}
html[data-theme][data-layout=desktop] .workspace .variant-choice .choice-copy{gap:2px}
html[data-theme][data-layout=desktop] .workspace .variant-choice strong{font-size:13.5px;letter-spacing:-.25px;white-space:nowrap}
/* Desktop slots fit every name on one line, and Chrome breaks at <wbr> even without wrapping, so the hint is
   removed here. Phones keep it, so the longest names (A330-900neo) can take two lines in their slot. */
html[data-theme][data-layout=desktop] .workspace .variant-choice strong wbr{display:none}
html[data-theme][data-layout=desktop] .workspace .variant-choice small{font-size:9px}
/* Narrower trays keep the single row with smaller type. Below 440 px, where the longest names no longer fit
   five across, slots go three across, and only the five-variant families (A320 and 737) take a second row. */
@container (max-width:479px){
  html[data-theme][data-layout=desktop] .workspace .variant-choice strong{font-size:12px;letter-spacing:-.3px}
  html[data-theme][data-layout=desktop] .workspace .variant-choice small{font-size:8.5px}
}
@container (max-width:439px){
  html[data-theme][data-layout=desktop] .workspace .variant-options,html[data-theme][data-layout=desktop] .workspace .variant-options[data-count]{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-theme][data-layout=desktop] .workspace .variant-options:is([data-count="4"],[data-count="5"]){height:86px;grid-template-rows:repeat(2,40px)}
}

/* Hovering a family on desktop: every variant stacked at one scale, nose to nose, in the stage above the
   buttons, so lengths compare at a glance. Names and lengths sit in a column to the left of each nose. */
html[data-layout=desktop] .variant-stage[data-state=stack]{grid-template-rows:auto minmax(0,1fr);gap:4px}
.stack-head{display:flex;align-items:baseline;gap:8px;min-width:0;padding-right:2px}
.stack-head strong{font:600 16px/1.2 var(--sans);color:var(--lime);white-space:nowrap}
.stack-head span{font:500 12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stack-head .preview-scale{margin-left:auto}
.preview-stack{min-height:0;display:grid;grid-template-rows:repeat(var(--rows),minmax(0,1fr));margin:0;padding:0;list-style:none}
.stack-row{position:relative;display:flex;align-items:center;min-height:0}
.stack-row+.stack-row{border-top:1px dotted color-mix(in srgb,var(--line) 70%,transparent)}
html[data-layout=desktop] .variant-stage .stack-row .airframe-art{position:absolute;inset:0 0 0 112px;width:calc(100% - 112px);height:100%;margin:0}
.stack-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 6px;width:112px;min-width:0;font:500 11px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stack-label strong{font:600 12.5px var(--sans);color:var(--text);letter-spacing:-.1px}
.stack-label b{flex-basis:100%;font-size:8px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#ad865a}

.stack-row.is-selected .stack-label strong{color:var(--lime)}

/* Phone layout (every width, desktop included): families take the left third; the right two thirds hold the
   sketch on the one 0–80 m runway, with a quiet ruler, a two-line caption, and the variant buttons
   beneath. The sketch keeps the frame's aspect ratio at the tray's width, and the buttons always reserve two
   rows, so the picker's height depends only on the screen's width and nothing moves between choices. */
html[data-theme][data-layout=mobile] .workspace .picker-space{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
html[data-theme][data-layout=mobile] .workspace .family-choice .choice-copy strong{font-size:14px;letter-spacing:-.3px}
/* The sketch shows on any phone at least 640 px tall: an iPhone in Safari with its toolbars showing is about
   660 px, an iPhone mini about 630, so the minis and the SE keep the plain buttons and a usable map. */
@media(min-height:640px){
  html[data-theme][data-layout=mobile] .workspace .picker-space{height:auto}
  html[data-theme][data-layout=mobile] .workspace .variant-tray{display:flex;flex-direction:column;gap:6px}
  html[data-theme][data-layout=mobile] .workspace .picker-empty{display:none}
  html[data-layout=mobile] .variant-stage{position:relative;display:flex;flex:none;flex-direction:column;gap:4px;min-height:0}
  html[data-layout=mobile] .variant-stage .preview-art{aspect-ratio:83/32}
  html[data-layout=mobile] .variant-stage .preview-art .airframe-art{width:100%;height:100%}
  html[data-layout=mobile] .variant-stage .preview-copy{height:34px;overflow:hidden}
  html[data-layout=mobile] .variant-stage .preview-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-layout=mobile] .variant-stage .preview-title{gap:6px}
  html[data-layout=mobile] .variant-stage .preview-title strong{font-size:14px}
  html[data-layout=mobile] .variant-stage .preview-title span{font-size:11px}
  html[data-layout=mobile] .variant-stage .preview-line{margin-top:2px;font-size:10.5px}
  /* Ruler type is set in metres; at phone size it needs to be larger to read at about 9 px. */
  html[data-layout=mobile] .variant-stage .af-dim text{font-size:3.3px}
  html[data-theme][data-layout=mobile] .workspace .variant-options{flex:none;height:auto;min-height:93px;align-content:start;grid-template-rows:none;grid-auto-rows:44px;gap:5px}
  html[data-theme][data-layout=mobile] .workspace .variant-options[data-count="1"]{grid-template-columns:1fr;grid-template-rows:none}
  html[data-theme][data-layout=mobile] .workspace .variant-options:is([data-count="2"],[data-count="4"]){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  html[data-theme][data-layout=mobile] .workspace .variant-options:is([data-count="3"],[data-count="5"]){grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}
  html[data-theme][data-layout=mobile] .workspace .variant-choice{min-height:44px;padding:3px 2px}
  html[data-theme][data-layout=mobile] .workspace .variant-options .variant-choice strong{font-size:12px;letter-spacing:-.25px;white-space:nowrap}
  html[data-theme][data-layout=mobile] .workspace .variant-options:is([data-count="3"],[data-count="5"]) .variant-choice strong{font-size:11px;letter-spacing:-.35px}
  html[data-theme][data-layout=mobile] .workspace .variant-choice small{font-size:8.5px}
}
/* Short phones have no stage, but the variant slots still keep one size and place: two across, three down. */
@media(max-height:639px){
  html[data-theme][data-layout=mobile] .workspace .variant-options[data-count]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  html[data-theme][data-layout=mobile] .workspace .variant-options[data-count] .variant-choice strong{font-size:14px;letter-spacing:-.3px;white-space:nowrap}
}