/* HelloBusy day / night theme — Juno, 13 Oct 2026.
 *
 * One file, three places: dash.hellobusy.app serves it at /theme.css (app.py), hellobusy.app
 * inlines it (site_build.py) and gethellobusy.com inlines it (/var/www/atlas/index.html).
 * Day is moodboard A "Daylight"; night is moodboard B "Night shift"
 * (/root/clood/telegram/outbox/juno/hellobusy/moodboard-v2/). Amber is the only saturated
 * colour and is used only where the owner acts: primary buttons, approvals, badges, focus.
 *
 * The page carries html[data-theme="day"|"night"], set before first paint by the inline
 * script in hbtheme.py (stored choice, else the device setting). With no attribute the
 * original dark look stays, which is how todo.savl.xyz is left exactly as it was.
 *
 * Fonts are self-hosted at /fonts/ (SIL Open Font License 1.1, licence texts beside them):
 *   day   = Fraunces (display) + Schibsted Grotesk (UI) + DM Mono
 *   night = Bricolage Grotesque (display) + Hanken Grotesk (UI) + DM Mono
 * Sizes and line-heights never change between modes, only the family, so nothing jumps. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/fraunces-latin-full-normal.woff2) format("woff2-variations"),url(/fonts/fraunces-latin-full-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/fonts/fraunces-latin-full-italic.woff2) format("woff2-variations"),url(/fonts/fraunces-latin-full-italic.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:italic;font-weight:400 900;font-display:swap;
  src:url(/fonts/schibsted-grotesk-latin-wght-italic.woff2) format("woff2-variations"),url(/fonts/schibsted-grotesk-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2-variations"),url(/fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(/fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2-variations"),url(/fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2")}

/* ── Day: "Daylight". Morning wall, Workboot ink, Bottle green anchor, Hi-vis amber ── */
html[data-theme="day"]{
  color-scheme:light;
  /* the React app (Tailwind theme names) */
  --color-bg:#FBF2D9;--color-panel:#F4E9C8;--color-card:#FFFBEF;--color-hover:#EFE2BF;
  --color-line:#E2D5B3;--color-line2:#CBBD95;--color-text:#231F1A;--color-dim:#625B4F;--color-faint:#6B6355;
  --color-accent:#FFB01F;--color-on-accent:#231F1A;--color-accent2:#1F4D3A;
  --color-good:#1B6B43;--color-warn:#7A4F00;--color-bad:#B3261E;
  --color-clarice:#5E35B5;--color-harold:#2856B3;--color-iris:#1B6B43;
  --glow:rgba(255,176,31,.35);
  /* the server-rendered pages and the sites */
  --bg:#FBF2D9;--bg2:#F4E9C8;--card:#FFFBEF;--card2:#F4E9C8;--line:#E2D5B3;--line2:#CBBD95;
  --text:#231F1A;--dim:#625B4F;--faint:#6B6355;--accent:#FFB01F;--on-accent:#231F1A;--accent2:#1F4D3A;
  --link:#1F4D3A;--good:#1B6B43;--warn:#7A4F00;--bad:#B3261E;--clarice:#5E35B5;--harold:#2856B3;--iris:#1B6B43;
  --good-tint:rgba(27,107,67,.12);--good-line:rgba(27,107,67,.35);
  --bad-tint:rgba(179,38,30,.10);--bad-line:rgba(179,38,30,.35);
  --warn-tint:rgba(255,176,31,.18);--warn-line:rgba(255,176,31,.6);--warn-text:#7A4F00;
  --overlay:rgba(35,31,26,.45);--selection:rgba(255,176,31,.45);--shadow:0 20px 50px -24px rgba(35,31,26,.35);
  --lift:rgba(255,255,255,.55);
  /* type */
  --font-sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display-weight:700;--display-settings:"SOFT" 100,"WONK" 1;--display-settings-big:"opsz" 36,"SOFT" 100,"WONK" 1;
  --display-track:-.01em;--accent-word-style:italic;--accent-word-weight:500;
}

/* ── Night: "Night shift". Desk warm black, Porcelain text, Lamp amber, Moss for calm ── */
html[data-theme="night"]{
  color-scheme:dark;
  --color-bg:#15130F;--color-panel:#1A1813;--color-card:#1E1B16;--color-hover:#2A2620;
  --color-line:#3C3730;--color-line2:#4A443B;--color-text:#EDE6D6;--color-dim:#B5AB98;--color-faint:#9A9283;
  --color-accent:#F2B84B;--color-on-accent:#231F1A;--color-accent2:#8FC9A3;
  --color-good:#8FC9A3;--color-warn:#F2B84B;--color-bad:#F08A7A;
  --color-clarice:#C5A4FF;--color-harold:#7FB0FF;--color-iris:#8FC9A3;
  --glow:rgba(242,184,75,.28);
  --bg:#15130F;--bg2:#1A1813;--card:#1E1B16;--card2:#2A2620;--line:#3C3730;--line2:#4A443B;
  --text:#EDE6D6;--dim:#B5AB98;--faint:#9A9283;--accent:#F2B84B;--on-accent:#231F1A;--accent2:#8FC9A3;
  --link:#F2B84B;--good:#8FC9A3;--warn:#F2B84B;--bad:#F08A7A;--clarice:#C5A4FF;--harold:#7FB0FF;--iris:#8FC9A3;
  --good-tint:rgba(143,201,163,.12);--good-line:rgba(143,201,163,.35);
  --bad-tint:rgba(240,138,122,.12);--bad-line:rgba(240,138,122,.35);
  --warn-tint:rgba(242,184,75,.12);--warn-line:rgba(242,184,75,.4);--warn-text:#F2B84B;
  --overlay:rgba(5,4,3,.66);--selection:rgba(242,184,75,.4);--shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --lift:rgba(242,184,75,.06);
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display-weight:700;--display-settings:normal;--display-settings-big:"opsz" 96;
  --display-track:-.02em;--accent-word-style:normal;--accent-word-weight:300;
}

