theme.css

/*
  dim-app theme (v0.16.0) — the components of dimOS Desktop's apps, written against Desktop's theme tokens.

  The theme's values live in dimOS Desktop: it serves every skin's tokens (Portal, Research, Vibeslop, Hackerman, …) as
  /theme.css, and theme.js links it (an app at /apps/<name>/ reaches it as ../../theme.css) and sets html[data-skin] and
  html[data-corners] from what Desktop saved, so an app looks like the Desktop around it in every skin and follows it
  live. The skin's color-scheme picks the structural rules here: the light ones (Research's design doc: hairline cards,
  serif titles, mono micro-labels) or body.science.dark (Portal's: hairlines, Michroma section heads, glow on focus).
  Off Desktop, the one bundled fallback below: Portal's tokens.

  The theme contract (Desktop's, the portal mockup's src.html): --bg --fg --muted-fg --primary --primary-fg --ok --warn
  --danger --info --surface --raised --input-bg --hover --sel --border --border-strong --hair --radius --radius-sm
  --radius-lg --radius-xl --radius-pill --shadow --shadow-lg --blur --sans --mono --display --label-case --track-label,
  and the other names below (--card, --muted, --accent, --violet, --code-*, --cat-*, --scene-*, --term-*, --axis-*, …).

  Components are .dim-* classes; every color, radius and font is a token, so app CSS that uses the tokens follows every
  skin. A square skin (panel radius 0, like Portal) also squares every corner the way Portal's doc does
  (`*{border-radius:0!important}`), so an app's own rounded corner never leaks into it.
*/
/* The doc's four faces, bundled (fonts/, latin subset, SIL Open Font License): no network, so an app looks the same
   offline and on a robot. font-display: block, so text waits for its face instead of flashing a fallback; theme.js
   starts loading all four at once (initTheme), not only when a view first uses one. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
    src: url("./fonts/inter-variable.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("./fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500 700;
    font-display: block;
    src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("./fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: block;
    src: url("./fonts/instrument-serif-italic-400.woff2") format("woff2");
}
@font-face {
    font-family: "Michroma";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("./fonts/michroma-400.woff2") format("woff2");
}

/* how much of the page Desktop's shell covers (its dock), set by theme.js from the shell's "dimos-inset" message;
   0 outside Desktop. Keep controls and the ends of scrolling lists above var(--dim-inset-bottom). */
:root {
    --dim-inset-top: 0px;
    --dim-inset-bottom: 0px;
    --dim-inset-left: 0px;
    --dim-inset-right: 0px;
}

/* The bundled fallback: Portal's tokens (Desktop's theme contract, its /theme.css :root block) for an app off Desktop.
   Inside Desktop, theme.js links Desktop's /theme.css, whose skin blocks win over this zero-specificity one. */
:where(:root) {
    color-scheme: dark;
    --bg: #05070d;
    --fg: #ece8f0;
    --muted-fg: #8e8898;
    --primary: #7cc8ec;
    --primary-fg: #05070d;
    --ok: #8fd4a8;
    --warn: #e8bf6a;
    --danger: #f2707a;
    --info: #8fcfe0;
    --surface: #0e0c13;
    --raised: #0e0c13;
    --input-bg: #0c0b10;
    --hover: rgba(255, 255, 255, 0.04);
    --sel: color-mix(in srgb, var(--primary) 13%, transparent);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.22);
    --hair: rgba(255, 255, 255, 0.08);
    --radius: 0px;
    --radius-sm: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-pill: 0px;
    --shadow: none;
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
    --blur: blur(10px);
    --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --display: "Michroma", "Eurostile", "Arial Black", sans-serif;
    --label-case: uppercase;
    --track-label: 0.2em;
    --card: color-mix(in srgb, var(--surface) 92%, transparent);
    --panel: var(--card);
    --accent: var(--hover);
    --secondary: transparent;
    --secondary-fg: var(--muted-fg);
    --input: var(--border);
    --primary-hover: var(--primary);
    --primary-soft: var(--sel);
    --danger-fg: var(--primary-fg);
    --violet: #9fb4d8;
    --ring: var(--primary);
    --ring-soft: color-mix(in srgb, var(--primary) 25%, transparent);
    --ok-line: color-mix(in srgb, var(--ok) 40%, transparent);
    --warn-line: color-mix(in srgb, var(--warn) 40%, transparent);
    --danger-line: color-mix(in srgb, var(--danger) 40%, transparent);
    --track: var(--input-bg);
    --off: var(--muted-fg);
    --placeholder: var(--muted-fg);
    --track-btn: 0.04em;
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.6);
    --glow-accent: 0 0 12px color-mix(in srgb, var(--primary) 30%, transparent);
    --hud: var(--sans);
    --radius-round: 0px;
    --ink: var(--fg);
    --dim: var(--muted-fg);
    --line: var(--border);
    --magenta: var(--primary);
    --mint: var(--ok);
    --cyan: var(--info);
    --bk: var(--input-bg);
}

