/* ===== tokens.css ===== */
/* ============================================================
   Windows XP "Luna" Theme — Design Tokens
   All values scoped to .winxp so the theme never leaks globally.
   Override any of these to reskin (e.g. the Olive Green or Silver
   Luna variants) without touching the rules.
   ============================================================ */
.winxp {
  /* Surfaces — XP's warm control face replaces 95's flat silver */
  --xp-surface:        #ece9d8;  /* Luna control face (beige-gray)   */
  --xp-surface-light:  #ffffff;  /* top highlight on raised controls */
  --xp-surface-dim:    #d6d2c2;  /* control bottom / pressed face    */
  --xp-surface-edge:   #aca899;  /* sunken edge / engraved lines     */
  --xp-white:          #ffffff;  /* fields                           */
  --xp-window-bg:      #ece9d8;  /* window body                      */

  /* Luna blue — the signature glossy chrome */
  --xp-blue:           #0054e3;  /* core Luna blue (frames, focus)   */
  --xp-blue-deep:      #0038b8;  /* darker Luna blue                  */
  --xp-title-1:        #0058ee;  /* active title gradient: top       */
  --xp-title-2:        #3f8cf3;  /* active title gradient: gloss      */
  --xp-title-3:        #1452cc;  /* active title gradient: bottom     */
  --xp-title-edge:     #0046d5;  /* title hairline                    */
  --xp-inactive-1:     #7aa3eb;  /* inactive title: top               */
  --xp-inactive-2:     #a9c2f0;  /* inactive title: gloss             */
  --xp-inactive-3:     #6c95df;  /* inactive title: bottom            */
  --xp-title-text:     #ffffff;
  --xp-title-shadow:   rgba(0, 22, 84, .6);

  /* Window frame (the blue Luna border around every window) */
  --xp-frame:          #0054e3;
  --xp-frame-light:    #4f9bff;

  /* Selection / menu highlight */
  --xp-highlight:      #316ac5;  /* selection + menu hover bg        */
  --xp-highlight-text: #ffffff;
  --xp-hover-glow:     #fff3cd;  /* hot-tracked toolbar tint         */
  --xp-disabled-text:  #aca899;
  --xp-disabled-shadow:#ffffff;  /* the engraved disabled look        */

  /* Taskbar — the iconic blue bar */
  --xp-taskbar-1:      #2f7bf2;  /* bright top edge highlight         */
  --xp-taskbar-2:      #245edb;  /* main body                         */
  --xp-taskbar-3:      #1941a5;  /* bottom                            */
  --xp-taskbar-top:    #1c3dc6;  /* 1px rule under the gloss          */
  --xp-tray-1:         #0c59b9;  /* sunken system tray gradient       */
  --xp-tray-2:         #149af0;

  /* Start button — XP's green pill */
  --xp-start-1:        #3aa93b;  /* gloss top                         */
  --xp-start-2:        #2f9e36;  /* body                              */
  --xp-start-3:        #237d2a;  /* bottom                            */
  --xp-start-edge:     #1c5e22;

  /* Caption buttons */
  --xp-close-1:        #e9714e;  /* red close gloss                   */
  --xp-close-2:        #d6411e;
  --xp-close-3:        #a82911;
  --xp-caption-1:      #5fa9f8;  /* min/max blue gloss                */
  --xp-caption-2:      #2c74dd;
  --xp-caption-3:      #1b4fb0;

  /* Bliss desktop (CSS evocation of the green-hill wallpaper) */
  --xp-desktop:
    linear-gradient(180deg, #1f7fe5 0%, #4aa3ef 38%, #79c14a 38%, #5aa432 62%, #3f7d24 100%);

  /* Typography — Tahoma, antialiased (XP turned smoothing ON, unlike 95) */
  --xp-font: Tahoma, "Segoe UI", "Microsoft Sans Serif", Geneva, sans-serif;
  --xp-font-size: 11px;

  /* Border / radius recipes — XP softened 95's hard 3D bevels.
     Buttons & windows gain a subtle radius; fields stay a thin sunken line. */
  --xp-btn-radius: 3px;
  --xp-win-radius: 8px;
  --xp-field-border:  1px solid #7f9db9;          /* sunken field edge */
  --xp-field-shadow:  inset 1px 1px #b6c4d6;      /* faint inner shade */
  --xp-groove:        inset 1px 1px #aca899, inset -1px -1px #ffffff; /* engraved */
  --xp-raise:         inset 1px 1px #ffffff;      /* light top highlight */
  --xp-focus-glow:    0 0 0 1px #ffd24a, 0 0 4px 1px rgba(255,176,0,.55);

  /* Metrics */
  --xp-titlebar-h: 28px;
  --xp-taskbar-h:  30px;

  /* Reset internals to the theme baseline */
  color: #000;
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  -webkit-font-smoothing: antialiased;
}

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

.winxp { line-height: 1.35; }

/* Skin mode: theme controls but leave the host's own background/layout.
   Desktop mode adds the Bliss canvas — see desktop.css. */
.winxp a { color: var(--xp-blue); }
.winxp a:hover { color: var(--xp-title-2); text-decoration: underline; }

/* Headings inside the theme stay flat and bold, not browser-default huge */
.winxp h1, .winxp h2, .winxp h3, .winxp h4 {
  font-family: var(--xp-font);
  font-weight: bold;
  margin: 0 0 8px;
}
.winxp h1 { font-size: 17px; }
.winxp h2 { font-size: 14px; }
.winxp h3 { font-size: 12px; }

/* XP gradient scrollbars (WebKit/Blink) — softer than 95's dithered ones. */
.winxp ::-webkit-scrollbar { width: 17px; height: 17px; }
.winxp ::-webkit-scrollbar-track {
  background: #f1f0e8;
  box-shadow: inset 1px 0 #d4d0c4;
}
.winxp ::-webkit-scrollbar-thumb {
  border: 1px solid #9db3d5;
  border-radius: 2px;
  background: linear-gradient(180deg, #fbfcff, #c5d6f0 45%, #9ab6e4);
}
.winxp ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffffff, #d2e2f7 45%, #a9c4ec);
}
.winxp ::-webkit-scrollbar-button {
  display: block;
  height: 17px; width: 17px;
  border: 1px solid #9db3d5;
  border-radius: 2px;
  background: linear-gradient(180deg, #fbfcff, #c5d6f0 45%, #9ab6e4);
}
.winxp { scrollbar-color: #aac3ec #f1f0e8; }

/* ===== 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 .xp-raw to opt an element OUT of theming.
   ============================================================ */

/* ---- Buttons ---- */
.winxp button:not(.xp-raw),
.winxp input[type="button"],
.winxp input[type="submit"],
.winxp input[type="reset"],
.winxp .xp-btn {
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  color: #000;
  background: linear-gradient(180deg, #ffffff 0%, #f3f2eb 48%, #e0ddcf 49%, #f3f1e7 100%);
  border: 1px solid #003c74;
  border-radius: var(--xp-btn-radius);
  box-shadow: inset 0 0 0 1px #fdfdfd;
  padding: 3px 14px;
  min-height: 23px;
  cursor: pointer;
  transition: background .1s, box-shadow .1s;
}
.winxp button:not(.xp-raw):hover,
.winxp input[type="submit"]:hover,
.winxp .xp-btn:hover {
  border-color: #0054e3;
  background: linear-gradient(180deg, #ffffff 0%, #fdf7e3 48%, #ffe8a8 49%, #fff6dc 100%);
  box-shadow: inset 0 0 0 1px #fffaf0, 0 0 3px rgba(255,176,0,.35);
}
.winxp button:not(.xp-raw):active,
.winxp input[type="button"]:active,
.winxp input[type="submit"]:active,
.winxp .xp-btn:active,
.winxp .xp-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #cdcabb 0%, #e3e0d2 50%, #f2f0e6 100%);
  box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
  padding: 4px 13px 2px 15px; /* nudge label to fake the press */
}
/* Default (primary) button — XP gives it a persistent blue glow */
.winxp .xp-btn--default,
.winxp button.xp-default {
  border-color: #0054e3;
  box-shadow: inset 0 0 0 1px #cfe1ff, 0 0 3px rgba(0,84,227,.45);
}
.winxp button:not(.xp-raw):focus-visible,
.winxp .xp-btn:focus-visible {
  outline: 1px dotted #404040;
  outline-offset: -4px;
}
.winxp button:disabled,
.winxp .xp-btn:disabled {
  color: var(--xp-disabled-text);
  text-shadow: 1px 1px var(--xp-disabled-shadow);
  border-color: #c5c2b8;
  background: #ece9d8;
  box-shadow: none;
  cursor: default;
}

/* ---- Text fields ---- */
.winxp input[type="text"],
.winxp input[type="password"],
.winxp input[type="email"],
.winxp input[type="number"],
.winxp input[type="search"],
.winxp input[type="url"],
.winxp input[type="tel"],
.winxp input[type="date"],
.winxp textarea,
.winxp select {
  font-family: var(--xp-font);
  font-size: var(--xp-font-size);
  color: #000;
  background: var(--xp-white);
  border: var(--xp-field-border);
  border-radius: 0;
  box-shadow: var(--xp-field-shadow);
  padding: 3px 4px;
}
.winxp textarea { resize: both; }
.winxp input:focus,
.winxp textarea:focus,
.winxp select:focus {
  outline: none;
  border-color: #0054e3;
}

/* ---- Select ---- */
.winxp 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(180deg, #ffffff, #e0ddcf);
  background-repeat: no-repeat, no-repeat;
  background-position: right 6px center, right 0 top 0;
  background-size: 7px 4px, 17px 100%;
}

/* ---- Checkbox & radio (drawn, not native chrome) ---- */
.winxp input[type="checkbox"],
.winxp input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0 5px 0 0;
  background: var(--xp-white);
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px #d6dde7;
  position: relative;
  vertical-align: -2px;
  cursor: pointer;
}
.winxp input[type="radio"] { border-radius: 50%; }
.winxp input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #0a8a0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.winxp input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1c7d1c;
}
.winxp input[type="checkbox"]:focus-visible,
.winxp input[type="radio"]:focus-visible { outline: 1px dotted #404040; }
.winxp label { cursor: pointer; }

/* ---- Group box (fieldset) — XP's etched groove ---- */
.winxp fieldset {
  border: 1px solid #d0cdbf;
  border-top-color: #aca899;
  border-left-color: #aca899;
  border-radius: 3px;
  padding: 12px;
  margin: 0 0 12px;
}
.winxp legend {
  padding: 0 4px;
  color: #0a246a;
  font-weight: bold;
}

/* ---- Sunken status / readout field ---- */
.winxp .xp-status,
.winxp .xp-well {
  background: var(--xp-surface);
  border: 1px solid #aca899;
  box-shadow: inset 1px 1px #ffffff;
  padding: 3px 6px;
}

/* ---- Progress bar (segmented XP blocks) ---- */
.winxp .xp-progress {
  background: var(--xp-white);
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px #d6dde7;
  padding: 2px;
  height: 19px;
}
.winxp .xp-progress > span {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(90deg,
      #3fb14a 0 9px, transparent 9px 11px),
    linear-gradient(180deg, #6fd47a, #2f9e36);
  background-blend-mode: screen, normal;
}

/* ===== 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 — XP's blue Luna frame with rounded top ---- */
.winxp .xp-window {
  background: var(--xp-window-bg);
  border: 3px solid var(--xp-frame);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 0 1px #0046d5, 2px 2px 8px rgba(0,0,0,.35);
}
.winxp .xp-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--xp-titlebar-h);
  padding: 0 4px 0 6px;
  border-radius: 7px 7px 0 0;
  background:
    linear-gradient(180deg,
      var(--xp-title-3) 0%, var(--xp-title-2) 6%, var(--xp-title-1) 15%,
      var(--xp-title-1) 52%, #1659d6 88%, var(--xp-title-3) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 -1px rgba(0,0,40,.35);
  color: var(--xp-title-text);
  font-weight: bold;
  text-shadow: 1px 1px var(--xp-title-shadow);
}
.winxp .xp-window.is-inactive .xp-titlebar {
  background:
    linear-gradient(180deg,
      var(--xp-inactive-3) 0%, var(--xp-inactive-2) 6%, var(--xp-inactive-1) 15%,
      var(--xp-inactive-1) 52%, #6f99e2 88%, var(--xp-inactive-3) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.4);
  text-shadow: 1px 1px rgba(70,100,170,.5);
}
.winxp .xp-titlebar-text {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.winxp .xp-titlebar-controls { display: flex; gap: 2px; }

/* Caption buttons — glossy rounded; glyphs drawn in CSS so they stay crisp */
.winxp .xp-sysbtn {
  position: relative;
  font-size: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--xp-caption-1) 0%, var(--xp-caption-2) 48%, var(--xp-caption-3) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.65), inset 0 -1px rgba(0,0,30,.25);
  cursor: pointer;
  padding: 0;
  min-height: 0;
}
.winxp .xp-sysbtn:hover { filter: brightness(1.13); }
.winxp .xp-sysbtn:active { filter: brightness(.88); box-shadow: inset 1px 1px 2px rgba(0,0,0,.45); }
.winxp .xp-sysbtn::before,
.winxp .xp-sysbtn::after { content: ""; position: absolute; left: 50%; top: 50%; }
/* minimize: short bar near the bottom */
.winxp .xp-sysbtn--min::before { width: 8px; height: 3px; background: #fff; transform: translate(-50%, 4px); }
/* maximize: window outline with a thick top edge */
.winxp .xp-sysbtn--max::before { width: 10px; height: 9px; border: 1px solid #fff; border-top-width: 3px; transform: translate(-50%, -50%); }
/* close: a red button with a white X */
.winxp .xp-sysbtn--close {
  background: linear-gradient(180deg, var(--xp-close-1) 0%, var(--xp-close-2) 48%, var(--xp-close-3) 100%);
}
.winxp .xp-sysbtn--close::before,
.winxp .xp-sysbtn--close::after { width: 11px; height: 2.5px; background: #fff; border-radius: 1px; }
.winxp .xp-sysbtn--close::before { transform: translate(-50%, -50%) rotate(45deg); }
.winxp .xp-sysbtn--close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.winxp .xp-window-body { padding: 10px; }

/* ---- Menu bar ---- */
.winxp .xp-menubar {
  display: flex;
  gap: 2px;
  padding: 2px 3px;
  background: var(--xp-window-bg);
}
.winxp .xp-menubar > * {
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.winxp .xp-menubar > *:hover {
  background: var(--xp-highlight);
  color: var(--xp-highlight-text);
}

/* ---- Taskbar — the iconic blue bar ---- */
.winxp .xp-taskbar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: var(--xp-taskbar-h);
  padding: 0 4px 0 0;
  background:
    linear-gradient(180deg,
      var(--xp-taskbar-1) 0%, #2a6fe8 3%, var(--xp-taskbar-2) 9%,
      var(--xp-taskbar-2) 88%, var(--xp-taskbar-3) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.45), inset 0 2px var(--xp-taskbar-top);
}
.winxp .xp-start {
  font-style: italic;
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px 2px 8px !important;
  margin: 0;
  border: none !important;
  border-radius: 0 9px 9px 0 !important;
  background:
    linear-gradient(180deg, var(--xp-start-1) 0%, var(--xp-start-2) 45%, var(--xp-start-3) 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.5), inset -2px 0 6px rgba(0,0,0,.15) !important;
  text-shadow: 1px 1px 2px rgba(0,40,0,.6);
  cursor: pointer;
}
.winxp .xp-start:hover { filter: brightness(1.08); }
.winxp .xp-start-logo {
  width: 20px; height: 18px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cg transform='skewX(-9)' transform-origin='center'%3E%3Cpath d='M3 2c2-.6 4-.6 6 0v6c-2-.6-4-.6-6 0z' fill='%23f25022'/%3E%3Cpath d='M11 2c2 .6 4 .6 6 0v6c-2 .6-4 .6-6 0z' fill='%237fba00'/%3E%3Cpath d='M3 10c2-.6 4-.6 6 0v6c-2-.6-4-.6-6 0z' fill='%2300a4ef'/%3E%3Cpath d='M11 10c2 .6 4 .6 6 0v6c-2 .6-4 .6-6 0z' fill='%23ffb900'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.winxp .xp-tasklist { display: flex; align-items: center; gap: 4px; flex: 1; overflow: hidden; padding: 3px 0 3px 6px; }
.winxp .xp-tasklist button {
  background: linear-gradient(180deg, #3f8cf3, #2867d8) !important;
  color: #fff !important;
  border: 1px solid #1c4db0 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.35) !important;
  min-height: 0 !important;
  padding: 3px 10px !important;
  font-weight: normal;
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.winxp .xp-tasklist button.is-active {
  background: linear-gradient(180deg, #1c47a8, #15347e) !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.4) !important;
}
.winxp .xp-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 9px;
  margin-left: auto;
  color: #fff;
  background: linear-gradient(180deg, var(--xp-tray-1), var(--xp-tray-2) 40%, var(--xp-tray-1));
  box-shadow: inset 1px 0 rgba(0,0,40,.4), inset 2px 0 rgba(120,180,255,.4);
  font-size: 11px;
}
.winxp .xp-tray-ico {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.winxp .xp-tray-clock { letter-spacing: .3px; }

/* ---- Start menu — XP's two-panel flyout ---- */
.winxp .xp-startmenu {
  width: 320px;
  background: #fff;
  border: 1px solid #0a3bb1;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 0 12px rgba(0,0,0,.4);
  overflow: hidden;
}
.winxp .xp-startmenu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 12px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,60,.5);
  background:
    linear-gradient(180deg, #1f60e0 0%, #3f8cf3 45%, #1b4fc0 100%);
  border-bottom: 2px solid #d98c1b;
}
.winxp .xp-startmenu-avatar {
  width: 38px; height: 38px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffd27f, #e07f3f);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.4);
}
.winxp .xp-startmenu-cols { display: flex; }
.winxp .xp-startmenu-left  { flex: 1; background: #fff; padding: 6px; }
.winxp .xp-startmenu-right {
  width: 124px;
  background: linear-gradient(180deg, #d3e5fa, #bcd6f5);
  padding: 6px;
  border-left: 1px solid #aac3ec;
}
.winxp .xp-startmenu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  border-radius: 3px;
  padding: 6px 8px !important;
  min-height: 0 !important;
  cursor: pointer;
  color: #000;
  font-size: 11px;
}
.winxp .xp-startmenu-right .xp-startmenu-item { color: #15387e; font-weight: bold; }
.winxp .xp-startmenu-item:hover {
  background: var(--xp-highlight);
  color: var(--xp-highlight-text) !important;
}
.winxp .xp-startmenu-item:hover .xp-icon { filter: none; }
/* "All Programs" pinned to the bottom of the left column, bleeding to its edges */
.winxp .xp-startmenu-allprog {
  margin: 5px -6px -6px;
  padding: 8px 12px !important;
  border-top: 1px solid #c3d2e6;
  font-weight: bold;
}
.winxp .xp-startmenu-allprog .arrow {
  margin-left: auto;
  width: 17px; height: 17px;
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px;
  background: linear-gradient(180deg, #5aa93e, #2f7d2a);
  box-shadow: inset 0 1px rgba(255,255,255,.45);
}
.winxp .xp-startmenu-sep {
  border-top: 1px solid #c3d2e6;
  margin: 4px 6px;
}
.winxp .xp-startmenu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #3f8cf3 0%, #1b4fc0 100%);
  border-top: 2px solid #d98c1b;
}
.winxp .xp-startmenu-footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 3px 4px !important;
  font-size: 11px;
  cursor: pointer;
}
.winxp .xp-startmenu-footer button:hover { text-decoration: underline; }
.winxp .xp-startmenu-footer .ico {
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px rgba(255,255,255,.5);
}
.winxp .xp-startmenu-footer .ico--logoff { background: linear-gradient(180deg,#4fa64f,#2c7d2c); }
.winxp .xp-startmenu-footer .ico--power  { background: linear-gradient(180deg,#e9714e,#c0341a); }

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

/* Desktop icon grid */
.winxp--desktop .xp-desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
  padding: 12px;
  height: calc(100vh - var(--xp-taskbar-h));
}
.winxp--desktop .xp-desktop-icon {
  width: 76px;
  text-align: center;
  color: #fff;
  background: transparent;
  border: none;
  box-shadow: none !important;
  cursor: pointer;
  padding: 4px !important;
  min-height: 0 !important;
}
.winxp--desktop .xp-desktop-icon .label {
  display: block;
  margin-top: 4px;
  padding: 1px 3px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.8);
  font-size: 11px;
}
.winxp--desktop .xp-desktop-icon:focus-visible .label,
.winxp--desktop .xp-desktop-icon.is-selected .label {
  background: rgba(49,106,197,.7);
  text-shadow: none;
}
.winxp--desktop .xp-desktop-icon:focus-visible { outline: 1px dotted rgba(255,255,255,.8); }

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

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

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

/* Icons — XP icons were smooth, so render scaled (not pixelated) */
.winxp .xp-icon {
  display: inline-block;
  vertical-align: middle;
  image-rendering: auto;
}
.winxp .xp-desktop-icon .xp-icon { display: block; margin: 0 auto 4px; }
.winxp .xp-startmenu-item .xp-icon { margin-right: 0; }
.winxp .xp-tasklist button .xp-icon,
.winxp .xp-titlebar-text .xp-icon { margin-right: 2px; }

/* XP's gentle "window opens" zoom */
@keyframes xp-open { from { transform: scale(.92); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.winxp .xp-anim { animation: xp-open .12s ease-out; }

/* Start menu slide-up */
@keyframes xp-startmenu-in { from { transform: translateY(12px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
.winxp .xp-startmenu.xp-anim { animation: xp-startmenu-in .12s ease-out; }

/* Modal dialogs (Run, message boxes) */
.winxp .xp-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 */
.winxp .xp-context {
  position: fixed;
  z-index: 6000;
  min-width: 160px;
  background: #fff;
  border: 1px solid #99a;
  box-shadow: 3px 3px 8px rgba(0,0,0,.35);
  padding: 2px;
}
.winxp .xp-context button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  box-shadow: none !important;
  border-radius: 3px;
  min-height: 0 !important;
  padding: 5px 18px !important;
  cursor: pointer;
}
.winxp .xp-context button:hover { background: var(--xp-highlight); color: var(--xp-highlight-text); }
.winxp .xp-context .xp-context-sep { border-top: 1px solid #d4d0c4; margin: 2px 1px; }

/* Log off / Turn off computer screen — XP's blue gradient curtain */
.winxp .xp-shutdown,
.xp-shutdown {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #5a7edc 0%, #3a5bbf 50%, #28409a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 99999;
  font-family: var(--xp-font, sans-serif);
  font-size: 16px;
  text-align: center;
}
.xp-shutdown .brand { font-size: 22px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,40,.6); }
.xp-shutdown .panel {
  display: flex; gap: 36px;
  padding: 28px 40px;
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(0,0,60,.35);
  background: rgba(255,255,255,.06);
}
.xp-shutdown .opt { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.xp-shutdown .opt .orb {
  width: 46px; height: 46px; border-radius: 50%;
  box-shadow: inset 0 2px rgba(255,255,255,.6), 0 2px 5px rgba(0,0,0,.4);
}
.xp-shutdown .opt--standby .orb { background: radial-gradient(circle at 35% 30%, #ffd76b, #d6911e); }
.xp-shutdown .opt--off .orb     { background: radial-gradient(circle at 35% 30%, #ff9a7a, #c0341a); }
.xp-shutdown .opt--restart .orb { background: radial-gradient(circle at 35% 30%, #8fd0ff, #2f74dd); }

/* ===== responsive.css ===== */
/* ============================================================
   Responsive — make the theme usable on ANY device.
   Two independent axes:
     • pointer type  (coarse = touch) -> bigger hit targets
     • viewport width (phones)        -> reflow the desktop metaphor
   Loaded last so these rules win. The shell (winxp-shell.js) cooperates:
   it opens windows full-screen on phones and uses pointer events so drag,
   drawing and tap-to-open work with a finger as well as a mouse.
   ============================================================ */

/* ---- Touch devices: enlarge tap targets (regardless of width) ---- */
@media (pointer: coarse) {
  .winxp button:not(.xp-raw),
  .winxp input[type="button"],
  .winxp input[type="submit"],
  .winxp input[type="reset"],
  .winxp .xp-btn { min-height: 32px; }
  .winxp .xp-sysbtn { width: 30px; height: 26px; }
  .winxp .xp-sysbtn--min::before { transform: translate(-50%, 6px); }
  .winxp .xp-menubar > * { padding: 8px 12px; }
  .winxp .xp-startmenu-item { padding: 12px 10px !important; }
  .winxp input[type="checkbox"],
  .winxp input[type="radio"] { width: 18px; height: 18px; }
  .winxp .xp-exp-item { width: 108px; }
  .winxp .xp-titlebar { touch-action: none; }      /* let JS handle drag, not scroll */
  .winxp .xp-paint-canvas { touch-action: none; }  /* draw, don't scroll */
}

/* ---- Phones / very small viewports: reflow the desktop ---- */
@media (max-width: 640px) {
  .winxp { --xp-taskbar-h: 46px; }

  /* Start button + taskbar sized for thumbs */
  .winxp .xp-start { font-size: 18px; padding: 0 15px 3px 9px !important; border-radius: 0 12px 12px 0 !important; }
  .winxp .xp-start-logo { width: 22px; height: 20px; }
  .winxp .xp-tasklist { padding-left: 5px; gap: 3px; }
  .winxp .xp-tasklist button { max-width: 42vw; padding: 8px 8px !important; }
  .winxp .xp-tray { padding: 0 9px; }
  .winxp .xp-tray-ico { display: none; }            /* keep the clock, drop tiny icons */
  .winxp .xp-tray-clock { font-size: 12px; }

  /* Start menu: nearly full width, scrollable */
  .winxp .xp-startmenu {
    width: 94vw; max-width: 360px;
    max-height: calc(100vh - var(--xp-taskbar-h));
    overflow: auto;
  }
  .winxp .xp-startmenu-header { height: 60px; }
  .winxp .xp-startmenu-right { width: 42%; }

  /* Desktop icons: a wrapping grid that adapts to portrait/landscape */
  .winxp--desktop .xp-desktop-icons {
    flex-direction: row; flex-wrap: wrap; align-content: flex-start;
    height: auto; max-height: calc(100vh - var(--xp-taskbar-h));
    gap: 4px; padding: 8px;
  }
  .winxp--desktop .xp-desktop-icon { width: 84px; }

  /* Windows go full-screen on phones (the shell adds .is-mobile-max) */
  .winxp--desktop .xp-window.is-mobile-max {
    left: 0 !important; top: 0 !important;
    width: 100vw !important; height: calc(100vh - var(--xp-taskbar-h)) !important;
    border-width: 0; border-radius: 0;
    box-shadow: none;
  }
  .winxp .xp-window.is-mobile-max .xp-titlebar { border-radius: 0; }
}