/* Themes. win98.css holds every rule with the Windows 98 colors as defaults; a theme here only swaps the
   color variables (html[data-theme]). The two modern themes also share a flat look (html[data-look=modern]).
   The list shown in the Start menu is Theme.list in core.js. */

/* ---------- Hot Dog Stand: the Windows 3.1 scheme, on the 98 look ---------- */
html[data-theme=hotdog]{
  --face:#ff0000; --desk:#ffff00; --navy:#000; --link:#000;
  --dim:#400000; --sub:#400000; --gray:#800000; --err:#000;
  --b1:#000; --b2:#ffff00; --b3:#800000; --b4:#ff8080;
  --cap1:#000; --cap2:#000; --off1:#800000; --off2:#800000;
  --wall:#e0c000; --wall2:#d0b000; --brandsh:#ff0000; --well:#800000; --code:#ffff80;
  --icotx:#000; --icosh:none;
  --dither:repeating-conic-gradient(#ff0000 0 25%,#ffff00 0 50%) 0 0/2px 2px;
}

/* ---------- Modern + Modern Dark ---------- */
html[data-look=modern]{
  --r:6px; --rw:10px;
  --b1:var(--edge); --b2:transparent; --b3:var(--edge); --b4:var(--edge);
  --cap1:transparent; --cap2:transparent; --off1:transparent; --off2:transparent; --captx:var(--text);
  --line:var(--edge); --tint:color-mix(in srgb,var(--navy) 16%,var(--face));
  --icotx:#fff; --icosh:0 1px 3px rgba(0,0,0,.7);
  --wall:rgba(255,255,255,.2); --wall2:rgba(255,255,255,.2); --brandsh:rgba(0,0,0,.35);
  --dither:var(--tint);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --read:var(--font);
  --raised:inset 0 0 0 1px var(--edge); --sunken:inset 0 0 0 1px var(--edge); --pressed:inset 0 0 0 1px var(--edge);
  --etched:inset 0 0 0 1px var(--edge);
}
html[data-theme=modern]{
  --face:#f1f4f4; --field:#fff; --text:#14211f; --dim:#586866; --sub:#44524f; --gray:#9aa6a4; --edge:rgba(20,45,45,.17);
  --navy:#0b6e6a; --hitx:#fff; --link:#0b6e6a; --err:#b3261e;
  --btn:#fff; --btnh:#e4eaea; --btna:#d6dfde; --code:#e2e8e8; --well:#c9d1d0; --tip:#fff;
  --desk:radial-gradient(120% 90% at 12% 0%,#2a9d8f 0%,transparent 55%),linear-gradient(160deg,#0e5e63,#152c4a) #0e5e63;
  --drop:0 10px 34px rgba(8,30,35,.3);
}
html[data-theme=dark]{
  color-scheme:dark;
  --face:#1c2426; --field:#12181a; --text:#e3eaea; --dim:#93a3a3; --sub:#a9b6b6; --gray:#66757a; --edge:rgba(255,255,255,.13);
  --navy:#17807a; --hitx:#fff; --link:#62d3c4; --err:#ff8a80;
  --btn:#283236; --btnh:#323e43; --btna:#3b494f; --code:#2b3539; --well:#0c1011; --tip:#283236;
  --desk:radial-gradient(120% 90% at 12% 0%,#14403f 0%,transparent 55%),linear-gradient(160deg,#0b1719,#0a0f1c) #0b1719;
  --drop:0 12px 40px rgba(0,0,0,.6);
}

html[data-look=modern] .btn{background:var(--btn);border-radius:var(--r)}
html[data-look=modern] .btn:hover:not(:disabled){background:var(--btnh)}
html[data-look=modern] .btn:active:not(:disabled){background:var(--btna)}
html[data-look=modern] .btn.on{background:var(--tint);box-shadow:inset 0 0 0 1px var(--navy)}
html[data-look=modern] .btn.def{background:var(--navy);color:var(--hitx);box-shadow:none}
html[data-look=modern] .btn.def:hover:not(:disabled){background:color-mix(in srgb,var(--navy) 86%,#fff)}
html[data-look=modern] .btn:disabled{opacity:.6}
html[data-look=modern] .btn:focus-visible,html[data-look=modern] .mi:focus-visible,html[data-look=modern] .thsw:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
html[data-look=modern] .field{border-radius:var(--r)}
html[data-look=modern] .field:focus{box-shadow:inset 0 0 0 1px var(--navy),0 0 0 2px var(--tint)}
html[data-look=modern] input[type=checkbox]{border-radius:4px}
html[data-look=modern] input[type=checkbox]:checked{background:var(--navy);box-shadow:none}
html[data-look=modern] input[type=checkbox]:checked::after{filter:invert(1)}
html[data-look=modern] fieldset.group,html[data-look=modern] .tabpanel,html[data-look=modern] .list,
html[data-look=modern] canvas.spark,html[data-look=modern] pre.log,html[data-look=modern] .notepad,
html[data-look=modern] .md pre,html[data-look=modern] .tool,html[data-look=modern] .tool pre,html[data-look=modern] .ask pre{border-radius:var(--r)}
html[data-look=modern] .list{overflow:auto}
html[data-look=modern] .progress{border-radius:99px;padding:0;box-shadow:none;background:var(--well)}
html[data-look=modern] .progress>div{background:var(--navy);border-radius:99px}
html[data-look=modern] .progress.warn>div{background:#d08a00}
html[data-look=modern] .progress.crit>div{background:#d0342c}
html[data-look=modern] .lamp{border:0;box-shadow:none}
html[data-look=modern] .tabs button{background:none;box-shadow:none;color:var(--dim);margin-top:0;padding-top:8px}
html[data-look=modern] .tabs button.on{color:var(--text);box-shadow:inset 0 -2px var(--navy)}
html[data-look=modern] .tabs{margin-bottom:4px}
html[data-look=modern] table.tbl th{box-shadow:inset 0 -1px var(--edge);color:var(--dim)}
html[data-look=modern] .statusbar>div{box-shadow:inset 0 0 0 1px var(--edge);border-radius:var(--r)}

html[data-look=modern] .win{border-radius:var(--rw)}
html[data-look=modern] .win.max,html[data-look=modern] .win.snap{border-radius:0}
html[data-look=modern] .splitbar::after{border-radius:3px}
html[data-look=modern] .win .title{color:var(--dim);font-weight:600;padding-left:8px}
html[data-look=modern] .win.active .title{color:var(--text)}
html[data-look=modern] .win:not(.active):not(.dialog){box-shadow:var(--raised),0 4px 14px rgba(0,0,0,.18)}
html[data-look=modern] .tbtn{background:none;box-shadow:none;border-radius:var(--r);color:var(--dim)}
html[data-look=modern] .tbtn:hover{background:var(--btnh);color:var(--text)}
html[data-look=modern] .tbtn.x:hover,html[data-look=modern] .dialog .tbtn:hover{background:#d0342c;color:#fff}
html[data-look=modern] .win .grip{opacity:.7}

html[data-look=modern] .dicon{border-radius:var(--r)}
html[data-look=modern] .dicon.sel{background:rgba(255,255,255,.18)}
html[data-look=modern] .dicon.sel span.lb{background:none;outline:0;color:#fff;text-shadow:var(--icosh)}
html[data-look=modern] .dicon .ic,html[data-look=modern] .dicon.sel .ic{filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}

html[data-look=modern] #taskbar{box-shadow:inset 0 1px var(--edge);background:color-mix(in srgb,var(--face) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html[data-look=modern] #taskbar .btn{background:none;box-shadow:none}
html[data-look=modern] #taskbar .btn:hover{background:var(--btnh)}
html[data-look=modern] #taskbar .taskbtn{box-shadow:inset 0 -2px var(--edge)}
html[data-look=modern] #taskbar .taskbtn.on,html[data-look=modern] #taskbar .startbtn.on{background:var(--tint)}
html[data-look=modern] #taskbar .taskbtn.on{box-shadow:inset 0 -2px var(--navy);font-weight:600}
html[data-look=modern] .tray{box-shadow:none}
html[data-look=modern] .startmenu{left:6px;bottom:calc(var(--tbt) + var(--kb,0px) + 6px);max-height:calc(100% - var(--tbt) - var(--kb,0px) - 12px);padding:6px;border-radius:var(--rw)}
html[data-look=modern] .startmenu .side{display:none}
html[data-look=modern] .nmenu{padding:6px;border-radius:var(--rw)}
html[data-look=modern] .ntools .sw:not(.dot){border-radius:50%}
html[data-look=modern] .mi{border-radius:var(--r)}
html[data-look=modern] .mi:hover,html[data-look=modern] .mi:active{background:var(--btnh);color:var(--text)}
html[data-look=modern] .thsw{border-radius:var(--r);background:var(--btn)}
html[data-look=modern] .thsw.on{background:var(--tint);box-shadow:inset 0 0 0 2px var(--navy)}
html[data-look=modern] .thsw>span,html[data-look=modern] .thsw i{border-radius:3px}
html[data-look=modern] .balloon,html[data-look=modern] .msg.you{border-radius:var(--rw);box-shadow:var(--drop)}
html[data-look=modern] .msg.you{background:var(--tint);border:0;box-shadow:none}
html[data-look=modern] .overlay{background:rgba(0,0,0,.4)}

html[data-look=modern] .chatlist button{border-radius:var(--r)}
html[data-look=modern] .ask,html[data-look=modern] .nwelcome,html[data-look=modern] .chat .side{border-radius:var(--rw)}
html[data-look=modern] .ask .cap{font-weight:600}
html[data-look=modern] .ask.answered .cap{color:var(--dim)}
html[data-look=modern] .sw{border-radius:3px}

html[data-look=modern] .ghero,html[data-look=modern] .gtile,html[data-look=modern] .gnote,html[data-look=modern] .gtun{border-radius:var(--r)}
html[data-look=modern] .gnote{border:0;background:var(--tint)}
html[data-look=modern] .gav{border-radius:50%;box-shadow:none}
html[data-look=modern] .gpl+.gpl,html[data-look=modern] .gmod+.gmod{box-shadow:inset 0 1px var(--edge)}
html[data-look=modern] .agcard,html[data-look=modern] .addg .art{border-radius:var(--r)}
html[data-look=modern] .agcard{background:var(--btn)}
html[data-look=modern] .agcard:hover{background:var(--btnh)}
html[data-look=modern] .agpack{border-radius:var(--r)}
html[data-look=modern] .ghero .gart{border-radius:var(--r);box-shadow:none}
/* Calendar */
html[data-look=modern] .calchip.ad,html[data-look=modern] .calev{border-radius:4px}
html[data-look=modern] .calday.today .dn,html[data-look=modern] .calwd.today b{border-radius:99px}
html[data-look=modern] .calswb{border-radius:50%;box-shadow:none}
html[data-look=modern] .calclass{border-radius:var(--r)}