/* The Property Viewer (/map) on a phone, design C "app tabs" + the Public-view phone review (owner 2026-10-29). Linked with
   media="(max-width:760px)", so nothing here reaches a wider screen; the script (kg-phonetabs.js) does nothing there either.
   - a 60 px navy tab bar along the bottom (Map / Tours / Layers or Show me / Ask / More) in the old bottom rail's place
   - one 1D / 2D / 3D / Geology switch at the top, a Home link, and the property's numbers on one line under it
   - "Show me": the questions as a row of big buttons over the bottom of the map
   - a tapped feature's card docks above the bar; locked tools are left out, not shown with a padlock
   Every sheet that sat on the old bar (layers, tours, saved views, the questions …) sits on this one: --railh is its height. */

:root, html body, html body.railicons { --railh:calc(60px + env(safe-area-inset-bottom, 0px)) !important; }

/* the old bottom rail, the ⋮ Map tools button and the old More sheet give way to the tab bar (their buttons stay in the page –
   the tabs and the More sheet press them) */
body.kgph #rail, body.kgph #phfab, body.kgph #phmore, body.kgph #runfold { display:none !important; }
/* (2 – locked tools are left out on a phone, not greyed with a padlock) */
body.kgph #dash .locked, body.kgph #presets .locked { display:none !important; }

/* ---- the tab bar */
#kgph-tabs { order:6; flex:0 0 var(--railh); display:flex; align-items:stretch; height:var(--railh); padding-bottom:env(safe-area-inset-bottom, 0px);
  box-sizing:border-box; background:#1f2d3a; border-top:1px solid rgba(255,255,255,.12); position:relative; z-index:480; }
#kgph-tabs button, #kgph-tabs a { flex:1 1 0; min-width:0; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; margin:0; padding:0 2px; color:#cfd6dd; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:500 11.5px Roboto, system-ui, sans-serif; letter-spacing:.01em; white-space:nowrap; }
#kgph-tabs i { font-style:normal; font-size:21px; line-height:1; }
#kgph-tabs .on { color:#fac11c; }
#kgph-tabs button:active { background:rgba(255,255,255,.06); }
#kgph-tabs [hidden] { display:none; }

/* ---- the top: Home + the view switch, and the numbers on one line (6) */
#kgph-top { order:-1; flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:6px 8px 5px; background:#1f2d3a; position:relative; z-index:20; }
#kgph-top .kh { flex:0 0 46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.07); color:#fac11c; font:800 15px "Open Sans Condensed", system-ui, sans-serif; letter-spacing:.02em; }
#kgph-top .ks { flex:1 1 auto; display:flex; height:46px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.16); }
#kgph-top .ks button { flex:1 1 0; min-width:0; border:0; background:transparent; color:#e6ebf0; font:700 14px system-ui, sans-serif; cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent; }
#kgph-top .ks button + button { border-left:1px solid rgba(255,255,255,.12); }
#kgph-top .ks button.on { background:#fac11c; color:#1f2d3a; }
body.kgph #kgfacts { order:-1; flex:0 0 auto; height:auto; min-height:0; border-top:0; padding:0 4px 5px; background:#1f2d3a; }
body.kgph #kgfacts .kf { flex:0 0 auto; flex-direction:row; align-items:center; gap:5px; min-height:30px; padding:0 10px; border-right:1px solid rgba(255,255,255,.1); }
body.kgph #kgfacts .kf b { font-size:13px; } body.kgph #kgfacts .kf span { font-size:11.5px; }
/* (a number opens its question – kg-phonetabs.js; one without a question is read-only. No fold button: the line is short) */
body.kgph #kgfacts .kf { min-height:44px; } body.kgph #kgfacts .kf.nolink { pointer-events:none; } body.kgph #kgfacts .kfx { display:none; }
body.kgph #kgfacts .kf:not(.nolink) b::after { content:" ›"; color:#8fa1b1; font-weight:400; }
body.kgph #kgfacts.fold { height:auto; padding:0 4px 5px; background:#1f2d3a; } body.kgph #kgfacts.fold .kf { display:flex; }
body.touring #kgph-top { display:none; }

/* ---- Show me (7): the questions as big buttons across the bottom of the map; swipe for more */
#kgph-show { position:absolute; left:0; right:0; bottom:10px; z-index:9; display:flex; gap:8px; overflow-x:auto; padding:0 10px; scrollbar-width:none;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; pointer-events:auto; }
#kgph-show::-webkit-scrollbar { display:none; }
#kgph-show[hidden], body.touring #kgph-show, body.kgph-card #kgph-show, body.v1d #kgph-show { display:none; }
#kgph-show button { flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:48px; padding:0 16px; border:0; border-radius:24px; background:#fff; color:#1f2d3a;
  font:700 14.5px system-ui, sans-serif; box-shadow:0 3px 12px rgba(0,0,0,.35); cursor:pointer; scroll-snap-align:start; white-space:nowrap; }
