/* [HARU-SKIN3] haru-skin-base.css - the skins' common parts + the Night Sky tokens (the default skin).
   Active only when <html> has class "skin-on" (+ skin-night / skin-well / skin-hanji); without it nothing here applies
   and the page is the old design. The other two skins (haru-skin-well.css, haru-skin-hanji.css) only change tokens and a
   few shapes. Source of truth: haru_skins_mockup.html (tokens, the .sc.well / .sc.hanji rules, the per-screen notes).
   Looks only: no element is removed or moved. */

/* the chooser in Settings (shown in every design, laid out the same) */
.skin-pick{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.skin-pick .skin-choice{flex:1 1 30%;min-width:0;white-space:nowrap}
.skin-sub{margin-top:8px}

/* ===== Night Sky tokens (default skin) ===== */
html.skin-on{
  --s-page:#120f33;
  --s-page-img:radial-gradient(120% 60% at 50% 0%,#2a1e6b 0%,#120f33 55%,#07081a 100%);
  --s-stars:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 9%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 64% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 52%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 8% 70%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 52% 82%,#fff 50%,transparent 51%);
  --s-glass:rgba(255,255,255,.07);--s-glass-line:rgba(255,255,255,.12);
  --s-tile:rgba(255,255,255,.06);--s-solid:#1b1740;
  --s-ink:#f3f0ff;--s-body:#ddd7f7;--s-sub:#b8b0e0;--s-dim:#a39cc9;
  --s-acc:#ffd36f;--s-on-acc:#2a1a00;--s-acc-bg:rgba(255,211,111,.14);
  --s-ok:#8ef0d0;--s-ok-bg:rgba(142,240,208,.08);--s-ok-line:rgba(142,240,208,.32);--s-on-ok:#06281e;
  --s-pri:linear-gradient(90deg,#d0386a,#6e46df);--s-pri-solid:#8f3fb0;--s-pri-ink:#fff;
  --s-hero:linear-gradient(160deg,#3a2e6e,#1a1640);
  --s-btn:transparent;--s-btn-line:rgba(255,255,255,.22);--s-btn-ink:#f3f0ff;
  --s-nav:rgba(7,8,26,.92);--s-nav-line:rgba(255,255,255,.08);
  --s-sheet:#14112e;--s-dimbg:rgba(0,0,0,.55);--s-input:rgba(255,255,255,.06);--s-input-line:rgba(255,255,255,.18);
  --s-orb:radial-gradient(circle at 35% 30%,#ffb3a0,#ff6b8b 45%,#8a5cff 100%);--s-orb-ink:#fff;--s-orb-glow:0 0 50px rgba(255,107,139,.5);--s-orb-ring:rgba(185,140,255,.45);--s-orb-line:transparent;
  --s-timer:rgba(0,0,0,.45);--s-timer-ink:#ffd36f;--s-timer-line:rgba(255,211,111,.45);--s-timer-glow:0 0 18px rgba(255,211,111,.4);
  --s-me:linear-gradient(90deg,#d0386a,#6e46df);--s-push:rgba(255,211,111,.5);
  --s-why:#8ef0d0;--s-warn:#ffd36f;--s-red:#ff9a86;
  --s-tw:#7fd39a;--s-tf:#ff8a72;--s-te:#e3b964;--s-tm:#d0d6de;--s-ta:#86a8ea;
  --s-r-card:18px;--s-r-btn:12px;--s-shadow:none;
  --s-head:inherit;
  /* the old design's own tokens, mapped */
  --bg:var(--s-page);--card:var(--s-glass);--text:var(--s-ink);--text-2:var(--s-body);--text-3:var(--s-sub);--line:var(--s-glass-line);
  --accent:var(--s-acc);--accent-bg:var(--s-acc-bg);--accent-text:var(--s-acc);--ok:var(--s-ok);--holiday:var(--s-tf);
  --check:var(--s-warn);--check-text:var(--s-warn);--check-bg:var(--s-acc-bg);
  --ink:var(--s-ink);
  color-scheme:dark;
}

/* ===== the page ===== */
/* the sky (and its still stars) is the page itself; the screens stay exactly where they are */
html.skin-on{background-color:var(--s-page);background-image:var(--s-stars),var(--s-page-img);background-attachment:fixed;background-repeat:no-repeat;background-size:100% 100%}
html.skin-on body{background:transparent;color:var(--s-ink)}
html.skin-on .cal-sticky,html.skin-on .swipe-inner,html.skin-on .fridge-row .swipe-inner,html.skin-on .receipt-row .swipe-inner,html.skin-on .shop-row .swipe-inner,html.skin-on .rc-item.is-edit .swipe-inner{background:var(--s-page)}
html.skin-on input,html.skin-on textarea,html.skin-on select{color:var(--s-ink)}
html.skin-on ::placeholder{color:var(--s-dim);opacity:1}

/* cards and rows */
html.skin-on .settings-card,html.skin-on .note-card,html.skin-on .recipe-card,html.skin-on .cards-card,html.skin-on .monthly-row,html.skin-on .player,
html.skin-on .hv-card,html.skin-on .haru-card{border-radius:var(--s-r-card);box-shadow:var(--s-shadow)}
html.skin-on .hv-card{background:var(--s-glass);border-color:var(--s-glass-line);color:var(--s-body)}
html.skin-on .hv-card h2,html.skin-on .hv-card h3{color:var(--s-acc);font-family:var(--s-head)}
html.skin-on .greeting,html.skin-on .header-title{font-family:var(--s-head)}

/* the bottom tabs */
html.skin-on .tabbar{background:var(--s-nav);border-top-color:var(--s-nav-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.skin-on .tab{color:var(--s-dim)}
html.skin-on .tab.is-active{color:var(--s-acc);font-weight:700}

/* buttons: primary, ordinary, chosen */
html.skin-on .settings-btn,html.skin-on .timer-key,html.skin-on .timer-round,html.skin-on .receipt-btn,html.skin-on .font-choice,html.skin-on .remind-choice,html.skin-on .cards-again,html.skin-on .fridge-done{border-radius:var(--s-r-btn)}
html.skin-on .settings-btn.is-primary,html.skin-on .crop-send,html.skin-on .fadd-submit,html.skin-on .fridge-go,html.skin-on .monthly-submit,html.skin-on .pkey-main,html.skin-on .rc-ok,html.skin-on .rc-save,
html.skin-on .shop-submit,html.skin-on .token-submit,html.skin-on .timer-start,html.skin-on .timer-hush,html.skin-on .player-done,html.skin-on .pmini-play,html.skin-on .rc-edit.is-on{
  background:var(--s-pri);background-color:var(--s-pri-solid);color:var(--s-pri-ink);border-color:transparent}
html.skin-on .crop-send:disabled,html.skin-on .rc-save:disabled,html.skin-on .timer-start:disabled,html.skin-on .token-submit:disabled,html.skin-on .fridge-go:disabled{background:var(--s-tile);color:var(--s-dim)}
html.skin-on .font-choice.is-selected,html.skin-on .remind-choice.is-selected,html.skin-on .timer-quick.is-selected,html.skin-on .cal-day.is-selected .cal-num,html.skin-on .picker-item.is-selected .picker-label,
html.skin-on .shop-row.is-checked .shop-check{background:var(--s-acc);border-color:var(--s-acc);color:var(--s-on-acc)}
html.skin-on .cal-day.is-today .cal-num,html.skin-on .picker-item.is-current .picker-label{border-color:var(--s-acc)}
html.skin-on .undo-bar{background:var(--s-sheet);color:var(--s-ink);border:1px solid var(--s-glass-line)}
html.skin-on .undo-button{color:var(--s-acc)}
html.skin-on .cal-monthly,html.skin-on .monthly-when{color:var(--s-ok)}
html.skin-on .cal-tax{color:var(--s-ta)}
html.skin-on .token-error{color:var(--s-red)}
html.skin-on .timer-track{stroke:var(--s-glass-line)}

/* speak: the mic keeps its place and size; only its look is the orb */
html.skin-on .mic-btn{background:var(--s-orb);color:var(--s-orb-ink);box-shadow:var(--s-orb-glow);border:2px solid var(--s-orb-line)}
html.skin-on .mic-btn.is-listening{background:var(--s-ok);color:var(--s-on-ok)}
html.skin-on .mic-btn.is-processing,html.skin-on .mic-btn.is-disabled{background:var(--s-tile);color:var(--s-dim);box-shadow:none}
html.skin-on .heard-card{background:var(--s-ok-bg);border:1px solid var(--s-ok-line);border-radius:var(--s-r-card)}
html.skin-on .heard-label{color:var(--s-ok)}
html.skin-on .heard-text{color:var(--s-ink)}
html.skin-on .reply .ti,html.skin-on .todo-row.is-done .ti,html.skin-on .rc-saved{color:var(--s-ok)}

/* cooking (the old kitchen screen and the hands-free timer) */
html.skin-on .cooking-now,html.skin-on .step-row.is-reading,html.skin-on .step-row.is-reading>.swipe-inner,html.skin-on .cook-hint{background:var(--s-ok-bg);border:1px solid var(--s-ok-line);border-radius:14px}
html.skin-on .cooking-now-text,html.skin-on .cooking-now-check,html.skin-on .cook-hint{color:var(--s-ink)}
html.skin-on .kitchen-timer,html.skin-on .hf-digits{background:var(--s-timer);color:var(--s-timer-ink);border:1.5px solid var(--s-timer-line);text-shadow:var(--s-timer-glow);border-radius:var(--s-r-card)}
html.skin-on .hf-digits.idle{color:var(--s-sub);text-shadow:none}
html.skin-on .hf-digits.done{color:var(--s-tf)}
html.skin-on .hf-strip button{background:var(--s-timer);color:var(--s-timer-ink);border:1px solid var(--s-timer-line)}
html.skin-on .hf-strip button.done{color:var(--s-tf)}
html.skin-on .kitchen-spot-ring{border-color:var(--s-acc)}
html.skin-on .is-cooking-on .cooking-heat{fill:var(--s-acc)}

/* fridge / receipts: days left, money in fixed-width figures */
html.skin-on .receipt-sum{background:var(--s-acc-bg);border-radius:var(--s-r-card)}
html.skin-on .rc-item-money,html.skin-on .receipt-sum-money,html.skin-on .rc-amount{font-variant-numeric:tabular-nums}
html.skin-on .rc-note,html.skin-on .rc-item.is-check,html.skin-on .rc-field.is-empty{background:var(--s-acc-bg)}

/* popups / sheets: never a white sheet on the night sky */
html.skin-on .hv-sheet,html.skin-on .hv-rcs{background:var(--s-dimbg)}
html.skin-on .hv-sheet-in,html.skin-on .hv-rcin,html.skin-on .hb,html.skin-on .hb-h,html.skin-on .hb-b,html.skin-on .hb-f,html.skin-on #hm-done{background:var(--s-sheet);color:var(--s-ink);border-color:var(--s-glass-line)}
html.skin-on .hv-sheet-in h2,html.skin-on .hv-sheet-in h3,html.skin-on .hb-h,html.skin-on .hb-c{color:var(--s-acc)}
html.skin-on .hb-l,html.skin-on .hb-n{color:var(--s-sub)}
html.skin-on .hb select,html.skin-on .hb input[type=text],html.skin-on .hv-sheet-in select,html.skin-on .hv-sheet-in input{background:var(--s-input);border-color:var(--s-input-line);color:var(--s-ink)}
html.skin-on .hb select option,html.skin-on .hv-sheet-in select option{background:var(--s-sheet);color:var(--s-ink)}
html.skin-on .hb select[disabled]{background-color:var(--s-tile);color:var(--s-dim)}
html.skin-on .hb-seg{border-color:var(--s-input-line);border-radius:var(--s-r-btn)}
html.skin-on .hb-seg button,html.skin-on .hv-seg button,html.skin-on .hv-langs button,html.skin-on .hv-rcg button,html.skin-on .hv-rc{background:var(--s-tile);color:var(--s-body);border-color:var(--s-glass-line)}
html.skin-on .hb-seg button.on,html.skin-on .hv-seg button.on,html.skin-on .hv-langs button.on,html.skin-on .hv-rcg button.on,html.skin-on .hv-topics button.on{background:var(--s-acc);color:var(--s-on-acc);border-color:var(--s-acc)}
html.skin-on .hb-x{background:var(--s-tile);color:var(--s-ink)}
html.skin-on .hb-go,html.skin-on .hf-keys .hf-go,html.skin-on #hf-box .hf-go{background:var(--s-pri);background-color:var(--s-pri-solid);color:var(--s-pri-ink)}
html.skin-on .hb-acc{background:var(--s-tile);border-color:var(--s-glass-line);color:var(--s-acc)}
html.skin-on .hb-err{color:var(--s-red)}
html.skin-on .hb-toast{background:var(--s-sheet);color:var(--s-ink);border:1px solid var(--s-glass-line)}
html.skin-on .hv-chk{color:var(--s-ink)!important}

/* fortune: pillars in see-through cells, the day master's cell framed in the accent */
html.skin-on .hv-pl,html.skin-on .hv-rl,html.skin-on .hv-ig{background:var(--s-tile);border:1px solid var(--s-glass-line)}
html.skin-on .hv-pl.me{background:var(--s-acc-bg);box-shadow:inset 0 0 0 1.5px var(--s-acc),0 0 14px rgba(255,211,111,.2)}
html.skin-on .hv-stars{color:var(--s-acc)}
html.skin-on .hv-tip{border-top-color:var(--s-glass-line)}
html.skin-on .hv-why{color:var(--s-why)}
html.skin-on .hv-src,html.skin-on .hv-tags{color:var(--s-sub)}
html.skin-on .hv-safe{background:var(--s-acc-bg);border-color:var(--s-push);color:var(--s-ink)}
html.skin-on .hv-fban{background:var(--s-acc-bg)}
html.skin-on .hv-frow{border-top-color:var(--s-glass-line)}
html.skin-on .hv-fchip{background:var(--s-tile);border-color:var(--s-glass-line);color:var(--s-body)}
html.skin-on .hv-b1{background:var(--s-pri);background-color:var(--s-pri-solid);color:var(--s-pri-ink);border-color:transparent}
html.skin-on .hv-b1.on{background:var(--s-tile);color:var(--s-ink);border-color:var(--s-glass-line)}
html.skin-on .hv-b2{background:var(--s-tile);color:var(--s-ink);border-color:var(--s-glass-line)}
html.skin-on .hv-b2.on{background:var(--s-acc);color:var(--s-on-acc);border-color:var(--s-acc)}

/* counsel: bubbles */
html.skin-on .hv-m.u{background:var(--s-me);background-color:var(--s-pri-solid);color:#fff}
html.skin-on .hv-m.a{background:var(--s-glass);color:var(--s-body);border-color:var(--s-glass-line)}
html.skin-on .hv-m.a .who,html.skin-on .hv-m.a .who span{color:var(--s-acc)}
html.skin-on .hv-inp{background:var(--s-nav);border-top-color:var(--s-nav-line)}
html.skin-on .hv-inp input{background:var(--s-input);border-color:var(--s-input-line);color:var(--s-ink)}
html.skin-on #hv-send{background:var(--s-pri);background-color:var(--s-pri-solid);color:#fff}
html.skin-on #hv-hf{background:var(--s-tile);color:var(--s-ink)}
html.skin-on #hv-hf.on{background:var(--s-acc);color:var(--s-on-acc)}

/* the proactive messages, the family table, "made it", the calendar of meals */
html.skin-on #hp-box .hp-m{border-left-color:var(--s-acc)}
html.skin-on #hp-box .hp-m.new{background:var(--s-acc-bg)}
html.skin-on #hp-box .hp-acts button,html.skin-on .hm-used button{background:var(--s-tile);border-color:var(--s-glass-line);color:var(--s-ink)}
html.skin-on #hp-box .hp-reply,html.skin-on #hp-box .hp-set{color:var(--s-sub)}
html.skin-on #hp-box .hp-panel{background:var(--s-tile);color:var(--s-body)}
html.skin-on #hf-box .hf-head,html.skin-on #hf-box .hf-panel,html.skin-on #hf-box .hf-tb{background:var(--s-glass);border-color:var(--s-glass-line);color:var(--s-ink);border-radius:var(--s-r-card)}
html.skin-on #hf-box .hf-row,html.skin-on #hf-box .hf-d{border-color:var(--s-glass-line)}
html.skin-on #hf-box .hf-row small,html.skin-on #hf-box .hf-note,html.skin-on #hf-box label,html.skin-on #hf-box .hf-line{color:var(--s-sub)}
html.skin-on #hf-box .hf-d .c{color:var(--s-sub)}
html.skin-on #hf-box .hf-d p,html.skin-on #hf-box .hf-fr,html.skin-on #hf-box .hf-ck{color:var(--s-body)}
html.skin-on #hf-box .hf-d b{color:var(--s-ink)}
html.skin-on #hf-box .hf-d .mild{color:var(--s-ok)}
html.skin-on #hf-box button.hf-s,html.skin-on #hf-box .hf-add,html.skin-on #hf-box .hf-srv button{background:var(--s-tile);border-color:var(--s-glass-line);color:var(--s-ink)}
html.skin-on #hf-box input[type=text],html.skin-on #hf-box select{background:var(--s-input);border-color:var(--s-input-line);color:var(--s-ink)}
html.skin-on .hf-link{background:var(--s-acc-bg);color:var(--s-ink)}
html.skin-on .hm-btn{background:transparent;border-color:var(--s-ok-line);color:var(--s-ok);border-radius:999px}
html.skin-on .hm-btn.on{background:var(--s-ok);border-color:var(--s-ok);color:var(--s-on-ok)}
html.skin-on .hm-used{color:var(--s-body)}
html.skin-on #hm-cal{background:var(--s-glass);border:1px solid var(--s-glass-line);box-shadow:none;color:var(--s-ink);border-radius:var(--s-r-card)}
html.skin-on #hm-cal .hd button,html.skin-on #hm-done .x{background:var(--s-tile);color:var(--s-ink)}
html.skin-on #hm-cal .g .w,html.skin-on #hm-cal .em0{color:var(--s-sub)}
html.skin-on #hm-cal .g .d{background:var(--s-tile);color:var(--s-body)}
html.skin-on #hm-cal .g .d.has{background:var(--s-ok-bg)}
html.skin-on #hm-cal .g .d.tod{outline-color:var(--s-acc)}
html.skin-on #hm-cal .g .d.sel{outline-color:var(--s-ok)}
html.skin-on #hm-cal .ls{color:var(--s-body)}

/* the day card (haru-extra) and the access-code box */
html.skin-on .haru-card{background:var(--s-glass);border-color:var(--s-glass-line);color:var(--s-body)}
html.skin-on .haru-card .hc-ttl,html.skin-on .haru-card .hc-gbody{color:var(--s-ink)}
html.skin-on .haru-card .hc-big{color:var(--s-tf)}
html.skin-on .haru-card .hc-season{color:var(--s-tw)}
html.skin-on .haru-card .hc-star{color:var(--s-acc)}
html.skin-on .haru-card button{color:var(--s-acc)}
html.skin-on .haru-bl-k,html.skin-on .haru-code-h{color:var(--s-sub)}
html.skin-on .haru-bl-v{color:var(--s-ink)}
html.skin-on .haru-code{border-top-color:var(--s-glass-line)}
html.skin-on .haru-code-v{color:var(--s-acc)}

/* haru-v2 / haru-cn screen text (their own greys and tiles) */
html.skin-on .hv-date,html.skin-on .hv-sub,html.skin-on .hv-pl .lb,html.skin-on .hv-pl .el,html.skin-on .hv-rl .k small,html.skin-on .hv-note,html.skin-on .hv-writing,
html.skin-on .hv-foot,html.skin-on .hv-status,html.skin-on .hv-m.a .who,html.skin-on .hv-card h2 .hz,html.skin-on .hv-sheet label,html.skin-on .hv-mem summary,html.skin-on .hv-mem summary span{color:var(--s-sub)}
html.skin-on .hv-top h1{color:var(--s-ink);font-family:var(--s-head)}
html.skin-on .hv-p,html.skin-on .hv-rl .v,html.skin-on .hv-steps,html.skin-on .hv-ig p,html.skin-on .hv-ar{color:var(--s-body)}
html.skin-on .hv-ig .sw{color:var(--s-warn)}
html.skin-on .hv-hint{color:var(--s-red)}
html.skin-on .hv-ar,html.skin-on .hv-mc{background:var(--s-tile);border:1px solid var(--s-glass-line);color:var(--s-ink)}
html.skin-on .hv-mc b{color:var(--s-ink)}
html.skin-on .hv-topics button{background:var(--s-tile);color:var(--s-body);border:1px solid var(--s-glass-line)}
html.skin-on .hv-hero{background:var(--s-hero)}
html.skin-on .hv-hero .badge{background:var(--s-solid);color:var(--s-acc);border:1px solid var(--s-glass-line)}
html.skin-on .hv-go,html.skin-on .hv-save,html.skin-on .haru-card .hc-btn,html.skin-on .haru-go{background:var(--s-pri);background-color:var(--s-pri-solid);color:var(--s-pri-ink);border-radius:var(--s-r-btn)}
html.skin-on .hv-ghost{color:var(--s-ink);border-color:var(--s-glass-line)}
html.skin-on .hv-x,html.skin-on .hv-srv button,html.skin-on .haru-x,html.skin-on .haru-code-b,html.skin-on .haru-out,html.skin-on .haru-me{background:var(--s-tile);color:var(--s-ink);border:1px solid var(--s-glass-line)}
html.skin-on .hv-btns button{border-color:var(--s-glass-line)}
html.skin-on .hv-btns .hv-b1{border-color:transparent}
html.skin-on .hv-mini button{background:var(--s-acc);color:var(--s-on-acc)}
html.skin-on .hf-chip.on{background:var(--s-acc);color:var(--s-on-acc)}
/* element pills: the old white text is too faint on the light element colours (wood, fire, earth, metal) */
html.skin-on .hv-pill[style*="#3f8f58"],html.skin-on .hv-pill[style*="#d4513a"],html.skin-on .hv-pill[style*="#b8862f"],html.skin-on .hv-pill[style*="#8c96a3"]{color:#14110c}
/* the haru-extra full sheet and its rows */
html.skin-on .haru-sheet,html.skin-on .haru-sheet-in,html.skin-on .haru-sheet-b{background:var(--s-sheet);color:var(--s-ink)}
html.skin-on .haru-bl{border-color:var(--s-glass-line)}
html.skin-on .haru-sheet-in label{color:var(--s-sub)}
html.skin-on .haru-sheet-in label.haru-row{color:var(--s-ink)}
html.skin-on .haru-sheet-in input[type=time],html.skin-on .haru-sheet-in select,html.skin-on .haru-code-r input{background:var(--s-input);border-color:var(--s-input-line);color:var(--s-ink)}
html.skin-on .haru-card{border-color:var(--s-glass-line)}
html.skin-on .haru-card .hc-head{color:var(--s-sub)}
html.skin-on .haru-card .hc-pill{border-color:var(--s-glass-line)}
html.skin-on .haru-toast{background:var(--s-sheet);color:var(--s-ink);border:1px solid var(--s-glass-line)}
/* the "my own AI" card in Settings (its look is written inline, so these need !important) */
html.skin-on #aik-card{background:var(--s-glass)!important;border-color:var(--s-glass-line)!important;color:var(--s-ink)!important;border-radius:var(--s-r-card)!important}
html.skin-on #aik-card p,html.skin-on #aik-card label,html.skin-on #aik-msg{color:var(--s-sub)!important}
html.skin-on #aik-card select,html.skin-on #aik-card input{background:var(--s-input)!important;color:var(--s-ink)!important;border-color:var(--s-input-line)!important}
html.skin-on #aik-save{background:var(--s-pri-solid)!important;color:var(--s-pri-ink)!important}
html.skin-on #aik-test{background:var(--s-tile)!important;color:var(--s-ink)!important;border-color:var(--s-glass-line)!important}
html.skin-on #aik-off{background:var(--s-tile)!important;color:var(--s-red)!important;border-color:var(--s-glass-line)!important}

html.skin-on #aik-state[style*="123, 111, 96"],html.skin-on #aik-state[style*="#7b6f60"]{color:var(--s-sub)!important}
html.skin-on #aik-state[style*="47, 122, 58"],html.skin-on #aik-state[style*="#2f7a3a"]{color:var(--s-ok)!important}
html.skin-on .hv-bar em{color:var(--s-sub)}
/* the unread badge: a deeper red so its white number is readable */
html.skin-on .hp-badge{background:#c62f37}

/* five elements written inline by the fortune screens: the same five, readable on this skin */
html.skin-on [style*="color:#3f8f58"]{color:var(--s-tw)!important}
html.skin-on [style*="color:#d4513a"]{color:var(--s-tf)!important}
html.skin-on [style*="color:#a87a24"],html.skin-on [style*="color:#b8862f"]{color:var(--s-te)!important}
html.skin-on [style*="color:#6c7684"],html.skin-on [style*="color:#8c96a3"]{color:var(--s-tm)!important}
html.skin-on [style*="color:#2c4f86"]{color:var(--s-ta)!important}

/* five elements: text one step brighter on dark (lighter skins set darker ones) */
html.skin-on .tW{color:var(--s-tw)}html.skin-on .tF{color:var(--s-tf)}html.skin-on .tE{color:var(--s-te)}html.skin-on .tM{color:var(--s-tm)}html.skin-on .tA{color:var(--s-ta)}

@media (prefers-reduced-motion:reduce){html.skin-on .mic-btn{animation:none}}