/* OxOnOS Glance v3 — the wall view, and the Glance | Desk switch.
   Founder 2026-10-05 ("A = Blend"): A's living tiles, B's master word and
   Right-now column, C's colourless calm ground. Research rules R1–R15 in
   docs/research/GLANCE-AT-A-DISTANCE-2026-10-04.md. Renderer: ui/js/screens/glance.js.

   Uses ui/css/tokens.css unchanged and adds ONE unit, --u: one pixel of a
   1920×1080 wall. Everything on the wall is sized in --u, so 3840×2160 is the
   same picture at twice the pixels.

   ⛔ THREE TYPE SIZES AND NO OTHERS (R1): far · mid · near. Their values in u
   are WRITTEN BY THE SCRIPT (fitWall → --g-far/--g-mid/--g-near) from the
   panel's EDID and the owner's wall distance: far ≥ 30′ of cap height, mid
   ≥ 20′, near ≥ 12′ at that distance, never below 18u. The values below are
   only the before-script fallback (the design's own: 32" at 3 m).
   ⛔ NO PATTERN BEHIND TYPE. The living fill lives in .g-band, a grid row of its
   own; text never overlaps it (the founder-visible flaw in concept A).
   ⛔ NORMAL HAS NO COLOUR (R5). The only colour on a calm wall is the small
   ● beside "Normal"; fills are the tile ground; the C ground is not drawn.
   ⛔ EVERY RULE IS SCOPED UNDER .glance / .glance-stage (or the switch). The v2
   design system already owns .tile, .sub, .sk and .state for other screens. */

/* ⛔ --u IS SET BY ui/js/screens/glance.js (fitWall), IN PX, MEASURED FROM THE
   STAGE. This viewport-unit value is only the before-script fallback. On RH003
   (WebKitGTK at page zoom 2.0) a font-size built from vh/vw is zoomed TWICE;
   px is zoomed once everywhere. */
:root { --u: min(calc(100vh / 1080), calc(100vw / 1920)); --g-far: 60; --g-mid: 26; --g-near: 19; }

/* ── the switch: identical in the Desk topbar and on the wall ─────────────── */
.modeswitch { display: inline-flex; align-items: center; padding: 2px; gap: 2px; flex: none;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--hairline); }
.modeswitch button { position: relative; height: 30px; min-width: 0; padding: 0 10px 0 8px; border: 0;
  border-radius: 6px; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--t-small); font-weight: var(--w-medium); line-height: 1; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.modeswitch button::after { content: ""; position: absolute; left: 0; right: 0;
  top: calc((30px - var(--hit)) / 2); bottom: calc((30px - var(--hit)) / 2); }
.modeswitch button:hover { color: var(--text); }
.modeswitch button[aria-checked="true"] { background: var(--surface); color: var(--text);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, .06); }
.modeswitch button:focus-visible, .view-flip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.modeswitch .ms-ico { width: 16px; height: 16px; flex: none; }
.view-switch { display: inline-flex; align-items: center; }
.view-flip { display: none; place-items: center; width: var(--hit); height: var(--hit); padding: 0; border: 0;
  border-radius: var(--r-md); background: transparent; color: var(--text-2); cursor: pointer; flex: none; }
.view-flip:hover { background: var(--surface-2); color: var(--text); }
.view-flip .ms-ico { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .modeswitch { display: none; }
  .view-flip { display: inline-grid; }
}

/* ── the shell steps aside while Glance is showing ──────────────────────── */
html[data-view="glance"] .rail,
html[data-view="glance"] .topbar,
html[data-view="glance"] .tabbar,
html[data-view="glance"] .skip-link,
html[data-view="glance"] #screensaver { display: none !important; }
html[data-view="glance"] .shell { display: block; min-height: 0; }
html[data-view="glance"] .main { padding: 0; }
html[data-view="glance"], html[data-view="glance"] body { background: var(--bg); }