/* a square skin (Portal; theme.js marks html[data-dim-square] when the skin's panel radius is 0) squares every corner,
   as Portal's doc does (`*{border-radius:0!important}`) */
html[data-dim-square] body.science *,
html[data-dim-square] body.science *::before,
html[data-dim-square] body.science *::after,
html[data-dim-square] body.science *::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.science {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    font: 14px/1.55 var(--hud);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* the doc: `button,input,select,textarea,option{font-family:var(--hud)}` — zero specificity, so app classes win */
:where(body.science) :where(button, input, select, textarea, option) {
    font-family: var(--hud);
}
:where(body.science) :where(input, textarea)::placeholder {
    color: var(--placeholder);
}
::selection {
    background: var(--sel);
}

/* ───────────────────────── typography ───────────────────────── */

.dim-h1,
.dim-h2,
.dim-h3 {
    margin: 0;
    color: var(--fg);
}
/* titles: Instrument Serif on paper; Michroma, uppercase and tracked, in the Portal */
.dim-h1 {
    font: 400 30px/1.1 var(--display);
    letter-spacing: -0.01em;
}
body.science.dark .dim-h1 {
    font: 400 18px/1.3 var(--display);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
}
/* an app's name in its own bar: Research's serif ("titles, greetings, the clock, card names"); Portal's Michroma
   (uppercase, wide tracking, small sizes only) */
.dim-title {
    font: 400 22px/1.1 var(--display);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--fg);
    white-space: nowrap;
}
body.science.dark .dim-title {
    font: 400 12px/1.3 var(--display);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
}

/* section heads: Research `h2{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}`;
   Portal `h2{font:13px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--magenta)}` */
.dim-h2,
.dim-card-title {
    font: 500 10.5px/1.5 var(--mono);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
body.science.dark .dim-h2 {
    font: 400 12px/1.5 var(--display);
    letter-spacing: var(--track-label);
}
/* card heads + micro-labels: Research `.box h3` mono; Portal `.box h3{font:10px var(--display);letter-spacing:.2em;color:var(--dim)}` */
.dim-h3,
.dim-label {
    font: 500 10.5px/1.5 var(--mono);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
    color: var(--muted-fg);
}
body.science.dark .dim-h3,
body.science.dark .dim-label,
body.science.dark .dim-card-title {
    font: 400 10px/1.5 var(--display);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
    color: var(--dim);
}
.dim-muted {
    color: var(--muted-fg);
}
.dim-mono,
code,
kbd,
samp {
    font-family: var(--mono);
}
code {
    font-size: 12.5px;
    color: var(--cyan);
}
kbd {
    font: 11px var(--mono);
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bk);
    color: var(--dim);
}
.dim-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--primary-soft);
}
.dim-link:hover {
    border-color: var(--primary);
}

/* ───────────────────────── surfaces ──────────────────────────── */

/* Research `.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}`;
   Portal `.box{background:var(--panel);border:1px solid var(--line)}` */
.dim-panel,
.dim-card {
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.dim-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dim-card-desc {
    color: var(--muted-fg);
    font-size: 13px;
    margin-top: -6px;
}
/* frosted panel floating over a 3D/video view */
.dim-panel.glass {
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* sheets / modals: Research `.sheet{border-radius:14px;box-shadow:0 24px 60px rgba(32,33,31,.14)}`, Portal `0 20px 60px rgba(0,0,0,.7)` */
.dim-sheet,
.dim-modal {
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.dim-sheet > header,
.dim-modal > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hair);
    font: 400 22px var(--display);
}
body.science.dark .dim-sheet > header,
body.science.dark .dim-modal > header {
    padding: 10px 14px;
    border-bottom-color: var(--line);
    font: 400 10px var(--display);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
    color: var(--dim);
}
.dim-sheet > footer,
.dim-modal > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--hair);
}
/* key / value rows */
.dim-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    padding: 7px 0;
    border-bottom: 1px solid var(--hair);
}
.dim-kv > :first-child {
    color: var(--muted-fg);
}
.dim-kv > :last-child {
    font: 12.5px var(--mono);
}

