/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   gm-frame.css — GEOMUNDRA IN THE FAMILY (draft m1617, 9 Oct 2026). GeoMundra's own furniture inside frame 6.

   Sean, 3 Oct 2026 (box 31): GeoMundra's look is "Same family as every program" (Law 100). The family is frame 6 —
   th-program.css, synced here from Trade Handy by bin/deploy.sh like every other system file and never edited here.
   That sheet paints the window: the 48 px title bar on a lightly tinted frame, the sidebar, the work on a white sheet,
   Properties as a right inspector, the status line, and the light, dark and Sunlight token sets. GeoMundra wears its
   own pair from the frame's HUES table — #784CA9 (its mark's violet, --anchor-violet) and #5E3A86.

   THIS sheet adds only what a map program needs that a register program does not: the world itself on the work
   sheet, the layers panel as the sidebar, a picked feature in Properties, the persona door, the emergency numbers,
   the fuel strip, popups and the phone's two sheets. It paints with the frame's own tokens (--a-*, --ph*) and adds
   no colour of its own: the one exception is SOS, which takes the frame's own "bad" pair. The map's artwork — the
   style, the SKIN objects, the Light presets, the registry — is not touched by a single rule here.
   Sentence case everywhere, corners 6 · 8 · 12 (never a pill), no uppercase labels, no rules between rows.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE WINDOW ───────────────────────────────────────────────────────────────────────────────────────────────── */
html.th-on[data-thapp="1"] body.gm-body{margin:0;background:var(--field,#F7F9FB)}
html.th-on .gm-app{grid-template-areas:"qat qat qat" "left work insp" "stat stat stat"}
html.th-on .gm-app [hidden]{display:none!important}
html.th-on .gm-app .gm-i{display:block;flex:0 0 auto}

/* ── THE TITLE BAR ────────────────────────────────────────────────────────────────────────────────────────────── */
html.th-on .gm-app .ta-qat{position:relative;z-index:6}
html.th-on .gm-app .ta-qat .gm-doors{padding:0 10px 0 8px;font:500 13px var(--sans);color:var(--a-tx)}
html.th-on .gm-app .ta-qat .gm-doors[aria-expanded="true"]{background:var(--a-surface);box-shadow:var(--a-sh1)}
html.th-on .gm-app h1.gm-brand{margin:0 2px 0 4px;display:inline-flex;align-items:center;min-width:0}
html.th-on .gm-app .gm-brand a{display:inline-flex;align-items:center;height:32px;padding:0 4px;border-radius:var(--a-r)}
html.th-on .gm-app .gm-brand a:hover{background:var(--a-hover)}
html.th-on .gm-app .gm-wm{height:21px;width:auto;display:block}
html.th-on .gm-app .gm-wm-rev{display:none}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-wm-ink{display:none}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-wm-rev{display:block}
html.th-on .gm-app .ta-crumb .ta-doc{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 6px;border-radius:var(--a-r);cursor:pointer;font:500 14px var(--sans);color:var(--a-tx2)}
html.th-on .gm-app .ta-crumb .ta-doc:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .gm-app .ta-crumb .ta-doc svg{width:14px;height:14px;color:var(--a-mut)}
/* the appearance menu — the platform's own switches (cdTheme, cdSunlight), the same three rooms every program has */
html.th-on .gm-app .gm-menu{position:absolute;top:44px;right:4px;z-index:60;width:272px;max-width:calc(100vw - 16px);padding:4px;border-radius:var(--a-rl);background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh3)}
html.th-on .gm-app .gm-menu h4{margin:0;padding:8px 10px 4px;font:600 12px/1.2 var(--sans);color:var(--a-mut)}
html.th-on .gm-app .gm-menu button{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 10px;border:0;border-radius:var(--a-r);background:none;box-shadow:none;cursor:pointer;
  font:500 13.5px var(--sans);color:var(--a-tx);text-align:left;min-height:0;transform:none}
html.th-on .gm-app .gm-menu button:hover{background:var(--a-hover)}
html.th-on .gm-app .gm-menu button[aria-checked="true"]{font-weight:600;color:var(--ph-text)}
html.th-on .gm-app .gm-menu button .gm-tick{margin-left:auto;width:16px;height:16px;color:var(--ph);visibility:hidden}
html.th-on .gm-app .gm-menu button[aria-checked="true"] .gm-tick{visibility:visible}
html.th-on .gm-app .gm-menu hr{border:0;height:1px;background:var(--a-line);margin:4px 6px}
html.th-on .gm-app .gm-menu p{margin:0;padding:2px 10px 8px;font:400 12px/1.4 var(--sans);color:var(--a-mut)}

/* ── THE SEARCH — centred in the title bar on a wide screen, its own row on a phone ───────────────────────────── */
html.th-on .gm-app .gm-find{position:relative;z-index:7;flex:0 1 auto;width:clamp(220px,32vw,480px);min-width:0;padding:0 4px 0 2px;gap:4px}
html.th-on .gm-app .gm-find .go{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--a-r);background:none;box-shadow:none;
  color:var(--a-mut);cursor:pointer;padding:0;min-height:0;transform:none}
html.th-on .gm-app .gm-find .go:hover{background:var(--a-hover);color:var(--ph)}
html.th-on .gm-app .gm-find .go svg{width:16px;height:16px}
html.th-on .gm-app .gm-find #q{flex:1;min-width:0;height:32px;border:0;outline:0;background:transparent;box-shadow:none;color:var(--a-tx);padding:0 6px 0 0;font:400 14px var(--sans);border-radius:0}
html.th-on .gm-app .gm-find #q::placeholder{color:var(--a-mut)}
html.th-on .gm-app .gm-find #q:focus,html.th-on .gm-app .gm-find #q:focus-visible{outline:0;box-shadow:none;border:0}
html.th-on .gm-app .gm-find .hits{position:absolute;top:calc(100% + 6px);left:0;right:0;display:none;overflow:hidden;padding:4px;border:0;border-radius:var(--a-rl);background:var(--a-surface);box-shadow:var(--a-sh3)}
html.th-on .gm-app .gm-find .hits button{display:block;width:100%;height:auto;min-height:0;padding:8px 10px;border:0;border-radius:var(--a-r);background:none;box-shadow:none;text-align:left;cursor:pointer;
  font:500 13.5px/1.35 var(--sans);color:var(--a-tx);transform:none}
