/* ============================================================
   OPEN SKIES  ·  sectional chart + tired 1970s cockpit
   paper and metal. no glow, no gradients-as-decoration.
   ============================================================ */

@font-face{font-family:'OS Signage';src:url('../fonts/signage.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'OS Mono';src:url('../fonts/mono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'OS Mono';src:url('../fonts/mono-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --cream:#EFE6D2;
  --cream-2:#E4D9C0;
  --cream-3:#D8CBAE;
  --ink:#1B1A17;
  --ink-60:rgba(27,26,23,.60);
  --ink-40:rgba(27,26,23,.40);
  --ink-22:rgba(27,26,23,.22);
  --ink-12:rgba(27,26,23,.12);
  --magenta:#B33A73;
  --blue:#3E6FA8;
  --ochre:#C98A3C;
  --rust:#8C3F2B;
  --sage:#7E8C6E;
  --indigo:#131A2B;
  --amber:#E8A33D;
  --green:#7FA86A;
  --ballpoint:#2C4A8F;
  --sign:'OS Signage','DejaVu Sans Condensed','Arial Narrow','Helvetica Neue',sans-serif;
  --mono:'OS Mono','DejaVu Sans Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --paper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='5'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)' opacity='0.42'/></svg>");
  --hair:1px solid var(--ink-22);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0d1017}
body{
  font-family:var(--mono);
  color:var(--ink);
  font-size:15px;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
}
#app{position:fixed;inset:0;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;background:#8FA9BE}
.filters{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- film treatment: 35mm grain + vignette, no lens flare ---------- */
#film{
  position:absolute;inset:0;pointer-events:none;z-index:40;
  background-image:var(--paper);
  background-size:200px 200px;
  opacity:calc(.17 * var(--grain,.5));
  mix-blend-mode:multiply;
  animation:grainshift .9s steps(3,end) infinite;
}
@keyframes grainshift{
  0%{background-position:0 0}33%{background-position:-70px 40px}66%{background-position:50px -60px}100%{background-position:0 0}
}
#film::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 78% at 50% 50%,rgba(0,0,0,0) 52%,rgba(20,16,10,.30) 100%);
}

/* ---------- shared paper furniture ---------- */
.paper{
  background-color:var(--cream);
  background-image:var(--paper);
  background-blend-mode:multiply;
  color:var(--ink);
  position:relative;
}
.rule{border:0;border-top:var(--hair);margin:.5em 0}
.tick{position:absolute;width:9px;height:9px;border:1px solid var(--ink-40)}
.tick.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.tick.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.tick.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.tick.br{bottom:6px;right:6px;border-left:0;border-top:0}

.lbl{
  font-family:var(--sign);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;color:var(--ink-60);
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.big{font-family:var(--sign);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:.95}
.ball{color:var(--ballpoint);font-style:italic;font-family:var(--mono);filter:url(#fx-hand);display:inline-block}
.stamp{
  display:inline-block;border:2px solid var(--magenta);color:var(--magenta);
  font-family:var(--sign);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  padding:2px 7px;font-size:10.5px;filter:url(#fx-stamp);opacity:.86;
  border-radius:2px;
}
.stamp.rust{border-color:var(--rust);color:var(--rust)}
.stamp.blue{border-color:var(--blue);color:var(--blue)}
.stamp.ink{border-color:var(--ink);color:var(--ink)}

.btn{
  font-family:var(--sign);font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  font-size:12px;padding:9px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;position:relative;border-radius:1px;transition:background .08s linear,color .08s linear;
  user-select:none;
}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--magenta);border-color:var(--magenta);color:#F6EEE0}
.btn.primary:hover{background:#93295C;border-color:#93295C}
.btn.ghost{border-color:var(--ink-40);color:var(--ink-60)}
.btn.ghost:hover{background:var(--ink-12);color:var(--ink)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn.sm{font-size:10.5px;padding:6px 11px;letter-spacing:.12em}

/* ============================================================
   SCREENS
   ============================================================ */
#screens{position:absolute;inset:0;z-index:50;pointer-events:none}
.screen{
  position:absolute;inset:0;display:none;pointer-events:auto;
  align-items:center;justify-content:center;
  background:rgba(19,26,43,.55);
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.screen.on{display:flex}
.screen.clear{background:transparent;align-items:flex-start;justify-content:flex-start}

/* ---------- title ---------- */
#s-title .sheet{
  width:min(880px,96vw);max-height:96vh;overflow:auto;
  padding:clamp(16px,3vw,34px);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}
#s-title h1{
  font-family:var(--sign);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,8.4vw,86px);letter-spacing:.1em;margin:0;line-height:.92;
}
#s-title .sub{margin:.35em 0 0;letter-spacing:.3em;font-size:clamp(10px,1.5vw,13px);color:var(--ink-60);text-transform:uppercase}
#s-title .deck{display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;margin-top:16px;align-items:flex-start}
#s-title .deck p{max-width:44ch;margin:0;font-size:13.5px;color:var(--ink-60)}
.titlegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--ink-22);border:var(--hair);margin-top:18px}
.titlegrid div{background:var(--cream);padding:9px 11px}
.titlegrid .k{display:block;margin-bottom:3px}
.titlegrid .v{font-size:17px}
.keyhint{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
kbd{
  font-family:var(--mono);font-size:11px;border:1px solid var(--ink-40);border-bottom-width:2px;
  padding:2px 6px;border-radius:2px;background:var(--cream-2);
}

/* ---------- contract board / clipboard ---------- */
.clip{width:min(1180px,97vw);max-height:96vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.55);border-radius:2px;position:relative}
.clip .cliphead{
  display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:var(--hair);
  background:var(--cream-2);flex-wrap:wrap;flex:0 0 auto;
}
.cliphead .clipmetal{
  width:78px;height:13px;border:1px solid #8d8378;border-radius:3px;
  background:linear-gradient(#cfc6b6,#9c9284 55%,#7d7466);
  box-shadow:0 1px 2px rgba(0,0,0,.35);margin-right:4px;
}
.cliphead h2{margin:0;font-size:15px;letter-spacing:.22em;font-family:var(--sign);text-transform:uppercase}
.cliphead .spacer{flex:1}
.ledger{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.ledger b{font-weight:700}
.body{overflow:auto;padding:14px;flex:1 1 auto;-webkit-overflow-scrolling:touch}

.slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.slip{
  background:var(--cream);border:var(--hair);position:relative;padding:13px 13px 11px;
  box-shadow:2px 3px 0 rgba(27,26,23,.10);
  transition:transform .18s ease,opacity .18s ease;
}
.slip:nth-child(2n){transform:rotate(-.35deg)}
.slip:nth-child(3n){transform:rotate(.4deg)}
.slip.taken{transform:translate(26px,60px) rotate(7deg);opacity:0}
.slip h3{margin:0 0 2px;font-family:var(--sign);font-size:20px;letter-spacing:.05em;text-transform:uppercase;line-height:1.05}
.slip .route{display:flex;align-items:baseline;gap:7px;margin:5px 0 8px;font-size:12px;color:var(--ink-60)}
.slip .route .arw{color:var(--magenta);font-weight:700}
.slip .pay{font-size:26px;font-family:var(--sign);font-weight:700;letter-spacing:.02em}
.slip .pay small{font-size:11px;letter-spacing:.18em;color:var(--ink-60);display:block;font-family:var(--sign)}
.slip .kv{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;font-size:12.5px;margin:9px 0 0}
.slip .kv dt{color:var(--ink-60);font-family:var(--sign);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;padding-top:1px}
.slip .kv dd{margin:0}
.slip .note{margin-top:9px;font-size:12.5px;line-height:1.25}
.slip .stamprow{display:flex;gap:7px;align-items:center;margin-top:9px;flex-wrap:wrap}
.slip .acts{display:flex;gap:8px;margin-top:11px}
.slip .acts .btn{flex:1;text-align:center}
.slip .cornerstamp{position:absolute;right:8px;top:8px;transform:rotate(6deg)}
.redact{background:var(--ink);color:transparent;border-radius:1px;padding:0 3px;user-select:none}
.dossierline{display:flex;gap:10px;align-items:flex-start;margin-top:9px}
.photo{
  width:62px;height:74px;flex:0 0 auto;border:1px solid var(--ink-22);background:#DCD2BC;
  position:relative;overflow:hidden;filter:url(#fx-photo) grayscale(1) contrast(1.25) brightness(1.06);
}
.photo canvas{width:100%;height:100%;display:block}
.photo.blank::after{content:'NO PHOTOGRAPH ON FILE';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;font-family:var(--sign);font-size:8px;letter-spacing:.1em;color:var(--ink-40);padding:4px}

/* ---------- brief / paperwork ---------- */
.briefgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
@media (max-width:760px){.briefgrid{grid-template-columns:1fr}}
.card{background:var(--cream);border:var(--hair);padding:13px 14px;position:relative}
.card h4{margin:0 0 9px;font-family:var(--sign);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--ink-60);
  border-bottom:var(--hair);padding-bottom:6px}
.row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13px}
.row + .row{border-top:1px dotted var(--ink-22)}
.row .k{color:var(--ink-60);font-family:var(--sign);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;padding-top:2px}
.row .v{text-align:right}
.meter{height:7px;background:var(--ink-12);border:1px solid var(--ink-22);position:relative;margin-top:4px}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--ink);display:block}
.meter i.warn{background:var(--ochre)}
.meter i.bad{background:var(--rust)}
.meter i.ok{background:var(--sage)}
.gaugeout{font-family:var(--sign);font-size:22px;font-weight:700;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gaugeout span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}

.rangebar{position:relative;height:auto;margin:6px 0 2px}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--cream-3);border:1px solid var(--ink-22)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:20px;margin-top:-8px;background:var(--ink);border:0;border-radius:1px;cursor:pointer}
input[type=range]::-moz-range-track{height:6px;background:var(--cream-3);border:1px solid var(--ink-22)}
input[type=range]::-moz-range-thumb{width:14px;height:20px;background:var(--ink);border:0;border-radius:1px;cursor:pointer}

