/* ══════════════════════════════════════════════════════════════════════ HX CALL: shared tokens and primitives. Page-specific layout stays inline in each page. Theme: light by default, dark when the phone asks for it, forced by which HX.applyTheme() sets from ?theme=. --scale is set from ?size=, which maps 0-100 to 0.85-1.35 with the default of 50 landing on 1.1. Same curve and same default as Windmap, so a given `size` means the same thing in both tools. See hx/core.js applyTheme(). ══════════════════════════════════════════════════════════════════ */ :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, and it has to move with the theme. A hardcoded dark-theme tint put a safety warning's bold text at roughly no contrast on the light background, i.e. the emphasised words were the least legible ones in the box. Found and fixed on the Windmap pages first; this is the same token. */ --amber-str:#6E4103; --red:#B3271C; --green:#22794B; --amber-bg:#FDF3E0; --amber-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; --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; --shadow:none; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* The pages hide elements with the `hidden` property, which the browser applies as a low-priority [hidden]{display:none}. Any author rule that sets `display`, such as an id selector or `all:unset`, silently outranks it and the element stays on screen. Restate it here so `hidden` always wins. */ [hidden]{display:none !important} html,body{ margin:0; color:var(--fg); /* 1.4, matching Windmap. It was 1.35, which left h1 and every inheriting block ~4% tighter than the sibling tool for no reason a reader could see. Safe to change: widget.html sets its own line-height on every text element (1.1 / 1 / 1.1) and app.html does the same on most of its. */ font:400 calc(14px * var(--scale))/1.4 var(--sans); } a{color:var(--chart)} /* Anything clickable should look it once there is a cursor to show. */ button,summary{cursor:pointer} /* Pointer feedback, page by page below this file, follows two rules: Hover is gated behind (hover:hover) and (pointer:fine). On a touch screen :hover fires on tap and then sticks until you tap something else, leaving a button lit long after you used it. XCTrack's WebView reports a coarse pointer, so the widget never sees these rules at all. :active is not gated: the tap-highlight reset above removes the platform's own press feedback, so it is the only confirmation a finger gets. */ /* status dot, used by both pages */ .led{ display:inline-block;width:.5em;height:.5em;border-radius:50%; background:var(--dim);margin-right:.45em;vertical-align:middle;flex:none; } .led.ok{background:var(--green)} .led.wait{background:var(--amber)} .led.err{background:var(--red)} /* small monospace label */ .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.due{color:var(--amber);border-color:currentColor} .tag.unver{color:var(--red);border-color:currentColor} :focus-visible{outline:2px solid var(--chart);outline-offset:2px}