/* The airline fleet guide, styled like a page in the airline's own app: its colour across the header with the
   logo, a white feature card with the selected aircraft (its tail painted in the airline's colour) and tidy
   figures, then the fleet as list rows. Light and calm, like the rest of Airframe. Scoped to the dialog. */
html[data-theme] .modal.loadout-dialog{
  position:fixed;inset:0;width:100%;max-width:480px;height:var(--visible-height,100dvh);max-height:none;margin:0 auto;padding:0;
  border:0;border-radius:0;background:var(--bg);color:var(--text);box-shadow:none;overflow:hidden}
html[data-theme] .modal.loadout-dialog::backdrop{background:#1c344955}
@media(min-width:520px) and (min-height:900px){html[data-theme] .modal.loadout-dialog{height:860px;margin:auto;border-radius:24px;box-shadow:0 30px 90px #1c344940}}
.modal.loadout-dialog #modal-content{height:100%}
html[data-theme] .modal.loadout-dialog .modal-top{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;z-index:5;margin:0}
html[data-theme] .modal.loadout-dialog .icon-button{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:var(--lo-on,#fff)}
html[data-theme] .modal.loadout-dialog:has(.loadout[style*="--lo-on:#14212b"]) .icon-button{background:rgba(20,33,43,.1);color:#14212b}
html[data-theme] .modal.loadout-dialog .icon-button:hover{background:rgba(255,255,255,.3)}

.loadout{display:flex;flex-direction:column;height:100%;overflow-y:auto;overscroll-behavior:contain;font-family:var(--sans);-webkit-font-smoothing:antialiased;scrollbar-width:none}
.loadout::-webkit-scrollbar{display:none}

/* Header band in the airline's colour, with a thin accent stripe, like the top of an airline app. */
.lo-band{flex:none;display:flex;align-items:center;gap:13px;padding:calc(env(safe-area-inset-top) + 18px) 64px 40px 18px;
  background:var(--lo-brand);color:var(--lo-on);box-shadow:inset 0 -4px 0 var(--lo-accent)}
.lo-logo{position:relative;display:grid;flex:none;place-items:center;width:52px;height:52px;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.lo-letter{font:750 15px/1 var(--sans);letter-spacing:.02em;color:var(--lo-text)}
.lo-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.lo-logo.has-logo .lo-letter{visibility:hidden}
.lo-head-text{min-width:0}
.lo-kicker{display:block;font:650 10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.modal.loadout-dialog .lo-title{margin:4px 0 0;padding:0;min-height:0;overflow:hidden;font:650 23px/1.1 var(--sans);letter-spacing:-.4px;color:inherit;text-overflow:ellipsis;white-space:nowrap}

.lo-body{flex:1 0 auto;display:flex;flex-direction:column;gap:10px;margin-top:-26px;padding:0 14px calc(env(safe-area-inset-bottom) + 14px)}

/* Feature card: role, name, the drawing on its ground line, and boarding-pass style figures. */
.lo-feature{position:relative;flex:none;padding:16px 16px 12px;border-radius:20px;background:var(--panel);box-shadow:0 10px 30px -14px #1c344966,0 0 0 1px #1c34490d}
.lo-plate{display:grid;gap:3px}
.lo-role{font:650 10px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lo-text)}
.lo-name{font:650 27px/1.05 var(--sans);letter-spacing:-.6px;color:var(--text)}
.lo-maker{font-size:12px;color:var(--muted)}
.lo-hero{position:relative;height:clamp(84px,21vh,180px);margin:6px -4px 2px}
.lo-hero svg{display:block;width:100%;height:100%}
.loadout .airframe-art{--af-tail:var(--lo-tail);--af-mark:var(--lo-accent)}
.lo-hero .af-shadow{opacity:.1}
.lo-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding-top:10px;border-top:1px dashed var(--line)}
.lo-specs>div{min-width:0;padding:0 6px}
.lo-specs>div+div{border-left:1px solid var(--line)}
.lo-specs>div:first-child{padding-left:0}
.lo-specs dt{font:650 9px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lo-specs dd{margin:3px 0 0;font:600 14px/1.2 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.modal.loadout-dialog .lo-note{display:-webkit-box;flex:none;margin:0 4px;overflow:hidden;font-size:12px;line-height:1.45;color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* The fleet as list rows in one card: a small drawing, what it is used for and the model; the selected row is
   tinted and edged in the airline's colour. Secondary rows step through their aircraft. */
.lo-slots{flex:none;margin:0;padding:4px;list-style:none;border-radius:18px;background:var(--panel);box-shadow:0 0 0 1px #1c34490d}
.lo-slot{position:relative;display:flex;align-items:center;border-radius:14px;transition:background .2s}
.lo-slot+.lo-slot::before{content:'';position:absolute;top:0;left:84px;right:12px;height:1px;background:var(--line)}
.lo-slot.is-selected{background:color-mix(in srgb,var(--lo-brand) 7%,#fff);box-shadow:inset 3px 0 0 var(--lo-brand)}
.lo-slot.is-selected::before,.lo-slot.is-selected+.lo-slot::before{opacity:0}
.lo-pick{flex:1;display:flex;align-items:center;gap:12px;min-width:0;min-height:54px;padding:6px 10px;border:0;border-radius:14px;background:none;color:var(--text);text-align:left}
.lo-thumb{display:block;flex:none;width:62px;height:26px}
.lo-thumb svg{display:block;width:100%;height:100%}
.lo-thumb .af-shadow,.lo-thumb .af-ground{display:none}
.lo-slot-text{display:block;min-width:0}
.lo-slot-text small{display:block;overflow:hidden;font:600 10px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.lo-slot.is-selected .lo-slot-text small{color:var(--lo-text)}
.lo-slot-text strong{display:block;font:650 15.5px/1.25 var(--sans);letter-spacing:-.2px}
.lo-cycle{display:flex;flex:none;align-items:center;padding-right:4px}
.lo-arrow{display:grid;place-items:center;width:34px;height:44px;border:0;border-radius:10px;background:none;color:var(--muted)}
.lo-arrow:hover{color:var(--lo-text);background:#1c34490a}
.lo-arrow .icon{width:15px;height:15px;stroke-width:2}
.lo-prev .icon{transform:scaleX(-1)}
.lo-count{min-width:26px;font:600 11px var(--sans);text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}

.lo-equip{display:flex;flex:none;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;margin-top:auto;border:0;border-radius:14px;
  background:var(--lo-brand);color:var(--lo-on);font:650 15px var(--sans);box-shadow:0 8px 20px -12px var(--lo-brand)}
.lo-equip .icon{width:17px;height:17px;stroke-width:2.2}
.lo-equip:active{transform:scale(.98)}
.loadout :focus-visible{outline:2px solid var(--lo-text);outline-offset:2px}
.lo-band :focus-visible{outline-color:var(--lo-on)}

/* Regional aircraft without a drawn plate get a quiet schematic in the same ink, with hairline outlines at any size. */
.lo-schematic{display:block;width:100%;height:100%}
.lo-schematic :is(.lo-sch-body,.lo-sch-fin,.lo-sch-wing,.lo-sch-engine,.lo-sch-ground){vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lo-sch-body{fill:#fff;stroke:#1c3449;stroke-width:1.2}
.lo-sch-fin{fill:var(--lo-tail);stroke:#1c3449;stroke-width:1.1}
.lo-sch-wing,.lo-sch-engine{fill:#e4eaee;stroke:#1c3449;stroke-width:1}
.lo-sch-prop{fill:#1c344933}
.lo-sch-glass{fill:#1c3449}
.lo-sch-windows{fill:none;stroke:#2f5a77;stroke-width:.9;stroke-linecap:round}
.lo-sch-ground{fill:none;stroke:var(--line);stroke-width:1}
.lo-schematic.is-thumb .lo-sch-ground{display:none}
.lo-schematic.is-thumb .lo-sch-windows{stroke-width:1.4}

/* Short phones: a slimmer header and smaller drawing so the whole page fits without scrolling. */
@media(max-height:700px){
  .lo-band{gap:11px;padding-top:calc(env(safe-area-inset-top) + 12px);padding-bottom:34px}
  .lo-logo{width:44px;height:44px;border-radius:12px}
  .modal.loadout-dialog .lo-title{font-size:20px}
  .lo-feature{padding:12px 14px 10px}
  .lo-name{font-size:23px}
  .lo-hero{height:clamp(64px,13vh,96px);margin-top:2px}
  .modal.loadout-dialog .lo-note{display:none}
  .lo-pick{min-height:46px;padding-top:3px;padding-bottom:3px}
  .lo-body{gap:8px}
  .lo-equip{min-height:46px}
}
@media(prefers-reduced-motion:no-preference){
  .lo-hero.is-swapping svg{animation:lo-in .32s cubic-bezier(.2,.8,.2,1) both}
  .lo-plate,.lo-specs{animation:lo-fade .25s ease-out both}
  .loadout{animation:lo-sheet .34s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes lo-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes lo-fade{from{opacity:.2}to{opacity:1}}
@keyframes lo-sheet{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}