/* ---------- aircraft market ---------- */
.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.plane{border:var(--hair);background:var(--cream);padding:12px;position:relative}
.plane.owned{border-color:var(--sage);box-shadow:inset 0 0 0 2px rgba(126,140,110,.18)}
.plane.active{border-color:var(--magenta)}
.plane h3{margin:0;font-family:var(--sign);text-transform:uppercase;letter-spacing:.06em;font-size:17px}
.plane .cls{font-size:10.5px;letter-spacing:.16em;color:var(--ink-60);text-transform:uppercase;font-family:var(--sign)}
.plane .price{font-family:var(--sign);font-size:19px;font-weight:700;margin-top:6px}
.plane .stats{display:grid;grid-template-columns:auto 1fr;gap:0 10px;font-size:12px;margin-top:8px}
.plane .stats dt{color:var(--ink-60);font-size:10.5px;font-family:var(--sign);text-transform:uppercase;letter-spacing:.1em;padding-top:1px}
.plane .stats dd{margin:0;text-align:right}
.plane .acts{display:flex;gap:7px;margin-top:10px}

/* ============================================================
   HUD
   ============================================================ */
#hud{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .25s linear}
#hud.on{opacity:1}
#hud .h{
  position:absolute;font-family:var(--mono);font-size:11px;color:var(--ink);
  text-shadow:0 0 3px rgba(239,230,210,.85);
}
.hud-panel{background:rgba(239,230,210,.86);border:1px solid var(--ink-40);padding:5px 8px;backdrop-filter:blur(1px)}

