/* Hallmark · tokens: Workspace, the faces, the palette and the scale; light and dark through light-dark() */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Light is Catppuccin Latte, dark is Tokyo Night. The text greys and the
   accents are darkened in light mode so they clear 4.5:1 on the window and bar
   colours; --edge draws form fields at 3:1. */
html[data-look="workspace"] {
  color-scheme: light dark;
  --overlay: light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.6));
  --surface: var(--win); --surface-2: var(--win-2); --surface-3: var(--bar);
  --line-color: var(--border); --signal: var(--blue); --signal-ink: var(--on-blue);
  --face: var(--font); --code-face: var(--font);
  --error: var(--red); --success: var(--green); --warning: var(--yellow);

  --bg: light-dark(#e6e9ef, #16161e);
  --dots: light-dark(#ccd0da, #24253a);
  --bar: light-dark(#dce0e8, #13131b);
  --win: light-dark(#eff1f5, #1a1b26);
  --win-2: light-dark(#e6e9ef, #1f2335);
  --text: light-dark(#383b52, #c0caf5);
  --sub: light-dark(#4c4f69, #a9b1d6);
  --mute: light-dark(#5a5d74, #8189b3);
  --border: light-dark(#bcc0cc, #3b4261);
  --edge: light-dark(#7c7f93, #6b75a6);
  --blue: light-dark(#1a5ad8, #7aa2f7);
  --on-blue: light-dark(#eff1f5, #16161e);
  --green: light-dark(#2b6e1c, #9ece6a);
  --yellow: light-dark(#8a5a00, #e0af68);
  --mauve: light-dark(#7a2fd9, #bb9af7);
  --red: light-dark(#c0102f, #f7768e);
  --teal: light-dark(#0f6e74, #73daca);
  --peach: light-dark(#c4480a, #ff9e64);
  --shadow: light-dark(rgb(76 79 105 / 0.28), rgb(0 0 0 / 0.6));

  --font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 10px;
  --radius-s: 6px;
  --gap: 10px;
  --col-gap: 28px;
  --pad: 20px;
}

html[data-look="workspace"][data-theme="light"] {
  color-scheme: light;
}

html[data-look="workspace"][data-theme="dark"] {
  color-scheme: dark;
}

/* Four of Omarchy's themes, picked in the shell or the picker (theme gruvbox).
   Each has one scheme, as it does on the desk. Greys and accents are moved just
   enough to clear 4.5:1 on the window, bar and desk colours, and --edge 3:1.
   Kept in step with ClientApp/src/workspace/tokens.css and the swatches in theme.ts. */
html[data-look="workspace"][data-theme="gruvbox"],
html[data-look="workspace"] [data-swatch="gruvbox"] {
  color-scheme: dark;
  --bg: #1e1e1e;
  --dots: #2e2c2b;
  --bar: #161616;
  --win: #282828;
  --win-2: #32302f;
  --text: #ddc7a1;
  --sub: #d4be98;
  --mute: #a89984;
  --border: #504945;
  --edge: #7c6f64;
  --blue: #7daea3;
  --on-blue: #1e1e1e;
  --green: #a9b665;
  --yellow: #d8a657;
  --mauve: #d3869b;
  --red: #ea756e;
  --teal: #89b482;
  --peach: #e78a4e;
}

html[data-look="workspace"][data-theme="everforest"],
html[data-look="workspace"] [data-swatch="everforest"] {
  color-scheme: dark;
  --bg: #21272c;
  --dots: #2f383e;
  --bar: #181d20;
  --win: #2d353b;
  --win-2: #343f44;
  --text: #d3c6aa;
  --sub: #c5b99d;
  --mute: #9faba2;
  --border: #475258;
  --edge: #7a8478;
  --blue: #7fbbb3;
  --on-blue: #21272c;
  --green: #a7c080;
  --yellow: #dbbc7f;
  --mauve: #d699b6;
  --red: #e79091;
  --teal: #83c092;
  --peach: #e69875;
}

html[data-look="workspace"][data-theme="kanagawa"],
html[data-look="workspace"] [data-swatch="kanagawa"] {
  color-scheme: dark;
  --bg: #17171e;
  --dots: #26263a;
  --bar: #111116;
  --win: #1f1f28;
  --win-2: #2a2a37;
  --text: #dcd7ba;
  --sub: #c8c093;
  --mute: #9a998f;
  --border: #363646;
  --edge: #727169;
  --blue: #7e9cd8;
  --on-blue: #17171e;
  --green: #98bb6c;
  --yellow: #e6c384;
  --mauve: #9d89bc;
  --red: #e56b79;
  --teal: #7aa89f;
  --peach: #ffa066;
}

html[data-look="workspace"][data-theme="rose-pine"],
html[data-look="workspace"] [data-swatch="rose-pine"] {
  color-scheme: light;
  --bg: #f2e9e1;
  --dots: #dfdad9;
  --bar: #e9e1d9;
  --win: #faf4ed;
  --win-2: #f2e9e1;
  --text: #464261;
  --sub: #575279;
  --mute: #66627b;
  --border: #cecacd;
  --edge: #8f8a9c;
  --blue: #286983;
  --on-blue: #faf4ed;
  --green: #387048;
  --yellow: #915712;
  --mauve: #745991;
  --red: #944f66;
  --teal: #366c73;
  --peach: #9d4c44;
}

html[data-look="workspace"] {
  --clear: transparent;
  --color-paper: var(--surface);
  --color-paper-2: var(--surface-2);
  --color-paper-3: var(--surface-3);
  --color-ink: var(--text);
  --color-ink-2: var(--sub);
  --color-ink-3: var(--mute);
  --color-muted: var(--mute);
  --color-rule: var(--line-color);
  --color-rule-2: var(--line-color);
  --color-edge: var(--edge);
  --color-accent: var(--signal);
  --color-accent-2: var(--signal);
  --color-accent-ink: var(--signal-ink);
  --color-accent-soft: var(--signal);
  --color-accent-soft-ink: var(--signal-ink);
  --color-focus: var(--signal);
  --color-error: var(--error);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --font-body: var(--face);
  --font-display: var(--face);
  --font-mono: var(--code-face);
  --text-meta: 1rem;
  --text-ui: 1rem;
  --text-body: 1rem;
  --text-xs: 1rem;
  --text-sm: 1rem;
  --text-md: 1rem;
  --text-display-s: clamp(2rem, 3vw, 3rem);
  --tracking-display: -0.02em;
  --display-weight: 650;
  --measure: 68ch;
  --radius-control: 8px;
  --radius-card: 12px;
  --mud-palette-overlay-dark: var(--overlay);
  --mud-palette-primary: var(--signal);
  --mud-palette-primary-text: var(--signal-ink);
  --mud-palette-secondary: var(--signal);
  --mud-palette-secondary-text: var(--signal-ink);
  --mud-palette-background: var(--bg);
  --mud-palette-surface: var(--surface);
  --mud-palette-drawer-background: var(--surface);
  --mud-palette-text-primary: var(--text);
  --mud-palette-text-secondary: var(--sub);
  --mud-palette-text-disabled: var(--mute);
  --mud-palette-action-default: var(--sub);
  --mud-palette-action-disabled: var(--mute);
  --mud-palette-divider: var(--line-color);
  --mud-palette-lines-default: var(--edge);
  --mud-palette-error: var(--error);
  --mud-palette-error-text: var(--surface);
  --mud-palette-success: var(--success);
  --mud-palette-success-text: var(--surface);
  --mud-palette-warning: var(--warning);
  --mud-palette-warning-text: var(--surface);
  --mud-palette-info: var(--signal);
  --mud-palette-info-text: var(--signal-ink);
  --mud-palette-dark: var(--text);
  --mud-palette-dark-text: var(--surface);
  --mud-typography-default-family: var(--face);
  --mud-typography-body1-family: var(--face);
  --mud-typography-body2-family: var(--face);
  --mud-typography-button-family: var(--face);
  --mud-typography-h6-family: var(--face);
  --mud-typography-h1-family: var(--face);
  --mud-typography-h2-family: var(--face);
  --mud-typography-h3-family: var(--face);
  --mud-typography-h4-family: var(--face);
  --mud-typography-h5-family: var(--face);
  --mud-typography-subtitle1-family: var(--face);
  --mud-typography-subtitle2-family: var(--face);
  --mud-typography-caption-family: var(--face);
  --mud-typography-overline-family: var(--face);
  --mud-typography-default-size: 1rem;
  --mud-typography-body1-size: 1rem;
  --mud-typography-body2-size: 1rem;
  --mud-typography-button-size: 1rem;
  --mud-typography-button-text-transform: none;
  --mud-typography-button-letterspacing: normal;
  color-scheme: light dark;
  overflow-x: clip;
  scroll-behavior: auto;
}
html[data-look="workspace"][data-theme="light"] { color-scheme: light; }
html[data-look="workspace"][data-theme="dark"] { color-scheme: dark; }
html[data-look="workspace"] *, html[data-look="workspace"] *::before, html[data-look="workspace"] *::after { box-sizing: border-box; transition: none; }
html[data-look="workspace"] body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--bg); color: var(--text); font: 16px/1.6 var(--face); font-synthesis: style; font-variant-ligatures: none;
}
html[data-look="workspace"] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}
html[data-look="workspace"] :is(a, button, summary) { -webkit-tap-highlight-color: var(--clear); }
html[data-look="workspace"] a { color: var(--signal); text-underline-offset: 4px; }
html[data-look="workspace"] a:hover { text-decoration: underline; }
html[data-look="workspace"] :is(main, section, article, form, .row, .row > *, .grid > *, .flex > *) { min-width: 0; }
html[data-look="workspace"] :is(p, h1, h2, h3, h4, li, td, th, label) { overflow-wrap: anywhere; }
html[data-look="workspace"] .page { width: 100%; max-width: 1180px; margin-inline: auto; padding: 48px 32px 64px; }
html[data-look="workspace"] main > .page > :is(h1, h2) { margin-block: 0 24px; }
html[data-look="workspace"] h1 { font: 650 clamp(2rem, 3vw, 3rem)/1.2 var(--face); letter-spacing: -0.02em; }
html[data-look="workspace"] h2 { font-size: 1.5rem; line-height: 1.4; }
html[data-look="workspace"] :is(.t-display-s, .t-h3) { font-family: var(--face); letter-spacing: -0.02em; }
html[data-look="workspace"] .t-h3 { font-size: 1.5rem; }
html[data-look="workspace"] :is(.t-meta, .text-xs, .text-sm, .text-ui) { font-size: 1rem; }
html[data-look="workspace"] .uppercase { text-transform: none; letter-spacing: normal; }
html[data-look="workspace"] [class*="tracking-"] { letter-spacing: normal; }
html[data-look="workspace"] :is(.link, .link--quiet) { color: var(--signal); }
html[data-look="workspace"] :is(.btn, .btn-primary, .btn-danger, button[type="submit"]) {
  display: inline-flex; justify-content: center; align-items: center; min-height: 48px;
  padding: 8px 20px; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font: 600 1rem/1.5 var(--face); text-decoration: none;
}
html[data-look="workspace"] :is(.btn--primary, .btn-primary, button[type="submit"]) { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
html[data-look="workspace"] button { font-family: var(--face); cursor: pointer; }
html[data-look="workspace"] button:disabled { cursor: not-allowed; opacity: .65; }
html[data-look="workspace"] :is(input:not(.shell__input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), textarea, select, .field__input) {
  display: block; width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); color: var(--text);
  font: 1rem/1.5 var(--face);
}
html[data-look="workspace"] input::placeholder, html[data-look="workspace"] textarea::placeholder { color: var(--mute); opacity: 1; }
html[data-look="workspace"] :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; accent-color: var(--signal); }
html[data-look="workspace"] :is(.form-floating, .form-group) { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
html[data-look="workspace"] .form-floating > label { order: -1; position: static; padding: 0; transform: none; color: var(--sub); }
html[data-look="workspace"] .form-label { font-weight: 600; }
html[data-look="workspace"] .row { display: flex; flex-wrap: wrap; gap: 32px; }
html[data-look="workspace"] .row > * { flex: 1 1 360px; max-width: 100%; }
html[data-look="workspace"] .mb-3 { margin-bottom: 16px; }
html[data-look="workspace"] :is(.text-danger, .validation-message, .validation-errors, [class*="text-red-"]) { color: var(--error); }
html[data-look="workspace"] :is(.alert, .validation-errors) { padding: 16px; border: 1px solid var(--edge); border-radius: 8px; margin-block: 16px; }
html[data-look="workspace"] .alert-success { color: var(--success); }
html[data-look="workspace"] .alert-danger { color: var(--error); }
html[data-look="workspace"] form :is(p, h2, h3, hr) { margin-bottom: 20px; }
html[data-look="workspace"] .account-manage > header > span { display: none; }
html[data-look="workspace"] :is([class*="border-white/"], .post-step) { border-color: var(--line-color); }
html[data-look="workspace"] :is([class*="bg-surface-strong"], .account-manage aside) { background: var(--surface); }
html[data-look="workspace"] :is([class*="text-accent-soft"], .hover\:text-white:hover) { color: var(--signal); }
html[data-look="workspace"] :is(.blog-content, .prose) { color: var(--sub); font: 1rem/1.8 var(--face); max-width: 68ch; }
html[data-look="workspace"] :is(.blog-content, .prose) :is(h1, h2, h3, h4, h5, h6) { color: var(--text); font-family: var(--face); letter-spacing: normal; margin-top: 32px; }
html[data-look="workspace"] :is(.blog-content, .prose) :is(pre, code, kbd) { font-family: var(--code-face); background: var(--surface-2); color: var(--text); font-size: 1rem; }
html[data-look="workspace"] :is(.blog-content, .prose) code { padding: 2px 4px; }
html[data-look="workspace"] :is(.blog-content, .prose) pre { max-width: 100%; overflow-x: auto; padding: 20px; border-color: var(--line-color); }
html[data-look="workspace"] :is(.blog-content, .prose) pre code { padding: 0; background: var(--clear); }
html[data-look="workspace"] :is(.blog-content, .prose) blockquote { padding: 16px 20px; border-left: 2px solid var(--signal); background: var(--surface-2); color: var(--text); }
html[data-look="workspace"] :is(.blog-content, .prose) :is(img, video) { max-width: 100%; height: auto; border-radius: 8px; }
html[data-look="workspace"] :is(.blog-content, .prose) table { display: block; max-width: 100%; overflow-x: auto; font-size: 1rem; border-color: var(--edge); }
html[data-look="workspace"] :is(.blog-content, .prose) :is(th, td) { padding: 12px 16px; border-color: var(--line-color); }
html[data-look="workspace"] :is(.blog-content, .prose) th { white-space: normal; }
html[data-look="workspace"] :is(.blog-content, .prose) a { color: var(--signal); }
html[data-look="workspace"] .blog-entry { position: relative; }
html[data-look="workspace"] .blog-entry:hover { background: var(--surface-2); }
html[data-look="workspace"] .blog-editor label { display: inline-block; }
html[data-look="workspace"] .blog-editor label:has(input[type="file"]):focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }
html[data-look="workspace"] .blog-editor input[type="file"].hidden { display: block; max-width: 100%; margin-top: 8px; font-size: 1rem; }
html[data-look="workspace"] .blog-editor textarea { font-family: var(--code-face); }
html[data-look="workspace"] .blog-editor :is([class*="bg-accent/"], [class*="border-red-"]) { border: 1px solid var(--edge); background: var(--surface-2); color: var(--text); }
html[data-look="workspace"] .mud-dialog { background: var(--surface); color: var(--text); max-width: calc(100vw - 32px); }
html[data-look="workspace"] .mud-snackbar { font: 1rem/1.6 var(--face); }
html[data-look="workspace"] .mud-snackbar .mud-snackbar-content-message { color: inherit; }
html[data-look="workspace"] .wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 32px; }
html[data-look="workspace"] :is(.bar, .top, .foot) { display: flex; align-items: center; gap: 24px; }
html[data-look="workspace"] :is(.bar__ws, .top__nav, .bar__mods, .bar__files, .foot__nav) { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
html[data-look="workspace"] :is(.bar, .top, .foot) a { text-decoration: none; }
html[data-look="workspace"] :is(.bar, .top, .foot) a:hover { text-decoration: underline; }
html[data-look="workspace"] .switch { display: inline-flex; flex-shrink: 0; padding: 2px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface-2); }
html[data-look="workspace"] .switch button { padding: 4px 8px; min-height: 36px; border: 0; border-radius: 4px; background: var(--clear); color: var(--sub); font: 1rem/1.5 var(--face); }
html[data-look="workspace"] .switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px var(--shadow); }
html[data-look="workspace"] .switch button:focus-visible { outline-offset: -2px; }
html[data-look="workspace"] .transcript { background: var(--surface-2); border-color: var(--line-color); }
html[data-look="workspace"] .transcript li { background: var(--clear); }
html[data-look="workspace"] .transcript .is-me { background: var(--surface-3); }
@media (max-width: 760px) {
  html[data-look="workspace"] .page { padding: 32px 16px 48px; }
  html[data-look="workspace"] .wrap { padding-inline: 16px; }
  html[data-look="workspace"] :is(.bar, .top, .foot) { flex-wrap: wrap; gap: 12px; }
  html[data-look="workspace"] .row { gap: 24px; }
  html[data-look="workspace"] :is(.p-6, .p-8) { padding: 16px; }
  html[data-look="workspace"] .blog-editor .flex { flex-wrap: wrap; }
  html[data-look="workspace"] .blog-editor .flex > label { width: 100%; }
  html[data-look="workspace"] main table { table-layout: fixed; }
  html[data-look="workspace"] main :is(th, td) { padding: 8px 4px; }
  html[data-look="workspace"] .foot { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="workspace"], html[data-look="workspace"] *, html[data-look="workspace"] *::before, html[data-look="workspace"] *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

html[data-look="workspace"] body { padding: 12px; background-image: radial-gradient(var(--dots) 1px, var(--clear) 1px); background-size: 24px 24px; }
html[data-look="workspace"] .bar { padding: 8px 12px; border-radius: 12px; background: var(--bar); gap: 16px; font-size: 13px; }
html[data-look="workspace"] .bar__ws { gap: 4px; flex-wrap: nowrap; }
html[data-look="workspace"] .bar__ws a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; color: var(--sub); white-space: nowrap; }
html[data-look="workspace"] .bar__ws a[aria-current="page"] { background: var(--blue); color: var(--on-blue); }
html[data-look="workspace"] :is(.bar__ws, .bar__open) kbd { min-width: 20px; padding: 0 4px; border: 1px solid var(--edge); border-radius: 4px; color: var(--sub); font: inherit; font-weight: 700; text-align: center; }
html[data-look="workspace"] .bar__ws a[aria-current="page"] kbd { border-color: var(--on-blue); color: var(--on-blue); }
html[data-look="workspace"] .bar__keys { color: var(--mute); white-space: nowrap; }
@media (hover: none) { html[data-look="workspace"] .bar__ws :is(a, a[aria-current="page"]) kbd { border-color: var(--clear); } html[data-look="workspace"] :is(.bar__open kbd, .bar__keys) { display: none; } }
html[data-look="workspace"][data-keys="off"] .bar__ws :is(a, a[aria-current="page"]) kbd { border-color: var(--clear); }
html[data-look="workspace"][data-keys="off"] :is(.bar__open kbd, .bar__single) { display: none; }
html[data-look="workspace"] .bar__title { margin-inline: auto; color: var(--sub); }
html[data-look="workspace"] .bar__open { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; white-space: nowrap; }
html[data-look="workspace"] .bar a.bar__open:hover { text-decoration: none; }

/* A theme's seven colours as a strip: the bar's theme menu and the picker's
   theme rows. data-swatch names the theme; with none the strip shows the theme
   in force. The palettes above serve it too; latte, night and auto take the
   base accents again, since a palette on the page would otherwise win. */
html[data-look="workspace"] :is([data-swatch="light"], [data-swatch="dark"], [data-swatch="system"]) {
  --red: light-dark(#c0102f, #f7768e);
  --peach: light-dark(#c4480a, #ff9e64);
  --yellow: light-dark(#8a5a00, #e0af68);
  --green: light-dark(#2b6e1c, #9ece6a);
  --teal: light-dark(#0f6e74, #73daca);
  --blue: light-dark(#1a5ad8, #7aa2f7);
  --mauve: light-dark(#7a2fd9, #bb9af7);
}

html[data-look="workspace"] [data-swatch="light"] {
  color-scheme: light;
}

html[data-look="workspace"] [data-swatch="dark"] {
  color-scheme: dark;
}

html[data-look="workspace"] [data-swatch="system"] {
  color-scheme: light dark;
}

html[data-look="workspace"] .swatch {
  display: inline-block;
  flex: none;
  width: 56px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--red) 0 14.3%,
    var(--peach) 0 28.6%,
    var(--yellow) 0 42.9%,
    var(--green) 0 57.1%,
    var(--teal) 0 71.4%,
    var(--blue) 0 85.7%,
    var(--mauve) 0
  );
}

/* The theme menu, as on the Vue pages (ThemeMenu.vue); site.js keeps the pick. */
html[data-look="workspace"] .theme-menu { position: relative; }
html[data-look="workspace"] .theme-menu summary { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--sub); font-size: 12px; white-space: nowrap; list-style: none; cursor: pointer; }
html[data-look="workspace"] .theme-menu summary::-webkit-details-marker { display: none; }
html[data-look="workspace"] .theme-menu summary::after { content: "▾" / ""; color: var(--mute); }
html[data-look="workspace"] :is(.theme-menu summary:hover, .theme-menu[open] summary) { color: var(--text); }
html[data-look="workspace"] .theme-menu summary .swatch { width: 35px; }
html[data-look="workspace"] .theme-menu__name::after { content: "auto"; }
html[data-look="workspace"][data-theme="light"] .theme-menu__name::after { content: "latte"; }
html[data-look="workspace"][data-theme="dark"] .theme-menu__name::after { content: "night"; }
html[data-look="workspace"][data-theme="gruvbox"] .theme-menu__name::after { content: "gruvbox"; }
html[data-look="workspace"][data-theme="everforest"] .theme-menu__name::after { content: "everforest"; }
html[data-look="workspace"][data-theme="kanagawa"] .theme-menu__name::after { content: "kanagawa"; }
html[data-look="workspace"][data-theme="rose-pine"] .theme-menu__name::after { content: "rose-pine"; }
html[data-look="workspace"] .theme-menu__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; min-width: 13rem; padding: 6px; border: 2px solid var(--blue); border-radius: 10px; background: var(--win); box-shadow: 0 12px 32px var(--shadow); }
html[data-look="workspace"] .theme-menu__list button { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--sub); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
html[data-look="workspace"] .theme-menu__list button:hover { background: var(--win-2); color: var(--text); }
html[data-look="workspace"] .theme-menu__list button[aria-pressed="true"] { color: var(--blue); font-weight: 700; }
html[data-look="workspace"] .theme-menu__list button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* The bar's hint follows the focus, as on the Vue pages (workspace.css there). */
html[data-look="workspace"] .bar__hint:not(:first-child) { display: none; }
html[data-look="workspace"]:has(:is(input, textarea, select, [contenteditable]):focus) .bar__hint:first-child { display: none; }
html[data-look="workspace"]:has(:is(input, textarea, select, [contenteditable]):focus) .bar__hint--field { display: inline; }
html[data-look="workspace"]:has(#pick-input:focus) .bar__hint--field { display: none; }
html[data-look="workspace"] .bar__open:hover span { text-decoration: underline; }
html[data-look="workspace"] .bar__keyset { display: inline-flex; align-items: center; gap: 8px; }
html[data-look="workspace"] .bar__keyset .switch button { min-height: 24px; padding: 2px 8px; font-size: 12px; line-height: 1.5; }
html[data-look="workspace"] .bar__clock { color: var(--sub); }
html[data-look="workspace"] .bar--foot { flex-wrap: wrap; margin-top: 12px; padding-bottom: 72px; color: var(--sub); }
html[data-look="workspace"] .bar--foot p { margin: 0; }
html[data-look="workspace"] .bar__built { margin-left: auto; }
html[data-look="workspace"] .page { max-width: 1400px; padding: 32px 16px 48px; }
html[data-look="workspace"] .page > :is(section, article, .page-panel), html[data-look="workspace"] .page > .row > * { padding: 24px; border: 2px solid var(--border); border-radius: 12px; background: var(--win); }
html[data-look="workspace"] .blog-entry { margin-top: 16px; padding: 0 20px 20px; border: 2px solid var(--border); border-radius: 8px; background: var(--win); grid-template-columns: minmax(0,1fr); gap: 0; }
html[data-look="workspace"] .blog-entry > .t-meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 -20px 20px; padding: 8px 20px; background: var(--bar); border-radius: 8px 8px 0 0; }
html[data-look="workspace"] .blog-entry:focus-within { border-color: var(--blue); }
@media (max-width: 1264px) { html[data-look="workspace"] .bar__keys { display: none; } }
@media (max-width: 1200px) { html[data-look="workspace"] .bar { flex-wrap: wrap; } html[data-look="workspace"] .bar__mods { margin-left: auto; } }
@media (max-width: 760px) {
  html[data-look="workspace"] body { padding: 8px; }
  html[data-look="workspace"] .bar__ws { width: 100%; justify-content: space-between; }
  html[data-look="workspace"] .bar__ws a { flex-direction: column; gap: 0; padding: 4px; }
  html[data-look="workspace"] .bar__ws span { font-size: 12px; }
  html[data-look="workspace"] .bar__title { display: none; }
  html[data-look="workspace"] .bar__mods { width: 100%; gap: 8px; justify-content: space-between; }
  html[data-look="workspace"] .bar__clock { display: none; }
  html[data-look="workspace"] .bar__open { font-size: 12px; }
  html[data-look="workspace"] .switch button { padding: 4px; }
  html[data-look="workspace"] .page { padding: 16px 0 32px; }
  html[data-look="workspace"] .page > :is(section, article, .page-panel), html[data-look="workspace"] .page > .row > * { padding: 16px; }
  html[data-look="workspace"] .bar--foot { padding-bottom: 72px; }
}

html[data-look="workspace"] h1[tabindex="-1"]:focus-visible { outline: none; }
html[data-look="workspace"] .shell__input:focus-visible { outline: none; }
html[data-look="workspace"] .page.space-y-3xl > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }
html[data-look="workspace"] hr { border-color: var(--line-color); }
html[data-look="workspace"] .bar--foot { padding-bottom: 16px; padding-right: 96px; }
@media (max-width: 760px) { html[data-look="workspace"] .bar--foot { padding-bottom: 72px; padding-right: 12px; } }

html[data-look="workspace"] .page > [class*="mud-"] { margin: 0; }

html[data-look="workspace"] .static-page { display: flex; flex-direction: column; }
html[data-look="workspace"] .static-page main { flex: 1; }
html[data-look="workspace"] .static-page article.page { width: calc(100% - 32px); margin-block: 32px; padding: 32px; border: 1px solid var(--line-color); border-radius: 12px; background: var(--surface); }
@media (max-width: 760px) { html[data-look="workspace"] .static-page article.page { width: 100%; padding: 24px 16px; margin-block: 16px; } }

html[data-look="workspace"] .skip-link { background: var(--surface); color: var(--text); border: 1px solid var(--edge); }
html[data-look="workspace"] .account-manage aside a[aria-current="page"] { background: var(--surface-2); color: var(--text); border-left: 2px solid var(--signal); }
/* MudBlazor's radius helpers use !important and share Tailwind class names. */
html[data-look="workspace"] [class*="rounded-"] { border-radius: var(--radius-control) !important; }

html[data-look="workspace"] :is(.blog-content, .prose) table { table-layout: auto; }
html[data-look="workspace"] :is(.blog-content, .prose) :is(th, td) { min-width: 128px; overflow-wrap: normal; }

@media (max-width: 760px) {
  html[data-look="workspace"] .page > section:has(> div > table) thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: clip; }
  html[data-look="workspace"] .page > section:has(> div > table) tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 12px; gap: 8px; border-bottom: 1px solid var(--line-color); }
  html[data-look="workspace"] .page > section:has(> div > table) td { padding: 0; }
  html[data-look="workspace"] .page > section:has(> div > table) td:first-child { grid-column: 1 / -1; font-weight: 600; }
  html[data-look="workspace"] .page > section:has(> div > table) td:last-child { grid-column: 2; text-align: right; }
}

html[data-look="workspace"] .page > section:has(> div > table) > header > a { align-self: flex-start; padding: 8px 16px; background: var(--signal); color: var(--signal-ink); border: 1px solid var(--signal); }
html[data-look="workspace"] .blog-editor button[type="submit"] { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
html[data-look="workspace"] .blog-editor button[class*="border-red-"] { background: var(--clear); color: var(--error); border-color: var(--error); }

html[data-look="workspace"] .page > article, html[data-look="workspace"] .static-page article.page { max-width: 900px; margin-inline: auto; }