/* PHONE POLISH + TAB LOCKS (CJ 10/13). Loaded last so it wins over the per-module phone rules.
 * Phones: the header fit 415px of controls into 358 (the "..." menu sat off-screen and search was crushed to 22px), the INCIDENTS and
 * NEWS WIRE pills overlapped on the same row, and every floating pill sat on top of an open bottom sheet. */

/* lock glyph (Lucide lock, body filled so it still reads at 8px) on every tab name: desktop rail + phone strip, incl. UAP/FACTS/SIM */
:root{--lock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><rect width='16' height='11' x='4' y='11' rx='2' fill='black'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");--unlock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><rect width='16' height='11' x='4' y='11' rx='2' fill='black'/><path d='M8 11V7a4 4 0 0 1 7.9-.9'/></svg>")}
/* CJ 10/13: the lock sits in the tab's top-right corner (where the 1-9 hotkey numbers were; those still work, just not drawn) */
#rail button>span::before,#catstrip button>span::before,#b-bts b::before{content:"";flex:none;width:7px;height:8px;background:currentColor;-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat;opacity:.8}
#rail button>span::before,#catstrip button>span::before{position:absolute;top:5px;right:6px;width:10px;height:12px;opacity:.75}
/* CJ 10/13 billing: tabs your plan covers show a GREEN OPEN padlock; locked ones (wow/locked.js adds .lk-tab) keep the closed red one */
#rail button:not(.lk-tab)>span::before,#catstrip button:not(.lk-tab)>span::before{-webkit-mask-image:var(--unlock);mask-image:var(--unlock);background:var(--ok)}
/* CJ 10/13: green open lock = yours, red closed lock = locked (wow-locked.css already paints .lk-tab red) */
#rail button.on>span::before,#catstrip button.on>span::before{opacity:1}
#catstrip button>span::before{top:3px;right:1px}
#b-bts b{display:inline-flex;align-items:center;gap:6px}#b-bts b::before{width:9px;height:10px;opacity:1;color:var(--red2)}
#b-bts .bts-l{font-style:normal}