html.th-on .gm-app .gm-find .hits button:hover{background:var(--a-hover)}
html.th-on .gm-app .gm-find .hits .src{display:block;margin-top:2px;font:400 12px var(--sans);color:var(--a-mut)}

/* ── THE SIDEBAR — the world's layers, always open beside the work ────────────────────────────────────────────── */
html.th-on .gm-app .ta-left{padding:2px 0 8px}
html.th-on .gm-app .lpanel{position:static;display:flex;flex-direction:column;gap:0;flex:1;min-height:0;width:auto;max-height:none;padding:0 0 4px;overflow-y:auto;overflow-x:hidden;
  background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--a-tx);scrollbar-width:thin}
html.th-on .gm-app .gm-sheethead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 4px}
html.th-on .gm-app .lpanel h2{margin:0;font:600 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--a-mut)}
html.th-on .gm-app .gm-x{display:none;width:32px;height:32px;align-items:center;justify-content:center;border:0;border-radius:var(--a-r);background:none;box-shadow:none;color:var(--a-tx2);cursor:pointer;padding:0;min-height:0;transform:none}
html.th-on .gm-app .gm-x:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .gm-app .gm-x svg{width:16px;height:16px}
/* groups: Light, Find a site — no rule lines; space carries them */
html.th-on .gm-app .lpanel .lgrp{margin:0;padding:6px 8px 10px 10px;border:0;font:inherit;letter-spacing:0;text-transform:none;color:var(--a-tx)}
html.th-on .gm-app .lpanel .lh3{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px;font:600 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--a-mut)}
html.th-on .gm-app .lpanel .lauto{font:400 12px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--a-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the Light control — a segmented control on a sunk track (its buttons and their states are the page's own) */
html.th-on .gm-app .lseg{display:flex;gap:1px;padding:2px;border-radius:var(--a-rl);background:var(--a-hover)}
html.th-on .gm-app .lseg button{flex:1 1 auto;height:28px;min-width:0;min-height:0;padding:0 3px;border:0;border-radius:var(--a-r);background:none;box-shadow:none;color:var(--a-tx2);font:500 12px var(--sans);letter-spacing:-.005em;cursor:pointer;transform:none;white-space:nowrap}
html.th-on .gm-app .lseg button:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .gm-app .lseg button[aria-pressed="true"]{background:var(--a-surface);color:var(--ph-text);font-weight:600;box-shadow:var(--a-sh1)}
/* the rows the panel draws (#lrows): search, the way in, presets, categories — each with its icon, count and switch */
html.th-on .gm-app #lrows{padding:4px 0 0}
/* (#lpanel: the platform's input rule carries six :not([type]) selectors — only an id speaks over it) */
html.th-on .gm-app #lpanel .lsearch{display:block;width:calc(100% - 20px);height:32px;min-height:0;margin:0 10px 8px;padding:0 10px;border:0;border-radius:var(--a-r);background:var(--a-surface);box-shadow:var(--a-sh1);color:var(--a-tx);
  font:400 13.5px var(--sans);outline:0}
html.th-on .gm-app #lpanel .lsearch::placeholder{color:var(--a-mut)}
html.th-on .gm-app #lpanel .lsearch:focus{box-shadow:0 0 0 1px var(--ph),0 0 0 4px var(--ph-soft);border:0}
html.th-on .gm-app .whochip{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 10px 8px;padding:0 6px 0 10px;min-height:40px;border:0;border-radius:var(--a-r);
  background:var(--a-surface);box-shadow:var(--a-sh1);font:600 14px var(--sans);color:var(--a-tx)}
html.th-on .gm-app .whochip > span{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 0;line-height:1.3}
html.th-on .gm-app .whochip .gm-ci{color:var(--ph)}
html.th-on .gm-app .whochip button{flex:0 0 auto;height:28px;min-height:0;padding:0 8px;border:0;border-radius:var(--a-r);background:none;box-shadow:none;color:var(--ph-text);font:500 12.5px var(--sans);cursor:pointer;transform:none}
html.th-on .gm-app .whochip button:hover{background:var(--ph-soft)}
html.th-on .gm-app .lpre{display:flex;flex-wrap:wrap;gap:4px;margin:0 10px 10px}
html.th-on .gm-app .lpre button{height:28px;min-height:0;padding:0 10px;border:0;border-radius:var(--a-r);background:var(--a-hover);box-shadow:none;color:var(--a-tx2);font:500 12.5px var(--sans);cursor:pointer;transform:none}
html.th-on .gm-app .lpre button:hover{background:var(--a-press);color:var(--a-tx)}
html.th-on .gm-app .lpre button.on{background:var(--ph-ink);color:#FFFFFF}
/* level 1: a category is a view in the sidebar — icon in the program's colour, its name, its count, its switch */
html.th-on .gm-app .lcat{position:relative;display:flex;align-items:center;gap:8px;min-height:36px;margin:0 0 1px;padding:0 6px 0 10px;border:0;border-radius:var(--a-r);cursor:pointer;color:var(--a-tx2)}
html.th-on .gm-app .lcat:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .gm-app .lcat .gm-ci{color:color-mix(in srgb,var(--ph) 72%,var(--a-mut))}
html.th-on .gm-app .lcat-name{flex:1;min-width:0;margin-left:2px;font:500 14px/1.3 var(--sans);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.th-on .gm-app .lcat:hover .lcat-name{color:var(--a-tx)}
html.th-on .gm-app .lcat-count{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;background:var(--a-hover);color:var(--a-mut);
  font:600 11.5px/1 var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums}
html.th-on .gm-app .lcat[data-on]:not([data-on="0"]) .lcat-count{background:var(--ph-soft);color:var(--ph-text)}
html.th-on .gm-app .lcat[data-on]:not([data-on="0"]) .gm-ci{color:var(--ph)}
html.th-on .gm-app .lcat[data-on]:not([data-on="0"]) .lcat-name{color:var(--a-tx)}
/* the whole row opens its category (the page's own click) — the frame's views carry no chevron, so the page's › rests */
html.th-on .gm-app .lcat-chev{display:none}
/* the switch (the page's own .lsw — input, track, knob) */
html.th-on .gm-app .lsw{position:relative;flex:0 0 auto;width:30px;height:18px}
html.th-on .gm-app .lsw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
html.th-on .gm-app .lsw .tr{position:absolute;inset:0;border:0;border-radius:9px;background:var(--a-line2);transition:background-color .15s ease}
html.th-on .gm-app .lsw .kn{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(16,24,40,.25);transition:left .15s ease}
html.th-on .gm-app .lsw input:checked ~ .tr,html.th-on .gm-app .lsw.half .tr{background:var(--ph)}
html.th-on .gm-app .lsw input:checked ~ .kn{left:14px;background:#FFFFFF}
html.th-on .gm-app .lsw.half .kn{left:8px;background:#FFFFFF}
html.th-on .gm-app .lsw input:focus-visible ~ .tr{outline:2px solid var(--ph);outline-offset:2px}
/* level 2: one category's own layers */
html.th-on .gm-app .lback{display:flex;align-items:center;gap:8px;height:32px;margin:0 10px 2px;padding:0 6px;border-radius:var(--a-r);cursor:pointer;font:500 13px var(--sans);color:var(--ph-text)}
html.th-on .gm-app .lback:hover{background:var(--ph-soft)}
html.th-on .gm-app .lsubhead{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;margin:2px 0 4px;padding:4px 6px 4px 10px;border:0;border-radius:var(--a-r);background:var(--a-surface);box-shadow:var(--a-sh1)}
html.th-on .gm-app .lsubhead::before{content:"";position:absolute;left:3px;top:11px;bottom:11px;width:3px;border-radius:2px;background:var(--ph)}
html.th-on .gm-app .lsubhead .gm-ci{color:var(--ph)}
html.th-on .gm-app .lsubhead .n{flex:1;min-width:0;font:600 14px/1.3 var(--sans);color:var(--a-tx)}
html.th-on .gm-app .lsubhead .all{font:500 12px var(--sans);letter-spacing:0;color:var(--a-mut)}
html.th-on .gm-app .lrow{display:flex;align-items:center;gap:10px;min-height:32px;margin:0;padding:4px 10px;border-radius:var(--a-r);font:500 13.5px/1.3 var(--sans);color:var(--a-tx)}
html.th-on .gm-app .lrow:hover{background:var(--a-hover)}
html.th-on .gm-app .lrow input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--ph);cursor:pointer}
html.th-on .gm-app .lrow label{flex:1;min-width:0;cursor:pointer}
html.th-on .gm-app .lrow .sw{flex:0 0 auto;width:10px;height:10px;border:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.18)}
html.th-on .gm-app .lrow.soon{opacity:1;color:var(--a-mut)}
html.th-on .gm-app .lrow.soon label{cursor:default}
html.th-on .gm-app .lrow .s2{flex:0 0 auto;padding:2px 6px;border:0;border-radius:6px;background:var(--a-hover);color:var(--a-mut);font:600 11px/1.2 var(--sans);letter-spacing:0}
html.th-on .gm-app .lfresh,html.th-on .gm-app .lcatline,html.th-on .gm-app .lmeta{margin:-2px 10px 6px 36px;font:400 12px/1.4 var(--sans);color:var(--a-mut)}
html.th-on .gm-app .lfresh b{color:var(--a-tx2);font-weight:600}
html.th-on .gm-app .lnone{padding:10px;font:400 13px/1.45 var(--sans);color:var(--a-mut)}
html.th-on .gm-app .lnote{margin:10px 10px 0;padding:0;font:400 12px/1.45 var(--sans);color:var(--a-mut)}
/* Find a site — the finder's chips, fields and buttons (its .btn buttons stay the platform's own) */
html.th-on .gm-app .fchips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
html.th-on .gm-app .fchips button{height:26px;min-height:0;padding:0 8px;border:0;border-radius:6px;background:var(--a-hover);box-shadow:none;color:var(--a-tx2);font:500 12px var(--sans);cursor:pointer;transform:none}
html.th-on .gm-app .fchips button[aria-pressed="true"]{background:var(--ph-ink);color:#FFFFFF}
html.th-on .gm-app .frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
html.th-on .gm-app #lpanel .frow .lsearch{flex:1;min-width:64px;width:auto;margin:0}
html.th-on .gm-app .fres{max-height:190px;overflow:auto;font:400 12.5px/1.45 var(--sans);color:var(--a-tx2)}

/* ── THE WORK — the world on its sheet: its title, its commands, the map ──────────────────────────────────────── */
html.th-on .gm-app .ta-vhead{padding:12px 16px 4px}
html.th-on .gm-app .ta-vicon .gm-i{width:20px;height:20px}
html.th-on .gm-app .ta-vtitle{font-size:18px}
html.th-on .gm-app .ta-ribbon{padding:4px 12px 8px;border-bottom:0}
html.th-on .gm-app .ta-ribbon .ta-sp{flex:1 1 auto;min-width:8px}
html.th-on .gm-app .ta-cmd .gm-i{width:18px;height:18px}
html.th-on .gm-app .ta-cmd[aria-pressed="true"]{background:var(--ph-soft);color:var(--ph-text);font-weight:600}
html.th-on .gm-app .ta-cmd.ta-primary[aria-pressed="true"]{background:color-mix(in srgb,var(--ph-ink) 82%,#000000);color:#FFFFFF}
html.th-on .gm-app .ta-cmd.sos{color:var(--a-bad-tx);font-weight:600}
html.th-on .gm-app .ta-cmd.sos svg{color:var(--a-bad-tx)}
html.th-on .gm-app .ta-cmd.sos:hover:not(:disabled),html.th-on .gm-app .ta-cmd.sos[aria-expanded="true"]{background:var(--a-bad-bg)}
/* the stage: the map fills the sheet below the command bar, its own corners rounded with the sheet's */
html.th-on .gm-app .gm-stage{position:relative;flex:1;min-height:0;margin:0 8px 8px;border-radius:var(--a-r);overflow:hidden;background:var(--a-sunk);isolation:isolate}
html.th-on .gm-app #world{position:absolute;inset:0}
html.th-on .gm-app #gmtint{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .8s ease}
/* the map's own controls and attribution (the attribution is a licence condition: it always shows) */
html.th-on .gm-app .maplibregl-ctrl-group{border:0;border-radius:var(--a-r);background:var(--a-surface);box-shadow:var(--a-sh2);overflow:hidden}
html.th-on .gm-app .maplibregl-ctrl-group button{width:32px;height:32px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background-color:transparent;box-shadow:none;transform:none}
html.th-on .gm-app .maplibregl-ctrl-group button + button{border-top:1px solid var(--a-line)}
html.th-on .gm-app .maplibregl-ctrl-group button:hover:not(:disabled){background-color:var(--a-hover)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}
html.th-on .gm-app .maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--a-surface) 86%,transparent)!important;color:var(--a-mut)!important;font:400 11.5px var(--sans);border-radius:6px 0 0 0}
html.th-on .gm-app .maplibregl-ctrl-attrib a{color:var(--a-tx2)!important}
/* a toast — one line over the top of the world */
html.th-on .gm-app .toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:30;max-width:min(560px,calc(100% - 24px));padding:9px 14px;border:0;border-radius:var(--a-rl);
  background:var(--a-tx);color:var(--a-surface);box-shadow:var(--a-sh2);-webkit-backdrop-filter:none;backdrop-filter:none;font:500 13px/1.4 var(--sans);text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
html.th-on .gm-app .toast.show{opacity:1}
/* the fuel strip along the foot of the world */
html.th-on .gm-app .fuelbar{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:22;display:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;
  width:max-content;max-width:min(680px,calc(100% - 24px));padding:6px;border:0;border-radius:var(--a-rl);background:var(--a-surface);box-shadow:var(--a-sh2);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--a-tx)}
html.th-on .gm-app .fuelbar.on{display:flex}
html.th-on .gm-app .fuelbar .fl{padding:0 6px 0 4px;font:600 12px var(--sans);letter-spacing:0;text-transform:none;color:var(--a-mut)}
html.th-on .gm-app .fuelbar button{display:inline-flex;align-items:center;gap:6px;height:30px;min-height:0;padding:0 10px;border:0;border-radius:var(--a-r);background:var(--a-hover);box-shadow:none;
  color:var(--a-tx);font:500 13px var(--sans);cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
html.th-on .gm-app .fuelbar button[aria-pressed="true"]{background:var(--ph-ink);color:#FFFFFF}
html.th-on .gm-app .fuelbar button .n{font:600 11.5px var(--sans);opacity:.75}
html.th-on .gm-app .fuelbar .none{padding:0 6px;font:400 12.5px var(--sans);color:var(--a-mut)}
/* emergency numbers — a sheet under the SOS command, over the world */
html.th-on .gm-app .sospanel{position:absolute;top:10px;right:10px;z-index:26;width:min(300px,calc(100% - 20px));padding:14px 16px 12px;border:0;border-radius:var(--a-rd);
  background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh3);-webkit-backdrop-filter:none;backdrop-filter:none}
html.th-on .gm-app .sospanel h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 10px;font:600 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--a-bad-tx)}
html.th-on .gm-app .sospanel .soswhere{font:500 12px var(--sans);color:var(--a-mut);text-align:right}
html.th-on .gm-app .sosrows{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
/* .k is also the platform's KPI tile (th-system.css) — the emergency labels are plain words, so its card is taken off here */
html.th-on .gm-app .sosrows .k{min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:500 13.5px/1.35 var(--sans);color:var(--a-tx2)}
html.th-on .gm-app .sosrows .k[style*="grid-column"]{padding:6px 0 2px;font-size:12px!important;color:var(--a-mut)!important}
html.th-on .gm-app .sosrows a{display:inline-flex;align-items:center;justify-content:flex-end;min-height:40px;font:600 22px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--a-tx);text-decoration:none;letter-spacing:.01em}
html.th-on .gm-app .sosrows a:hover{color:var(--a-bad-tx)}
html.th-on .gm-app .sosnote{margin:10px 0 0;font:400 12px/1.45 var(--sans);color:var(--a-mut)}
/* popups — a small white sheet; on a wide screen the record opens in Properties and the popup keeps its name */
html.th-on .gm-app .maplibregl-popup{font-family:var(--sans);max-width:300px}
html.th-on .gm-app .maplibregl-popup-content{padding:10px 14px!important;border:0;border-radius:var(--a-rl)!important;background:var(--a-surface)!important;color:var(--a-tx);box-shadow:var(--a-sh2)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;font:400 13px/1.45 var(--sans)}
html.th-on .gm-app .maplibregl-popup-content b{font-weight:600;color:var(--a-tx)}
html.th-on .gm-app .maplibregl-popup-close-button{width:24px;height:24px;top:4px;right:4px;border:0;border-radius:6px;background:none;color:var(--a-mut);font:400 18px/1 var(--sans);min-height:0;padding:0}
html.th-on .gm-app .maplibregl-popup-close-button:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .gm-app .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,html.th-on .gm-app .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html.th-on .gm-app .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--a-surface)!important}
html.th-on .gm-app .maplibregl-popup-anchor-top .maplibregl-popup-tip,html.th-on .gm-app .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html.th-on .gm-app .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--a-surface)!important}
html.th-on .gm-app .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--a-surface)!important}
html.th-on .gm-app .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--a-surface)!important}
@media (min-width:1100px){
  html.th-on .gm-app .maplibregl-popup.gm-docked .maplibregl-popup-content{padding:7px 34px 7px 12px!important;font-size:0;line-height:0}
  html.th-on .gm-app .maplibregl-popup.gm-docked .maplibregl-popup-content > :not(.gm-keep):not(.maplibregl-popup-close-button){display:none}
  html.th-on .gm-app .maplibregl-popup.gm-docked .maplibregl-popup-content > .gm-keep{display:block;font:600 13px/1.35 var(--sans);color:var(--a-tx)}
  html.th-on .gm-app .maplibregl-popup.gm-docked .maplibregl-popup-content > .gm-keep *{font:inherit}
  html.th-on .gm-app .maplibregl-popup.gm-docked:not(:has(.maplibregl-popup-close-button)) .maplibregl-popup-content{padding-right:12px!important}
}
/* the page's own small paints inside popups and results, read with the frame's ink */
html.th-on .gm-app .gm-mut{color:var(--a-mut)}
html.th-on .gm-app .gm-ink{color:var(--a-tx)}
html.th-on .gm-app .gm-acc{color:var(--ph-text)}
html.th-on .gm-app .gm-line-t{border-top:1px solid var(--a-line)}
html.th-on .gm-app .gm-well{background:var(--a-sunk)}

