/* Per My Last: Win98 / Office 97 design language.
   Every colour is a token on :root so a colour scheme is data (spec section 6).
   Chrome is measured in Win98 pixels (--px), each a whole number of device pixels.
   No transitions, no easing, no fades: state changes snap. */

@font-face {
  font-family: "W95FA";
  src: url("fonts/w95fa.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Fixedsys Excelsior";
  src: url("fonts/fsex300.woff2") format("woff2");
  font-display: block;
}

/* ---------- Scale: device pixels per Win98 pixel ---------- */
:root {
  --dpr: 1;
  --k: 2;
}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  :root { --dpr: 2; --k: 3; }
}
@media (min-resolution: 3dppx), (-webkit-min-device-pixel-ratio: 3) {
  :root { --dpr: 3; --k: 4; }
}
:root {
  --px: calc(1px * var(--k) / var(--dpr));          /* one Win98 pixel */
  --px-lg: calc(1px * (var(--k) + 1) / var(--dpr)); /* one font pixel for large chrome */
  --tap: 44px;                                      /* minimum hit area, never scaled */
}

/* ---------- Classic scheme ---------- */
:root,
[data-scheme="classic"] {
  --c-desktop: #008080;
  --c-face: #c0c0c0;
  --c-light: #dfdfdf;
  --c-hilight: #ffffff;
  --c-shadow: #808080;
  --c-dkshadow: #0a0a0a;
  --c-window: #ffffff;
  --c-text: #0a0a0a;
  --c-gray-text: #808080;
  --c-title-a: #000080;
  --c-title-b: #1084d0;
  --c-title-text: #ffffff;
  --c-title-off-a: #808080;
  --c-title-off-b: #b5b5b5;
  --c-title-off-text: #d4d0c8;
  --c-select: #000080;
  --c-select-text: #ffffff;
  --c-info: #ffffe1;
  --c-progress: #000080;
  --c-link: #0000ee;
  --c-stamp: #b3202a;
  --c-stamp-blue: #1f3a93;
  --c-record: #d00000;
  --c-plan: #b8860b;
}

/* ---------- Type ---------- */
:root {
  --font-chrome: "W95FA", "MS Sans Serif", Tahoma, sans-serif;
  --font-content: Verdana, "DejaVu Sans", Geneva, sans-serif;
  --font-mono: "Fixedsys Excelsior", "Courier New", monospace;
  --fs-chrome: calc(var(--px) * 12.5);    /* 1 em = 12.5 font px */
  --fs-chrome-lg: calc(var(--px-lg) * 12.5);
  --fs-chrome-xl: calc(var(--px) * 25);   /* 2x, headings only */
  --fs-mono: calc(var(--px) * 16);        /* 1 em = 16 font px */
  --fs-mono-sm: 16px;                     /* 1 font px = 1 CSS px, whole device px at any ratio */
  --fs-content: 17px;
  --fs-content-sm: 15px;
}

/* ---------- Bevels (Win98 pixel wide rings, no blur) ---------- */
:root {
  --bevel-raised:
    inset calc(var(--px) * -1) calc(var(--px) * -1) var(--c-dkshadow),
    inset var(--px) var(--px) var(--c-hilight),
    inset calc(var(--px) * -2) calc(var(--px) * -2) var(--c-shadow),
    inset calc(var(--px) * 2) calc(var(--px) * 2) var(--c-light);
  --bevel-window:
    inset calc(var(--px) * -1) calc(var(--px) * -1) var(--c-dkshadow),
    inset var(--px) var(--px) var(--c-light),
    inset calc(var(--px) * -2) calc(var(--px) * -2) var(--c-shadow),
    inset calc(var(--px) * 2) calc(var(--px) * 2) var(--c-hilight);
  --bevel-pressed:
    inset calc(var(--px) * -1) calc(var(--px) * -1) var(--c-hilight),
    inset var(--px) var(--px) var(--c-dkshadow),
    inset calc(var(--px) * -2) calc(var(--px) * -2) var(--c-light),
    inset calc(var(--px) * 2) calc(var(--px) * 2) var(--c-shadow);
  --bevel-sunken:
    inset calc(var(--px) * -1) calc(var(--px) * -1) var(--c-hilight),
    inset var(--px) var(--px) var(--c-shadow),
    inset calc(var(--px) * -2) calc(var(--px) * -2) var(--c-light),
    inset calc(var(--px) * 2) calc(var(--px) * 2) var(--c-dkshadow);
  --bevel-status:
    inset calc(var(--px) * -1) calc(var(--px) * -1) var(--c-hilight),
    inset var(--px) var(--px) var(--c-shadow);
  --bevel-etched:
    inset calc(var(--px) * -1) calc(var(--px) * -1) var(--c-hilight),
    inset var(--px) var(--px) var(--c-shadow),
    inset calc(var(--px) * -2) calc(var(--px) * -2) var(--c-shadow),
    inset calc(var(--px) * 2) calc(var(--px) * 2) var(--c-hilight);
}

