/* ============================================================================
   WINDOWS 98, AFTER DARK — design system
   ----------------------------------------------------------------------------
   Shared by every page. Page-level layout lives in pages.css.

     1. tokens
     2. reset
     3. bevel primitives
     4. buttons
     5. window chrome  (titlebar / toolbar / statusbar)
     6. form + list primitives  (chips, wells, progress)
     7. taskbar + start menu
     8. dialogs
     9. scrollbars
    10. focus + selection
    11. motion
   ========================================================================== */


/* ---- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* chrome surfaces */
  --canvas:      #0f1115;   /* desktop backdrop                  */
  --canvas-2:    #171b21;   /* backdrop, lighter end of gradient */
  --face:        #2b2f36;   /* window chrome face                */
  --face-hi:     #343941;   /* button gradient top               */
  --face-lo:     #23272d;   /* button gradient bottom            */
  --well:        #1b1e23;   /* sunken content area               */
  --well-2:      #16191e;   /* sunken, deeper (code, inputs)     */

  /* the bevel quartet — this is the core primitive of the whole design */
  --bev-hilite:  #767f8c;   /* 3D highlight   (brightest)        */
  --bev-light:   #4b525d;   /* 3D light                          */
  --bev-shadow:  #191c22;   /* 3D shadow                         */
  --bev-dark:    #05070a;   /* 3D dark shadow (darkest)          */

  /* ink — every pair below clears WCAG AA on its intended surface */
  --ink:         #e4e8ef;   /* 13.1:1 on --face                  */
  --ink-2:       #b8c0cc;   /*  8.4:1 on --face                  */
  --ink-3:       #98a1af;   /*  5.5:1 on --face                  */
  --ink-dim:     #8e97a5;   /*  4.8:1 on --face                  */

  /* the one accent */
  --accent:      #2ec7bb;
  --link:        #5eead4;   /* 10.9:1 on --well                  */
  --link-visited:#a5b8f0;
  --tb-a:        #062229;   /* title bar gradient, left          */
  --tb-b:        #0b4550;   /* title bar gradient, middle        */
  --tb-c:        #10707d;   /* title bar gradient, right         */
  --sel:         #145e6a;   /* selection fill                    */
  --sel-ink:     #eafcff;
  --dot:         #cfd6e0;   /* dotted focus rectangle            */

  /* composed bevels */
  --sh-out: inset  1px  1px 0 var(--bev-hilite), inset -1px -1px 0 var(--bev-shadow);
  --sh-in:  inset  1px  1px 0 var(--bev-dark),   inset -1px -1px 0 var(--bev-light);

  /* type */
  --font-ui:   Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  --font-read: Verdana, Geneva, "DejaVu Sans", -apple-system, sans-serif;
  --font-mono: "Lucida Console", Consolas, "Cascadia Mono", ui-monospace, monospace;

  --t-1: 10.5px;                    /* small-caps labels    */
  --t-2: 12px;                      /* chrome ui            */
  --t-3: 13px;                      /* dense meta           */
  --t-4: 14.5px;                    /* list titles          */
  --t-5: 15px;                      /* reading lead         */
  --t-6: 19px;
  --t-7: clamp(21px, 2.5vw, 31px);  /* featured title       */
  --t-8: clamp(31px, 4.4vw, 54px);  /* hero display         */

  --tb: 42px;                       /* taskbar height       */
  --dither: repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%, transparent 0% 50%) 0 0/2px 2px;

  /* syntax highlighting — hand-rolled spans, no JS highlighter */
  --syn-kw:  #d6a2ff;   /* keyword          */
  --syn-str: #9ee493;   /* string           */
  --syn-num: #ffb86c;   /* number           */
  --syn-com: #7d8896;   /* comment  4.7:1   */
  --syn-fn:  #5eead4;   /* function         */
  --syn-cls: #ffd479;   /* class / type     */
  --syn-op:  #b8c0cc;   /* operator         */
}


/* ---- 2. RESET ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--face) #1d2127;
}
body{
  margin:0;
  font:var(--t-2)/1.5 var(--font-ui);
  color:var(--ink);
  background:var(--canvas);
  padding-bottom:calc(var(--tb) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{ margin:0 }
img,svg{ max-width:100% }
img{ height:auto }

/* The desktop wallpaper — gradient wash plus the neural-net lattice.
   Fixed to the viewport rather than to the page, for two reasons: real
   wallpaper doesn't scroll with the windows sitting on it, and the radial
   stops are placed in % — on a 10,000px-tall article those would land far
   below the fold if they were anchored to the document instead.          */
