/*
 * Registry 95: the desktop shell the 3D computer runs.
 *
 * Tokens and bevel recipes from the retro-design-system "02 Windows 95" style
 * (https://github.com/NovusGFX/retro-design-system, MIT License, Copyright (c)
 * 2026 NovusGFX; see THIRD-PARTY.md). Extended here with the parts a whole OS
 * needs: desktop icons, start menu, list views, tabs, wizard, message boxes,
 * and a CRT overlay.
 */
.os {
  --bg: #008080;
  --chrome: #c0c0c0;
  --chrome-light: #dfdfdf;
  --chrome-lighter: #ffffff;
  --chrome-dark: #808080;
  --chrome-darker: #000000;
  --ink: #000;
  --title: #000080;
  --title-2: #1084d0;
  --title-off: #808080;
  --title-off-2: #b5b5b5;
  --title-text: #fff;
  --select: #000080;
  --amber: #f5a623;
  --buy: #007a3d;
  --sell: #b00020;
  --font: "MS Sans Serif", "Pixelated MS Sans Serif", Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  --mono: "Courier New", Courier, ui-monospace, monospace;

  position: relative;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 11px/1.3 var(--font);
  user-select: none;
  -webkit-font-smoothing: none;
  font-smooth: never;
  cursor: default;
}
.os *, .os *::before, .os *::after { box-sizing: border-box; }
.os button, .os input, .os select, .os textarea { font: inherit; color: inherit; }
.os a { color: #0000ee; }
.os a:visited { color: #551a8b; }
.os :focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.os .sel, .os ::selection { background: var(--select); color: #fff; }

/* ---- bevels ---- */
.os .raised {
  background: var(--chrome);
  border-top: 1px solid var(--chrome-lighter); border-left: 1px solid var(--chrome-lighter);
  border-right: 1px solid var(--chrome-darker); border-bottom: 1px solid var(--chrome-darker);
  box-shadow: inset -1px -1px 0 var(--chrome-dark), inset 1px 1px 0 var(--chrome-light);
}
.os .sunken {
  border-top: 1px solid var(--chrome-dark); border-left: 1px solid var(--chrome-dark);
  border-right: 1px solid var(--chrome-lighter); border-bottom: 1px solid var(--chrome-lighter);
  box-shadow: inset 1px 1px 0 var(--chrome-darker), inset -1px -1px 0 var(--chrome-light);
}
.os .field { background: #fff; }
.os .well { background: #fff; overflow: auto; user-select: text; }

/* ---- desktop ---- */
.os .desktop { position: absolute; inset: 0 0 28px 0; }
.os .icons {
  position: absolute; left: 6px; top: 6px; bottom: 6px;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 6px 4px;
}
.os .icon {
  width: 76px; padding: 4px 2px; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; text-align: center; cursor: default;
}
.os .icon svg, .os .icon img { width: 32px; height: 32px; image-rendering: pixelated; }
.os .icon span { padding: 1px 2px; line-height: 1.2; text-shadow: none; }
.os .icon:focus span, .os .icon.on span { background: var(--select); outline: 1px dotted #fff; }
.os .icon:focus svg, .os .icon.on svg { filter: url(#r95-sel) }
.os .wallpaper {
  position: absolute; right: 28px; bottom: 22px; display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.55); font: bold 13px var(--font); pointer-events: none;
}
.os .wallpaper img { width: 44px; height: 44px; border-radius: 50%; opacity: .8; image-rendering: auto; }

/* ---- windows ---- */
.os .win {
  position: absolute; display: flex; flex-direction: column;
  min-width: 220px; min-height: 120px; padding: 3px;
  background: var(--chrome);
  border-top: 2px solid var(--chrome-light); border-left: 2px solid var(--chrome-light);
  border-right: 2px solid var(--chrome-darker); border-bottom: 2px solid var(--chrome-darker);
  box-shadow: inset -1px -1px 0 var(--chrome-dark), inset 1px 1px 0 var(--chrome-lighter);
}
.os .win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.os .win[hidden] { display: none; }
.os .titlebar {
  display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 2px 0 3px; flex: none;
  background: linear-gradient(to right, var(--title-off), var(--title-off-2));
  color: #c0c0c0; font-weight: bold; white-space: nowrap;
}
.os .win.focus > .titlebar { background: linear-gradient(to right, var(--title), var(--title-2)); color: var(--title-text); }
.os .titlebar img, .os .titlebar svg { width: 16px; height: 16px; flex: none; }
.os .titlebar .tt { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.os .tbtns { display: flex; gap: 0; }
.os .tbtn {
  width: 16px; height: 14px; padding: 0; display: grid; place-items: center;
  font: bold 9px/1 var(--font); color: #000;
}
.os .tbtn.x { margin-left: 2px; }
.os .tbtn:active, .os .btn:active:not(:disabled), .os .btn.on {
  border-top-color: var(--chrome-darker); border-left-color: var(--chrome-darker);
  border-right-color: var(--chrome-lighter); border-bottom-color: var(--chrome-lighter);
  box-shadow: inset 1px 1px 0 var(--chrome-dark);
}
.os .menubar { display: flex; gap: 0; padding: 1px 0; flex: none; }
.os .menubar button { border: 0; background: none; padding: 2px 7px; }
.os .menubar button:hover, .os .menubar button.open { background: var(--select); color: #fff; }
.os .menu {
  position: absolute; z-index: 50; min-width: 160px; padding: 2px;
}
.os .menu button, .os .menu a {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 20px 4px 22px;
  border: 0; background: none; text-align: left; color: #000; text-decoration: none; white-space: nowrap;
}
.os .menu button:hover, .os .menu a:hover { background: var(--select); color: #fff; }
.os .menu hr { border: 0; border-top: 1px solid var(--chrome-dark); border-bottom: 1px solid #fff; margin: 3px 2px; }
.os .wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: 3px; }
.os .pad { padding: 8px; overflow: auto; }
.os .statusbar { display: flex; gap: 2px; margin-top: 2px; flex: none; }
.os .statusbar > span { padding: 2px 4px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os .statusbar > span:last-child { flex: 0 0 auto; min-width: 120px; }
.os .grip { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 45%, #fff 45% 52%, #808080 52% 60%, transparent 60% 70%, #fff 70% 77%, #808080 77% 85%, transparent 85%); }

/* ---- controls ---- */
.os .btn {
  min-width: 75px; height: 23px; padding: 0 10px;
  background: var(--chrome);
  border-top: 1px solid var(--chrome-lighter); border-left: 1px solid var(--chrome-lighter);
  border-right: 1px solid var(--chrome-darker); border-bottom: 1px solid var(--chrome-darker);
  box-shadow: inset -1px -1px 0 var(--chrome-dark), inset 1px 1px 0 var(--chrome-light);
}
.os .btn.sm { min-width: 0; height: 21px; padding: 0 6px; }
.os .btn.default { outline: 1px solid #000; outline-offset: 0; }
.os .btn:disabled { color: var(--chrome-dark); text-shadow: 1px 1px 0 #fff; }
.os .btn.buy:not(:disabled) { color: var(--buy); font-weight: bold; }
.os .btn.sell:not(:disabled) { color: var(--sell); font-weight: bold; }
.os .input, .os select.input, .os textarea.input {
  height: 21px; padding: 2px 3px; background: #fff; border: 0; border-radius: 0;
  border-top: 1px solid var(--chrome-dark); border-left: 1px solid var(--chrome-dark);
  border-right: 1px solid var(--chrome-lighter); border-bottom: 1px solid var(--chrome-lighter);
  box-shadow: inset 1px 1px 0 var(--chrome-darker), inset -1px -1px 0 var(--chrome-light);
  user-select: text;
}
.os textarea.input { height: auto; resize: none; }
.os .input:disabled { background: var(--chrome); }
.os .input[aria-invalid="true"] { color: var(--sell); }
.os fieldset { border: 1px solid var(--chrome-dark); box-shadow: 1px 1px 0 #fff, inset 1px 1px 0 #fff; padding: 8px 10px 10px; margin: 6px 0; min-width: 0; }
.os legend { padding: 0 3px; }
.os label.radio, .os label.check { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.os input[type="radio"], .os input[type="checkbox"] { margin: 0; accent-color: #000; }
.os .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.os .row.end { justify-content: flex-end; }
.os .grow { flex: 1; min-width: 0; }
.os .note { color: #404040; }
.os .err-text { color: var(--sell); }
.os .ok-text { color: var(--buy); }
.os .mono { font-family: var(--mono); }
.os .num { font-variant-numeric: tabular-nums; }
.os b, .os strong { font-weight: bold; }
.os hr.etch { border: 0; border-top: 1px solid var(--chrome-dark); border-bottom: 1px solid #fff; margin: 8px 0; }

/* segmented progress (the bonding curve) */
.os .progress { height: 18px; padding: 2px; background: #fff; }
.os .progress i {
  display: block; height: 100%; max-width: 100%;
  background: repeating-linear-gradient(to right, var(--title) 0 8px, transparent 8px 10px);
}
.os .progress.done i { background: repeating-linear-gradient(to right, var(--buy) 0 8px, transparent 8px 10px); }
.os .progress.sm { height: 12px; padding: 1px; }
.os .progress.sm i { background: repeating-linear-gradient(to right, var(--title) 0 5px, transparent 5px 6px); }

/* tabs */
.os .tabs { display: flex; padding-left: 2px; flex: none; position: relative; z-index: 1; }
.os .tab {
  padding: 3px 10px 2px; margin-right: -1px; border: 0; background: var(--chrome);
  border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #000;
  box-shadow: inset -1px 0 0 var(--chrome-dark); border-radius: 3px 3px 0 0; position: relative; top: 2px;
}
.os .tab.on { top: 0; padding: 4px 12px 4px; margin: 0 -2px; z-index: 2; }
.os .tabpane {
  flex: 1; min-height: 0; overflow: auto; padding: 10px;
  border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #000; border-bottom: 1px solid #000;
  box-shadow: inset -1px -1px 0 var(--chrome-dark);
}

/* list view (details) */
.os .list { flex: 1; min-height: 0; background: #fff; overflow: auto; }
.os .list table { width: 100%; border-collapse: collapse; }
.os .list th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: normal; padding: 2px 6px; white-space: nowrap;
  background: var(--chrome);
  border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #000; border-bottom: 1px solid #000;
  box-shadow: inset -1px -1px 0 var(--chrome-dark);
}
.os .list th.sortable { cursor: pointer; }
.os .list th.r, .os .list td.r { text-align: right; }
.os .list td { padding: 2px 6px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.os .list tr.item:hover td { background: #e8e8f4; }
.os .list tr.item.sel td { background: var(--select); color: #fff; }
.os .list tr.item.sel td .note { color: #ddd; }
.os .list td .ci { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.os .list .empty { padding: 18px; color: #404040; white-space: normal; text-align: center; }
.os tr.flash td { animation: r95flash 1.6s steps(4); }
@keyframes r95flash { 0%, 50% { background: #ffff80 } 100% { background: transparent } }
.os .buy { color: var(--buy); }
.os .sell { color: var(--sell); }

.os .cimg { width: 16px; height: 16px; object-fit: cover; flex: none; image-rendering: auto; }
.os .cimg.ph { display: inline-grid; place-items: center; background: var(--amber); color: #000; font-size: 8px; font-weight: bold; }
.os .cimg.big { width: 48px; height: 48px; font-size: 14px; }
.os .pill { display: inline-block; padding: 0 4px; margin-left: 4px; border: 1px solid currentColor; font-size: 10px; line-height: 13px; }
.os .pill.grad { color: var(--buy); }
.os .pill.ready { color: #8a5a00; }
.os .pill.new { color: var(--title); }
.os .pill.label { color: #404040; }

/* key-value */
.os dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.os dl.kv dt { color: #404040; }
.os dl.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.os .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.os .stat { padding: 5px 7px; background: #fff; }
.os .stat span { display: block; color: #404040; }
.os .stat b { display: block; font-size: 14px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os .stat small { display: block; color: #404040; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os .sk { color: transparent !important; background: repeating-linear-gradient(90deg, #d8d8d8 0 6px, #ececec 6px 12px); }

/* explorer side pane */
.os .split { flex: 1; min-height: 0; display: flex; gap: 3px; }
.os .side { width: 190px; flex: none; overflow: auto; background: #fff; padding: 10px; }
.os .side h3 { margin: 0 0 2px; font-size: 15px; color: var(--title); }
.os .side .k { margin-top: 9px; }
.os .side .k span { display: block; color: #404040; }
.os .side .k b { font-size: 13px; }
.os .toolbar { display: flex; gap: 4px; align-items: center; padding: 2px 0 4px; flex: none; flex-wrap: wrap; }
.os .toolbar .sep { width: 2px; height: 20px; border-left: 1px solid var(--chrome-dark); border-right: 1px solid #fff; margin: 0 2px; }

/* taskbar + start */
.os .taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 900;
  display: flex; align-items: center; gap: 3px; padding: 2px;
  background: var(--chrome); border-top: 1px solid var(--chrome-light); box-shadow: inset 0 1px 0 #fff;
}
.os .start { display: flex; align-items: center; gap: 3px; height: 22px; min-width: 0; padding: 0 4px; font-weight: bold; }
.os .start img { width: 16px; height: 16px; border-radius: 50%; }
.os .tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.os .task { flex: 0 1 160px; min-width: 40px; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 5px; overflow: hidden; white-space: nowrap; text-align: left; }
.os .task svg, .os .task img { width: 16px; height: 16px; flex: none; }
.os .task span { overflow: hidden; text-overflow: ellipsis; }
.os .task.on { font-weight: bold; background: repeating-conic-gradient(#c0c0c0 0 25%, #fff 0 50%) 0 0 / 2px 2px; }
.os .tray { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; flex: none; }
.os .tray button { border: 0; background: none; padding: 0; display: flex; align-items: center; gap: 4px; }
.os .tray svg { width: 16px; height: 16px; }
.os .startmenu { position: absolute; left: 2px; bottom: 27px; z-index: 950; display: flex; padding: 2px; min-width: 210px; }
.os .startmenu[hidden] { display: none; }
.os .startmenu .brandbar {
  width: 22px; background: linear-gradient(to top, #000080, #1084d0); color: #c0c0c0;
  writing-mode: vertical-rl; transform: rotate(180deg); font: bold 15px var(--font); padding: 6px 0; letter-spacing: .5px;
}
.os .startmenu .brandbar b { color: #fff; }
.os .startmenu .items { flex: 1; display: flex; flex-direction: column; padding-left: 1px; }
.os .startmenu .items button { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 22px 0 6px; border: 0; background: none; text-align: left; white-space: nowrap; }
.os .startmenu .items button:hover { background: var(--select); color: #fff; }
.os .startmenu .items svg, .os .startmenu .items img { width: 24px; height: 24px; }
.os .startmenu hr { border: 0; border-top: 1px solid var(--chrome-dark); border-bottom: 1px solid #fff; margin: 2px; }

/* message boxes */
.os .modal-layer { position: absolute; inset: 0; z-index: 980; display: grid; place-items: center; }
.os .modal-layer[hidden] { display: none; }
.os .msg { display: flex; gap: 14px; align-items: flex-start; padding: 14px 14px 8px; max-width: 420px; }
.os .msg svg { width: 32px; height: 32px; flex: none; }
.os .msg .t { padding-top: 4px; line-height: 1.45; overflow-wrap: anywhere; user-select: text; }
.os .msgbtns { display: flex; justify-content: center; gap: 6px; padding: 8px 10px 10px; }

/* wizard */
.os .wizard { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 10px; }
.os .wizard .art { width: 150px; flex: none; display: grid; place-items: center; background: linear-gradient(#008080, #004848); }
.os .wizard .art img { width: 96px; height: 96px; border-radius: 50%; image-rendering: auto; box-shadow: 0 0 0 3px #c0c0c0; }
.os .wizard .page { flex: 1; min-width: 0; overflow: auto; }
.os .wizard h2 { font-size: 15px; margin: 2px 0 10px; }
.os .wizard .f { display: grid; gap: 3px; margin-bottom: 9px; }
.os .wizard .f .hint { display: flex; justify-content: space-between; color: #404040; }
.os .wizbtns { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--chrome-dark); box-shadow: inset 0 1px 0 #fff; flex: none; }
.os .imgpick { display: flex; gap: 10px; align-items: center; padding: 8px; background: #fff; }
.os .imgpick .thumb { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: #eee center / cover; font-size: 22px; color: #808080; }
.os .imgpick.over { outline: 2px dotted var(--title); }
.os .steps div { padding: 2px 0 2px 18px; position: relative; }
.os .steps div::before { content: '·'; position: absolute; left: 4px; }
.os .steps div.ok::before { content: '✓'; color: var(--buy); }
.os .steps div.err { color: var(--sell); }
.os .steps div.err::before { content: '✕'; }

/* notepad / receipt */
.os .notepad { flex: 1; min-height: 0; margin: 0; padding: 6px 8px; background: #fff; font: 13px/1.35 var(--mono); white-space: pre; overflow: auto; user-select: text; }

/* help */
.os .help { flex: 1; min-height: 0; display: flex; gap: 3px; }
.os .help nav { width: 170px; flex: none; background: #fff; overflow: auto; padding: 4px 0; }
.os .help nav button { display: flex; gap: 5px; width: 100%; padding: 2px 8px; border: 0; background: none; text-align: left; }
.os .help nav button.on { background: var(--select); color: #fff; }
.os .help article { flex: 1; min-width: 0; background: #fff; overflow: auto; padding: 10px 14px; user-select: text; line-height: 1.5; }
.os .help h2 { font-size: 15px; margin: 0 0 8px; color: var(--title); }
.os .help ul { padding-left: 18px; margin: 6px 0; }
.os .help table { border-collapse: collapse; width: 100%; }
.os .help td { border-bottom: 1px solid #ddd; padding: 3px 4px; vertical-align: top; }
.os .help code { font: 11px var(--mono); overflow-wrap: anywhere; }

/* chart panel */
.os .chartbox { height: 230px; background: #000; position: relative; }
.os .chartbox .empty { position: absolute; inset: 0; display: grid; place-items: center; color: #00ff66; font: 12px var(--mono); }

/* boot + shut down */
.os .boot { position: absolute; inset: 0; z-index: 1000; background: #000; color: #c0c0c0; font: 14px/1.35 var(--mono); padding: 18px 22px; white-space: pre-wrap; }
.os .boot[hidden] { display: none; }
.os .boot .splash { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; background: linear-gradient(#000 0 70%, #00006a); text-align: center; }
.os .boot .splash img { width: 120px; height: 120px; border-radius: 50%; image-rendering: auto; }
.os .boot .splash h1 { margin: 0; font: bold 34px var(--font); color: #fff; letter-spacing: 1px; }
.os .boot .splash h1 span { color: var(--amber); }
.os .boot .splash h1 small { display: block; font: bold 15px var(--font); color: #c0c0c0; letter-spacing: 3px; text-transform: uppercase; margin: 4px 0; }
.os .boot .splash .bar { width: 260px; height: 12px; border: 1px solid #555; padding: 2px; }
.os .boot .splash .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(to right, #1084d0 0 8px, transparent 8px 10px); transition: width .25s steps(6); }
.os .safe { position: absolute; inset: 0; z-index: 1001; background: #000; display: grid; place-items: center; color: #f5a623; font: bold 22px var(--font); text-align: center; }

/* CRT glass: scanlines, vignette, bloom. Never catches the pointer. */
.os .crt { position: absolute; inset: 0; z-index: 2000; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.09) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.os .crt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 38%); mix-blend-mode: screen; }
.os.flat .crt { opacity: .35; }

/* Flat mode: the OS is the page (phones, or the user turned 3D off). */
.os.flat { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; }
.os.flat.narrow .win:not(.dialog) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.os.flat.narrow .icons { flex-direction: row; flex-wrap: wrap; right: 6px; bottom: auto; }
.os.flat.narrow .side { display: none; }
.os.flat.narrow .wizard .art { display: none; }
.os.flat.narrow .help nav { width: 120px; }
.os.flat.narrow .wallpaper { display: none; }
.os.flat.narrow .task { flex-basis: 110px; }
@media (prefers-reduced-motion: reduce) { .os tr.flash td { animation: none; } .os .boot .splash .bar i { transition: none; } }