/* ══════════════════════════════════════════════════════════════════════ wg/base.css, shared tokens and primitives. Page layout stays inline. Theme: light by default, dark when the phone asks for it, and forced either way by , which WG.applyTheme() sets from ?theme=. The dark media block is guarded by :not([data-theme=light]) so an explicit light choice still wins on a dark phone. --scale comes from ?size=, which maps 0-100 to 0.85-1.35 with the default of 50 landing on 1.1. NOT 1.0-2.0, which is what this said and what the code did until `1 + size/100` put the default at 1.5x and overflowed the chip rows on a 430px phone. See wg/fields.js. NOT loaded by widget.html. That page's must stay unpainted. XCTrack renders white or absent as transparent, which is what lets the overlay float over its map, so it carries its own few rules instead. ═══════════════════════════════════════════════════════════════════ */ :root{ --scale:1; /* light */ --ink:#F4F6F8; --panel:#FFFFFF; --panel-hi:#EDF2F6; --rule:#CBD6DE; --fg:#0F1A21; --dim:#5C7180; --chart:#1E6FA8; --amber:#A96608; /* Emphasis INSIDE an amber panel. It has to move with the theme: the page hardcoded a dark-theme tint, which put the safety warning's bold text at roughly no contrast on the light background, the emphasised words were the least legible ones in the box. */ --amber-str:#6E4103; --red:#B3271C; --green:#22794B; --amber-bg:#FDF3E0; --amber-line:#E8CFA0; --stale-bg:#FCEDEA; --warn-line:#E8CFA0; --shadow:0 1px 2px rgba(15,26,33,.10); --mono:ui-monospace,"Roboto Mono",monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#0A1116; --panel:#151F27; --panel-hi:#1D2B36; --rule:#2A3B48; --fg:#E8F0F5; --dim:#7B909F; --chart:#54A6DC; --amber:#E9A33C; --amber-str:#F6D9A8; --red:#D6483C; --green:#4FB477; --amber-bg:#241A0B; --amber-line:#3D2C10; --stale-bg:#20161A; --warn-line:#5A4520; --shadow:none; } } [data-theme="dark"]{ --ink:#0A1116; --panel:#151F27; --panel-hi:#1D2B36; --rule:#2A3B48; --fg:#E8F0F5; --dim:#7B909F; --chart:#54A6DC; --amber:#E9A33C; --amber-str:#F6D9A8; --red:#D6483C; --green:#4FB477; --amber-bg:#241A0B; --amber-line:#3D2C10; --stale-bg:#20161A; --warn-line:#5A4520; --shadow:none; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Pages hide elements with the `hidden` property, which the browser applies as a low-priority [hidden]{display:none}. Any author rule setting `display` silently outranks it and the element stays visible. Restate it so `hidden` always wins. */ [hidden]{display:none !important} html,body{ margin:0; color:var(--fg); font:400 calc(14px * var(--scale))/1.4 var(--sans); } body{background:var(--ink)} a{color:var(--chart)} button,summary{cursor:pointer} /* ── SPEC-driven settings rows, rendered by wg/fields.js ───────────── */ .field{display:flex;align-items:center;gap:10px;padding:10px 0; border-bottom:1px solid var(--rule)} .field label{flex:1;min-width:0;font-size:.92em} .field label small{display:block;color:var(--dim);font-size:.8em;line-height:1.4} .field input[type=number],.field select{ width:calc(92px * var(--scale));padding:9px;background:var(--panel);color:var(--fg); border:1px solid var(--rule);border-radius:3px; font:600 1em var(--mono);text-align:right; } /* Enums size to their longest option. A fixed 92px clipped "bottom-right" to "bottom-", which reads as a different setting. Capped so a long option can never crowd the label off a narrow phone. */ .field select{text-align:left;width:auto;min-width:calc(92px * var(--scale));max-width:45%} .field input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--chart)} /* ── the Advanced accordion, also from wg/fields.js ───────────────────── Everything a pilot does not need before their first flight lives in here, grouped by heading. The summary is a full-width tap target because on a phone in gloves a text-sized one is not one. */ .adv{margin-top:14px;border:1px solid var(--rule);border-radius:3px; background:var(--panel)} .adv > summary{list-style:none;display:flex;align-items:center;gap:8px; padding:12px 13px;font:600 .88em var(--sans);color:var(--dim)} .adv > summary::-webkit-details-marker{display:none} .adv > summary::after{content:"▼";margin-left:auto;font-size:.72em} .adv[open] > summary::after{content:"▲"} .adv[open] > summary{border-bottom:1px solid var(--rule);color:var(--fg)} /* The rows keep their own rules; the padding lives here so a group heading and its fields share one gutter. */ .adv > .field,.adv > .grp{margin-left:13px;margin-right:13px} .adv > .field:last-child{border-bottom:0} .grp{margin:16px 0 0;font:600 .74em var(--sans);letter-spacing:.12em; text-transform:uppercase;color:var(--dim)} /* No double rule where a heading follows the last row of the group above. */ .grp + .field{border-top:0} /* ── small primitives used by both pages ──────────────────────────── */ .tag{padding:2px 5px;border:1px solid var(--rule);border-radius:2px; font-family:var(--mono);font-size:.72em;color:var(--dim);white-space:nowrap} .tag.fresh{color:var(--green);border-color:currentColor} .tag.warn{color:var(--amber);border-color:currentColor} .tag.stale{color:var(--red);border-color:currentColor} :focus-visible{outline:2px solid var(--chart);outline-offset:2px} /* Hover is gated behind a fine pointer. On a touch screen :hover fires on tap and sticks until something else is tapped, leaving a control lit long after use. :active is never gated. The tap-highlight reset above removes the platform's own press feedback, so it is the only confirmation a finger gets. */