/* Retro Desktop Theme: OS/2 Warp, FVWM, Fvwm95, CDE
   Put data-theme="os2" | "fvwm" | "fvwm95" | "cde" on any container.
   Everything is flat, opaque and square; depth comes only from 1px inset bevels.
   Every color comes from a token. */

/* =====================================================================
   1. Design tokens
   ===================================================================== */

[data-theme], [data-theme] * { box-sizing: border-box; }
[data-theme] * { border-radius: 0; }

/* Defaults shared by all themes; each theme block below overrides */
[data-theme] {
  --title-h: var(--btn-size);       /* title bar height */
  --btn-h: var(--btn-size);         /* title button height (Win95 buttons are 16x14) */
  --frame-inner: none;              /* inner edge of the frame ring */
  --menubar-bevel: none;
  --desk-ink: var(--hi);            /* icon labels on the backdrop */
  --link: var(--select);
  --muted: var(--lo);
  --rubber: var(--hi);              /* rubber-band outline (XOR'd lines read light on dark desks) */
  --wa-top: 0px;                    /* work area reserved by the shell */
  --wa-bottom: 0px;
  --outline-moves: 0;

  font: var(--font-size) / 1.3 var(--font);
  color: var(--ink);
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0L4 3.5L0 7z'/%3E%3C/svg%3E");
}

/* ---------- OS/2 Warp 3/4 ---------- */
[data-theme="os2"] {
  --font: "WarpSans", "Helv", Helvetica, Arial, sans-serif;
  --font-size: 12px;
  --title-weight: 700;
  --title-align: left;

  --surface: #CCCCCC;
  --hi: #FFFFFF;
  --lo: #808080;
  --dark: #000000;
  --field: #FFFFFF;
  --ink: #000000;
  --trough: #B8B8B8;

  --title-bg: #000080;
  --title-fg: #FFFFFF;
  --title-bg-off: #CCCCCC;
  --title-fg-off: #000000;
  --select: #000080;
  --select-fg: #FFFFFF;
  --backdrop: #4A7C8C;

  --frame: 4px;
  --corner: 24px;
  --btn-size: 20px;
  --ctl-h: 22px;
  --ticks-display: none;
  --default-ring: 2px solid #000;

  --desk-ink: #FFFFFF;
  --wa-top: 30px;

  --raised:    inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dark), inset -2px -2px 0 var(--lo);
  --sunken:    inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi),   inset 2px 2px 0 var(--dark);
  --raised-sm: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --frame-raised: 0 0 0 1px var(--dark), inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo),
                  inset 2px 2px 0 var(--surface), inset 3px 3px 0 var(--surface);
  /* Warp's sizing border: a sunken hairline where the frame meets the client */
  --frame-inner: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}

/* ---------- FVWM Classic (fvwm2 default-style) ---------- */
[data-theme="fvwm"] {
  --font: "Lucida Sans", Helvetica, Arial, sans-serif;
  --font-size: 12px;
  --title-weight: 700;
  --title-align: center;

  --surface: #8A9BB0;
  --hi: #D4DCE6;
  --lo: #4F5C6E;
  --dark: #1E2630;
  --field: #E8ECF1;
  --ink: #101418;
  --trough: #6E7C8F;

  --title-bg: linear-gradient(90deg, #2F4F6F, #5A7FA3);
  --title-fg: #FFFFFF;
  --title-bg-off: #8A9BB0;
  --title-fg-off: #1E2630;
  --title-hi: #8FAED0;
  --title-lo: #1E2630;
  --select: #2F4F6F;
  --select-fg: #FFFFFF;
  --backdrop: #3B4F63;
  --pager-bg: #2E3E50;
  --pager-cur: #5C7A99;

  --frame: 3px;
  --corner: 18px;
  --btn-size: 18px;
  --ctl-h: 22px;
  --ticks-display: block;
  --default-ring: 1px solid #000;

  --link: #1F3E5E;
  --muted: #3E4A5A;
  --outline-moves: 1;

  --raised:    inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --sunken:    inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
  --raised-sm: var(--raised);
  --frame-raised: 0 0 0 1px var(--dark), inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --frame-inner: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}

/* ---------- Fvwm95 (Windows 95 clone) ---------- */
[data-theme="fvwm95"] {
  --font: Tahoma, "MS Sans Serif", Arial, sans-serif;
  --font-size: 11px;
  --title-weight: 700;
  --title-align: left;

  --surface: #C0C0C0;
  --hi: #FFFFFF;
  --light: #DFDFDF;
  --lo: #808080;
  --dark: #000000;
  --field: #FFFFFF;
  --ink: #000000;
  --trough: #E0E0E0;

  --title-bg: linear-gradient(90deg, #000080, #1084D0);
  --title-fg: #FFFFFF;
  --title-bg-off: linear-gradient(90deg, #808080, #B5B5B5);
  --title-fg-off: #C0C0C0;
  --select: #000080;
  --select-fg: #FFFFFF;
  --backdrop: #008080;

  --frame: 4px;
  --corner: 24px;
  --btn-size: 16px;
  --btn-h: 14px;
  --title-h: 18px;
  --ctl-h: 23px;
  --ticks-display: none;
  --default-ring: 1px solid #000;

  --desk-ink: #FFFFFF;
  --wa-bottom: 28px;

  --raised:    inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dark), inset 2px 2px 0 var(--light), inset -2px -2px 0 var(--lo);
  --sunken:    inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dark), inset -2px -2px 0 var(--light);
  --raised-sm: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  /* Win95 window frames put the light grey OUTSIDE the white (buttons are the reverse) */
  --frame-raised: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--dark), inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo);
}