/* ── Roles ── */
html[data-theme]{font-family:var(--font-sans)}
html[data-theme] body{font-family:var(--font-sans);background-image:none}
html[data-theme] ::selection{background:var(--selection)}
html[data-theme] *{scrollbar-color:var(--line2) transparent}

/* Display type: page titles, big numbers, the headline on every page. Not the small
   uppercase labels (Advanced's header, section names), which stay in the UI face. */
html[data-theme] h1:not(.uppercase),html[data-theme] .font-display,html[data-theme] .display,
html[data-theme] .text-3xl.tabular-nums,html[data-theme] .text-2xl.font-semibold,html[data-theme] .text-lg.font-semibold,
html[data-theme] .price,html[data-theme] .stat .n,html[data-theme] .sheetbox h2,html[data-theme] .card>h2,
html[data-theme] .plan h3,html[data-theme] .member h3,html[data-theme] .ctl h3,html[data-theme] .thanks h3,
html[data-theme] main h2,html[data-theme] .final h2,html[data-theme] .problem h2{
  font-family:var(--font-display);font-weight:var(--display-weight);
  font-variation-settings:var(--display-settings);letter-spacing:var(--display-track)}
html[data-theme] h1:not(.uppercase):not(.text-base),html[data-theme] .final h2,html[data-theme] .problem h2,
html[data-theme] .stat .n,html[data-theme] .plan .price{font-variation-settings:var(--display-settings-big)}
/* The accent word in a headline: Fraunces italic by day, a light Bricolage by night. */
html[data-theme] .serif{font-family:var(--font-display);font-style:var(--accent-word-style);
  font-weight:var(--accent-word-weight);font-variation-settings:var(--display-settings-big)}
html[data-theme] .grad{background:none;-webkit-background-clip:unset;background-clip:unset;color:var(--accent2)}
/* Times, codes, counts: the log voice. */
html[data-theme] .font-mono,html[data-theme] .code-in,html[data-theme] kbd,html[data-theme] .ev .t,html[data-theme] .time,
html[data-theme] .w-14.tabular-nums,html[data-theme] .w-20.tabular-nums,html[data-theme] .text-xs.tabular-nums{
  font-family:var(--font-mono);letter-spacing:0}

