/* 90s Bible: shell chrome. Themes set the variables in themes.css; this file draws the parts.
   Two skins: [data-skin="win"] (Win95/98/3.1 family) and [data-skin="mac"] (Mac OS 8 family). */

@font-face { font-family: "MS Sans"; src: url("../assets/fonts/ms_sans_serif.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "MS Sans"; src: url("../assets/fonts/ms_sans_serif_bold.woff2") format("woff2"); font-weight: 700; }

:root {
  --desk: #008080;
  --face: #c0c0c0;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #000000;
  --light: #dfdfdf;
  --text: #000000;
  --tb1: #000080;
  --tb2: #000080;
  --tbtext: #ffffff;
  --tbi1: #808080;
  --tbi2: #808080;
  --tbitext: #c0c0c0;
  --sel: #000080;
  --seltext: #ffffff;
  --paper: #ffffff;
  --link: #0000ff;
  --visited: #800080;
  --font: "MS Sans", "Pixelated MS Sans Serif", Tahoma, Arial, sans-serif;
  --font-size: 11px;
  --mono: "VT323", "Courier New", monospace;
  --title-font: var(--font);
  --radius: 0;
  --taskbar-h: 28px;
  --menubar-h: 20px;
  --wall: none;
  --wall-size: auto;
  --wall-repeat: repeat;
  --wall-color: var(--desk);
  --icon-text: #ffffff;
  --icon-shadow: #000000;
  --bevel-out: inset -1px -1px var(--dk), inset 1px 1px var(--light), inset -2px -2px var(--lo), inset 2px 2px var(--hi);
  --bevel-in: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--light), inset 2px 2px var(--lo);
  --bevel-field: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--light), inset 2px 2px var(--dk);
  --bevel-btn: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--light);
  --bevel-btn-down: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--light), inset 2px 2px var(--lo);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: var(--font); font-size: var(--font-size); color: var(--text);
  background: var(--wall-color);
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  cursor: default; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
html[data-aa="on"] body { -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
img, svg { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--link); }
a:visited { color: var(--visited); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sel); color: var(--seltext); }

/* ---------- Desktop ---------- */
.desktop { position: fixed; inset: 0; bottom: var(--taskbar-h); overflow: hidden; }
html[data-skin="mac"] .desktop { top: var(--menubar-h); bottom: 0; }
.wallpaper {
  position: absolute; inset: 0;
  background-color: var(--wall-color);
  background-image: var(--wall);
  background-size: var(--wall-size);
  background-repeat: var(--wall-repeat);
  background-position: center;
}
.icons {
  position: absolute; top: 6px; left: 4px; bottom: 0;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 2px 6px;
  max-width: 100%;
}
.icon {
  width: 76px; padding: 4px 2px; text-align: center; border: 1px dotted transparent;
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: default;
  background: none; color: var(--icon-text);
}
.icon .ic { width: 32px; height: 32px; display: block; }
.icon .lbl {
  font-size: var(--font-size); line-height: 1.15; max-width: 72px; overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 var(--icon-shadow); padding: 0 2px;
}
.icon:focus, .icon.sel { outline: none; }
.icon:focus .lbl, .icon.sel .lbl { background: var(--sel); color: var(--seltext); text-shadow: none; border: 1px dotted var(--seltext); }
.icon:focus .ic, .icon.sel .ic { filter: brightness(0.6) sepia(1) hue-rotate(200deg) saturate(3); }
html[data-skin="mac"] .icons { top: 8px; left: auto; right: 8px; align-content: flex-end; }
html[data-skin="mac"] .icon .lbl { text-shadow: none; color: var(--text); background: var(--paper); padding: 0 3px; overflow-wrap: normal; word-break: keep-all; max-width: 76px; }

.ic { display: inline-block; width: 16px; height: 16px; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center; }
.ic.fallback { background: var(--paper); border: 1px solid var(--dk); color: var(--dk); font: bold 14px/28px var(--font); text-align: center; }

