/* Dew's design language: every colour, size and speed of the system's own parts, in one place.
   Every shell stylesheet (dew.css, assistant.css, weather.css) takes its values from here.
   Products inside windows (the store's Steam look, Meridian, the games) keep their own look.

   The Looks settings (js/looks.js) switch these by setting attributes on <html>:
     data-theme="dark|light"       light or dark (or following the time of day, chosen in JS)
     data-contrast="high"          high contrast
     data-transparency="off"       solid panels, no see-through glass
     data-text="large|larger"      text size
     data-motion="reduce|full"     reduce motion (unset: follow the device's own setting)
     data-dock-size="small|large", data-dock-colour="tinted|solid"
     data-brand="meridian|verden|tellus|noon|glimt|hav|yonder"   the name and look (js/brand.js); unset: Dew
     data-shape="slant|square|round"  the shape of corners and edges (css/shapes.css); unset: Soft
   The accent colour is set inline on <html> (--accent, --accent-2) by js/brand.js and js/looks.js. */

:root {
  --bg: #05070d;
  --glass: rgba(18, 24, 38, 0.72);
  --glass-strong: rgba(14, 19, 31, 0.92);
  --solid: #0e131f;                         /* glass with transparency switched off */
  --line: rgba(190, 206, 232, 0.18);       /* Dew: a cool silver hairline */
  --rim: rgba(214, 224, 242, 0.26);         /* the edge of panels and the dock: brighter silver */
  --sheen: inset 0 1px 0 rgba(236, 242, 255, .10);   /* the silver light catching a panel's top edge */
  --silver: #c9d3e2;                        /* silver for small highlights (the brand switch, rules) */
  --text: #e8eefc;
  --muted: #93a2c0;
  --accent: #6fd3ff;
  --accent-2: #8a7dff;
  --accent-text: var(--accent);             /* the accent used as text: darker on a light background */
  --on-accent: #061020;                     /* text on an accent-coloured button */
  --ok: #47d68a;
  --warn: #ffb020;
  --warn-ink: #1a1400;                      /* words on a --warn background (a security update): 10.6 : 1 */
  --tint: 255, 255, 255;                    /* fills for fields and hovers: rgba(var(--tint), .06) */
  --shadow: rgba(0, 0, 0, .55);
  --radius: 18px;
  --font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-head: var(--font);                 /* window titles */
  --head-case: none; --head-track: normal; --head-colour: var(--text);
  --solid-bg: linear-gradient(135deg, var(--accent), var(--accent-2));   /* the main button */
  --ball-hi: #f1f6ff;                       /* the bright spot on the Dew ball: silver-white */
  --ts: 1;                                  /* text size: every font size is multiplied by it */
  /* motion: one set of speeds and curves for all of Dew (plans/motion-and-effects.md) */
  --mo-fast: .14s;   /* fades, hovers, things leaving */
  --mo-base: .26s;   /* panels, trays, small moves */
  --mo-slow: .45s;   /* things gliding to a new place */
  --mo-ease: cubic-bezier(.3, .8, .3, 1);     /* glide: quick start, soft landing */
  --mo-out: cubic-bezier(.4, 0, 1, 1);        /* leaving */
  --dock-h: 96px;    /* room kept free at the bottom for the dock */
  --dock-scale: 1;
  --dock-bg: var(--glass);
  /* the round menu: white see-through glass, fading from the edge nearest the middle to the outer edge */
  --pie-near: rgba(255, 255, 255, .10);
  --pie-far: rgba(255, 255, 255, .34);
  --pie-edge: rgba(255, 255, 255, .55);     /* the glass's bright rim */
  --pie-halo: rgba(2, 6, 16, .8);           /* soft shadow behind its names and icons */
  color-scheme: dark;
}