/* ---------- Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  transition: none !important;
  animation: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--c-desktop);
  color: var(--c-text);
  font-family: var(--font-chrome);
  font-size: var(--fs-chrome);
  line-height: 1.2;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
.is-framed .hide-framed { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--c-select); color: var(--c-select-text); }
a { color: var(--c-link); }
code { font-family: var(--font-mono); font-size: var(--fs-mono-sm); }

.content {
  font-family: var(--font-content);
  font-size: var(--fs-content);
  line-height: 1.45;
  -webkit-font-smoothing: auto;
}
.content-sm {
  font-family: var(--font-content);
  font-size: var(--fs-content-sm);
  line-height: 1.45;
  -webkit-font-smoothing: auto;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.25;
}
/* MS Sans Serif Bold was the regular face smeared one pixel right. So is ours. */
.bold { text-shadow: var(--px) 0 0 currentColor; letter-spacing: 0; }
.chrome-lg { font-size: var(--fs-chrome-lg); }
.chrome-lg.bold { text-shadow: var(--px-lg) 0 0 currentColor; letter-spacing: var(--px-lg); }
.chrome-xl { font-size: var(--fs-chrome-xl); line-height: 1; }
.accel { text-decoration: underline; text-underline-offset: calc(var(--px) * 2); text-decoration-thickness: var(--px); }
.muted { color: var(--c-gray-text); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Pixel icons (drawn by win98.js) ---------- */
.ico { display: inline-block; flex: none; vertical-align: middle; line-height: 0; }
.ico svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

/* ---------- Window ---------- */
.window {
  background: var(--c-face);
  box-shadow: var(--bevel-window);
  padding: calc(var(--px) * 3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3);
  min-height: calc(var(--px) * 28);
  padding: 0 calc(var(--px) * 3) 0 calc(var(--px) * 3);
  background: linear-gradient(90deg, var(--c-title-a), var(--c-title-b));
  color: var(--c-title-text);
  user-select: none;
  -webkit-user-select: none;
}
.titlebar .title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.window.is-inactive .titlebar,
.window.is-hung .titlebar {
  background: linear-gradient(90deg, var(--c-title-off-a), var(--c-title-off-b));
  color: var(--c-title-off-text);
}
/* A hung window keeps legible title text: the joke has to be read to land. */
.window.is-hung .titlebar { color: var(--c-title-text); }
.titlebar .ctrls { display: flex; align-items: center; gap: calc(var(--px) * 4); }
.titlebar .ctrls .tb-btn + .tb-btn.close { margin-left: calc(var(--px) * 4); }

/* Title-bar buttons draw at 22x18 Win98 px with glyphs drawn for that size, and hit 44pt tall. */
.tb-btn {
  position: relative;
  width: calc(var(--px) * 22);
  height: calc(var(--px) * 18);
  padding: 0;
  border: 0;
  background: var(--c-face);
  box-shadow: var(--bevel-raised);
  color: var(--c-text);
  display: grid;
  place-items: center;
  cursor: default;
}
.tb-btn::after {
  content: "";
  position: absolute;
  left: calc(var(--px) * -2); right: calc(var(--px) * -2);
  top: 50%;
  height: var(--tap);
  transform: translateY(-50%);
}
.tb-btn:active:not(:disabled) { box-shadow: var(--bevel-pressed); }
.tb-btn:active:not(:disabled) .ico { transform: translate(var(--px), var(--px)); }
.tb-btn:disabled .ico { opacity: 1; filter: none; }
.tb-btn:disabled { color: var(--c-gray-text); }
.tb-btn:focus-visible { outline: var(--px) dotted var(--c-text); outline-offset: calc(var(--px) * -4); }

.window-body {
  padding: calc(var(--px) * 6);
  min-width: 0;
}

.menubar {
  display: flex;
  gap: 0;
  padding: calc(var(--px) * 1) 0;
}
.menubar span { padding: calc(var(--px) * 3) calc(var(--px) * 6); }

/* ---------- Buttons ---------- */
.btn {
  min-height: var(--tap);
  min-width: calc(var(--px) * 75);
  padding: 0 calc(var(--px) * 10);
  border: 0;
  background: var(--c-face);
  box-shadow: var(--bevel-raised);
  color: var(--c-text);
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 4);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.btn > span { position: relative; }
.btn:active:not(:disabled),
.btn.is-pressed {
  box-shadow: var(--bevel-pressed);
}
.btn:active:not(:disabled) > *,
.btn.is-pressed > * { transform: translate(var(--px), var(--px)); }
/* Default button: the extra black ring from Win98 dialogs. */
.btn.is-default {
  box-shadow:
    inset 0 0 0 var(--px) var(--c-dkshadow),
    inset calc(var(--px) * -2) calc(var(--px) * -2) var(--c-dkshadow),
    inset calc(var(--px) * 2) calc(var(--px) * 2) var(--c-hilight),
    inset calc(var(--px) * -3) calc(var(--px) * -3) var(--c-shadow),
    inset calc(var(--px) * 3) calc(var(--px) * 3) var(--c-light);
}
.btn.is-default:active:not(:disabled) {
  box-shadow:
    inset 0 0 0 var(--px) var(--c-dkshadow),
    inset 0 0 0 calc(var(--px) * 2) var(--c-shadow);
}
.btn:focus-visible::before,
.btn.show-focus::before {
  content: "";
  position: absolute;
  inset: calc(var(--px) * 4);
  outline: var(--px) dotted var(--c-text);
  pointer-events: none;
}
.btn:disabled {
  color: var(--c-gray-text);
  text-shadow: var(--px) var(--px) 0 var(--c-hilight);
}
.btn:disabled .ico { filter: grayscale(1) opacity(.5); }
/* Sound Recorder's record light for dictation: shown only while listening, never blinks. */
.rec-dot { flex: none; width: calc(var(--px) * 7); height: calc(var(--px) * 7); border-radius: 50%; background: var(--c-record); box-shadow: 0 0 0 var(--px) var(--c-dkshadow); }
/* Icon-only toolbar button: square, 44pt, the label lives in aria-label and the tooltip. */
.btn.is-icon { min-width: var(--tap); width: var(--tap); padding: 0; }
.rec-dot.is-corner { position: absolute; top: calc(var(--px) * 4); right: calc(var(--px) * 4); }
/* The one call to action per screen: default ring, taller, large bold label with its icon. */
.btn.is-cta { min-height: calc(var(--tap) + var(--px) * 8); font-size: var(--fs-chrome-lg); gap: calc(var(--px) * 6); }
.btn.is-cta .bold { text-shadow: var(--px-lg) 0 0 currentColor; }
.btn.is-small { min-width: 0; padding: 0 calc(var(--px) * 7); }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 6); }
.btn-row.is-end { justify-content: flex-end; }