/* ---------- Windows ---------- */
.windows { position: absolute; inset: 0; pointer-events: none; }
.win {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  background: var(--face); color: var(--text);
  box-shadow: var(--bevel-out); padding: 3px; min-width: 160px; min-height: 60px;
}
.win.minimized { display: none; }
.win.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.win .tb {
  display: flex; align-items: center; gap: 3px; height: 18px; padding: 1px 2px 1px 3px;
  background: linear-gradient(90deg, var(--tb1), var(--tb2)); color: var(--tbtext);
  font-family: var(--title-font); font-weight: 700; cursor: default; flex: none;
}
.win.inactive .tb { background: linear-gradient(90deg, var(--tbi1), var(--tbi2)); color: var(--tbitext); }
.win .tb .tb-icon { width: 16px; height: 16px; flex: none; }
.win .tb .tb-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .tb .tb-btns { display: flex; gap: 2px; flex: none; }
.win .tb .tb-btns button {
  width: 16px; height: 14px; padding: 0; border: 0; background: var(--face); color: var(--dk);
  box-shadow: var(--bevel-btn); font: bold 10px/1 var(--font); position: relative;
}
.win .tb .tb-btns button:active { box-shadow: var(--bevel-btn-down); }
.win .tb .tb-close { margin-left: 2px; }
.win .tb .tb-min::after { content: ""; position: absolute; left: 4px; bottom: 3px; width: 6px; height: 2px; background: var(--dk); }
.win .tb .tb-max::after { content: ""; position: absolute; left: 3px; top: 2px; width: 7px; height: 6px; border: 1px solid var(--dk); border-top-width: 2px; }
.win .tb .tb-close::before, .win .tb .tb-close::after { content: ""; position: absolute; left: 7px; top: 2px; width: 2px; height: 8px; background: var(--dk); transform: rotate(45deg); }
.win .tb .tb-close::after { transform: rotate(-45deg); }
.win .wmenu { display: flex; gap: 0; padding: 1px 0; flex: none; }
.win .wmenu button { background: none; border: 0; padding: 2px 6px; }
.win .wmenu button:hover, .win .wmenu button[aria-expanded="true"] { background: var(--sel); color: var(--seltext); }
.win .body { flex: 1; overflow: auto; position: relative; min-height: 0; }
.win .body.paper { background: var(--paper); box-shadow: var(--bevel-field); padding: 6px; margin: 0; user-select: text; -webkit-user-select: text; }
.win .status { display: flex; gap: 2px; margin-top: 2px; flex: none; }
.win .status span { flex: 1; padding: 2px 4px; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win .status span:last-child { flex: 0 0 auto; min-width: 60px; }
.win .resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: repeating-linear-gradient(135deg, transparent 0 2px, var(--lo) 2px 3px, var(--hi) 3px 4px, transparent 4px 6px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.win:not(.resizable) .resize { display: none; }

/* Mac OS 8 skin chrome (Platinum). DOM is the same as win: .tb > .tb-icon, .tb-title, .tb-btns > .tb-min/.tb-max/.tb-close.
   Close box sits left; zoom (.tb-max) and collapse (.tb-min) sit right, all absolutely placed inside the title bar. */
html[data-skin="mac"] .win {
  padding: 0 5px 5px; border: 1px solid var(--dk); outline: 0; background: var(--face);
  box-shadow: inset 1px 1px var(--hi), inset -1px -1px var(--lo), 1px 1px 0 rgba(0,0,0,.25);
}
html[data-skin="mac"] .win .tb {
  height: 21px; margin: 0 -5px 4px; padding: 0 44px 0 26px; gap: 0; justify-content: center; position: relative;
  background: linear-gradient(var(--hi), var(--face) 35%, var(--face) 80%, var(--light)); color: var(--text);
  border-bottom: 1px solid var(--lo); font-family: var(--title-font); font-weight: 700; font-size: 12px;
}
html[data-skin="mac"] .win .tb::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 11px;
  background: repeating-linear-gradient(180deg, var(--lo) 0 1px, var(--hi) 1px 2px);
}
html[data-skin="mac"] .win.inactive .tb { background: var(--face); color: var(--lo); }
html[data-skin="mac"] .win.inactive .tb::before { display: none; }
html[data-skin="mac"] .win.inactive .tb-btns { visibility: hidden; }
html[data-skin="mac"] .win .tb .tb-icon { display: none; }
html[data-skin="mac"] .win .tb .tb-title { flex: 0 1 auto; position: relative; background: var(--face); padding: 0 7px; line-height: 21px; }
html[data-skin="mac"] .win .tb .tb-btns { position: absolute; inset: 0; display: block; pointer-events: none; }
html[data-skin="mac"] .win .tb .tb-btns button {
  position: absolute; top: 4px; width: 13px; height: 13px; margin: 0; padding: 0; pointer-events: auto;
  background: linear-gradient(135deg, var(--lo), var(--hi)); border: 1px solid var(--dk);
  box-shadow: 0 0 0 2px var(--face), inset 1px 1px var(--lo), inset -1px -1px var(--hi);
}
html[data-skin="mac"] .win .tb .tb-btns button:active { background: var(--lo); box-shadow: 0 0 0 2px var(--face), inset 1px 1px var(--dk); }
html[data-skin="mac"] .win .tb .tb-btns button::before, html[data-skin="mac"] .win .tb .tb-btns button::after { display: none; transform: none; }
html[data-skin="mac"] .win .tb .tb-close { left: 8px; }
html[data-skin="mac"] .win .tb .tb-max { right: 24px; }
html[data-skin="mac"] .win .tb .tb-max::after { display: block; content: ""; position: absolute; left: 1px; top: 1px; width: 6px; height: 6px; border: 1px solid var(--dk); background: none; }
html[data-skin="mac"] .win .tb .tb-min { right: 7px; }
html[data-skin="mac"] .win .tb .tb-min::after { display: block; content: ""; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; width: auto; bottom: auto; background: var(--dk); box-shadow: 0 2px 0 var(--dk); }
html[data-skin="mac"] .win .wmenu { margin: -4px -5px 3px; padding: 1px 4px; border-bottom: 1px solid var(--lo); }
html[data-skin="mac"] .win .body.paper { box-shadow: none; border: 1px solid var(--dk); outline: 1px solid var(--hi); outline-offset: 0; }
html[data-skin="mac"] .win .status { margin-top: 3px; }
html[data-skin="mac"] .win .status span { box-shadow: none; border-top: 1px solid var(--lo); }
html[data-skin="mac"] .win .resize { right: 1px; bottom: 1px; background: var(--face); border-left: 1px solid var(--lo); border-top: 1px solid var(--lo); clip-path: none; width: 14px; height: 14px; }
html[data-skin="mac"] .win .resize::after { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border: 1px solid var(--dk); box-shadow: -2px -2px 0 -1px var(--face), -3px -3px 0 -1px var(--dk); }
html[data-skin="mac"] .win.dialog { padding: 0 8px 8px; box-shadow: inset 1px 1px var(--hi), inset -1px -1px var(--lo), inset 3px 3px var(--face), inset -3px -3px var(--face), inset 4px 4px var(--lo), 2px 2px 0 rgba(0,0,0,.3); }
html[data-skin="mac"] .win.dialog .tb { margin: 0 -8px 4px; }

/* ---------- Controls ---------- */
.btn {
  display: inline-block; min-width: 75px; padding: 4px 10px; background: var(--face); color: var(--text);
  border: 0; box-shadow: var(--bevel-btn); text-align: center; cursor: default; line-height: 1.2;
}
.btn:active, .btn.down { box-shadow: var(--bevel-btn-down); padding: 5px 9px 3px 11px; }
.btn:focus { outline: 1px dotted var(--dk); outline-offset: -5px; }
.btn.primary { outline: 1px solid var(--dk); outline-offset: 0; }
.btn:disabled { color: var(--lo); text-shadow: 1px 1px var(--hi); }
.btn.sm { min-width: 0; padding: 2px 6px; }
html[data-skin="mac"] .btn { border-radius: 6px; border: 1px solid var(--dk); box-shadow: inset 1px 1px var(--hi), inset -1px -1px var(--lo); background: var(--face); }
html[data-skin="mac"] .btn.primary { outline: none; box-shadow: 0 0 0 2px var(--face), 0 0 0 3px var(--dk), inset 1px 1px var(--hi), inset -1px -1px var(--lo); }
.field, input[type="text"], input[type="search"], input[type="number"], input[type="email"], textarea, select {
  background: var(--paper); color: var(--text); border: 0; box-shadow: var(--bevel-field); padding: 3px 4px; font-family: var(--font); font-size: var(--font-size);
  user-select: text; -webkit-user-select: text; min-height: 21px;
}
textarea { resize: vertical; min-height: 60px; font-family: var(--font); }
select { padding-right: 18px; }
html[data-skin="mac"] .field, html[data-skin="mac"] input, html[data-skin="mac"] textarea, html[data-skin="mac"] select { box-shadow: none; border: 1px solid var(--dk); }
input[type="checkbox"], input[type="radio"] { width: 13px; height: 13px; margin: 0 4px 0 0; vertical-align: -2px; accent-color: var(--text); }
label { display: inline-flex; align-items: center; gap: 2px; }
fieldset { border: 0; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi), inset 2px 2px var(--hi), inset -2px -2px var(--lo); padding: 10px; margin: 6px 0; }
legend { padding: 0 3px; }
hr { border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 6px 0; }
.toolbar { display: flex; gap: 2px; padding: 2px; flex-wrap: wrap; align-items: center; }
.toolbar .tbtn { min-width: 23px; height: 22px; padding: 0 4px; background: var(--face); border: 0; box-shadow: none; display: inline-flex; align-items: center; gap: 3px; }
.toolbar .tbtn:hover { box-shadow: var(--bevel-btn); }
.toolbar .tbtn:active, .toolbar .tbtn.on { box-shadow: var(--bevel-btn-down); }
.tabs { display: flex; gap: 0; margin-bottom: -2px; padding-left: 2px; position: relative; z-index: 1; }
.tabs button { background: var(--face); border: 0; padding: 4px 10px 3px; box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset 0 1px var(--hi), inset -2px 0 var(--lo); margin-right: -1px; }
.tabs button[aria-selected="true"] { padding-top: 2px; padding-bottom: 6px; position: relative; z-index: 2; box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--lo); }
.tabpanel { box-shadow: var(--bevel-out); padding: 10px; background: var(--face); }
.group-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.list { background: var(--paper); box-shadow: var(--bevel-field); padding: 2px; margin: 0; list-style: none; overflow: auto; user-select: text; }
.list li { padding: 1px 3px; white-space: nowrap; }
.list li.sel, .list li:hover { background: var(--sel); color: var(--seltext); }
.progress { height: 18px; box-shadow: var(--bevel-field); background: var(--paper); padding: 2px; }
.progress i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--sel) 0 8px, transparent 8px 10px); width: 0; transition: width .2s steps(4); }
.progress.smooth i { background: var(--sel); }
.dialog .body { padding: 12px 14px 10px; display: flex; gap: 14px; align-items: flex-start; }
.dialog .dlg-icon { width: 32px; height: 32px; flex: none; }
.dialog .dlg-text { flex: 1; line-height: 1.4; min-width: 140px; user-select: text; }
.dialog .dlg-btns { display: flex; gap: 6px; justify-content: center; padding: 0 10px 10px; }
.dialog .dlg-btns .btn { min-width: 75px; }