/* ───────────────────────── buttons ──────────────────────────── */

/* Research `button{font-size:13px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 14px}`
   Portal `button{font:12px var(--hud);letter-spacing:.04em;background:none;border:1px solid var(--line);padding:8px 14px}` */
.dim-btn {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: 500 13px/1.25 var(--hud);
    letter-spacing: var(--track-btn);
    text-transform: none;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 14px;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
body.science.dark .dim-btn {
    font: 400 12px/1.25 var(--hud);
    letter-spacing: 0.04em;
    background: transparent;
}
.dim-btn:hover {
    background: var(--accent);
    border-color: var(--border-strong);
}
.dim-btn:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--ring-soft);
}
body.science.dark .dim-btn:focus-visible {
    box-shadow: 0 0 0 1px var(--primary), 0 0 14px rgba(124, 200, 236, 0.25);
}
.dim-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
/* Research `button.primary{background:var(--blue);border-color:var(--blue);color:#fff}`;
   Portal `button.primary{border-color:var(--magenta);color:var(--magenta);background:var(--sel)}`, glow on hover */
.dim-btn.primary,
.dim-btn.accent {
    color: var(--primary-fg);
    background: var(--primary);
    border-color: var(--primary);
}
.dim-btn.primary:hover,
.dim-btn.accent:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}
body.science.dark .dim-btn.primary,
body.science.dark .dim-btn.accent {
    color: var(--primary);
    background: var(--sel);
    border-color: var(--primary);
}
body.science.dark .dim-btn.primary:hover,
body.science.dark .dim-btn.accent:hover {
    background: var(--sel);
    box-shadow: var(--glow-accent);
}
/* Research `button.ghost{border-color:transparent;background:none;color:var(--dim)}` */
.dim-btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted-fg);
}
.dim-btn.ghost:hover {
    color: var(--fg);
    background: var(--accent);
    border-color: transparent;
}
body.science.dark .dim-btn.ghost:hover {
    border-color: var(--dim);
}
/* destructive: the skin's red (--danger) */
.dim-btn.danger {
    color: var(--danger);
    background: var(--card);
    border-color: var(--danger-line);
}
.dim-btn.danger:hover {
    border-color: var(--danger);
    background: var(--accent);
}
body.science.dark .dim-btn.danger {
    background: transparent;
}
.dim-btn.danger.solid {
    color: var(--danger-fg);
    background: var(--danger);
    border-color: var(--danger);
}
/* pressed / selected toggle buttons */
.dim-btn.on,
.dim-btn[aria-pressed="true"] {
    color: var(--primary);
    background: var(--sel);
    border-color: var(--primary);
}
.dim-btn.primary.on {
    color: var(--primary-fg);
    background: var(--primary-hover);
}
body.science.dark .dim-btn.primary.on {
    color: var(--primary);
    background: var(--sel);
    box-shadow: var(--glow-accent);
}
.dim-btn.sm {
    font-size: 12px;
    padding: 4px 10px;
}
body.science.dark .dim-btn.sm {
    font-size: 11px;
    padding: 4px 9px;
}
.dim-btn.lg {
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
}
.dim-btn.icon {
    padding: 6px 9px;
    letter-spacing: normal;
}
/* circle icon button (a square in the Portal) */
.dim-btn.round {
    border-radius: var(--radius-pill);
    padding: 0;
    width: 30px;
    height: 30px;
}
/* badge that is also a button */
button.dim-badge {
    cursor: pointer;
}
button.dim-badge:hover {
    border-color: var(--border-strong);
}

/* ───────────────────────── chips + badges ──────────────────────────── */

/* chips (multi-select, status): Research `.chip{font:12px var(--mono);padding:3px 10px;border:1px solid var(--line);
   border-radius:999px;color:var(--dim);background:#fff}`; Portal `.chip{font:11.5px var(--mono);padding:3px 8px;
   border:1px solid var(--line);color:var(--dim)}` */