/* ══ WALL LAYOUT — CONCEPT B AT DESK SCALE (founder 2026-10-05 09:11) ══════════
   An instrument cluster for a 27" monitor at arm's length: the box itself and
   its one status word on the left; four round gauges, each in its own colour,
   with a slow living texture on the value arc; four annunciators beneath.
   Numerals are about three times body text, light weight, tabular; units are
   the same family, regular weight, smaller, muted — never bold. */

/* ONE colour per metric, so the eye learns where to look. Never amber or red:
   those belong to caution and warning alone (R5). */
:root { --c-gpu: #2F5FA8; --c-temp: #1F7A70; --c-mem: #6448B0; --c-store: #2E7A50; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-gpu: #8DB6F2; --c-temp: #6CCFC0; --c-mem: #B59CF0; --c-store: #7CC89D; } }
:root[data-theme="dark"] { --c-gpu: #8DB6F2; --c-temp: #6CCFC0; --c-mem: #B59CF0; --c-store: #7CC89D; }

.glance-stage { position: fixed; inset: 0; overflow: hidden; background: var(--bg); color: var(--text); z-index: 1; }
.glance {
  --far: calc(var(--g-far) * var(--u));
  --mid: calc(var(--g-mid) * var(--u));
  --near: calc(var(--g-near) * var(--u));
  --label: calc(var(--g-near) * 0.86 * var(--u));
  /* R13: 5 % graphics-safe area on every edge, of the GLASS */
  --safe-x: max(calc(96 * var(--u)), 5vw);
  --safe-y: max(calc(54 * var(--u)), 5vh);
  --g-gap: calc(20 * var(--u));
  --g-radius: calc(18 * var(--u));
  position: absolute; inset: 0; padding: var(--safe-y) var(--safe-x);
  display: grid; row-gap: calc(22 * var(--u));
  grid-template-rows: auto minmax(0, 1fr) auto;
  transition: opacity 2s linear; font-family: var(--font); font-weight: 400;
  font-feature-settings: "cv11", "ss01", "ss03";
  font-variant-numeric: lining-nums proportional-nums; }
.glance .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.glance .g-num, .glance .g-top .clock, .glance .g-foot .fresh, .glance .a-val { font-variant-numeric: lining-nums tabular-nums; }

/* top line: the OxOnOS mark ……… date · time · which view */
.glance .g-top { display: flex; align-items: center; gap: calc(24 * var(--u)); min-width: 0; min-height: calc(48 * var(--u)); }
.glance .g-top .mark { height: calc(40 * var(--u)); width: auto; flex: none; }
.glance .g-top .spacer { flex: 1; }
.glance .g-top .when { display: flex; align-items: baseline; gap: calc(18 * var(--u)); white-space: nowrap; min-width: 0; }
.glance .g-top .date { font-size: var(--near); color: var(--text-3); }
.glance .g-top .clock { flex: none; font-size: var(--mid); font-weight: 300; line-height: 1; letter-spacing: -0.01em; }
@media (max-aspect-ratio: 1/1) { .glance .g-top .date { display: none; } }
.glance .g-top .modeswitch { padding: calc(3 * var(--u)); gap: calc(3 * var(--u)); border-radius: calc(10 * var(--u)); background: transparent; border-color: var(--border); }
.glance .g-top .modeswitch button { height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(11 * var(--u));
  border-radius: calc(7 * var(--u)); font-size: calc(17 * var(--u)); gap: calc(7 * var(--u)); }
.glance .g-top .modeswitch button::after { top: min(0px, calc((40 * var(--u) - 48px) / 2)); bottom: min(0px, calc((40 * var(--u) - 48px) / 2)); }
.glance .g-top .modeswitch button[aria-checked="true"] { background: var(--surface-2); box-shadow: none; }
.glance .g-top .modeswitch .ms-ico { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* ── the body: master panel + the cluster ──────────────────────────────── */
.glance .g-body { display: grid; min-height: 0; min-width: 0; column-gap: var(--g-gap); row-gap: var(--g-gap);
  grid-template-columns: calc(460 * var(--u)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
html[data-glance-layout="stack"] .glance .g-body, html[data-glance-layout="column"] .glance .g-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

/* the master panel: THE BOX ITSELF, lit by its state; one word; the Right-now list */
.glance .g-master { display: grid; min-height: 0; min-width: 0; align-content: start;
  grid-template-rows: auto auto auto auto minmax(0, 1fr); row-gap: calc(12 * var(--u));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--g-radius); padding: calc(26 * var(--u)) calc(30 * var(--u)); overflow: hidden; }
.glance .g-master.bad { border-color: var(--bad); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--bad); }
.glance .g-master.warn { border-color: var(--warn); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--warn); }
.glance .g-box { position: relative; margin: 0 0 calc(6 * var(--u)); display: grid; justify-items: center; row-gap: calc(10 * var(--u)); }
.glance .g-box .g-ox1 { position: relative; height: calc(250 * var(--u)); width: auto; display: block; z-index: 1;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .35)); }
/* the state light: a soft glow behind the box in the verdict's own hue; it
   breathes slowly while answers arrive (R9) — opacity only, one composited layer */
