/* Made by trial/split_looks.py from kit/looks/looks.css and css/looks.css. Do not edit: change a source and run
   `py split_looks.py`. The rules that belong to no one look. */
/* Looks: whole different kinds of look for Dew's own parts, tried one after another with the look
   switch (William, 2026-10-09: "change it up … a way of switching between the look a bit like for
   the titles"). js/look-sets.js keeps the list, sets data-look on <html> and shows the switch at the
   top of the Dew menu and in Settings → Looks. Unset (or "dew") is the look Dew came with
   (css/tokens.css).

   Each look gives the tokens of css/tokens.css a dark and a light side (those blocks live in one
   home for every app, Shared/kit/looks, copied to kit/looks/looks.css), its own fonts, and a few
   finishing touches below (textures, rules, hard shadows). Touches only paint: borders keep their
   width and text keeps its size, so no button moves when the look changes. The fonts are open
   (SIL OFL) and live in web/fonts (README there); "Dew Pixel" is drawn by make_pixel_font.py.

   Order of who wins: the dark slider's inline tokens (js/looks.js) > high contrast and
   transparency off (repeated at the end of this file) > a look > the Meridian brand > Dew.
   Parts with a look of their own keep it: the store and the wallet (css/store.css), the weather
   card, the 3D Earth and the apps and games in frames.
   Every look passes WCAG AA for text, dark and light: tests/look-sets.test.mjs. *//* ---- fonts: line height matched to Segoe UI Variable (1.15) and the width brought near it, so a
   label takes about the same room in every look ---- */
@font-face { font-family: "Dew Merriweather"; src: url("../fonts/Merriweather-Regular.ttf") format("truetype"); font-display: swap;
  size-adjust: 83%; ascent-override: 110.8%; descent-override: 27.7%; line-gap-override: 0%; }
@font-face { font-family: "Dew Abril"; src: url("../fonts/AbrilFatface-Regular.ttf") format("truetype"); font-display: swap;
  size-adjust: 96%; ascent-override: 95.8%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Dew Franklin"; src: url("../fonts/LibreFranklin-Regular.ttf") format("truetype"); font-display: swap;
  font-weight: 100 599; size-adjust: 88%; ascent-override: 104.5%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Dew Franklin"; src: url("../fonts/LibreFranklin-ExtraBold.ttf") format("truetype"); font-display: swap;
  font-weight: 600 900; size-adjust: 88%; ascent-override: 104.5%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Dew Oswald"; src: url("../fonts/Oswald-SemiBold.ttf") format("truetype"); font-display: swap;
  size-adjust: 100%; ascent-override: 92%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Dew Work Sans"; src: url("../fonts/WorkSans-Latin.woff2") format("woff2"); font-display: swap;
  size-adjust: 84%; ascent-override: 109.5%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "Dew Rubik"; src: url("../fonts/Rubik-Regular.ttf") format("truetype"); font-display: swap;
  font-weight: 100 549; size-adjust: 88.5%; ascent-override: 104.0%; descent-override: 26.0%; line-gap-override: 0%; }
@font-face { font-family: "Dew Rubik"; src: url("../fonts/Rubik-Medium.ttf") format("truetype"); font-display: swap;
  font-weight: 550 900; size-adjust: 88%; ascent-override: 104.5%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Dew Mono"; src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-display: swap;
  size-adjust: 80%; ascent-override: 115%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: "Dew Pixel"; src: url("../fonts/DewPixel.ttf") format("truetype"); font-display: swap;
  size-adjust: 82%; ascent-override: 112.2%; descent-override: 28%; line-gap-override: 0%; }
/* =================================================================================================
   The looks' tokens live in one home for every app: Shared/kit/looks/looks.css, copied unchanged to
   kit/looks/looks.css here and linked before this file (index.html). Below: Dew's fonts above, and
   what only Dew has: high contrast, its own parts, and each look's finishing touches.
   ================================================================================================= *//* ---- high contrast and transparency off still win over a look (as they do over Dew) ---- */
