/* ============================================================
   windows-95-theme  ·  dist/win95.css
   A CSS-first Windows 95 skin. Activate by adding the .win95
   class to any scope (a layout root, a region, the whole body).
   Built from src/*.css — edit those and re-concatenate.
   Optional desktop shell + window manager: dist/win95-shell.js
   ============================================================ */


/* ===== tokens.css ===== */
/* ============================================================
   Windows 9x Theme — Design Tokens
   All values scoped to .win95 so the theme never leaks globally.
   Override any of these to retheme (e.g. Windows 98 Plus! schemes).
   ============================================================ */
.win95 {
  /* Surfaces */
  --w95-surface:        #c0c0c0;  /* the iconic 3D face gray   */
  --w95-surface-light:  #dfdfdf;  /* inner highlight bevel     */
  --w95-white:          #ffffff;  /* outer highlight / fields  */
  --w95-gray:           #808080;  /* inner shadow bevel        */
  --w95-black:          #000000;  /* outer shadow bevel        */
  --w95-desktop:        #008080;  /* classic teal desktop      */

  /* Accents */
  --w95-navy:           #000080;  /* active title bar start    */
  --w95-navy-light:     #1084d0;  /* active title bar end      */
  --w95-inactive:       #808080;  /* inactive title bar        */
  --w95-inactive-light: #b5b5b5;
  --w95-title-text:     #ffffff;
  --w95-highlight:      #000080;  /* selection / hover bg      */
  --w95-highlight-text: #ffffff;
  --w95-disabled-text:  #808080;
  --w95-disabled-shadow:#ffffff;  /* the engraved disabled look*/

  /* Typography */
  --w95-font: "Pixelated MS Sans Serif", "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif;
  --w95-font-size: 12px;

  /* Bevels — the heart of the look. Compose with box-shadow. */
  --w95-out:      inset -1px -1px var(--w95-black), inset 1px 1px var(--w95-white), inset -2px -2px var(--w95-gray), inset 2px 2px var(--w95-surface-light);
  --w95-in:       inset -1px -1px var(--w95-white), inset 1px 1px var(--w95-gray), inset -2px -2px var(--w95-surface-light), inset 2px 2px var(--w95-black);
  --w95-out-thin: inset -1px -1px var(--w95-gray), inset 1px 1px var(--w95-white);
  --w95-in-thin:  inset -1px -1px var(--w95-white), inset 1px 1px var(--w95-gray);

  /* Metrics */
  --w95-titlebar-h: 18px;
  --w95-taskbar-h:  28px;

  /* Reset internals to the theme baseline */
  color: var(--w95-black);
  font-family: var(--w95-font);
  font-size: var(--w95-font-size);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}

/* ===== base.css ===== */
/* ============================================================
   Base — scoped resets, fonts, links, scrollbars.
   Everything keys off the .win95 scope class so the host app is
   untouched until you opt in.
   ============================================================ */
.win95, .win95 * { box-sizing: border-box; }

.win95 { line-height: 1.3; }

/* Skin mode: theme controls but leave the host's own background/layout.
   Desktop mode adds the teal canvas — see desktop.css. */
.win95 a { color: var(--w95-navy); }
.win95 a:focus,
.win95 a:active { color: var(--w95-navy-light); }

/* Headings inside the theme stay flat and bold, not browser-default huge */
.win95 h1, .win95 h2, .win95 h3, .win95 h4 {
  font-family: var(--w95-font);
  font-weight: bold;
  margin: 0 0 8px;
}
.win95 h1 { font-size: 18px; }
.win95 h2 { font-size: 15px; }
.win95 h3 { font-size: 13px; }