.glance .g-box .g-glow { position: absolute; left: 50%; top: calc(115 * var(--u)); width: calc(380 * var(--u)); height: calc(300 * var(--u));
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none; --glow: var(--idle);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 34%, transparent), transparent);
  opacity: .55; animation: g-breathe 7s ease-in-out infinite alternate; animation-play-state: paused; }
.glance .g-box.ok .g-glow { --glow: var(--ok); } .glance .g-box.warn .g-glow { --glow: var(--warn); }
.glance .g-box.bad .g-glow { --glow: var(--bad); } .glance .g-box.idle .g-glow { --glow: var(--idle); opacity: .3; }
@keyframes g-breathe { from { opacity: .45; } to { opacity: .95; } }
.glance[data-live="1"] .g-box .g-glow { animation-play-state: running; }
.glance .g-box figcaption { position: relative; z-index: 1; display: flex; align-items: baseline; gap: calc(10 * var(--u)); font-size: var(--near); line-height: 1.2; }
.glance .g-box figcaption[hidden] { display: none; }
.glance .g-box figcaption b { font-weight: 500; }
.glance .g-box figcaption span { color: var(--text-3); }
.glance .g-stat { display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; }
.glance .g-master .glyph { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; }
.glance .g-master .g-word { margin: 0; font-size: var(--mid); line-height: 1.1; font-weight: 400; letter-spacing: -0.015em; }
.glance .g-master.bad .g-word { color: var(--bad); font-weight: 500; } .glance .g-master.warn .g-word { color: var(--warn); font-weight: 500; }
.glance .g-master.idle .g-word { color: var(--text-2); }
.glance .g-master .g-say { margin: 0; font-size: var(--near); line-height: 1.35; color: var(--text-2); text-wrap: pretty; }
.glance .g-master.bad .g-say, .glance .g-master.warn .g-say { color: var(--text); }
.glance .g-master .g-say .why { color: var(--text-2); }
.glance .g-master .g-rn-h { margin: calc(8 * var(--u)) 0 0; font-size: var(--label); font-weight: 500; line-height: 1.2; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .08em; }
.glance .g-master .g-rn { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: calc(9 * var(--u)); min-height: 0; overflow: hidden; }
.glance .g-master .g-rn li { display: flex; align-items: baseline; gap: calc(12 * var(--u)); min-width: 0; font-size: var(--near); line-height: 1.3; color: var(--text); }
.glance .g-master .g-rn li .shape { width: calc(11 * var(--u)); height: calc(11 * var(--u)); transform: translateY(calc(-1 * var(--u))); }
.glance .g-master .g-rn li.plain, .glance .g-master .g-rn li.quiet { color: var(--text-2); }
.glance .g-master .g-rn li.quiet .shape, .glance .g-master .g-rn li.plain .shape { background: var(--text-3); border-radius: 50%; }
.glance .g-master .g-rn li.quiet .shape { opacity: .5; }
.glance .g-master .g-rn li.warn { color: var(--warn); } .glance .g-master .g-rn li.bad { color: var(--bad); }
.glance .g-master .g-rn li.idle { color: var(--idle); }
/* 4:3 and portrait: the master becomes a band across the top */
html[data-glance-layout="stack"] .glance .g-master, html[data-glance-layout="column"] .glance .g-master {
  grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); column-gap: calc(28 * var(--u)); }
