/* Dialup 98: the desktop, windows, controls, taskbar. Real Win98 bevel geometry at 1x, 16 px pixel UI type. */
@font-face{font-family:'Pixel Operator';src:url(/fonts/PixelOperator.ttf) format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Pixel Operator';src:url(/fonts/PixelOperator-Bold.ttf) format('truetype');font-weight:700;font-display:block}
@font-face{font-family:'Pixel Operator Mono';src:url(/fonts/PixelOperatorMono.ttf) format('truetype');font-display:block}
@font-face{font-family:'Pixel Operator 8';src:url(/fonts/PixelOperator8.ttf) format('truetype');font-weight:400;font-display:block}
@font-face{font-family:'Pixel Operator 8';src:url(/fonts/PixelOperator8-Bold.ttf) format('truetype');font-weight:700;font-display:block}

:root{
  --face:#c0c0c0; --hi:#fff; --lt:#dfdfdf; --sh:#808080; --dk:#0a0a0a;
  --title-a:#000080; --title-b:#1084d0; --title-ia:#808080; --title-ib:#b5b5b5;
  --sel:#000080; --sel-ink:#fff; --ink:#000; --desk:#008080; --tip:#ffffe1;
  --ui:'Pixel Operator',Arimo,Arial,sans-serif; --mono:'Pixel Operator Mono',Cousine,monospace; --px8:'Pixel Operator 8',monospace;
  --raised:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--sh),inset 2px 2px var(--lt);
  --raised-btn:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--sh),inset 2px 2px var(--lt);
  --pressed:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--lt),inset 2px 2px var(--sh);
  --sunken:inset -1px -1px var(--hi),inset 1px 1px var(--sh),inset -2px -2px var(--lt),inset 2px 2px var(--dk);
  --thin-up:inset -1px -1px var(--sh),inset 1px 1px var(--hi);
  --thin-dn:inset -1px -1px var(--hi),inset 1px 1px var(--sh);
  --task-h:30px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--desk);color:var(--ink);font:16px/1.25 var(--ui);-webkit-font-smoothing:none;font-smooth:never;image-rendering:pixelated}
body{cursor:var(--cur-arrow,default);user-select:none;-webkit-user-select:none}
a,button,.btn,[data-href],.icon,.tb-btn,.menu-item,.task,.start{cursor:var(--cur-hand,pointer)}
body.wait,body.wait *{cursor:var(--cur-wait,wait)!important}
::selection{background:var(--sel);color:var(--sel-ink)}
img{image-rendering:auto}
.pix{image-rendering:pixelated}
i.gif{display:inline-block;background-repeat:no-repeat;vertical-align:middle;animation:gifplay steps(var(--n)) infinite;image-rendering:pixelated}
@keyframes gifplay{from{background-position:0 0}to{background-position:calc(var(--fw) * var(--n) * -1) 0}}
@media (prefers-reduced-motion:reduce){i.gif{animation:none}}