/* scrollbars: chunky grey */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--bevel-btn); }
::-webkit-scrollbar-button { background: var(--face); box-shadow: var(--bevel-btn); height: 16px; width: 16px; display: block; }
::-webkit-scrollbar-button:vertical:decrement { background: var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 10h8l-4-4z' fill='%23000'/%3E%3C/svg%3E") center no-repeat; }
::-webkit-scrollbar-button:vertical:increment { background: var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 6h8l-4 4z' fill='%23000'/%3E%3C/svg%3E") center no-repeat; }
::-webkit-scrollbar-button:horizontal:decrement { background: var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M10 4v8l-4-4z' fill='%23000'/%3E%3C/svg%3E") center no-repeat; }
::-webkit-scrollbar-button:horizontal:increment { background: var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 4v8l4-4z' fill='%23000'/%3E%3C/svg%3E") center no-repeat; }
::-webkit-scrollbar-corner { background: var(--face); }
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement, ::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
.comic, [style*="Comic"] { -webkit-font-smoothing: antialiased; }

/* ---------- Taskbar (win) ---------- */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h);
  background: var(--face); box-shadow: inset 0 1px var(--hi), inset 0 2px var(--face), 0 -1px var(--light);
  display: flex; align-items: center; gap: 3px; padding: 2px; z-index: 5000;
}
html[data-skin="mac"] .taskbar { display: none; }
.start-btn {
  height: 22px; padding: 0 6px 0 4px; display: inline-flex; align-items: center; gap: 4px; font-weight: 700;
  background: var(--face); border: 0; box-shadow: var(--bevel-btn); flex: none;
}
.start-btn[aria-expanded="true"], .start-btn:active { box-shadow: var(--bevel-btn-down); }
.start-logo { width: 16px; height: 14px; display: inline-block; background: url("../assets/icons/start.svg") center / contain no-repeat; }
.task-sep { width: 2px; height: 22px; box-shadow: inset 1px 0 var(--lo), inset -1px 0 var(--hi); margin: 0 1px; }
.tasks { flex: 1; display: flex; gap: 3px; overflow: hidden; height: 22px; }
.task {
  flex: 1 1 160px; max-width: 160px; min-width: 40px; height: 22px; padding: 0 4px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--face); border: 0; box-shadow: var(--bevel-btn); text-align: left; overflow: hidden; white-space: nowrap;
}
.task .ic { flex: none; }
.task span { overflow: hidden; text-overflow: ellipsis; }
.task.active { box-shadow: var(--bevel-btn-down); background: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; font-weight: 700; }
.tray { height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; box-shadow: inset 1px 1px var(--lo), inset -1px -1px var(--hi); flex: none; }
.tray-ic { width: 16px; height: 16px; border: 0; background: none; padding: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
#tray-sound { background: url("../assets/icons/speaker.svg") center / contain no-repeat; }
#tray-sound.off { background-image: url("../assets/icons/speaker-off.svg"); }
#tray-theme { background: url("../assets/icons/looks16.svg") center / contain no-repeat; }
#tray-modem { background: url("../assets/icons/modem.svg") center / contain no-repeat; }
.led { position: absolute; width: 3px; height: 3px; background: #0a0; bottom: 3px; }
.led.rx { left: 4px; } .led.tx { left: 9px; }
.led.on { background: #0f0; box-shadow: 0 0 2px #0f0; }
.clock { padding: 0 2px; min-width: 56px; text-align: center; }

/* Start menu */
.startmenu {
  position: fixed; left: 2px; bottom: var(--taskbar-h); width: 196px; background: var(--face); box-shadow: var(--bevel-out); padding: 3px; z-index: 6000;
  display: flex; gap: 0;
}
.startmenu .band { width: 21px; background: linear-gradient(180deg, var(--tb1), var(--tb2)); color: var(--tbtext); writing-mode: vertical-rl; transform: rotate(180deg); font: bold 18px/21px var(--title-font); padding: 6px 2px; letter-spacing: 1px; flex: none; }
.startmenu .band b { font-weight: 400; }
.startmenu ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.startmenu li { position: relative; }
.startmenu li > button { width: 100%; text-align: left; background: none; border: 0; padding: 4px 24px 4px 6px; display: flex; align-items: center; gap: 8px; height: 32px; }
.startmenu li.has-sub > button::after { content: ""; position: absolute; right: 8px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 4px solid currentColor; }
.startmenu li > button:hover, .startmenu li.open > button { background: var(--sel); color: var(--seltext); }
.startmenu li > button .ic { width: 24px; height: 24px; flex: none; }
.startmenu li.sep { height: 2px; margin: 2px 0; box-shadow: inset 0 1px var(--lo), inset 0 -1px var(--hi); }
.startmenu .sub { position: absolute; left: 100%; top: -3px; background: var(--face); box-shadow: var(--bevel-out); padding: 3px; min-width: 180px; max-height: 60vh; overflow: auto; z-index: 6001; }
.startmenu .sub li > button { height: 20px; padding: 2px 20px 2px 6px; }
.startmenu .sub li > button .ic { width: 16px; height: 16px; }

/* Context + popup menus (shared) */
.menu {
  position: fixed; background: var(--face); box-shadow: var(--bevel-out); padding: 3px; min-width: 150px; z-index: 7000; list-style: none; margin: 0;
  max-height: calc(100vh - 30px); overflow-y: auto; overflow-x: hidden;
}
.menu li > button { width: 100%; text-align: left; background: none; border: 0; padding: 3px 20px 3px 24px; display: flex; align-items: center; gap: 8px; height: 20px; white-space: nowrap; position: relative; }
.menu li > button:hover { background: var(--sel); color: var(--seltext); }
.menu li > button:disabled { color: var(--lo); text-shadow: 1px 1px var(--hi); }
.menu li > button .ic { position: absolute; left: 4px; }
.menu li > button.checked::before { content: "\2713"; position: absolute; left: 8px; }
.menu li.sep { height: 2px; margin: 3px 1px; box-shadow: inset 0 1px var(--lo), inset 0 -1px var(--hi); }
html[data-skin="mac"] .menu, html[data-skin="mac"] .startmenu { box-shadow: 1px 1px 0 var(--dk); border: 1px solid var(--dk); }

/* ---------- Mac menubar ---------- */
.menubar { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-h); background: var(--face); border-bottom: 1px solid var(--dk); z-index: 5000; align-items: stretch; padding: 0 6px; font-family: var(--title-font); font-size: 12px; }
html[data-skin="mac"] .menubar { display: flex; }
.mb-item { background: none; border: 0; padding: 0 9px; display: inline-flex; align-items: center; gap: 4px; }
.mb-item[aria-expanded="true"] { background: var(--sel); color: var(--seltext); }
.mb-spacer { flex: 1; }
.mb-logo-glyph { width: 16px; height: 16px; display: inline-block; background: url("../assets/icons/maclogo.svg") center / contain no-repeat; }
.mb-app-icon { width: 16px; height: 16px; display: inline-block; background-size: contain; }
.mb-clock { padding-right: 12px; }

/* ---------- Boot, saver, fullscreen ---------- */
.boot { position: fixed; inset: 0; z-index: 9000; background: #000; color: #aaa; font-family: var(--mono); font-size: 18px; display: none; }
.boot.on { display: block; }
.saver { position: fixed; inset: 0; z-index: 8500; background: #000; }
.fullscreen { position: fixed; inset: 0; z-index: 9500; }

/* ---------- Cursor trails, blink, marquee ---------- */
.trails { position: absolute; inset: 0; pointer-events: none; z-index: 4000; overflow: hidden; }
.trail { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none; animation: trailfade .7s linear forwards; font-size: 12px; line-height: 10px; text-align: center; color: #ff0; text-shadow: 0 0 2px #f80; }
@keyframes trailfade { to { opacity: 0; transform: translateY(14px) scale(.4); } }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee > span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.new-burst { display: inline-block; background: #f00; color: #ff0; font: bold 9px/1 var(--font); padding: 2px 3px; transform: rotate(-8deg); animation: blink 1s steps(1) infinite; }
.uc { text-align: center; padding: 16px 10px; }
.uc img { width: 100%; max-width: 240px; height: auto; }
.uc p { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .blink, html:not([data-motion="on"]) .new-burst { animation: none; }
  html:not([data-motion="on"]) .marquee > span { animation: none; padding-left: 0; }
}
html[data-motion="off"] .blink, html[data-motion="off"] .new-burst { animation: none; }
html[data-motion="off"] .marquee > span { animation: none; padding-left: 0; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root { --taskbar-h: 36px; }
  .icons { gap: 6px 2px; flex-direction: row; flex-wrap: wrap; align-content: flex-start; left: 0; right: 0; padding: 4px; justify-content: flex-start; bottom: auto; max-height: 100%; overflow: auto; }
  .icon { width: calc(25% - 2px); }
  html[data-skin="mac"] .icons { right: 0; align-content: flex-start; }
  .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; min-width: 0; }
  .win .resize { display: none; }
  .win .tb { height: 24px; }
  .win .tb .tb-btns button { width: 22px; height: 20px; }
  .win .tb .tb-max { display: none; }
  html[data-skin="mac"] .win .tb { height: 26px; }
  html[data-skin="mac"] .win .tb .tb-title { line-height: 26px; }
  html[data-skin="mac"] .win .tb .tb-btns button { width: 17px; height: 17px; top: 4px; }
  html[data-skin="mac"] .win .tb .tb-max { display: none; }
  html[data-skin="mac"] .win .tb::before { top: 6px; height: 13px; }
  .start-btn, .task { height: 30px; }
  .task { flex: 1 1 60px; min-width: 32px; }
  .task span:not(.ic) { display: none; }
  .task { justify-content: center; }
  .tray { height: 30px; }
  .startmenu { width: calc(100vw - 4px); }
  .startmenu li > button { height: 38px; }
  .startmenu .sub { position: fixed; left: 2px; right: 2px; top: auto; bottom: var(--taskbar-h); max-height: 70vh; }
  .menu li > button { height: 30px; }
  .btn { padding: 8px 12px; }
  .win.dialog { top: auto !important; height: auto !important; bottom: 0; }
}

/* Win message boxes carry no title-bar icon (1995 MessageBox look) */
html[data-skin="win"] .win.dialog .tb .tb-icon { display: none; }
html[data-skin="mac"] .menubar { font-weight: 700; }
.menubar { white-space: nowrap; overflow: hidden; }
.mb-app-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .mb-item { padding: 0 6px; }
  .mb-app-name { display: none; }
  .mb-clock { padding-right: 4px; }
}
@media (max-width: 360px) { .mb-item[data-menu="special"] { display: none; } }