/* Classic chunky scrollbars (WebKit/Blink). */
.win95 ::-webkit-scrollbar { width: 16px; height: 16px; }
.win95 ::-webkit-scrollbar-track {
  background: #dfdfdf;
  background-image:
    repeating-conic-gradient(#dfdfdf 0% 25%, #fff 0% 50%);
  background-size: 2px 2px;
}
.win95 ::-webkit-scrollbar-thumb {
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
}
.win95 ::-webkit-scrollbar-button {
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
  display: block;
  height: 16px;
  width: 16px;
}
.win95 { scrollbar-color: var(--w95-surface) #dfdfdf; }

/* ===== controls.css ===== */
/* ============================================================
   Controls — native form elements reskinned in place.
   These selectors match plain <button>, <input>, <select> etc.
   so existing markup gets themed without any class changes.
   Add .w95-raw to opt an element OUT of theming.
   ============================================================ */

/* ---- Buttons ---- */
.win95 button:not(.w95-raw),
.win95 input[type="button"],
.win95 input[type="submit"],
.win95 input[type="reset"],
.win95 .w95-btn {
  font-family: var(--w95-font);
  font-size: var(--w95-font-size);
  color: var(--w95-black);
  background: var(--w95-surface);
  border: none;
  box-shadow: var(--w95-out);
  padding: 4px 12px;
  min-height: 23px;
  cursor: pointer;
}
.win95 button:not(.w95-raw):active,
.win95 input[type="button"]:active,
.win95 input[type="submit"]:active,
.win95 .w95-btn:active,
.win95 .w95-btn[aria-pressed="true"] {
  box-shadow: var(--w95-in);
  padding: 5px 11px 3px 13px; /* nudge label to fake the press */
}
.win95 button:not(.w95-raw):focus-visible,
.win95 .w95-btn:focus-visible {
  outline: 1px dotted var(--w95-black);
  outline-offset: -4px;
}
.win95 button:disabled,
.win95 .w95-btn:disabled {
  color: var(--w95-disabled-text);
  text-shadow: 1px 1px var(--w95-disabled-shadow);
  cursor: default;
}

/* ---- Text fields ---- */
.win95 input[type="text"],
.win95 input[type="password"],
.win95 input[type="email"],
.win95 input[type="number"],
.win95 input[type="search"],
.win95 input[type="url"],
.win95 input[type="tel"],
.win95 input[type="date"],
.win95 textarea,
.win95 select {
  font-family: var(--w95-font);
  font-size: var(--w95-font-size);
  color: var(--w95-black);
  background: var(--w95-white);
  border: none;
  box-shadow: var(--w95-in);
  padding: 3px 4px;
}
.win95 textarea { resize: both; }
.win95 input:focus,
.win95 textarea:focus,
.win95 select:focus { outline: none; }

/* ---- Select ---- */
.win95 select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 22px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(var(--w95-surface), var(--w95-surface));
  background-repeat: no-repeat, no-repeat;
  background-position: right 6px center, right 0 top 0;
  background-size: 7px 4px, 18px 100%;
}

/* ---- Checkbox & radio (drawn, not native chrome) ---- */
.win95 input[type="checkbox"],
.win95 input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0 4px 0 0;
  background: var(--w95-white);
  box-shadow: var(--w95-in);
  position: relative;
  vertical-align: -2px;
  cursor: pointer;
}
.win95 input[type="radio"] { border-radius: 50%; }
.win95 input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid var(--w95-black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.win95 input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--w95-black);
}
.win95 label { cursor: pointer; }

/* ---- Group box (fieldset) ---- */
.win95 fieldset {
  border: none;
  box-shadow: var(--w95-out-thin);
  padding: 12px;
  margin: 0 0 12px;
}
.win95 legend {
  padding: 0 4px;
  background: var(--w95-surface);
}

/* ---- Sunken status / readout field ---- */
.win95 .w95-status,
.win95 .w95-well {
  background: var(--w95-surface);
  box-shadow: var(--w95-in-thin);
  padding: 3px 6px;
}

/* ---- Progress bar (segmented, like the real thing) ---- */
.win95 .w95-progress {
  background: var(--w95-white);
  box-shadow: var(--w95-in);
  padding: 2px;
  height: 20px;
}
.win95 .w95-progress > span {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, var(--w95-navy) 0 10px, transparent 10px 12px);
}

/* ===== chrome.css ===== */
/* ============================================================
   Chrome — window frames, title bars, taskbar, start menu.
   These are opt-in via classes (not auto-applied to host markup)
   so you can wrap regions selectively without hijacking layout.
   ============================================================ */

/* ---- Window ---- */
.win95 .w95-window {
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
  padding: 3px;
}
.win95 .w95-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--w95-titlebar-h);
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--w95-navy), var(--w95-navy-light));
  color: var(--w95-title-text);
  font-weight: bold;
}
.win95 .w95-window.is-inactive .w95-titlebar {
  background: linear-gradient(90deg, var(--w95-inactive), var(--w95-inactive-light));
}
.win95 .w95-titlebar-text {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win95 .w95-titlebar-controls { display: flex; gap: 2px; }

/* System buttons (_ □ ✕) */
.win95 .w95-sysbtn {
  font-family: var(--w95-font);
  font-size: 11px;
  line-height: 1;
  width: 16px; height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w95-surface);
  border: none;
  box-shadow: var(--w95-out);
  color: var(--w95-black);
  cursor: pointer;
  padding: 0;
  min-height: 0;
}
.win95 .w95-sysbtn:active { box-shadow: var(--w95-in); }