.dim-badge,
.dim-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 400 12px/1.4 var(--mono);
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--secondary-fg);
    background: var(--secondary);
    white-space: nowrap;
}
body.science.dark .dim-badge,
body.science.dark .dim-chip {
    font-size: 11.5px;
    padding: 2px 8px;
}
.dim-chip {
    cursor: pointer;
    user-select: none;
}
.dim-chip.on,
.dim-chip[aria-pressed="true"],
.dim-badge.info,
.dim-badge.on {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--sel);
}
body.science.dark .dim-chip.on,
body.science.dark .dim-chip[aria-pressed="true"] {
    color: var(--fg);
}
.dim-badge.ok,
.dim-chip.ok {
    color: var(--ok);
    border-color: var(--ok-line);
}
.dim-badge.warn,
.dim-chip.warn {
    color: var(--warn);
    border-color: var(--warn-line);
}
.dim-badge.danger,
.dim-chip.danger {
    color: var(--danger);
    border-color: var(--danger-line);
}
/* counts / NEW: Research `.badge{font:500 10px var(--mono);padding:1px 7px;border-radius:999px;background:var(--blue);color:#fff}` */
.dim-badge.solid {
    font: 500 10px/1.5 var(--mono);
    padding: 1px 7px;
    color: var(--primary-fg);
    background: var(--primary);
    border-color: var(--primary);
}
.dim-badge.solid.ok {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--primary-fg);
}
.dim-badge.solid.warn {
    background: var(--warn);
    border-color: var(--warn);
    color: var(--primary-fg);
}
.dim-badge.solid.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--danger-fg);
}
/* status dot: Research circle, Portal a square with a glow */
.dim-badge .dot,
.dim-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: var(--radius-round);
    background: currentColor;
}
.dim-dot {
    background: var(--ok);
}
.dim-dot.warn {
    background: var(--warn);
}
.dim-dot.danger {
    background: var(--danger);
}
.dim-dot.off {
    background: var(--off);
    box-shadow: none !important;
}
body.science.dark .dim-dot,
body.science.dark .dim-badge .dot {
    box-shadow: 0 0 6px currentColor;
}
body.science.dark .dim-dot {
    color: var(--ok);
}
body.science.dark .dim-dot.warn,
body.science.dark .dim-dot.danger {
    color: var(--warn);
}

/* ───────────────────────── form fields ─────────────────────── */

.dim-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* Research `label.l{font-size:12.5px;color:var(--dim)}` */
.dim-field > label {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--muted-fg);
}
/* Research `input{background:var(--input);border:1px solid var(--line);border-radius:8px;font-size:14px;padding:9px 12px}`
   Portal `input{background:var(--bk);border:1px solid var(--line);font:14px var(--hud);padding:9px 11px}` */
.dim-input,
.dim-textarea,
.dim-select {
    appearance: none;
    font: 400 14px/1.3 var(--hud);
    color: var(--fg);
    background: var(--input-bg);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    padding: 9px 12px;
    outline: none;
    width: 100%;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body.science.dark .dim-input,
body.science.dark .dim-textarea,
body.science.dark .dim-select {
    padding: 9px 11px;
}
.dim-input.dim-mono,
.dim-textarea.dim-mono {
    font-family: var(--mono);
}
.dim-input::placeholder,
.dim-textarea::placeholder {
    color: var(--placeholder);
}
/* Research focus: blue border + 3px ring + white fill; Portal: accent border + 1px ring + soft glow */
.dim-input:focus,
.dim-textarea:focus,
.dim-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--ring-soft);
    background: var(--card);
}
body.science.dark .dim-input:focus,
body.science.dark .dim-textarea:focus,
body.science.dark .dim-select:focus {
    background: var(--bk);
    box-shadow: 0 0 0 1px var(--primary), 0 0 14px rgba(124, 200, 236, 0.25);
}
.dim-textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}
.dim-select {
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted-fg) 50%),
        linear-gradient(135deg, var(--muted-fg) 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}
.dim-select option {
    background: var(--card);
    color: var(--fg);
}
body.science.dark .dim-select option {
    background: var(--bk);
}
/* the ask box: Research a white pill with a soft shadow; Portal a bright hairline with a blue glow */
.dim-ask {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 4px 4px 4px 14px;
    box-shadow: var(--shadow);
}
.dim-ask > input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    padding: 6px 0;
    outline: none;
    font: 14px var(--hud);
    color: var(--fg);
}
.dim-ask > button {
    border-radius: var(--radius-pill);
}
body.science.dark .dim-ask {
    gap: 0;
    padding: 0;
    background: var(--bk);
    border-color: rgba(236, 232, 240, 0.55);
    box-shadow: 0 0 18px rgba(124, 200, 236, 0.18);
}
body.science.dark .dim-ask > input {
    padding: 9px 11px;
}
body.science.dark .dim-ask > button {
    border: 0;
    border-left: 1px solid var(--line);
    align-self: stretch;
}