html[data-look][data-contrast="high"] {
  --glass: #000; --glass-strong: #000; --solid: #000; --bg: #000;
  --line: rgba(255, 255, 255, .85); --rim: rgba(255, 255, 255, .85); --text: #fff; --muted: #e6ecf7; --head-colour: #fff;
  --pie-near: #000; --pie-far: #000; --pie-edge: var(--line); --pie-halo: #000;
  --rule: transparent; --margin-rule: transparent; --scan: transparent; --blush: transparent; --blush-2: transparent;
  --glow: none; --landscape-filter: none;
}
html[data-look][data-contrast="high"][data-theme="light"] {
  --glass: #fff; --glass-strong: #fff; --solid: #fff; --bg: #fff;
  --line: rgba(0, 0, 0, .85); --rim: rgba(0, 0, 0, .85); --text: #000; --muted: #1d2433; --head-colour: #000;
  --pie-near: #fff; --pie-far: #fff; --pie-halo: #fff;
}
html[data-look][data-transparency="off"] { --glass: var(--solid); --glass-strong: var(--solid); --pie-near: var(--solid); --pie-far: var(--solid); }
html[data-look][data-contrast="high"] :is(.panel, .pop, #dock, #results) { background-image: none !important; text-shadow: none !important; }
/* ---- parts with a look of their own keep Dew's letters ---- */
html[data-look] :is(#panel-library.st, #weather, #wx-edge) {
  --font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --font-head: var(--font); --font-ui: var(--font);
  --head-case: none; --head-track: normal; font-family: var(--font);
}
/* the globe behind everything takes on the look's colours */
html[data-look] #landscape { filter: var(--landscape-filter, none); }
/* what you press keeps Dew's letters, so no button moves or grows when the look changes: buttons,
   fields, the dock and the name switch. The look's own letters are for headings, text, and the
   labels that stand alone — the Dew menu's list, the corners and the look switch. */
html[data-look] :where(button, input, select, textarea, #dock, .brand-switch):not(.menu-item, .look-step) {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
}
html[data-look] :is(.corner span, #dew-menu h4, .menu-item, .look-switch) { font-family: var(--font-ui, var(--font)); }
/* ---- the look switch: at the top of the Dew menu, under the name (js/look-sets.js) ---- */
.look-switch { display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; }
/* the name in the middle takes the room left, so the arrows never move whatever the name's length */
.look-switch .look-spot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 4px; border-radius: 10px; touch-action: pan-y; user-select: none; text-align: center; }
.look-switch .look-spot:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.look-switch .look-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--head-colour); }
.look-switch .look-of { color: var(--muted); font-size: calc(11.5px * var(--ts)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.look-switch .look-step { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--text); font: inherit; font-size: calc(18px * var(--ts)); line-height: 1; cursor: pointer; }
.look-switch .look-step:hover { background: rgba(var(--tint), .1); }
.look-switch .look-step:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
/* in Settings → Looks, each look's name in its own letters */
.seg.look-pick button[data-value="paper"] { font-family: "Dew Abril", Georgia, serif; }
.seg.look-pick button[data-value="pixel"] { font-family: "Dew Pixel", monospace; }
.seg.look-pick button[data-value="swiss"] { font-family: "Dew Franklin", Arial, sans-serif; font-weight: 800; }
.seg.look-pick button[data-value="terminal"] { font-family: "Dew Mono", monospace; }
.seg.look-pick button[data-value="fjord"] { font-family: "Dew Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.seg.look-pick button[data-value="rosa"] { font-family: "Dew Rubik", sans-serif; }
.seg.look-pick button[data-value="ember"] { font-family: "Dew Rubik", sans-serif; font-weight: 500; }
.seg.look-pick button[data-value="dusk"] { font-family: "Dew Work Sans", sans-serif; font-weight: 600; }
.seg.look-pick button[data-value="midnight"] { font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif; }
.seg.look-pick button[data-value="hearts"] { font-family: "Dew Merriweather", Georgia, serif; font-style: italic; }
.seg.look-pick button[data-value="alpenglow"] { font-family: "Dew Work Sans", sans-serif; font-weight: 600; }
.seg.look-pick button[data-value="bubbles"] { font-family: "Dew Rubik", sans-serif; font-weight: 500; }
.seg.look-pick button[data-value="electric"] { font-family: "Dew Work Sans", sans-serif; font-weight: 600; letter-spacing: -.01em; }
.seg.look-pick button[data-value="sunset"] { font-family: "Dew Rubik", sans-serif; font-weight: 500; }
.seg.look-pick button[data-value="amethyst"] { font-family: "Dew Work Sans", sans-serif; font-weight: 600; }
.seg.look-pick button[data-value="plum"] { font-family: "Dew Work Sans", sans-serif; }
.seg.look-pick button[data-value="lime"], .seg.look-pick button[data-value="lime-warm"] { font-family: "Dew Work Sans", sans-serif; font-weight: 600; }
.seg.look-pick button[data-value="raspberry"] { font-family: "Dew Rubik", sans-serif; font-weight: 500; }
.seg.look-pick button[data-value="neon"] { font-family: "Dew Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.seg.look-pick button[data-value="plus"] { font-family: "Dew Work Sans", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.seg.look-pick button[data-value="prism"], .seg.look-pick button[data-value="network"], .seg.look-pick button[data-value="lagoon"], .seg.look-pick button[data-value="harbour"] { font-family: "Dew Work Sans", sans-serif; font-weight: 600; }
.seg.look-pick button[data-value="exotic-fruit"] { font-family: "Dew Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
/* the short cross-fade when the look changes (none with reduce motion: js/look-sets.js skips it) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
/* Talk to Dew: the mark beside the Dew ball. The ring is box-shadow on the button itself, not a
   pseudo-element (looks.css and shapes.css decorate ::before / ::after). Grey when unavailable or off. */
#voice-mark { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; margin: 0 .35rem;
  background: var(--voice-bg, #f2f2ee); cursor: pointer; position: relative; display: inline-grid; place-items: center;
  box-shadow: 0 0 0 2px var(--voice-ring-off, #c9c9c2); transition: box-shadow .2s ease, background-color .2s ease; }
#voice-mark:focus-visible { outline: 3px solid var(--voice-focus, #2a6fdb); outline-offset: 2px; }
#voice-mark[data-state="unavailable"] { opacity: .45; }
#voice-mark .voice-mic { width: 1.2rem; height: 1.2rem; fill: currentColor; color: var(--voice-ring-off, #c9c9c2); }
#voice-mark:is([data-state="ready"],[data-state="listening"],[data-state="working"]) .voice-mic { color: var(--voice-ring, #2e8b57); }
#voice-mark[data-state="working"] .voice-mic rect { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { #voice-mark[data-state="listening"] { animation: none; } }
#voice-mark[data-state="ready"] { box-shadow: 0 0 0 2px var(--voice-ring, #2e8b57); }
#voice-mark[data-state="listening"] { box-shadow: 0 0 0 3px var(--voice-ring, #2e8b57); animation: voice-pulse 1.2s ease-in-out infinite; }
#voice-mark[data-state="working"] { box-shadow: 0 0 0 3px var(--voice-ring, #2e8b57); }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--voice-ring, #2e8b57); } 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { #voice-mark { animation: none !important; transition: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #voice-mark { --voice-bg: #2a2a28; --voice-ring-off: #5d5d57; } }
:root[data-theme="dark"] #voice-mark { --voice-bg: #2a2a28; --voice-ring-off: #5d5d57; }
.voice-sheet { position: fixed; inset: 0; margin: auto; width: min(92vw, 28rem); max-height: 80vh; max-height: 80dvh; overflow: auto;
  height: fit-content; padding: 1.25rem; border-radius: 14px; background: #fbfbf8; color: #1d1d1b; z-index: 1000;
  box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.voice-sheet h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.voice-sheet .voice-go, .voice-sheet .voice-close { min-height: 2.6rem; padding: 0 1rem; border-radius: 10px; border: 0; margin-top: .5rem;
  background: #2e8b57; color: #fff; font: inherit; cursor: pointer; }
.voice-sheet .voice-go:disabled { opacity: .5; cursor: default; }
.voice-sheet .voice-close { background: #e4e4df; color: #1d1d1b; margin-left: .5rem; }
.voice-sheet .voice-heard { margin: 0; padding-left: 1.4rem; line-height: 1.5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .voice-sheet { background: #242422; color: #ecece6; } }
:root[data-theme="dark"] .voice-sheet { background: #242422; color: #ecece6; }
/* Always listening: a steady ring while it waits for "Hey Dew"; half-lit for the 8 s of follow-ups */
#voice-mark[data-state="idle"] { box-shadow: 0 0 0 2px var(--voice-ring, #2e8b57); background: color-mix(in srgb, var(--voice-ring, #2e8b57) 18%, var(--voice-bg, #f2f2ee)); }
#voice-mark[data-state="idle"] .voice-mic { color: var(--voice-ring, #2e8b57); }
#voice-mark[data-state="follow"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--voice-ring, #2e8b57) 50%, transparent); }
#voice-mark[data-state="follow"] .voice-mic { color: var(--voice-ring, #2e8b57); }
/* "Heard: … — press any key": a command said without "Hey Dew", by the mark for 4 s (voice.js) */
.voice-chip { position: fixed; z-index: 60; max-width: min(28rem, calc(100vw - 16px)); padding: .5rem .8rem; border-radius: .6rem;
  background: var(--voice-bg, #f2f2ee); color: inherit; box-shadow: 0 0 0 2px var(--voice-ring, #2e8b57), 0 4px 14px rgb(0 0 0 / .18);
  font-size: .95rem; line-height: 1.3; pointer-events: none; animation: voice-chip-in .15s ease-out; }
@keyframes voice-chip-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .voice-chip { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .voice-chip { --voice-bg: #2a2a28; } }
:root[data-theme="dark"] .voice-chip { --voice-bg: #2a2a28; }
/* The ring (ring-pad.js): its own pointer in pointer mode (clicks pass through it), and the try's ticks */
.ring-pointer { position: fixed; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #2e8b57; background: rgba(46,139,87,.18); pointer-events: none; z-index: 2000; }
.ring-pointer[hidden] { display: none; }
.voice-sheet .ring-try { margin: .25rem 0; padding-left: 1.4rem; line-height: 1.7; }
.voice-sheet .ring-try li.done { list-style: "✓  "; color: #2e8b57; font-weight: 600; }
/* the looks you made (js/my-looks.js, Dew OS/Looks maker): a small heading in the style list, a short list in Settings,
   and the window the maker lives in */
.seg .seg-label { flex: 1 0 100%; padding: 6px 12px 2px; font-size: calc(11.5px * var(--ts)); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.set-row.is-list .set-end { flex: 1 0 100%; }
.set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.set-list-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.set-list-name { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.set-list-name small { display: block; color: var(--muted); }
.set-list-empty { color: var(--muted); font-size: calc(13px * var(--ts)); }
/* the Looks maker's doors (LM4b): a picture dropped on Settings -> Looks, the look just made, and the "Make your own" spot in the style switch */
.set-drop-note { margin: 0 0 8px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: calc(13px * var(--ts)); }
#set-main.drop { outline: 3px dashed var(--accent); outline-offset: -6px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
#set-main.drop .set-drop-note { color: var(--text, inherit); border-style: solid; border-color: var(--accent); }
.set-list-row.just-added { outline: 2px solid var(--accent); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 14%, transparent); animation: flash 1.6s ease-out 2; }
html[data-motion="reduce"] .set-list-row.just-added { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .set-list-row.just-added { animation: none; } }
.look-switch.at-make .look-spot { cursor: pointer; }
.look-switch.at-make .look-name::before { content: "🎨 "; }