/* ---------- Fields ---------- */
.field { display: grid; gap: calc(var(--px) * 3); min-width: 0; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--tap);
  border: 0;
  border-radius: 0;
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
  padding: calc(var(--px) * 5) calc(var(--px) * 6);
  font-family: var(--font-content);
  font-size: var(--fs-content);
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 128px; resize: vertical; display: block; }
.input::placeholder, .textarea::placeholder { color: var(--c-gray-text); opacity: 1; }
.input:disabled, .textarea:disabled { background: var(--c-face); color: var(--c-gray-text); }
.input:focus-visible, .textarea:focus-visible { outline: var(--px) dotted var(--c-text); outline-offset: calc(var(--px) * -4); }
.select {
  padding-right: calc(var(--px) * 28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23c0c0c0' d='M0 0h16v16H0z'/%3E%3Cpath fill='%23fff' d='M0 0h15v1H1v14H0z'/%3E%3Cpath fill='%23808080' d='M1 14h14V1h1v15H1z'/%3E%3Cpath fill='%230a0a0a' d='M4 6h7v1H4zM5 7h5v1H5zM6 8h3v1H6zM7 9h1v1H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: calc(var(--px) * 22) calc(100% - var(--px) * 4);
  background-position: right calc(var(--px) * 2) center;
  image-rendering: pixelated;
}

.check, .radio {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 6);
  min-height: var(--tap);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.check input, .radio input {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  flex: none;
  width: calc(var(--px) * 13 * 1.5);
  height: calc(var(--px) * 13 * 1.5);
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
  display: grid;
  place-items: center;
}
.check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%230a0a0a' d='M6 0h1v3H6zM5 1h1v3H5zM4 2h1v3H4zM3 3h1v3H3zM2 4h1v3H2zM1 3h1v3H1zM0 2h1v3H0z'/%3E%3C/svg%3E");
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.radio input { border-radius: 50%; box-shadow: none; position: relative;
  background:
    radial-gradient(circle at 50% 50%, var(--c-window) 58%, transparent 60%),
    conic-gradient(from 225deg, var(--c-hilight) 0 50%, var(--c-shadow) 50% 100%);
}
.radio input:checked {
  background:
    radial-gradient(circle at 50% 50%, var(--c-text) 22%, var(--c-window) 24% 58%, transparent 60%),
    conic-gradient(from 225deg, var(--c-hilight) 0 50%, var(--c-shadow) 50% 100%);
}
.check input:focus-visible + span,
.radio input:focus-visible + span { outline: var(--px) dotted var(--c-text); outline-offset: calc(var(--px) * 2); }
.check input:disabled + span, .radio input:disabled + span { color: var(--c-gray-text); }

/* Group box: the etched frame with a label cut into it. */
.group {
  margin: 0;
  border: 0;
  padding: calc(var(--px) * 10) calc(var(--px) * 8) calc(var(--px) * 6);
  box-shadow: var(--bevel-etched);
  position: relative;
  min-width: 0;
}
.group > legend {
  padding: 0 calc(var(--px) * 3);
  margin-left: calc(var(--px) * 4);
  background: var(--c-face);
  position: absolute;
  top: calc(var(--fs-chrome) * -0.6);
}

/* Trackbar */
.trackbar { position: relative; }
.trackbar input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
}
.trackbar input[type="range"]::-webkit-slider-runnable-track {
  height: calc(var(--px) * 4);
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
}
.trackbar input[type="range"]::-moz-range-track {
  height: calc(var(--px) * 4);
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
}
.trackbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 22);
  margin-top: calc(var(--px) * -9);
  border: 0;
  border-radius: 0;
  background: var(--c-face);
  box-shadow: var(--bevel-raised);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.trackbar input[type="range"]::-moz-range-thumb {
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 22);
  border: 0;
  border-radius: 0;
  background: var(--c-face);
  box-shadow: var(--bevel-raised);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.trackbar input[type="range"]:focus-visible { outline: var(--px) dotted var(--c-text); outline-offset: 0; }
.ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--px) * 6 - 0.5ch);
  margin-top: calc(var(--px) * -6);
}
.ticks span { display: grid; justify-items: center; gap: var(--px); width: 1ch; line-height: 1; }
.ticks span::before { content: ""; width: var(--px); height: calc(var(--px) * 3); background: var(--c-text); }

/* Tabs (property sheet) */
.tabs { display: flex; align-items: flex-end; padding-left: calc(var(--px) * 2); position: relative; z-index: 1; }
.tab {
  min-height: calc(var(--tap) - var(--px) * 2);
  padding: 0 calc(var(--px) * 10);
  border: 0;
  background: var(--c-face);
  color: var(--c-text);
  cursor: default;
  position: relative;
  box-shadow:
    inset var(--px) var(--px) var(--c-hilight),
    inset calc(var(--px) * -1) 0 var(--c-dkshadow),
    inset calc(var(--px) * -2) 0 var(--c-shadow);
  margin-bottom: calc(var(--px) * -1);
  touch-action: manipulation;
}
.tab[aria-selected="true"] {
  min-height: var(--tap);
  margin: 0 calc(var(--px) * -2) calc(var(--px) * -2);
  padding: 0 calc(var(--px) * 12) calc(var(--px) * 2);
  z-index: 2;
}
.tab:focus-visible > span { outline: var(--px) dotted var(--c-text); outline-offset: calc(var(--px) * 2); }
.tab-panel {
  background: var(--c-face);
  box-shadow: var(--bevel-window);
  padding: calc(var(--px) * 10) calc(var(--px) * 8);
}

