/* GENERATED by tools/gen_light_css.py from css/style.css, css/drawdeck-engine.css — do not edit by hand.
   Light mode only: every rule is scoped to html[data-mode="light"] (js/mode.js sets it).
   Hand-written fixes and the mode switch's own styles live in css/light.extra.css, appended below. */

/* ---- from css/style.css ---- */
:root:where([data-mode="light"]){
  --bg:#f4f5f8;
  --bg2:#fdfefe;
  --panel:#fcfdfd;
  --panel2:#fdfefe;
  --line:rgba(15,23,42,0.132);
  --hi:#2f2b1f;
  --lo:#464c5d;
}
:root:where([data-mode="light"]){
  --amber-hi:#bc8406;
  --shadow-panel:0 12px 30px rgba(0,0,0,0.158),0 2px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .mark{
  color:#af7b13;
}
:where(html[data-mode="light"]) .widget{
  box-shadow:0 10px 30px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .hbtn:hover{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .chip.on{
  color:#bc8406;
}
:where(html[data-mode="light"]) input[type=text]{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .tile{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .tile b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .lvl .big{
  color:#bc8406;
}
:where(html[data-mode="light"]) .xpbar{
  background:rgba(15,23,42,0.165);
}
:where(html[data-mode="light"]) .x:hover{
  color:#c20000;
}
:where(html[data-mode="light"]) .acctbtn{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .kd-scrap-page{
  box-shadow:0 10px 30px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .kd-scrap-it.kd-scrap-photo.kd-scrap-f-polaroid{
  box-shadow:0 4px 14px rgba(0,0,0,0.135);
}
:where(html[data-mode="light"]) .kd-scrap-h{
  border:2px solid #e3d4bf;
}
:where(html[data-mode="light"]) .kd-scrap-menu{
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .kd-unlock-ov{
  background:rgba(10,13,24,0.42);
}
:where(html[data-mode="light"]) .kd-unlock-card{
  box-shadow:0 20px 50px rgba(0,0,0,0.225);
}
:where(html[data-mode="light"]) .kd-unlock-err{
  color:#a51d1d;
}
:where(html[data-mode="light"]) .modal{
  background:rgba(10,13,24,0.36);
}
:where(html[data-mode="light"]) .mcard{
  box-shadow:0 20px 50px rgba(0,0,0,0.225);
}
:where(html[data-mode="light"]) select{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .linechart polyline{
  stroke:#af7b13;
}
:where(html[data-mode="light"]) .linechart circle{
  fill:#bc8406;
}
:where(html[data-mode="light"]) .delta{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .delta.up{
  color:#21a121;
}
:where(html[data-mode="light"]) .delta.down{
  color:#bc8406;
}
:where(html[data-mode="light"]) .theme-swatch{
  background:rgba(0,0,0,0.09);
}
:where(html[data-mode="light"]) .theme-swatch-dot{
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.1);
}
:where(html[data-mode="light"]) .langpill button:not(.on):hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .iconbtn{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .xp{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .xp b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .subwidget{
  background:rgba(0,0,0,0.09);
}
:where(html[data-mode="light"]) .bar>div{
  background:rgba(15,23,42,0.132);
}
:where(html[data-mode="light"]) .bar b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .cal-nav{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .cal-nav:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .cal-cell:hover:not(.empty){
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .cal-cell.today{
  color:#bc8406;
}
:where(html[data-mode="light"]) .cal-cell.selected .cal-dot{
  background:#f7f1e9;
}
:where(html[data-mode="light"]) .cal-ev-row{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .cal-ev-time{
  color:#bc8406;
}
:where(html[data-mode="light"]) .note-card{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .note-card.unread .note-top b{
  color:#bc8406;
}
:where(html[data-mode="light"]) #toast.soft{
  background:#fafbfc;
  color:#152233;
}
:where(html[data-mode="light"]) #toast.good{
  background:linear-gradient(135deg,#faf9f5,#fdfefe);
  color:#3f3310;
}
:where(html[data-mode="light"]) .warn{
  color:#bc8406;
}
:where(html[data-mode="light"]) .pill{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .pill.ok{
  color:#21a121;
}
:where(html[data-mode="light"]) .pill.warn{
  color:#bc8406;
}
:where(html[data-mode="light"]) input[type=number].numin{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .famcard{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .famlv b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .famopen{
  color:#bc8406;
}
:where(html[data-mode="light"]) .hbar .track{
  background:rgba(15,23,42,0.132);
}
:where(html[data-mode="light"]) .wishrow,
:where(html[data-mode="light"]) .wishgoal{
  background:rgba(0,0,0,0.096);
}
:where(html[data-mode="light"]) .gday{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .ring .rbg{
  stroke:rgba(15,23,42,0.132);
}
:where(html[data-mode="light"]) .ring .rfg{
  stroke:#af7b13;
}
:where(html[data-mode="light"]) .ring.full .rfg{
  stroke:#21a121;
}
:where(html[data-mode="light"]) .starters li{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .starters li::before{
  color:#af7b13;
}
:where(html[data-mode="light"]) .digest{
  background:rgba(0,0,0,0.096);
}
:where(html[data-mode="light"]) .dghead b{
  color:#bc8406;
}
@media print{
:where(html[data-mode="light"]) body.print-digest .print-target,
:where(html[data-mode="light"]) body.print-digest .print-target *{
  border-color:#cccccc!important;
}
}
:where(html[data-mode="light"]) .prrep{
  background:rgba(0,0,0,0.096);
}
:where(html[data-mode="light"]) .prline b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .demotab{
  color:#bc8406;
}
:where(html[data-mode="light"]) .demopanel{
  box-shadow:0 10px 30px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .dock{
  background:rgba(244,245,248,0.78);
  box-shadow:0 12px 30px rgba(0,0,0,0.158),0 2px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .dock-item{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .dock-item:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .dock-item.active{
  color:#bc8406;
}
:where(html[data-mode="light"]) .dock-item.active .dock-ic{
  color:#bc8406;
}
:where(html[data-mode="light"]) .dock-ic{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .dock-item .badge,
:where(html[data-mode="light"]) .app-tray-item .badge{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .app-tray-tab{
  background:rgba(244,245,248,0.78);
  box-shadow:0 12px 30px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .app-tray-tab:hover{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .app-tray-backdrop{
  background:rgba(6,9,14,0.33);
}
:where(html[data-mode="light"]) .app-tray{
  box-shadow:0 -16px 40px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .app-tray-item{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .app-tray-item:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .app-tray-item.active{
  color:#bc8406;
}
:where(html[data-mode="light"]) .app-tray-item.active .dock-ic{
  color:#bc8406;
}
:where(html[data-mode="light"]) .edge-dock{
  background:rgba(244,245,248,0.78);
  box-shadow:0 12px 30px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .layout-mode-opt:hover{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .switch-row input{
  accent-color:#af7b13;
}
:where(html[data-mode="light"]) .dock-vis-row{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .nfilters .chip i{
  color:#bc8406;
}
:where(html[data-mode="light"]) .s3ring .rg-bg{
  stroke:rgba(15,23,42,0.143);
}
:where(html[data-mode="light"]) .s3ring .rg-fg{
  stroke:#af7b13;
}
:where(html[data-mode="light"]) .s3lv b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .s3almost{
  color:#bc8406;
}
:where(html[data-mode="light"]) .s3streak b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .s3p{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .s3 .col.today span{
  color:#bc8406;
}
:where(html[data-mode="light"]) .status-card{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .st-item{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .st-pill{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .lv-good .st-pill{
  color:#21a121;
}
:where(html[data-mode="light"]) .lv-watch .st-pill{
  color:#bc8406;
}
:where(html[data-mode="light"]) .lv-off .st-pill{
  color:#c21000;
}
:where(html[data-mode="light"]) .medal{
  box-shadow:0 3px 14px rgba(0,0,0,0.203),0 0 14px color-mix(in srgb,var(--m1) 55%,transparent);
}
:where(html[data-mode="light"]) .medal.t2{
  --m1:#252a33;
  --m2:#616772;
}
:where(html[data-mode="light"]) .medal .mi{
  background:radial-gradient(circle at 35% 30%,#fdfefe,#f8f8fb);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.248);
}
:where(html[data-mode="light"]) .medal::after{
  background:linear-gradient(110deg,transparent 0,rgba(15,23,42,0.77) 48%,transparent 62%);
}
:where(html[data-mode="light"]) .bc-hero{
  background:radial-gradient(520px 200px at 12% 0%,rgba(224,169,59,.22),transparent 70%),linear-gradient(180deg,rgba(15,23,42,0.055),rgba(15,23,42,0.022));
}
:where(html[data-mode="light"]) .bc-count{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bc-chip{
  background:rgba(15,23,42,0.077);
}
:where(html[data-mode="light"]) .bc-chip.t2 i,
:where(html[data-mode="light"]) .bc-shelf.t2{
  --m1:#252a33;
  --m2:#616772;
}
:where(html[data-mode="light"]) .bc-cabinet{
  border:7px solid #e1dad2;
  box-shadow:inset 0 0 0 2px rgba(107,78,44,0.45),inset 0 14px 40px rgba(0,0,0,0.203),0 12px 30px rgba(0,0,0,0.158);
  background:radial-gradient(700px 260px at 50% -10%,rgba(255,236,170,.16),transparent 70%),linear-gradient(180deg,#fbfbfc,#f3f4f8);
}
:where(html[data-mode="light"]) .bc-shelf h3{
  color:#00a4c2;
}
:where(html[data-mode="light"]) .bc-shelf h3 span{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .bc-item:hover,
:where(html[data-mode="light"]) .bc-item:focus-visible{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .bc-ledge{
  background:linear-gradient(180deg,rgba(190,225,255,.5),rgba(120,170,230,.18) 55%,rgba(0,0,0,0.15));
  box-shadow:0 6px 12px rgba(0,0,0,0.18),inset 0 1px 0 rgba(0,0,0,0.175);
}
:where(html[data-mode="light"]) .bc-prizes{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bc-prizes h3{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bc-prizes h3 span{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .bc-back{
  background:rgba(10,13,24,0.432);
}
:where(html[data-mode="light"]) .bc-card{
  box-shadow:0 20px 60px rgba(0,0,0,0.27),0 0 40px rgba(224,169,59,.25);
}
:where(html[data-mode="light"]) .bc-x:hover{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .bc-tier{
  color:#bc8406;
}
:where(html[data-mode="light"]) .cal-cell.today .cal-lunar-day{
  color:#bc8406;
}
:where(html[data-mode="light"]) .pulse-val{
  color:#bc8406;
}
:where(html[data-mode="light"]) .pulse-bar{
  background:rgba(15,23,42,0.077);
}
:where(html[data-mode="light"]) .pulse-me{
  box-shadow:0 0 0 2px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .att-day{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .att-day.ok{
  color:#1ba74e;
}
:where(html[data-mode="light"]) .att-day.late{
  color:#c29b00;
}
:where(html[data-mode="light"]) .att-day.abs{
  color:#bd0505;
}
:where(html[data-mode="light"]) .att-key.ok{
  color:#1ba74e;
}
:where(html[data-mode="light"]) .att-key.late{
  color:#c29b00;
}
:where(html[data-mode="light"]) .att-key.abs{
  color:#bd0505;
}
:where(html[data-mode="light"]) .sp-spark{
  color:#c28e00;
}
:where(html[data-mode="light"]) .sgrid .subwidget:not(#sm-stats)::before,
:where(html[data-mode="light"]) .sgrid .subwidget:not(#sm-stats)::after{
  color:#bc8406;
}
:where(html[data-mode="light"]) .sgrid .subwidget:not(#sm-stats):hover{
  box-shadow:0 10px 28px rgba(0,0,0,0.171),0 0 0 1px rgba(224,169,59,.22),0 0 24px rgba(224,169,59,.14);
}
:where(html[data-mode="light"]) .subwidget .tile:hover{
  box-shadow:0 8px 18px rgba(0,0,0,0.158),0 0 16px rgba(224,169,59,.3);
}
:where(html[data-mode="light"]) .subwidget .srow:hover b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .gday:hover::after{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .ring.full::after{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) #sm-trends .col i::after{
  background:linear-gradient(100deg,transparent 0,rgba(15,23,42,0.88) 50%,transparent 100%);
}
:where(html[data-mode="light"]) .note-card:hover{
  box-shadow:0 8px 20px rgba(0,0,0,0.158),0 0 18px rgba(224,169,59,.16);
}
:where(html[data-mode="light"]) .note-card::after{
  color:#bc8406;
}
:where(html[data-mode="light"]) .sm-tiles .tile b{
  color:#c28400;
}
:where(html[data-mode="light"]) .sm-tiles .tile > span{
  color:#b4800e;
}
:where(html[data-mode="light"]) details.join-classcode summary{
  color:var(--muted, #51515c);
}
:where(html[data-mode="light"]) .pro-on{
  color:#bc8406;
}
:where(html[data-mode="light"]) .unofficial-build{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .sb-card img{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .sb-modal{
  background:rgba(10,14,24,0.36);
}
:where(html[data-mode="light"]) .sb-mcard{
  background:var(--panel2,#f7f8fa);
}

/* ---- from css/drawdeck-engine.css ---- */
:where(html[data-mode="light"]) .dd-top,
:where(html[data-mode="light"]) .dd-bottom{
  background:rgba(15,23,42,0.039);
}
:where(html[data-mode="light"]) .dd-rail{
  background:rgba(15,23,42,0.028);
}
:where(html[data-mode="light"]) .dd-btn:hover:not(:disabled){
  background:rgba(15,23,42,0.099);
}
:where(html[data-mode="light"]) .dd-tabs{
  background:rgba(0,0,0,0.168);
}
:where(html[data-mode="light"]) .dd-tab.on{
  box-shadow:0 1px 3px rgba(0,0,0,0.135);
}
:where(html[data-mode="light"]) .dd-sw{
  border:2px solid rgba(15,23,42,0.605);
  box-shadow:0 0 0 1px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .dd-size:hover{
  background:rgba(15,23,42,0.099);
}
:where(html[data-mode="light"]) .dd-kind{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .dd-kind:hover{
  background:rgba(15,23,42,0.121);
}
:where(html[data-mode="light"]) .dd-hint{
  color:#7d848d;
}
:where(html[data-mode="light"]) .dd-unfocus{
  background:rgba(15,23,42,0.9);
  box-shadow:0 2px 8px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .dd-mi:hover{
  background:rgba(15,23,42,0.099);
}
:where(html[data-mode="light"]) .dd-mi.danger{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .dd-modal{
  background:rgba(0,0,0,0.3);
}

/* ---- css/light.extra.css (hand-written) ---- */
/* ParentDeck — hand-written part of css/light.css (tools/gen_light_css.py appends this file).
   1. Where the Light / Dark switch (js/mode.js) sits: top bar size, menu spacing.
   2. Light-mode fixes the generator can't guess, each scoped to html[data-mode="light"]. */

/* ---------- 1. where the Light / Dark switch sits (its look is css/mode.css, shared by all four apps) ---------- */
.theme-label{ margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--lo); }
#th-mode{ margin-bottom:14px; }
#mode-toggle{ --deck-bar-h:32px; --deck-bar-r:10px; }

/* ---------- 2. light-mode fixes ---------- */
/* The stoplight colours (On track / Monitor / Needs attention) are neon on dark; on a light page they'd be unreadable as
   text and harsh as borders, so Light mode uses deeper versions of the same three. Tile fills keep their soft tints. */
html[data-mode="light"]{ --st-good:#15803d; --st-watch:#a16207; --st-bad:#dc2626; }   /* where this app defines them */