/* checkbox + radio: Research native-feeling (blue fill); Portal `.rc input{width:14px;height:14px;border:1px solid var(--dim);
   background:var(--bk)} :checked{border-color:var(--magenta)} :checked::after{6px square, accent, glow}` */
.dim-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 14px;
    color: var(--fg);
}
body.science.dark .dim-check {
    font-size: 13.5px;
}
.dim-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.dim-check .box,
.dim-check .ring {
    width: 15px;
    height: 15px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: all 0.13s ease;
}
.dim-check .ring {
    border-radius: var(--radius-round);
}
.dim-check input:checked + .box {
    background: var(--primary);
    border-color: var(--primary);
}
.dim-check input:checked + .box::after {
    content: "";
    width: 4px;
    height: 8px;
    margin-top: -2px;
    border: solid var(--primary-fg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dim-check input:checked + .ring {
    border-color: var(--primary);
    border-width: 4.5px;
}
.dim-check input:focus-visible + .box,
.dim-check input:focus-visible + .ring {
    box-shadow: 0 0 0 3px var(--ring-soft);
    border-color: var(--ring);
}
body.science.dark .dim-check .box,
body.science.dark .dim-check .ring {
    width: 14px;
    height: 14px;
    border: 1px solid var(--dim);
    background: var(--bk);
}
body.science.dark .dim-check input:checked + .box,
body.science.dark .dim-check input:checked + .ring {
    border: 1px solid var(--primary);
    background: var(--bk);
}
body.science.dark .dim-check input:checked + .box::after,
body.science.dark .dim-check input:checked + .ring::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: 0;
    border: 0;
    transform: none;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary);
}
/* bare checkboxes / radios / ranges get the accent (Research `.rc input{accent-color:var(--blue)}`) */
:where(body.science) :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
    accent-color: var(--primary);
}

/* color pickers: a control box around the chosen color (the color itself is the user's) */
:where(body.science) input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 26px;
    padding: 2px;
    cursor: pointer;
    background: var(--input-bg);
    border: 1px solid var(--input);
    border-radius: var(--radius-sm);
}
:where(body.science) input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
:where(body.science) input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
}
:where(body.science) input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
}

/* switch: Research `.toggle{width:34px;height:20px;border-radius:999px;background:#d9d7cd}`, knob 16px white circle;
   Portal `.toggle{width:38px;height:18px;border:1px solid var(--dim);background:var(--bk)}`, 12px knob, accent + glow on */
.dim-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.dim-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.dim-switch .track {
    width: 34px;
    height: 20px;
    flex: none;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--track);
    position: relative;
    transition: all 0.15s ease;
}
.dim-switch .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-round);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}
.dim-switch input:checked + .track {
    background: var(--primary);
}
.dim-switch input:checked + .track::after {
    left: 16px;
}
.dim-switch input:focus-visible + .track {
    box-shadow: 0 0 0 3px var(--ring-soft);
}
body.science.dark .dim-switch .track {
    width: 38px;
    height: 18px;
    border: 1px solid var(--dim);
    background: var(--bk);
}
body.science.dark .dim-switch .track::after {
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--dim);
    box-shadow: none;
}
body.science.dark .dim-switch input:checked + .track {
    border-color: var(--primary);
    background: var(--sel);
}
body.science.dark .dim-switch input:checked + .track::after {
    left: 22px;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}

/* slider: Research native with the blue accent; Portal `height:2px;background:var(--line)`, 12px square accent thumb + glow */
.dim-range {
    width: 100%;
    accent-color: var(--primary);
    cursor: pointer;
}
body.science.dark .dim-range {
    appearance: none;
    height: 2px;
    background: var(--line);
    outline: none;
}
body.science.dark .dim-range::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    cursor: pointer;
}
body.science.dark .dim-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    cursor: pointer;
}

/* ───────────────────────── progress ────────────────────────── */

/* Research `.bar{height:6px;border-radius:999px;background:rgba(0,0,0,.08)}`; Portal `.bar{height:4px;background:var(--hair)}`
   with an accent fill that glows */