/* altitude + airspeed tapes.
   The tape is sized against the room left between the chart in the top
   corner and the data plate in the bottom one, not against a guess: at
   56vh it ran straight through both of them on a laptop screen. */
/* The tape face is solid paper. At 80% the world read straight through it,
   and a tape is the one panel made of hairline ticks and small numbers: over
   a runway its white threshold bars lay across the -500 label and the
   airspeed looked like it had been struck through. The other panels carry a
   backdrop blur that keeps them legible; this one has none, so it needs an
   opaque face of its own. */
.tape{position:absolute;top:54%;transform:translateY(-50%);width:64px;height:min(42vh,240px);
  border:1px solid var(--ink-40);background:#EFE6D2;overflow:hidden}
.tape.l{left:10px}
.tape.r{right:10px}
/* the title sits on a masked plate, the way a real instrument placard does.
   without this the tape's own tick numbers print straight through it: a
   four-digit label landing at the top of the scale reads as one word with
   "ALT FT" and the tape says nothing at all. */
.tape .ttl{position:absolute;top:0;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.14em;
  font-family:var(--sign);text-transform:uppercase;color:var(--ink-60);z-index:4;
  background:#EFE6D2;border-bottom:1px solid var(--ink-40);padding:2px 0 1px}
.tape .needlebox{position:absolute;left:-2px;right:-2px;top:50%;border-top:2px solid var(--magenta);z-index:3}
.tape .tickrow{position:absolute;left:0;right:0;height:0;font-size:9.5px}
.tape .tickrow span{position:absolute;right:4px;top:-6px;color:var(--ink)}
.tape.l .tickrow span{right:auto;left:4px}
.tape .tickrow i{position:absolute;height:1px;background:var(--ink-40);width:7px;top:0}
.tape .tickrow.maj i{width:12px;background:var(--ink)}
/* Opaque, for the same reason the title plate above is: the tape keeps
   drawing to within 8px of its own bottom edge, so a major tick can land
   underneath this plate. At 92% the tick's number ghosted through the
   readout and the airspeed read as a five-character word instead of a
   number. */
.tape .readout{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:14px;font-weight:700;
  background:#EFE6D2;border-top:1px solid var(--ink-40);padding:1px 0;z-index:4}

/* compass rose slice */
.rose{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:min(340px,52vw);height:34px}
.rose canvas{width:100%;height:100%;display:block}

/* data block: money fuel condition */
.datablock{position:absolute;right:10px;bottom:10px;min-width:186px}
.datablock .r{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:1px 0}
.datablock .r .k{font-family:var(--sign);text-transform:uppercase;letter-spacing:.13em;font-size:9.5px;color:var(--ink-60);padding-top:2px}
.datablock .r b{font-weight:700}
.warnflash{animation:wf .7s steps(2,end) infinite}
@keyframes wf{0%,100%{color:var(--rust)}50%{color:var(--ink)}}

/* radio block */
.radio{position:absolute;left:10px;bottom:10px;width:min(370px,54vw);max-height:26vh;overflow:hidden;
  font-size:11.5px;line-height:1.35}
.radio .msg{padding:1px 0;border-top:1px dotted var(--ink-22)}
.radio .msg:first-child{border-top:0}
.radio .from{color:var(--blue);font-family:var(--sign);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;margin-right:5px}
.radio .static{position:absolute;inset:0;background-image:var(--paper);opacity:.1;pointer-events:none;mix-blend-mode:multiply}

/* nagivation strip / next waypoint */
.navstrip{position:absolute;top:58px;left:50%;transform:translateX(-50%);text-align:center;padding:4px 12px}
.navstrip .wp{font-family:var(--sign);text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--ink-60)}
.navstrip .nm{font-size:15px}
.navstrip .brg{margin-left:8px;color:var(--magenta);font-weight:700}

/* mission event tab, slides from the top edge */
.tab{
  position:absolute;top:0;left:50%;transform:translate(-50%,-105%);
  width:min(560px,92vw);background:rgba(239,230,212,.95);border:1px solid var(--ink);border-top:0;
  padding:9px 12px 10px;transition:transform .32s cubic-bezier(.2,.7,.3,1);z-index:6;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.tab.down{transform:translate(-50%,0)}
.tab .th{display:flex;gap:8px;align-items:center;font-family:var(--sign);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--ink-60)}
.tab .tb{margin-top:5px;font-size:13px;line-height:1.3}
.tab .choices{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.tab .choices .btn{pointer-events:auto}
.tab .tmr{margin-left:auto;color:var(--rust);font-weight:700}
.tab.warn{border-color:var(--rust)}
.tab.warn .th{color:var(--rust)}

/* mini map in flight */
#minimap{position:absolute;right:10px;top:10px;width:min(120px,18vw);height:min(120px,18vw);
  border:1px solid var(--ink-40);background:rgba(239,230,210,.85);opacity:.94}
#minimap canvas{width:100%;height:100%;display:block}

/* ============================================================
   TOUCH CONTROLS (thumb reach)
   ============================================================ */
#touch{position:absolute;inset:0;z-index:30;pointer-events:none;display:none}
#touch.on{display:block}
#stick{
  position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));
  width:132px;height:132px;border-radius:50%;border:1.5px solid var(--ink-40);
  /* At 35% these two were invisible against tarmac. The throttle and the stick
     are the controls a thumb has to find without looking, and a control you
     cannot see is not one, however little it disturbs the view: they now carry
     the same weight as the buttons beside them, with a recessed edge so they
     still read as slots cut in the panel rather than as plates laid on it. */
  background:rgba(239,230,210,.60);pointer-events:auto;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(27,26,23,.10), inset 0 2px 7px rgba(27,26,23,.12);
}
#stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  border:1.5px solid var(--ink);background:rgba(239,230,210,.75);pointer-events:none}
/* Row-reverse, not a column: the throttle is the outside edge of the right
   thumb's arc and the buttons tuck in beside it, so the whole cluster is one
   hand high instead of two. Stacked, it was two hundred and eighteen pixels
   of a landscape phone's three hundred and ninety, which is what pushed the
   buttons up on top of the fuel and money plate. */
