:root { --glass: rgba(22, 26, 34, .58); --line: rgba(255,255,255,.14); --ink: #f3f5f8; --mut: #aab3c0; --blue: #0a84ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1117; color: var(--ink); font: 14px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
.glass { background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.hidden { display: none !important; }
#loader { position: fixed; inset: 0; background: #0b0f15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 50; transition: opacity .6s; }
#loader.fade { opacity: 0; pointer-events: none; }
.l-top { letter-spacing: .5em; font-size: 11px; color: var(--mut); }
.l-name { font-size: 30px; font-weight: 300; letter-spacing: .02em; }
.l-bar { width: 220px; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.l-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s; }
.l-brand { position: absolute; bottom: 28px; letter-spacing: .35em; font-size: 11px; color: var(--mut); }
#intro { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); padding: 22px; z-index: 30; display: flex; flex-direction: column; gap: 14px; }
.tip { display: flex; gap: 12px; align-items: center; color: var(--ink); }
.tip svg { width: 26px; height: 26px; flex: none; color: var(--blue); }
#intro button, #walkhint button { align-self: center; background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 600; cursor: pointer; }
#tabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 20; }
#tabs button { writing-mode: vertical-rl; letter-spacing: .45em; font-size: 11px; padding: 16px 9px; background: var(--glass); backdrop-filter: blur(14px); color: var(--ink); border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; cursor: pointer; }
#tabs button.on { background: var(--blue); }
.pop { position: fixed; right: 46px; top: 50%; transform: translateY(-50%); width: min(320px, calc(100vw - 70px)); max-height: 76vh; overflow: auto; padding: 14px; z-index: 25; }
.pop h3 { margin: 2px 4px 10px; font-size: 13px; font-weight: 600; color: var(--mut); }
.row { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.row:hover { background: rgba(255,255,255,.07); }
.row.on { background: var(--blue); }
.row svg { width: 18px; height: 18px; flex: none; }
.row b { display: block; font-weight: 600; } .row small { color: var(--mut); } .row.on small { color: #e6f0ff; }
.row input { accent-color: var(--blue); }
#card { position: fixed; left: 16px; bottom: 76px; width: min(330px, calc(100vw - 32px)); padding: 14px 16px; z-index: 20; }
#card h4 { margin: 0 0 2px; font-size: 16px; } #card .sub { color: var(--mut); margin-bottom: 8px; }
#card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; } #card dt { color: var(--mut); } #card dd { margin: 0; }
#card .x { position: absolute; right: 10px; top: 8px; background: none; border: 0; color: var(--mut); font-size: 18px; cursor: pointer; }
#pill { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; padding: 4px; gap: 2px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; z-index: 20; }
#pill button { background: none; border: 0; color: var(--ink); padding: 8px 18px; border-radius: 999px; font-weight: 600; cursor: pointer; }
#pill button.on { background: var(--blue); }
#walkhint { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; padding: 8px 10px 8px 16px; z-index: 20; color: var(--mut); }
#walkhint button { padding: 6px 14px; }
#joy { position: fixed; left: 24px; bottom: 80px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid var(--line); z-index: 21; touch-action: none; }
#joy i { position: absolute; left: 40px; top: 40px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.35); }
#credit { position: fixed; left: 12px; bottom: 6px; font-size: 10px; color: rgba(255,255,255,.55); z-index: 10; pointer-events: none; }
#hud { position: fixed; left: 8px; top: 8px; margin: 0; padding: 8px 10px; font: 11px/1.4 ui-monospace, Menlo, monospace; background: rgba(0,0,0,.6); border-radius: 8px; z-index: 40; pointer-events: none; }
@media (max-width: 640px) { #pill button { padding: 7px 13px; } #card { bottom: 70px; } #credit { display: none; } }
/* F1: minimap + route panel (glass, top-left) and SIMULATED operations popover */
#map { position: fixed; left: 16px; top: 16px; width: min(300px, calc(100vw - 80px)); padding: 10px; z-index: 22; display: flex; flex-direction: column; gap: 8px; }
.mapwrap { position: relative; } #mapcv { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; cursor: crosshair; touch-action: none; }
.mapbtns { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 4px; }
.mapbtns button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); cursor: pointer; font-size: 14px; line-height: 1; }
.mapbtns button.on { background: var(--blue); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--mut); } .legend i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; border-radius: 2px; }
#route { display: flex; flex-direction: column; gap: 6px; font-size: 12px; } #route .dest b { display: block; font-size: 13px; } #route small { color: var(--mut); }
#rt-flags { display: flex; flex-wrap: wrap; gap: 4px; } .chip { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.1); }
.chip.entrance, .chip.unresolved { background: rgba(255,90,200,.25); } .chip.restricted { background: rgba(229,72,77,.3); }
#rt-msg .warn { color: #ffb340; } #rt-msg .bad { color: #ff6b6b; } #rt-msg .ok { color: #30d158; }
.lnk { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 2px 8px; cursor: pointer; font-size: 11px; }
.opts { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--mut); } .opts input { accent-color: var(--blue); margin: 0 4px 0 0; vertical-align: -2px; }
.ctl { display: flex; gap: 6px; align-items: center; } #rt-speed { display: flex; margin-right: auto; background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px; }
#rt-speed button { background: none; border: 0; color: var(--ink); padding: 4px 8px; border-radius: 999px; cursor: pointer; font-size: 11px; } #rt-speed button.on { background: rgba(255,255,255,.18); }
#rt-go, #rt-cancel, #card .acts button, #ops-detail button, .scen button, .alert button { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
#rt-cancel { background: rgba(255,255,255,.14); } button:disabled { opacity: .4; cursor: default; }
#card .acts { margin-top: 10px; display: flex; gap: 6px; }
.simbar { font-size: 11px; letter-spacing: .08em; text-align: center; padding: 6px; border-radius: 8px; background: rgba(255,179,64,.18); color: #ffcf7a; margin-bottom: 10px; }
.scen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .scen button { padding: 5px 10px; font-size: 12px; background: rgba(255,255,255,.12); }
.alert { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 7px 9px; border-radius: 10px; margin-bottom: 4px; background: rgba(255,255,255,.05); border-left: 3px solid #ffb340; cursor: pointer; }
.alert.critical { border-left-color: #ff453a; } .alert.resolved { opacity: .5; } .alert b { font-size: 12px; display: block; } .alert small { display: block; color: var(--mut); font-size: 11px; } .alert button { padding: 4px 10px; font-size: 11px; }
.none { color: var(--mut); font-size: 12px; padding: 4px 6px; } .grp { color: var(--mut); font-size: 11px; margin: 8px 6px 2px; letter-spacing: .04em; }
.row.ent i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .row.ent { padding: 6px 8px; }
.tog { float: right; font-weight: 400; } .tog input { accent-color: var(--blue); vertical-align: -2px; }
#ops-detail { padding: 8px; border-radius: 10px; background: rgba(255,255,255,.05); margin: 6px 0; } #ops-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 6px; font-size: 12px; } #ops-detail dt { color: var(--mut); } #ops-detail dd { margin: 0; }
.spark { width: 100%; height: 34px; display: block; margin-bottom: 6px; }
#pop-ops { width: min(340px, calc(100vw - 70px)); }
@media (max-width: 640px) { #map { width: min(240px, calc(100vw - 70px)); padding: 8px; } .opts { font-size: 11px; } }
/* F2 */
#tabs button { position: relative; } .badge { position: absolute; left: -6px; top: -6px; writing-mode: horizontal-tb; letter-spacing: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ffb340; color: #111; font-size: 11px; font-weight: 700; line-height: 18px; }
.badge.crit { background: #ff453a; color: #fff; }
.simclock { font-size: 11px; color: var(--mut); margin: -4px 2px 8px; }
.alert.sel { outline: 1px solid var(--blue); } #ops-acount { color: #ffb340; font-weight: 600; margin-left: 6px; }
.dhd { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .dhd b { margin-right: auto; } .chip.sim { background: rgba(255,179,64,.25); color: #ffcf7a; }
.trans { font-size: 11px; color: var(--mut); margin: 4px 0 6px; } .trans small { display: block; color: var(--ink); margin-bottom: 2px; }
.sparkhd { display: flex; justify-content: space-between; font-size: 10px; color: var(--mut); }
.acts2 { display: flex; gap: 6px; } .acts2 .ghost { background: rgba(255,255,255,.14); }
.legend { align-items: center; } #legend-help { padding: 0 6px; margin-left: auto; }
.legtext { font-size: 11px; color: var(--mut); line-height: 1.4; } .legtext b { color: var(--ink); }
.warn { font-size: 11px; padding: 3px 7px; border-radius: 7px; background: rgba(255,255,255,.08); } .warn.u { background: rgba(255,90,200,.22); } .warn.r { background: rgba(229,72,77,.28); } .warn.g { background: rgba(242,189,60,.2); } .warn.s { background: rgba(255,69,58,.25); }
#rt-flags { flex-direction: column; } .acc, .evid { font-size: 11px; color: var(--mut); }
.elev { width: 100%; height: 28px; display: block; } .elevlab { display: flex; justify-content: space-between; font-size: 9px; color: var(--mut); margin-top: -2px; }
#navnote { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); padding: 8px 14px; z-index: 30; font-size: 13px; max-width: min(560px, calc(100vw - 32px)); text-align: center; }
#flyveil { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: 29; transition: none; }
#navfade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 29; transition: none; }
#map { max-height: calc(100vh - 32px); overflow: hidden; }
#route { max-height: calc(100vh - 32px - min(300px, calc(100vw - 80px)) - 80px); overflow-y: auto; overscroll-behavior: contain; }   /* the map canvas never scrolls away; the route details scroll on their own */
/* F3 operations */
.otabs { display: flex; gap: 4px; align-items: center; margin: 8px 0 6px; } .otabs button { background: rgba(255,255,255,.08); border: 0; color: var(--ink); padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; } .otabs button.on { background: var(--blue); } .otabs .tog { margin-left: auto; font-size: 12px; }
.ifilt { display: flex; gap: 4px; margin-bottom: 6px; } .ifilt button { background: none; border: 1px solid var(--line); color: var(--mut); border-radius: 999px; padding: 2px 9px; font-size: 11px; cursor: pointer; } .ifilt button.on { color: var(--ink); border-color: var(--ink); }
.abtn { display: flex; flex-direction: column; gap: 4px; } .alert .ghost { background: rgba(255,255,255,.14); }
.sev { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #ffb340; } .sev.critical { background: #ff453a; }
.tl .tli { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: baseline; font-size: 11px; padding: 4px 6px; border-radius: 6px; cursor: pointer; } .tl .tli:hover { background: rgba(255,255,255,.06); } .tl .tli.nosel { cursor: default; }
.tlt { color: var(--mut); font-variant-numeric: tabular-nums; } .chip.k-alert { background: rgba(255,179,64,.25); } .chip.k-operator { background: rgba(10,132,255,.3); } .chip.k-scenario { background: rgba(255,90,200,.25); } .chip.k-state { background: rgba(255,255,255,.12); }
.adv button { margin-left: 4px; }
/* F4 */
.mstate { position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(16,20,27,.92); border-radius: 10px; z-index: 3; color: var(--mut); font-size: 12px; padding: 12px; } .mstate.err { color: #ff8a80; }
#map { position: fixed; } .srch { position: relative; } #mapsearch { width: 100%; background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); padding: 6px 9px; font-size: 12px; outline: none; } #mapsearch:focus { border-color: var(--blue); }
#mapsearch-res { position: absolute; left: 0; right: 0; top: 32px; z-index: 5; background: rgba(22,26,34,.97); border: 1px solid var(--line); border-radius: 10px; padding: 4px; max-height: 260px; overflow-y: auto; }
.sr { padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12px; } .sr b { display: block; font-weight: 600; } .sr small { color: var(--mut); } .sr.on, .sr:hover { background: var(--blue); } .sr.on small { color: #e6f0ff; } .sr.none { cursor: default; color: var(--mut); }
@media (max-width: 760px) { #map { left: 8px; top: 8px; width: min(300px, calc(100vw - 64px)); } .pop { right: 44px; width: calc(100vw - 60px); } #pop-ops { width: calc(100vw - 60px); } #card { left: 8px; right: 52px; width: auto; } }
.prog { color: #9fd0ff; font-weight: 600; }
.otabs { flex-wrap: wrap; } .otabs button { white-space: nowrap; }
/* F5B: mobile (iPhone / iPad landscape), safe areas, walkthrough, Help, Offline Demo, rotate screen, walking bar */
#tabs { right: env(safe-area-inset-right); } #tabs button { letter-spacing: .3em; padding: 12px 10px; min-width: 34px; } #tabs button:disabled { opacity: .35; }
#map { left: calc(16px + env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top)); }
#pill { bottom: calc(18px + env(safe-area-inset-bottom)); } #card { left: calc(16px + env(safe-area-inset-left)); }
.ghost { background: rgba(255,255,255,.14) !important; }
#walkbar { position: fixed; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 6px 6px 6px 16px; z-index: 24; font-size: 13px; max-width: calc(100vw - 140px); }
#walkbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #walkbar button { background: #ff453a; color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer; flex: none; }
#walkbar.adj { border-color: #ffb340; }
.eta { padding: 0 5px; margin-left: 2px; } .etatxt { font-size: 11px; color: var(--mut); margin-top: 3px; }
#tour { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(440px, calc(100vw - 120px)); padding: 16px 18px 14px; z-index: 45; }
#tour .tn { font-size: 11px; color: var(--mut); letter-spacing: .08em; } #tour .tt { font-size: 17px; font-weight: 600; margin: 4px 0 6px; } #tour .tb { color: var(--ink); font-size: 14px; }
.tctl { display: flex; gap: 8px; margin-top: 12px; } .tctl button { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; } .tctl #tour-skip { margin-right: auto; }
#tourring { position: fixed; z-index: 44; border: 2px solid var(--blue); border-radius: 14px; box-shadow: 0 0 0 4000px rgba(0,0,0,.35); pointer-events: none; transition: all .2s; }
/* Help */
#pop-help { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 100px)); height: min(720px, calc(100vh - 40px)); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; z-index: 35; }
.hhd { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); } .hhd h3 { margin: 0 6px 0 0; font-size: 16px; }
#hsearch { flex: 1; min-width: 80px; background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); padding: 7px 10px; font-size: 13px; outline: none; } #hsearch:focus { border-color: var(--blue); }
.hhd .lnk { padding: 5px 10px; white-space: nowrap; } .x { background: none; border: 0; color: var(--mut); font-size: 22px; cursor: pointer; padding: 0 6px; }
.hbody { flex: 1; display: flex; min-height: 0; } #htoc { width: 210px; flex: none; overflow-y: auto; padding: 8px; border-right: 1px solid var(--line); }
#htoc a { display: block; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; } #htoc a.on { } #htoc a.dim { opacity: .35; }
#hcontent { flex: 1; overflow-y: auto; padding: 6px 20px 30px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hsec { padding: 10px 0 14px; border-bottom: 1px solid var(--line); line-height: 1.5; }
/* zero-freeze: only the Help sections on screen are laid out (the first open laid out the whole guide: 102 ms at 4x CPU) */
.hsec { content-visibility: auto; contain-intrinsic-size: auto 420px; } .hsec h4 { margin: 6px 0 6px; font-size: 16px; } .hsec p, .hsec li { } .hsec a[data-go] { cursor: pointer; }
.hsec figure { margin: 10px 0; } .hsec img { width: 100%; max-width: 620px; border-radius: 10px; border: 1px solid var(--line); display: block; } .hsec figcaption { font-size: 12px; margin-top: 4px; }
.hsec table { border-collapse: collapse; font-size: 13px; margin: 6px 0; } .hsec td, .hsec th { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.hsec dt { font-weight: 600; margin-top: 8px; } .hsec dd { margin: 2px 0 0 0; } kbd { font: 12px ui-monospace, Menlo, monospace; border-radius: 5px; padding: 1px 5px; margin: 0 1px; }
.h2c { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; } .h2c > div { border-radius: 10px; padding: 8px 10px; } .h2c b { display: block; font-size: 12px; }
.simline { border-radius: 8px; padding: 5px 9px; font-size: 13px; }
/* Offline Demo */
#pop-offline { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 100px)); max-height: calc(100vh - 40px); z-index: 35; }
.ofhd { display: flex; align-items: center; justify-content: space-between; } .ofhd h3 { margin: 0; font-size: 16px; color: var(--ink); }
.ofbadge { border-radius: 12px; padding: 9px 12px; margin: 8px 0 4px; background: rgba(255,255,255,.07); } .ofbadge b { display: block; letter-spacing: .06em; font-size: 13px; } .ofbadge small { color: var(--mut); }
.ofbadge.ok { background: rgba(48,209,88,.2); } .ofbadge.ok b { color: #5be584; } .ofbadge.warn { background: rgba(255,179,64,.18); } .ofbadge.warn b { color: #ffcf7a; } .ofbadge.bad b { color: #ff8a80; }
.ofp, .ofnote { font-size: 12px; color: var(--mut); line-height: 1.45; } .ofnote { border-top: 1px solid var(--line); padding-top: 8px; margin-bottom: 0; }
.ofstat { display: flex; gap: 8px; margin: 8px 0; } .ofstat div { flex: 1; background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px; text-align: center; } .ofstat b { display: block; font-size: 18px; } .ofstat small { color: var(--mut); }
.ofbar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin: 6px 0; } .ofbar i { display: block; height: 100%; background: var(--blue); transition: width .2s; }
.ofline { font-size: 12px; color: var(--mut); margin-bottom: 6px; } .bad { color: #ff8a80; } .warn { color: #ffcf7a; }
.ofmsg { font-size: 12px; border-radius: 8px; padding: 6px 9px; margin: 4px 0; background: rgba(255,255,255,.06); } .ofmsg.ok { color: #5be584; } .ofmsg.bad { color: #ff8a80; } .ofmsg.warn { color: #ffcf7a; }
.ofdl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; margin: 6px 0; } .ofdl dt { color: var(--mut); } .ofdl dd { margin: 0; word-break: break-word; }
.ofg { border-radius: 10px; background: rgba(255,255,255,.04); margin: 4px 0; } .ofg summary { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; } .ofg summary span { color: var(--mut); }
.ofl { max-height: 160px; overflow-y: auto; padding: 0 10px 8px; font: 11px ui-monospace, Menlo, monospace; } .ofl div { display: flex; justify-content: space-between; gap: 8px; } .ofl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ofl .missing small { color: #ff8a80; } .ofl .outdated small, .ofl .unverified small { color: #ffcf7a; }
.ofsteps div { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 4px 0; } .ofsteps i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: #8e8e93; } .ofsteps .ok i { background: #30d158; } .ofsteps .bad i { background: #ff453a; } .ofsteps small { display: block; color: var(--mut); font-size: 11px; }
.offr iframe { width: 100%; height: 150px; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: #000; } .offr:empty { display: none; }
#pop-offline .acts2 { margin: 8px 0; flex-wrap: wrap; } #pop-offline .acts2 button, .ofhd button { cursor: pointer; } #pop-offline .acts2 button { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 600; }
/* short screens (tablet landscape 1024x768, phones): compact horizontal tabs on the right edge */
@media (max-height: 820px) { #tabs { gap: 5px; } #tabs button { writing-mode: horizontal-tb; letter-spacing: .08em; font-size: 10px; padding: 9px 8px; min-width: 62px; min-height: 34px; border-radius: 10px 0 0 10px; } .pop { right: calc(70px + env(safe-area-inset-right)); } }
/* phones in landscape (height <= 500): map panel as canvas + details columns, everything inside the safe area, 40 px touch targets */
@media (max-height: 500px) {
  #tabs button { padding: 6px 6px; min-width: 58px; min-height: 34px; } #tabs { gap: 3px; }
  #map { left: calc(8px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); width: 400px; max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr; gap: 6px 8px; padding: 8px; }
  #map .srch { grid-column: 1 / 3; } #map .mapwrap { grid-column: 1; grid-row: 2; align-self: start; } #map .legend, #map .legtext { display: none; } #map #route { grid-column: 2; grid-row: 2; max-height: calc(100vh - 80px); font-size: 11px; }
  .mapbtns button { width: 34px; height: 34px; } #route .opts { flex-direction: column; } .pop { top: calc(8px + env(safe-area-inset-top)); transform: none; max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 160px)); right: calc(70px + env(safe-area-inset-right)); } #pop-ops { width: min(340px, calc(100vw - 160px)); }
  #pop-help, #pop-offline { left: calc(8px + env(safe-area-inset-left)); right: calc(72px + env(safe-area-inset-right)); top: calc(6px + env(safe-area-inset-top)); bottom: calc(6px + env(safe-area-inset-bottom)); transform: none; width: auto; height: auto; max-height: none; }
  #pop-offline { overflow-y: auto; } #htoc { width: 150px; } #htoc a { padding: 9px 8px; font-size: 12px; } .h2c { grid-template-columns: 1fr; } .hhd { padding: 8px 10px; } .hhd .lnk { padding: 7px 8px; }
  #pill { bottom: calc(8px + env(safe-area-inset-bottom)); } #pill button { padding: 8px 14px; } #walkbar { bottom: calc(56px + env(safe-area-inset-bottom)); max-width: calc(100vw - 520px); min-width: 220px; }
  #map:not(.hidden) ~ #walkbar { left: auto; right: calc(76px + env(safe-area-inset-right)); transform: none; }
  #card { bottom: calc(56px + env(safe-area-inset-bottom)); max-height: calc(100vh - 80px); overflow-y: auto; } #credit { display: none; } #tour { bottom: calc(54px + env(safe-area-inset-bottom)); }
  #walkhint { top: calc(8px + env(safe-area-inset-top)); font-size: 12px; } #navnote { top: calc(54px + env(safe-area-inset-top)); }
  #map .ctl { flex-wrap: wrap; } #map #rt-speed { margin-right: 0; } #map:not(.hidden) ~ #walkhint { display: none; } #map:not(.hidden) ~ #navnote { left: auto; right: calc(76px + env(safe-area-inset-right)); transform: none; max-width: calc(100vw - 500px); }
}
#rt-meta:empty::before { content: attr(data-hint); color: var(--mut); }
/* M1 */
#startnote { position: fixed; left: calc(16px + env(safe-area-inset-left)); bottom: calc(76px + env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 120px)); display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; z-index: 26; }
#startnote b { display: block; font-size: 13px; } #startnote small { display: block; color: var(--mut); font-size: 12px; margin-top: 3px; line-height: 1.4; } #startnote em { color: #ff9ad9; font-style: normal; }
#startnote button { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; cursor: pointer; flex: none; min-height: 40px; }
@media (max-height: 500px) { #startnote { bottom: calc(52px + env(safe-area-inset-bottom)); left: calc(8px + env(safe-area-inset-left)); width: min(420px, calc(100vw - 260px)); padding: 8px 8px 8px 12px; } #startnote small { font-size: 11px; } }
/* M1 Offline Demo (reference layout: badge in the header, status rows, A/B/C tabs, inventory table) */
#pop-offline { width: min(700px, calc(100vw - 100px)); padding: 0; } #pop-offline .ofc { padding: 14px 18px 12px; }
.ofhd { gap: 10px; justify-content: flex-start; } .ofhd .x { margin-left: auto; } .ofhd h3 { font-size: 18px; }
.ofbadge2 { font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.1); } .ofbadge2.ok { background: rgba(48,209,88,.2); color: #5be584; } .ofbadge2.warn { background: rgba(255,179,64,.2); color: #ffcf7a; } .ofbadge2.bad { background: rgba(255,69,58,.2); color: #ff8a80; }
.ofinfo { font-size: 12px; color: var(--mut); margin: 8px 0 4px; line-height: 1.6; } .ofinfo b { color: var(--ink); } .ofsub { color: var(--ink); }
.oftabs { border-bottom: 1px solid var(--line); gap: 2px; margin: 10px -18px 10px; padding: 0 12px; } .oftabs button { background: none !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; padding: 9px 12px !important; font-weight: 600; color: var(--mut) !important; min-height: 40px; }
.oftabs button.on { color: var(--ink) !important; border-bottom-color: var(--blue) !important; }
.ofp b { color: var(--ink); } .ofres { font-size: 13px; background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; margin: 6px 0; } .ofres.ok { color: #5be584; } .ofres.bad { color: #ff8a80; }
.oft { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; } .oft th { text-align: left; color: var(--mut); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); } .oft td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.06); } .oft .okc { color: #5be584; }
#pop-offline .acts2 button { min-height: 40px; } #pop-offline .acts2 .ghost { border: 1px solid var(--line) !important; }
#tabs button[data-st="ok"]::after, #tabs button[data-st="warn"]::after { content: ''; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #30d158; } #tabs button[data-st="warn"]::after { background: #ffb340; }
:focus-visible { outline: 2px solid #9fd0ff; outline-offset: 2px; }
/* M1 Help: document-style reading pane (reference: contents with group headings, hero, enlargeable screenshots) */
#pop-help { width: min(1100px, calc(100vw - 100px)); height: min(860px, calc(100vh - 40px)); }
.hhd h3 { font-size: 14px; letter-spacing: .02em; white-space: nowrap; } #htoc { width: 240px; padding: 12px 10px; } .hgrp { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin: 14px 9px 4px; } .hgrp:first-child { margin-top: 2px; }
#htoc a { text-decoration: none; }
#hcontent { padding: 22px 34px 40px; } #hcontent:focus { outline: none; }
.hhero { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 6px; } .hkick { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; } .hhero h2 { font-size: 30px; line-height: 1.15; margin: 10px 0; } .hhero p { font-size: 16px; max-width: 680px; line-height: 1.55; }
.hmeta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; } .hmeta b { }
#hcontent .hsec { border-bottom: 1px solid var(--line); } #hcontent .hsec h4 { font-size: 22px; margin: 18px 0 8px; } #hcontent .hsec p, #hcontent .hsec li, #hcontent .hsec dd { font-size: 15px; } #hcontent .hsec a[data-go] { }
#hcontent .hsec td, #hcontent .hsec th { border-color: var(--line); } #hcontent .h2c > div { border: 1px solid var(--line); } #hcontent .h2c b { } #hcontent kbd { }
#hcontent .hsec img { cursor: zoom-in; border-color: var(--line); } #hcontent figcaption { } #hcontent .simline { } #hcontent .none { }
#hlight { position: fixed; inset: 0; z-index: 60; background: rgba(5,8,12,.88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } #hlight img { max-width: 100%; max-height: 100%; border-radius: 10px; } #hlight .x { position: absolute; right: calc(16px + env(safe-area-inset-right)); top: calc(10px + env(safe-area-inset-top)); color: #fff; font-size: 30px; min-width: 44px; min-height: 44px; }
@media (max-height: 500px) { #hcontent { padding: 12px 16px 30px; } .hhero h2 { font-size: 20px; } .hhero p { font-size: 14px; } #hcontent .hsec h4 { font-size: 17px; } #hcontent .hsec p, #hcontent .hsec li, #hcontent .hsec dd { font-size: 14px; } #htoc { width: 160px; } .hgrp { margin: 10px 6px 2px; } .hhd h3 { font-size: 12px; } #pop-offline .ofc { padding: 10px 12px; } .oftabs { margin: 6px -12px 8px; } .oft { font-size: 12px; } .oft td, .oft th { padding: 5px 6px; } }
@media (max-width: 900px) and (max-height: 500px) { .hhd h3 { display: none; } }
/* M1 phone readability: no text below 12 px in route / ops panels */
@media (max-height: 500px) { #map #route { font-size: 12px; } .warn, .acc, .evid, .alert small, .opts { font-size: 12px; } .legtext { font-size: 12px; } }
/* ===================== UX rescue: dock, single panel slot, status strip, hint (supersedes the edge tabs) ===================== */
:root { --dockH: 76px; --band: 150px; --inL: env(safe-area-inset-left); --inR: env(safe-area-inset-right); --inT: env(safe-area-inset-top); --inB: env(safe-area-inset-bottom); }
button, .row, a { touch-action: manipulation; }
#tabs { display: none !important; }
#dock { position: fixed; left: 50%; bottom: calc(14px + var(--inB)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 8px; z-index: 33; background: rgba(18,22,30,.62); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
#dock button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; min-height: 56px; padding: 6px 8px 5px; border: 0; border-radius: 16px; background: none; color: var(--ink); cursor: pointer; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: .02em; }
#dock button svg { width: 24px; height: 24px; } #dock button.sm { min-width: 54px; color: #c8d0da; } #dock button.sm svg { width: 21px; height: 21px; }
#dock button:hover { background: rgba(255,255,255,.08); } #dock button.on { background: rgba(10,132,255,.9); color: #fff; }
#dock .dsep { width: 1px; height: 30px; background: var(--line); margin: 0 2px; }
#dock .badge { left: auto; right: 4px; top: 2px; } #dock button[data-st="ok"]::after, #dock button[data-st="warn"]::after { content: ''; position: absolute; left: 8px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #30d158; } #dock button[data-st="warn"]::after { background: #ffb340; }
/* one panel slot: top-left, never into the bottom band (status strip + dock) */
.panel { position: fixed !important; left: calc(16px + var(--inL)) !important; top: calc(16px + var(--inT)) !important; right: auto !important; bottom: auto !important; transform: none !important; width: min(360px, calc(100vw - 32px - var(--inL) - var(--inR))) !important;
  max-height: calc(100vh - 16px - var(--band) - var(--inT) - var(--inB)) !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 30 !important; padding: 12px 14px 14px; }
#map.panel { width: min(330px, calc(100vw - 32px)) !important; overflow: hidden auto; } #map .legend { display: flex; }
.panel.wide { left: 50% !important; transform: translateX(-50%) !important; width: min(1100px, calc(100vw - 48px - var(--inL) - var(--inR))) !important; height: calc(100vh - 16px - var(--band) + 40px - var(--inT) - var(--inB)); z-index: 35 !important; padding: 0; }
#pop-offline.panel.wide { width: min(720px, calc(100vw - 48px)) !important; height: auto; }
.phd { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; padding-right: 30px; } .phd h3 { margin: 0; font-size: 15px; color: var(--ink); } .phd small { color: var(--mut); font-size: 12px; }
.pclose { position: absolute; right: 8px; top: 6px; min-width: 36px; min-height: 36px; z-index: 4; }
.pgrp { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 10px 4px 4px; }
#places-list .row, #views-list .row, #more-list .row { min-height: 44px; } #more-list .row b { display: flex; gap: 6px; align-items: center; } #more-list b[data-st="ok"]::after { content: '● ready'; color: #30d158; font-size: 11px; font-weight: 600; } #more-list b[data-st="warn"]::after { content: '● needs attention'; color: #ffb340; font-size: 11px; font-weight: 600; }
.sets { display: flex; flex-direction: column; gap: 2px; } .srow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; font-size: 13px; min-height: 44px; } .srow small { display: block; color: var(--mut); font-size: 11px; } .srow input { width: 20px; height: 20px; accent-color: var(--blue); flex: none; }
.seg { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; gap: 2px; } .seg button { background: none; border: 0; color: var(--ink); padding: 7px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; min-height: 34px; } .seg button.on { background: var(--blue); }
#pop-layers #pill { position: static; transform: none; margin: 2px 4px 6px; box-shadow: none; }
#card.panel h4 { padding-right: 30px; }
/* status strip: walking progress + route messages + actions, bottom centre above the dock */
#status { position: fixed; left: 50%; bottom: calc(var(--dockH) + 24px + var(--inB)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 14px; z-index: 32; font-size: 13px; max-width: min(720px, calc(100vw - 32px)); border-radius: 14px; }
#status .st-t { line-height: 1.35; } #status.warn { border-color: rgba(255,179,64,.6); } #status.bad { border-color: rgba(255,69,58,.6); } #status.ok { border-color: rgba(48,209,88,.6); }
#status button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; min-height: 36px; } #status .st-a { background: var(--blue); color: #fff; } #status .st-cancel { background: #ff453a; color: #fff; } #status .st-x { background: rgba(255,255,255,.12); color: var(--ink); min-width: 36px; padding: 0; font-size: 18px; }
#hint { position: fixed; left: 50%; top: calc(16px + var(--inT)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 16px; z-index: 31; font-size: 13px; color: #dfe6ee; border-radius: 999px; max-width: calc(100vw - 32px); }
#hint button { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; min-height: 36px; } #hint.hidden { display: none; }
#credit { left: auto; right: calc(10px + var(--inR)); bottom: calc(4px + var(--inB)); max-width: 300px; text-align: right; font-size: 9px; line-height: 1.3; }
#tour { bottom: calc(var(--dockH) + 30px + var(--inB)); z-index: 45; }
/* phones in landscape: dock on the right edge (vertical), panels use the full height on the left */
@media (max-height: 500px) {
  :root { --dockH: 0px; --band: 0px; }
  #dock { left: auto; right: calc(6px + var(--inR)); bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 2px; padding: 5px 4px; border-radius: 18px; }
  #dock button { min-width: 50px; min-height: 48px; padding: 5px 4px 4px; font-size: 9px; } #dock button svg { width: 21px; height: 21px; } #dock button.sm { min-width: 50px; } #dock .dsep { width: 26px; height: 1px; margin: 1px 0; }
  .panel { left: calc(8px + var(--inL)) !important; top: calc(8px + var(--inT)) !important; max-height: calc(100vh - 16px - var(--inT) - var(--inB)) !important; width: min(330px, calc(100vw - 96px - var(--inL) - var(--inR))) !important; padding: 8px 10px 10px; }
  #map.panel { width: min(400px, calc(100vw - 96px - var(--inL) - var(--inR))) !important; } #map .legend { display: none; }
  .panel.wide { left: calc(8px + var(--inL)) !important; transform: none !important; width: calc(100vw - 88px - var(--inL) - var(--inR)) !important; height: calc(100vh - 16px - var(--inT) - var(--inB)); }
  #pop-offline.panel.wide { width: calc(100vw - 88px - var(--inL) - var(--inR)) !important; max-height: calc(100vh - 16px) !important; }
  #status { left: auto; right: calc(72px + var(--inR)); transform: none; bottom: calc(8px + var(--inB)); max-width: calc(100vw - 96px - var(--inL) - var(--inR)); font-size: 12px; }
  body[data-panel]:not([data-panel=""]) #status { max-width: calc(100vw - 96px - min(400px, calc(100vw - 96px)) - var(--inL) - var(--inR) - 16px); }
  body[data-panel="help"] #status, body[data-panel="offline"] #status { display: none; }
  #hint { top: calc(8px + var(--inT)); font-size: 12px; max-width: calc(100vw - 96px); left: calc(50% - 36px); }
  #credit { display: none; } #tour { bottom: calc(10px + var(--inB)); left: calc(50% - 36px); }
}
.panel.wide { height: calc(100vh - 16px - var(--band) + 40px - var(--inT) - var(--inB)) !important; max-height: none !important; }
#pop-offline.panel.wide { height: auto !important; max-height: calc(100vh - 16px - var(--band) + 40px - var(--inT) - var(--inB)) !important; overflow-y: auto; }
@media (max-height: 500px) { #map.panel { grid-template-rows: auto auto 1fr; } #map .phd { grid-column: 1 / 3; margin: 0; } #map .phd small { display: none; } #map .mapwrap, #map #route { grid-row: 3; }
  .panel.wide { height: calc(100vh - 16px - var(--inT) - var(--inB)) !important; } #pop-offline.panel.wide { max-height: calc(100vh - 16px - var(--inT) - var(--inB)) !important; } }
/* ===================== Premium shell: brand, top-right, side-aware flaps, mode switch (supersedes the dock) ===================== */
:root { --top: 84px; --bot: 84px; --stat: 58px; --flapW: 38px; }
#dock { display: none !important; }
#brand { position: fixed; left: calc(14px + var(--inL)); top: calc(14px + var(--inT)); display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 12px; z-index: 34; border-radius: 14px; background: rgba(16,20,27,.78); }
#brand img { width: 94px; height: auto; display: block; } .bsep { width: 1px; height: 30px; background: rgba(255,255,255,.22); } .bname b { display: block; font-size: 15px; letter-spacing: .01em; } .bname small { display: block; color: var(--mut); font-size: 12px; margin-top: 1px; }
#topright { position: fixed; right: calc(14px + var(--inR)); top: calc(14px + var(--inT)); display: flex; gap: 8px; z-index: 34; }
.tbtn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(16,20,27,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .tbtn svg { width: 22px; height: 22px; } .tbtn.on { background: var(--blue); border-color: var(--blue); }
.tbtn .badge { left: auto; right: -4px; top: -4px; }
.flaps { position: fixed; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 6px; z-index: 31; transition: transform .22s ease, top .22s ease; }
.flaps.left { left: var(--inL); } .flaps.right { right: var(--inR); align-items: flex-end; }
.flap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--flapW); padding: 12px 0 14px; border: 1px solid var(--line); background: rgba(16,20,27,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); cursor: pointer; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.flap svg { width: 18px; height: 18px; flex: none; } .flap span { writing-mode: vertical-rl; }
.flaps.left .flap { border-left: 0; border-radius: 0 12px 12px 0; } .flaps.right .flap { border-right: 0; border-radius: 12px 0 0 12px; } .flaps.right .flap span { transform: rotate(180deg); }
.flap.on { background: var(--blue); border-color: var(--blue); color: #fff; } .flap.sel { box-shadow: inset 3px 0 0 #9fd0ff; color: #cfe6ff; } .flaps.right .flap.sel { box-shadow: inset -3px 0 0 #9fd0ff; } .flap:hover:not(.on) { background: rgba(40,48,60,.85); }
#modes { position: fixed; left: 50%; bottom: calc(14px + var(--inB)); transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; z-index: 33; background: rgba(16,20,27,.78); }
#modes button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: none; color: var(--ink); padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 44px; } #modes svg { width: 20px; height: 20px; } #modes button.on { background: var(--blue); color: #fff; }
#imlogo { position: fixed; right: calc(14px + var(--inR)); bottom: calc(14px + var(--inB)); display: flex; align-items: center; gap: 7px; z-index: 20; color: rgba(255,255,255,.7); font-size: 10px; pointer-events: none; } #imlogo img { width: 74px; height: auto; display: block; }
#credit { left: calc(14px + var(--inL)) !important; right: auto !important; bottom: calc(10px + var(--inB)) !important; text-align: left !important; max-width: 280px; }
/* popups: one slot per side; never under the brand / top-right row, never into the bottom band (status + mode switch) */
.panel { top: calc(var(--top) + var(--inT)) !important; max-height: calc(100vh - var(--top) - var(--bot) - var(--stat) - var(--inT) - var(--inB)) !important; }
.panel.left { left: calc(10px + var(--inL)) !important; right: auto !important; transform: none !important; }
.panel.right { right: calc(10px + var(--inR)) !important; left: auto !important; transform: none !important; }
.panel.wide.right { width: min(980px, calc(100vw - 2 * var(--flapW) - 40px - var(--inL) - var(--inR))) !important; height: calc(100vh - var(--top) - var(--bot) - var(--stat) - var(--inT) - var(--inB)) !important; }
#pop-offline.panel.wide.right { width: min(720px, calc(100vw - 2 * var(--flapW) - 40px)) !important; height: auto !important; max-height: calc(100vh - var(--top) - var(--bot) - var(--stat) - var(--inT) - var(--inB)) !important; }
#status { bottom: calc(var(--bot) + 6px + var(--inB)) !important; }
#hint { top: calc(18px + var(--inT)) !important; }
@media (max-width: 1100px) { #brand .bname small { display: none; } }
/* phones in landscape */
@media (max-height: 500px) {
  :root { --top: 52px; --bot: 56px; --stat: 0px; --flapW: 34px; }
  #brand { left: calc(8px + var(--inL)); top: calc(6px + var(--inT)); padding: 6px 10px 6px 8px; gap: 8px; } #brand img { width: 62px; } .bsep { height: 22px; } .bname b { font-size: 13px; } .bname small { display: none; }
  #topright { right: calc(8px + var(--inR)); top: calc(6px + var(--inT)); gap: 6px; } .tbtn { width: 38px; height: 38px; }
  .flap { padding: 9px 0; gap: 0; } .flap span { display: none; } .flap svg { width: 18px; height: 18px; } .flaps { gap: 4px; }
  #modes { bottom: calc(6px + var(--inB)); padding: 3px; } #modes button { padding: 6px 12px; min-height: 38px; font-size: 13px; }
  #imlogo { right: calc(8px + var(--inR)); bottom: calc(10px + var(--inB)); } #imlogo span { display: none; } #imlogo img { width: 58px; }
  #credit { display: block !important; font-size: 8px; max-width: 150px; bottom: calc(4px + var(--inB)) !important; }
  .panel { max-height: calc(100vh - var(--top) - var(--bot) - var(--inT) - var(--inB)) !important; width: min(330px, calc(100vw - 2 * var(--flapW) - 24px - var(--inL) - var(--inR))) !important; }
  #map.panel { width: min(400px, calc(100vw - 2 * var(--flapW) - 24px - var(--inL) - var(--inR))) !important; } #map #mapcv { max-width: 170px; }
  .panel.wide.right, #pop-offline.panel.wide.right { width: calc(100vw - 2 * var(--flapW) - 20px - var(--inL) - var(--inR)) !important; height: calc(100vh - var(--top) - var(--bot) - var(--inT) - var(--inB)) !important; max-height: none !important; }
  #status { top: calc(6px + var(--inT)) !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: calc(100vw - 340px) !important; padding: 4px 4px 4px 10px; font-size: 11px; }
  #hint { top: calc(6px + var(--inT)) !important; left: 50% !important; transform: translateX(-50%) !important; max-width: calc(100vw - 340px) !important; font-size: 11px; padding: 6px 6px 6px 12px; }
  body[data-panel]:not([data-panel=""]) #status { max-width: calc(100vw - 340px) !important; }
}
@media (max-height: 500px) {
  #status, body[data-panel]:not([data-panel=""]) #status { left: calc(var(--bR, 300px) + 8px) !important; right: calc(100vw - var(--tL, 660px) + 8px) !important; transform: none !important; max-width: none !important; }
  #hint { left: calc(var(--bR, 300px) + 8px) !important; right: auto !important; transform: none !important; max-width: calc(var(--tL, 660px) - var(--bR, 300px) - 16px) !important; }
  #credit { max-width: 250px; font-size: 7.5px; line-height: 1.25; }
}
@media (max-height: 500px) { #map #route { max-height: calc(100vh - var(--top) - var(--bot) - 70px) !important; } #map #rt-meta:empty::before { content: none; } }
/* hint lives where the status strip lives (bottom band; top row on phones) and gives way to any status message */
#hint { top: auto !important; bottom: calc(var(--bot) + 6px + var(--inB)) !important; } #status:not(.hidden) ~ #hint { display: none !important; }
@media (max-height: 500px) { #hint { top: calc(6px + var(--inT)) !important; bottom: auto !important; } }
/* both flap columns always stay reachable: a popup never takes the space of the opposite side's flaps */
.panel { width: min(360px, calc(100vw - 2 * var(--flapW) - 28px - var(--inL) - var(--inR))) !important; }
#map.panel { width: min(330px, calc(100vw - 2 * var(--flapW) - 28px - var(--inL) - var(--inR))) !important; }
@media (max-height: 500px) { #map.panel { width: min(400px, calc(100vw - 2 * var(--flapW) - 28px - var(--inL) - var(--inR))) !important; } .panel { width: min(330px, calc(100vw - 2 * var(--flapW) - 28px - var(--inL) - var(--inR))) !important; } }
/* ===================== Overnight rescue: ONE message zone (supersedes every #status / #hint position above) =====================
   The status strip and the hint are placed by the popup manager (main.js placeMsgs) inside the zone that is always free:
   between the left and right flap columns (which ride on any open popup's edge) and between the top row and the mode switch.
   So they can never cover a popup, a flap, the brand, Help / More or Overview / Explore - on any device. */
#status#status, #hint#hint { position: fixed; left: var(--msgL, 50px) !important; right: auto !important; top: auto !important; bottom: var(--msgB, 90px) !important; transform: none !important;
  width: max-content; max-width: var(--msgW, 600px) !important; max-height: var(--msgH, 200px) !important; overflow-y: auto; box-sizing: border-box; }
#status#status.nozone, #hint#hint.nozone { display: none !important; }
/* selection pin: marks the selected place in the 3D view; under every popup, flap and control (z-index 15), never clickable */
#selpin { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 15; pointer-events: none; }
#selpin::before { content: ''; position: absolute; left: -9px; top: -30px; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #0a84ff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
#selpin::after { content: ''; position: absolute; left: -4px; top: -2px; width: 8px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.35); }
#selpin.hidden { display: none; }
/* in a narrow zone the strip wraps: message on its own line, buttons below (never squeezed text, never buttons past the zone) */
#status#status { flex-wrap: wrap; row-gap: 6px; } #status .st-t { flex: 1 1 240px; min-width: min(240px, 100%); } #status button { white-space: normal; max-width: 100%; text-align: center; }
/* QA recovery: the card never spills past its own box (on phone landscape its actions rendered under the mode switch,
   unreachable); it scrolls inside and its action buttons stay pinned at the bottom, in view */
#card.panel { overflow-y: auto; overscroll-behavior: contain; }
#card .acts { position: sticky; bottom: 0; margin-top: 10px; padding: 8px 0 2px; background: rgba(28,32,40,.96); box-shadow: 0 -8px 10px -6px rgba(28,32,40,.96); }
#card .cempty { margin: 6px 0 2px; color: var(--mut); line-height: 1.45; }
/* QA recovery: immediate tap acknowledgement on the 3D view (the action itself waits for the double-tap window) */
.tapfx { position: fixed; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: rgba(10,132,255,.18); pointer-events: none; z-index: 29; animation: tapfx .42s ease-out forwards; }
@keyframes tapfx { from { transform: scale(.4); opacity: .95; } to { transform: scale(1.25); opacity: 0; } }
/* QA recovery: the walkthrough is the only message surface while it runs (it overlapped the status strip), and on phones in
   landscape it sits under the top row instead of over the Overview / Explore switch */
body.touring #status, body.touring #hint { display: none !important; }
@media (max-height: 500px) { #tour { top: calc(var(--top) + var(--inT)) !important; bottom: auto !important; } }
/* QA recovery: a tab column too tall to sit beside its popup keeps only the active tab (the rest return when it closes) */
.flaps.compact .flap:not(.on) { display: none; }
/* QA recovery (owner): lighting lives in the bottom bar beside Overview / Explore; the Layers feature is removed */
#modes .msep { width: 1px; align-self: stretch; margin: 6px 4px; background: rgba(255,255,255,.18); }
#modes #pill { position: static; transform: none; display: flex; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
#modes #pill button { border: 0; border-radius: 999px; background: none; color: var(--ink); padding: 10px 13px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 44px; }
#modes #pill button.on { background: rgba(255,255,255,.16); }
@media (max-height: 500px) { #modes #pill button { padding: 6px 9px; min-height: 38px; font-size: 12px; } }
/* QA recovery (owner): every walk shows Pause / Resume, Restart and Stop in the status strip */
#status .st-pause, #status .st-restart { background: rgba(255,255,255,.14); color: var(--ink); }
#status .st-pause:hover, #status .st-restart:hover { background: rgba(255,255,255,.22); }
/* QA recovery: on phones the bottom bar (Overview / Explore / Day / Dusk / Night) needs the full width - the attribution
   moves from the corner into More (one tap away); desktop and tablets keep the corner line */
.mcredit { margin: 10px 2px 2px; font-size: 10px; line-height: 1.35; color: var(--mut); }
@media (max-height: 500px) { #credit { display: none !important; } }
/* QA recovery (owner): the start hint has its own close button, top right of the pill */
/* owner (2026-11-01, "where is the Close button?"): the hint's × is a clearly visible round button INSIDE the pill, after Resume
   walking - the earlier 24 px dark circle sat half outside the pill's corner and was practically invisible */
#hint #hint-x { position: static; flex: none; width: 34px; height: 34px; min-height: 0; padding: 0; margin-left: 2px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.18); color: #fff; font-size: 20px; font-weight: 600; line-height: 1; display: grid; place-items: center; cursor: pointer; }
#hint #hint-x:hover { background: rgba(255,255,255,.30); }
@media (max-height: 500px) { #hint #hint-x { width: 30px; height: 30px; font-size: 18px; } }
/* ===================== HoloTwin unified standard (2026-10-31): destination card, More states, no edge tabs ===================== */
.flaps { display: none !important; }
#card .cstat { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); } #card .cstat.warn { color: #ffcf8a; }
#card .acts { flex-wrap: wrap; } #card .acts button { flex: 1 1 auto; min-height: 40px; }
#card .acts button:disabled { background: rgba(255,255,255,.10); color: rgba(255,255,255,.45); cursor: not-allowed; }
#more-list .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#more-list .mchip { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--mut); }
#more-list .mchip.on { background: var(--blue); color: #fff; }
/* unified walk control bar: status text on its own line, then Pause / Resume | Stop | Restart in one row */
#status:has(.st-pause) { flex-wrap: wrap; row-gap: 6px; } #status:has(.st-pause) .st-t { flex: 1 1 100%; }
#status:has(.st-pause) button { flex: 1 1 0; min-width: 76px; }

/* ===================== HoloTwin shared UI v0.1.0 (2026-11-02): project content inside the shared panel =====================
   The panel frame, title, ✕, rows and buttons are the shared implementation (vendor/holotwin-shared-ui). This project's
   Map & search, Operations and legacy Details render INSIDE its body: their old positioning, glass, sizes and own headers /
   close buttons are neutralised here, so only the shared panel chrome is ever visible. */
#ht-stash { display: none !important; }
.ht-panel .ht-body > #map, .ht-panel .ht-body > #pop-ops, .ht-panel .ht-body > #card {
  position: static !important; inset: auto !important; transform: none !important; width: auto !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 2px !important; background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; z-index: auto !important;
  display: flex !important; flex-direction: column; gap: 8px; grid-template-columns: none !important; grid-template-rows: none !important; }
.ht-panel .ht-body > #map > .phd, .ht-panel .ht-body > #pop-ops .pclose, .ht-panel .ht-body > #pop-ops .x, .ht-panel .ht-body > #card > .pclose, .ht-panel .ht-body > #map .pclose { display: none !important; }
.ht-panel .ht-body #map .mapwrap, .ht-panel .ht-body #map #route { grid-column: auto !important; grid-row: auto !important; }
.ht-panel .ht-body #mapcv { max-width: none !important; width: 100%; }
.ht-panel .ht-body .ht-p { margin: 8px; font-size: 13px; color: var(--ht-dim); }
.ht-panel .ht-body .ht-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 6px 8px; font-size: 13px; }
.ht-panel .ht-body .ht-dl dt { color: var(--ht-dim); } .ht-panel .ht-body .ht-dl dd { margin: 0; }
.ht-panel .ht-body .ht-credit { font-size: 11px; color: var(--ht-faint); }
/* v0.1.2: Help and the Offline Demo are content inside the shared dialog - their own position, frame, title and × are neutralised */
.ht-dialog .ht-dbody > #pop-help, .ht-dialog .ht-dbody > #pop-offline {
  position: static !important; inset: auto !important; transform: none !important; width: auto !important; height: 100% !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; z-index: auto !important; }
.ht-dialog .ht-dbody > #pop-help { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden !important; }
.ht-dialog .ht-dbody > #pop-offline { display: block !important; padding: 12px 18px !important; overflow: visible !important; }
.ht-dialog #hx, .ht-dialog #of-x, .ht-dialog #help-title, .ht-dialog #of-title { display: none !important; }

/* v0.1.5: Help reads like the other twins - the shared dialog's typography and colours apply (no Help colours of its own);
   only the SIMULATED band keeps its warning colour, from the shared tokens */
.ht-dialog #hcontent .simline { color: var(--ht-warn); }

/* Cross-device 2026-11-04: inside the shared panel the square map never exceeds the panel's visible body, so the whole plan shows on short screens */
.ht-panel .mapwrap { width: min(100%, calc(100vh - var(--ht-top) - var(--ht-bottom) - var(--ht-bar-h) - 150px)); width: min(100%, calc(100dvh - var(--ht-top) - var(--ht-bottom) - var(--ht-bar-h) - 150px)); min-width: 120px; margin-inline: auto; }
@media (pointer: coarse) { .ht-panel .mapbtns button { min-width: 32px; min-height: 32px; width: 32px; height: 32px; } }