/* Daylight: the Cut + Dimmer system on cream (8 Oct 2026). Link after cd-system.css (and cd-fellas.css).
   Scope it to a container, never to <html>: <div data-theme="day">…</div>. Night stays the default; daylight
   follows the device ("Match my device"), and when the device says nothing it is night.

   How it works: cd-system.css writes its components with the brand names (--deep for grounds, --pine for surfaces,
   --cream for text, --mute for secondary text). Inside [data-theme="day"] those names are re-pointed at their
   daylight roles, then every derived token is re-declared (custom properties resolve where they are declared, so
   :root's --ground-2 etc. would otherwise stay night). The exceptions that must NOT flip are listed at the bottom.

   Contrast, measured (WCAG 2.x):
     deep #0F2E25 on cream #F7F4EC 13.29 · on paper #FFFDF8 14.37 · on well #ECE7DA 11.9
     secondary #4A665B on cream 5.72 · on paper 6.18 · on well 5.09
     deep on amber 6.76 (the one action keeps its deep label)
     amber on cream 1.97: amber is never text in daylight. The "now" state becomes an amber chip with a deep label.
     done green #1E6B4E on cream 5.85 (mint is 1.21 on cream: decoration only, never a signal on its own)
*/
[data-theme="day"]{
  /* the brand names, re-pointed at daylight roles */
  --deep:#F7F4EC;           /* ground */
  --pine:#FFFDF8;           /* surface: paper */
  --cream:#0F2E25;          /* text */
  --mute:#4A665B;           /* secondary text */
  --mint:#1E6B4E;           /* the done tick, darkened to read on cream */
  /* fixed brand values, for the exceptions below */
  --k-deep:#0F2E25; --k-pine:#1F4B3D; --k-cream:#F7F4EC; --k-mint:#B9EBCF;
  /* derived roles, re-declared */
  --ground:#F7F4EC;
  --ground-2:#EFEADD;
  --surface:#FFFDF8;
  --surface-2:#EAF0E9;
  --hole:#ECE7DA;
  --well:#F1EDE2;
  --text:#0F2E25;
  --text-2:#4A665B;
  --line:color-mix(in srgb,#0F2E25 12%,transparent);
  --line-2:color-mix(in srgb,#0F2E25 24%,transparent);
  --accent:var(--amber);
  --accent-ink:#0F2E25;
  --focus:#0F2E25;
  --ring-gap:#F7F4EC;
  --alu:#C9CFC9;
  --shadow-100:0 1px 0 0 color-mix(in srgb,#16201C 10%,transparent);
  --shadow-200:0 3px 2px -1px color-mix(in srgb,#16201C 10%,transparent),0 1px 0 0 color-mix(in srgb,#16201C 8%,transparent);
  --shadow-300:0 6px 14px -4px color-mix(in srgb,#16201C 16%,transparent),0 1px 0 0 color-mix(in srgb,#16201C 8%,transparent);
  --shadow-400:0 16px 34px -10px color-mix(in srgb,#16201C 24%,transparent),0 2px 4px -1px color-mix(in srgb,#16201C 10%,transparent);
  --bevel-100:inset 0 1px 0 0 #FFFFFF,inset 0 -1px 0 0 color-mix(in srgb,#16201C 9%,transparent);
  --bevel-amber:inset 0 1px 0 0 color-mix(in srgb,#FFFFFF 50%,transparent),inset 0 -1px 0 0 color-mix(in srgb,#16201C 22%,transparent);
  --inset-200:inset 0 2px 1px 0 color-mix(in srgb,#16201C 12%,transparent),inset 1px 0 1px 0 color-mix(in srgb,#16201C 6%,transparent),inset -1px 0 1px 0 color-mix(in srgb,#16201C 6%,transparent);
  background:var(--ground);
  color:var(--text);
  color-scheme:light;
}
/* the focus ring: deep pine with a cream gap and no glow (a glow reads as dirt on cream) */
[data-theme="day"] *{--ring:0 0 0 2px var(--ring-gap),0 0 0 4px #0F2E25}
[data-theme="day"] .cd-pan,[data-theme="day"] .cd-es-pan,[data-theme="day"] .cd-on-pine{--ring-gap:#FFFDF8}

/* ---------- exceptions: things that keep their brand colour by day ---------- */
/* the one action: amber with a deep label, plus a hairline so its edge holds on cream */
[data-theme="day"] .cd-btn.cd-btn-p{color:#0F2E25;box-shadow:inset 0 0 0 1px color-mix(in srgb,#8A5A00 35%,transparent),var(--shadow-100)}
[data-theme="day"] .cd-btn.cd-btn-p:disabled,[data-theme="day"] .cd-btn.cd-btn-p.is-dis{background:#E4DFD1;color:#4A665B}
/* panels are paper with a hairline, not pine */
[data-theme="day"] .cd-pan,[data-theme="day"] .cd-es-pan{box-shadow:0 0 0 1px var(--line),var(--shadow-200)}
/* the mark is pine by day (it is never deep-on-cream text colour) */
[data-theme="day"] .cd-lm{color:#1F4B3D}
/* "now" is light, and light is not text on cream: the current number sits in an amber chip */
[data-theme="day"] .cd-prog>span.is-now{color:#0F2E25;background:var(--amber);border-radius:.18em;padding:0 .14em;margin:0 -.14em}
/* the nights: done is a filled deep square (no cream glow by day), not yet is an outline */
[data-theme="day"] .cd-c.is-p{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#0F2E25 40%,transparent)}
[data-theme="day"] .cd-c.is-d,[data-theme="day"] button.cd-c.is-d{background:#1F4B3D;box-shadow:none}
[data-theme="day"] .cd-wk{--band:color-mix(in srgb,#E2A62B 14%,transparent)}
/* the fellas keep their cream (see cd-fellas.css for the day disc and rim) */
[data-theme="day"] .av{--cream:#F7F4EC}

/* ---------- folded in from the warmer round's pages (8 Oct) ---------- */
/* edges that hold on cream: secondary buttons, pressed segments, boxed rows */
[data-theme="day"] .cd-btn-s:not(:disabled){box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-100)}
[data-theme="day"] .cd-btn-s:not(:disabled):active{box-shadow:inset 0 0 0 1px var(--line-2)}
[data-theme="day"] .cd-btn:disabled,[data-theme="day"] .cd-btn.is-dis{color:var(--mute)}
/* fellas by day: their mint stays mint (the glow frame), white paper for stamp and rosette, a darker disc on paper panels */
[data-theme="day"] .av{--mint:#B9EBCF}
[data-theme="day"] .cd-pan .av{--fella-disc:#F1EDE2}
[data-theme="day"]{--edge:#FFFFFF;--blob-stamp:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D%225.556%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%225.556%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%225.556%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%225.556%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2216.667%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2216.667%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2216.667%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2216.667%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2227.778%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2227.778%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2227.778%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2227.778%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2238.889%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2238.889%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2238.889%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2238.889%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2250.0%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2250.0%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2250.0%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2250.0%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2261.111%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2261.111%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2261.111%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2261.111%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2272.222%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2272.222%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2272.222%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2272.222%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2283.333%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2283.333%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2283.333%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2283.333%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2294.444%22%20cy%3D%220%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%2294.444%22%20cy%3D%22100%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2294.444%22%20r%3D%223.1%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2294.444%22%20r%3D%223.1%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FFFFFF%22%20mask%3D%22url(%23m)%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22%23F7F4EC%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%20stroke%3D%22%23E4663F%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E");--blob-scallop:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Ccircle%20cx%3D%2291.80%22%20cy%3D%2250.00%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2288.62%22%20cy%3D%2266.00%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2279.56%22%20cy%3D%2279.56%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2266.00%22%20cy%3D%2288.62%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2250.00%22%20cy%3D%2291.80%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2234.00%22%20cy%3D%2288.62%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2220.44%22%20cy%3D%2279.56%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2211.38%22%20cy%3D%2266.00%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%228.20%22%20cy%3D%2250.00%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2211.38%22%20cy%3D%2234.00%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2220.44%22%20cy%3D%2220.44%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2234.00%22%20cy%3D%2211.38%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2250.00%22%20cy%3D%228.20%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2266.00%22%20cy%3D%2211.38%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2279.56%22%20cy%3D%2220.44%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2288.62%22%20cy%3D%2234.00%22%20r%3D%226.2%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241.8%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22%23B9EBCF%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20fill%3D%22%23F7F4EC%22%2F%3E%3C%2Fsvg%3E")}

/* ---------- a night island inside the day ----------
   A laptop or phone on a day page shows the app, and the app is night: [data-theme="night"] points the names back. */
[data-theme="night"]{
  --deep:#0F2E25; --pine:#1F4B3D; --cream:#F7F4EC; --mute:#A9C2B7; --mint:#B9EBCF;
  --ground:var(--deep);
  --ground-2:color-mix(in srgb,var(--pine) 34%,var(--deep));
  --surface:var(--pine);
  --surface-2:color-mix(in srgb,var(--pine) 80%,var(--mint));
  --hole:color-mix(in srgb,var(--deep) 78%,var(--ink));
  --well:color-mix(in srgb,var(--pine) 52%,var(--deep));
  --text:var(--cream); --text-2:var(--mute);
  --line:color-mix(in srgb,var(--mute) 20%,transparent);
  --line-2:color-mix(in srgb,var(--mute) 38%,transparent);
  --accent:var(--amber); --accent-ink:var(--deep); --focus:var(--cream); --ring-gap:var(--deep);
  --alu:color-mix(in srgb,var(--ink) 78%,var(--mute));
  --shadow-100:0 1px 0 0 color-mix(in srgb,var(--ink) 55%,transparent);
  --shadow-200:0 3px 2px -1px color-mix(in srgb,var(--ink) 45%,transparent),0 1px 0 0 color-mix(in srgb,var(--ink) 35%,transparent);
  --shadow-300:0 6px 12px -4px color-mix(in srgb,var(--ink) 60%,transparent),0 1px 0 0 color-mix(in srgb,var(--ink) 35%,transparent);
  --shadow-400:0 14px 30px -8px color-mix(in srgb,var(--ink) 75%,transparent),0 2px 4px -1px color-mix(in srgb,var(--ink) 40%,transparent);
  --bevel-100:inset 0 1px 0 0 color-mix(in srgb,var(--cream) 9%,transparent),inset 0 -1px 0 0 color-mix(in srgb,var(--ink) 28%,transparent);
  --bevel-amber:inset 0 1px 0 0 color-mix(in srgb,var(--cream) 42%,transparent),inset 0 -1px 0 0 color-mix(in srgb,var(--ink) 22%,transparent);
  --inset-200:inset 0 2px 1px 0 color-mix(in srgb,var(--ink) 38%,transparent),inset 1px 0 1px 0 color-mix(in srgb,var(--ink) 18%,transparent),inset -1px 0 1px 0 color-mix(in srgb,var(--ink) 18%,transparent);
  --fella-disc:#F7F4EC; --fella-gap:#0F2E25; --fella-rim:0 0 0 0 transparent; --sh:rgba(0,0,0,.28); --sh-lift:rgba(0,0,0,.36);
  color-scheme:dark; color:var(--text);
}
[data-theme="day"] [data-theme="night"] *{--ring:0 0 0 2px var(--ring-gap),0 0 0 4px var(--cream),0 0 18px 4px color-mix(in srgb,var(--cream) 18%,transparent)}
[data-theme="day"] [data-theme="night"] .cd-pan,[data-theme="day"] [data-theme="night"] .cd-es-pan,[data-theme="day"] [data-theme="night"] .cd-on-pine{--ring-gap:var(--pine)}
[data-theme="day"] [data-theme="night"] .cd-btn.cd-btn-p{color:var(--deep);box-shadow:var(--shadow-100)}
[data-theme="day"] [data-theme="night"] .cd-pan,[data-theme="day"] [data-theme="night"] .cd-es-pan{box-shadow:var(--shadow-200),var(--bevel-100)}
[data-theme="day"] [data-theme="night"] .cd-lm{color:inherit}
[data-theme="day"] [data-theme="night"] .cd-prog>span.is-now{color:var(--amber);background:none;border-radius:0;padding:0;margin:0}
[data-theme="day"] [data-theme="night"] .cd-c.is-p{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cream) 55%,transparent)}
[data-theme="day"] [data-theme="night"] .cd-c.is-d{background:var(--cream);box-shadow:0 0 0 1px var(--cream),0 0 14px 2px color-mix(in srgb,var(--cream) 32%,transparent)}
[data-theme="day"] [data-theme="night"] .cd-wk{--band:color-mix(in srgb,var(--cream) 6%,transparent)}