#touchright{
  position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));
  display:flex;flex-direction:row-reverse;gap:8px;align-items:flex-end;pointer-events:auto;
}
#thr{width:56px;height:170px;border:1.5px solid var(--ink-40);background:rgba(239,230,210,.60);position:relative;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(27,26,23,.10), inset 0 2px 7px rgba(27,26,23,.12)}
#thr i{position:absolute;left:-4px;right:-4px;height:16px;background:rgba(27,26,23,.75);border:1px solid var(--ink);top:10%}
#thr .cap{position:absolute;left:0;right:0;bottom:-19px;text-align:center;font-size:9px;font-family:var(--sign);letter-spacing:.12em;color:var(--ink-60)}
/* the label goes above the track, because the track now sits on the bottom
   edge of the screen and a caption under it would be off the glass */
#touchright #thr .cap{bottom:auto;top:-15px}
.tbtns{display:grid;grid-template-columns:repeat(2,auto);gap:6px}
.tbtn{pointer-events:auto;font-family:var(--sign);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid var(--ink-40);background:rgba(239,230,210,.62);padding:9px 11px;color:var(--ink);min-width:52px;text-align:center}
.tbtn.act{background:rgba(179,58,115,.85);color:#F6EEE0;border-color:var(--magenta)}
.tbtn.wide{grid-column:span 2}

/* ============================================================
   TOAST + misc
   ============================================================ */
#toast{position:absolute;left:50%;bottom:calc(14% + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
#toast div{background:rgba(27,26,23,.86);color:var(--cream);font-size:12px;padding:6px 12px;border:1px solid var(--cream-3);
  letter-spacing:.08em;animation:tin .3s ease}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.logline{font-size:12.5px;padding:5px 0;border-bottom:1px dotted var(--ink-22);display:flex;gap:10px}