@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  :root{--both:30px} /* the bottom bar is only the 26px status line on phones; 54px left a dead band under the tab strip */

  /* header: logo + wordmark, search icon, BTS, settings, "..." all on screen */
  #top{gap:6px}
  #brand .word h1{font-size:13px;letter-spacing:.1em}
  .search:not(:focus-within){flex:none;width:36px;min-width:0;padding:0;justify-content:center}
  .search:not(:focus-within) input{position:absolute;inset:0;opacity:0}
  #tools .ibtn{width:36px;height:36px}
  #b-bts{height:36px;padding:0 10px}#b-bts .bts-l{display:none}#b-bts b{font-size:12px}#b-bts span{display:none} /* landscape phones too (auth.css only hid it under 760 px wide) */

  /* one bottom row above the tab strip: [RESET] ........ [INCIDENTS n] [NEWS WIRE] */
  body .nr[data-open] .nr-tab{width:124px;height:32px;padding:0 10px;justify-content:center;bottom:calc(var(--botb) + var(--both) + 60px)}
  .nr-tab b{position:absolute;top:-8px;right:-6px}
  #inc-tab{right:calc(var(--g) + 132px);bottom:calc(var(--botb) + var(--both) + 60px);height:32px;padding:0 10px;letter-spacing:.14em}
  #qs{bottom:calc(var(--botb) + var(--both) + 60px);height:32px;padding:0 4px}
  #qs .qs-x{display:none}
  #inc-tab.dnd::after{content:none}#inc-tab.dnd .inc-ic{filter:grayscale(1);opacity:.45} /* the MUTED tag pushed the row into RESET; a grey diamond says it */
  /* ...and none of it floats over an open sheet */
  body.l-open #inc-tab,body.r-open #inc-tab,body.nr-open #inc-tab,body.l-open #qs,body.r-open #qs{display:none}
  body.l-open .nr[data-open="0"] .nr-tab,body.r-open .nr[data-open="0"] .nr-tab{display:none!important}
  #inc-log{left:var(--g);right:var(--g);width:auto;bottom:calc(var(--botb) + var(--both) + 100px)}

  /* toasts ride under the HUD strip, not over the open bottom sheet (VIEW LINK COPIED landed on the saved-views text) */
  #toast{top:calc(var(--topy) + var(--toph) + 56px);bottom:auto}

  /* legend sat behind the INCIDENTS / NEWS WIRE row (its heading was cut off); same offset as #inc-log, and out of the way of open sheets */
  #legend{bottom:calc(var(--botb) + var(--both) + 100px);max-height:34dvh}
  body.l-open #legend,body.r-open #legend,body.nr-open #legend{display:none}

  /* iOS zooms the page when a focused field is under 16px: header search, command palette, login + passcode re-check */
  .search input,#pal-q,#gate input,#gate select{font-size:16px}
  .search input::placeholder{font-size:12px}
  #boot-skip{min-height:36px;min-width:64px}
  /* landscape phone: the login card is taller than the screen, so let it scroll instead of clipping logo + button */
  #gate{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}#gate .gbox{margin:auto}

  /* UAP tab: the radar was a full-width ~360px disc that pushed every switch below the fold */
  .uap-radar{max-width:210px;margin-left:auto;margin-right:auto}

  /* UAP tracking pops ONE cam on phones (CJ 10/13): a single tile, right-aligned, so the globe stays visible */
  #pcams.one{left:auto;width:min(260px,72vw);bottom:calc(var(--botb) + var(--both) + 100px)}#pcams.one .pc-g{grid-template-columns:1fr}#pcams.one .pc-h b{white-space:nowrap}
  /* RADAR INTERCEPT card: it covered the whole phone screen and the cam under it. Compact, pinned under the LIVE TRACKING pill */
  #uap-x{top:calc(var(--topy) + var(--toph) + 50px);bottom:auto;gap:4px;padding:8px 10px}
  #uap-x .ux-top,#uap-x .ux-shp,#uap-x .ux-alt,#uap-x small{display:none}
  #uap-x .ux-row{gap:10px}#uap-x .ux-scope{width:72px;height:72px}#uap-x .ux-mph b{font-size:16px}#uap-x .ux-mph span{font-size:8px}
  #uap-x b{font-size:13px;letter-spacing:.08em}#uap-x .ux-k{font-size:9px;letter-spacing:.14em}#uap-x .ux-s,#uap-x .ux-c{font-size:9px;margin:2px 0}
  #uap-x .ux-ph i{font-size:8px;padding:2px 4px;letter-spacing:.08em}
  #uap-x .ux-d{grid-template-columns:auto 1fr auto 1fr;gap:1px 8px;font-size:9px}
  #uap-x .ux-resp{padding:3px 6px}#uap-x .ux-resp em{font-size:9px}#uap-x .ux-row{align-items:flex-start}

  /* target-lock label sits right of the reticle (screen centre) and ran off the edge: wrap it in the room that is left (tabs-c 10/13) */
  #reticle .rtx{white-space:normal;width:calc(50vw - 92px);line-height:1.25;overflow-wrap:anywhere}

  /* generic left-panel controls were 17-20px tall: filter chips, ALL ON/OFF + base-overlay segments, ALL/NONE links (QA tabs-d 10/13) */
  .chip{min-height:32px;padding:4px 9px;font-size:10.5px}
  .chips{max-height:min(280px,36vh);gap:6px} /* taller chips: the 132px cap cut rows in half */
  .seg button{min-height:36px;padding:6px 12px}
  .mini{gap:8px}.mini button{min-height:32px;padding:0 10px;font-size:10.5px}
  .lcard .list button{min-height:40px}
  .lcard>header label.tg,.wx-ms label.tg{padding:12px 6px;margin:-12px -6px} /* the ON/OFF switch was a 46x19 hit area; the padding makes it 44px tall */
  input[type=range]{height:32px}input[type=range]::-webkit-slider-thumb{width:16px;height:22px;margin-top:-10px}
  .frow input[type=text],.frow select{min-height:38px;font-size:16px}

  /* QA tabs-b: the FLOW 7K / close-up chip sat at bottom:64px, i.e. hidden under the tab strip; park it under the stat strip */
  #f3d-chip{bottom:auto;top:calc(var(--topy) + var(--toph) + 50px)}

  /* QA tabs-b: INSPECT FLY TO / FOLLOW / PIN were 29px tall */
  #tb-inspect .acts .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}

  /* briefing: keyboard shortcuts mean nothing on a phone */
  .hbox h3:has(+ .hkeys),.hkeys{display:none}
}
@media (max-width:380px){
  #brand .word h1{white-space:normal;width:min-content;line-height:1.05} /* SITUATION / ROOM on two lines for 360px phones */
  #fps{display:none} /* the status line clipped the layer readout mid-word */
}
@media (max-height:500px) and (pointer:coarse){
  .lp-head{margin-bottom:2px;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:4px}.lp-head h2{font-size:14px;letter-spacing:.14em;white-space:nowrap}.lp-head small{font-size:9px;letter-spacing:.12em;text-align:right} /* landscape: the 2-line heading ate a third of the side sheet (QA tabs-d) */
  #lmaster{margin-top:2px}
}