/* ---------- CDE (Motif / dtwm) ---------- */
[data-theme="cde"] {
  --font: "Lucida Sans", "Luxi Sans", Helvetica, Arial, sans-serif;
  --font-size: 12px;
  --title-weight: 700;
  --title-align: center;

  --base: #AEB2C3;               /* swap this one value to change palette */
  --surface: var(--base);
  --hi:   color-mix(in srgb, var(--base) 45%, #fff);
  --lo:   color-mix(in srgb, var(--base) 55%, #000);
  --dark: color-mix(in srgb, var(--base) 25%, #000);
  --field: #E6E6EE;
  --ink: #000000;
  --trough: color-mix(in srgb, var(--base) 70%, #000);

  --title-bg: #718BA6;
  --title-fg: #FFFFFF;
  --title-bg-off: var(--base);
  --title-fg-off: #000000;
  --title-hi: color-mix(in srgb, var(--title-bg) 50%, #fff);
  --title-lo: color-mix(in srgb, var(--title-bg) 50%, #000);
  --select: #5D6B8C;
  --select-fg: #FFFFFF;
  --backdrop: #4F6B80;
  --backdrop-dot: color-mix(in srgb, var(--backdrop) 82%, #000);

  --frame: 5px;
  --corner: 24px;
  --btn-size: 22px;
  --ctl-h: 24px;
  --ticks-display: block;
  --default-ring: 2px solid var(--lo);

  --desk-ink: #FFFFFF;
  --link: #33405E;
  --muted: color-mix(in srgb, var(--base) 40%, #000);
  --wa-bottom: 86px;
  --outline-moves: 1;

  --raised:    inset 1px 1px 0 var(--hi), inset 2px 2px 0 var(--hi), inset -1px -1px 0 var(--lo), inset -2px -2px 0 var(--lo);
  --sunken:    inset 1px 1px 0 var(--lo), inset 2px 2px 0 var(--lo), inset -1px -1px 0 var(--hi), inset -2px -2px 0 var(--hi);
  --raised-sm: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --frame-raised: inset 1px 1px 0 var(--hi), inset 2px 2px 0 var(--hi), inset 3px 3px 0 var(--hi),
                  inset -1px -1px 0 var(--lo), inset -2px -2px 0 var(--lo), inset -3px -3px 0 var(--lo);
  /* mwm frames are a raised RING: the inner edge is bevelled the other way */
  --frame-inner: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
  --menubar-bevel: var(--raised-sm);
}

/* =====================================================================
   2. Desktop
   ===================================================================== */

html { height: 100%; }
body.desk { margin: 0; }
.desk {
  background: var(--backdrop);
  min-height: 100vh;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* CDE backdrop: tiled two-tone bitmap, never a photo */
[data-theme="cde"].desk, [data-theme="cde"] .desk {
  background-color: var(--backdrop);
  background-image:
    linear-gradient(45deg, var(--backdrop-dot) 25%, transparent 25% 75%, var(--backdrop-dot) 75%),
    linear-gradient(45deg, var(--backdrop-dot) 25%, transparent 25% 75%, var(--backdrop-dot) 75%);
  background-size: 8px 8px; background-position: 0 0, 4px 4px;
}

[data-theme] button { font: inherit; color: inherit; cursor: default; }
[data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] p, [data-theme] ul, [data-theme] dl, [data-theme] dd { margin: 0; }

.desk-icons {
  position: absolute; left: 12px; top: calc(var(--wa-top) + 12px);
  display: grid; gap: 10px; z-index: 1;
}
.desk[data-icons="off"] .desk-icons { display: none; }

.icon-tray {
  position: absolute; left: 12px; bottom: calc(var(--wa-bottom) + 12px);
  display: flex; gap: 6px; z-index: 1;
}
[data-theme="os2"] .icon-tray, [data-theme="fvwm95"] .icon-tray { display: none; }

/* =====================================================================
   3. Window chrome
   ===================================================================== */

.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 220px; min-height: 120px;
  padding: var(--frame);
  background: var(--surface);
  box-shadow: var(--frame-raised);
}
.win[hidden] { display: none; }
.win[data-max] {
  left: 0 !important; right: 0; top: var(--wa-top) !important; bottom: var(--wa-bottom);
  width: auto !important; height: auto !important;
}

/* Inner edge of the frame ring: one pixel in from the client area */
.win::before {
  content: ""; position: absolute; inset: calc(var(--frame) - 1px); pointer-events: none;
  box-shadow: var(--frame-inner);
}

/* Segmented frame: tick grooves across the border at each corner handle (FVWM, CDE).
   Four gradients paint lines across the whole box; a mask keeps only the border ring. */
.win::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  display: var(--ticks-display, none);
  border: var(--frame) solid transparent;
  background:
    linear-gradient(90deg,  transparent calc(var(--corner) - 1px), var(--lo) 0 var(--corner), var(--hi) 0 calc(var(--corner) + 1px), transparent 0),
    linear-gradient(90deg,  transparent calc(100% - var(--corner) - 1px), var(--lo) 0 calc(100% - var(--corner)), var(--hi) 0 calc(100% - var(--corner) + 1px), transparent 0),
    linear-gradient(180deg, transparent calc(var(--corner) - 1px), var(--lo) 0 var(--corner), var(--hi) 0 calc(var(--corner) + 1px), transparent 0),
    linear-gradient(180deg, transparent calc(100% - var(--corner) - 1px), var(--lo) 0 calc(100% - var(--corner)), var(--hi) 0 calc(100% - var(--corner) + 1px), transparent 0);
  /* after the shorthand, or the shorthand resets them */
  background-origin: border-box; background-clip: border-box;
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box;
          mask-composite: exclude;
}

.titlebar {
  display: flex; align-items: center;
  flex: none;
  height: var(--title-h);
  margin-bottom: 2px;
  background: var(--title-bg-off); color: var(--title-fg-off);
  font-weight: var(--title-weight);
  user-select: none;
}
.win[data-active="true"] .titlebar { background: var(--title-bg); color: var(--title-fg); }

.tb-title {
  flex: 1; align-self: stretch; margin: 0; padding: 0 6px;
  font: inherit; line-height: var(--title-h); text-align: var(--title-align);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tb-btn {
  flex: none; display: grid; place-items: center;
  width: var(--btn-size); height: var(--btn-h);
  padding: 0; border: 0;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--raised);
}
.tb-btn:active { box-shadow: var(--sunken); }
.tb-btn:active .g { transform: translate(1px, 1px); }
.tb-btn:focus-visible { outline: 1px dotted var(--ink); outline-offset: -4px; }

.g { display: block; }
.obj-icon { image-rendering: pixelated; display: block; }

.win-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 8px; background: var(--surface);
}

/* Title pieces that carry their own bevel (mwm, fvwm2): use the title's hi/lo when active */
.win { --t-hi: var(--hi); --t-lo: var(--lo); }
.win[data-active="true"] { --t-hi: var(--title-hi, var(--hi)); --t-lo: var(--title-lo, var(--lo)); }

/* ---------- 3a. Title-bar glyphs ---------- */

.g-close { width: 10px; height: 10px; background: currentColor;
  -webkit-mask: var(--x) center / contain no-repeat; mask: var(--x) center / contain no-repeat; }
.g-restore { position: relative; width: 11px; height: 11px; }
.g-restore::before, .g-restore::after {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1px solid currentColor; border-top-width: 2px; background: var(--surface);
}
.g-restore::before { top: 0; right: 0; }
.g-restore::after  { bottom: 0; left: 0; }
.g-arrow-r, .g-arrow-l { width: 4px; height: 7px; background: currentColor;
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat; }
.g-arrow-l { transform: scaleX(-1); }
.tb-btn:active .g-arrow-l { transform: translate(1px, 1px) scaleX(-1); }

/* Window's own icon replaces the menu glyph on OS/2 and Fvwm95 */
.tb-menu .obj-icon { display: none; }
[data-theme="os2"] .tb-menu .obj-icon, [data-theme="fvwm95"] .tb-menu .obj-icon { display: block; }
[data-theme="os2"] .tb-menu .g-menu,   [data-theme="fvwm95"] .tb-menu .g-menu   { display: none; }

/* OS/2: left slot is the window's OWN icon. Min = small solid square, max = large outlined square.
   Warp 4 has no close button: double-click the icon or use the menu. */
[data-theme="os2"] .tb-menu { width: 22px; background: transparent; box-shadow: none; }
[data-theme="os2"] .g-min { width: 6px;  height: 6px;  background: currentColor; }
[data-theme="os2"] .g-max { width: 11px; height: 11px; border: 1px solid currentColor; border-top-width: 2px; }
[data-theme="os2"] .tb-title { padding-left: 4px; }
[data-theme="os2"] .tb-close { display: none; }

/* CDE: every titlebar piece is its own raised box. Menu = short wide bar,
   min = small bevel-in-bevel square, max = large one. No close button. */
[data-theme="cde"] .g-menu { width: 11px; height: 4px; background: var(--surface); box-shadow: var(--raised-sm); }
[data-theme="cde"] .g-min  { width: 6px;  height: 6px;  background: var(--surface); box-shadow: var(--raised-sm); }
[data-theme="cde"] .g-max  { width: 12px; height: 12px; background: var(--surface); box-shadow: var(--raised-sm); }
[data-theme="cde"] .g-restore { width: 12px; height: 12px; background: var(--surface); box-shadow: var(--sunken); }
[data-theme="cde"] .g-restore::before, [data-theme="cde"] .g-restore::after { display: none; }
[data-theme="cde"] .tb-close { display: none; }
[data-theme="cde"] .tb-menu { box-shadow: var(--raised); }
[data-theme="cde"] .tb-btn:active { box-shadow: var(--sunken); }
[data-theme="cde"] .tb-title,
[data-theme="fvwm"] .tb-title {
  box-shadow: inset 1px 1px 0 var(--t-hi), inset -1px -1px 0 var(--t-lo);
}
[data-theme="cde"] .tb-title { box-shadow: inset 1px 1px 0 var(--t-hi), inset 2px 2px 0 var(--t-hi), inset -1px -1px 0 var(--t-lo), inset -2px -2px 0 var(--t-lo); }

/* FVWM Classic: thin 1px vector glyphs. Menu = small square outline, min = dot, max = square outline. */
[data-theme="fvwm"] .g-menu { width: 9px;  height: 9px;  border: 1px solid currentColor; }
[data-theme="fvwm"] .g-min  { width: 4px;  height: 4px;  background: currentColor; }
[data-theme="fvwm"] .g-max  { width: 10px; height: 10px; border: 1px solid currentColor; border-top-width: 2px; }
[data-theme="fvwm"] .tb-close { display: none; }

/* Fvwm95: Windows 95 glyph set. Menu slot shows the app's mini icon. */
[data-theme="fvwm95"] .titlebar { padding: 0 2px; }
[data-theme="fvwm95"] .tb-menu { background: transparent; box-shadow: none; }
[data-theme="fvwm95"] .tb-title { padding-left: 3px; }
[data-theme="fvwm95"] .tb-btn:not(.tb-menu) { margin-left: 0; }
[data-theme="fvwm95"] .tb-close { margin-left: 2px; }
[data-theme="fvwm95"] .g-min { width: 6px; height: 2px; background: currentColor; align-self: end; margin-bottom: 3px; }
[data-theme="fvwm95"] .g-max { width: 9px; height: 9px; border: 1px solid currentColor; border-top-width: 2px; }
[data-theme="fvwm95"] .g-restore { width: 9px; height: 9px; }
[data-theme="fvwm95"] .g-restore::before, [data-theme="fvwm95"] .g-restore::after { width: 6px; height: 6px; }
[data-theme="fvwm95"] .g-close { width: 8px; height: 7px; }

/* Rubber-band while moving/resizing: outline only, no opaque window movement */
.win.is-dragging { outline: 2px dotted var(--rubber); outline-offset: -1px; background: transparent; box-shadow: none; }
.win.is-dragging::before, .win.is-dragging::after { display: none; }
.win.is-dragging > * { visibility: hidden; }

/* =====================================================================
   4. Widgets
   ===================================================================== */

/* ----- Push button ----- */
.btn {
  display: inline-grid; place-items: center;
  min-height: var(--ctl-h); padding: 0 14px;
  border: 0; background: var(--surface); color: var(--ink);
  font: inherit; text-decoration: none; white-space: nowrap;
  box-shadow: var(--raised);
}
.btn:active, .btn[aria-pressed="true"] { box-shadow: var(--sunken); padding: 1px 13px 0 15px; }
.btn[data-default] { outline: var(--default-ring); outline-offset: 1px; }
.btn:focus-visible { outline: 1px dotted var(--ink); outline-offset: -6px; }

/* ----- Text field ----- */
.field {
  min-height: var(--ctl-h); padding: 3px 5px; border: 0;
  background: var(--field); color: var(--ink);
  font: inherit; box-shadow: var(--sunken);
}

/* ----- Checkbox ----- */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 14px; height: 14px; margin: 0;
  background: var(--field); box-shadow: var(--sunken); color: var(--ink);
}
input[type="checkbox"]:checked::before {
  content: ""; position: absolute; inset: 2px; background: currentColor;
  -webkit-mask: var(--x) center / contain no-repeat; mask: var(--x) center / contain no-repeat;
}

/* ----- Radio (default: square-cornered sunken well) ----- */
input[type="radio"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 15px; height: 15px; margin: 0;
  background: var(--field); box-shadow: var(--sunken); color: var(--ink);
}
input[type="radio"]:checked::before { content: ""; position: absolute; inset: 4px; background: currentColor; }
[data-theme="os2"] input[type="radio"],
[data-theme="os2"] input[type="radio"]:checked::before,
[data-theme="fvwm"] input[type="radio"],
[data-theme="fvwm"] input[type="radio"]:checked::before,
[data-theme="fvwm95"] input[type="radio"],
[data-theme="fvwm95"] input[type="radio"]:checked::before { border-radius: 50%; }

/* ----- CDE / Motif: square toggles filled with selection color, DIAMOND radios ----- */
[data-theme="cde"] input[type="checkbox"] { background: var(--surface); box-shadow: var(--raised); }
[data-theme="cde"] input[type="checkbox"]:checked { background: var(--select); box-shadow: var(--sunken); }
[data-theme="cde"] input[type="checkbox"]:checked::before { display: none; }

[data-theme="cde"] input[type="radio"] {
  --d: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 16px; height: 16px; box-shadow: none;
  clip-path: var(--d);
  background: linear-gradient(135deg, var(--hi) 50%, var(--lo) 50%);
}
[data-theme="cde"] input[type="radio"]::before {
  content: ""; position: absolute; inset: 2px; clip-path: var(--d); background: var(--surface);
}
[data-theme="cde"] input[type="radio"]:checked { background: linear-gradient(135deg, var(--lo) 50%, var(--hi) 50%); }
[data-theme="cde"] input[type="radio"]:checked::before { inset: 2px; background: var(--select); }

input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }

/* ----- Etched group frame ----- */
fieldset {
  margin: 8px 0; padding: 8px 10px; border: 1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--hi), 1px 1px 0 var(--hi);
}
legend { padding: 0 4px; background: var(--surface); }
.pane legend { background: var(--field); }

/* ----- Dialog button row ----- */
.dialog-buttons {
  display: flex; justify-content: center; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi);
}
.dialog-buttons .btn { flex: 1; max-width: 96px; }

/* ----- Menus ----- */
.menu {
  position: fixed; z-index: 10000; min-width: 150px;
  margin: 0; padding: 3px; list-style: none;
  background: var(--surface); color: var(--ink); box-shadow: var(--raised);
}
.menu li { display: flex; gap: 24px; padding: 3px 20px; white-space: nowrap; outline: 0; }
.menu li .accel { margin-left: auto; }
.menu li[role="menuitem"]:hover, .menu li[role="menuitem"]:focus { background: var(--select); color: var(--select-fg); }
.menu li[aria-disabled="true"] { color: var(--lo); }
.menu li[aria-disabled="true"]:hover, .menu li[aria-disabled="true"]:focus { background: transparent; color: var(--lo); }
.menu .sep { height: 2px; padding: 0; margin: 3px 0; box-shadow: inset 0 1px 0 var(--lo), inset 0 -1px 0 var(--hi); }
.menu li[data-sub]::after { content: "\25B8"; margin-left: auto; }
.menu--title { padding: 2px 20px 4px; font-weight: 700; text-align: center; }
[data-theme="cde"] .menu--tearoff::before {
  content: ""; display: block; height: 7px; margin-bottom: 2px;
  background: repeating-linear-gradient(90deg, var(--lo) 0 4px, transparent 4px 7px) center / 100% 1px no-repeat;
}
[data-theme="fvwm"] .menu--title { background: var(--title-bg); color: var(--title-fg); margin: -3px -3px 3px; padding: 3px 20px; }

/* ----- Menu bar ----- */
.menubar {
  display: flex; flex: none; gap: 0; margin: -4px -4px 6px; padding: 2px;
  box-shadow: var(--menubar-bevel);
}
.mb-item { padding: 2px 8px; border: 0; background: transparent; }
.mb-item[aria-expanded="true"] { background: var(--select); color: var(--select-fg); }
[data-theme="cde"] .mb-item[aria-expanded="true"] { background: transparent; color: var(--ink); box-shadow: var(--raised-sm); }

/* ----- Scrollbars ----- */
.scroll { overflow: auto; }
/* Chrome ignores ::-webkit-scrollbar when scrollbar-color is set, so only use it as the fallback */
@supports not selector(::-webkit-scrollbar) {
  .scroll { scrollbar-color: var(--surface) var(--trough); }
}
.scroll::-webkit-scrollbar { width: 16px; height: 16px; background: var(--trough); }
.scroll::-webkit-scrollbar-thumb { background: var(--surface); box-shadow: var(--raised); }
.scroll::-webkit-scrollbar-corner { background: var(--surface); }
.scroll::-webkit-scrollbar-button:single-button { width: 16px; height: 16px; background-color: var(--surface); box-shadow: var(--raised); background-repeat: no-repeat; background-position: center; }
.scroll::-webkit-scrollbar-button:single-button:active { box-shadow: var(--sunken); }
.scroll::-webkit-scrollbar-button:vertical:decrement   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 4L3.5 0L7 4z'/%3E%3C/svg%3E"); }
.scroll::-webkit-scrollbar-button:vertical:increment   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0L3.5 4L7 0z'/%3E%3C/svg%3E"); }
.scroll::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M4 0L0 3.5L4 7z'/%3E%3C/svg%3E"); }
.scroll::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0L4 3.5L0 7z'/%3E%3C/svg%3E"); }
.scroll::-webkit-scrollbar-button:vertical:start:increment,
.scroll::-webkit-scrollbar-button:vertical:end:decrement,
.scroll::-webkit-scrollbar-button:horizontal:start:increment,
.scroll::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }

/* ----- Selection ----- */
[data-theme] ::selection { background: var(--select); color: var(--select-fg); }

/* ----- Desktop-object icons ----- */
.obj {
  display: grid; justify-items: center; gap: 2px; width: 84px; padding: 2px 0;
  border: 0; background: transparent; text-align: center; color: var(--desk-ink);
}
.obj img { width: 32px; height: 32px; image-rendering: pixelated; }
.obj span { padding: 0 2px; }
.obj[aria-selected="true"] span { background: var(--select); color: var(--select-fg); }
.obj:focus-visible { outline: 0; }
.obj:focus-visible span { outline: 1px dotted var(--desk-ink); }
[data-theme="os2"] .obj--shadow span { font-style: italic; }

/* =====================================================================
   5. Signature elements
   ===================================================================== */

/* ----- 5a. OS/2 Notebook (right tabs) — other themes get a top tab folder ----- */
.notebook {
  height: 100%;
  display: grid; grid-template-rows: auto 1fr; grid-template-areas: "tabs" "page";
}
.nb-tabs { grid-area: tabs; display: flex; gap: 0; padding-left: 2px; position: relative; z-index: 1; }
.nb-tab {
  padding: 3px 12px 2px; margin-top: 2px; border: 0;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px 0 0 var(--dark), inset -2px 0 0 var(--lo);
}
.nb-tab[aria-selected="true"] { margin: 0 -2px -2px; padding: 4px 14px 5px; position: relative; z-index: 1; }
.nb-page {
  grid-area: page; position: relative; min-height: 0;
  display: flex; flex-direction: column;
  padding: 10px 10px 32px; background: var(--surface);
  box-shadow: var(--raised);
}
.nb-panel { flex: 1; min-height: 0; padding: 6px; background: var(--field); box-shadow: var(--sunken); }
.nb-panel[hidden] { display: none; }
.nb-turn { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 2px; }
.nb-turn .tb-btn { width: 18px; height: 18px; }

[data-theme="os2"] .notebook {
  grid-template-columns: 1fr auto; grid-template-rows: 1fr; grid-template-areas: "page tabs";
  padding: 8px 0 8px 8px; background: var(--surface); box-shadow: var(--raised);
}
[data-theme="os2"] .nb-page {
  padding: 14px 14px 32px; margin: 0 6px 6px 0;
  box-shadow: var(--raised), 2px 2px 0 var(--lo), 3px 3px 0 var(--hi), 5px 5px 0 var(--lo);
}
[data-theme="os2"] .nb-tabs { flex-direction: column; gap: 2px; padding: 12px 4px 0 0; }
[data-theme="os2"] .nb-tab {
  writing-mode: vertical-rl; margin: 0; padding: 10px 4px 10px 6px;
  box-shadow: var(--raised);
}
[data-theme="os2"] .nb-tab[aria-selected="true"] { margin: 0 0 0 -3px; padding: 10px 4px 10px 9px; font-weight: 700; }

/* ----- WarpCenter (OS/2, top) / taskbar (Fvwm95, bottom) ----- */
.warpcenter {
  position: absolute; left: 0; right: 0; z-index: 9000;
  display: none; align-items: center; gap: 2px; height: 28px; padding: 2px;
  background: var(--surface); box-shadow: var(--raised);
}
[data-theme="os2"] .warpcenter { display: flex; top: 0; }
[data-theme="fvwm95"] .warpcenter { display: flex; bottom: 0; box-shadow: inset 0 1px 0 var(--light), inset 0 2px 0 var(--hi); padding-top: 4px; }
.warpcenter .wc-item {
  height: 22px; padding: 0 8px; display: flex; align-items: center; gap: 4px;
  border: 0; background: var(--surface); box-shadow: var(--raised); white-space: nowrap;
}
.warpcenter .wc-item[aria-pressed="true"] { box-shadow: var(--sunken); }
.warpcenter .wc-spacer { flex: 1; }
.warpcenter .wc-clock { height: 22px; padding: 0 8px; display: grid; place-items: center; box-shadow: var(--sunken); }
.wc-tasks { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.wc-tasks .wc-item { max-width: 180px; }
.wc-tasks .wc-item span { overflow: hidden; text-overflow: ellipsis; }
.only-fvwm95 { display: none; }
[data-theme="fvwm95"] .only-fvwm95 { display: inline; }
[data-theme="fvwm95"] .wc-start { font-weight: 700; padding: 0 5px; }
[data-theme="fvwm95"] .wc-tasks .wc-item { width: 160px; }
[data-theme="fvwm95"] .wc-tasks .wc-item[aria-pressed="true"] { font-weight: 700; }
[data-theme="fvwm95"] .warpcenter .wc-clock { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }

/* ----- 5b. FVWM: FvwmButtons dock + Pager ----- */
.fvwm-buttons {
  position: absolute; right: 8px; bottom: 8px; z-index: 9000;
  display: none; gap: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--dark), var(--raised);
}
[data-theme="fvwm"] .fvwm-buttons { display: flex; }
.fvwm-buttons > * { width: 40px; height: 40px; display: grid; place-items: center; border: 0; padding: 0; background: var(--surface); box-shadow: var(--raised); }
.fvwm-buttons > button:active { box-shadow: var(--sunken); }
.fvwm-buttons img { width: 32px; height: 32px; image-rendering: pixelated; }
.fvwm-buttons .fb-pager { width: auto; padding: 0 3px; }
.fvwm-buttons .fb-clock { width: 56px; font-weight: 700; }

.pager {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px;
  width: 168px; padding: 1px; background: var(--lo); box-shadow: var(--sunken);
}
.pager__page { position: relative; aspect-ratio: 4 / 3; background: var(--pager-bg); border: 0; padding: 0; overflow: hidden; }
.pager__page[aria-current="true"] { background: var(--pager-cur); }
.pager__win  { position: absolute; background: var(--surface); box-shadow: inset 0 0 0 1px var(--dark); }

/* ----- 5c. CDE: Front Panel + Workspace Switch ----- */
.front-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 9000;
  display: none; align-items: flex-end; gap: 2px; padding: 6px 8px;
  background: var(--surface); box-shadow: var(--frame-raised);
}
[data-theme="cde"] .front-panel { display: flex; }
.fp-tile {
  position: relative; display: grid; place-items: center; flex: none;
  width: 48px; height: 56px; margin-top: 10px; border: 0; padding: 0;
  background: var(--surface); box-shadow: var(--raised);
}
.fp-tile img { width: 32px; height: 32px; image-rendering: pixelated; }
.fp-tile[data-drawer]::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 8px; transform: translateX(-50%);
  background: var(--surface); box-shadow: var(--raised-sm);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