.logline .t{color:var(--ink-60);flex:0 0 62px;font-size:11px}
.logline .a{flex:1}

.scrollnote{font-size:11px;color:var(--ink-60);text-align:center;padding:6px 0 0}
.hidden{display:none !important}

/* phones in portrait: everything still has to work, so shrink and re-place
   rather than asking anyone to turn the device */
@media (max-width:620px), (orientation:portrait) and (max-width:800px){
  body{font-size:14px}
  .tape{width:46px;height:min(40vh,230px)}
  .tape .tickrow{font-size:8px}
  .rose{width:64vw;top:4px;height:40px}
  /* Portrait stacks the three top pieces instead of letting them fight for
     the same strip: compass, then the chart below it on the right, then the
     words underneath both. Narrowed radio, because at 62vw it ran under the
     data plate in the opposite corner and the two printed over each other. */
  .navstrip{top:164px;padding:3px 9px}
  #minimap{width:min(100px,28vw);height:min(100px,28vw);top:56px;right:6px}
  .radio{width:min(42vw,260px);max-height:20vh;font-size:10.5px}
  .datablock{min-width:150px;font-size:11px}
  .slips{grid-template-columns:1fr}
  .cliphead{padding:8px 10px;gap:8px}
  .body{padding:10px}
  .slip .pay{font-size:22px}
}

