/* The Property Viewer (/map) on a phone (≤ 760 px) – the 25 declutter changes (owner 2026-10-24: "Can you come up with 25
   suggestions to improve the map viewer on mobile" … "do them all"). Linked with media="(max-width:760px)", so nothing here
   reaches a wider screen. The frames' own phone rules are injected from map-viewer.js (touchFrameUi / touch3dUi). */

/* 20 – bigger rows in the layer list: 44 px a row, the tick on the right reach of a thumb */
aside .kgt { font-size:14px; }
aside .kgt summary, aside .kgt label.lf { min-height:42px; padding-top:6px; padding-bottom:6px; }
aside .kgt input[type=checkbox] { width:20px; height:20px; }
aside .kgt .g1 > summary { font-size:14.5px; }

/* (4 and 3 – the old bottom bar's More sheet and icons-only mode – went 2026-10-30: the phone tab bar, kg-phonetabs.css, has its own) */

/* 1, 5, 10 – the line and depth chips on the model, top right; their sheets from the bottom */
:root { --depthw:0px !important; }
#phchips { position:absolute; top:8px; right:8px; z-index:8; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
#phchips .phchip { display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:6px 11px;
  background:rgba(16,22,28,.88); color:#fff; font:600 12.5px system-ui,sans-serif; white-space:nowrap; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35); }
#phchips .phchip[hidden] { display:none; }
#phchips .phchip span { color:#a9b3bd; font-weight:500; } #phchips .phchip.on { background:var(--gold); color:var(--ink); border-color:var(--gold); }
#phchips .phchip.on span { color:var(--ink); }
/* the line bar: gone until its chip is tapped, then one sheet over the bottom bar */
body:not(.v1d):not(.vgeol):not(.lbopen) #linebar { display:none !important; }
body.lbopen:not(.v1d):not(.vgeol) #linebar { position:fixed; left:8px; right:8px; bottom:calc(var(--railh) + 8px); z-index:450; border-radius:12px; flex-wrap:wrap;
  max-height:62vh; overflow:auto; padding:10px; gap:8px; box-shadow:0 8px 28px rgba(0,0,0,.5); }
/* the Depth column: gone until its chip is tapped, then a sheet – the slider across, the Cuts box above it */
body:not(.depthopen) #depth { display:none !important; }
body.depthopen #depth:not([hidden]) { position:fixed; top:auto; left:8px; right:8px; bottom:calc(var(--railh) + 8px); width:auto; z-index:450; display:flex; flex-direction:row;
  flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px; border:0; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.5); font-size:13px; }
body.depthopen #depth input[type=range] { writing-mode:horizontal-tb; flex:1 1 60%; width:auto; height:28px; min-height:0; }
body.depthopen #depth .dh { flex:0 0 auto; font-size:13px; } body.depthopen #depth .dv { flex:0 0 auto; }
body.depthopen #depth #dplay, body.depthopen #depth select { width:auto !important; flex:0 0 auto; font-size:13px !important; padding:5px 12px !important; display:inline-block !important; }
body.depthopen #depth .dbar { flex:1 1 100%; } body.depthopen #depth .dlh { flex:1 1 100%; flex-direction:row; justify-content:space-between; display:flex !important; font-size:11px; }
body:not(.depthopen) #cuts { display:none !important; }
body.depthopen #cuts { position:fixed !important; left:8px !important; right:8px !important; top:auto !important; bottom:calc(var(--railh) + 112px) !important; z-index:451; max-width:none !important; }

/* 15, 16, 17 – the top bar: Center (hold: Reset), Looks ▾ and ‹ ★ Targets ›; the sets wait in the Looks sheet as named tiles;
   the 3D Targets bar at the bottom is gone (the ‹ › beside Targets step the same spotlight) */
#pquick { display:flex !important; align-items:center; gap:6px; flex:0 0 auto; padding:5px 12px; border-radius:9px; border:2px solid transparent; background:var(--gold);
  color:#1f2d3a; font:800 13px system-ui,sans-serif; cursor:pointer; }
#pquick[aria-expanded="true"] { border-color:#fff; }
body:not(.quickopen):not(.phtools) #presets > :not(#pcenter):not(#tgtprev):not(#tgt):not(#tgtsplit):not(#tgtnext):not(#tgtpub) { display:none !important; }
body.quickopen #presets { position:fixed !important; left:8px !important; right:8px !important; top:auto !important; bottom:calc(var(--railh) + 8px) !important; width:auto !important;
  z-index:450; display:grid !important; grid-template-columns:1fr 1fr; gap:8px; max-height:70vh; overflow:auto; background:#1f2d3a; padding:12px; border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.5); }
body.quickopen #presets > * { display:flex !important; }
body.quickopen #presets button:not(.split):not(.tgtstep) { flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:64px;
  font:700 13px system-ui,sans-serif !important; padding:8px 6px !important; border-radius:10px; text-align:center; }
body.quickopen #presets button:not(.split):not(.tgtstep) > span:first-child { font-size:22px !important; }
body.quickopen #presets button.split { display:none !important; }   /* (the ▾ part-picks: on a wider screen) */
body.quickopen #presets .tgtstep, body.quickopen #presets #tgt, body.quickopen #presets #tgtsplit { display:none !important; }
#pclear { display:none !important; } body.quickopen #presets #pclear { display:flex !important; }
#tgtbar3 { display:none !important; }