button.fp-tile:active { box-shadow: var(--sunken); }
.fp-clock { grid-template-rows: 1fr auto; padding: 4px 0 3px; font-size: 10px; }
.fp-handle {
  align-self: stretch; width: 10px; margin: -2px 2px;
  background: repeating-linear-gradient(180deg, var(--hi) 0 1px, var(--lo) 1px 2px, transparent 2px 4px) center / 4px 60% no-repeat;
  box-shadow: var(--raised-sm);
}

.ws-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; width: 128px; height: 56px; margin: 10px 4px 0; padding: 2px; box-shadow: var(--sunken); }
.ws-btn { position: relative; border: 0; padding: 0; font-size: 10px; background: var(--surface); box-shadow: var(--raised); }
.ws-btn[aria-current="true"] { background: var(--select); color: var(--select-fg); box-shadow: var(--sunken); }

/* =====================================================================
   6. Site content
   ===================================================================== */

.win--dialog { width: 300px; }
.cde-only { display: none; }
[data-theme="cde"] .cde-only { display: block; }

.toolbar { display: flex; flex-wrap: wrap; gap: 4px; flex: none; margin-bottom: 8px; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.section { flex: 1; min-height: 0; }
.section[hidden] { display: none; }

.pane { padding: 12px 14px; background: var(--field); box-shadow: var(--sunken); }

.statusbar { display: flex; gap: 2px; flex: none; margin-top: 6px; }
.sb-cell { padding: 1px 6px; box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); white-space: nowrap; }
.sb-grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.pane h1 { font-size: 18px; color: var(--link); }
.subtitle { font-style: italic; color: var(--muted); margin: 2px 0 10px !important; }
.pane p { line-height: 1.5; }
.about { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.portrait { flex: none; padding: 6px; background: var(--surface); box-shadow: var(--sunken); }
.portrait img { display: block; width: 96px; height: 96px; image-rendering: pixelated; }

.details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.details dt { font-weight: 700; }
.details.skills dd { display: flex; flex-wrap: wrap; gap: 4px; }

.entry { padding: 6px 0 8px; }
.entry + .entry { border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi); }
.entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.date { color: var(--muted); white-space: nowrap; }
.org { color: var(--link); margin-bottom: 4px; }
.entry ul { padding-left: 18px; }
.entry li { line-height: 1.45; }

.tag { display: inline-block; padding: 0 6px; background: var(--surface); box-shadow: var(--raised-sm); font-size: 11px; line-height: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.intro { font-style: italic; color: var(--muted); padding-bottom: 8px; margin-bottom: 4px !important; border-bottom: 1px solid var(--lo); box-shadow: 0 1px 0 var(--hi); }
.post { padding: 10px 0; }
.post + .post { border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi); }
.post-title { font-weight: 700; color: var(--link); }
.post p { margin-top: 4px; }
a { color: var(--link); }

.app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.app { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 8px; background: var(--surface); box-shadow: var(--raised-sm); }
.app h3 { font-size: inherit; }
.app p { margin-top: 2px; line-height: 1.4; }
.app-ico { font-size: 22px; line-height: 1; width: 28px; text-align: center; }
.app .btn { min-height: 20px; padding: 0 10px; }

.props fieldset:first-child { margin-top: 0; }
.opt { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.palette-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }

/* =====================================================================
   7. Small screens: windows stack, shells that need room are dropped
   ===================================================================== */

@media (max-width: 767px) {
  .desk { height: auto; overflow: visible; padding: calc(var(--wa-top) + 12px) 12px calc(var(--wa-bottom) + 12px); }
  .desk-icons, .icon-tray, .fvwm-buttons, .front-panel { display: none !important; }
  [data-theme="cde"], [data-theme="fvwm"] { --wa-bottom: 0px; }
  .warpcenter { position: fixed; }
  .wc-tasks { display: none; }
  .win, .win[data-max] {
    position: relative; left: auto !important; top: auto !important; right: auto; bottom: auto;
    width: auto !important; height: auto !important; margin-bottom: 12px;
  }
  #win-main { height: 82vh !important; }
  .tb-max { display: none; }
  .about { flex-direction: column; align-items: center; text-align: center; }
  .app-list { grid-template-columns: 1fr; }
  .entry-head { flex-direction: column; }
  .details { grid-template-columns: 1fr; }
}