/* GENERATED by tools/gen_light_css.py from css/style.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;
  --panel:#fcfdfd;
  --panel2:#fdfefe;
  --line:rgba(15,23,42,0.132);
  --hi:#2f2b1f;
  --lo:#464c5d;
}
:where(html[data-mode="light"]) body{
  background:radial-gradient(1200px 700px at 20% 0%,#fdfefe 0%,var(--bg) 60%);
}
: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],
:where(html[data-mode="light"]) input[type=number]{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .clock-face{
  box-shadow:inset 0 0 0 4px rgba(220,215,201,0.45);
}
:where(html[data-mode="light"]) .clock-hand{
  background:#f7f8f8;
}
:where(html[data-mode="light"]) .clock-dot{
  background:#f7f8f8;
}
:where(html[data-mode="light"]) .tm-time.run{
  color:#bc8406;
}
:where(html[data-mode="light"]) .x:hover{
  color:#c20000;
}
:where(html[data-mode="light"]) .stat b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .gtile{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .idiom h3{
  color:#bc8406;
}
: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"]) .xp em{
  color:#bc8406;
}
:where(html[data-mode="light"]) .xpbar{
  background:rgba(15,23,42,0.165);
}
:where(html[data-mode="light"]) .lvl .big{
  color:#bc8406;
}
: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"]) .bar>div{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) textarea{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .icon-pill{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .swatch-pop{
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
: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"]) .widget.is-pinned{
  box-shadow:0 10px 30px rgba(0,0,0,0.158),0 0 0 1px rgba(224,169,59,.55);
}
:where(html[data-mode="light"]) .doc-stage{
  background:#fdfdfd;
}
:where(html[data-mode="light"]) .doc-toolbar{
  background:rgba(244,245,248,0.97);
}
:where(html[data-mode="light"]) .doc-hint{
  color:#bc8406;
}
:where(html[data-mode="light"]) .doc-handle{
  background:rgba(244,245,248,0.92);
}
:where(html[data-mode="light"]) .doc-fallback,
:where(html[data-mode="light"]) .doc-idle{
  background:rgba(244,245,248,0.97);
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .doc-menu{
  background:rgba(244,245,248,0.98);
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .doc-menu-link{
  color:#bc8406;
}
:where(html[data-mode="light"]) .doc-menu-row:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .ftype{
  color:#bc8406;
}
:where(html[data-mode="light"]) .fname:hover{
  color:#bc8406;
}
:where(html[data-mode="light"]) .file-sortrow select{
  background:rgba(15,23,42,0.088);
  border:1px solid rgba(15,23,42,0.198);
}
:where(html[data-mode="light"]) body.doc-open .doc-btn:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) body.doc-open .doc-btn.primary{
  color:#bc8406;
}
:where(html[data-mode="light"]) .focus-ask{
  background:rgba(244,245,248,0.98);
  box-shadow:0 10px 30px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .tr select,
:where(html[data-mode="light"]) .tr-langs select{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .tr-out{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .linkish{
  color:#bc8406;
}
:where(html[data-mode="light"]) .dc-head h3{
  color:#bc8406;
}
:where(html[data-mode="light"]) .fc-sum div{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .fc-sum b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .fc-card{
  background:rgba(0,0,0,0.132);
}
:where(html[data-mode="light"]) .fc-term{
  color:#bc8406;
}
:where(html[data-mode="light"]) .fc-done h3{
  color:#bc8406;
}
: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"]) .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"]) .drawer{
  box-shadow:-16px 0 40px rgba(0,0,0,0.18);
}
: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"]) .lock-hint{
  color:#bc8406!important;
}
:where(html[data-mode="light"]) .dock-vis-row{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .hbtn.wide.on{
  color:#bc8406;
}
:where(html[data-mode="light"]) .widget.full{
  background:rgba(252,253,253,0.96);
}
:where(html[data-mode="light"]) .widget.full.min{
  box-shadow:0 10px 30px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .sx-card{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .ss-st[data-st="good"]{
  color:#11b146;
}
:where(html[data-mode="light"]) .ss-st[data-st="watch"]{
  color:#c2af00;
}
:where(html[data-mode="light"]) .ss-st[data-st="bad"]{
  color:#c20000;
}
:where(html[data-mode="light"]) .heat i{
  background:rgba(15,23,42,0.077);
}
:where(html[data-mode="light"]) .sx-tbl td.up{
  color:#2d954d;
}
:where(html[data-mode="light"]) .sx-tbl td.dn{
  color:#c20000;
}
:where(html[data-mode="light"]) .moods .mo{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .np-lines{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .np-line{
  border-bottom:1px solid rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .np-line time{
  color:#bc8406;
}
:where(html[data-mode="light"]) .np-day{
  background:rgba(252,253,253,0.96);
}
:where(html[data-mode="light"]) .np-hit{
  border-bottom:1px solid rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .np-hit:hover{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .np-hit time{
  color:#bc8406;
}
:where(html[data-mode="light"]) .demotab{
  background:rgba(247,245,240,0.88);
  color:#bc8406;
}
:where(html[data-mode="light"]) .demopanel{
  background:rgba(244,245,248,0.96);
  box-shadow:0 10px 30px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .demo-feed li{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .sx-spark{
  color:#c28e00;
}
:where(html[data-mode="light"]) .widget.full .xpbar.wide i::after{
  background:linear-gradient(100deg,transparent 0,rgba(15,23,42,0.825) 50%,transparent 100%);
}
:where(html[data-mode="light"]) .widget.full .xpbar.wide i::before{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .sx-card::before,
:where(html[data-mode="light"]) .sx-card::after{
  color:#bc8406;
}
:where(html[data-mode="light"]) .sx-card: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"]) .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"]) .bar i::after{
  background:linear-gradient(100deg,transparent 0,rgba(15,23,42,0.88) 50%,transparent 100%);
}
:where(html[data-mode="light"]) .bar:hover b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .heat i:not(.f):hover::after{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .srow:hover b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .medal{
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
}
: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.on{
  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.on::after{
  background:linear-gradient(110deg,transparent 0,rgba(15,23,42,0.77) 48%,transparent 62%);
}
:where(html[data-mode="light"]) .badge-pop{
  background:rgba(249,249,251,0.97);
  box-shadow:0 16px 44px rgba(0,0,0,0.248),0 0 30px rgba(224,169,59,.3);
}
:where(html[data-mode="light"]) .bp-t small{
  color:#bc8406;
}
:where(html[data-mode="light"]) .badge-chip{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .badge-chip b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bc-count{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bc-cabinet{
  background:rgba(0,0,0,0.072);
}
:where(html[data-mode="light"]) .bc-ledge{
  background:linear-gradient(180deg,rgba(224,169,59,.35),rgba(224,169,59,.08) 55%,rgba(0,0,0,0.15));
  box-shadow:0 5px 10px rgba(0,0,0,0.158),inset 0 1px 0 rgba(0,0,0,0.1);
}
:where(html[data-mode="light"]) .bd-nx{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bd-bar{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .bd{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bd:hover{
  box-shadow:0 10px 22px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .bs-count{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .bs-count b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .medal.mini{
  box-shadow:0 1px 5px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .medal.mini .mi{
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.248);
}
:where(html[data-mode="light"]) .bs-tip{
  background:rgba(249,249,251,0.97);
  box-shadow:0 8px 22px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .bs-tip b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bs-item.fresh::after{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .bs-more{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bv-back{
  background:rgba(8,12,26,0.372);
}
:where(html[data-mode="light"]) .bv-card{
  background:rgba(249,249,251,0.98);
  box-shadow:0 24px 60px rgba(0,0,0,0.27),0 0 44px rgba(224,169,59,.25);
}
:where(html[data-mode="light"]) .bv-x{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .bv-x:hover{
  background:rgba(15,23,42,0.154);
}
:where(html[data-mode="light"]) .bv-tier{
  color:#bc8406;
}
:where(html[data-mode="light"]) .bv-card em{
  color:#bc8406;
}
:where(html[data-mode="light"]) .sx-medals{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .cl-family{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .cl-family b{
  color:#bc8406;
}
:where(html[data-mode="light"]) .cl-pro{
  color:#bc8406;
}
:where(html[data-mode="light"]) .sc-cover{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .sc-bar select,
:where(html[data-mode="light"]) .sc-bar input[type=number],
:where(html[data-mode="light"]) .sc-bar input[type=text]{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .sc-ctx{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .sc-pbtn{
  background:rgba(0,0,0,0.12);
}
:where(html[data-mode="light"]) .sc-stage{
  background:rgba(0,0,0,0.132);
}
:where(html[data-mode="light"]) .sc-pagewrap{
  box-shadow:0 8px 28px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .sc-f-polaroid{
  box-shadow:0 3px 10px rgba(0,0,0,0.135);
}
:where(html[data-mode="light"]) .sc-text.editing{
  background:rgba(15,23,42,0.605);
}
:where(html[data-mode="light"]) .sc-h{
  border:calc(2px*var(--inv,1)) solid #e3d4bf;
}
:where(html[data-mode="light"]) .widget.full[data-wid="scrap"]{
  background:#fcfdfd;
}
:where(html[data-mode="light"]) .sc-it.sc-tape{
  box-shadow:0 1px 2px rgba(0,0,0,0.068);
}
:where(html[data-mode="light"]) .sc-it.sc-note{
  box-shadow:0 3px 8px rgba(0,0,0,0.081);
}
:where(html[data-mode="light"]) .sc-edgeline path{
  stroke:#1a1a1a;
}
:where(html[data-mode="light"]) .sc-it.sc-edge{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,0.158));
}
:where(html[data-mode="light"]) .sc-modal{
  background:rgba(10,14,24,0.33);
}
:where(html[data-mode="light"]) .sc-mcard{
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .sb-img{
  box-shadow:0 10px 30px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .ba-card img{
  background:rgba(0,0,0,0.08);
}
:where(html[data-mode="light"]) .ba-status.ba-graded{
  color:#bc8406;
}
:where(html[data-mode="light"]) .ba-canwrap{
  box-shadow:0 4px 16px rgba(0,0,0,0.135);
}

/* ---- css/light.extra.css (hand-written) ---- */
/* StudentDeck — 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) ---------- */
.swatch-pop .pop-label{ margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--lo); }
.swatch-pop .mode-switch{ margin-bottom:12px; }
#mode-toggle{ --deck-bar-h:32px; }

/* ---------- 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"], html[data-mode="light"] .tiles.wide .tile[data-st]{ --st-good:#15803d; --st-watch:#a16207; --st-bad:#dc2626; }   /* where this app defines them */