.wallpaper{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-color:var(--canvas);
  background-image:
    radial-gradient(1100px 640px at 76% -8%, rgba(46,199,187,.15), transparent 62%),
    radial-gradient(900px 620px at 4% 108%,  rgba(46,120,199,.11), transparent 60%),
    linear-gradient(180deg, var(--canvas-2), var(--canvas) 70%);
}
.net{
  position:absolute; top:-40px; right:-70px;
  width:min(620px,60vw); height:auto; opacity:.5;
}

/* the CRT veil — scanlines + vignette + dither, over everything, click-through */
.crt{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(140% 110% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%),
    var(--dither);
  opacity:.5;
}

.skip{
  position:absolute; left:-9999px; top:8px; z-index:80;
  padding:12px 16px; background:var(--face); color:var(--ink);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out); text-decoration:none; font-weight:700;
}
.skip:focus{ left:12px }

/* screen-reader only */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ---- 3. BEVEL PRIMITIVES ------------------------------------------------ */
/* Two-tone borders + inset shadows are how Win98 fakes depth. Everything
   raised or sunken in this design is one of these four classes.            */
.bev-out{
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
}
.bev-in{
  border:1px solid;
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
  box-shadow:var(--sh-in);
}
.bev-1-out{ border:1px solid; border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite) }
.bev-1-in { border:1px solid; border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow) }