/* ---- light ---- */
html[data-theme="light"] {
  --bg: #e6ecf5;
  --glass: rgba(250, 252, 255, .78);
  --glass-strong: rgba(246, 249, 253, .95);
  --solid: #f4f7fb;
  --line: rgba(60, 76, 104, .2);
  --rim: rgba(132, 146, 170, .42);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .95);
  --silver: #7d8a9e;
  --text: #101828;
  --muted: #52607a;
  --accent-text: color-mix(in srgb, var(--accent) 55%, #000);
  --tint: 20, 40, 80;
  --shadow: rgba(20, 30, 60, .22);
  --pie-near: rgba(255, 255, 255, .34);
  --pie-far: rgba(255, 255, 255, .72);
  --pie-edge: rgba(255, 255, 255, .95);
  --pie-halo: rgba(255, 255, 255, .95);
  color-scheme: light;
}

/* ---- Meridian: the name and look of the Meridian project (Meridian-main, meridian-simple.html):
   deep green-black ink, amber, teal, paper-coloured titles in a narrow uppercase face, tighter corners.
   Its light side is the same palette on paper. Set by js/brand.js; the accent pair comes from there. ---- */
html[data-brand="meridian"] {
  --bg: #0b100e;
  --glass: rgba(19, 27, 24, .84);
  --glass-strong: rgba(19, 27, 24, .96);
  --solid: #131b18;
  --line: #2a3733;
  --rim: #33433e;
  --sheen: inset 0 1px 0 rgba(233, 228, 211, .05);
  --silver: #5fb8ae;                        /* Meridian's teal takes silver's place */
  --text: #dce3df;
  --muted: #8a9591;
  --accent-text: var(--accent);
  --on-accent: #1a1205;
  --tint: 220, 227, 223;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 10px;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --head-case: uppercase; --head-track: .12em; --head-colour: #e9e4d3;
  --solid-bg: var(--accent);
  --ball-hi: #ffe7b0;
  --pie-near: rgba(19, 27, 24, .55);
  --pie-far: rgba(19, 27, 24, .85);
  --pie-edge: rgba(255, 176, 32, .55);
  --pie-halo: rgba(11, 16, 14, .9);
  color-scheme: dark;
}
html[data-brand="meridian"]:where([data-theme="light"]) {
  --bg: #e9e4d3;
  --glass: rgba(244, 240, 228, .86);
  --glass-strong: rgba(247, 244, 235, .97);
  --solid: #f4f0e4;
  --line: rgba(11, 16, 14, .16);
  --rim: rgba(11, 16, 14, .24);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #2f7d74;
  --text: #0b100e;
  --muted: #4f5b56;
  --accent-text: #8a5a00;
  --tint: 11, 16, 14;
  --shadow: rgba(40, 30, 10, .2);
  --head-colour: #0b100e;
  --pie-near: rgba(244, 240, 228, .5);
  --pie-far: rgba(244, 240, 228, .85);
  --pie-edge: rgba(138, 90, 0, .5);
  --pie-halo: rgba(244, 240, 228, .95);
  color-scheme: light;
}

/* ================================================================================================================
   OS-NAMES-1 (IDEA 716, 2026-11-01): six newer names beside Dew and Meridian: Verden, Tellus, Noon, Glimt, Hav, Yonder.
   Each is a whole token set (dark and light) like Meridian's above, with its own fonts: a wordmark font for titles and an
   interface font for the rest. The files are subsets (Latin, with æ ø å) in ../fonts/brands/, served from our own address, never
   fetched from Google; each has its SIL Open Font License text beside it (<name>.OFL.txt). A weight range lets one file serve
   every weight the look uses. Letters the subset lacks come from the next font in the stack.
   NONE OF THESE NAMES IS TRADEMARK-CHECKED: each is marked "check" in js/brand.js. The colour blocks below were made by
   font-sources/brands/ tooling notes (palettes chosen in the brainstorm, Shared/docs/os-names-brainstorm-2026-11-01.md).
   ================================================================================================================ */
