/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ 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} } /* ── Sign-in (gm-account.js, 14 Nov 2026): the title-bar button and its sheet, in the frame's own tokens ── */ html.th-on .gm-app .gm-acct{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--a-line2);border-radius:var(--a-r);background:var(--a-surface);color:var(--a-tx);font:600 13px/1 var(--sans);cursor:pointer;white-space:nowrap} html.th-on .gm-app .gm-acct:hover{background:var(--a-hover)} html.th-on .gm-app .gm-acct:focus-visible{outline:2px solid var(--ph);outline-offset:2px} html.th-on .gm-app .gm-acct .gm-i{width:16px;height:16px;color:var(--ph-ink)} html.th-on .gm-app .acctbox{max-width:420px} html.th-on .gm-app .acct-l{display:block;margin:14px 0 0;font:600 13px/1.3 var(--sans);color:var(--a-tx)} html.th-on .gm-app .acct-in{display:block;width:100%;height:40px;margin-top:6px;padding:0 12px;border:1px solid var(--a-line2);border-radius:var(--a-r);background:var(--a-surface);color:var(--a-tx);font:400 15px/1 var(--sans)} html.th-on .gm-app .acct-in:focus{outline:0;border-color:var(--ph);box-shadow:0 0 0 3px var(--ph-soft)} html.th-on .gm-app .acct-go{width:100%;margin-top:16px;justify-content:center} html.th-on .gm-app .acct-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} html.th-on .gm-app .acct-oauth{display:grid;gap:8px;margin-top:16px} html.th-on .gm-app .acct-or{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--a-mut);font:400 12px/1 var(--sans)} html.th-on .gm-app .acct-or:before,html.th-on .gm-app .acct-or:after{content:"";flex:1;height:1px;background:var(--a-line2)} html.th-on .gm-app .acct-msg{min-height:20px;margin-top:12px;font:500 13px/1.4 var(--sans);color:var(--a-tx2)} html.th-on .gm-app .acct-msg.ok{color:var(--ph-ink)} html.th-on .gm-app .acct-links{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font:500 13px/1.4 var(--sans)} html.th-on .gm-app .acct-links a,html.th-on .gm-app .acct-note a{color:var(--ph-ink)} html.th-on .gm-app .acct-note{margin:12px 0 0;font:400 12px/1.5 var(--sans);color:var(--a-mut)} @media (max-width:900px){html.th-on .gm-app .gm-acct span{display:none}html.th-on .gm-app .gm-acct{padding:0 9px}} html.th-on .gm-app .acct-pro{margin-top:14px;padding:10px 12px;border:1px solid var(--a-line2);border-radius:var(--a-r);background:var(--a-hover);font:400 13px/1.5 var(--sans);color:var(--a-tx2)} html.th-on .gm-app .acct-pro b{display:block;margin-bottom:4px;color:var(--a-tx);font-weight:600} html.th-on .gm-app .acct-pro span{font-weight:600;color:var(--ph-ink)} /* ── Height along your line (gm-profile.js) — the artwork's "altitude along route" panel, in the frame's tokens ── */ html.th-on .gm-app .gm-prof{position:fixed;left:16px;bottom:44px;z-index:700;width:min(380px,calc(100vw - 32px));padding:12px 14px 10px;border-radius:var(--a-rd);background:var(--a-surface);color:var(--a-tx);box-shadow:var(--a-sh2);font:400 13px/1.4 var(--sans)} html.th-on .gm-app .gm-prof[hidden]{display:none} html.th-on .gm-app .gm-prof-h{display:flex;align-items:center;gap:8px} html.th-on .gm-app .gm-prof-h b{font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--a-tx2)} html.th-on .gm-app .gm-prof-r{margin-left:auto;font:600 13px/1 var(--sans);color:var(--a-tx);font-variant-numeric:tabular-nums} html.th-on .gm-app .gm-prof-chart{position:relative;margin-top:8px;height:96px} html.th-on .gm-app .gm-prof-chart svg{display:block;width:100%;height:96px;cursor:crosshair} html.th-on .gm-app .gm-prof-area{fill:var(--ph);opacity:.16} html.th-on .gm-app .gm-prof-path{fill:none;stroke:var(--ph);stroke-width:2;vector-effect:non-scaling-stroke} html.th-on .gm-app .gm-prof-cur{stroke:var(--a-tx);stroke-width:1;vector-effect:non-scaling-stroke} html.th-on .gm-app .gm-prof-axis{position:absolute;inset:0 auto 0 4px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;font:500 10px/1 var(--sans);color:var(--a-mut)} html.th-on .gm-app .gm-prof-empty{display:flex;align-items:center;height:96px;color:var(--a-tx2)} html.th-on .gm-app .gm-prof-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;color:var(--a-tx2);font-variant-numeric:tabular-nums} html.th-on .gm-app .gm-prof-stats b{color:var(--a-tx);font-weight:600} html.th-on .gm-app .gm-prof-act{display:flex;gap:8px;margin-top:10px} html.th-on .gm-app .gm-prof-note{margin:8px 0 0;font:400 11px/1.4 var(--sans);color:var(--a-mut)} html.th-on .gm-app .gm-prof-mk{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--ph);box-shadow:0 1px 4px rgba(0,0,0,.35)} @media (max-width:900px){html.th-on .gm-app .gm-prof{left:8px;right:8px;bottom:76px;width:auto}} /* ── DESIGN LAW (Sean, 15 Nov 2026; champion-digital/docs/DESIGN_LAW.md): one family, two themes ── Day = paperbark light: cream ground #F7F2E9, white cards, warm hairlines #E4DCCD, Poseidon ink. Never grey. Night = the Poseidon navy family #143C5D: a little sheen on cards (an inner top light), never glare; quiet labels in paperbark #D8C4A5. House accent HI-VIS #D4F53C on Poseidon navy (Sean, 15 Nov 2026: "we'll go the high vis with the Poseidon Navy"; recorded as GeoMundra's exception in DESIGN_LAW.md). Night: hi-vis marks, text and buttons (navy text on hi-vis, 9.9:1). Day: bright hi-vis cannot be read on paperbark (1.12:1), so day buttons are navy with hi-vis text, small accent text is navy, and the one deeper hi-vis for large lettering is --gm-hv-day (#4E8A1E, provisional: Sean confirms it on screen). */ html.th-on .ta-app.gm-app{ --gm-hv:#D4F53C; --gm-hv-day:#4E8A1E; --ph:var(--gm-hv-day); --ph-ink:#143C5D; --ph-text:#143C5D; --a-frame:#F7F2E9; --a-surface:#FFFFFF; --a-sunk:#FBF8F2; --a-th:#FBF8F2; --a-hover:rgba(20,60,93,.055); --a-press:rgba(20,60,93,.09); --a-line:#E4DCCD; --a-line-soft:#EFE9DE; --a-line2:#D9CFBE; --a-tx:#143C5D; --a-tx2:#2A3F55; --a-mut:#5E7184; --ph-soft:color-mix(in srgb,#D4F53C 22%,#FFFFFF); --ph-soft2:color-mix(in srgb,#D4F53C 40%,#FFFFFF); --a-sh1:0 1px 2px rgba(20,60,93,.06),0 0 0 1px rgba(20,60,93,.05); --a-sh2:0 1px 3px rgba(20,60,93,.06),0 6px 20px rgba(20,60,93,.07),0 0 0 1px rgba(20,60,93,.05); --a-sh3:0 20px 48px rgba(20,60,93,.18),0 4px 12px rgba(20,60,93,.08),0 0 0 1px rgba(20,60,93,.06); --btn-p-bg:#143C5D; --btn-p-ink:#D4F53C; --acc:#143C5D; --acc-h:#0F2E48; --acc-on:#D4F53C; /* the platform sheet's own field and button tokens, so inputs and plain buttons follow the two themes too */ --sheet:#FFFFFF; --well:#FBF8F2; --th-ink:#143C5D; --th-ink2:#2A3F55; --th-line2:#D9CFBE; } html.th-on[data-theme="dark"]:not([data-mode="sun"]) .ta-app.gm-app{ --ph:#D4F53C; --ph-ink:#D4F53C; --ph-text:#D4F53C; --a-frame:#0F2E48; --a-surface:#143C5D; --a-sunk:#11344F; --a-th:#174466; --a-hover:rgba(255,255,255,.06); --a-press:rgba(255,255,255,.10); --a-line:rgba(216,196,165,.14); --a-line-soft:rgba(216,196,165,.08); --a-line2:rgba(216,196,165,.24); --a-tx:#FFFFFF; --a-tx2:#C9D6E2; --a-mut:#D8C4A5; --ph-soft:color-mix(in srgb,#D4F53C 16%,#143C5D); --ph-soft2:color-mix(in srgb,#D4F53C 28%,#143C5D); --a-sh1:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(3,14,26,.4); --a-sh2:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(3,14,26,.35),0 0 0 1px rgba(216,196,165,.10); --a-sh3:inset 0 1px 0 rgba(255,255,255,.08),0 24px 56px rgba(3,14,26,.55),0 0 0 1px rgba(216,196,165,.12); --btn-p-bg:#D4F53C; --btn-p-ink:#0F2E48; --acc:#D4F53C; --acc-h:#E2FA6E; --acc-on:#0F2E48; --sheet:#11344F; --well:#174466; --th-ink:#FFFFFF; --th-ink2:#C9D6E2; --th-line2:rgba(216,196,165,.24); color-scheme:dark; } /* Archivo headings — the family lettering (design law; Sean chose Archivo Bold at normal width, 31 Oct 2026). Self-hosted, variable weight. */ @font-face{font-family:"Archivo";src:url("gm-font-archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} html.th-on .gm-app :is(h1,h2,h3,.gm-doorhead h2,.acctbox h2,.gm-sheethead h2){font-family:"Archivo",var(--sans);font-weight:700;font-stretch:100%;letter-spacing:-.005em} /* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ THE MAP IS THE PAGE — Stage A2 of reports/GeoMundra makeover scope.md (Sean, 15 Nov 2026: "the full makeover"). index.html's .gm-app.gm-float: the world fills the window edge to edge and everything else floats over it — a slim bar (logo · night/day · Sign in · My GeoMundra), the search card, the mode chips, the Layers drawer (closed on arrival), the place card (only when something is picked), the map's tools (a rail on a wide screen, a bar along the foot of a phone), SOS pinned to a corner. Spacing 4 · 8 · 12 · 16 · 24; every control at least 44 px on a touch screen; navy never black, paperbark never grey; the hi-vis accent only for what is the visitor's own. ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ html.th-on .gm-app.gm-float{ --gm-gut:16px; --gm-bar:56px; --gm-space:#112E49; display:block;position:fixed;inset:0;height:100dvh;max-height:none;padding:0;margin:0;overflow:hidden;background:var(--gm-space); --gm-card-bg:color-mix(in srgb,var(--a-surface) 96%,transparent); } html.th-on .gm-app.gm-float > *{min-width:0} /* the world: edge to edge, under everything */ html.th-on .gm-app.gm-float .gm-work{position:absolute;inset:0;z-index:1;display:block;padding:0;margin:0;background:none;box-shadow:none;border-radius:0} html.th-on .gm-app.gm-float .gm-stage{position:absolute;inset:0;margin:0;border-radius:0;background:var(--gm-space);outline:0} html.th-on[data-mode="sun"] .gm-app.gm-float .gm-stage{outline:0} html.th-on .gm-app.gm-float #world{position:absolute;inset:0;background:var(--gm-space)} /* a floating card: one surface, one shadow, the family's corners */ html.th-on .gm-app.gm-float .gm-card{background:var(--gm-card-bg);border-radius:12px;box-shadow:var(--a-sh2)} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app.gm-float .gm-card{background:color-mix(in srgb,#143C5D 94%,transparent)} /* ── THE BAR: logo left; night/day, Sign in, My GeoMundra right (the law's order) ─────────────────────────────────── */ html.th-on .gm-app.gm-float .gm-bar{position:absolute;top:0;left:0;right:0;z-index:30;height:var(--gm-bar);display:flex;align-items:center;gap:8px; padding:0 var(--gm-gut);padding-top:env(safe-area-inset-top,0px);box-sizing:content-box;background:var(--a-frame);box-shadow:0 1px 0 var(--a-line)} html.th-on .gm-app.gm-float .gm-bar .ta-sp{flex:1 1 auto} html.th-on .gm-app.gm-float .gm-bar .ta-crumb,html.th-on .gm-app.gm-float .gm-bar .gm-doors,html.th-on .gm-app.gm-float .gm-bar .gm-look{display:none!important} html.th-on .gm-app.gm-float h1.gm-brand{margin:0;flex:0 0 auto} html.th-on .gm-app.gm-float .gm-brand a{height:44px;padding:0 4px;margin-left:-4px} html.th-on .gm-app.gm-float .gm-wm{height:24px} html.th-on .gm-app.gm-float .gm-wm-pin{display:none;height:30px;width:auto} /* the night/day switch: a real two-position switch, its word beside it */ /* th-system.css paints every [role=switch] as a 46px track with font-size 0; this switch carries its own track and word, so it takes its own width (without this the knob is squeezed to 40px, the moon is cut and "Day" runs under Sign in) */ html.th-on .gm-app .gm-themesw{display:inline-flex;align-items:center;gap:8px;height:44px;min-height:44px;width:auto;flex:none;padding:0 10px 0 6px;border:0;border-radius:8px;background:none;box-shadow:none; color:var(--a-tx);font:600 13px/1 var(--sans);cursor:pointer;transform:none} html.th-on .gm-app .gm-themesw:hover{background:var(--a-hover)} html.th-on .gm-app .gm-themesw::before,html.th-on .gm-app .gm-themesw::after{display:none!important} html.th-on .gm-app .gm-themesw:focus-visible{outline:2px solid var(--a-tx);outline-offset:2px} html.th-on .gm-app .gm-ts-knob{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:28px;padding:0 6px;border-radius:14px; background:var(--a-hover);box-shadow:inset 0 0 0 1px var(--a-line2)} html.th-on .gm-app .gm-ts-knob::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#143C5D;transition:left .2s ease} html.th-on .gm-app .gm-themesw[aria-checked="true"] .gm-ts-knob::after{left:27px;background:#D4F53C} html.th-on .gm-app .gm-ts-knob .gm-i{position:relative;z-index:1;width:14px;height:14px} html.th-on .gm-app .gm-ts-sun{color:#D4F53C} html.th-on .gm-app .gm-ts-moon{color:var(--a-mut)} html.th-on .gm-app .gm-themesw[aria-checked="true"] .gm-ts-sun{color:var(--a-mut)} html.th-on .gm-app .gm-themesw[aria-checked="true"] .gm-ts-moon{color:#0F2E48} html.th-on .gm-app.gm-float .gm-acct{height:44px;min-width:44px;justify-content:center;flex:none;padding:0 14px} /* the main button: night = hi-vis with navy ink; day = navy with hi-vis ink (hi-vis cannot be read on paperbark) */ html.th-on .gm-app .gm-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:8px;background:#143C5D;color:#D4F53C; font:700 14px/1 "Archivo",var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;box-shadow:none} html.th-on .gm-app .gm-cta:hover{background:#0F2E48} html.th-on .gm-app .gm-cta:focus-visible{outline:2px solid var(--a-tx);outline-offset:2px} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-cta{background:#D4F53C;color:#0F2E48} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-cta:hover{background:#E2FA6E} html.th-on .gm-app .gm-cta-s{display:none} /* ── THE SEARCH CARD AND THE MODE CHIPS ──────────────────────────────────────────────────────────────────────────── */ html.th-on .gm-app.gm-float .gm-top{position:absolute;z-index:20;top:calc(var(--gm-bar) + env(safe-area-inset-top,0px) + 12px);left:var(--gm-gut);right:96px; display:flex;align-items:flex-start;gap:12px;pointer-events:none} html.th-on .gm-app.gm-float .gm-top > *{pointer-events:auto} html.th-on .gm-app.gm-float .gm-find{position:relative;z-index:21;flex:0 0 auto;display:flex;align-items:center;gap:4px;width:380px;height:48px;padding:0 8px 0 6px;margin:0} html.th-on .gm-app.gm-float .gm-find .go{width:40px;height:40px;color:var(--a-tx)} html.th-on .gm-app.gm-float .gm-find .go svg{width:18px;height:18px} html.th-on .gm-app.gm-float .gm-find #q{height:44px;font-size:15px} html.th-on .gm-app.gm-float .gm-find .hits{top:calc(100% + 8px);box-shadow:var(--a-sh3)} html.th-on .gm-app.gm-float .gm-find .hits button{min-height:44px} html.th-on .gm-app .gm-modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;padding:2px 0} html.th-on .gm-app .gm-mode,html.th-on .gm-app .gm-modeact{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:44px;min-height:44px;padding:0 14px;border:0;border-radius:22px; background:var(--gm-card-bg);box-shadow:var(--a-sh2);color:var(--a-tx);font:600 13.5px/1 var(--sans);cursor:pointer;white-space:nowrap;transform:none} html.th-on .gm-app .gm-mode .gm-i{width:16px;height:16px;color:var(--a-tx2)} html.th-on .gm-app .gm-mode:hover{background:var(--a-surface)} html.th-on .gm-app .gm-mode:focus-visible,html.th-on .gm-app .gm-modeact:focus-visible{outline:2px solid var(--a-tx);outline-offset:2px} /* a picked mode: navy chip with hi-vis words by day, hi-vis chip with navy words at night */ html.th-on .gm-app .gm-mode[aria-pressed="true"]{background:#143C5D;color:#D4F53C} html.th-on .gm-app .gm-mode[aria-pressed="true"] .gm-i{color:#D4F53C} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-mode[aria-pressed="true"]{background:#D4F53C;color:#0F2E48} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-mode[aria-pressed="true"] .gm-i{color:#0F2E48} html.th-on .gm-app .gm-modeact{border-radius:8px;background:var(--a-surface);box-shadow:var(--a-sh2),inset 0 0 0 1.5px var(--a-tx)} html.th-on .gm-app .gm-modeact[hidden]{display:none} /* ── THE MAP'S OWN CONTROLS: below the bar, on the right, above the rail ─────────────────────────────────────────── */ html.th-on .gm-app.gm-float .maplibregl-ctrl-top-right{top:calc(var(--gm-bar) + env(safe-area-inset-top,0px) + 4px);right:calc(var(--gm-gut) - 10px)} html.th-on .gm-app.gm-float .maplibregl-ctrl-group button{width:44px;height:44px} html.th-on .gm-app.gm-float .maplibregl-ctrl-attrib{border-radius:8px 0 0 0} /* "you" is hi-vis with a navy ring, in both themes (scope §3.1: the accent marks what is yours) */ html.th-on .gm-app .maplibregl-user-location-dot{background-color:#D4F53C} html.th-on .gm-app .maplibregl-user-location-dot::before{background-color:#D4F53C} html.th-on .gm-app .maplibregl-user-location-dot::after{border-color:#0F2E48} html.th-on .gm-app .maplibregl-user-location-accuracy-circle{background-color:rgba(212,245,60,.18)} html.th-on .gm-app .peer{border-radius:50%;background:#B8CCDB;border:3px solid #0F2E48;box-sizing:border-box} html.th-on .gm-app .peer.me{background:#D4F53C;border-color:#0F2E48;box-shadow:0 0 0 2px #D4F53C} /* ── THE TOOLS RAIL (wide) / BAR (phone) ─────────────────────────────────────────────────────────────────────────── */ html.th-on .gm-app.gm-float .gm-rail{position:absolute;z-index:18;right:var(--gm-gut);top:auto;bottom:40px;display:flex;flex-direction:column; align-items:stretch;gap:4px;width:72px;padding:6px;margin:0;border:0;border-radius:12px;background:var(--gm-card-bg);box-shadow:var(--a-sh2);max-height:calc(100dvh - var(--gm-bar) - 280px);overflow-y:auto;scrollbar-width:none} html.th-on .gm-app .gm-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px;border:0;border-radius:8px; background:none;box-shadow:none;color:var(--a-tx);font:600 11px/1.15 var(--sans);text-align:center;cursor:pointer;transform:none;white-space:nowrap} html.th-on .gm-app .gm-tool .gm-i{width:20px;height:20px;color:var(--a-tx)} html.th-on .gm-app .gm-tool:hover{background:var(--a-hover)} html.th-on .gm-app .gm-tool:focus-visible{outline:2px solid var(--a-tx);outline-offset:-2px} html.th-on .gm-app .gm-tool[aria-pressed="true"],html.th-on .gm-app .gm-tool[aria-expanded="true"]{background:#143C5D;color:#D4F53C} html.th-on .gm-app .gm-tool[aria-pressed="true"] .gm-i,html.th-on .gm-app .gm-tool[aria-expanded="true"] .gm-i{color:#D4F53C} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-tool[aria-pressed="true"],html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-tool[aria-expanded="true"]{background:#D4F53C;color:#0F2E48} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-tool[aria-pressed="true"] .gm-i,html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-tool[aria-expanded="true"] .gm-i{color:#0F2E48} html.th-on .gm-app .gm-badge{position:absolute;top:4px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#143C5D;color:#D4F53C;font:700 11px/18px var(--sans);font-variant-numeric:tabular-nums} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-badge{background:#D4F53C;color:#0F2E48} html.th-on .gm-app .gm-badge[hidden]{display:none} html.th-on .gm-app .gm-rec .gm-rec-dot{color:#B3261E} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-rec .gm-rec-dot{color:#FF8178} html.th-on .gm-app .gm-rec[aria-pressed="true"] .gm-rec-dot{animation:gm-rec 1.2s ease-in-out infinite} @keyframes gm-rec{50%{opacity:.35}} /* ── SOS, pinned to the corner, and its numbers ──────────────────────────────────────────────────────────────────── */ html.th-on .gm-app.gm-float .gm-corner{position:absolute;z-index:19;left:var(--gm-gut);bottom:calc(16px + env(safe-area-inset-bottom,0px))} html.th-on .gm-app .gm-sos{display:inline-flex;align-items:center;gap:8px;height:48px;min-height:48px;padding:0 16px;border:0;border-radius:24px;background:#B3261E;color:#FFFFFF; font:700 14px/1 "Archivo",var(--sans);letter-spacing:.02em;box-shadow:var(--a-sh2);cursor:pointer;transform:none} html.th-on .gm-app .gm-sos .gm-i{width:18px;height:18px;color:#FFFFFF} html.th-on .gm-app .gm-sos:hover,html.th-on .gm-app .gm-sos[aria-expanded="true"]{background:#8F1E18} html.th-on .gm-app .gm-sos:focus-visible{outline:2px solid var(--a-tx);outline-offset:2px} html.th-on .gm-app.gm-float .gm-corner .sospanel{top:auto;right:auto;left:0;bottom:calc(100% + 8px);width:min(320px,calc(100vw - 32px))} /* ── THE STATUS: local time and wind as two quiet chips beside SOS; the rest is kept, unseen ─────────────────────── */ html.th-on .gm-app.gm-float .gm-status{position:absolute;z-index:17;left:calc(var(--gm-gut) + 104px);bottom:calc(20px + env(safe-area-inset-bottom,0px));right:auto;height:auto; display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;background:none;box-shadow:none;overflow:visible;max-width:calc(100vw - 104px - 2 * var(--gm-gut) - 240px)} html.th-on .gm-app.gm-float .gm-status .gm-st-hide{display:none} html.th-on .gm-app.gm-float .gm-status .tzchip{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:18px;background:var(--gm-card-bg);box-shadow:var(--a-sh1); font:500 12.5px/1 var(--sans);color:var(--a-tx2)} html.th-on .gm-app.gm-float .gm-status .tzchip[hidden]{display:none} html.th-on .gm-app.gm-float .gm-status .tzchip b{color:var(--a-tx)} /* ── THE NOTICE: one plain line, said once, dismissable ──────────────────────────────────────────────────────────── */ html.th-on .gm-app .gm-notice{position:absolute;z-index:25;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:8px; max-width:min(520px,calc(100% - 32px));padding:4px 4px 4px 14px;border-radius:12px;background:var(--a-surface);box-shadow:var(--a-sh2);font:500 13px/1.4 var(--sans);color:var(--a-tx)} html.th-on .gm-app .gm-notice[hidden]{display:none} html.th-on .gm-app .gm-notice .gm-x{display:inline-flex;width:44px;height:44px;flex:0 0 auto} html.th-on .gm-app.gm-float .toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))} /* ── THE LAYERS DRAWER: closed on arrival, opens from Layers ─────────────────────────────────────────────────────── */ html.th-on .gm-app.gm-float .gm-drawer{display:none;position:absolute;z-index:26;top:calc(var(--gm-bar) + env(safe-area-inset-top,0px) + 12px);left:var(--gm-gut);bottom:calc(80px + env(safe-area-inset-bottom,0px)); width:380px;padding:4px 4px 8px;flex-direction:column;border-radius:12px;background:var(--a-surface);box-shadow:var(--a-sh3);overflow:hidden} html.th-on .gm-app.gm-float .gm-drawer:has(.lpanel.open){display:flex} html.th-on .gm-app.gm-float .gm-drawer .gm-x{display:inline-flex;width:44px;height:44px} html.th-on .gm-app.gm-float .gm-drawer .lpanel h2{font:700 17px/1.2 "Archivo",var(--sans);color:var(--a-tx)} html.th-on .gm-app.gm-float .gm-drawer .lcat{min-height:44px} html.th-on .gm-app.gm-float .gm-drawer .lrow{min-height:40px} html.th-on .gm-app.gm-float .gm-drawer .lcat-count{display:inline-flex} html.th-on .gm-app.gm-float .gm-drawer .lseg button{height:36px} html.th-on .gm-app.gm-float .gm-drawer .lnote a{color:var(--a-tx);font-weight:600} /* with the drawer open the search card and chips step aside for it */ html.th-on .gm-app.gm-float:has(.lpanel.open) .gm-top{left:calc(var(--gm-gut) + 392px)} /* ── THE PLACE CARD: only when something is picked, or when "You" asks for your own card ─────────────────────────── */ html.th-on .gm-app.gm-float .gm-place{display:none;position:absolute;z-index:24;left:var(--gm-gut);top:calc(var(--gm-bar) + env(safe-area-inset-top,0px) + 72px);width:380px; max-height:calc(100dvh - var(--gm-bar) - 180px);bottom:auto;right:auto;flex-direction:column;overflow:hidden;box-shadow:var(--a-sh3)} html.th-on .gm-app.gm-float:has(#gmPicked:not([hidden])) .gm-place,html.th-on .gm-app.gm-float.ta-show-props .gm-place{display:flex} html.th-on .gm-app.gm-float .gm-place .ta-pal{flex:1;min-height:0} html.th-on .gm-app.gm-float .gm-place h3{display:flex;align-items:center;gap:8px;min-height:52px;margin:0;padding:4px 4px 4px 16px;font:700 16px/1.25 "Archivo",var(--sans);color:var(--a-tx)} html.th-on .gm-app.gm-float .gm-place h3 > span{display:none} html.th-on .gm-app.gm-float .gm-place h3 > b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} html.th-on .gm-app.gm-float .gm-place h3{flex-direction:row;justify-content:flex-start;text-align:left} html.th-on .gm-app.gm-float .gm-place h3 > b:empty{display:block} html.th-on .gm-app.gm-float .gm-place h3 > b:empty::before{content:"You and nearby"} html.th-on .gm-app.gm-float .gm-place .gm-cardx{display:inline-flex;width:44px;height:44px;flex:0 0 auto} html.th-on .gm-app.gm-float .gm-place .ta-body{flex:1;min-height:0;overflow-y:auto} html.th-on .gm-app.gm-float .gm-place .ta-pick{display:none} /* a picked record leads; "near you" and presence follow under it */ html.th-on .gm-app.gm-float:not(.ta-show-props) .gm-place .gm-pres{display:none} html.th-on .gm-app.gm-float .gm-place .gm-vis button{height:44px} /* with a card open the search card and chips sit beside it on a wide screen */ html.th-on .gm-app.gm-float:has(#gmPicked:not([hidden])) .gm-top .gm-modes{visibility:visible} /* popups on the map keep only the name on a wide screen (gm-frame.js docks them); the record reads in the card */ /* ── NIGHT: the frame's dark furniture is Poseidon; the program colour is hi-vis ─────────────────────────────────── */ html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app.gm-float .gm-bar{background:#0F2E48;box-shadow:0 1px 0 rgba(216,196,165,.14)} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .gm-ts-knob{background:rgba(255,255,255,.08)} /* ── WIDTHS ───────────────────────────────────────────────────────────────────────────────────────────────────────── */ @media (max-width:1279px){ html.th-on .gm-app.gm-float .gm-find{width:340px} html.th-on .gm-app.gm-float .gm-drawer,html.th-on .gm-app.gm-float .gm-place{width:340px} html.th-on .gm-app.gm-float:has(.lpanel.open) .gm-top{left:calc(var(--gm-gut) + 352px)} html.th-on .gm-app .gm-mode{padding:0 12px} } /* tablet and phone: search across the top, chips under it scrolling sideways inside their own row, tools along the foot */ @media (max-width:900px){ html.th-on .gm-app.gm-float{--gm-bar:56px} html.th-on .gm-app.gm-float .gm-top{right:var(--gm-gut);flex-direction:column;align-items:stretch;gap:8px} html.th-on .gm-app.gm-float:has(.lpanel.open) .gm-top{left:var(--gm-gut)} html.th-on .gm-app.gm-float .gm-find{width:auto;height:48px} html.th-on .gm-app.gm-float .gm-find #q{font-size:16px} html.th-on .gm-app .gm-modes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gm-gut));padding:2px var(--gm-gut) 8px;-webkit-overflow-scrolling:touch} html.th-on .gm-app .gm-modes::-webkit-scrollbar{display:none} html.th-on .gm-app.gm-float .maplibregl-ctrl-top-right{top:calc(var(--gm-bar) + env(safe-area-inset-top,0px) + 124px)} html.th-on .gm-app.gm-float .gm-rail{top:auto;right:0;left:0;bottom:0;width:auto;max-height:none;flex-direction:row;gap:0;justify-content:space-between; padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;overflow-x:auto;overflow-y:hidden;box-shadow:0 -1px 0 var(--a-line),0 -6px 20px rgba(20,60,93,.08);background:var(--a-surface)} html.th-on .gm-app .gm-tool{flex:1 0 56px;min-height:56px;min-width:56px} html.th-on .gm-app.gm-float .gm-corner{bottom:calc(104px + env(safe-area-inset-bottom,0px))} html.th-on .gm-app.gm-float .gm-status{left:calc(var(--gm-gut) + 104px);bottom:calc(110px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 104px - 2 * var(--gm-gut))} html.th-on .gm-app.gm-float .gm-status #windchip{display:none} html.th-on .gm-app.gm-float .maplibregl-ctrl-bottom-right,html.th-on .gm-app.gm-float .maplibregl-ctrl-bottom-left{bottom:calc(68px + env(safe-area-inset-bottom,0px))} html.th-on .gm-app .gm-notice,html.th-on .gm-app.gm-float .toast{bottom:calc(164px + env(safe-area-inset-bottom,0px))} html.th-on .gm-app .gm-notice{left:var(--gm-gut);right:var(--gm-gut);transform:none;max-width:none} /* the drawer and the card become sheets over the foot of the screen */ html.th-on .gm-app.gm-float .gm-drawer,html.th-on .gm-app.gm-float .gm-place{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-height:72dvh;border-radius:16px 16px 0 0;z-index:60; padding-bottom:env(safe-area-inset-bottom,0px)} html.th-on .gm-app.gm-float .gm-drawer{height:72dvh} html.th-on .gm-app.gm-float .gm-place{max-height:60dvh;background:var(--a-surface)!important} html.th-on .gm-app.gm-float .ta-left{inset:auto 0 0 0} } @media (max-width:600px){ html.th-on .gm-app.gm-float{--gm-gut:12px} html.th-on .gm-app.gm-float .gm-bar{gap:4px} html.th-on .gm-app.gm-float .gm-wm{display:none!important} html.th-on .gm-app.gm-float .gm-wm-pin{display:block} html.th-on .gm-app .gm-ts-l{display:none} html.th-on .gm-app .gm-themesw{padding:0 4px} html.th-on .gm-app .gm-cta{padding:0 12px} html.th-on .gm-app .gm-cta-l{display:none} html.th-on .gm-app .gm-cta-s{display:inline} html.th-on .gm-app.gm-float .gm-acct{padding:0 10px} html.th-on .gm-app .gm-tool span{font-size:10.5px} } @media (prefers-reduced-motion:reduce){ html.th-on .gm-app .gm-ts-knob::after{transition:none} html.th-on .gm-app .gm-rec[aria-pressed="true"] .gm-rec-dot{animation:none} } /* ── QC FIX PASS (16 Nov 2026): index.html ─────────────────────────────────────────────────────────────────────────── */ /* the ground behind the map: navy space at night, the day sky by day (a navy block under a light header read as a fault) */ html.th-on:not([data-theme="dark"]) .gm-app.gm-float,html.th-on[data-mode="sun"] .gm-app.gm-float{--gm-space:#CFE3EE} /* the page ground itself: paperbark by day, navy at night, never the platform sheet's cool grey */ /* (the platform sheet paints html and body with !important, so this must too) */ html.th-on:has(.gm-app.gm-float),html.th-on body:has(.gm-app.gm-float){background:#F7F2E9!important} html.th-on[data-theme="dark"]:not([data-mode="sun"]):has(.gm-app.gm-float),html.th-on[data-theme="dark"]:not([data-mode="sun"]) body:has(.gm-app.gm-float){background:#0F2E48!important} /* 44 px everywhere a finger lands */ html.th-on .gm-app.gm-float .gm-find .go{width:44px;height:44px} html.th-on .gm-app.gm-float .gm-brand a{min-width:44px;justify-content:center} html.th-on .gm-app .maplibregl-ctrl-attrib-button{overflow:visible} html.th-on .gm-app .maplibregl-ctrl-attrib-button::after{content:"";position:absolute;inset:-10px} /* the account button keeps its word wherever there is room for it (an icon-only button that loses its icon is a blank box) */ @media (min-width:601px) and (max-width:900px){html.th-on .gm-app.gm-float .gm-acct span{display:inline}html.th-on .gm-app.gm-float .gm-acct{padding:0 12px}} /* the location button when location is refused or unavailable: readable on navy, a clear red by day */ html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{filter:brightness(1.7);opacity:1} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon, html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-waiting.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{filter:none} html.th-on:not([data-theme="dark"]) .gm-app .maplibregl-ctrl-group button.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{filter:saturate(1.8) brightness(.78)} /* the notice wraps inside its own card */ html.th-on .gm-app .gm-notice #gmNoticeT{flex:1 1 auto;min-width:0;overflow-wrap:anywhere} /* the drawer's standing line while the built-in list is showing (canon 20) */ html.th-on .gm-app .gm-lfallback{margin:8px 8px 4px;padding:8px 12px;border-radius:8px;background:var(--a-sunk);border:1px solid var(--a-line);font:500 12.5px/1.4 var(--sans);color:var(--a-tx2)} /* rows that scroll sideways fade at the edge that has more behind it */ @media (max-width:900px){ html.th-on .gm-app .gm-modes.gm-ovr-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)} html.th-on .gm-app .gm-modes.gm-ovr-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px);mask-image:linear-gradient(to right,transparent,#000 48px)} html.th-on .gm-app .gm-modes.gm-ovr-l.gm-ovr-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)} html.th-on .gm-app.gm-float .gm-rail.gm-ovr-r::after,html.th-on .gm-app.gm-float .gm-rail.gm-ovr-l::before{content:"";position:sticky;z-index:2;flex:0 0 40px;align-self:stretch;pointer-events:none} html.th-on .gm-app.gm-float .gm-rail.gm-ovr-r::after{right:-8px;margin-left:-40px;background:linear-gradient(to right,transparent,var(--a-surface) 85%)} html.th-on .gm-app.gm-float .gm-rail.gm-ovr-l::before{left:-8px;margin-right:-40px;background:linear-gradient(to left,transparent,var(--a-surface) 85%)} } @media (max-width:900px){ /* a small chevron in the fade, so the bar plainly says "more this way" */ html.th-on .gm-app.gm-float .gm-rail.gm-ovr-r::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23143C5D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center/16px,linear-gradient(to right,transparent,var(--a-surface) 70%)} html.th-on .gm-app.gm-float .gm-rail.gm-ovr-l::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23143C5D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 6px center/16px,linear-gradient(to left,transparent,var(--a-surface) 70%)} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app.gm-float .gm-rail.gm-ovr-r::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center/16px,linear-gradient(to right,transparent,var(--a-surface) 70%)} html.th-on[data-theme="dark"]:not([data-mode="sun"]) .gm-app.gm-float .gm-rail.gm-ovr-l::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 6px center/16px,linear-gradient(to left,transparent,var(--a-surface) 70%)} } /* a phone keeps the word "Sign in" (or the member's name) and drops the icon: the button can never be an empty box */ @media (max-width:600px){ html.th-on .gm-app.gm-float .gm-acct span{display:inline;max-width:88px;overflow:hidden;text-overflow:ellipsis} html.th-on .gm-app.gm-float .gm-acct .gm-i{display:none} }