/* Acrolab on a phone or tablet (html.handheld, set by ui.js from settings.HANDHELD): the touch flight layer
   (input/touch.js), the "Fly on this phone" picker, and phone layouts of the key screens (landing, menu, pause, results,
   settings, hangar / customise). A landscape phone is 844 x 390 (iPhone 14/15), 932 x 430 (Pro Max), 667 x 375 (SE). */

/* ---------------------------------------------------------------- the touch layer (input/touch.js) */
.tf { position: absolute; inset: 0; z-index: 4; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tf-zone { position: absolute; top: 22%; bottom: 0; width: 50%; touch-action: none; }
.tf-zone.l { left: 0; } .tf-zone.r { right: 0; }
.tf.tilt .tf-zone.r { display: none; }
.tf-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(244, 239, 232, .32); background: rgba(15, 16, 20, .16); pointer-events: none; }
.tf-ring::before, .tf-ring::after { content: ""; position: absolute; background: rgba(244, 239, 232, .22); }
.tf-ring::before { left: 50%; top: 10%; bottom: 10%; width: 1px; } .tf-ring::after { top: 50%; left: 10%; right: 10%; height: 1px; }
.tf-zone.on .tf-ring { border-color: var(--volt); } .tf-zone.r.on .tf-ring { border-color: var(--text); }
.tf-knob { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; pointer-events: none; opacity: .5;
  background: var(--volt); border: 1px solid var(--ink); }
.tf-zone.r .tf-knob { background: var(--text); }
.tf-zone.on .tf-knob { opacity: .95; }
.tf-bar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.tf-btn { min-width: 62px; height: 40px; padding: 0 12px; border-radius:0; border: 1px solid var(--ink); background: rgba(29, 29, 46, .84); color: var(--text);
  font: 800 13px/1 var(--f-ui); letter-spacing: .06em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tf-btn:active { transform: translate(2px, 2px); }
.tf-btn.arm { min-width: 88px; background: var(--volt); color: var(--ink); }
.tf-btn.arm.on { background: var(--volt); }
.tf:not(.tilt) .tf-btn[data-act="level"] { display: none; }
.tf-esc { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); height: 44px; padding: 0 16px; border-radius:0;
  border: 1px solid var(--ink); background: var(--volt); color: var(--ink); font: 800 14px/1 var(--f-ui); letter-spacing: .08em;
  opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .15s, transform .15s; touch-action: manipulation; }
.tf-esc.show { opacity: 1; pointer-events: auto; transform: none; }
.tf-thr { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 48px); transform: translateX(-50%); pointer-events: none;
  font: 700 12px/1 var(--f-mono); color: rgba(244, 239, 232, .85); text-shadow: 0 1px 2px #000; letter-spacing: .06em; }