@font-face { font-family: "Fraunces"; src: url("../fonts/brands/fraunces.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/brands/source-sans-3.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/brands/cormorant-garamond.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/brands/public-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/brands/josefin-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/brands/lexend.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/brands/space-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/brands/inter.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/brands/outfit.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/brands/dm-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/brands/bricolage-grotesque.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/brands/figtree.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }


/* ---- Verden ("the world"): forest green and warm paper white. A grounded, friendly look: a soft serif for titles, a plain humanist sans for the rest.
   Set by js/brand.js (data-brand="verden"); the accent pair comes from there. Name not checked for trademarks: "check" (IDEA 716). ---- */
html[data-brand="verden"] {
  --bg: #0b140f;
  --glass: rgba(19, 33, 26, 0.84);
  --glass-strong: rgba(19, 33, 26, 0.96);
  --solid: #13211a;
  --line: #2c4235;
  --rim: #38503f;
  --sheen: inset 0 1px 0 rgba(233, 239, 227, 0.06);
  --silver: #9bbf8a;
  --text: #e9efe3;
  --muted: #97aa9d;
  --accent-text: var(--accent);
  --on-accent: #06140b;
  --tint: 233, 239, 227;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 14px;
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --head-case: none; --head-track: 0; --head-colour: #f4eedb;
  --solid-bg: var(--accent);
  --ball-hi: #e8f7d8;
  --pie-near: rgba(19, 33, 26, 0.55);
  --pie-far: rgba(19, 33, 26, 0.85);
  --pie-edge: rgba(108, 196, 138, 0.55);
  --pie-halo: rgba(11, 20, 15, 0.9);
  color-scheme: dark;
}
html[data-brand="verden"]:where([data-theme="light"]) {
  --bg: #f2edde;
  --glass: rgba(250, 246, 234, 0.86);
  --glass-strong: rgba(250, 246, 234, 0.97);
  --solid: #faf6ea;
  --line: rgba(19, 33, 26, 0.16);
  --rim: rgba(19, 33, 26, 0.26);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #3f7a54;
  --text: #13211a;
  --muted: #4e6155;
  --accent-text: #1f6a3c;
  --on-accent: #06140b;
  --tint: 19, 33, 26;
  --shadow: rgba(19, 33, 26, 0.2);
  --head-colour: #13211a;
  --pie-near: rgba(250, 246, 234, 0.5);
  --pie-far: rgba(250, 246, 234, 0.85);
  --pie-edge: rgba(31, 106, 60, 0.5);
  --pie-halo: rgba(250, 246, 234, 0.95);
  color-scheme: light;
}

/* ---- Tellus (the old learned name for the Earth): terracotta and olive on warm umber, like an old atlas. Cormorant is fine only large, so titles lean on its heavier cut.
   Set by js/brand.js (data-brand="tellus"); the accent pair comes from there. Name not checked for trademarks: "check" (IDEA 716). ---- */
html[data-brand="tellus"] {
  --bg: #17110d;
  --glass: rgba(34, 25, 19, 0.84);
  --glass-strong: rgba(34, 25, 19, 0.96);
  --solid: #221913;
  --line: #4a3a2d;
  --rim: #5a4636;
  --sheen: inset 0 1px 0 rgba(240, 229, 211, 0.06);
  --silver: #a3a54a;
  --text: #f0e5d3;
  --muted: #ab9a86;
  --accent-text: var(--accent);
  --on-accent: #1d0c04;
  --tint: 240, 229, 211;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 8px;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Cormorant Garamond", Garamond, Georgia, serif;
  --head-case: none; --head-track: 0; --head-colour: #f6e9d2;
  --solid-bg: var(--accent);
  --ball-hi: #ffd9bd;
  --pie-near: rgba(34, 25, 19, 0.55);
  --pie-far: rgba(34, 25, 19, 0.85);
  --pie-edge: rgba(224, 131, 90, 0.55);
  --pie-halo: rgba(23, 17, 13, 0.9);
  color-scheme: dark;
}
html[data-brand="tellus"]:where([data-theme="light"]) {
  --bg: #efe2cb;
  --glass: rgba(247, 237, 218, 0.86);
  --glass-strong: rgba(247, 237, 218, 0.97);
  --solid: #f7edda;
  --line: rgba(42, 27, 17, 0.18);
  --rim: rgba(42, 27, 17, 0.3);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #6e7326;
  --text: #2a1b11;
  --muted: #66513f;
  --accent-text: #964420;
  --on-accent: #1d0c04;
  --tint: 42, 27, 17;
  --shadow: rgba(42, 27, 17, 0.2);
  --head-colour: #2a1b11;
  --pie-near: rgba(247, 237, 218, 0.5);
  --pie-far: rgba(247, 237, 218, 0.85);
  --pie-edge: rgba(150, 68, 32, 0.5);
  --pie-halo: rgba(247, 237, 218, 0.95);
  color-scheme: light;
}

/* ---- Noon (the hour the meridian names): ivory and pale lemon with ink-blue type, high-key and bright. Its dark side is the night that follows the day: deep ink blue.
   Set by js/brand.js (data-brand="noon"); the accent pair comes from there. Name not checked for trademarks: "check" (IDEA 716). ---- */
html[data-brand="noon"] {
  --bg: #0b1226;
  --glass: rgba(18, 27, 54, 0.84);
  --glass-strong: rgba(18, 27, 54, 0.96);
  --solid: #121b36;
  --line: #263461;
  --rim: #33447a;
  --sheen: inset 0 1px 0 rgba(243, 238, 216, 0.06);
  --silver: #9db4f0;
  --text: #f3eed8;
  --muted: #9fabc9;
  --accent-text: var(--accent);
  --on-accent: #14204a;
  --tint: 243, 238, 216;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 16px;
  --font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Josefin Sans", "Century Gothic", Futura, sans-serif;
  --head-case: uppercase; --head-track: .1em; --head-colour: #fbf4d3;
  --solid-bg: var(--accent);
  --ball-hi: #fff6c4;
  --pie-near: rgba(18, 27, 54, 0.55);
  --pie-far: rgba(18, 27, 54, 0.85);
  --pie-edge: rgba(245, 213, 90, 0.55);
  --pie-halo: rgba(11, 18, 38, 0.9);
  color-scheme: dark;
}
html[data-brand="noon"]:where([data-theme="light"]) {
  --bg: #f8f3e0;
  --glass: rgba(255, 252, 238, 0.86);
  --glass-strong: rgba(255, 252, 238, 0.97);
  --solid: #fffcee;
  --line: rgba(20, 36, 78, 0.16);
  --rim: rgba(20, 36, 78, 0.26);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #3a56a8;
  --text: #14244e;
  --muted: #4a5a86;
  --accent-text: #1b3a8c;
  --on-accent: #14204a;
  --tint: 20, 36, 78;
  --shadow: rgba(20, 36, 78, 0.2);
  --head-colour: #14244e;
  --pie-near: rgba(255, 252, 238, 0.5);
  --pie-far: rgba(255, 252, 238, 0.85);
  --pie-edge: rgba(27, 58, 140, 0.5);
  --pie-halo: rgba(255, 252, 238, 0.95);
  color-scheme: light;
}

/* ---- Glimt ("a glint of light"): near-black with one white-hot spark, a night sky. Fast, square-ish and quiet. Its light side is a pale dawn with ink-black buttons.
   Set by js/brand.js (data-brand="glimt"); the accent pair comes from there. Name not checked for trademarks: "check" (IDEA 716). ---- */
html[data-brand="glimt"] {
  --bg: #050507;
  --glass: rgba(13, 13, 18, 0.84);
  --glass-strong: rgba(13, 13, 18, 0.96);
  --solid: #0d0d12;
  --line: #25252f;
  --rim: #34343f;
  --sheen: inset 0 1px 0 rgba(243, 243, 246, 0.06);
  --silver: #c9c9d6;
  --text: #f3f3f6;
  --muted: #9494a2;
  --accent-text: var(--accent);
  --on-accent: #08080c;
  --tint: 243, 243, 246;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 6px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --head-case: none; --head-track: -.01em; --head-colour: #ffffff;
  --solid-bg: var(--accent);
  --ball-hi: #ffffff;
  --pie-near: rgba(13, 13, 18, 0.55);
  --pie-far: rgba(13, 13, 18, 0.85);
  --pie-edge: rgba(255, 223, 128, 0.55);
  --pie-halo: rgba(5, 5, 7, 0.9);
  color-scheme: dark;
}
html[data-brand="glimt"]:where([data-theme="light"]) {
  --bg: #e9e9ee;
  --glass: rgba(246, 246, 249, 0.86);
  --glass-strong: rgba(246, 246, 249, 0.97);
  --solid: #f6f6f9;
  --line: rgba(10, 10, 16, 0.16);
  --rim: rgba(10, 10, 16, 0.28);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #4a4a5a;
  --text: #0a0a10;
  --muted: #50505e;
  --accent-text: #0a0a10;
  --on-accent: #ffffff;
  --tint: 10, 10, 16;
  --shadow: rgba(10, 10, 16, 0.2);
  --head-colour: #0a0a10;
  --solid-bg: #0d0d12;
  --pie-near: rgba(246, 246, 249, 0.5);
  --pie-far: rgba(246, 246, 249, 0.85);
  --pie-edge: rgba(10, 10, 16, 0.5);
  --pie-halo: rgba(246, 246, 249, 0.95);
  color-scheme: light;
}

/* ---- Hav ("the open sea"): deep teal and sea blue, calm and bold, with rounder corners than the others.
   Set by js/brand.js (data-brand="hav"); the accent pair comes from there. Name not checked for trademarks: "check" (IDEA 716). ---- */
html[data-brand="hav"] {
  --bg: #04141a;
  --glass: rgba(10, 35, 44, 0.84);
  --glass-strong: rgba(10, 35, 44, 0.96);
  --solid: #0a232c;
  --line: #17444e;
  --rim: #225662;
  --sheen: inset 0 1px 0 rgba(225, 242, 243, 0.06);
  --silver: #5fd0d6;
  --text: #e1f2f3;
  --muted: #82a9b0;
  --accent-text: var(--accent);
  --on-accent: #03151b;
  --tint: 225, 242, 243;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 22px;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Outfit", "Segoe UI", system-ui, sans-serif;
  --head-case: none; --head-track: 0; --head-colour: #effafa;
  --solid-bg: var(--accent);
  --ball-hi: #c9f4fb;
  --pie-near: rgba(10, 35, 44, 0.55);
  --pie-far: rgba(10, 35, 44, 0.85);
  --pie-edge: rgba(53, 181, 216, 0.55);
  --pie-halo: rgba(4, 20, 26, 0.9);
  color-scheme: dark;
}
html[data-brand="hav"]:where([data-theme="light"]) {
  --bg: #e1f0f1;
  --glass: rgba(240, 249, 249, 0.86);
  --glass-strong: rgba(240, 249, 249, 0.97);
  --solid: #f0f9f9;
  --line: rgba(6, 42, 49, 0.16);
  --rim: rgba(6, 42, 49, 0.26);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #137a86;
  --text: #062a31;
  --muted: #3f6870;
  --accent-text: #0a6272;
  --on-accent: #03151b;
  --tint: 6, 42, 49;
  --shadow: rgba(6, 42, 49, 0.2);
  --head-colour: #062a31;
  --pie-near: rgba(240, 249, 249, 0.5);
  --pie-far: rgba(240, 249, 249, 0.85);
  --pie-edge: rgba(10, 98, 114, 0.5);
  --pie-halo: rgba(240, 249, 249, 0.95);
  color-scheme: light;
}

/* ---- Yonder ("over there"): violet twilight with an orange horizon, curious and travelling.
   Set by js/brand.js (data-brand="yonder"); the accent pair comes from there. Name not checked for trademarks: "check" (IDEA 716). ---- */
html[data-brand="yonder"] {
  --bg: #110a22;
  --glass: rgba(27, 18, 53, 0.84);
  --glass-strong: rgba(27, 18, 53, 0.96);
  --solid: #1b1235;
  --line: #382963;
  --rim: #48367e;
  --sheen: inset 0 1px 0 rgba(239, 233, 252, 0.06);
  --silver: #c3a8ff;
  --text: #efe9fc;
  --muted: #ab9fd2;
  --accent-text: var(--accent);
  --on-accent: #1f0d02;
  --tint: 239, 233, 252;
  --shadow: rgba(0, 0, 0, .6);
  --radius: 12px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --head-case: none; --head-track: 0; --head-colour: #fff1e6;
  --solid-bg: var(--accent);
  --ball-hi: #ffd2ae;
  --pie-near: rgba(27, 18, 53, 0.55);
  --pie-far: rgba(27, 18, 53, 0.85);
  --pie-edge: rgba(255, 140, 66, 0.55);
  --pie-halo: rgba(17, 10, 34, 0.9);
  color-scheme: dark;
}
html[data-brand="yonder"]:where([data-theme="light"]) {
  --bg: #eee8f9;
  --glass: rgba(248, 245, 253, 0.86);
  --glass-strong: rgba(248, 245, 253, 0.97);
  --solid: #f8f5fd;
  --line: rgba(28, 15, 56, 0.16);
  --rim: rgba(28, 15, 56, 0.26);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .8);
  --silver: #6b3fc2;
  --text: #1c0f38;
  --muted: #5b4d86;
  --accent-text: #a8420a;
  --on-accent: #1f0d02;
  --tint: 28, 15, 56;
  --shadow: rgba(28, 15, 56, 0.2);
  --head-colour: #1c0f38;
  --pie-near: rgba(248, 245, 253, 0.5);
  --pie-far: rgba(248, 245, 253, 0.85);
  --pie-edge: rgba(168, 66, 10, 0.5);
  --pie-halo: rgba(248, 245, 253, 0.95);
  color-scheme: light;
}

/* ---- the name picker in the system menu (js/names.js namePicker): arrows either side of the name, what it means and "3 of 8"
   under it. The name and its mark are drawn at the size they have as the system's logo (js/wordmark.js). ---- */
#dew-menu .menu-brand.has-picker { display: block; padding: 2px 4px 6px; }
.name-picker { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 2px; }
.np-arrow { min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius, 10px); background: transparent; color: var(--text);
  font: 400 28px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
.np-arrow:hover, .np-arrow:focus-visible { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.np-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 6px 4px; min-width: 0;
  border-radius: var(--radius, 10px); overscroll-behavior: contain; touch-action: pan-y; cursor: default; }
.np-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.np-view { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--head-colour); line-height: 0; max-width: 100%; }
.np-view .sym, .np-view .globe, .np-view .leaf { width: 32px; height: 32px; flex: none; }
.np-view .wordmark { height: 16px; width: auto; max-width: 100%; }
.np-mean { font-size: calc(12.5px * var(--ts)); line-height: 1.25; color: var(--muted); min-height: 2.5em; display: flex; align-items: center; justify-content: center;
  overflow-wrap: anywhere; }