/* ---------- Status bar ---------- */
.statusbar {
  display: flex;
  gap: calc(var(--px) * 2);
  padding-top: calc(var(--px) * 2);
  min-width: 0;
}
.statusbar > * {
  box-shadow: var(--bevel-status);
  padding: calc(var(--px) * 3) calc(var(--px) * 5);
  min-height: calc(var(--px) * 22);
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.statusbar > .grow { flex: 1; }

/* ---------- Plan badge (bought tier, kept visually apart from the earned rank) ---------- */
.plan-badge { gap: calc(var(--px) * 4); }
.plan-pips { display: inline-flex; gap: calc(var(--px) * 2); }
.plan-pips i {
  width: calc(var(--px) * 6);
  height: calc(var(--px) * 6);
  transform: rotate(45deg);
  background: var(--c-face);
  box-shadow: inset 0 0 0 var(--px) var(--c-shadow);
}
.plan-pips i.on { background: var(--c-plan); box-shadow: inset 0 0 0 var(--px) var(--c-dkshadow); }
/* Tapped, the badge opens Plans: the panel presses in, and its hit area grows to 44pt without growing the bar. */
button.plan-badge {
  position: relative;
  overflow: visible;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  touch-action: manipulation;
}
button.plan-badge::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: var(--tap);
  transform: translateY(-50%);
}
button.plan-badge:active { box-shadow: var(--bevel-sunken); }
button.plan-badge:active > * { transform: translate(var(--px), var(--px)); }
button.plan-badge:focus-visible { outline: var(--px) dotted var(--c-text); outline-offset: calc(var(--px) * -3); }
.plan-badge .plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- App bar: the header docked above every window, like the Office 97 shortcut bar ---------- */
.appbar {
  display: flex;
  align-items: stretch;
  gap: calc(var(--px) * 3);
  background: var(--c-face);
  padding: calc(var(--px) * 3) calc(var(--px) * 3) calc(var(--px) * 5);
  box-shadow: inset 0 calc(var(--px) * -1) var(--c-dkshadow), inset 0 calc(var(--px) * -2) var(--c-shadow);
  min-width: 0;
}

/* ---------- Rank (earned): navy blocks and rank icons, never the plan's brass (ADR-0003) ---------- */
/* The header "pill" is a plain raised button: Win98 had no rounded controls. */
.btn.rank-pill { flex: 1; justify-content: flex-start; gap: calc(var(--px) * 5); padding: 0 calc(var(--px) * 6); min-width: 0; }
.rank-pill .rank-name { white-space: nowrap; }
.rank-pill .progress.is-mini { flex: 1; width: auto; min-width: calc(var(--px) * 30); }
.rank-pill .rank-xp { white-space: nowrap; min-width: 0; }

.rank-summary { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--px) * 4) calc(var(--px) * 8); align-items: center; }
.rank-summary .progress { grid-column: 1 / -1; }
.rank-summary .content-sm { color: var(--c-text); }

/* Org chart: the ladder as an Explorer tree, the top rung at the root and Intern at the bottom. */
.orgchart {
  list-style: none;
  margin: 0;
  padding: calc(var(--px) * 4);
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
}
.orgchart li {
  --depth: 0;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(var(--px) * 5);
  align-items: start;
  min-height: var(--tap);
  padding: calc(var(--px) * 3) calc(var(--px) * 2) calc(var(--px) * 3) calc(var(--px) * (var(--depth) * 16));
}
.orgchart li > .ico { grid-row: span 2; }
.orgchart .rname { justify-self: start; padding: 0 calc(var(--px) * 2); }
.orgchart .rmeta { font-family: var(--font-content); font-size: var(--fs-content-sm); line-height: 1.35; color: var(--c-text); }
.orgchart li.is-current .rname { background: var(--c-select); color: var(--c-select-text); outline: var(--px) dotted var(--c-select-text); outline-offset: calc(var(--px) * -1); }
/* Ranks not yet earned are greyed like a disabled item. No padlock: nothing here is for sale. */
.orgchart li.is-ahead .rname,
.orgchart li.is-ahead .rmeta { color: var(--c-gray-text); }
.orgchart li.is-ahead > .ico { filter: grayscale(1) opacity(.5); }
/* Dotted tree lines, one Win98 pixel on, one off: in from the parent, then down to the child. */
.orgchart li + li::before,
.orgchart li:not(:last-child)::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.orgchart li + li::before {
  left: calc(var(--px) * ((var(--depth) - 1) * 16 + 8));
  top: 0;
  width: calc(var(--px) * 7);
  height: calc(var(--px) * 11);
  background:
    repeating-linear-gradient(to bottom, var(--c-shadow) 0 var(--px), transparent 0 calc(var(--px) * 2)) left top / var(--px) 100% no-repeat,
    repeating-linear-gradient(to right, var(--c-shadow) 0 var(--px), transparent 0 calc(var(--px) * 2)) left bottom / 100% var(--px) no-repeat;
}
.orgchart li:not(:last-child)::after {
  left: calc(var(--px) * (var(--depth) * 16 + 8));
  top: calc(var(--px) * 19);
  bottom: 0;
  width: var(--px);
  background: repeating-linear-gradient(to bottom, var(--c-shadow) 0 var(--px), transparent 0 calc(var(--px) * 2));
}

/* Ledger: stats kept like the books. A single rule above the total, a double rule under it. */
.ledger { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--c-window); box-shadow: var(--bevel-sunken); }
.ledger th, .ledger td { text-align: left; font-weight: 400; padding: calc(var(--px) * 3) calc(var(--px) * 5); vertical-align: baseline; }
.ledger thead th,
.ledger .section th { background: var(--c-face); box-shadow: var(--bevel-raised); font-family: var(--font-chrome); font-size: var(--fs-chrome); line-height: 1.2; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger .rate { display: block; color: var(--c-gray-text); }
.ledger .total .num { border-top: var(--px) solid var(--c-text); border-bottom: calc(var(--px) * 3) double var(--c-text); }
.ledger .total + .section th { border-top: calc(var(--px) * 8) solid transparent; background-clip: padding-box; }

/* Rank dialogs: Rank Properties scrolls inside its own body on short screens. */
.rank-dialog .dialog-body { min-height: 0; }
.rank-dialog .dialog-body.no-icon { padding: calc(var(--px) * 8) calc(var(--px) * 6) calc(var(--px) * 10); }
.rank-dialog .tab-panel { display: grid; gap: calc(var(--px) * 8); }
.rank-dialog p { margin: 0; }
.rank-dialog .promo-text { display: grid; gap: calc(var(--px) * 4); }
.rank-demo { display: grid; gap: calc(var(--px) * 4); }

/* ---------- Progress bar (chunky blocks) ---------- */
.progress {
  --blocks: 20;
  height: calc(var(--px) * 22);
  padding: calc(var(--px) * 3);
  background: var(--c-face);
  box-shadow: var(--bevel-status);
  display: grid;
  grid-template-columns: repeat(var(--blocks), 1fr);
  gap: calc(var(--px) * 2);
}
.progress > i { background: var(--c-progress); }
.progress.is-mini { height: calc(var(--px) * 14); padding: calc(var(--px) * 2); gap: var(--px); width: calc(var(--px) * 60); }

/* ---------- Tooltip / balloon ---------- */
.balloon {
  position: relative;
  background: var(--c-info);
  color: var(--c-text);
  border: var(--px) solid var(--c-dkshadow);
  padding: calc(var(--px) * 6) calc(var(--px) * 8);
  margin-top: calc(var(--px) * 12);
}
/* Tail: a stepped pixel triangle pointing up at whatever the balloon explains. */
.balloon::before,
.balloon::after {
  content: "";
  position: absolute;
  left: calc(var(--px) * 16);
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.balloon::before { top: calc(var(--px) * -12); background: var(--c-dkshadow); }
.balloon::after {
  top: calc(var(--px) * -10);
  left: calc(var(--px) * 17);
  width: calc(var(--px) * 10);
  height: calc(var(--px) * 11);
  background: var(--c-info);
}
.balloon-title { display: flex; align-items: center; gap: calc(var(--px) * 4); margin-bottom: calc(var(--px) * 3); }

/* ---------- Dialog (modal) ---------- */
dialog.dialog {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  width: min(calc(100vw - 24px), 380px);
  max-height: calc(100dvh - 24px);
  overflow: visible;
}
dialog.dialog::backdrop { background: transparent; }
.dialog .window { max-height: calc(100dvh - 24px); }
.dialog-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--px) * 10);
  align-items: start;
  padding: calc(var(--px) * 12) calc(var(--px) * 8) calc(var(--px) * 10);
  overflow: auto;
}
.dialog-body.no-icon { grid-template-columns: 1fr; }
.dialog-actions {
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 6);
  padding: 0 calc(var(--px) * 6) calc(var(--px) * 6);
  flex-wrap: wrap;
}

/* ---------- List view (File Open style) ---------- */
.listview {
  list-style: none;
  margin: 0;
  padding: calc(var(--px) * 3);
  background: var(--c-window);
  box-shadow: var(--bevel-sunken);
  max-height: min(46dvh, 360px);
  min-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.listview:focus-visible { outline: var(--px) dotted var(--c-text); outline-offset: calc(var(--px) * -4); }
.listview li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 calc(var(--px) * 5);
  align-items: start;
  min-height: var(--tap);
  padding: calc(var(--px) * 4) calc(var(--px) * 4);
  cursor: default;
}
.listview li .ico { grid-row: span 2; margin-top: calc(var(--px) * 1); }
.listview .fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listview .fmeta { color: var(--c-gray-text); font-family: var(--font-content); font-size: var(--fs-content-sm); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.listview li[aria-selected="true"] .fname { background: var(--c-select); color: var(--c-select-text); outline: var(--px) dotted var(--c-select-text); outline-offset: calc(var(--px) * -1); }
.listview .empty { display: block; color: var(--c-gray-text); font-family: var(--font-content); font-size: var(--fs-content-sm); cursor: auto; }

/* ---------- Desktop icons (the launcher behind minimised windows) ---------- */
.desk-icons {
  position: absolute;
  top: 12px; left: 8px; right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
  align-items: start;
}
.desk-icon {
  width: 84px;
  min-height: var(--tap);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: calc(var(--px) * 3);
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--c-hilight);
  cursor: default;
  touch-action: manipulation;
}
.desk-icon .glyph { position: relative; line-height: 0; }
.desk-icon .name { padding: 0 calc(var(--px) * 2); text-align: center; line-height: 1.15; }
.desk-icon:focus-visible .name,
.desk-icon:active .name { background: var(--c-select); color: var(--c-select-text); outline: var(--px) dotted var(--c-hilight); }
/* Locked apps: greyed like a disabled shortcut, with a padlock where Win98 put the shortcut arrow. */
.desk-icon.is-locked .glyph > .ico:first-child { filter: grayscale(1) opacity(.85); }
.desk-icon.is-locked .name { color: var(--c-light); }
.desk-icon .lock-badge { position: absolute; right: calc(var(--px) * -6); bottom: calc(var(--px) * -4); }