/* ── PROPERTIES — what you picked, what the tools found, and you in the world ─────────────────────────────────── */
html.th-on .gm-app .ta-insp .ta-body{overflow-y:auto}
html.th-on .gm-app .ta-insp h3{min-height:48px}
html.th-on .gm-app .gm-props .ta-pick{padding:40px 28px 32px}
html.th-on .gm-app .gm-props .ta-pick .gm-i{width:26px;height:26px;color:var(--ph);opacity:.75}
html.th-on .gm-app .gm-picked{padding:14px 18px 6px;font:400 13.5px/1.5 var(--sans);color:var(--a-tx);overflow-wrap:anywhere}
html.th-on .gm-app .gm-picked b{font-weight:600}
html.th-on .gm-app .gm-picked a{color:var(--ph-text);font-weight:600}
html.th-on .gm-app .gm-picked [style*="font-size:10px"],html.th-on .gm-app .gm-picked [style*="font-size:10.5px"]{font-size:12px!important}
html.th-on .gm-app .gm-picked .gm-ptools{display:flex;gap:6px;margin:12px 0 4px}
html.th-on .gm-app .gm-picked .gm-ptools button{display:inline-flex;align-items:center;gap:6px;height:30px;min-height:0;padding:0 10px;border:0;border-radius:var(--a-r);background:var(--a-hover);box-shadow:none;
  color:var(--a-tx);font:500 12.5px var(--sans);cursor:pointer;transform:none}
html.th-on .gm-app .gm-picked .gm-ptools button:hover{background:var(--a-press)}
html.th-on .gm-app .gm-picked .gm-ptools svg{width:14px;height:14px;color:var(--ph)}
html.th-on .gm-app .gm-sec{padding:6px 0 4px}
html.th-on .gm-app .gm-sec .ta-sub{display:flex;align-items:center;gap:8px;margin:0;padding:14px 18px 8px}
html.th-on .gm-app .gm-sec .ta-sub .gm-i{width:16px;height:16px;color:var(--ph)}
html.th-on .gm-app .gm-sec:has(> #jcount[hidden]){display:none}
html.th-on .gm-app #jcount{padding:0 18px 6px;font:400 13px/1.5 var(--sans);color:var(--a-tx2)}
html.th-on .gm-app #jcount b{color:var(--a-tx);font-weight:600}
html.th-on .gm-app #jcount select{height:28px;min-height:0;margin:6px 6px 0 0;padding:0 8px;border:0;border-radius:var(--a-r)!important;background:var(--a-hover);box-shadow:none;color:var(--a-tx);font:500 12.5px var(--sans)!important}
html.th-on .gm-app .gm-pres .state{padding:0 18px 10px;font:400 13.5px/1.5 var(--sans);color:var(--a-tx2)}
html.th-on .gm-app .gm-pres .state b{color:var(--a-tx);font-weight:600}
html.th-on .gm-app .gm-vis{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0 18px;padding:2px;border-radius:var(--a-rl);background:var(--a-hover)}
html.th-on .gm-app .gm-vis button{height:32px;min-height:0;padding:0 8px;border:0;border-radius:var(--a-r);background:none;box-shadow:none;color:var(--a-tx2);font:500 13px var(--sans);cursor:pointer;transform:none}
html.th-on .gm-app .gm-vis button:hover{color:var(--a-tx)}
html.th-on .gm-app .gm-vis button.on{background:var(--a-surface);color:var(--ph-text);font-weight:600;box-shadow:var(--a-sh1)}
html.th-on .gm-app .gm-pres .count{padding:10px 18px 4px;font:400 12.5px/1.45 var(--sans);color:var(--a-mut)}
html.th-on .gm-app .gm-pres .count b{color:var(--ph-text);font-weight:600}

/* ── THE STATUS LINE ──────────────────────────────────────────────────────────────────────────────────────────── */
html.th-on .gm-app .ta-stat .ta-dot.gm-wait{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.18)}
html.th-on .gm-app .ta-stat .tzchip{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  font:400 12px var(--sans);font-variant-numeric:tabular-nums;color:var(--a-mut);white-space:nowrap}
html.th-on .gm-app .ta-stat .tzchip b{color:var(--a-tx2);font-weight:600}
html.th-on .gm-app .ta-stat #windchip:hover{color:var(--a-tx)}
html.th-on .gm-app .ta-stat .gm-where{font-variant-numeric:tabular-nums}