.dim-progress {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.dim-progress > span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary);
}
.dim-progress.info > span {
    background: var(--info);
}
.dim-progress.warn > span {
    background: var(--warn);
}
.dim-progress.ok > span {
    background: var(--ok);
}
body.science.dark .dim-progress {
    height: 4px;
    background: var(--hair);
}
body.science.dark .dim-progress > span {
    box-shadow: 0 0 8px rgba(124, 200, 236, 0.6);
}
body.science.dark .dim-progress.ok > span,
body.science.dark .dim-progress.warn > span,
body.science.dark .dim-progress.info > span {
    box-shadow: none;
}

/* ───────────────────────── tabs ─────────────────────────────── */

/* .dim-tabs is the doc's segmented control (`.seg`): Research a paper well (radius 9, padding 3) with a white raised
   segment; Portal joined hairline buttons, the pressed one in --sel with an accent border */
.dim-tabs {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    flex-wrap: wrap; /* in a narrow panel the segments take a second row instead of running out of it */
    max-width: 100%;
    border-radius: 9px;
    background: var(--input-bg);
    border: 1px solid var(--line);
}
.dim-tab {
    appearance: none;
    cursor: pointer;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: 500 13px/1.25 var(--hud);
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-fg);
    padding: 6px 10px;
    white-space: nowrap;
    transition: all 0.14s ease;
}
.dim-tab > svg {
    flex: none;
}
.dim-tab:hover {
    color: var(--fg);
}
.dim-tab[aria-selected="true"],
.dim-tab[aria-pressed="true"],
.dim-tab.active,
.dim-tab.on {
    color: var(--fg);
    background: var(--card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.dim-tabs.vertical {
    flex-direction: column;
}
body.science.dark .dim-tabs {
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
body.science.dark .dim-tab {
    font: 400 12px/1.25 var(--hud);
    letter-spacing: 0.04em;
    border: 1px solid var(--line);
    padding: 8px 14px;
    margin: 0 0 -1px -1px; /* joined hairlines, also across a wrapped row */
}
body.science.dark .dim-tabs.vertical .dim-tab {
    margin-left: 0;
    margin-top: -1px;
}
body.science.dark .dim-tab:hover {
    border-color: var(--dim);
    background: rgba(255, 255, 255, 0.04);
    position: relative;
}
body.science.dark .dim-tab[aria-selected="true"],
body.science.dark .dim-tab[aria-pressed="true"],
body.science.dark .dim-tab.active,
body.science.dark .dim-tab.on {
    color: var(--ink);
    background: var(--sel);
    border-color: var(--primary);
    box-shadow: none;
    position: relative;
}
/* underline tabs (the doc's `.tabs`): `.dim-tabs.line` */
.dim-tabs.line {
    display: flex;
    gap: 18px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
.dim-tabs.line .dim-tab {
    flex: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 8px 0;
    margin: 0;
    color: var(--dim);
}
.dim-tabs.line .dim-tab[aria-selected="true"],
.dim-tabs.line .dim-tab.active,
.dim-tabs.line .dim-tab.on {
    color: var(--ink);
    background: transparent;
    border-bottom-color: var(--primary);
}
body.science.dark .dim-tabs.line {
    gap: 0;
}
body.science.dark .dim-tabs.line .dim-tab {
    padding: 8px 14px;
}

/* ───────────────────────── menus / dropdowns ───────────────────── */

/* Research `.menu{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(32,33,31,.12);
   padding:4px}`, rows radius 7; Portal `.menu{background:var(--panel);border:1px solid var(--line);
   box-shadow:0 12px 30px rgba(0,0,0,.6)}` */
.dim-menu {
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 4px;
    z-index: 20;
}
.dim-menu > *,
.dim-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font: 400 14px/1.3 var(--hud);
    color: var(--fg);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}
.dim-menu > :hover,
.dim-menu-item:hover {
    background: var(--input-bg);
}
.dim-menu > .on,
.dim-menu-item.on {
    color: var(--primary);
}
body.science.dark .dim-menu {
    padding: 0;
}
body.science.dark .dim-menu > *,
body.science.dark .dim-menu-item {
    padding: 8px 11px;
    font-size: 13.5px;
}
body.science.dark .dim-menu > :hover,
body.science.dark .dim-menu-item:hover {
    background: var(--sel);
}

/* tooltip: Research a dark ink pill-ish label; Portal `.tip .t{background:var(--bk);border:1px solid var(--line);font:11px var(--hud)}` */
.dim-tooltip {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    white-space: nowrap;
    font: 11.5px var(--hud);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: #ffffff;
}
body.science.dark .dim-tooltip {
    font-size: 11px;
    background: var(--bk);
    color: var(--ink);
    border: 1px solid var(--line);
}

/* ───────────────────────── table ───────────────────────────── */

/* Research `th{font:500 10px var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}`,
   `td{padding:9px 14px;border-bottom:1px solid var(--hair)}`; Portal `th{font:10px var(--display);letter-spacing:.18em}`,
   `td{padding:8px 12px}` */
.dim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.dim-table th {
    text-align: left;
    font: 500 10px/1.4 var(--mono);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
    color: var(--muted-fg);
    padding: 9px 14px;
    border-bottom: 1px solid var(--hair);
    white-space: nowrap;
}
.dim-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--hair);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.dim-table tr:last-child td {
    border-bottom: none;
}
.dim-table tr:hover td {
    background: var(--sel);
}
body.science.dark .dim-table {
    font-size: 13px;
}
body.science.dark .dim-table th {
    font: 400 10px/1.4 var(--display);
    letter-spacing: var(--track-label);
    padding: 8px 12px;
}
body.science.dark .dim-table td {
    padding: 8px 12px;
}

/* ───────────────────────── avatar ──────────────────────────── */

.dim-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-round);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-fg);
    background: var(--primary);
}
.dim-avatar.violet {
    background: var(--violet);
}
.dim-avatar.info {
    background: var(--info);
}