.np-count { font-size: calc(11px * var(--ts)); color: var(--muted); letter-spacing: .02em; }
@keyframes np-in-next { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes np-in-prev { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
.np-view.np-in-next { animation: np-in-next var(--mo-base, .25s) ease-out both; }
.np-view.np-in-prev { animation: np-in-prev var(--mo-base, .25s) ease-out both; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .np-view { animation: none; } }
html[data-motion="reduce"] .np-view { animation: none; }

/* ---- the ball (the system's launcher) in the six newer looks: the name's own round symbol on the ball, the name under it ---- */
#assistant .ball-symbol .sym { width: 60%; height: 60%; margin: -12% 0 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
html:is([data-brand="verden"], [data-brand="tellus"], [data-brand="noon"], [data-brand="glimt"], [data-brand="hav"], [data-brand="yonder"]) #assistant .ball-name { top: 62%; }
html:is([data-brand="noon"], [data-brand="glimt"]) #assistant .ball-name { color: #10162a; }
html:is([data-brand="noon"], [data-brand="glimt"]) #assistant .ball-name .wordmark { filter: none; }
html:is([data-brand="glimt"], [data-brand="yonder"], [data-brand="noon"]) #assistant .ball-name .wm-hi { color: currentColor; }

/* ---- high contrast: solid backgrounds, strong lines, full-strength text ---- */
html[data-contrast="high"] {
  --glass: #000; --glass-strong: #000; --solid: #000;
  --line: rgba(255, 255, 255, .85); --text: #fff; --muted: #e6ecf7;
  --pie-near: #000; --pie-far: #000; --pie-edge: var(--line); --pie-halo: #000;
}
html[data-contrast="high"][data-theme="light"] {
  --glass: #fff; --glass-strong: #fff; --solid: #fff;
  --line: rgba(0, 0, 0, .85); --text: #000; --muted: #1d2433;
  --pie-near: #fff; --pie-far: #fff; --pie-halo: #fff;
}
html[data-contrast="high"] :focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px; }

/* ---- transparency off: solid panels, nothing blurred behind ---- */
html[data-transparency="off"] { --glass: var(--solid); --glass-strong: var(--solid); --pie-near: var(--solid); --pie-far: var(--solid); }
html[data-transparency="off"] * { backdrop-filter: none !important; }

/* ---- text size ---- */
html[data-text="large"] { --ts: 1.15; }
html[data-text="larger"] { --ts: 1.3; }

/* ---- motion: follows the device unless chosen ---- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) { --mo-fast: 0s; --mo-base: 0s; --mo-slow: 0s; }
}
html[data-motion="reduce"] { --mo-fast: 0s; --mo-base: 0s; --mo-slow: 0s; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation: none !important; transition-duration: 0s !important;
}

/* ---- the dock's own choices (right-click the dock) ---- */
@media (min-width: 761px) {
  html[data-dock-size="small"] { --dock-scale: .86; --dock-h: 84px; }
  html[data-dock-size="large"] { --dock-scale: 1.14; --dock-h: 108px; }
}
html[data-dock-colour="tinted"] { --dock-bg: color-mix(in srgb, var(--accent) 22%, var(--glass-strong)); }
html[data-dock-colour="solid"] { --dock-bg: var(--solid); }

/* Parts with a look of their own stay as they are in every theme: the weather card came over
   from Meridian and is drawn for a dark frame. */
#weather, #wx-edge {
  --bg: #05070d; --glass: rgba(18, 24, 38, 0.72); --glass-strong: rgba(14, 19, 31, 0.92); --solid: #0e131f;
  --line: rgba(160, 190, 255, 0.16); --text: #e8eefc; --muted: #93a2c0; --tint: 255, 255, 255;
  --accent-text: var(--accent); color-scheme: dark;
}
html[data-transparency="off"] #weather, html[data-transparency="off"] #wx-edge { --glass: #0e131f; --glass-strong: #0e131f; }

/* OS-NAMES-1: the meaning line under a name in the settings badge's chooser (js/release-badge.js) */
.rb-row .rb-who { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.2; }
.rb-row .rb-mean { font-size: .78em; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }