/* TweakFC Pocket (js/pocket.js): the phone front end. html.pocket is set in index.html on phones.
   Home = a putty handheld with an LCD Rotordex screen and a menu; the shared Rotordex, builder, Hangar and
   Plug & Fly screens get touch-sized phone layouts below. Brand Cartridge tokens come from brand.css. */
html.pocket #menu, html.pocket canvas#view, html.pocket #osd { display: none !important; }
html.pocket, html.pocket body { height: auto; min-height: 100%; overflow: auto; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
html.pocket.pk-covered, html.pocket.pk-covered body { overflow: hidden; }
html.pocket .loading { font-size: 11px; }

.pk { max-width: 560px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: var(--shell-light) var(--tfc-dots);
  min-height: 100vh; min-height: 100dvh; box-shadow: inset 6px 0 0 var(--shell-lo), inset -6px 0 0 var(--shell-lo); }
.pk button { touch-action: manipulation; }
.pk-power { display: flex; align-items: center; gap: 8px; font: 400 10px var(--tfc-font-label); letter-spacing: .08em; color: var(--muted); }
.pk-power i { width: 8px; height: 8px; background: var(--tfc-led); box-shadow: 0 0 6px var(--tfc-led); }
.pk-power button { padding: 6px 8px; font: 400 10px var(--tfc-font-label); letter-spacing: .06em; background: var(--shell-hi); border: 0; box-shadow: inset 0 -3px 0 var(--shell-lo); color: var(--ink); clip-path: none; }
.pk-power #pk-theme { margin-left: auto; }
.pk-logo { display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; }
.pk-logo .logo-mark { width: 44px; height: 44px; color: var(--ink); flex: none; }
.pk-logo .wordmark { font-size: 30px; }
.pk-tagline { font: 400 11px var(--tfc-font-label); color: var(--muted); letter-spacing: .06em; margin-top: 4px; text-transform: uppercase; }

/* the LCD screen in its slate bezel */
.pk-screen { background: var(--bezel); padding: 0 12px 12px; clip-path: var(--tfc-px); box-shadow: inset 0 0 0 2px var(--tfc-charcoal); }
.pk-scr-label { display: flex; justify-content: space-between; padding: 8px 2px 7px; font: 400 9px var(--tfc-font-label); letter-spacing: .1em; color: #D3DCE4; }
.pk-scr-label span:first-child { color: #FFB020; }
.pk-scr { background: var(--lcd3); color: var(--lcd0); padding: 12px; box-shadow: inset 0 0 0 2px var(--lcd1); --text: var(--lcd0); --muted: var(--lcd1); }
.pk-dex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.pk-dex > div b { display: block; font: 400 34px/1 var(--tfc-font-data); }
.pk-dex > div span { font: 400 9px var(--tfc-font-label); letter-spacing: .08em; text-transform: uppercase; }
.pk-dex > b, .pk-dex > span { grid-column: 1 / -1; font: 400 13px var(--tfc-font-body); }
.pk-bar { grid-column: 1 / -1; display: block; height: 8px; margin-top: 8px; background: var(--lcd2); box-shadow: inset 0 0 0 2px var(--lcd1); }
.pk-bar em { display: block; height: 100%; background: var(--lcd0); }
.pk-search { display: flex; margin: 12px 0 10px; }
.pk-search input { flex: 1; min-width: 0; font: 16px var(--tfc-font-body); padding: 10px; background: var(--lcd2); color: var(--lcd0); border: 2px solid var(--lcd1); border-right: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.pk-search input::placeholder { color: var(--lcd1); opacity: .9; }
.pk-search button { width: 48px; background: var(--lcd0); color: var(--lcd3); border: 0; font: 14px var(--tfc-font-display); }
.pk-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-cats button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left; padding: 7px 8px; min-height: 48px;
  background: var(--lcd2); color: var(--lcd0); border: 0; box-shadow: inset 0 -3px 0 var(--lcd1); }
.pk-cats button b { grid-row: span 2; font: 400 18px var(--tfc-font-display); width: 22px; text-align: center; }
.pk-cats button span { font: 400 9px/1.2 var(--tfc-font-label); letter-spacing: .02em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cats button em { font: 400 17px/1 var(--tfc-font-data); font-style: normal; }
.pk-cats button:active, .pk-search button:active { background: var(--lcd0); color: var(--lcd3); }

/* A / B keys under the screen */
.pk-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.pk-key { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px; background: var(--tfc-key); color: #EEF1F3; border: 0;
  box-shadow: inset 0 -4px 0 #000000; font: 400 11px var(--tfc-font-label); letter-spacing: .06em; text-transform: uppercase; clip-path: var(--tfc-px-sm); }
.pk-key b { display: grid; place-items: center; width: 26px; height: 26px; background: var(--cta); color: var(--tfc-cta-ink, #1A1200); font: 400 11px var(--tfc-font-display); }
.pk-key:disabled { opacity: .45; }
.pk-key:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 #000000; }

/* the menu: moulded keys with a ▶ cursor */
.pk-menu { display: grid; gap: 6px; }
.pk-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; text-align: left; background: var(--shell-hi); border: 0;
  box-shadow: inset 0 -4px 0 var(--shell-lo); clip-path: var(--tfc-px-sm); color: var(--ink); }
.pk-menu button b { display: block; font: 400 12px/1.4 var(--tfc-font-display); }
.pk-menu button small { display: block; font: 13px/1.3 var(--tfc-font-body); color: var(--muted); }
.pk-menu .pk-arrow { font: 10px var(--tfc-font-display); color: var(--cta); width: 12px; flex: none; }
.pk-menu button:first-child { background: var(--cta); color: var(--tfc-cta-ink, #1A1200); box-shadow: inset 0 -4px 0 #A86F00; }
.pk-menu button:first-child small, .pk-menu button:first-child .pk-arrow { color: #3A2E10; }
.pk-menu button.off { background: transparent; box-shadow: inset 0 0 0 2px var(--shell-lo); }
.pk-menu button.off .pk-arrow { color: var(--muted); }
.pk-menu button:active { transform: translateY(2px); }

.pk-active { margin-top: 14px; padding: 12px 14px; background: var(--lcd0); color: var(--lcd3); clip-path: var(--tfc-px-sm); }
.pk-act-h { font: 400 9px var(--tfc-font-label); letter-spacing: .08em; color: var(--lcd2); } .pk-act-h small { font: 11px var(--tfc-font-body); letter-spacing: 0; margin-left: 4px; }
.pk-act-n { font: 400 14px/1.5 var(--tfc-font-display); margin-top: 6px; }
.pk-act-s { font: 400 19px var(--tfc-font-data); }
.pk-foot { margin-top: 18px; text-align: center; font: 12px var(--tfc-font-body); color: var(--muted); }
.pk-foot .link { padding: 0; font: inherit; color: var(--tfc-accent); text-decoration: underline; background: none; border: 0; }

/* sheets: My drones, Times, Fly */
.pk-sheet { position: fixed; inset: 0; z-index: 46; display: flex; flex-direction: column; background: var(--shell) var(--tfc-dots); color: var(--ink); }
.pk-sheet-top { display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px; background: var(--shell-light); box-shadow: inset 0 -4px 0 var(--shell-lo); }
.pk-sheet-t { font: 400 14px var(--tfc-font-display); } .pk-sheet-t b { font-weight: 400; color: var(--tfc-accent); }
.pk-x { margin-left: auto; width: 44px; height: 44px; padding: 0; font: 20px/1 var(--tfc-font-body); color: var(--ink); background: var(--shell-hi); border: 0; box-shadow: inset 0 -3px 0 var(--shell-lo); }
.pk-sheet-body { flex: 1; overflow: auto; padding: 14px 16px max(30px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.pk-sheet h3 { font: 400 11px var(--tfc-font-display); margin: 18px 0 8px; }
.pk-hint { color: var(--muted); font-size: 13px; }
.pk-empty { margin: 40px 10px; text-align: center; font: 13px var(--tfc-font-label); color: var(--muted); line-height: 1.6; }
.pk-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pk-sheet button:not(.pk-x):not(.link) { min-height: 44px; padding: 8px 14px; background: var(--shell-hi); border: 0; box-shadow: inset 0 -3px 0 var(--shell-lo); font: 400 11px var(--tfc-font-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.pk-sheet button.big { background: var(--cta) !important; color: var(--tfc-cta-ink, #1A1200); box-shadow: inset 0 -3px 0 #A86F00 !important; }
.pk-times { width: 100%; border-collapse: collapse; background: var(--lcd3); color: var(--lcd0); font: 18px var(--tfc-font-data); }
.pk-times th { font: 400 9px var(--tfc-font-label); text-align: left; padding: 6px 8px; background: var(--lcd0); color: var(--lcd3); }
.pk-times td { padding: 5px 8px; border-bottom: 1px solid var(--lcd2); }
.pk-flycard { margin: 10px auto; max-width: 440px; text-align: center; }
.pk-flycard h2 { font: 400 15px/1.5 var(--tfc-font-display); margin: 14px 0 10px; }
.pk-flycard p { font-size: 15px; line-height: 1.45; }
.pk-flycard .pk-row { justify-content: center; }
.pk-fly-ico { display: grid; place-items: center; width: 84px; height: 84px; margin: 20px auto 0; background: var(--lcd3); color: var(--lcd0); font: 28px var(--tfc-font-display); box-shadow: inset 0 0 0 6px var(--bezel); }
/* My drones: the shared garage cards */
.pk-sheet .gcard { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px; margin-bottom: 8px; background: var(--shell-light); clip-path: var(--tfc-px-sm); }
.pk-sheet .gcard.cur { box-shadow: inset 0 0 0 3px var(--lcd1); }
.pk-sheet .gcard img, .pk-sheet .gthumb { width: 84px; height: 64px; object-fit: cover; background: var(--lcd3); }
.pk-sheet .gbody small { display: block; color: var(--muted); font-size: 12px; }
.pk-sheet .gbody .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk-sheet .gbody .row button { min-height: 38px !important; padding: 6px 10px !important; font-size: 10px !important; }
.pk-sheet .gbody .row .link { color: var(--tfc-accent); background: none; border: 0; text-decoration: underline; }

/* ---------- shared screens on a phone ---------- */
/* no Workshop (3D assembly) or map pick on a phone */
html.pocket #rdxb-ws, html.pocket #ws-rotordex, html.pocket .gcard [data-g=ws], html.pocket .pf-final .ws-go { display: none !important; }
html.pocket .pf-wrap { z-index: 50; }
html.pocket .menu-toast { bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); width: max-content; text-align: center; line-height: 1.6; z-index: 60; }

@media (max-width: 760px) {
  /* Rotordex */
  html.pocket .rdx-top { flex-wrap: wrap; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
  html.pocket .rdx-title { font-size: 16px; order: 0; }
  html.pocket .rdx-title small { font-size: 13px; }
  html.pocket .rdx-top .rdx-x { order: 1; margin-left: auto; min-width: 44px; min-height: 44px; }
  html.pocket .rdx-top input[type=search] { order: 2; width: 100%; margin: 0; font-size: 16px; padding: 10px; }
  html.pocket .rdx-top #rdxb-launch, html.pocket .rdx-top #rdxb-open-mine, html.pocket .rdx-top #rdxb-open-seen { order: 3; flex: 1 1 0 !important; margin: 0; min-height: 40px; padding: 6px 4px; white-space: normal; }
  html.pocket .rdx-chips { flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html.pocket .rdx-chips::-webkit-scrollbar { display: none; }
  html.pocket .rdx-chips button { flex: none; min-height: 38px; }
  html.pocket .rdx-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px; }
  html.pocket .rdx-filters select { font-size: 15px; min-height: 40px; width: 100%; }
  html.pocket .rdx-filters #rdx-ch { min-height: 40px; }
  html.pocket .rdx-count { margin: 0; align-self: center; text-align: right; }
  html.pocket .rdx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px max(40px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  html.pocket .rdx-name { font-size: 13px; min-height: 32px; }
  html.pocket .rdx-detail { padding: 0; place-items: stretch; background: var(--shell); }
  html.pocket .rdx-dbox { width: 100%; max-height: none; height: 100%; padding: 14px 14px max(30px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  html.pocket .rdx-dbox > .rdx-x { position: sticky; top: 0; float: right; z-index: 1; min-width: 44px; min-height: 44px; }
  html.pocket .rdx-dhead { flex-direction: column; gap: 4px; }
  html.pocket .rdx-bign { font-size: 34px; }
  html.pocket .rdx-dhead h2 { font-size: 17px; line-height: 1.4; }
  html.pocket .rdx-dcols { gap: 6px; }
  html.pocket .rdx-tab { font-size: 13px; }
  html.pocket .rdx-dcols .rdx-tab tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--tfc-shell-shadow); }
  html.pocket .rdx-dcols .rdx-tab th, html.pocket .rdx-dcols .rdx-tab td { border: 0; padding: 6px 4px 2px; }
  html.pocket .rdx-tab th { white-space: normal; }
  html.pocket .rdx-dcols .rdx-tab td { text-align: right; font-size: 17px; }
  html.pocket .rdx-dcols .rdx-tab td.src { grid-column: 1 / -1; text-align: left; padding-top: 0; padding-bottom: 6px; font-size: 12px; word-break: break-word; }
  html.pocket .rdx-chl li { grid-template-columns: 1fr auto; } html.pocket .rdx-chl li span { grid-column: 1 / -1; grid-row: 2; }
  html.pocket .rdx .row button { flex: 1; min-height: 44px; }
  html.pocket .rdx-parts li button.link { text-align: left; }

  /* Rotordex builder */
  html.pocket .rdxb-top { flex-wrap: wrap; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 8px; }
  html.pocket .rdxb-title { font-size: 13px; }
  html.pocket .rdxb-x { min-width: 44px; min-height: 44px; }
  html.pocket .rdxb-tabs { order: 2; width: 100%; } html.pocket .rdxb-tabs button { flex: 1; min-height: 40px; }
  html.pocket .rdxb-grid { grid-template-columns: 1fr; padding: 12px; }
  html.pocket .rdxb-build { display: flex; flex-direction: column; height: auto; }
  html.pocket .rdxb-steps { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; border: 0; border-bottom: 3px solid var(--tfc-shell-shadow); scrollbar-width: none; }
  html.pocket .rdxb-steps li { min-width: 128px; margin: 0; flex: none; }
  html.pocket .rdxb-opts { padding: 10px 12px; }
  html.pocket .rdxb-oh { flex-wrap: wrap; } html.pocket .rdxb-oh input { width: 100%; margin: 0; font-size: 16px; }
  html.pocket .rdxb-list { max-height: 52vh; border-width: 4px; }
  html.pocket .rdxb .rdxb-opt { min-height: 52px; grid-template-columns: 48px 1fr auto; }
  html.pocket .rdxb-side { border: 0; border-top: 3px solid var(--tfc-shell-shadow); overflow: visible; padding: 12px; }
  html.pocket .rdxb-screen { height: 200px; }
  html.pocket .rdxb-stats { grid-template-columns: repeat(3, 1fr); }
  html.pocket .rdxb-acts button { min-height: 44px; }
  html.pocket .rdxb-seenbar { flex-wrap: wrap; padding: 12px 12px 0; } html.pocket .rdxb-seenbar input { width: 100%; font-size: 16px; }

  /* Hangar gallery */
  html.pocket .hg-top { flex-wrap: wrap; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
  html.pocket .hg-top h2 { font-size: 15px; flex: 1; }
  html.pocket .hg-top input[type=search] { order: 3; width: 100%; margin: 0; font-size: 16px; }
  html.pocket .hg-top select { order: 4; width: 100%; font-size: 15px; }
  html.pocket .hg-top #hg-rotordex { order: 1; } html.pocket .hg-x { order: 2; min-width: 44px; min-height: 44px; }
  html.pocket .hg-chips { flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; } html.pocket .hg-chips button { flex: none; min-height: 38px; }
  html.pocket .hg-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px; }
  html.pocket .hg-filters select { width: 100%; font-size: 15px; min-height: 40px; }
  html.pocket .hg-grid { grid-template-columns: 1fr; padding: 12px 12px 120px; }
  html.pocket .hg-body .row button { flex: 1; min-height: 44px; }
  html.pocket .hg-detail, html.pocket .hg-dwrap { padding: 0 !important; }
  html.pocket .hg-dbox { width: 100% !important; height: 100% !important; max-height: none !important; grid-template-rows: 38% 62% !important; }

  /* Plug & Fly dialogs (add a drone by hand, colours, build card) */
  html.pocket .pf-wrap { padding: 0 !important; align-items: stretch !important; }
  html.pocket .pf-dialog { width: 100% !important; max-width: none !important; height: 100%; max-height: none !important; overflow: auto; padding: 14px 14px 40px !important; }
  html.pocket .pf-x { min-width: 44px; min-height: 44px; }
  html.pocket .pf-dialog input, html.pocket .pf-dialog select { font-size: 16px; }
}