/* ───────────────────────── status dot ──────────────────────── */

.dim-live-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--ok);
    animation: dim-pulse 2.4s ease-out infinite;
}
@keyframes dim-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--ok-line);
    }
    70% {
        box-shadow: 0 0 0 7px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* ───────────────────────── alert / note ───────────────────────────── */

/* Research `.note{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}`
   with a status dot; Portal `.note{border-left:2px solid var(--mint);background:var(--panel);padding:10px 14px}` + hairlines */
.dim-alert {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--fg);
    font-size: 13.5px;
    box-shadow: var(--shadow);
}
.dim-alert::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: var(--radius-round);
    background: var(--primary);
    transform: translateY(-1px);
}
.dim-alert.ok::before {
    background: var(--ok);
}
.dim-alert.info::before {
    background: var(--info);
}
.dim-alert.warn::before {
    background: var(--warn);
}
.dim-alert.danger::before {
    background: var(--danger);
}
body.science.dark .dim-alert {
    padding: 10px 14px;
    border: 1px solid var(--hair);
    border-left: 2px solid var(--primary);
    background: var(--panel);
}
body.science.dark .dim-alert::before {
    display: none;
}
body.science.dark .dim-alert.ok {
    border-left-color: var(--ok);
}
body.science.dark .dim-alert.info {
    border-left-color: var(--info);
}
body.science.dark .dim-alert.warn,
body.science.dark .dim-alert.danger {
    border-left-color: var(--warn);
}
.dim-alert .dim-alert-title {
    font-weight: 500;
    white-space: nowrap;
}

/* ───────────────────────── stepper ─────────────────────────── */

.dim-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}
.dim-stepper button {
    appearance: none;
    cursor: pointer;
    width: 42px;
    font: 18px/1 var(--hud);
    color: var(--fg);
    background: transparent;
    border: none;
    transition: background 0.12s ease;
}
.dim-stepper button:hover {
    background: var(--accent);
}
.dim-stepper .val {
    min-width: 104px;
    padding: 12px;
    text-align: center;
    font: 400 28px var(--mono);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ───────────────────────── bar chart ───────────────────────── */

.dim-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 80px;
}
.dim-bars .bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--sel);
    transition: background 0.14s ease;
}
.dim-bars .bar:hover,
.dim-bars .bar.hot {
    background: var(--primary);
}

/* ───────────────────────── line chart ──────────────────────── */