/* ── Fixes for colours the React bundle hard-codes (todo.savl.xyz keeps them as they were) ── */
html[data-theme] .hover\:border-\[\#3a3a3e\]:hover,html[data-theme] .hover\:border-\[\#323845\]:hover{border-color:var(--line2)}
html[data-theme] .bg-\[\#2a1416\]{background-color:var(--bad-tint)}
html[data-theme] .text-\[\#ffb4ae\]{color:var(--bad)}
html[data-theme="day"] .text-accent{color:var(--link)}         /* amber is a fill, never small text on cream */
html[data-theme] input[type=checkbox]{accent-color:var(--accent)}
html[data-theme] .bg-black\/60,html[data-theme] .bg-black\/50{background-color:var(--overlay)}
html[data-theme] .shadow-2xl,html[data-theme] .shadow-xl,html[data-theme] .shadow-lg{box-shadow:var(--shadow)}
html[data-theme="day"] .text-\[\#0b0b0b\]{color:#231F1A}
/* An unheard call's caller name was literally white: by day that is invisible on cream. */
html[data-theme] .text-white{color:var(--text)}
html[data-theme] .border-white{border-color:var(--text)}

/* ── Server pages and sites: the bits their CSS wrote as fixed colours ── */
html[data-theme] .logo i{background:var(--text);color:var(--bg)}
html[data-theme] .primary,html[data-theme] .btn.primary,html[data-theme] .btn-primary,html[data-theme] .notif .act span.go,html[data-theme] .ev .tap{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:0 10px 32px -14px var(--glow)}
html[data-theme] .btn-primary:hover{box-shadow:0 16px 40px -14px var(--glow)}
html[data-theme] .primary.danger{background:var(--bad);color:#FFF4F1;border-color:var(--bad)}
html[data-theme] .msg.err,html[data-theme] .pill.bad{background:var(--bad-tint);border-color:var(--bad-line);color:var(--bad)}
html[data-theme] .msg.ok,html[data-theme] .pill.good,html[data-theme] .tag{background:var(--good-tint);border-color:var(--good-line);color:var(--good)}
html[data-theme] .warn,html[data-theme] .banner,html[data-theme] .subnow.amber,html[data-theme] .tokover{
  background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn-text)}
html[data-theme] .subnow.amber b,html[data-theme] .banner b,html[data-theme] em.todo{color:var(--warn-text)}
html[data-theme] .subnow.red{background:var(--bad-tint);border-color:var(--bad-line)}
html[data-theme] .state.bad{background:var(--bad-tint);border-color:var(--bad-line)}
html[data-theme] .tok .meter.warn i{background:var(--accent)}
html[data-theme] .danger{border-color:var(--bad-line)}
html[data-theme] .ghost{border-color:var(--line2);color:var(--text)}
/* The "fix payment" strip: the owner has to act, so it is amber. */
html[data-theme] #hb-bill{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-family:var(--font-sans)}
html[data-theme] #hb-bill a{background:var(--text);color:var(--bg)}
html[data-theme] .sheet{background:var(--overlay)}
html[data-theme] .toggle input[type=checkbox]{accent-color:var(--accent)}
html[data-theme] input:focus,html[data-theme] .lead-form input:focus,html[data-theme] .lead-form select:focus,html[data-theme] .lead-form textarea:focus{border-color:var(--accent)}
html[data-theme] .eyebrow{color:var(--accent2)}
html[data-theme] .ctl .ic{background:var(--warn-tint);color:var(--accent2)}
html[data-theme] .plan.hot{background:var(--card);border-color:var(--accent);box-shadow:0 30px 80px -30px var(--glow)}
html[data-theme] .plan.hot .tag{background:var(--accent);color:var(--on-accent)}
html[data-theme] .final .box{background:var(--bg2)}
html[data-theme] .contact .who{background:var(--card2)}
html[data-theme] .lead-form .err{color:var(--bad)}
html[data-theme] .thanks{border-color:var(--good-line)}
html[data-theme] .thanks .ok{background:var(--good-tint)}
html[data-theme] .glow.a,html[data-theme] .glow.b{display:none}
html[data-theme] .grid-bg{opacity:.3}
html[data-theme] nav.scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent)}
html[data-theme] .pill{background:var(--card)}
html[data-theme] .pill b{background:var(--good-tint);color:var(--good)}
html[data-theme] .bub.user{background:var(--card2);border-color:var(--line2)}
html[data-theme] .bub.user:before{color:var(--accent2)}
html[data-theme] .notif{background:var(--card);border-color:var(--line2)}
html[data-theme] .marquee span:after{color:var(--accent)}
html[data-theme] .tl:before{background:linear-gradient(var(--accent),var(--line) 70%)}
html[data-theme] .ev:before{border-color:var(--accent)}
html[data-theme] .ev .t{color:var(--accent2)}
html[data-theme] .member{background:var(--card)}
html[data-theme="night"] .av{color:#231F1A}
html[data-theme="day"] .av{color:#FBF2D9}        /* the staff colours are deep by day, so the letter goes light */
html[data-theme] .stat .n[style*="font-size:15px"]{font-family:var(--font-sans);font-variation-settings:normal;letter-spacing:.08em}
html[data-theme="day"] .screen{background:#15130F}  /* the phone mock stays a lit screen at night, in both modes */
html[data-theme="day"] .phone .bub.ai,html[data-theme="day"] .phone .notif{background:#2A2620;border-color:#3C3730;color:#EDE6D6}
html[data-theme="day"] .phone .bub.user{background:#34302A;border-color:#4A443B;color:#EDE6D6}
html[data-theme="day"] .phone .notif .act span{background:#34302A;border-color:#4A443B;color:#EDE6D6}
html[data-theme="day"] .phone .notif p,html[data-theme="day"] .phone .ph-head small,html[data-theme="day"] .phone .notif .top{color:#B5AB98}
html[data-theme="day"] .phone .time,html[data-theme="day"] .phone .ph-head b,html[data-theme="day"] .phone .notif b{color:#EDE6D6}
html[data-theme="day"] .phone .ph-head{border-color:#3C3730}
html[data-theme="day"] .phone .bub.ai:before{color:#C5A4FF}
html[data-theme="day"] .phone .live{color:#8FC9A3}
html[data-theme="day"] .phone .live i{background:#8FC9A3}

/* ── The sun / moon switch (sites and server pages; the React app draws its own) ── */
.hb-theme{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--line2,#34343a);
  background:none;color:var(--dim,#a1a1a8);cursor:pointer;padding:0;flex:none}
.hb-theme:hover{color:var(--text,#f2f2f3);background:var(--card,#141416)}
.hb-theme svg{width:16px;height:16px}
.hb-theme .sun,html[data-theme="day"] .hb-theme .moon{display:none}
html[data-theme="day"] .hb-theme .sun{display:block}
.hb-seg{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px;margin-top:14px}
.hb-seg button{height:34px;padding:0 14px;border-radius:999px;border:0;background:none;color:var(--dim);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.hb-seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}