.win95 .w95-window-body { padding: 10px; }

/* ---- Menu bar ---- */
.win95 .w95-menubar {
  display: flex;
  gap: 2px;
  padding: 1px 2px;
}
.win95 .w95-menubar > * {
  padding: 2px 7px;
  cursor: pointer;
}
.win95 .w95-menubar > *:hover {
  background: var(--w95-highlight);
  color: var(--w95-highlight-text);
}

/* ---- Taskbar ---- */
.win95 .w95-taskbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--w95-taskbar-h);
  padding: 2px 3px;
  background: var(--w95-surface);
  box-shadow: inset 0 1px var(--w95-white), inset 0 2px var(--w95-surface-light);
}
.win95 .w95-start {
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px !important;
}
.win95 .w95-start-logo {
  width: 16px; height: 14px;
  background:
    linear-gradient(135deg, #f00 0 50%, #0f0 50% 100%);
  border: 1px solid var(--w95-black);
  flex: 0 0 auto;
}
.win95 .w95-tasklist { display: flex; gap: 4px; flex: 1; overflow: hidden; }
.win95 .w95-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  box-shadow: var(--w95-in-thin);
}

/* ---- Start menu ---- */
.win95 .w95-startmenu {
  display: flex;
  width: 200px;
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
  padding: 3px;
}
.win95 .w95-startmenu-rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: linear-gradient(0deg, var(--w95-navy), var(--w95-navy-light));
  color: var(--w95-title-text);
  font-weight: bold;
  font-size: 18px;
  padding: 10px 4px;
  text-align: right;
}
.win95 .w95-startmenu-items { flex: 1; }
.win95 .w95-startmenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  box-shadow: none !important;
  padding: 6px 8px !important;
  cursor: pointer;
  color: var(--w95-black);
}
.win95 .w95-startmenu-item:hover {
  background: var(--w95-highlight);
  color: var(--w95-highlight-text);
}
.win95 .w95-startmenu-sep {
  border-top: 1px solid var(--w95-gray);
  border-bottom: 1px solid var(--w95-white);
  margin: 3px 2px;
}

/* ===== desktop.css ===== */
/* ============================================================
   Desktop — the full metaphor. ONLY active when the scope also
   carries .win95--desktop, so "skin" mode stays lightweight.
       <body class="win95">                -> skin only
       <body class="win95 win95--desktop"> -> teal canvas + shell
   ============================================================ */
.win95.win95--desktop {
  background: var(--w95-desktop);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Desktop icon grid */
.win95--desktop .w95-desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 18px;
  padding: 10px;
  height: calc(100vh - var(--w95-taskbar-h));
}
.win95--desktop .w95-desktop-icon {
  width: 74px;
  text-align: center;
  color: #fff;
  background: transparent;
  border: none;
  box-shadow: none !important;
  cursor: pointer;
  padding: 4px !important;
}
.win95--desktop .w95-desktop-icon:focus-visible {
  outline: 1px dotted #fff;
}
.win95--desktop .w95-desktop-icon .label {
  display: block;
  margin-top: 4px;
  padding: 1px 3px;
}
.win95--desktop .w95-desktop-icon:focus-visible .label {
  background: var(--w95-highlight);
}

/* Pin the taskbar to the bottom of the desktop canvas */
.win95--desktop .w95-taskbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
}
.win95--desktop .w95-startmenu {
  position: fixed;
  bottom: var(--w95-taskbar-h);
  left: 2px;
  z-index: 1001;
}

/* Windows float on the desktop */
.win95--desktop .w95-window.is-floating {
  position: absolute;
  z-index: 10;
}

/* ===== shell.css ===== */
/* ============================================================
   Shell — styles for the optional win95-shell.js layer:
   pixel icons, window open animation, modal dialogs, shutdown.
   ============================================================ */

/* Pixel-art icons render crisp at any size */
.win95 .w95-icon {
  display: inline-block;
  vertical-align: middle;
  image-rendering: pixelated;
}
.win95 .w95-desktop-icon .w95-icon { display: block; margin: 0 auto 4px; }
.win95 .w95-startmenu-item .w95-icon { margin-right: 0; }
.win95 .w95-tasklist button .w95-icon,
.win95 .w95-titlebar-text .w95-icon { margin-right: 2px; }