.dim-chart {
    width: 100%;
    height: 150px;
    display: block;
    overflow: visible;
}
.dim-chart .grid line {
    stroke: var(--hair);
    stroke-width: 1;
}
.dim-chart .axis {
    fill: var(--muted-fg);
    font-family: var(--mono);
    font-size: 9px;
}
.dim-chart .series {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dim-chart .series.a {
    stroke: var(--primary);
}
.dim-chart .series.b {
    stroke: var(--info);
    opacity: 0.85;
}
.dim-chart .node {
    fill: var(--card);
    stroke: var(--primary);
    stroke-width: 2;
}

/* ───────────────────────── calendar ────────────────────────── */

.dim-cal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dim-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dim-cal-head .mo {
    font-size: 14px;
    font-weight: 600;
    color: var(--fg);
}
.dim-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.dim-cal-grid .dow {
    text-align: center;
    font-size: 11px;
    color: var(--muted-fg);
    padding-bottom: 2px;
}
.dim-cal-grid .day {
    appearance: none;
    cursor: pointer;
    aspect-ratio: 1;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font: 13px var(--mono);
    color: var(--fg);
    background: transparent;
    border: 1px solid transparent;
}
.dim-cal-grid .day:hover {
    background: var(--accent);
}
.dim-cal-grid .day.muted {
    color: var(--muted-fg);
    background: transparent;
    cursor: default;
}
.dim-cal-grid .day.range {
    background: var(--sel);
}
.dim-cal-grid .day.sel {
    background: var(--primary);
    color: var(--primary-fg);
}

/* ───────────────────────── icons, toasts ──────────────────────── */

/* line icons (dim-icons.js): size follows font-size, color follows text */
.dim-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* toast: bottom-center stack. Research the doc's dark "finished" pill (`.strip`); Portal a --bk hairline block */
.dim-toasts {
    position: fixed;
    bottom: calc(24px + var(--dim-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.dim-toast {
    background: var(--ink);
    color: #ffffff;
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    font: 12px var(--mono);
    box-shadow: var(--shadow-md);
    animation: dim-toast-in 0.2s ease;
}
.dim-toast.ok {
    border-color: var(--ok);
}
.dim-toast.warn,
.dim-toast.danger {
    border-color: var(--warn);
}
body.science.dark .dim-toast {
    background: var(--bk);
    color: var(--ink);
    border-color: var(--line);
    border-left: 2px solid var(--primary);
}
body.science.dark .dim-toast.ok {
    border-left-color: var(--ok);
}
body.science.dark .dim-toast.warn,
body.science.dark .dim-toast.danger {
    border-left-color: var(--warn);
}
@keyframes dim-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Scrollbars: thin, transparent track (Portal `scrollbar-color:rgba(255,255,255,.18) transparent`) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 33, 31, 0.18) transparent;
}
body.science.dark * {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* ───────────────────────── empty / first-run states (desktop.js emptyState) ───────────────────────── */

/* what's wrong + the next step. Research: a white hairline card, a serif sentence, a mono micro-label in the accent;
   Portal: a square hairline panel, an Inter sentence, a Michroma micro-label */
.dim-empty-host {
    display: contents;
}
.dim-empty-layer {
    position: absolute;
    top: var(--dim-inset-top);
    left: var(--dim-inset-left);
    right: var(--dim-inset-right);
    bottom: var(--dim-inset-bottom);
    display: grid;
    place-items: center;
    padding: 16px;
    pointer-events: none;
    z-index: 5;
}
.dim-empty-layer > .dim-empty {
    pointer-events: auto;
}
.dim-empty {
    box-sizing: border-box;
    width: min(480px, 100%);
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-align: left;
}
.dim-empty-label {
    font: 500 10.5px/1.5 var(--mono);
    letter-spacing: var(--track-label);
    text-transform: var(--label-case);
    color: var(--primary);
}
.dim-empty.warn .dim-empty-label {
    color: var(--warn);
}
.dim-empty-title {
    font: 400 24px/1.2 var(--display);
    letter-spacing: -0.01em;
    color: var(--fg);
}
.dim-empty-body {
    font: 400 13.5px/1.55 var(--sans);
    color: var(--muted-fg);
}
.dim-empty-body code {
    font-size: 12.5px;
}
.dim-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.dim-empty.busy .dim-empty-label::after {
    content: " …";
}
body.science.dark .dim-empty {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 2px solid var(--primary);
    box-shadow: none;
}
body.science.dark .dim-empty.warn {
    border-left-color: var(--warn);
}
body.science.dark .dim-empty-label {
    font: 400 10px/1.5 var(--display);
    letter-spacing: var(--track-label);
    color: var(--dim);
}
body.science.dark .dim-empty-title {
    font: 500 16px/1.4 var(--sans);
    letter-spacing: 0;
}