/* ── THE DOOR — what brings you here: six ways in, each with its icon, on one sheet ───────────────────────────── */
html.th-on .gm-app .door{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,16,28,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html.th-on .gm-app .door.open{display:flex}
html.th-on .gm-app .doorbox:focus{outline:0}
html.th-on .gm-app .doorbox{width:100%;max-width:820px;max-height:calc(100dvh - 48px);overflow-y:auto;padding:22px 22px 16px;border:0;border-radius:var(--a-rd);background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh3)}
html.th-on .gm-app .gm-doorhead{display:flex;align-items:flex-start;gap:14px;margin:0 0 18px}
html.th-on .gm-app .gm-doorhead .ta-ptile{width:40px;height:40px;border-radius:10px}
html.th-on .gm-app .gm-doorhead .ta-ptile .gm-i{width:22px;height:22px;color:#FFFFFF}
html.th-on .gm-app .gm-doorhead > div{flex:1;min-width:0}
html.th-on .gm-app .doorbox h2{margin:0 0 4px;font:600 20px/1.3 var(--sans);letter-spacing:-.01em;color:var(--a-tx)}
html.th-on .gm-app .doorbox p.sub{margin:0;font:400 14px/1.5 var(--sans);color:var(--a-tx2)}
html.th-on .gm-app .gm-doorhead .gm-x{display:inline-flex;margin:-4px -6px 0 0}
html.th-on .gm-app .doorgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px;margin:0 -2px;border-radius:var(--a-rl);background:var(--a-sunk)}
html.th-on .gm-app .pcard{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"icon name" "desc desc" "em em";column-gap:10px;row-gap:8px;align-items:center;
  min-height:0;height:auto;padding:14px 14px 12px;border:0;border-radius:var(--a-rl);background:var(--a-surface);box-shadow:var(--a-sh1);
  color:var(--a-tx);font:inherit;text-align:left;cursor:pointer;transform:none;transition:box-shadow .16s ease,transform .16s ease}