/* 2 – while a finger is on the model, the bars fade back (they return 2 s after) */
#dash, #rail, #phchips { transition:opacity .25s; }
body.kgdrag #dash, body.kgdrag #rail, body.kgdrag #phchips { opacity:.18; }

/* 22 (3D) – What's here, a sheet over the 3D view */
#whsheet:not([hidden]) { display:block; position:fixed; left:8px; right:8px; bottom:calc(var(--railh) + 8px); height:55vh; z-index:455; background:#fff;
  border-radius:12px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,.5); border-top:3px solid var(--gold); }
#whsheet iframe { width:100%; height:100%; border:0; }
#whsheet .ps-x { position:absolute; right:6px; top:4px; z-index:1; border:0; background:none; color:#1f2d3a; font-size:24px; padding:2px 8px; cursor:pointer; }

/* the top bar behind one floating button (⋮), opening as a full-screen "Map tools" page (owner 2026-10-24: "click that button and it
   uses the WHOLE page and then saves and closes"): every change applies as it is tapped; Done closes the page */
.stage { position:relative; }
#phfab { position:absolute; top:8px; right:8px; z-index:12; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:rgba(16,22,28,.9); color:var(--gold); font:700 22px/1 system-ui,sans-serif; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.45); cursor:pointer; }
/* closed: no top bar – only a picked item's chip floats top left */
#dash { position:absolute !important; top:8px; left:8px; right:58px; z-index:11; background:transparent !important; padding:0 !important; flex-wrap:wrap; gap:6px !important;
  justify-content:flex-start; align-items:flex-start; pointer-events:none; }
#dash > * { pointer-events:auto; }
body:not(.phtools):not(.quickopen) #dash > :not(#selchip) { display:none !important; }
body.quickopen:not(.phtools) #dash > :not(#presets):not(#selchip) { display:none !important; }
/* open: the whole screen */
body.phtools #phfab { display:none; }
body.phtools #dash { position:fixed !important; inset:0; width:auto; max-width:none; z-index:470; display:block !important; overflow:auto; padding:0 16px 24px !important;
  background:#16202b !important; pointer-events:auto; }
body.phtools #dash > * { display:none !important; }
body.phtools #dash > .phpage, body.phtools #dash > #phchips { display:block !important; }
body.phtools #dash > .ph-top { display:flex !important; }
body.phtools #dash > #presets { display:grid !important; }
#dash .phpage { display:none; }
#dash .ph-top { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; margin:0 -16px 6px; padding:14px 16px 10px; background:#16202b;
  border-bottom:1px solid rgba(255,255,255,.08); }
#dash .ph-top b { font:800 19px "Open Sans Condensed", system-ui, sans-serif; text-transform:uppercase; color:#fff; letter-spacing:.02em; }
#dash .ph-done { border:0; background:var(--gold); color:var(--ink); font:800 15px system-ui,sans-serif; border-radius:8px; padding:9px 20px; cursor:pointer; }
#dash .ph-h { margin:18px 0 8px; font:700 11.5px system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#9fb0c0; }
#dash .ph-row { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; margin:0 0 8px; padding:10px 14px; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; background:#1f2d3a; color:#fff; font:600 15px system-ui,sans-serif; text-align:left; cursor:pointer; }
#dash .ph-row .pi { width:26px; text-align:center; font-size:20px; color:var(--gold); } #dash .ph-row .pv { margin-left:auto; color:#c9d2db; font-weight:500; }
/* the sets as tiles, two to a row; the Targets row across */
body.phtools #presets { position:static !important; display:grid !important; grid-template-columns:repeat(6, 1fr); gap:8px; background:none !important; padding:0 !important;
  box-shadow:none !important; max-height:none !important; overflow:visible !important; width:auto !important; }
body.phtools #presets > * { display:flex !important; grid-column:span 3; }
body.phtools #presets button:not(.split):not(.tgtstep) { flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:66px;
  font:700 14px system-ui,sans-serif !important; padding:8px 6px !important; border-radius:10px; }
body.phtools #presets button:not(.split):not(.tgtstep) > span:first-child { font-size:22px !important; }
body.phtools #presets .split { display:none !important; }
body.phtools #presets #tgtprev, body.phtools #presets #tgtnext { grid-column:span 1; min-height:66px; justify-content:center; align-items:center; font-size:22px !important; }
body.phtools #presets #tgt { grid-column:span 4; }
body.phtools #presets #pclear { display:flex !important; }
body.phtools #dash #phchips { position:static !important; display:block !important; }
body.phtools #dash #phchips .phchip { display:flex; width:100%; min-height:52px; margin:0 0 8px; padding:10px 14px; border-radius:10px; font-size:15px; justify-content:flex-start; }
body.phtools #dash #phchips .phchip[hidden] { display:none; }
/* (the Targets row under the sets: ‹ ★ Targets ›) */
body.phtools #presets > * { order:1; }
body.phtools #presets #tgtprev, body.phtools #presets #tgt, body.phtools #presets #tgtnext { order:2; }
body.phtools #presets #tgtpub { order:2; grid-column:span 6; }