#kgph-show button i { font-style:normal; color:#b8860b; font-size:17px; }
#kgph-show button.lead { background:#fac11c; }
#kgph-show button.lead i { color:#1f2d3a; }
#kgph-show button.tourb { background:#1f2d3a; color:#fff; border:2px solid #fac11c; } #kgph-show button.tourb i { color:#fac11c; }
/* (the one-time "Swipe for more questions" over the row) */
#kgph-hint { position:absolute; right:10px; bottom:66px; z-index:9; padding:6px 12px; border-radius:14px; background:rgba(16,22,28,.9); color:#fff;
  font:600 13px system-ui, sans-serif; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.35); }
body.kgph-card #kgph-hint, body.touring #kgph-hint { display:none; }
/* (in 3D the row sits above the 3D view's own tool buttons and legend) */
#kgph-show.in3d { bottom:72px; }
/* (9) the first-visit tour box gives way to the row's "1-minute tour" button */
body.kgph #howto { display:none !important; }

/* ---- my location: how far, and directions (5) */
#kgph-loc { position:absolute; left:10px; right:70px; bottom:70px; z-index:10; display:flex; align-items:center; gap:8px; padding:8px 6px 8px 14px; border-radius:12px;
  background:#1f2d3a; color:#fff; font:14px/1.35 system-ui, sans-serif; box-shadow:0 4px 16px rgba(0,0,0,.4); border-left:4px solid #fac11c; }
#kgph-loc[hidden] { display:none; }
#kgph-loc b { color:#fac11c; } #kgph-loc span { flex:1 1 auto; }
#kgph-loc a, #kgph-loc .lq { display:inline-flex; align-items:center; min-height:44px; padding:0 6px; color:#fac11c; font:700 14px system-ui, sans-serif; text-decoration:none;
  background:none; border:0; cursor:pointer; }
#kgph-loc .lx { flex:0 0 44px; min-height:44px; border:0; background:none; color:#cfd6dd; font-size:22px; cursor:pointer; }
/* (my location sits above the row) */
body.kgph #locbtn { right:12px !important; bottom:196px !important; width:48px !important; height:48px !important; }
/* (the sheets that opened from the old bar's buttons: from the bottom, as tall as their list) */
body.kgph #tourbox, body.kgph.kg-pubtour #tourbox { top:auto !important; left:8px !important; right:8px; bottom:calc(var(--railh) + 8px); width:auto; height:auto; max-height:70vh; }
body.kgph.kgph-card #locbtn { display:none !important; }

/* ---- More: one sheet of rows above the bar */
#kgph-more { position:fixed; left:8px; right:8px; bottom:calc(var(--railh) + 8px); z-index:470; background:#1f2d3a; color:#fff; border-radius:14px;
  padding:6px 12px 10px; box-shadow:0 8px 28px rgba(0,0,0,.5); max-height:70vh; overflow:auto; font:14px system-ui, sans-serif; }
#kgph-more[hidden] { display:none; }
#kgph-more .mh { display:flex; align-items:center; justify-content:space-between; padding:4px 0 6px; }
#kgph-more .mh b { color:#fac11c; font-size:15px; }
#kgph-more .mx { border:0; background:none; color:#fff; font-size:24px; min-width:44px; min-height:44px; cursor:pointer; }
#kgph-more .mr { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; border:0; border-top:1px solid rgba(255,255,255,.1); background:none; color:#fff;
  font:600 15px system-ui, sans-serif; text-align:left; padding:6px 2px; cursor:pointer; text-decoration:none; }
#kgph-more .mr i { font-style:normal; width:28px; text-align:center; font-size:19px; color:#fac11c; }
#kgph-more .mr small { display:block; font:400 12px system-ui, sans-serif; color:#a9b6c2; }

/* ---- Tours (8): three, then "All tours" */
#tourbox.kgph-few .tg { display:none; }
#tourbox.kgph-few .tcard.kgph-cut { display:none; }
#tourbox .kgph-all { display:block; width:100%; min-height:48px; margin-top:8px; border:1px solid var(--line); border-radius:10px; background:none; color:inherit;
  font:700 14.5px system-ui, sans-serif; cursor:pointer; }
#tourbox .tcard .tr button { min-height:44px; }
#tourbox .tx { min-width:44px; min-height:44px; }

/* (3) a few small controls over the map, a finger's size */
body.kgph #howto button { min-height:44px; }
body.kgph #selchip { min-height:44px; } body.kgph #selchip .sx, body.kgph #selchip .sask { min-width:44px; }
body.kgph #phchips .phchip { min-height:44px; padding:0 14px; }
body.kgph #kgq .qx, body.kgph #tourbox .tx, body.kgph #pinbox .tx { min-width:44px; min-height:44px; }

/* (6) a question's answer: ‹  2 of 6  Next: Gold › under it */
#kgq .kgph-next { display:flex; align-items:center; gap:8px; margin:10px 0 2px; padding-top:10px; border-top:1px solid #e3e6ea; }
#kgq .kgph-next span { flex:1 1 auto; text-align:center; font:12.5px system-ui, sans-serif; color:#6b7680; }
#kgq .kgph-next button { min-width:44px; min-height:44px; border:1px solid #d9d5cc; background:#fff; border-radius:10px; font:700 15px system-ui, sans-serif; color:#17222c; cursor:pointer; }
#kgq .kgph-next .nx { padding:0 14px; background:#fac11c; border-color:#fac11c; }