html.th-on .gm-app .pcard:hover{box-shadow:var(--a-sh2),0 0 0 1.5px var(--ph);transform:translateY(-1px)}
html.th-on .gm-app .pcard:focus-visible{outline:2px solid var(--ph);outline-offset:2px}
html.th-on .gm-app .pcard .gm-dicon{grid-area:icon;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--ph-soft);color:var(--ph)}
html.th-on .gm-app .pcard .gm-dicon .gm-i{width:18px;height:18px}
html.th-on .gm-app .pcard b{grid-area:name;display:block;margin:0;font:600 15px/1.3 var(--sans);color:var(--a-tx)}
html.th-on .gm-app .pcard > span:not(.gm-dicon){grid-area:desc;align-self:start;display:block;font:400 13px/1.45 var(--sans);color:var(--a-tx2)}
html.th-on .gm-app .pcard em{grid-area:em;align-self:end;display:block;margin:0;font:600 12px/1.3 var(--sans);font-style:normal;color:var(--ph-text)}
html.th-on .gm-app .pcard.gm-now{box-shadow:0 0 0 1.5px var(--ph),0 0 0 5px var(--ph-soft)}
html.th-on .gm-app .pcard.locked{opacity:1;cursor:default;background:var(--a-surface)}
html.th-on .gm-app .pcard.locked:hover{transform:none;box-shadow:var(--a-sh1)}
html.th-on .gm-app .pcard.locked b,html.th-on .gm-app .pcard.locked span{color:var(--a-mut)}
html.th-on .gm-app .pcard.locked em{color:var(--a-mut)}
html.th-on .gm-app .pcard.locked .gm-dicon{background:var(--a-hover);color:var(--a-mut)}
html.th-on .gm-app .doorfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
html.th-on .gm-app .doorsrc{font:400 12px var(--sans);color:var(--a-mut)}