/* ---------- desktop ---------- */
#desk{position:fixed;inset:0 0 var(--task-h) 0;overflow:hidden}
#wall{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#icons{position:absolute;left:6px;top:8px;display:grid;grid-auto-flow:row;grid-auto-rows:84px;gap:2px;width:84px}
.icon{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px;color:#fff;text-align:center;font-size:16px;line-height:16px;outline:none}
.icon img{width:32px;height:32px;image-rendering:pixelated}
.icon span{padding:1px 2px;text-shadow:1px 1px 0 #000}
.icon.sel img{filter:brightness(.55) sepia(1) hue-rotate(190deg) saturate(6)}
.icon.sel span{background:var(--sel);text-shadow:none;outline:1px dotted #ff0;outline-offset:-1px}

/* ---------- windows ---------- */
.win{position:absolute;background:var(--face);box-shadow:var(--raised);padding:3px;display:flex;flex-direction:column;min-width:200px;min-height:80px}
.win.max{left:0!important;top:0!important;width:100%!important;height:100%!important}
.win.min{display:none}
.title{height:22px;flex:0 0 22px;display:flex;align-items:center;gap:4px;padding:0 3px 0 4px;color:#fff;font-weight:700;background:linear-gradient(90deg,var(--title-ia),var(--title-ib));white-space:nowrap}
.win.active>.title{background:linear-gradient(90deg,var(--title-a),var(--title-b))}
.title img{width:16px;height:16px;flex:0 0 16px}
.title .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:16px;padding-top:1px}
.tbtns{display:flex;gap:0}
.tbtn{width:18px;height:16px;background:var(--face) center no-repeat;box-shadow:var(--raised-btn);border:0;padding:0;margin:0}
.tbtn:active{box-shadow:var(--pressed);background-position:calc(50% + 1px) calc(50% + 1px)}
.tbtn.cl{margin-left:2px}
.wbody{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.menubar{display:flex;height:20px;flex:0 0 20px;align-items:center;padding:0 1px}
.menubar>span{padding:0 7px;height:18px;line-height:18px}
.menubar>span u{text-decoration:underline}
.menubar>span:hover{box-shadow:var(--thin-up)}
.menubar>span.open{box-shadow:var(--thin-dn)}
.rule{height:2px;flex:0 0 2px;box-shadow:inset 0 1px var(--sh),inset 0 -1px var(--hi);margin:1px 0}
.grip{width:3px;align-self:stretch;margin:2px 3px 2px 1px;box-shadow:var(--thin-up)}

/* ---------- controls ---------- */
.btn{font:inherit;color:inherit;background:var(--face);border:0;box-shadow:var(--raised-btn);min-width:75px;height:24px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:5px;outline:none;position:relative}
.btn:active,.btn.on{box-shadow:var(--pressed);padding:1px 9px 0 11px}
.btn.def{box-shadow:inset 0 0 0 1px var(--dk),inset -2px -2px var(--dk),inset 2px 2px var(--hi),inset -3px -3px var(--sh),inset 3px 3px var(--lt)}
.btn:focus-visible::after,.btn.def::after{content:'';position:absolute;inset:4px;outline:1px dotted #000}
.btn[disabled]{color:var(--sh);text-shadow:1px 1px var(--hi);pointer-events:none}
.field{font:inherit;color:#000;background:#fff;border:0;box-shadow:var(--sunken);height:24px;padding:3px 5px 2px;outline:none;min-width:0;user-select:text;-webkit-user-select:text}
textarea.field{height:auto;resize:none;line-height:18px}
.field:disabled{background:var(--face)}
.inset{box-shadow:var(--sunken);background:#fff;padding:2px}
.group{position:relative;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--sh),inset -2px -2px var(--sh),inset 2px 2px var(--hi);padding:14px 10px 10px;margin-top:8px}
.group>legend,.group>.lg{position:absolute;top:-9px;left:8px;background:var(--face);padding:0 3px}
.chk{display:inline-flex;align-items:center;gap:6px}
.chk i{width:13px;height:13px;background:#fff center no-repeat;box-shadow:var(--sunken)}
.chk.on i{background-image:var(--g-check)}
.sep{width:2px;align-self:stretch;margin:3px 2px;box-shadow:inset 1px 0 var(--sh),inset -1px 0 var(--hi)}
.tip{position:fixed;z-index:9999;background:var(--tip);color:#000;border:1px solid #000;padding:1px 4px;font-size:16px;pointer-events:none;white-space:nowrap}

/* scrollbars: Dialup 98 (checker track, bevelled thumb and arrows); arrows filled in by os.js */
.scroll{overflow:auto}
.scroll::-webkit-scrollbar{width:16px;height:16px}
.scroll::-webkit-scrollbar-track{background:var(--g-dither)}
.scroll::-webkit-scrollbar-thumb{background:var(--face);box-shadow:var(--raised-btn)}
.scroll::-webkit-scrollbar-corner{background:var(--face)}
.scroll::-webkit-scrollbar-button{display:block;width:16px;height:16px;background-color:var(--face);box-shadow:var(--raised-btn);background-repeat:no-repeat;background-position:center}
.scroll::-webkit-scrollbar-button:active{box-shadow:var(--pressed)}
.scroll::-webkit-scrollbar-button:vertical:start:increment,.scroll::-webkit-scrollbar-button:vertical:end:decrement,
.scroll::-webkit-scrollbar-button:horizontal:start:increment,.scroll::-webkit-scrollbar-button:horizontal:end:decrement{display:none}

/* ---------- taskbar ---------- */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--task-h);background:var(--face);box-shadow:inset 0 1px var(--lt),inset 0 2px var(--hi);display:flex;align-items:center;gap:3px;padding:3px 2px 1px;z-index:5000}
.start{height:24px;display:flex;align-items:center;gap:4px;padding:0 6px 0 4px;font-weight:700;box-shadow:var(--raised-btn);background:var(--face);border:0;font:inherit;font-weight:700;color:#000}
.start img{width:18px;height:16px}
.start.on{box-shadow:var(--pressed)}
.quick{display:flex;gap:1px;align-items:center;padding:0 3px}
.quick button{width:24px;height:24px;border:0;background:transparent center no-repeat;padding:0}
.quick button:hover{box-shadow:var(--thin-up)}
.quick button:active{box-shadow:var(--thin-dn)}
#tasks{flex:1;min-width:0;display:flex;gap:3px;overflow:hidden}
.task{flex:0 1 180px;min-width:40px;height:24px;display:flex;align-items:center;gap:4px;padding:0 6px;box-shadow:var(--raised-btn);background:var(--face);border:0;font:inherit;color:#000;white-space:nowrap;overflow:hidden}
.task img{width:16px;height:16px;flex:0 0 16px}
.task span{overflow:hidden;text-overflow:ellipsis}
.task.on{box-shadow:var(--pressed);background:var(--g-dither-lt);font-weight:700}
#tray{height:24px;display:flex;align-items:center;gap:5px;padding:0 8px 0 6px;box-shadow:var(--thin-dn);flex:0 0 auto}
#tray img{width:16px;height:16px;image-rendering:pixelated}
#clock{min-width:62px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- start menu + context menus ---------- */
.menu{position:fixed;z-index:6000;background:var(--face);box-shadow:var(--raised);padding:3px;min-width:180px;display:none}
.menu.open{display:flex}
#startmenu{bottom:calc(var(--task-h) - 2px);left:2px;min-width:230px}
.sm-band{width:24px;background:linear-gradient(0deg,#000080,#1084d0);color:#c0c0c0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;flex:0 0 24px}
.sm-band b{writing-mode:vertical-rl;transform:rotate(180deg);font:700 20px/1 var(--ui);letter-spacing:.02em;color:#fff}
.sm-band b em{font-style:normal;color:#c0c0c0;font-weight:400;margin-top:3px}
.sm-items{flex:1;display:flex;flex-direction:column}
.menu-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 18px 0 6px;white-space:nowrap}
.menu-item img{width:24px;height:24px}
.menu-item.sm{height:22px}
.menu-item.sm img{width:16px;height:16px}
.menu-item:hover{background:var(--sel);color:#fff}
.menu-item small{margin-left:auto;padding-left:16px;color:inherit;opacity:.8}
.menu-sep{height:2px;margin:3px 2px;box-shadow:inset 0 1px var(--sh),inset 0 -1px var(--hi)}

/* ---------- dialogs ---------- */
.dlg .wbody{padding:12px 12px 10px}
.dlg-row{display:flex;gap:14px;align-items:flex-start}
.dlg-btns{display:flex;gap:6px;justify-content:flex-end;margin-top:14px}
.form{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
#modal-veil{position:fixed;inset:0;z-index:4000;display:none}
#modal-veil.on{display:block}

/* dial-up networking */
.dun .art{width:132px;height:100px;flex:0 0 132px;image-rendering:pixelated}
.dun .status{height:20px;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dun .meter{height:18px;box-shadow:var(--sunken);padding:2px;display:flex;gap:2px;margin-top:4px;background:#fff}
.dun .meter i{width:10px;height:14px;background:var(--sel);display:block;flex:0 0 10px}
.dun .lights{display:flex;gap:14px;margin-top:8px;font-size:16px}
.dun .lights span{display:inline-flex;align-items:center;gap:5px}
.dun .lights b{width:10px;height:10px;border-radius:50%;background:#2a0000;box-shadow:inset -1px -1px #000,inset 1px 1px #600}
.dun .lights b.g{background:#002a00;box-shadow:inset -1px -1px #000,inset 1px 1px #060}
.dun .lights b.on{background:#ff3030;box-shadow:0 0 5px #f00,inset 1px 1px #faa}
.dun .lights b.g.on{background:#30ff30;box-shadow:0 0 5px #0f0,inset 1px 1px #afa}

/* notepad */
.notepad textarea{flex:1;font:16px/20px var(--mono);border:0;box-shadow:var(--sunken);padding:4px 6px;resize:none;outline:none;background:#fff;color:#000;user-select:text}

/* boot fade only on the first paint of the wallpaper */
@media (max-width:760px){#icons{display:none}}
.blink{animation:hpblink 1s steps(1) infinite}
.menu.dd{z-index:7000;min-width:200px;padding:2px}
.menu-item.sm{height:22px;padding:0 20px 0 22px}
.menu-item.off{color:var(--sh);text-shadow:1px 1px var(--hi)}
.menu-item.off:hover{background:none;color:var(--sh)}
.is-hidden{display:none!important}
.icon:hover span{text-decoration:underline}