/* LANDSCAPE PHONE (844x390): the bottom sheets sat 100px off the floor with ~150px left, or ran up over the header. Cap them to the free band. */
@media (max-height:500px) and (pointer:coarse){
  #inc-log{max-height:calc(100dvh - var(--topy) - var(--toph) - var(--botb) - var(--both) - 112px);overflow-y:auto}
  #alc,body.r-open #alc,body:has(#hqp:not([hidden])) #alc{left:var(--g);right:auto;width:min(480px,58vw);top:calc(var(--topy) + var(--toph) + 8px);bottom:calc(var(--botb) + var(--both) + 64px);max-height:none}
  #legend{right:var(--g);left:auto;width:min(300px,45vw)}
}

/* ================= UX SWEEP (CJ 10/13: 10 Sonnet agents measured every viewport; Opus integrated the shared fixes here) ================= */
/* safe areas (index.html has viewport-fit=cover): every bottom anchor is built from --botb, so the home bar pushes everything up together */
:root{--botb:calc(18px + env(safe-area-inset-bottom,0px))}
.classbar.bottom{height:calc(16px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
@media (max-height:500px) and (pointer:coarse){ :root{--g:max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))} }
/* header fit: the HUD counters need ~1178px, so they hide below 1190 (Settings + "..." were pushed off-screen on tablets and small laptops) */
@media (max-width:1190px){ #hud{display:none} }
@media (min-width:761px) and (max-width:900px){ #b-bts{padding:0 10px} #b-bts span,#b-bts .bts-l{display:none} }
@media (max-width:340px){ #top{gap:4px} #tools{gap:4px} #tools .ibtn{width:32px} #b-bts{padding:0 8px} #brand .logo{height:34px;width:auto} #brand{gap:5px} }
@media (min-width:361px) and (max-width:760px){ #tools .ibtn,#b-bts{height:44px} }
/* Settings + BTS never run off the bottom (200% zoom, landscape phones, 320px) */
#settings{max-height:calc(100vh - var(--topy) - var(--toph) - var(--botb) - 40px);max-height:calc(100dvh - var(--topy) - var(--toph) - var(--botb) - 40px);overflow-y:auto;overscroll-behavior:contain}
#bts{max-height:calc(100dvh - 170px)}
@media (max-width:760px){ #bts{max-height:calc(100dvh - 186px)} }
@media (max-height:500px) and (pointer:coarse){ #bts{max-height:calc(100dvh - var(--topy) - var(--toph) - var(--botb) - var(--both) - 16px);padding:12px} #bts .bop{padding:6px 8px;margin-bottom:8px} }
/* a closed right panel is invisible AND out of the tab order */
#rpanel{visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s .25s}
#rpanel.open{visibility:visible;transition:transform .25s,opacity .25s}
#tb-inspect:focus{outline:none}
/* bottom-right stack on desktop: legend sits above the attribution + INCIDENTS, and above TILT/compass when that shows; toast clears RESET */
@media (min-width:761px) and (min-height:501px){ #legend{bottom:calc(var(--botb) + var(--both) + 96px)} body:has(#camctl:not([hidden])) #legend{bottom:calc(var(--botb) + var(--both) + 170px)} }
@media (min-width:761px){ #toast{top:calc(var(--topy) + var(--toph) + 56px)} }
/* tablets with a panel open: the floating pills + legend sat on the panel content */
@media (min-width:761px) and (max-width:1100px){ body.l-open #inc-tab,body.r-open #inc-tab,body.l-open #qs,body.r-open #qs,body.l-open #legend,body.r-open #legend{display:none} }
@media (max-width:359px){ #inc-tab{right:calc(var(--g) + 104px);padding:0 8px;letter-spacing:.08em} body .nr[data-open] .nr-tab{width:100px;padding:0 6px} }
/* landscape phone: legend left (TILT lives right), attribution no longer stretched top-to-bottom */
@media (max-height:500px) and (pointer:coarse){ #legend{left:var(--g);right:auto} #attrib{bottom:auto} #tb-inspect .ins-h img{display:none} #tb-inspect .acts{margin:4px 0} #media .player{margin:4px 0} }
/* RADAR LOOP on phones: the scrubber (PLAY + time) was display:none on every phone, so the SECRET loop was unusable there */
@media (max-width:760px){ #scrub:not([hidden]){display:flex;position:fixed;left:var(--g);right:var(--g);width:auto;bottom:calc(var(--botb) + var(--both) + 104px);z-index:8;padding:4px 8px} #sc-label{min-width:0;font-size:10px} #sc-play{min-height:40px} body:has(#scrub:not([hidden])) #legend{bottom:calc(var(--botb) + var(--both) + 150px)} body.l-open #scrub,body.r-open #scrub{display:none} }
@media (min-width:761px) and (max-height:500px) and (pointer:coarse){ #scrub:not([hidden]){display:flex;position:fixed;left:50%;transform:translateX(-50%);width:min(440px,52vw);bottom:calc(var(--botb) + var(--both) + 100px);z-index:8;padding:3px 8px} #sc-label{min-width:0;font-size:10px} #sc-play{min-height:36px} body.l-open #scrub,body.r-open #scrub{display:none} }
/* touch targets (44px where it fits) */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){ .tabs button,.rhead .rclose{min-height:44px} #tb-inspect .acts .btn{min-height:44px} .nb button,.rel button{min-height:44px} #tb-inspect .txt a,#tb-inspect small a{display:inline-block;padding:12px 4px;margin:-12px -4px} }
@media (pointer:coarse){ .seg button,.btn.sm,.cf-c{min-height:44px} label.tg{position:relative} label.tg::after{content:"";position:absolute;inset:-8px -4px} #wt-views .btn.sm,#wt-views .wv-x{min-height:36px} #wt-views .wv-x{min-width:44px} #wxx-fc .btn{min-height:36px} }
#l-close.top::after{content:"";position:absolute;left:-12px;right:-12px;top:-20px;bottom:0}
/* iOS zooms the page when a focused input is under 16px */
@media (pointer:coarse){ input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important} }
/* contrast: small labels that were under AA */
#gate .gfoot,#bts .ladder i,.hx-none{color:var(--dim)}
#rail button.lk-tab,#catstrip button.lk-tab{opacity:.82}
/* RESET TO BARE was squeezed to ~64px on tablets: its max-width reserves room for a right panel on BOTH sides; only do that when one is open */
@media (min-width:761px){ body:not(.r-open) #qs{max-width:calc(100vw - 2 * (var(--railw) + var(--g) + 20px))} }
/* touch tablets: keep the scrubber at desktop height so it stays clear of the INCIDENTS pill */
@media (min-width:761px) and (min-height:501px) and (pointer:coarse){ #scrub .btn.sm{min-height:30px} }
/* CJ 10/13: every category tab shows its ON/OFF toggles first (ALL ON/OFF, base overlay picker, layer cards), the tab's widgets after.
   Widgets (cam finder, chokepoints, sitrep, radio dial...) insert themselves above #lcards at runtime, so the order is set here, not in JS. */
#lpanel{display:flex;flex-direction:column}
#lpanel>*{flex:none}
#lpanel::before{order:-9}
#lpanel>.lp-head{order:-4}
#lpanel>#lmaster,#lpanel>#basesel{order:-3}
#lpanel>#lcards{order:-2}
/* CJ 10/13 QA: INFRASTRUCTURE overran its 62px rail button */
#rail button[data-cat="transport"]>span{letter-spacing:0;font-size:8px}
/* bottom strip: phones get the short line, centered, so the rounded screen corners never eat the first letter */
.cb-short{display:none}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){ .classbar.bottom{justify-content:center} .classbar.bottom .cb-full{display:none} .classbar.bottom .cb-short{display:inline} }