/* ── DARK — the frame's dark tokens do the work; the door's scrim deepens ─────────────────────────────────────── */
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .door{background:rgba(0,0,0,.55)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .lsw:not(.half) input:not(:checked) ~ .tr{background:rgba(255,255,255,.18)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .lrow .sw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .ta-cmd.ta-primary{background:var(--ph)}
html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .ta-cmd.ta-primary:hover:not(:disabled){background:color-mix(in srgb,var(--ph) 86%,#FFFFFF)}

/* ── SUNLIGHT — no tint, no shadow: every sheet keeps an outline the sun leaves alone (as the frame does) ─────── */
html.th-on[data-mode="sun"] .gm-app :is(.whochip,.lsubhead,.lsearch,.sospanel,.fuelbar,.doorbox,.pcard,.gm-menu,.gm-find .hits,.maplibregl-popup-content){outline:1.5px solid #3B4454;outline-offset:-1.5px}
html.th-on[data-mode="sun"] .gm-app :is(.lseg button[aria-pressed="true"],.gm-vis button.on){outline:1px solid #5E6879;outline-offset:-1px}
html.th-on[data-mode="sun"] .gm-app .gm-stage{outline:1.5px solid #3B4454;outline-offset:-1.5px}
html.th-on[data-mode="sun"] .gm-app .lsw:not(.half) input:not(:checked) ~ .tr{background:#5E6879}
html.th-on[data-mode="sun"] .gm-app .lsw input:checked ~ .tr,html.th-on[data-mode="sun"] .gm-app .lsw.half .tr{background:var(--ph-ink)}
html.th-on[data-mode="sun"] .gm-app .door{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,11,22,.55)}
html.th-on[data-mode="sun"] .gm-app .toast{background:#060B16;color:#FFFFFF}

/* ── NARROWER WINDOWS — the frame's own steps ─────────────────────────────────────────────────────────────────── */
html.th-on .gm-app .ta-sheetbar button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:var(--a-r);cursor:pointer;font:500 13px var(--sans);color:var(--a-tx2)}
html.th-on .gm-app .ta-sheetbar button:hover{background:var(--a-hover);color:var(--a-tx)}
html.th-on .gm-app .ta-sheetbar button svg{width:16px;height:16px;color:var(--ph)}
html.th-on .gm-app .ta-sheetbar .gm-new{position:relative}
html.th-on .gm-app .ta-sheetbar .gm-new::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--ph);box-shadow:0 0 0 2px var(--a-frame)}
/* GeoMundra's sidebar carries the layer controls, not a list of views — it keeps a little more width than the frame's
   212 / 208 px, and below 1280 px the counts rest (the icon still lights up for a category with something on) */
@media (max-width:1279px) and (min-width:901px){
  html.th-on .gm-app .lcat-count{display:none}
  html.th-on .gm-app .lseg{flex-wrap:wrap}
  html.th-on .gm-app .lseg button{flex:1 0 30%}
}
@media (max-width:1279px) and (min-width:1100px){
  html.th-on .gm-app{grid-template-columns:240px minmax(0,1fr) 276px}
  html.th-on .gm-app .gm-find{width:clamp(200px,26vw,340px)}
}
@media (max-width:1099px) and (min-width:901px){
  html.th-on .gm-app{grid-template-columns:232px minmax(0,1fr);grid-template-areas:"qat qat" "left work" "stat stat"}
  html.th-on .gm-app .ta-sheetbar #btnLayers{display:none}
  html.th-on .gm-app .gm-find{width:clamp(180px,28vw,300px)}
  html.th-on .gm-app.ta-show-props .ta-insp{top:56px}
}
/* the phone: the title bar, the search on its own row, the world, the status line; layers and details are two sheets */
@media (max-width:900px){
  html.th-on .gm-app{grid-template-rows:52px 46px minmax(0,1fr) 40px;grid-template-areas:"qat" "find" "work" "stat"}
  html.th-on .gm-app .ta-qat{gap:4px}
  html.th-on .gm-app .gm-wm{height:18px}
  html.th-on .gm-app h1.gm-brand{margin:0}
  html.th-on .gm-app .gm-find{display:flex;position:absolute;top:calc(100% + 1px);left:0;right:0;width:auto;height:40px;margin:0 2px}
  html.th-on .gm-app .gm-find #q{height:40px;font-size:16px}
  html.th-on .gm-app .ta-left{display:none;position:fixed;inset:auto 0 0 0;z-index:60;max-height:76vh;padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px));
    flex-direction:column;background:var(--a-surface);border-radius:16px 16px 0 0;box-shadow:var(--a-sh3)}
  html.th-on .gm-app .ta-left:has(.lpanel.open){display:flex}
  html.th-on .gm-app .gm-x{display:inline-flex}
  html.th-on .gm-app .lpanel h2{font-size:15px;color:var(--a-tx)}
  html.th-on .gm-app .ta-vhead{display:none}
  html.th-on .gm-app .ta-ribbon{padding:6px 6px 6px}
  html.th-on .gm-app .ta-cmd,html.th-on .gm-app .ta-cmd.ta-sm{height:40px;padding:0 10px}
  html.th-on .gm-app .gm-stage{margin:0 4px 4px}
  html.th-on .gm-app .sosrows a{min-height:44px}
  html.th-on .gm-app .ta-stat .gm-where,html.th-on .gm-app .ta-stat #gmLayersN{display:none}
  html.th-on .gm-app .doorgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:8px}
  html.th-on .gm-app .door{padding:12px;align-items:flex-end}
  html.th-on .gm-app .doorbox{padding:18px 14px 12px;max-height:calc(100dvh - 24px)}
  html.th-on .gm-app .pcard{padding:12px 12px 10px}
  html.th-on .gm-app .pcard > span:not(.gm-dicon){font-size:12.5px}
  html.th-on .gm-app .maplibregl-popup{max-width:min(300px,calc(100vw - 32px))!important}
}
@media (max-width:560px){
  html.th-on .gm-app .doorgrid{grid-template-columns:minmax(0,1fr)}
  html.th-on .gm-app .pcard{grid-template-rows:auto auto auto;grid-template-areas:"icon name" "icon desc" "icon em";align-items:start;row-gap:2px;column-gap:12px}
  html.th-on .gm-app .pcard em{padding-top:4px}
}
@media (max-width:420px){
  html.th-on .gm-app .ta-ribbon .ta-cmd:not(.ta-primary):not(.sos) span{display:none}
  html.th-on .gm-app .ta-ribbon .ta-cmd{padding:0 9px}
}
@media (prefers-reduced-motion:reduce){
  html.th-on .gm-app .pcard,html.th-on .gm-app .toast,html.th-on .gm-app .lsw .kn,html.th-on .gm-app .lsw .tr{transition:none!important}
  html.th-on .gm-app .pcard:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE IMMERSIVE RENDER MODE — world.html. Canon 12: the map and the immersive world are two render modes of one
   world, so both wear the family. Here the world fills the window (its renderer sizes to the window, and that is not
   ours to change); the frame's title bar, its sheets and its status line sit over it.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html.th-on body.gw-body{margin:0;background:#0A101C}
html.th-on .gm-app.gw-app{display:block;position:fixed;inset:0;z-index:10;height:auto;max-height:none;min-height:0;padding:0;background:none;pointer-events:none}
html.th-on .gm-app.gw-app > *{pointer-events:auto}
html.th-on .gm-app.gw-app .ta-qat{position:absolute;top:0;left:0;right:0;height:48px;padding:0 10px 0 8px;background:var(--a-frame);box-shadow:0 1px 0 var(--a-line)}
html.th-on .gm-app.gw-app .gw-back{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px 0 8px;border:0;border-radius:var(--a-r);background:none;box-shadow:none;color:var(--a-tx);font:500 13px var(--sans);text-decoration:none}
html.th-on .gm-app.gw-app .gw-back:hover{background:var(--a-hover)}
html.th-on .gm-app.gw-app .gw-back .gm-i{width:18px;height:18px;color:var(--ph)}
html.th-on .gm-app.gw-app .ta-crumb .ta-doc{font:500 14px var(--sans);color:var(--a-tx2)}
/* the search: go anywhere — the city dissolves and rebuilds there */
html.th-on .gm-app.gw-app .find{position:relative;top:auto;left:auto;width:clamp(220px,32vw,480px);padding:0 10px;gap:8px}
html.th-on .gm-app.gw-app .find > .gm-i{width:16px;height:16px;color:var(--a-mut)}
html.th-on .gm-app.gw-app .find #fq{flex:1;min-width:0;height:32px;min-height:0;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;color:var(--a-tx);font:400 14px var(--sans)}
html.th-on .gm-app.gw-app .find #fq::placeholder{color:var(--a-mut)}
html.th-on .gm-app.gw-app .find #fq:focus{border:0;box-shadow:none}
html.th-on .gm-app.gw-app .res{position:absolute;top:calc(100% + 6px);left:0;right:0;display:none;margin:0;padding:4px;border:0;border-radius:var(--a-rl);background:var(--a-surface);box-shadow:var(--a-sh3);-webkit-backdrop-filter:none;backdrop-filter:none}
html.th-on .gm-app.gw-app .res.open{display:block}
html.th-on .gm-app.gw-app .res > div{padding:8px 10px;border:0;border-radius:var(--a-r);cursor:pointer;font:500 13.5px/1.35 var(--sans);color:var(--a-tx)}
html.th-on .gm-app.gw-app .res > div:hover{background:var(--a-hover)}
html.th-on .gm-app.gw-app .res .sub2{margin-top:1px;padding:0;border:0;font:400 12px var(--sans);color:var(--a-mut)}
/* Live from reality — the inspector of this place, on its own sheet */
html.th-on .gm-app.gw-app .live{position:absolute;top:56px;right:8px;width:320px;min-width:0;max-height:calc(100% - 56px - 36px);overflow:auto;padding:0 0 14px;border:0;border-radius:var(--a-rl);
  background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh2);-webkit-backdrop-filter:none;backdrop-filter:none;scrollbar-width:thin}
html.th-on .gm-app.gw-app .live h2{display:flex;align-items:center;gap:8px;margin:0;padding:14px 16px 4px;font:600 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--a-mut)}
html.th-on .gm-app.gw-app .live h2.gw-sub{padding:18px 16px 2px;font-size:13px;color:var(--a-tx)}
html.th-on .gm-app.gw-app .live .dot{width:8px;height:8px;margin:0;border-radius:50%;background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
html.th-on .gm-app.gw-app .live .place{padding:2px 16px 8px;font:600 16px/1.3 var(--sans);color:var(--a-tx)}
html.th-on .gm-app.gw-app .live .row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;margin:0;padding:5px 16px;font:400 13.5px/1.4 var(--sans);color:var(--a-tx)}
html.th-on .gm-app.gw-app .live .row span:first-child{color:var(--a-mut)}
html.th-on .gm-app.gw-app .live .row b{text-align:right;font-weight:600;color:var(--a-tx);font-variant-numeric:tabular-nums}
html.th-on .gm-app.gw-app .live .src{margin:14px 16px 0;font:400 12px/1.45 var(--sans);color:var(--a-mut)}
/* the forecast: one quiet tile per hour or day — no box inside a box */
html.th-on .gm-app.gw-app .fc{display:flex;gap:4px;margin:8px 16px 0}
html.th-on .gm-app.gw-app .fc > div{flex:1;min-width:0;margin:0;padding:7px 2px 6px;text-align:center;border:0;border-radius:var(--a-r);background:var(--a-sunk);box-shadow:none}
html.th-on .gm-app.gw-app .fc > div > div{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html.th-on .gm-app.gw-app .fc .t{font:500 11.5px var(--sans);letter-spacing:0;text-transform:capitalize;color:var(--a-mut)}
html.th-on .gm-app.gw-app .fc .v{margin:2px 0;font:600 15px var(--sans);color:var(--a-tx);font-variant-numeric:tabular-nums}
html.th-on .gm-app.gw-app .fc .p{font:400 11.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--a-mut)}
/* the sky tools (C) */
html.th-on .gm-app.gw-app .sky{position:absolute;top:56px;left:8px;width:300px;max-height:calc(56% - 40px);display:none;overflow:auto;padding:0 0 14px;border:0;border-radius:var(--a-rl);
  background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh2);-webkit-backdrop-filter:none;backdrop-filter:none;scrollbar-width:thin}