/* ============================================================
   ADDITIONS: canvas tapes and rose, chart screen, title sheet
   ============================================================ */
.tape canvas{width:100%;height:100%;display:block}
.rose{height:min(46px,8vh)}
#s-map .paper{max-width:calc(100vw - 20px)}

#s-title .titlegrid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;margin:.5em 0 1em}
#s-title .titlegrid .k{font-family:var(--sign);text-transform:uppercase;letter-spacing:.14em;font-size:9.5px;
  color:var(--ink-60);padding-top:3px}
#s-title .titlegrid .v{font-family:var(--mono);font-weight:700}

.slip.discreet{background:#E7DCC6}
.slip.discreet::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--paper);opacity:.5;mix-blend-mode:multiply}
.slip .stamprow{display:flex;flex-wrap:wrap;gap:4px}
.slip .cornerstamp{max-width:46%;text-align:center}

.row .v.muted{color:var(--ink-60)}
.card .btn.sm{width:100%;text-align:center}

/* the logbook and market scroll inside their clip */
#s-log .body > div[style*="max-height"]{padding-right:4px}

/* a screen that is only a chart should not darken the world so much */
#s-map{background:rgba(19,26,43,.72)}

/* corner ticks belong to a container, not to a whole sheet: two corners,
   drawn, never positioned children that scroll away */
.ticked{position:relative}
.ticked::before,.ticked::after{content:'';position:absolute;width:10px;height:10px;
  border:1px solid var(--ink-40);pointer-events:none;z-index:2}
.ticked::before{top:6px;left:6px;border-right:0;border-bottom:0}
.ticked::after{bottom:6px;right:6px;border-left:0;border-top:0}

/* ============================================================
   THE TOUCH LAYOUT
   The thumbs own a strip along the bottom edge, and every instrument is
   lifted clear of it. Written with the measured heights of the controls
   rather than by eye: the stick and the throttle cluster are one hundred and
   thirty-two pixels high and sit ten from the bottom, so the strip is a
   hundred and fifty-four, and everything else is placed above that line.
   Before this the fuel and money plate printed straight through the buttons
   and the radio log printed through the stick, on a phone, which is the
   first screen this page ever meets.
   ============================================================ */
html.touch .radio{left:10px;right:auto;top:54px;bottom:auto;width:min(210px,44vw);max-height:12vh}
/* clear of the throttle's own caption, which sits 15px above the throttle
   and was printing through the bottom edge of the plate */
html.touch .datablock{right:10px;bottom:170px;min-width:150px}
html.touch .tape{top:34%;width:52px}
/* a shorter throttle so the cluster is one hand high on a landscape phone,
   where three hundred and ninety pixels is the whole of the screen */
html.touch #thr{height:132px}
html.touch #toast{bottom:40%}

@media (orientation:landscape){
  /* a landscape phone is short as well as wide: the radio goes up beside the
     compass, the plate fills the space between the two thumbs, and the tapes
     sit in the gap under the chart inset */
  html.touch .radio{top:8px;width:min(240px,30vw);max-height:16vh}
  html.touch .datablock{left:160px;right:auto;bottom:12px}
  html.touch .tape{top:46%;height:min(24vh,160px)}
  html.touch #toast{bottom:44%}
}

/* Where the ground came from: a small printed footnote, not a banner. */
.srcnote{font-size:10px;line-height:1.55;color:var(--ink-60);text-align:center;
  margin-top:14px;padding-top:8px;border-top:1px dashed rgba(27,26,23,.22)}
.srcnote b{color:var(--ink);letter-spacing:.06em}