.tf-rot { display: none; }
.tf-hap { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
@media (orientation: portrait) {
  .tf-rot { display: block; position: absolute; left: 16px; right: 16px; top: 38%; padding: 14px; border-radius:0; background: rgba(15, 16, 20, .86);
    border: 1px solid var(--line); font: 800 20px/1.15 var(--f-display); text-transform: uppercase; text-align: center; pointer-events: none; }
  .tf-bar { top: auto; bottom: calc(50% + 70px); flex-wrap: wrap; justify-content: center; width: calc(100% - 24px); }
}

/* ---------------------------------------------------------------- "Fly on this phone" (landing, menu rail) */
.onphone { display: grid; gap: 10px; margin-top: 16px; max-width: 520px; }
.onphone .sticker { justify-self: start; }
.onphone-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.btn.onphone-btn { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 58px; padding: 10px 14px; white-space: normal; text-align: left; }
.onphone-btn b { font-size: 16px; } .onphone-btn small { font: 600 12px/1.2 var(--f-ui); opacity: .8; }
.onphone-note { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.rail .onphone { margin: 6px 0; gap: 6px; }
.rail .onphone .sticker { font-size: 10px; }
.rail .onphone-row { grid-template-columns: 1fr 1fr; gap: 6px; }
.rail .btn.onphone-btn { min-height: 36px; padding: 6px 8px; }
.rail .onphone-btn b { font-size: 12.5px; }
.rail .onphone-btn small, .rail .onphone-note { display: none; }

/* ---------------------------------------------------------------- phone layouts */
html.handheld, html.handheld body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.handheld .btn, html.handheld .seg button, html.handheld .nav button { touch-action: manipulation; }
html.handheld .overlay { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
html.handheld .sheet { max-height: calc(100dvh - 12px); }
html.handheld .toasts { top: max(10px, env(safe-area-inset-top)); }
/* the first-flights legend (ui/legend.js): small, under the pause button, clear of the left thumb's ring */
html.handheld .flight-legend { top: calc(max(8px, env(safe-area-inset-top)) + 54px); transform: scale(.7); transform-origin: 0 0; opacity: .85; }

/* landscape phone: short screens */
@media (max-height: 520px) {
  html.handheld .landing { padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
    grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; }
  html.handheld .landing .props, html.handheld .osd-live, html.handheld .landing .byo, html.handheld .hero .stickers { display: none; }
  html.handheld .topbar { min-height: 34px; }
  html.handheld .hero { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; align-items: center; align-content: center; }
  html.handheld .hero > :not(.onphone) { grid-column: 1; }
  html.handheld .hero h1 { font-size: clamp(34px, 11vh, 48px); }
  html.handheld .hero .tag { margin-top: 10px; font-size: 15px; }
  html.handheld .hero .ctas { margin-top: 12px; gap: 10px; }
  html.handheld .hero .onphone { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  html.handheld .btn-lg { min-height: 48px; padding: 10px 18px; font-size: 16px; }

  html.handheld .menu { --rail: 184px; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  html.handheld .rail { padding: 8px; gap: 3px; overflow-y: auto; }
  html.handheld .rail .logo { padding: 0 4px 4px; }
  html.handheld .rail .logo-mark { width: 28px; height: 28px; } html.handheld .rail .logo-word { font-size: 19px; }
  /* the rail fits a 390 px screen: slim tabs, the phone picker at the bottom, the pilot chip left to the Profile tab */
  html.handheld .nav { gap: 2px; }
  html.handheld .nav button { height: 28px; padding: 0 10px; gap: 8px; font-size: 13.5px; border-radius:0; }
  html.handheld .nav button .ic { width: 17px; height: 17px; }
  html.handheld .nav button .k, html.handheld .rail-foot, html.handheld .view-tag, html.handheld .rail .me { display: none; }
  html.handheld .rail .onphone .sticker { font-size: 9.5px; padding: 3px 8px 4px; }
  html.handheld .main-head { padding: 8px 14px 6px; } html.handheld .main-head h2 { font-size: 28px; }
  html.handheld .main-body { padding: 10px 14px 12px; }
  html.handheld .main-foot { padding: 8px 14px; gap: 8px; } html.handheld .main-foot .hint { display: none; }
  html.handheld .mapcard .art { height: 78px; } html.handheld .afcard .band { height: 70px; }
  html.handheld .ui:not(.ui-flight) .feed { display: none; }     /* the lap feed would sit on the menu's content */

  html.handheld .sheet-head { padding: 10px 16px 8px; gap: 10px; } html.handheld .sheet-head h2 { font-size: 34px; }
  html.handheld .sheet-body { padding: 0 16px 12px; }
  html.handheld .pause-where { margin-bottom: 10px; }
  html.handheld .pause-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  html.handheld .pause-actions .btn { min-height: 44px; font-size: 15px; }
  html.handheld .pause-actions .btn-lg { grid-column: 1 / -1; }
  html.handheld .pause-actions kbd { display: none; }
  html.handheld .res-actions { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
  html.handheld .bigtime { font-size: 40px; margin: 2px 0 6px; }
  html.handheld .row { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: 12px; padding: 10px 0; }
  html.handheld .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.handheld .paint.custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  html.handheld .custom .live-shot { aspect-ratio: 4 / 3; }
  html.handheld .loader .glass { min-width: 0 !important; padding: 14px 18px !important; }
  html.handheld .loader .display { font-size: 32px !important; }
}

/* portrait phone */
@media (max-width: 520px) {
  html.handheld .landing { overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 16px 16px; }
  html.handheld .landing .props, html.handheld .osd-live { display: none; }
  html.handheld .hero h1 { font-size: 52px; }
  html.handheld .onphone { max-width: none; }
  html.handheld .sheet-head { flex-wrap: wrap; } html.handheld .sheet-head h2 { font-size: 40px; }
  html.handheld .row { grid-template-columns: minmax(0, 1fr); }
}