html.th-on .gm-app.gw-app .sky.open{display:block}
html.th-on .gm-app.gw-app .sky h2{margin:0;padding:14px 16px 6px;font:600 12px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;color:var(--a-mut)}
html.th-on .gm-app.gw-app .sky .obj{display:flex;justify-content:space-between;gap:10px;margin:0;padding:6px 16px;border:0;font:400 13px/1.35 var(--sans);color:var(--a-tx)}
html.th-on .gm-app.gw-app .sky .obj .nm{display:flex;flex-direction:column;min-width:0;font-weight:600}
html.th-on .gm-app.gw-app .sky .obj .nm .sub{font-weight:400}
html.th-on .gm-app.gw-app .sky .obj .az{white-space:nowrap;text-align:right}
html.th-on .gm-app.gw-app .sky .obj.down{opacity:.5}
html.th-on .gm-app.gw-app .sky .obj .az,html.th-on .gm-app.gw-app .sky .obj .sub{font-size:12px;color:var(--a-mut)}
html.th-on .gm-app.gw-app .sky .grp{margin:6px 0 0;padding:12px 16px 2px;border:0;font:600 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--a-tx)}
html.th-on .gm-app.gw-app .sky .note,html.th-on .gm-app.gw-app .sky .src{margin:6px 16px 0;font:400 12px/1.45 var(--sans);color:var(--a-mut)}
/* warnings for here — cards over the foot of the world, each with its marker */
html.th-on .gm-app.gw-app .alerts{position:absolute;left:8px;bottom:36px;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;width:300px;max-width:none;max-height:calc(44% - 40px);overflow:auto;scrollbar-width:thin}
html.th-on .gm-app.gw-app .alert{position:relative;flex:0 0 auto;padding:10px 12px 10px 18px;border:0;border-radius:var(--a-rl);background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh2);
  -webkit-backdrop-filter:none;backdrop-filter:none;font:400 12.5px/1.45 var(--sans);cursor:pointer}
html.th-on .gm-app.gw-app .alert::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--ph)}
html.th-on .gm-app.gw-app .alert.warn::before{background:var(--a-warn-tx)}
html.th-on .gm-app.gw-app .alert.bad::before{background:var(--a-bad-tx)}
html.th-on .gm-app.gw-app .alert.ok::before{background:var(--a-ok-tx)}
html.th-on .gm-app.gw-app .alert b{font-size:13px;font-weight:600;color:var(--a-tx)}
html.th-on .gm-app.gw-app .alert span{color:var(--a-tx2)}
/* the status line: the stream, the keys, the way you face */
html.th-on .gm-app.gw-app .ta-stat{position:absolute;left:0;right:0;bottom:0;height:28px;padding:0 12px;gap:16px;background:var(--a-frame);box-shadow:0 -1px 0 var(--a-line)}
html.th-on .gm-app.gw-app .gw-streamw{display:inline-flex;align-items:center;min-width:0;overflow:hidden}
html.th-on .gm-app.gw-app .gw-streamw .ta-dot.gm-wait{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.18)}
html.th-on .gm-app.gw-app .stream{margin:0;font:400 12px var(--sans);color:var(--a-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.th-on .gm-app.gw-app .stream b{font-weight:600;color:var(--a-tx2)}
html.th-on .gm-app.gw-app .help{position:static;transform:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:400 12px var(--sans);color:var(--a-mut)}
html.th-on .gm-app.gw-app .help b{font-weight:600;color:var(--a-tx2)}
html.th-on .gm-app.gw-app .compass{position:static;transform:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:400 12px var(--sans);color:var(--a-mut);white-space:nowrap}
html.th-on .gm-app.gw-app .compass b{font-weight:600;color:var(--a-tx)}
/* the Sky button shows on every screen (the sky tools had only the C key); Live is a sheet on a phone only */
html.th-on .gm-app.gw-app .ta-sheetbar{display:flex;gap:4px}
html.th-on .gm-app.gw-app .ta-sheetbar #gwShowLive{display:none}
html.th-on .gm-app.gw-app .ta-sheetbar button[aria-expanded="true"]{background:var(--ph-soft);color:var(--ph-text)}
html.th-on[data-mode="sun"] .gm-app.gw-app :is(.live,.sky,.alert,.res){outline:1.5px solid #3B4454;outline-offset:-1.5px}
@media (max-width:900px){
  html.th-on .gm-app.gw-app .ta-qat{height:52px;padding:0 6px}
  html.th-on .gm-app.gw-app .gw-back{padding:0 8px}
  html.th-on .gm-app.gw-app .find{position:absolute;top:calc(100% + 4px);left:6px;right:6px;width:auto;height:40px;padding:0 10px}
  html.th-on .gm-app.gw-app .find #fq{height:40px;font-size:16px}
  html.th-on .gm-app.gw-app .ta-sheetbar #gwShowLive{display:inline-flex}
  html.th-on .gm-app.gw-app .live,html.th-on .gm-app.gw-app .sky{position:fixed;inset:auto 0 0 0;top:auto;left:auto;right:auto;width:auto;max-height:72vh;z-index:60;border-radius:16px 16px 0 0;
    box-shadow:var(--a-sh3);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  html.th-on .gm-app.gw-app .live{display:none}
  html.th-on .gm-app.gw-app.gw-show-live .live{display:block}
  html.th-on .gm-app.gw-app .alerts{top:104px;bottom:auto;left:6px;right:6px;width:auto;max-height:28vh;justify-content:flex-start}
  html.th-on .gm-app.gw-app .ta-stat{height:40px}
}