/* ---------- Taskbar (the tab bar) ---------- */
.taskbar {
  display: flex;
  align-items: stretch;
  gap: calc(var(--px) * 3);
  background: var(--c-face);
  padding: calc(var(--px) * 3) calc(var(--px) * 3) calc(var(--px) * 3 + env(safe-area-inset-bottom));
  box-shadow: inset 0 var(--px) var(--c-light), inset 0 calc(var(--px) * 2) var(--c-hilight);
  min-width: 0;
}
.taskbar .tasks {
  display: flex;
  gap: calc(var(--px) * 3);
  flex: 1;
  min-width: 0;
}
.task {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(var(--tap) + var(--px) * 8);
  border: 0;
  padding: calc(var(--px) * 4) calc(var(--px) * 4) calc(var(--px) * 3);
  background: var(--c-face);
  box-shadow: var(--bevel-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 2);
  cursor: default;
  touch-action: manipulation;
}
.task .label { max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The active task is pressed in, with the Win98 checkerboard dither. */
.task[aria-current="page"] {
  box-shadow: var(--bevel-pressed);
  background-color: var(--c-hilight);
  background-image: conic-gradient(var(--c-face) 25%, transparent 0 50%, var(--c-face) 0 75%, transparent 0);
  background-size: calc(var(--px) * 2) calc(var(--px) * 2);
}
.task[aria-current="page"] > * { transform: translate(var(--px), var(--px)); }
.task:active:not([aria-current="page"]) { box-shadow: var(--bevel-pressed); }
.task:focus-visible .label { outline: var(--px) dotted var(--c-text); outline-offset: var(--px); }
.tray {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 4);
  padding: 0 calc(var(--px) * 6);
  box-shadow: var(--bevel-status);
  flex: none;
}
.tray-btn {
  min-height: var(--tap);
  border: 0;
  background: transparent;
  padding: 0 calc(var(--px) * 2);
  display: flex;
  align-items: center;
  cursor: default;
}
.tray-btn:focus-visible { outline: var(--px) dotted var(--c-text); }

/* ---------- Minimise zoom rectangle (the only animation, driven frame by frame in JS) ---------- */
.zoom-rect {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--c-title-a), var(--c-title-b));
  outline: var(--px) solid var(--c-dkshadow);
}

/* ---------- Rubber stamp ---------- */
.stamp {
  --ink: var(--c-stamp);
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 14px 7px;
  color: var(--ink);
  border: 4px solid var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  font-family: var(--font-content);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
  transform: rotate(-8deg);
  filter: url(#ink);
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-select: none;
}
.stamp .big { font-size: 26px; }
.stamp .small { font-size: 11px; letter-spacing: .2em; }
.stamp.is-blue { --ink: var(--c-stamp-blue); transform: rotate(5deg); }

/* ---------- Scrollbars (desktop browsers) ---------- */
.scroll::-webkit-scrollbar { width: calc(var(--px) * 10); height: calc(var(--px) * 10); }
.scroll::-webkit-scrollbar-track {
  background-color: var(--c-hilight);
  background-image: conic-gradient(var(--c-face) 25%, transparent 0 50%, var(--c-face) 0 75%, transparent 0);
  background-size: calc(var(--px) * 2) calc(var(--px) * 2);
}
.scroll::-webkit-scrollbar-thumb { background: var(--c-face); box-shadow: var(--bevel-raised); }
.scroll::-webkit-scrollbar-button:single-button { display: block; height: calc(var(--px) * 10); background: var(--c-face); box-shadow: var(--bevel-raised); }

@media (prefers-reduced-motion: reduce) {
  .zoom-rect { display: none; }
}