/* ---- 4. BUTTONS --------------------------------------------------------- */
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:30px; padding:7px 14px;
  font:700 var(--t-2)/1 var(--font-ui); letter-spacing:.02em;
  color:var(--ink); text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg,var(--face-hi) 0%, var(--face) 62%, var(--face-lo) 100%);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn:hover{ background:linear-gradient(180deg,#3d434c 0%, #32373f 62%, #292d34 100%) }
/* the depress: swap the bevel and nudge the label down-right by 1px */
.btn:active,
.btn.is-pressed,
.btn[aria-pressed="true"]{
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
  box-shadow:var(--sh-in);
  background:linear-gradient(180deg,#212429 0%, #272b31 100%);
  padding-top:8px; padding-bottom:6px;
}
.btn:disabled,
.btn[aria-disabled="true"]{
  cursor:default; color:var(--bev-light);
  text-shadow:1px 1px 0 var(--bev-hilite);
  background:linear-gradient(180deg,var(--face-hi),var(--face));
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover{ background:linear-gradient(180deg,var(--face-hi),var(--face)) }

/* the "default" button in a dialog gets a heavy outer ring */
.btn-default{ margin:2px; box-shadow:var(--sh-out), 0 0 0 2px var(--bev-dark) }
.btn-default:active{ box-shadow:var(--sh-in), 0 0 0 2px var(--bev-dark) }

.btn-tool{ min-height:28px; padding:6px 10px; font-weight:400 }


/* ---- 5. WINDOW CHROME --------------------------------------------------- */
.win{
  position:relative;
  max-width:1240px; margin:0 auto; width:100%;
  background:var(--face);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out), 0 26px 54px -16px rgba(0,0,0,.78), 0 6px 14px rgba(0,0,0,.45);
}
/* purely decorative chrome — looks live, isn't focusable, eats no clicks */
.is-inert{ cursor:default; pointer-events:none }

.titlebar{
  display:flex; align-items:center; gap:8px;
  padding:4px 4px 4px 7px; margin:2px;
  background:linear-gradient(90deg, var(--tb-a) 0%, var(--tb-b) 52%, var(--tb-c) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.5);
}
.titlebar--off{ background:linear-gradient(90deg,#1a1d24,#2b313a) }
.tb-icon{ flex:0 0 auto; width:17px; height:17px; display:block }
.tb-title{
  flex:1 1 auto; min-width:0;
  font:700 var(--t-3)/1.3 var(--font-ui); letter-spacing:.015em;
  color:#f2fbff; text-shadow:0 1px 0 rgba(0,0,0,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-btns{ display:flex; gap:2px; flex:0 0 auto }
.tb-btn{
  -webkit-appearance:none; appearance:none; position:relative;
  width:24px; height:21px; padding:0; cursor:pointer;
  display:grid; place-items:center; color:var(--ink);
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out);
  transition:background .14s ease, color .14s ease;
}
.tb-btn::before{ content:""; position:absolute; inset:-4px }   /* hit slop */
.tb-btn:hover{ background:linear-gradient(180deg,#3f454f,#2b2f36); color:#fff }
.tb-btn:active{
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
  box-shadow:var(--sh-in);
}
.tb-btn svg{ display:block; pointer-events:none }
.win.is-max .g-max{ display:none }
.win:not(.is-max) .g-res{ display:none }

.toolbar{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:5px 6px 7px; margin:0 2px;
  border-top:1px solid var(--bev-hilite);
  box-shadow:inset 0 1px 0 var(--bev-shadow);
}
.tool-sep{
  width:2px; align-self:stretch; margin:2px 4px;
  border-left:1px solid var(--bev-shadow); border-right:1px solid var(--bev-hilite);
}
.addr{
  display:flex; align-items:center; gap:7px; flex:1 1 190px; min-width:0;
  padding:6px 8px; background:var(--well-2);
  font:var(--t-2)/1.2 var(--font-mono); color:var(--ink-2);
}
.addr span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.addr .caret{ margin-left:auto; color:var(--ink-3); font-size:9px; flex:0 0 auto }

.winbody{ padding:8px 8px 10px; margin:0 2px }

.statusbar{
  display:flex; align-items:stretch; gap:3px;
  padding:3px 3px 4px; margin:0 2px 2px;
}
.sb-panel{
  padding:5px 9px; background:var(--face);
  font:var(--t-2)/1.3 var(--font-ui); color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-panel:first-child{ flex:1 1 auto }
.sb-grip{
  flex:0 0 16px; width:16px; align-self:stretch; margin-left:2px;
  background-image:linear-gradient(135deg,
    transparent 0 42%, var(--bev-hilite) 42% 52%, var(--bev-dark) 52% 62%, transparent 62%);
  background-size:6px 6px; background-position:right bottom; background-repeat:repeat;
}


/* ---- 6. SMALL PRIMITIVES ------------------------------------------------ */
.label{
  display:block;
  font:700 var(--t-1)/1 var(--font-ui);
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent);
}

/* Win98 progress bar — chunky segments in a sunken well.
   Doubles as the reading-position indicator on article pages. */
.progress{
  flex:0 0 auto; width:104px; align-self:center;
  height:14px; padding:2px; background:var(--well-2);
  border:1px solid;
  border-color:var(--bev-shadow) var(--bev-hilite) var(--bev-hilite) var(--bev-shadow);
}
.progress i{
  display:block; height:100%; width:0;
  background-image:linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 9px);
  background-size:9px 100%;
  transition:width .1s linear;
}


/* ---- 7. TASKBAR + START MENU -------------------------------------------- */
.taskbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:5px;
  height:calc(var(--tb) + env(safe-area-inset-bottom));
  padding:3px 5px calc(3px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#343a42 0%, #2b2f36 22%, #23272d 100%);
  border-top:1px solid var(--bev-hilite);
  box-shadow:0 -2px 12px rgba(0,0,0,.7), inset 0 -1px 0 var(--bev-dark);
}
.start{ padding:6px 12px 6px 8px; font-size:var(--t-3); min-height:32px }
.flag{
  flex:0 0 auto; width:17px; height:15px; display:grid; grid:1fr 1fr/1fr 1fr; gap:1.5px;
  transform:skewY(-7deg);
}
.flag i{ display:block }
.flag i:nth-child(1){ background:#2ec7bb } .flag i:nth-child(2){ background:#7fe3da }
.flag i:nth-child(3){ background:#0f7f88 } .flag i:nth-child(4){ background:#4f5a66 }

.ql{ display:flex; gap:8px; align-items:center; padding:4px 7px; background:var(--face-lo) }
.ql svg{ display:block; width:17px; height:17px; opacity:.85 }

.tasks{ display:flex; gap:4px; flex:1 1 auto; min-width:0; padding-left:2px }
.taskbtn{
  flex:0 1 190px; min-width:0; justify-content:flex-start;
  font-weight:400; font-size:var(--t-2); padding:6px 10px; min-height:32px;
}
.taskbtn .tl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.taskbtn svg{ flex:0 0 auto; width:15px; height:15px }
.taskbtn.is-pressed{ font-weight:700; background:linear-gradient(180deg,#212429,#272b31), var(--dither) }

.tray{
  display:flex; align-items:center; gap:9px; padding:5px 9px 5px 8px;
  background:var(--face-lo); flex:0 0 auto;
}
.tray svg{ display:block; width:15px; height:15px; opacity:.8 }
.clock{ font:var(--t-2)/1 var(--font-ui); color:var(--ink); letter-spacing:.02em; min-width:64px; text-align:center }

.startmenu{
  position:fixed; left:5px; bottom:calc(var(--tb) + env(safe-area-inset-bottom) - 1px); z-index:45;
  width:246px; display:flex;
  background:var(--face);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out), 0 -12px 34px rgba(0,0,0,.75);
}
.sm-banner{
  flex:0 0 30px; margin:2px 0 2px 2px;
  background:linear-gradient(0deg, var(--tb-a), var(--tb-c));
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px;
}
.sm-banner span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font:700 15px/1 var(--font-read); letter-spacing:.04em; color:#e9fbff;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.sm-banner b{ font-weight:400; color:#9fd8de }
.sm-list{ flex:1 1 auto; padding:3px; display:flex; flex-direction:column; min-width:0 }
.sm-item{
  -webkit-appearance:none; appearance:none; background:none; border:1px solid transparent;
  display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  padding:9px 10px; min-height:40px; color:var(--ink);
  font:var(--t-3)/1.2 var(--font-ui); text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.sm-item svg{ flex:0 0 auto; width:20px; height:20px }
.sm-item:hover{ background:var(--sel); color:var(--sel-ink) }
.sm-item[aria-pressed="true"]{ font-weight:700 }
.sm-item[aria-pressed="true"]::after{ content:"\2022"; margin-left:auto; color:var(--accent) }
.sm-sep{
  height:2px; margin:4px 6px; border:0;
  border-top:1px solid var(--bev-shadow); border-bottom:1px solid var(--bev-light);
}


/* ---- 8. DIALOGS --------------------------------------------------------- */
.dlg-back{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5);
  display:grid; place-items:center; padding:16px;
}
.dlg{
  width:min(400px,100%); background:var(--face);
  border:1px solid;
  border-color:var(--bev-light) var(--bev-dark) var(--bev-dark) var(--bev-light);
  box-shadow:var(--sh-out), 0 24px 60px rgba(0,0,0,.8);
}
.dlg-body{ display:flex; gap:16px; padding:22px 20px 8px; align-items:flex-start }
.dlg-body p{ font:var(--t-4)/1.6 var(--font-read); color:var(--ink) }
.dlg-body .sub{ margin-top:8px; font-size:var(--t-3); color:var(--ink-3) }
.dlg-actions{ display:flex; justify-content:flex-end; gap:10px; padding:14px 18px 20px }

.shutdown{
  position:fixed; inset:0; z-index:70; background:#000;
  display:grid; place-items:center; gap:22px; align-content:center;
  text-align:center; padding:24px;
}
.shutdown p{
  font:700 clamp(19px,3.4vw,30px)/1.5 var(--font-read);
  color:#ffb000; letter-spacing:.01em; text-shadow:0 0 22px rgba(255,176,0,.4);
}


/* ---- 9. SCROLLBARS ------------------------------------------------------ */
::-webkit-scrollbar{ width:17px; height:17px }
::-webkit-scrollbar-track{ background:#1d2127 var(--dither) }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  border:1px solid;
  border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08), inset -1px -1px 0 rgba(0,0,0,.55);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#3f454f,#2b2f36) }
::-webkit-scrollbar-corner{ background:#1d2127 }
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment{
  height:17px; background-color:var(--face);
  background-repeat:no-repeat; background-position:center;
  border:1px solid;
  border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite);
}
::-webkit-scrollbar-button:vertical:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 2.5 8 7H1z' fill='%23dfe4ec'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 6.5 1 2h7z' fill='%23dfe4ec'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment{
  width:17px; background-color:var(--face);
  border:1px solid;
  border-color:var(--bev-hilite) var(--bev-dark) var(--bev-dark) var(--bev-hilite);
}


/* ---- 10. FOCUS + SELECTION ---------------------------------------------- */
::selection{ background:var(--sel); color:var(--sel-ink) }

:where(a,button,[tabindex]):focus-visible{
  outline:1px dotted var(--dot); outline-offset:-4px;
}
.skip:focus-visible{ outline:1px dotted var(--dot); outline-offset:-5px }


/* ---- 11. MOTION --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}