html[data-glance-layout="stack"] .glance .g-box, html[data-glance-layout="column"] .glance .g-box { grid-row: 1 / -1; align-self: center; }
html[data-glance-layout="stack"] .glance .g-box .g-ox1, html[data-glance-layout="column"] .glance .g-box .g-ox1 { height: calc(170 * var(--u)); }
html[data-glance-layout="stack"] .glance .g-master > :not(.g-box), html[data-glance-layout="column"] .glance .g-master > :not(.g-box) { grid-column: 2; }
html[data-glance-layout="stack"] .glance .g-master .g-rn, html[data-glance-layout="column"] .glance .g-master .g-rn { max-height: calc(4 * 30 * var(--u)); }

/* ── the cluster: four gauges over four annunciators ───────────────────── */
.glance .g-grid { display: grid; gap: var(--g-gap); min-height: 0; min-width: 0; grid-template-rows: minmax(0, 1fr) auto; }
.glance .g-gauges { display: grid; gap: var(--g-gap); min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.glance .g-anns { display: grid; gap: var(--g-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-glance-layout="column"] .glance .g-anns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.glance .g-dropped { display: none !important; }

.glance .gauge, .glance .ann { position: relative; min-width: 0; min-height: 0; overflow: hidden; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--g-radius); }
.glance .gauge { --acc: var(--text-2); display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: calc(4 * var(--u));
  padding: calc(20 * var(--u)) calc(26 * var(--u)); }
.glance .gauge[data-tile="gpu"] { --acc: var(--c-gpu); } .glance .gauge[data-tile="temp"] { --acc: var(--c-temp); }
.glance .gauge[data-tile="memory"] { --acc: var(--c-mem); } .glance .gauge[data-tile="storage"] { --acc: var(--c-store); }
.glance .gauge.warn { --acc: var(--warn); border-color: var(--warn); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--warn); }
.glance .gauge.bad { --acc: var(--bad); border-color: var(--bad); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--bad); }
.glance .gauge.idle { --acc: var(--idle); }
/* labels: small, spaced capitals, muted — with a dot of the metric's own colour */
.glance .gauge .g-lab, .glance .ann .a-lab { display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0;
  font-size: var(--label); font-weight: 500; line-height: 1.2; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.glance .gauge .g-lab::before { content: ""; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--acc); flex: none; }