/* Subtle "window opens" animation (Win9x didn't really animate, so keep it fast) */
@keyframes w95-open { from { transform: scale(.96); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.win95 .w95-anim { animation: w95-open .08s linear; }

/* Modal dialogs (Run, message boxes) */
.win95 .w95-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

/* Right-click context menu */
.win95 .w95-context {
  position: fixed;
  z-index: 6000;
  min-width: 150px;
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
  padding: 2px;
}
.win95 .w95-context button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  box-shadow: none !important;
  padding: 4px 18px !important;
  cursor: pointer;
}
.win95 .w95-context button:hover { background: var(--w95-highlight); color: var(--w95-highlight-text); }
.win95 .w95-context .w95-context-sep { border-top: 1px solid var(--w95-gray); border-bottom: 1px solid var(--w95-white); margin: 2px 1px; }

/* Shutdown / "safe to turn off" screen */
.win95 .w95-shutdown,
.w95-shutdown {
  position: fixed;
  inset: 0;
  background: #000;
  color: #c3c7cb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 99999;
  font-family: var(--w95-font, sans-serif);
  font-size: 16px;
  text-align: center;
}
.w95-shutdown .safe { color: #ff8c00; font-weight: bold; }

/* Window resize grip (bottom-right) */
.win95 .w95-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--w95-gray) 45% 55%, transparent 55% 70%, var(--w95-gray) 70% 80%, transparent 80%);
}

/* Desktop icons: free-positioned, selectable */
.win95 .w95-desktop-icons {
  position: absolute;
  inset: 0 0 var(--w95-taskbar-h) 0;
  display: block;
  height: auto;
  padding: 0;
}
.win95 .w95-desktop-icon { position: absolute; }
.win95 .w95-desktop-icon.selected .label { background: var(--w95-highlight); color: var(--w95-highlight-text); }
.win95 .w95-desktop-icon.selected .w95-icon { outline: 1px dotted var(--w95-white); outline-offset: -1px; }

/* Cascading Start submenu */
.win95 .w95-startmenu-item { position: relative; }
.win95 .w95-sub-arrow { margin-left: auto; padding-left: 10px; }
.win95 .w95-submenu {
  position: absolute;
  left: 100%; top: -3px;
  display: none;
  min-width: 150px;
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
  padding: 3px;
  z-index: 10;
}
.win95 .w95-startmenu-item.has-sub:hover > .w95-submenu { display: block; }

/* System tray icon button */
.win95 .w95-tray-icon {
  background: transparent;
  border: none;
  box-shadow: none !important;
  padding: 0 2px !important;
  min-height: 0 !important;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Tray popups (volume, calendar) */
.win95 .w95-popup {
  position: fixed;
  z-index: 5500;
  background: var(--w95-surface);
  box-shadow: var(--w95-out);
  padding: 2px;
}
.win95 .w95-cal { padding: 8px 10px; }
.win95 .w95-cal-head { font-weight: bold; text-align: center; margin-bottom: 6px; }
.win95 .w95-cal-grid { border-collapse: collapse; }
.win95 .w95-cal-grid th { color: var(--w95-gray); font-weight: bold; padding: 2px 5px; }
.win95 .w95-cal-grid td { text-align: center; padding: 2px 5px; }
.win95 .w95-cal-grid td.today { background: var(--w95-highlight); color: var(--w95-highlight-text); }

/* Boot splash */
.w95-splash {
  position: fixed; inset: 0;
  background: var(--w95-desktop, #008080);
  display: flex; align-items: center; justify-content: center;
  z-index: 90000;
  transition: opacity .3s;
}
.w95-splash.hide { opacity: 0; }
.w95-splash-box {
  display: flex; align-items: center; gap: 16px;
  background: var(--w95-surface, #c0c0c0);
  box-shadow: var(--w95-out);
  padding: 22px 30px;
  font-family: var(--w95-font, sans-serif);
}
.w95-splash-title { font-size: 22px; font-weight: bold; }
.w95-splash-sub { color: var(--w95-navy, #000080); margin-top: 4px; }

/* Screensaver */
.w95-screensaver { position: fixed; inset: 0; background: #000; z-index: 95000; cursor: none; }
.w95-screensaver canvas { display: block; }