.glance .gauge .g-gbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(18 * var(--u)); align-items: center; min-height: 0; }
.glance .gauge .g-read { min-width: 0; display: grid; row-gap: calc(8 * var(--u)); }
.glance .gauge .g-val { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: calc(10 * var(--u)); min-width: 0; }
.glance .gauge .g-num { font-size: var(--far); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.glance .gauge .g-unit { font-size: var(--near); font-weight: 400; color: var(--text-2); line-height: 1.2; }
.glance .gauge .g-val.idle .g-num { font-size: var(--mid); font-weight: 400; color: var(--text-3); letter-spacing: -0.01em; line-height: 1.15; }
.glance .gauge .g-sub { font-size: var(--near); line-height: 1.3; color: var(--text-3); }
.glance .gauge .dial { width: calc(210 * var(--u)); height: calc(210 * var(--u)); display: block; overflow: visible; max-height: 100%; }
.glance .gauge .track { fill: none; stroke: var(--surface-2); stroke-width: 22; stroke-linecap: round; }
.glance .gauge .val { fill: none; stroke: var(--acc); stroke-width: 22; stroke-linecap: round; }
/* the living texture: a dashed stroke over the value arc that STEPS along it */
.glance .gauge .live { fill: none; stroke: var(--surface); stroke-width: 22; stroke-dasharray: 3 13; opacity: .5;
  animation-name: g-crawl; animation-duration: 9s; animation-timing-function: steps(16); animation-iteration-count: infinite; animation-play-state: paused; }
@keyframes g-crawl { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -16; } }
.glance[data-live="1"] .gauge[data-moving="1"] .live { animation-play-state: running; }
html[data-motion="reduce"] .glance .gauge .live, html[data-motion="reduce"] .glance .g-box .g-glow { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .glance .gauge .live, .glance .g-box .g-glow { animation-play-state: paused !important; } }
.glance .gauge .zone { fill: none; stroke-width: 6; stroke: var(--text-3); opacity: .55; }
.glance .gauge .zone.warn { stroke-dasharray: 3 5; } .glance .gauge .zone.bad { stroke-dasharray: 12 4; }
.glance .gauge.warn .zone.warn, .glance .gauge.bad .zone.warn { stroke: var(--warn); opacity: 1; }
.glance .gauge.bad .zone.bad { stroke: var(--bad); opacity: 1; }
.glance .gauge .hatch { fill: none; stroke: var(--idle); stroke-width: 22; stroke-dasharray: 2 10; opacity: .6; }
.glance .gauge .needle { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.glance .gauge .hub { fill: var(--text); }
.glance .gauge .tick { stroke: var(--text-3); stroke-width: 3; opacity: .7; }
.glance .dir { display: inline-flex; align-items: center; margin-left: calc(6 * var(--u)); color: var(--text-2); }
.glance .dir i { display: inline-block; width: 0; height: 0; border-left: calc(6 * var(--u)) solid transparent; border-right: calc(6 * var(--u)) solid transparent; }
.glance .dir.up i { border-bottom: calc(9 * var(--u)) solid currentColor; } .glance .dir.down i { border-top: calc(9 * var(--u)) solid currentColor; }

.glance .ann { display: grid; row-gap: calc(6 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); align-content: start; }
.glance .ann.bad { border-color: var(--bad); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--bad); }
.glance .ann.warn { border-color: var(--warn); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--warn); }
.glance .ann .a-lab .shape { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.glance .ann .a-val { font-size: var(--mid); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
.glance .ann.idle .a-val { color: var(--text-3); } .glance .ann.bad .a-val { color: var(--bad); } .glance .ann.warn .a-val { color: var(--warn); }
.glance .ann .a-det { font-size: var(--near); line-height: 1.3; color: var(--text-3); }
.glance .tile-go { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.glance .tile-go:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.glance .gauge:has(.tile-go), .glance .ann:has(.tile-go) { cursor: pointer; }

/* state shapes: colour + SHAPE — the vocabulary the whole product uses
   (● ok ▲ warn ■ bad ◆ info ○ not checked). */
.glance .st { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; font-size: var(--near); font-weight: 500; white-space: nowrap; line-height: 1.2; }
.glance .shape { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; display: inline-block; }
.glance .st.ok .shape, .glance .shape.ok   { background: var(--ok);  border-radius: 50%; }
.glance .st.warn .shape, .glance .shape.warn { background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.glance .st.bad .shape, .glance .shape.bad  { background: var(--bad);  border-radius: 12%; }
.glance .st.info .shape, .glance .shape.info { background: var(--info); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.glance .st.idle .shape, .glance .shape.idle { border: calc(2 * var(--u)) solid var(--idle); border-radius: 50%; background: transparent; box-sizing: border-box; }
.glance .st.ok { color: var(--text-3); }
.glance .st.warn { color: var(--warn); } .glance .st.bad { color: var(--bad); }
.glance .st.info { color: var(--info); } .glance .st.idle { color: var(--idle); }

/* footer: Clyde's template line · freshness — the line wraps, it is never cut */
.glance .g-foot { display: flex; align-items: baseline; gap: calc(28 * var(--u)); font-size: var(--near); line-height: 1.35; color: var(--text-3); min-width: 0; }
.glance .g-foot .clyde { flex: 1; min-width: 0; color: var(--text-2); }
.glance .g-foot .clyde::before { content: "Clyde · "; color: var(--text-3); }
.glance .g-foot .clyde-gap { flex: 1; }
.glance .g-foot .fresh { white-space: nowrap; margin-left: auto; flex: none; }

/* loading skeletons — no shimmer under reduced motion */
.glance .sk { display: inline-block; height: 1em; background: var(--surface-2); border-radius: calc(6 * var(--u)); animation: g-sk 1.6s ease-in-out infinite; font-size: var(--near); }
.glance .sk.sk-hero { font-size: var(--far); height: .9em; }
@keyframes g-sk { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .glance .sk { animation: none; } }

/* stale = last known values, greyed, with the time they were true */
.glance.stale .g-num, .glance.stale .g-unit, .glance.stale .a-val, .glance.stale .g-master .g-rn { opacity: .5; }
/* lost touch: the last values stay so the wall never blanks, but nothing may still look well */
.glance[data-phase="lost"] .g-grid { filter: grayscale(1); opacity: .7; }

/* night: the BOX's clock says it is night, so the wall dims (spec §5.6) */
.glance.night { opacity: .42; }
.glance.night .g-lab, .glance.night .a-lab, .glance.night .g-top .mark, .glance.night .g-box, .glance.night .g-master .g-rn-h, .glance.night .g-foot { opacity: .7; }

/* ══ NARROW / PORTRAIT: a phone or a small window looking at Glance ════════ */
/* ⛔ Same query as STACK_QUERY in ui/js/screens/glance.js. */
@media (max-width: 999px), (max-height: 559px) {
  .glance-stage { --u: 0.62px; position: static; overflow: visible; }
  .glance { --far: 34px; --mid: 20px; --near: 14px; --label: 12px; --g-radius: 12px; --g-gap: 12px;
    position: static; padding: 16px; grid-template-rows: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .glance .g-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 12px; }
  .glance .g-master { grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto; column-gap: 14px; row-gap: 8px; padding: 14px; }
  .glance .g-box { grid-row: 1 / span 3; align-self: start; margin: 0; }
  .glance .g-box .g-ox1 { height: 96px; } .glance .g-box .g-glow { top: 48px; width: 150px; height: 130px; }
  .glance .g-box figcaption { display: none; }
  .glance .g-master > :not(.g-box) { grid-column: 2; }
  .glance .g-master .g-rn, .glance .g-master .g-rn-h { grid-column: 1 / -1; }
  .glance .g-top { flex-wrap: wrap; row-gap: 10px; }
  .glance .g-top .mark { height: 24px; }
  .glance .g-top .clock { font-size: 22px; } .glance .g-top .date { font-size: 13px; }
  .glance .g-top .modeswitch { padding: 2px; gap: 2px; border-radius: var(--r-sm); }
  .glance .g-top .modeswitch button { height: 30px; padding: 0 10px 0 8px; font-size: var(--t-small); border-radius: 6px; gap: 6px; }
  .glance .g-top .modeswitch button::after { top: calc((30px - var(--hit)) / 2); bottom: calc((30px - var(--hit)) / 2); }
  .glance .g-top .modeswitch .ms-ico { width: 16px; height: 16px; }
  .glance .g-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .glance .g-anns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance .gauge { padding: 12px 14px; }
  .glance .gauge .g-gbody { grid-template-columns: minmax(0, 1fr) 64px; column-gap: 8px; }
  .glance .gauge .dial { width: 64px; height: 64px; }
  .glance .ann { padding: 12px 14px; } .glance .ann .a-val { font-size: 17px; }
  .glance .shape { width: 10px; height: 10px; }
  .glance .g-foot { flex-wrap: wrap; gap: 10px; }
  .glance .g-foot .clyde { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .glance .g-gauges { grid-template-columns: minmax(0, 1fr); }
  .glance .g-top .date { display: none; }
  .glance .g-top .view-flip { margin-left: auto; }
}