/* ============================================================
   Weblin — an HTML-first, attribute-driven, classless CSS framework
   Warm-minimal aesthetic. Single-file CDN import. No build step.
   ============================================================ */

:root {
  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* --- Type scale (4.5:1 display-to-body) --- */
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-lg: 20px;
  --fs-xxl: 28px;
  --fs-h6: 16px;
  --fs-h5: 18px;
  --fs-h4: 22px;
  --fs-h3: 28px;
  --fs-h2: 36px;
  --fs-h1: 48px;
  --fs-display: 72px;

  /* --- Surfaces (two-tier: page vs card) --- */
  --bg: light-dark(oklch(0.97 0.005 90), oklch(0.2 0.005 90));
  --bg-tabs: light-dark(oklch(0.99 0.003 90), oklch(0.22 0.005 90));
  --bg-card: light-dark(oklch(1 0 0), oklch(0.4 0.005 90));
  --fg: light-dark(oklch(0.15 0.01 90), oklch(0.95 0.005 90));
  --fg-muted: light-dark(oklch(0.55 0.02 90), oklch(0.65 0.01 90));
  --hairline: light-dark(oklch(0.9 0.01 90), oklch(1 0 0 / 25%));

  /* --- Strong accent surface (primary button, inverted card) --- */
  --black: light-dark(oklch(0.05 0.02 90), oklch(0.95 0.005 90));
  --black-fg: light-dark(oklch(0.98 0 0), oklch(0.05 0.02 90));

  /* --- Soft tinted badges --- */
  --green-bg: light-dark(oklch(0.9 0.14 150), oklch(0.3 0.1 150));
  --green-fg: light-dark(oklch(0.28 0.13 150), oklch(0.88 0.13 150));
  --yellow-bg: light-dark(oklch(0.92 0.18 95), oklch(0.55 0.15 95));
  --yellow-fg: light-dark(oklch(0.2 0.02 90), oklch(0.15 0.02 90));
  --red-bg: light-dark(oklch(0.68 0.2 25), oklch(0.5 0.18 25));
  --red-fg: light-dark(oklch(0.98 0 0), oklch(0.95 0.02 25));
  --blue: light-dark(oklch(0.65 0.18 255), oklch(0.7 0.16 255));
  --blue-fg: light-dark(oklch(0.98 0 0), oklch(0.1 0.02 90));

  /* --- Saturated action colors (buttons) --- */
  --green: light-dark(oklch(0.55 0.15 145), oklch(0.6 0.15 145));
  --green-fg-solid: light-dark(oklch(0.98 0 0), oklch(0.1 0.02 90));
  --red: light-dark(oklch(0.55 0.22 25), oklch(0.6 0.2 25));
  --red-fg-solid: light-dark(oklch(0.98 0 0), oklch(0.98 0 0));

  /* --- Radii --- */
  --radius: 0.7rem;
  --radius-sm: 0.5rem;
  --radius-card: 16px;
  --radius-pill: 9999px;

  /* --- Borders --- */
  --border: 1px solid var(--hairline);

  /* --- Shadows (decomposed for light-dark()) --- */
  --shadow-btn-color: light-dark(rgba(17, 17, 17, 0.08), rgba(0, 0, 0, 0.4));
  --shadow-btn: 0 1px 2px var(--shadow-btn-color);

  --shadow-card-1: light-dark(rgba(0,0,0,0.06), rgba(0,0,0,0.10));
  --shadow-card-2: light-dark(rgba(0,0,0,0.05), rgba(0,0,0,0.08));
  --shadow-card-3: light-dark(rgba(0,0,0,0.04), rgba(0,0,0,0.06));
  --shadow-card: 0 1px 2px var(--shadow-card-1), 0 4px 8px var(--shadow-card-2), 0 16px 32px var(--shadow-card-3);

  --shadow-pop-1: light-dark(rgba(17, 17, 17, 0.35), rgba(0, 0, 0, 0.50));
  --shadow-pop-2: light-dark(rgba(0, 0, 0, 0.08), transparent);
  --shadow-pop: 0 10px 12px -3px var(--shadow-pop-1), 0 8px 10px -4px var(--shadow-pop-2);

  --shadow-accent-outline: light-dark(transparent, rgb(255 255 255 / 0.12));
  --shadow-accent-1: light-dark(rgba(17, 17, 17, 0.35), rgb(190 190 190 / 0.35));
  --shadow-accent-2: light-dark(rgba(17, 17, 17, 0.20), rgb(111 111 111 / 0.80));
  --shadow-accent: 0 0 0 1px var(--shadow-accent-outline),
                   0 10px 30px -5px var(--shadow-accent-1),
                   0 6px 12px -4px var(--shadow-accent-2);

  /* --- Charts (tuned to accent family) --- */
  --chart-1: var(--green);
  --chart-2: var(--yellow-bg);
  --chart-3: var(--red);
  --chart-4: var(--blue);
  --chart-5: var(--fg-muted);

  --loading-icon-url: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' stroke='rgb(115,115,115)' stroke-width='20' fill='none' stroke-linecap='round' stroke-dasharray='200' stroke-dashoffset='100'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");

  /* --- Role-based accent (alias for action colors) --- */
  --accent: var(--blue);
  --accent-fg: var(--blue-fg);

  /* --- Semantic status colors --- */
  --success: var(--green);
  --warning: var(--yellow-bg);
  --danger: var(--red);

  /* --- Elevated surfaces (tonal ramp for dark mode) --- */
  --bg-raised: light-dark(oklch(1 0 0), oklch(0.45 0.005 90));
  --bg-overlay: light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.6));

  /* --- Focus --- */
  --border-focus: light-dark(oklch(0.55 0 0), oklch(0.45 0 0));

  /* --- Motion --- */
  --motion-default: 0.2s ease;
  --motion-enter: 0.25s ease-out;
  --motion-exit: 0.15s ease-in;
  --motion-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* color-scheme is set via <meta name="color-scheme"> for JS-toggleable light-dark() */

::selection {
  background: light-dark(oklch(0.55 0.02 90), oklch(0.55 0.15 95));
  color: white;
}

/* --- Focus outlines (6px transparent + animation on :focus-visible) --- */
* {
  outline-width: 6px;
  outline-style: solid;
  outline-color: transparent;
}
:focus-visible {
  outline-color: var(--border-focus);
  animation: focus-ring-in var(--motion-default);
}
@keyframes focus-ring-in {
  from { outline-color: transparent; }
}

/*
   === Aesthetic presets ===
   Uncomment ONE block below to switch the overall look.
   Default (soft) is already active in :root — no preset needed.

   Preset: sharp
   Technical/minimal aesthetic. Tight radius, compact type, restrained shadows.

:root {
  --radius: 0.25rem;
  --radius-sm: 0.2rem;
  --radius-card: 4px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 28px;
  --fs-body: 14px;
  --fs-sm: 12px;
  --shadow-btn: 0 1px 1px rgba(17, 17, 17, 0.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-accent-outline: transparent;
  --shadow-accent-1: rgba(17, 17, 17, 0.20);
  --shadow-accent-2: rgba(0,0,0,0);
  --shadow-accent: 0 0 0 1px var(--shadow-accent-outline),
                   0 10px 30px -5px var(--shadow-accent-1),
                   0 6px 12px -4px var(--shadow-accent-2);
}

   Preset: editorial
   Reading-friendly. Airy spacing, larger body text, subtle surfaces.

:root {
  --fs-body: 18px;
  --fs-lg: 22px;
  --space-4: 32px;
  --space-5: 40px;
  --radius: 0.5rem;
  --radius-card: 8px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.03);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.10);
}
*/

/* ============================================================
   Reset & base
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: auto;
  scrollbar-color: var(--fg-muted) transparent;
}
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-thumb {
  background: var(--fg-muted);
  border-radius: 6px;
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--fg);
}
*::-webkit-scrollbar-track {
  background: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-color: var(--fg-muted) transparent;
  scrollbar-gutter: stable;
  transition: background-color var(--motion-default), color var(--motion-default);
}

article, section, details, dialog, [border], [flat], nav {
  transition: background-color var(--motion-default), color var(--motion-default), border-color var(--motion-default);
}

body {
  font-family: system-ui, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.05em;
  line-height: 1.1;
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.04em;
}
h3 { font-size: var(--fs-h3); letter-spacing: -0.03em; }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

[display] {
  font-size: var(--fs-display);
  font-weight: 300;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

[eyebrow] {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--blue);
}

p { margin: 0 0 var(--space-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

li { text-wrap: pretty; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover {
  color: var(--black);
  text-decoration-color: var(--fg);
}
small, figcaption, time {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

ul, ol {
  margin: 0 0 var(--space-3);
  padding-inline-start: 1.5em;
}

dl[horizontal] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-3);
}
dl[horizontal] dt {
  grid-column: 1;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-weight: 500;
  text-align: end;
  white-space: nowrap;
}
dl[horizontal] dd {
  grid-column: 2;
  margin: 0;
}

strong { font-weight: 600; }

hr {
  border: 0;
  height: 1px;
  margin: var(--space-4) 0;
  background-color: var(--hairline);
  flex-shrink: 0;
}
hr[vertical] {
  width: 1px;
  height: auto;
  margin: 0 var(--space-3);
}

figure { margin: 0 0 var(--space-4); }
img {
  max-width: 100%;
  height: auto;
}
img[avatar] {
  border-radius: 50%;
  object-fit: cover;
  width:2.5rem;
  height:2.5rem;
  border:2px solid var(--bg-card);
  flex-shrink:0;
  transition:transform .2s;
}
img[avatar] + img[avatar] {
  margin-inline-start:-1.5rem;
}
img[avatar]:hover {
  transform:translateY(-.15rem);
  position:relative;
  z-index:2;
}
figcaption { margin-top: var(--space-2); }

blockquote {
  border-inline-start: 3px solid var(--fg);
  padding-inline-start: var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg);
}
blockquote footer {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-top: var(--space-2);
  font-style: normal;
}

/* ============================================================
   Layout primitives
   ============================================================ */
[container] {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
[container narrow] { max-width: 720px; }
@media (min-width: 900px) {
  [container] { padding-inline: var(--space-5); }
}

[stack] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
[stack tight] { gap: var(--space-2); }
[stack loose] { gap: var(--space-6); }

[cluster] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
[cluster gap="3"] { gap: var(--space-3); }
[cluster gap="4"] { gap: var(--space-4); }
[cluster between] { justify-content: space-between; }
[cluster center] { justify-content: center; }
[cluster end] { justify-content: flex-end; }

/* ============================================================
   [repel] — push two items apart, stacks when no space
   Logo + nav, title + action, etc.
   ============================================================ */
[repel] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}

/* ============================================================
   [switcher] — responsive row that becomes column
   Items side-by-side until container < threshold, then stack.
   Use --switcher-threshold to control the breakpoint (default 40rem).
   ============================================================ */
[switcher] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
[switcher] > * {
  flex: 1 1 calc((var(--switcher-threshold, 40rem) - var(--space-4)) / 2);
}

/* ============================================================
   [prose] — automatic spacing for article content
   Varies spacing by element type for readability.
   ============================================================ */
[prose] > * + * {
  margin-block-start: var(--space-4);
}
[prose] > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--space-5);
}
[prose] > * + p {
  margin-block-start: 1em;
}

/* ============================================================
   [center] — horizontal centering with max-width
   ============================================================ */
[center] {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--center-max, 60ch);
  padding-inline: var(--space-3);
}

/* ============================================================
   [split] — sidebar + main content layout
   First child = sidebar (fixed width), second = main (flexible).
   Stacks when container < threshold (default 30rem).
   ============================================================ */
[split] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
[split] > :first-child {
  flex: 1 1 var(--split-sidebar, 20rem);
  min-inline-size: var(--split-sidebar, 20rem);
}
[split] > :last-child {
  flex: 999 1 calc(var(--split-threshold, 30rem) - var(--split-sidebar, 20rem) - var(--space-4));
  min-inline-size: 50%;
}

[grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

[card-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

[cols="2"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
[cols="3"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
[cols="4"] { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) {
  [cols="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  [cols="2"], [cols="3"], [cols="4"] { grid-template-columns: 1fr; }
}

[grid][gap="2"], [card-grid][gap="2"], [cols][gap="2"] { gap: var(--space-2); }
[grid][gap="3"], [card-grid][gap="3"], [cols][gap="3"] { gap: var(--space-3); }
[grid][gap="5"], [card-grid][gap="5"], [cols][gap="5"] { gap: var(--space-5); }
[grid][gap="6"], [card-grid][gap="6"], [cols][gap="6"] { gap: var(--space-6); }

[hero] {
  padding-block: var(--space-8) var(--space-6);
  text-align: center;
}
[hero] [cluster] { justify-content: center; }

[feature], [media-text] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
[media-text][reverse] > :first-child { order: 2; }
@media (max-width: 900px) {
  [feature], [media-text] {
    grid-template-columns: 1fr;
  }
  [media-text][reverse] > :first-child { order: 0; }
}

[section] {
  padding-block: var(--space-6);
}

[inverted] {
  background-color: var(--black);
  color: var(--black-fg);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
[inverted] a { color: var(--black-fg); }
[inverted] h1, [inverted] h2, [inverted] h3, [inverted] h4, [inverted] h5, [inverted] h6,
[inverted] p, [inverted] small, [inverted] time, [inverted] figcaption { color: var(--black-fg); }
[inverted] button, [inverted] [button] {
  background: var(--black-fg);
  color: var(--black);
  border-color: transparent;
}

/* ============================================================
   Buttons
   Base: solid black, 0.5rem radius, subtle shadow.
   [primary]/[action]: the ONE accent button per page — prominent shadow.
   [round]: modifier, pill radius. [size]: scale. [fullwidth]: 100%.
   ============================================================ */
button,
a[role="button"],
input[type='reset'],
input[type='submit'],
input[type='button'],
::file-selector-button {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  -webkit-text-box-trim: trim-both;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--black);
  color: var(--black-fg);
  box-shadow: var(--shadow-btn);
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.08s ease;
  white-space: nowrap;
  user-select: none;
}
button:hover,
a[role="button"]:hover,
input[type='reset']:hover,
input[type='submit']:hover,
input[type='button']:hover,
::file-selector-button:hover {
  background-color: color-mix(in srgb, var(--black) 88%, var(--bg-card));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fg) 15%, transparent), 0 2px 4px color-mix(in srgb, var(--fg) 10%, transparent);
}
button:active,
a[role="button"]:active,
input[type='reset']:active,
input[type='submit']:active,
input[type='button']:active,
::file-selector-button:active {
  transform: translateY(1px) /*scale(0.98)*/;
  box-shadow: var(--shadow-btn);
}
/* [primary] / [action] — the single accent button with prominent shadow */
button[primary],
button[action],
input[type='submit'][primary],
input[type='submit'][action] {
  box-shadow: var(--shadow-accent);
}
button[primary]:hover,
button[action]:hover,
input[type='submit'][primary]:hover,
input[type='submit'][action]:hover {
  box-shadow: 0 18px 40px -4px color-mix(in srgb, var(--fg) 50%, transparent),
    6px 10px 20px -2px color-mix(in srgb, var(--fg) 30%, transparent),
    6px 6px 12px color-mix(in srgb, var(--fg) 18%, transparent);
  background-color: var(--black);
}

/* [secondary] — hairline outline, elevated so it reads as interactive */
button[secondary], button[outline],
input[type='button'][secondary] {
  background-color: var(--bg-card);
  color: var(--fg);
  border: var(--border);
  box-shadow: var(--shadow-btn);
}
button[secondary]:hover, button[outline]:hover,
input[type='button'][secondary]:hover {
  background-color: color-mix(in srgb, var(--fg) 5%, var(--bg-card));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fg) 12%, transparent),
    0 2px 4px color-mix(in srgb, var(--fg) 8%, transparent);
}
button[secondary]:active, button[outline]:active,
input[type='button'][secondary]:active {
  transform: translateY(1px) /*scale(0.98)*/;
  box-shadow: none;
}

/* [ghost] — transparent */
button[ghost] {
  background-color: transparent;
  color: var(--fg);
  box-shadow: none;
}
button[ghost]:hover {
  background-color: var(--bg-card);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fg) 6%, transparent);
}
button[ghost]:active {
  transform: translateY(1px) /*scale(0.98)*/;
  box-shadow: none;
}

/* [icon] — square, no padding, for icon-only buttons */
button[icon],
a[role="button"][icon] {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex-shrink: 0;
  font-size: var(--fs-lg);
}
button[icon]:hover,
a[role="button"][icon]:hover {
  transform: translateY(-1px);
}
button[icon][size="sm"],
a[role="button"][icon][size="sm"] {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--fs-sm);
}
button[icon][size="lg"],
a[role="button"][icon][size="lg"] {
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--fs-xxl);
}

/* [fab] — round floating-action button: fixed square, no padding, full
   roundness, elevated shadow. Shapes the button only — position it
   yourself (fixed/absolute/in a positioned container), like #backToTop
   in the index demo. */
button[fab],
a[role="button"][fab] {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: var(--fs-lg);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fg) 25%, transparent),
    0 2px 6px color-mix(in srgb, var(--fg) 18%, transparent);
}
button[fab]:hover,
a[role="button"][fab]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fg) 30%, transparent),
    0 4px 8px color-mix(in srgb, var(--fg) 20%, transparent);
}
button[fab][size="sm"],
a[role="button"][fab][size="sm"] {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--fs-sm);
}
button[fab][size="lg"],
a[role="button"][fab][size="lg"] {
  width: 3rem;
  height: 3rem;
  font-size: var(--fs-xxl);
}

/* [destructive] — saturated red */
button[destructive] {
  background-color: var(--red);
  color: var(--red-fg-solid);
  box-shadow: 0 1px 2px rgba(180, 30, 30, 0.2);
}
button[destructive]:hover {
  background-color: color-mix(in srgb, var(--red) 88%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180, 30, 30, 0.3);
}
button[destructive]:active {
  transform: translateY(1px) /*scale(0.98)*/;
  box-shadow: 0 1px 2px rgba(180, 30, 30, 0.2);
}

/* [success] — saturated green */
button[success] {
  background-color: var(--green);
  color: var(--green-fg-solid);
  box-shadow: 0 1px 2px rgba(20, 140, 60, 0.2);
}
button[success]:hover {
  background-color: color-mix(in srgb, var(--green) 88%, black);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 140, 60, 0.3);
}
button[success]:active {
  transform: translateY(1px) /*scale(0.98)*/;
  box-shadow: 0 1px 2px rgba(20, 140, 60, 0.2);
}

/* [call-to-action] — yellow accent chip */
button[call-to-action] {
  background-color: var(--yellow-bg);
  color: var(--yellow-fg);
  box-shadow: 0 2px 8px rgba(250, 204, 71, 0.4);
}
button[call-to-action]:hover {
  background-color: color-mix(in srgb, var(--yellow-bg) 88%, white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(250, 204, 71, 0.5);
}
button[call-to-action]:active {
  transform: translateY(1px) /*scale(0.98)*/;
  box-shadow: 0 2px 8px rgba(250, 204, 71, 0.4);
}

/* [round] — pill modifier, stacks with any variant */
button[round],
input[type='submit'][round],
input[type='reset'][round],
input[type='button'][round] {
  border-radius: var(--radius-pill);
  padding-inline: 1.25rem;
}

/* [size] */
button[size="sm"],
input[type='submit'][size="sm"],
input[type='button'][size="sm"] {
  font-size: var(--fs-xs);
  padding: 0.4rem 0.75rem;
}
button[size="lg"],
input[type='submit'][size="lg"],
input[type='button'][size="lg"] {
  font-size: var(--fs-body);
  padding: 0.875rem 1.5rem;
}

/* [fullwidth] */
button[fullwidth],
input[type='submit'][fullwidth],
input[type='button'][fullwidth] {
  width: 100%;
}

:disabled,
[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
[invisible] { visibility: hidden; }
/* ============================================================
   Badges / kbd — soft tints, pill by default
   ============================================================ */
kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background-color: var(--bg-card);
  color: var(--fg);
  border: var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  box-decoration-break: clone;
  box-shadow: var(--shadow-card);
}
kbd[success] {
  background-color: var(--green-bg);
  color: var(--green-fg);
  border-color: transparent;
}
kbd[warning] {
  background-color: var(--yellow-bg);
  color: var(--yellow-fg);
  border-color: transparent;
}
kbd[danger] {
  background-color: var(--red-bg);
  color: var(--red-fg);
  border-color: transparent;
}
kbd[info] {
  background-color: var(--blue);
  color: var(--blue-fg);
  border-color: transparent;
}
kbd[solid] {
  background-color: var(--black);
  color: var(--black-fg);
  border-color: transparent;
}
kbd[lines] {
  background: linear-gradient(45deg, light-dark(#ddd, #666) 6.25%, transparent 16.25%, transparent 50%, light-dark(#ddd, #666) 50%, transparent 66.25%);
  background-size: 8px 8px;
}

/* ============================================================
   Forms
   ============================================================ */
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
form[inline] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--fg);
  font-weight: 500;
}
label * {
  vertical-align: middle;
}

[field] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
[field] > label {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-weight: 500;
}
[field] > small {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

input:not([type]),
input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
input[type='date'],
input[type='time'],
input[type='file'],
input[type='number'],
input[type='url'],
input[type='tel'],
select,
textarea {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  padding: 0.625rem 0.75rem;
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-card);
  color: var(--fg);
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:not([type]):focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='search']:focus,
input[type='date']:focus,
input[type='time']:focus,
input[type='number']:focus,
input[type='url']:focus,
input[type='tel']:focus,
textarea:focus {
  border-color: var(--border-focus);
}
textarea {
  min-height: 5rem;
  resize: vertical;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  padding: 0.625rem 2.25rem 0.625rem 0.75rem;
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-card);
  color: var(--fg);
  width: 100%;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    scale 0.18s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.75rem) center;
}
select:hover {
  border-color: var(--fg-muted);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 5%, transparent);
}
select:focus {
  border-color: var(--border-focus);
}
select:active {
  scale: 0.98;
}

/* Advanced base-select styling (Chrome 137+) — applies the ixis.app/885 look */
@supports (appearance: base-select) {
  @media (hover) and (pointer: fine) {
    select,
    select::picker(select) {
      appearance: base-select;
    }
  }
  select {
    padding-block: 0;
    padding-inline: var(--space-1);
    border-radius: var(--radius);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fg) 8%, transparent);
    transition: box-shadow 0.2s ease, scale 0.18s ease, border-color 0.18s ease,
      background-image 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 0.75rem) center;
  }
  select:open {
    scale: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
  }
  select:hover {
    box-shadow: 0 0 0 var(--space-1)
      color-mix(in srgb, var(--fg) 5%, transparent);
  }
  select > button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    block-size: 2.25rem;
    padding-inline: var(--space-2);
    background: transparent;
    color: var(--fg);
    border: none;
    border-radius: var(--radius-sm);
  }
  select::picker-icon {
    display: none;
  }
  select::picker(select) {
    border: var(--border);
    border-radius: var(--radius-card);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-pop);
    padding-block: var(--space-2);
    min-inline-size: anchor-size(inline);
    position-try-fallbacks: flip-block;
    transform-origin: 50% 0;
    transition: display 0.18s allow-discrete, overlay 0.18s allow-discrete,
      opacity 0.18s ease, scale 0.18s ease;
  }
  select::picker(select):not(:popover-open) {
    opacity: 0;
    scale: 0.96;
  }
  @starting-style {
    select::picker(select):popover-open {
      opacity: 0;
      scale: 0.92;
    }
  }
  select option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    block-size: 2.25rem;
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    margin-block: 1px;
    transition: background 0.15s;
  }
  select option:hover {
    background: var(--bg);
  }
  select option:checked {
    background: var(--black);
    color: var(--black-fg);
    border-radius: var(--radius-sm);
  }
  select option:checked::checkmark {
    order: 2;
    margin-inline-start: auto;
  }
  select optgroup,
  select fieldset {
    display: grid;
    border: none;
    margin: 0;
    padding: 0;
  }
  select fieldset:not(:first-of-type) {
    border-block-start: var(--border);
  }
  select legend {
    padding: var(--space-2) var(--space-2);
    background: var(--bg-card);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    position: sticky;
    inset-block-start: 0;
  }
}

input[type='color'] {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border);
  border-radius: var(--radius);
  padding: 0;
  background: var(--bg-card);
}
input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius) - 2px);
}
input[type='color']::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius) - 2px);
}

/* Width attributes — override the default width:100% */
input[size='xxs'],
select[size='xxs'],
textarea[size='xxs'] { width: 4rem; }
input[size='xs'],
select[size='xs'],
textarea[size='xs'] { width: 6rem; }
input[size='s'],
select[size='s'],
textarea[size='s'] { width: 10rem; }
input[size='m'],
select[size='m'],
textarea[size='m'] { width: 20rem; }
input[size='l'],
select[size='l'],
textarea[size='l'] { width: 30rem; }
input[size='xl'],
select[size='xl'],
textarea[size='xl'] { width: 40rem; }
input[size='auto'],
select[size='auto'],
textarea[size='auto'] { width: auto; }
input[size='full'],
select[size='full'],
textarea[size='full'] { width: 100%; }
/* Fixed sizes must never overflow their container (mobile viewports are
   narrower than [size='l']/['xl']) — cap every sized field at 100% */
input[size],
select[size],
textarea[size] { max-width: 100%; }

/* Form validation — :user-valid/:user-invalid only (see ~line 1150);
   plain :valid/:invalid would paint pristine fields on page load */
/* Focus should always use fg border regardless of validity */
input:invalid:focus,
input:valid:focus,
select:invalid:focus,
select:valid:focus,
textarea:invalid:focus,
textarea:valid:focus {
  border-color: var(--border-focus);
}

/* Validation message element auto-generated by form-enhance component */
[data-fe-msg] {
  color: var(--red, #e00);
  font-size: var(--fs-xs, 0.75rem);
  margin-top: 0.2rem;
  line-height: 1.35;
  display: none;
}

/* Custom checkboxes & radios — modern style */
input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.7rem;
  height: 1.7rem;
  margin: .2rem;
  margin-inline-end: var(--space-2);
  border: 1.5px solid var(--fg-muted);
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
input[type='checkbox'] {
  border-radius: var(--radius-sm);
  border-color: var(--hairline) !important;
}
input[type='radio'] {
  border-radius: 50%;
  border-color: var(--hairline) !important;
}
/* Checkbox: white checkmark on accent background when checked */
input[type='checkbox']::after {
  content: '';
  width: 0.35rem;
  height: 0.65rem;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  position: absolute;
  top: 42%;
  inset-inline-start: 50%;
  transition: transform 0.2s ease;
  color: var(--hairline, oklch(0.98 0 0));
  transform: translate(-50%, -50%) scale(2);
  opacity:.4;
}
input[type='checkbox']:checked {
  background-color: var(--fg, oklch(0.55 0.15 145));
  border-color: var(--fg, oklch(0.55 0.15 145)) !important;
  box-shadow: var(--shadow-accent);
}
input[type='checkbox']::after { content: '×'; }
input[type='checkbox']:checked::after {
  content: '';
  border-color: var(--black-fg, oklch(0.98 0 0));
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  opacity:1;
}
/* Radio: inner dot, green on white background when checked */
input[type='radio']::after {
  content: '';
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  background-color: transparent;
  border-radius: 50%;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
input[type='radio']:checked {
  border-color: var(--hairline) !important;
}
input[type='radio']:checked::after {
  background-color: var(--fg);
  transform: translate(-50%, -50%) scale(1);
  box-shadow: var(--shadow-accent);
}
input[type='checkbox']:hover,
input[type='radio']:hover {
  border-color: var(--fg);
}
/* [switch] — pill toggle */
input[type='checkbox'][switch] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--hairline);
  position: relative;
  cursor: pointer;
  border: none;
  margin: 0;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}
input[type='checkbox'][switch]::after {
  content: none;
}
input[type='checkbox'][switch]::before {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: calc(1.5rem - 4px);
  height: calc(1.5rem - 4px);
  border-radius: 50%;
  background-color: var(--bg-card);
  box-shadow: var(--shadow-btn);
  transition: transform 0.2s ease;
}
input[type='checkbox'][switch]:checked {
  background-color: var(--black);
}
input[type='checkbox'][switch]:checked::before {
  transform: translateX(1rem);
}
/* Native validation states */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);
}
input:user-valid,
textarea:user-valid,
select:user-valid {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}

fieldset {
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
legend {
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
}

fieldset[role='group'] {
  flex-direction: row;
  gap: 0;
  padding: 0;
  border: none;
  flex-wrap: nowrap;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
}
fieldset[role='group'] > * {
  border-radius: 0;
  margin: 0;
  flex: 0 0 auto;
}
fieldset[role='group'] > input,
fieldset[role='group'] > select,
fieldset[role='group'] > textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
fieldset[role='group'] > *:first-child {
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}
fieldset[role='group'] > *:last-child {
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}
fieldset[role='group'] input,
fieldset[role='group'] button {
  border-radius: 0;
}
fieldset[role='group'] input:first-child {
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}
fieldset[role='group'] input:last-child {
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}
fieldset[role='group'] button:not(:first-child) {
  border-inline-start: 0;
}
fieldset[role='group'][fullwidth] {
  width: 100%;
}
fieldset[role='group'] > *:focus-visible {
  z-index: 1;
}

/* ============================================================
   [otp] — single-input one-time passcode field
   Monospace font + letter-spacing. No separated <inputs>.
   Box outlines per character via CSS background.
   ============================================================ */
input[otp] {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 1.5rem;
  letter-spacing: 1ch;
  text-align: left;
  padding: 0.5em 0.5ch 0.5em 0.5ch;
  padding-inline-end: 0;
  width: calc(6 * 2ch + 1ch);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-card);
  caret-color: var(--fg);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--hairline) 0,
      var(--fg-muted) 1px,
      transparent 1px,
      transparent 2ch
    ),
    linear-gradient(var(--hairline), var(--hairline)),
    linear-gradient(var(--hairline), var(--hairline));
  background-position: 0 0, 0 0, 0 0;
  background-size: 2ch 100%, 100% 1px, 100% 1px;
  background-repeat: repeat-x, no-repeat, no-repeat;
}
input[otp]:focus {
  outline: none;
  border-color: var(--fg);
}
input[otp]:invalid:not(:placeholder-shown) {
  border-color: var(--red-bg);
}

input[type='file']::file-selector-button {
  margin-inline-end: var(--space-3);
  padding: 0.5rem 0.875rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--black);
  color: var(--black-fg);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
input[type='file']::file-selector-button:hover {
  background-color: color-mix(in srgb, var(--black) 88%, var(--bg-card));
}

/* ============================================================
   Cards (article)
   ============================================================ */
article {
  background-color: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  margin: 0;
}
article[borderless] {
  border: none;
  box-shadow: var(--shadow-card);
}
article[flat] {
  border: var(--border);
  box-shadow: none;
}
[border] {
  border: var(--border);
  padding: .5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
article header {
  margin-bottom: var(--space-3);
}
article header h1,
article header h2,
article header h3 {
  margin-bottom: var(--space-1);
}
article footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border);
  color: var(--fg-muted);
}

header {
  margin-bottom: var(--space-4);
}
section {
  margin-bottom: var(--space-6);
}

:target {
  scroll-margin-block-start: 2rem;
}
footer {
  margin-top: var(--space-6);
  color: var(--fg-muted);
}

/* ============================================================
   Tables
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  background-color: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
table caption {
  color: var(--fg-muted);
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  text-align: start;
  padding: var(--space-2);
}
table th {
  text-align: start;
  color: var(--fg-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border);
}
table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border);
  vertical-align: middle;
}
table tr:last-child td {
  border-bottom: none;
}
table tr:hover td {
  background-color: var(--bg);
}
table tfoot td {
  background-color: var(--bg);
  font-weight: 600;
}

/* Sticky header — keep column labels visible while scrolling */
table[sticky],
table[sticky-col] {
  border-collapse: separate;
  border-spacing: 0;
}
table[sticky] {
  overflow: visible;
}
table[sticky] > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-card);
  border-bottom: var(--border);
  animation: sticky-hdr-shadow linear;
  animation-timeline: scroll(nearest block);
}

/* Sticky first column — lock it horizontally */
table[sticky-col] > thead > tr > th:first-child,
table[sticky-col] > tbody > tr > td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background-color: var(--bg-card);
  animation: sticky-col-shadow linear;
  animation-timeline: scroll(nearest inline);
}
/* Intersection cell (top-left corner) — both axes */
table[sticky-col] > thead > tr > th:first-child {
  z-index: 3;
  animation:
    sticky-hdr-shadow linear,
    sticky-col-shadow linear;
  animation-timeline:
    scroll(nearest block),
    scroll(nearest inline);
  animation-composition: add;
}
/* Row hover also updates the sticky cell */
table[sticky-col] > tbody > tr:hover > td:first-child {
  background-color: var(--bg);
}

/* Scroll-driven keyframes for sticky table shadows (Chrome 115+) */
@keyframes sticky-hdr-shadow {
  from { box-shadow: none; }
  to   { box-shadow: 0 2px 6px -2px rgb(0 0 0 / 0.15); }
}
@keyframes sticky-col-shadow {
  from { box-shadow: none; }
  to   { box-shadow: 2px 0 6px -2px rgb(0 0 0 / 0.15); }
}

/* ============================================================
   Navigation, breadcrumbs, menubar
   ============================================================ */
nav {
  display: flex;
  align-items: center;
  --separator: '>';
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
nav a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
}
nav a:hover {
  color: var(--fg);
  text-decoration: none;
}
nav a[aria-current='page'],
nav a[active] {
  color: var(--fg);
  border-bottom: 2px solid var(--fg);
}

nav[breadcrumb] {
  gap: var(--space-2);
  font-size: var(--fs-sm);
  --separator: '/';
  flex-wrap: wrap;
}
/* Advanced attr() lets the attribute value override the separator
   (e.g. <nav breadcrumb="→">). Chrome 133+; others keep the defaults. */
@supports (content: attr(data-x, '')) {
  nav { --separator: attr(breadcrumb, '>'); }
  nav[breadcrumb] { --separator: attr(breadcrumb, '/'); }
}
nav[breadcrumb] a {
  color: var(--fg-muted);
  text-decoration: none;
  padding: 0;
}
nav[breadcrumb] a::after {
  content: var(--separator);
  margin-inline-start: var(--space-2);
  color: var(--fg-muted);
  opacity: 0.6;
}
nav[breadcrumb] a:last-child {
  color: var(--fg);
  font-weight: 500;
}
nav[breadcrumb] a:last-child::after {
  content: '';
}

menu {
  display: flex;
  flex-direction: row;
  gap: 0;
  border: var(--border);
  border-radius: var(--radius);
  width: fit-content;
  padding: 0;
  margin: 0;
  background-color: var(--bg-card);
  list-style: none;
}
menu li {
  padding: 0.5rem 0.875rem;
  list-style: none;
  font-size: var(--fs-sm);
  cursor: pointer;
  border-inline-end: none;
}
menu li:hover {
  background-color: var(--bg);
  color: var(--fg);
}
menu li[active] {
  background-color: var(--bg);
  color: var(--fg);
  font-weight: 600;
}
menu[vertical] {
  flex-direction: column;
  width: fit-content;
}
menu[vertical] li {
  border-inline-end: none;
  border-bottom: var(--border);
}
menu[vertical] li:last-child {
  border-bottom: none;
}

/* ============================================================
   Aside / sidebar
   ============================================================ */
aside {
  background-color: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
aside header,
aside footer {
  margin: 0;
}
aside nav {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
aside nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--fg-muted);
  text-decoration: none;
}
aside nav a:hover {
  background-color: var(--bg);
  color: var(--fg);
}
aside nav a[aria-current='page'],
aside nav a[active] {
  background-color: var(--black);
  color: var(--black-fg);
  border-bottom: none;
}

/* ============================================================
   Dialog / modal / drawer / sheet / toast / sonner
   ============================================================ */
dialog {
  background-color: var(--bg-card);
  color: var(--fg);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin: auto;
  box-shadow: var(--shadow-pop);
  max-width: min(90vw, 32rem);
}
dialog::backdrop {
  background-color: var(--bg-overlay);
  backdrop-filter: blur(2px);
}
dialog[open] {
  animation: dialog-in 0.2s ease-out forwards;
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
dialog > header {
  margin: 0 0 var(--space-3);
  margin-top: 0;
}
dialog > footer {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

dialog[drawer] {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  top: auto;
  bottom: 0;
  max-height: 70vh;
  max-width: 90vw;
  width: clamp(20rem, 50vw, 48rem);
  &[open] {
    animation: slideup 0.25s ease-in forwards;
  }
}

dialog[sheet-top],
dialog[sheet-bottom],
dialog[sheet-left],
dialog[sheet-right] {
  border-radius: 0;
  margin: 0;
  box-shadow: var(--shadow-pop);
}
dialog[sheet-top],
dialog[sheet-bottom] {
  width: 100vw;
  max-width: 100vw;
  max-height: 70vh;
}
dialog[sheet-left],
dialog[sheet-right] {
  height: 100vh;
  max-height: 100vh;
  max-width: 28rem;
}
dialog[sheet-top][open] { animation: slidedown 0.25s ease-in forwards; }
dialog[sheet-bottom][open] {
  animation: slideup 0.25s ease-in forwards;
  top: auto;
  bottom: 0;
}
dialog[sheet-left][open] { animation: slideright 0.25s ease-in forwards; }
dialog[sheet-right][open] {
  animation: slideleft 0.25s ease-in forwards;
  inset-inline-start: auto;
  inset-inline-end: 0;
}

@keyframes slideup { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes slidedown { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
@keyframes slideleft { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes slideright { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }

dialog[sonner],
dialog[toast] {
  position: fixed;
  padding: var(--space-4);
  padding-inline-end: var(--space-5);

  border-radius: var(--radius-card);
  top: auto;
  bottom: var(--space-4);
  inset-inline-start: auto;
  inset-inline-end: var(--space-4);
  margin: 0;
  max-width: 24rem;
  &::backdrop { opacity: 0; background: transparent; }
}
dialog[toast] {
  box-shadow: var(--shadow-pop);
  &[open] {
    animation: slideup 0.2s ease-in forwards, fad-in 0.2s ease-in forwards;
  }
}
dialog[sonner] {
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  transition: gap 0.15s ease-in;
  max-width: 22rem;
}
dialog[sonner] > li {
  animation: slideup 0.2s ease-in forwards, fad-in 0.2s ease-in forwards;
  background-color: var(--bg-card);
  counter-increment: sonner-counter;
  padding: var(--space-4);
  padding-inline-end: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-card);
  list-style: none;
  box-shadow: var(--shadow-pop);
}
dialog[sonner] > li:hover {
  scale: 1.02;
}
@keyframes fad-in { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Drawer/sheet modifiers — [rounded] and [full] */
dialog[rounded] { border-radius: var(--radius-card); }
dialog[drawer][rounded] { border-radius: 3rem 3rem 0 0; }
dialog[sheet-top][rounded] { border-radius: 0 0 var(--radius-card) var(--radius-card); }
dialog[sheet-bottom][rounded] { border-radius: var(--radius-card) var(--radius-card) 0 0; }
dialog[sheet-left][rounded] { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
dialog[sheet-right][rounded] { border-radius: var(--radius-card) 0 0 var(--radius-card); }

dialog[drawer][full] {
  max-height: 80vh;
  max-width: 100vw;
  width: 100vw;
}
dialog[sheet-top][full],
dialog[sheet-bottom][full] { max-height: 100vh; }
dialog[sheet-left][full],
dialog[sheet-right][full] { max-width: 80vw; }

/* ============================================================
   Popover (anchor positioning)
   ============================================================ */
[popover]:not(:popover-open) {
  display: none;
}
[popover] {
  inset: unset;
  position: absolute;
  bottom: calc(anchor(top) + var(--space-1));
  justify-self: anchor-center;
  position-anchor: auto;
  position-try-fallbacks: flip-block;
  margin: 0;
  background-color: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  box-shadow: var(--shadow-pop);
  color: var(--fg);
  font-size: var(--fs-sm);
  max-width: 80rem;
}
[popover]:popover-open {
  animation: fad-in 0.15s ease-in forwards;
}

/* Invoker button hint */
button[popovertarget]::after {
  content: '▾';
  font-size: 0.7em;
  margin-inline-start: var(--space-1);
  opacity: 0.6;
}
menu[popover] { 
  padding: 0;
}

/* ============================================================
   Tooltips
   ============================================================ */
[tooltip-top],
[tooltip-bottom],
[tooltip-left],
[tooltip-right] {
  position: relative;
}
[tooltip-top]::after,
[tooltip-bottom]::after,
[tooltip-left]::after,
[tooltip-right]::after {
  position: absolute;
  white-space: nowrap;
  background-color: var(--black);
  color: var(--black-fg);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-xs);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 10;
  pointer-events: none;
  content: attr(tooltip-top) attr(tooltip-bottom) attr(tooltip-left) attr(tooltip-right);
}
[tooltip-top]::after,
[tooltip-bottom]::after {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}
[tooltip-top]::after {
  content: attr(tooltip-top);
  bottom: calc(100% + var(--space-1));
}
[tooltip-bottom]::after {
  content: attr(tooltip-bottom);
  top: calc(100% + var(--space-1));
}
[tooltip-left]::after,
[tooltip-right]::after {
  top: 50%;
  transform: translateY(-50%);
}
[tooltip-left]::after {
  content: attr(tooltip-left);
  inset-inline-end: calc(100% + var(--space-1));
}
[tooltip-right]::after {
  content: attr(tooltip-right);
  inset-inline-start: calc(100% + var(--space-1));
}
[tooltip-top]:hover::after,
[tooltip-bottom]:hover::after,
[tooltip-left]:hover::after,
[tooltip-right]:hover::after,
[tooltip-top]:focus-visible::after,
[tooltip-bottom]:focus-visible::after,
[tooltip-left]:focus-visible::after,
[tooltip-right]:focus-visible::after {
  opacity: 1;
}

/* ============================================================
   Accesskey indicator
   Shows a small key-letter badge on elements with accesskey.
   Only visible when [show-accesskey] is also present.
   On hover/focus, expands to show "Alt + {key}".
   ============================================================ */
[accesskey][show-accesskey] {
  position: relative;
}
[accesskey][show-accesskey]::after {
  position: absolute;
  bottom: -0.9em;
  inset-inline-start: calc(100% + 0.3em);
  content: "Alt + " attr(accesskey);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  padding: 0.2em;
  border-radius: 0.25em;
  border: 2px solid light-dark(#ccc, #666);
  background: light-dark(#f0f0f0, #333);
  color: light-dark(#222, #eee);
  box-shadow: 0 3px 0 light-dark(#999, #111), inset 0 1px 0 light-dark(#fff, #555);
  text-indent: -2.4em;
  width: 0.8rem;
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.2s ease, text-indent 0.2s ease, padding 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
[accesskey][show-accesskey]:hover::after,
[accesskey][show-accesskey]:focus-visible::after {
  text-indent: 0;
  width: 8em;
  padding: 0.2em 0.5em;
  background: light-dark(#ddd, #444);
  border-color: light-dark(#aaa, #777);
  box-shadow: 0 3px 0 light-dark(#888, #222), inset 0 1px 0 light-dark(#fff, #555);
}

/* ============================================================
   Details / accordion
   ============================================================ */
details {
  border: var(--border);
  border-radius: var(--radius-card);
  padding: 0;
  margin-bottom: var(--space-3);
  background-color: var(--bg-card);
  overflow: hidden;
}
details[open] {
  box-shadow: var(--shadow-card);
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  user-select: none;
  -webkit-user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-inline-end: 2px solid var(--fg-muted);
  border-bottom: 2px solid var(--fg-muted);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
  margin-inline-end: 0.2rem;
}
details[open]>summary::after {
  transform: rotate(45deg);
}
summary:hover {
  background-color: var(--bg);
}
details > *:not(summary) {
  padding-inline: var(--space-4);
}
details > *:last-child {
  padding-bottom: var(--space-4);
}

/* Animate open/close in supporting browsers (Chrome 129+) */
@supports (interpolate-size: allow-keywords) {
  details {
    interpolate-size: allow-keywords;
  }
  details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.25s ease, content-visibility 0.25s ease allow-discrete;
  }
  details[open]::details-content {
    height: auto;
  }
  @starting-style {
    details[open]::details-content {
      height: 0;
    }
  }
}

/* ============================================================
   Progress
   ============================================================ */
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--bg);
  border: 0;
}
progress[value]::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background-color: var(--bg);
}
progress[value]::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background-color: var(--black);
}
progress[value]::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background-color: var(--black);
}
progress:indeterminate {
  background: var(--bg) linear-gradient(to right, var(--black) 35%, var(--bg) 35%)
    top left / 150% 150% no-repeat;
  animation: progress-indeterminate 1.5s linear infinite;
}
progress:indeterminate::-webkit-progress-bar { background-color: transparent; }
progress:indeterminate::-moz-progress-bar { background-color: transparent; }
@keyframes progress-indeterminate {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Skeleton & loading
   ============================================================ */
[aria-busy='true'],
[aria-busy='spinner'] {
  opacity: 0.7;
  pointer-events: none;
}
[aria-busy='spinner']::before {
  content: var(--loading-icon-url);
  padding-inline-end: var(--space-2);
}

[skeleton],
[shimmer] {
  animation: shimmer 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
[skeleton] {
  background-color: var(--hairline);
  border-radius: var(--radius);
  opacity: 1;
  min-height: 1em;
  display: block;
}
div[skeleton] *, [skeleton] * {
  display: none;
}
@keyframes shimmer {
  0%, 100% { background-color: var(--hairline); }
  50% { background-color: var(--fg-muted); opacity: 0.4; }
}

/* ============================================================
   Code
   ============================================================ */
code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  background-color: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  color: var(--fg);
  box-decoration-break: clone;
}

/* ============================================================
   [highlight] — hand-drawn highlighter effect on <mark>
   SVG filter via data URI (no extra markup needed).
   Caveat: display:inline-block means best on 1-3 words.
   ============================================================ */
mark[highlight] {
  --color: oklch(0.92 0.18 95);
  display: inline-block;
  position: relative;
  background-color: unset;
  isolation: isolate;
}
mark[highlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(100% + 1ch);
  left: -.25ch;
  height: 110%;
  top: -5%;
  border-bottom-right-radius: 20px 30px;
  background-color: var(--color);
  opacity: .75;
  box-shadow:
    inset -2px 0 1px hsl(from var(--color) h s calc(l - 20)),
    inset -4px 0 5px hsl(from var(--color) h s calc(l - 20));
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wr'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3C/svg%3E#wr");
  z-index: -1;
}
mark[highlight]::after {
  content: '';
  position: absolute;
  height: 1ch;
  width: .5ch;
  top: 2px;
  right: -.25em;
  background:
    radial-gradient(
      hsl(from var(--color) h s calc(l - 30)),
      hsl(from var(--color) h s l)
    );
  opacity: .4;
  border-radius: 10px 0 50px/200px 0;
  rotate: 15deg;
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wr'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3C/svg%3E#wr");
  z-index: -1;
}
pre {
  border-radius: var(--radius-card);
  background-color: var(--bg-card);
  border: var(--border);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-4);
}
pre code {
  background-color: transparent;
  border: none;
  padding: 0;
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ============================================================
   Range slider — gradient track + long-shadow thumb (ixis.app/642)
   Set --slider-value via oninput for the fill to work.
   ============================================================ */
input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
  margin: var(--space-2) 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--fg) 0%,
    var(--fg) var(--slider-value),
    var(--hairline) var(--slider-value),
    var(--hairline) 100%
  );
}
input[type='range']::-moz-range-track {
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--fg) 0%,
    var(--fg) var(--slider-value),
    var(--hairline) var(--slider-value),
    var(--hairline) 100%
  );
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--fg);
  border: none;
  cursor: ew-resize;
  position: relative;
  top: -0.3rem;
  z-index: 1;
  box-shadow:
    1px 1px 1px color-mix(in srgb, var(--fg) 30%, transparent),
    2px 2px 2px color-mix(in srgb, var(--fg) 20%, transparent),
    4px 4px 4px color-mix(in srgb, var(--fg) 10%, transparent);
  transition: box-shadow 0.2s ease;
}
input[type='range']::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--fg);
  border: none;
  cursor: pointer;
  box-shadow:
    1px 1px 1px color-mix(in srgb, var(--fg) 30%, transparent),
    2px 2px 2px color-mix(in srgb, var(--fg) 20%, transparent),
    4px 4px 4px color-mix(in srgb, var(--fg) 10%, transparent);
  transition: box-shadow 0.2s ease;
}
input[type='range']:hover::-webkit-slider-thumb {
  box-shadow:
    1px 1px 2px color-mix(in srgb, var(--fg) 40%, transparent),
    3px 3px 4px color-mix(in srgb, var(--fg) 25%, transparent),
    6px 6px 6px color-mix(in srgb, var(--fg) 12%, transparent);
}
input[type='range']:hover::-moz-range-thumb {
  box-shadow:
    1px 1px 2px color-mix(in srgb, var(--fg) 40%, transparent),
    3px 3px 4px color-mix(in srgb, var(--fg) 25%, transparent),
    6px 6px 6px color-mix(in srgb, var(--fg) 12%, transparent);
}
output {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius-sm);
  min-width: 2.5rem;
  text-align: center;
}
[slider-wrap] {
  position: relative;
  padding-top: 2.5rem;
}
[slider-wrap] output {
  position: absolute;
  top: 0;
  inset-inline-start: var(--slider-value, 50%);
  transform: translateX(-50%);
  pointer-events: none;
  transition: inset-inline-start 0.1s ease;
}

/* ============================================================
   Segmented control — pill-shaped toggle for mutually exclusive
   options. Use <fieldset segmented><label><input type="radio">...
   Radio inputs are visually hidden; the label acts as the toggle.
   ============================================================ */
fieldset[segmented] {
  display: inline-flex;
  flex-direction: row;
  gap: .5rem;
  padding: .5rem;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--bg);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
fieldset[segmented] label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  background: var(--bg-card);
  cursor: pointer;
  border-radius: calc(var(--radius-pill) - 2px);
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
  user-select: none;
}
fieldset[segmented] label:hover {
  color: var(--fg);
}
fieldset[segmented] label:has(input[type='radio']:checked) {
  background: var(--fg);
  color: var(--bg-card);
  box-shadow: var(--shadow-accent);
}
fieldset[segmented] input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
fieldset[segmented] label:has(input[type='radio']:focus-visible) {
  border-radius: var(--radius-pill);
}

/* ============================================================
   Scrollarea helper
   ============================================================ */
[scroll-x] { overflow-x: auto; }
[scroll-y] { overflow-y: auto; }

/* ============================================================
   Tabs (CSS-only, radio + :has())
   Two-row grid: row 1 = [tabbar] scroller (can overflow horizontally
   with scroll-driven shadow cue), row 2 = sections (fit container width).
   Up to 25 tabs. Inputs wrapped in <div tabbar>, sections are siblings.
   ============================================================ */
[tabs] {
  display: grid;
  grid-template-rows: auto 1fr;
  border: var(--border);
  border-radius: var(--radius-card);
  background-color: var(--bg-tabs);
  overflow: clip;
  margin-bottom: var(--space-6);
}
[tabbar] {
  grid-row: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /*thin*/
  scrollbar-color: var(--bg) transparent;
  _border-bottom: var(--border);
  animation: tabs-scroll-cue linear;
  animation-timeline: scroll(self inline);
  background-color: var(--hairline);
}
[tabbar]::-webkit-scrollbar { height: 4px; }
[tabbar]::-webkit-scrollbar-track { background: transparent; }
[tabbar]::-webkit-scrollbar-thumb { background: var(--bg); border-radius: 2px; }
[tabbar]::-webkit-scrollbar-button { display: none; }
/*
   Two layered inset shadows (constant geometry; color fades):
     right cue: visible at scrollLeft=0, fades only as you near the right end
     left cue:  invisible at scrollLeft=0, fades in as soon as you scroll left past 0
   Both are at full opacity across most of the scroll range, so when the
   tab bar overflows on both sides you see BOTH shadows at once.
*/
@keyframes tabs-scroll-cue {
  0%   {
    box-shadow:
      inset -1.5rem 0 1.5rem -1.5rem var(--fg),   /* right cue: visible */
      inset  1.5rem 0 1.5rem -1.5rem transparent;       /* left  cue: hidden  */
  }
  10%  {
    box-shadow:
      inset -1.5rem 0 1.5rem -1.5rem var(--fg-muted),   /* right cue: still visible */
      inset  1.5rem 0 1.5rem -1.5rem var(--fg-muted);    /* left  cue: fully visible */
  }
  90%  {
    box-shadow:
      inset -1.5rem 0 1.5rem -1.5rem var(--fg-muted),
      inset  1.5rem 0 1.5rem -1.5rem var(--fg-muted);
  }
  100% {
    box-shadow:
      inset -1.5rem 0 1.5rem -1.5rem transparent,       /* right cue: hidden  */
      inset  1.5rem 0 1.5rem -1.5rem var(--fg);    /* left  cue: visible */
  }
}
[tabbar] input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: color-mix(in srgb, var(--bg-tabs) calc(100% - var(--i) * 5%), #888 calc(var(--i) * 5%));
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  margin: 0;
  white-space: nowrap;
  box-shadow: none;
}
[tabbar] input:nth-child(1) { --i: 0 }
[tabbar] input:nth-child(2) { --i: 1 }
[tabbar] input:nth-child(3) { --i: 2 }
[tabbar] input:nth-child(4) { --i: 3 }
[tabbar] input:nth-child(5) { --i: 4 }
[tabbar] input:nth-child(6) { --i: 5 }
[tabbar] input:nth-child(7) { --i: 6 }
[tabbar] input:nth-child(8) { --i: 7 }
[tabbar] input:nth-child(9) { --i: 8 }
[tabbar] input:nth-child(10) { --i: 9 }
[tabbar] input:nth-child(11) { --i: 10 }
[tabbar] input:nth-child(12) { --i: 11 }
[tabbar] input:nth-child(13) { --i: 12 }
[tabbar] input:nth-child(14) { --i: 13 }
[tabbar] input:nth-child(15) { --i: 14 }
[tabbar] input:nth-child(16) { --i: 15 }
[tabbar] input:nth-child(17) { --i: 16 }
[tabbar] input:nth-child(18) { --i: 17 }
[tabbar] input:nth-child(19) { --i: 18 }
[tabbar] input:nth-child(20) { --i: 19 }
[tabbar] input:nth-child(21) { --i: 20 }
[tabbar] input:nth-child(22) { --i: 21 }
[tabbar] input:nth-child(23) { --i: 22 }
[tabbar] input:nth-child(24) { --i: 23 }
[tabbar] input:nth-child(25) { --i: 24 }
/* Suppress the custom-radio ::after dot inside [tabbar] */
[tabbar] input[type='radio']::after {
  content: attr(data-label) attr(data-tab);
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}
[tabbar] input[type='radio']:hover {
  color: var(--accent);
  background-color: var(--bg-muted);
}
[tabbar] input[type='radio']:checked {
  color: var(--fg);
  font-weight: 600;
  border-bottom-color: color-mix(in srgb, var(--bg-tabs) calc(100% - var(--i) * 5%), #888 calc(var(--i) * 5%)) !important;
}
[tabbar] input[type='radio']:checked:not(:first-child) {
  border-left: 2px solid var(--hairline) !important;
}
[tabbar] input[type='radio']:checked:not(:last-child) {
  border-right: 2px solid var(--hairline) !important;
}
[tabs] > section,
[tabs] > article,
[tabs] > div:not([tabbar]) {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  min-width: 0;
  visibility: collapse;
  padding: var(--space-4);
  _border-top: var(--border);
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--bg-tabs) calc(100% - var(--i) * 5%), #888 calc(var(--i) * 5%));
  pointer-events: none;
  user-select: none;
  margin: 0;
}
[tabs] > section:nth-child(2)  { --i: 0 }
[tabs] > section:nth-child(3)  { --i: 1 }
[tabs] > section:nth-child(4)  { --i: 2 }
[tabs] > section:nth-child(5)  { --i: 3 }
[tabs] > section:nth-child(6)  { --i: 4 }
[tabs] > section:nth-child(7)  { --i: 5 }
[tabs] > section:nth-child(8)  { --i: 6 }
[tabs] > section:nth-child(9)  { --i: 7 }
[tabs] > section:nth-child(10) { --i: 8 }
[tabs] > section:nth-child(11) { --i: 9 }
[tabs] > section:nth-child(12) { --i: 10 }
[tabs] > section:nth-child(13) { --i: 11 }
[tabs] > section:nth-child(14) { --i: 12 }
[tabs] > section:nth-child(15) { --i: 13 }
[tabs] > section:nth-child(16) { --i: 14 }
[tabs] > section:nth-child(17) { --i: 15 }
[tabs] > section:nth-child(18) { --i: 16 }
[tabs] > section:nth-child(19) { --i: 17 }
[tabs] > section:nth-child(20) { --i: 18 }
[tabs] > section:nth-child(21) { --i: 19 }
[tabs] > section:nth-child(22) { --i: 20 }
[tabs] > section:nth-child(23) { --i: 21 }
[tabs] > section:nth-child(24) { --i: 22 }
[tabs] > section:nth-child(25) { --i: 23 }
[tabs] > section:nth-child(26) { --i: 24 }
/* Show the section whose position matches the checked input in [tabbar] */
[tabs]:has([tabbar] input:nth-of-type(1):checked)  > section:nth-of-type(1),
[tabs]:has([tabbar] input:nth-of-type(2):checked)  > section:nth-of-type(2),
[tabs]:has([tabbar] input:nth-of-type(3):checked)  > section:nth-of-type(3),
[tabs]:has([tabbar] input:nth-of-type(4):checked)  > section:nth-of-type(4),
[tabs]:has([tabbar] input:nth-of-type(5):checked)  > section:nth-of-type(5),
[tabs]:has([tabbar] input:nth-of-type(6):checked)  > section:nth-of-type(6),
[tabs]:has([tabbar] input:nth-of-type(7):checked)  > section:nth-of-type(7),
[tabs]:has([tabbar] input:nth-of-type(8):checked)  > section:nth-of-type(8),
[tabs]:has([tabbar] input:nth-of-type(9):checked)  > section:nth-of-type(9),
[tabs]:has([tabbar] input:nth-of-type(10):checked) > section:nth-of-type(10),
[tabs]:has([tabbar] input:nth-of-type(11):checked) > section:nth-of-type(11),
[tabs]:has([tabbar] input:nth-of-type(12):checked) > section:nth-of-type(12),
[tabs]:has([tabbar] input:nth-of-type(13):checked) > section:nth-of-type(13),
[tabs]:has([tabbar] input:nth-of-type(14):checked) > section:nth-of-type(14),
[tabs]:has([tabbar] input:nth-of-type(15):checked) > section:nth-of-type(15),
[tabs]:has([tabbar] input:nth-of-type(16):checked) > section:nth-of-type(16),
[tabs]:has([tabbar] input:nth-of-type(17):checked) > section:nth-of-type(17),
[tabs]:has([tabbar] input:nth-of-type(18):checked) > section:nth-of-type(18),
[tabs]:has([tabbar] input:nth-of-type(19):checked) > section:nth-of-type(19),
[tabs]:has([tabbar] input:nth-of-type(20):checked) > section:nth-of-type(20),
[tabs]:has([tabbar] input:nth-of-type(21):checked) > section:nth-of-type(21),
[tabs]:has([tabbar] input:nth-of-type(22):checked) > section:nth-of-type(22),
[tabs]:has([tabbar] input:nth-of-type(23):checked) > section:nth-of-type(23),
[tabs]:has([tabbar] input:nth-of-type(24):checked) > section:nth-of-type(24),
[tabs]:has([tabbar] input:nth-of-type(25):checked) > section:nth-of-type(25) {
  visibility: visible;
  pointer-events: auto;
  user-select: auto;
}

/* ============================================================
   Selectable cards — article[selectable] with child checkbox
   ============================================================ */
article[selectable] {
  position: relative;
  cursor: pointer;
  padding-inline-end: var(--space-7);
  height: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}
article[selectable] input[type='checkbox'] {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  margin: 0;
}
article[selectable]:hover {
  border-color: var(--fg-muted);
}
article[selectable]:has(input[type='checkbox']:checked) {
  border-color: var(--bg-card);
  box-shadow: 0 0 0 1px var(--fg), var(--shadow-card);
  background-color: var(--hairline);
}
article[selectable]:has(input[type='checkbox']:checked) input[type='checkbox'] {
  background-color: var(--fg);
  border-color: var(--fg);
}
article[selectable]:has(input[type='checkbox']:checked) input[type='checkbox']::after {
  background-color: transparent /*var(--fg)*/;
}

/* ============================================================
   View transitions
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}

[vt="hero"]   { view-transition-name: hero; }
[vt="title"]  { view-transition-name: title; }
[vt="logo"]   { view-transition-name: logo; }
[vt="image"]  { view-transition-name: image; }
[vt="modal"]  { view-transition-name: modal; }
[vt="sidebar"]{ view-transition-name: sidebar; }
[vt-none]     { view-transition-name: none; }

/* [vt-class] — the name-vs-class split for cross-document transitions.
   `view-transition-name` is identity (unique per page); `view-transition-class`
   is a shared styling hook. One `::view-transition-group(*.fade)` rule below
   animates any number of named elements. Assign the class without a unique name
   so hundreds of items can share one transition style. */
[vt-class="fade"]        { view-transition-class: fade; }
[vt-class="scale"]       { view-transition-class: scale; }
[vt-class="slide-left"]  { view-transition-class: slide-left; }
[vt-class="slide-right"] { view-transition-class: slide-right; }
[vt-class="slide-up"]    { view-transition-class: slide-up; }
[vt-class="slideup"]     { view-transition-class: slideup; }  /* menut alias (no hyphen) */

::view-transition-group(*) {
  animation-duration: 0.25s;
  animation-timing-function: ease;
}
/* Images (and other replaced snapshots) default to object-fit: fill, which
   distorts when the element changes aspect ratio mid-transition. `cover` keeps
   the snapshot intact; non-replaced pseudo-elements are unaffected. */
::view-transition-old(*),
::view-transition-new(*) {
  object-fit: cover;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: vt-fade 0.25s ease both;
  mix-blend-mode: normal;
}
@keyframes vt-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Same-document `:transition` (menut adds this class to <html>):
   neutralise the whole-page root cross-fade so only the named elements
   animate — otherwise every reactive update flashes the entire page. */
html.weblin-same-vt::view-transition-group(root),
html.weblin-same-vt::view-transition-old(root),
html.weblin-same-vt::view-transition-new(root),
html.weblin-same-vt::view-transition-image-pair(root) {
  animation: none !important;
  opacity: 1 !important;
}

/* :transition modifier presets — mapped to view-transition-class by
   menut (menut.js). No per-name CSS needed; the modifier class is enough.
   (view-transition-class: Chrome/Edge only; others fall back to the
   default cross-fade — intentional graceful degradation.) */
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-scale-in  { from { transform: scale(0.85); opacity: 0; } }
@keyframes vt-scale-out { to   { transform: scale(0.85); opacity: 0; } }
@keyframes vt-slide-left-in  { from { transform: translateX(20%); opacity: 0; } }
@keyframes vt-slide-left-out { to   { transform: translateX(-20%); opacity: 0; } }
@keyframes vt-slide-right-in  { from { transform: translateX(-20%); opacity: 0; } }
@keyframes vt-slide-right-out { to   { transform: translateX(20%); opacity: 0; } }
@keyframes vt-slide-up-in  { from { transform: translateY(20%); opacity: 0; } }
@keyframes vt-slide-up-out { to   { transform: translateY(-20%); opacity: 0; } }

::view-transition-old(*.fade) { animation: 0.25s ease both vt-fade-out; }
::view-transition-new(*.fade) { animation: 0.25s ease both vt-fade; }
::view-transition-old(*.scale) { animation: 0.3s ease both vt-scale-out; }
::view-transition-new(*.scale) { animation: 0.3s ease both vt-scale-in; }
::view-transition-old(*.slide-left) { animation: 0.3s ease both vt-slide-left-out; }
::view-transition-new(*.slide-left) { animation: 0.3s ease both vt-slide-left-in; }
::view-transition-old(*.slide-right) { animation: 0.3s ease both vt-slide-right-out; }
::view-transition-new(*.slide-right) { animation: 0.3s ease both vt-slide-right-in; }
::view-transition-old(*.slide-up) { animation: 0.3s ease both vt-slide-up-out; }
::view-transition-new(*.slide-up) { animation: 0.3s ease both vt-slide-up-in; }
::view-transition-old(*.slideup)  { animation: 0.3s ease both vt-slide-up-out; }
::view-transition-new(*.slideup)  { animation: 0.3s ease both vt-slide-up-in; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ============================================================
   Responsive base
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: var(--fs-body); }
  [display] { font-size: var(--fs-h1); }
  h1 { font-size: var(--fs-h2); }
  [hero] { padding-block: var(--space-6) var(--space-4); }
  form[inline] { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Component loading states
   ============================================================ */
/* Hide undefined components until JS registers them.
   Falls back to visible after 3s (graceful degradation if JS fails). */
@keyframes comp-visible { to { visibility: visible; } }

:not(:defined) {
  visibility: hidden;
  animation: comp-visible 0s 3s forwards;
}

/* Hook for ready-state styling on any component.
   The loader sets this attribute after init completes.
   To add ready-based hiding, use per-component selectors:
   x-alert:not([ready]) { opacity: 0; }
   x-alert[ready]     { opacity: 1; transition: opacity 0.3s; } */
[ready] { }

/* ============================================================
   Ticker — horizontal scrolling marquee
   ============================================================ */
[ticker] {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

[ticker] > :first-child {
  display: inline-block;
  margin: 0;
  padding-inline-start: 100%;
  animation: ticker-scroll 15s linear infinite;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ============================================================
   Pulse — attention-grabbing glow animation
   ============================================================ */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(222, 114, 45, 0.4); }
  70%  { box-shadow: 0 0 0 50px rgba(222, 114, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(222, 114, 45, 0); }
}
[pulse] { animation: pulse 1.5s infinite; }

/* ============================================================
   Shine — attention-grabbing shine text horizontal  animation
   ============================================================ */
[shine] {
    background: linear-gradient(
        90deg,
        light-dark(#555,#aaa) 0%,
        light-dark(#555,#aaa) 40%,
        #fff 50%,
        light-dark(#555,#aaa) 60%,
        light-dark(#555,#aaa) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s linear infinite;
}

@keyframes shine {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ============================================================
   [label-float] — floating label, no extra markup
   <label label-float text="Label"><input placeholder=" "></label>
   The label text is read from the `text` attribute and rendered
   as a pseudo-element over the field. It floats up onto the top
   edge on focus / when filled. No JS — :placeholder-shown + :has.
   ============================================================ */
label[label-float] {
  position: relative;
  display: block;
}
label[label-float] > input,
label[label-float] > textarea {
  width: 100%;
}
label[label-float] > textarea {
  padding-top: 1.4rem; /* keep the floated chip clear of line 1 */
}
label[label-float]:has(> textarea) {
  width: 100%; /* shrink-to-fit parents make the pinned 100% width unresolvable */
}
label[label-float]::before {
  content: attr(text);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding-inline: 0.4rem;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  color: var(--fg-muted);
  border-radius: 0.35rem;
  transition:
    top var(--motion-default, 0.2s),
    transform var(--motion-default, 0.2s),
    background-color var(--motion-default, 0.2s),
    color var(--motion-default, 0.2s);
}
/* textarea: rest near the top so it never drifts as it grows */
label[label-float]:has(> textarea)::before {
  top: 1rem;
  transform: none;
}
/* floated: lift to straddle the field's top edge, scaled down */
label[label-float]:has(> input:focus)::before,
label[label-float]:has(> input:not(:placeholder-shown))::before,
label[label-float]:has(> textarea:focus)::before,
label[label-float]:has(> textarea:not(:placeholder-shown))::before {
  top: 0;
  transform: translateY(-130%) scale(0.85);
  background-color: var(--hairline);
  color: var(--fg);
}

/* ============================================================
   Yellow Fade Technique — highlight newly added elements
   ============================================================ */
[yellow-fade] {
  outline: 4px solid transparent;
  transition: outline-color 0.9s;
  @starting-style { outline-color: yellow; }
}

/* ============================================================
   [reveal] — scroll-driven reveal animation (fade + slide up)
   Triggers when the element scrolls into the viewport.
   Uses CSS animation-timeline: view() — Chrome 115+.
   Non-supporting browsers show the element fully visible.
   ============================================================ */
@keyframes reveal {
  from { opacity: 0; translate: 0 1.5rem; }
}
[reveal] {
  animation: reveal linear both;
  animation-timeline: view(block);
  animation-range: entry 0% entry 90%;
}

/* ============================================================
    Rows — flex row layout shortcut (companion to [stack], line 379)
    ============================================================ */
[rows] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gap, 1ch);
}

/* ============================================================
   [carousel] — CSS scroll-snap carousel
   Horizontal scroll container with snap points on children.
   Add [carousel] to a flex row container.
   Children become snap-aligned slides.
   ============================================================ */
[carousel] {
  display: flex;
  overflow-inline: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--gap, 1rem);
}
[carousel] > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
/* Smooth scrolling when user prefers motion */
@media (prefers-reduced-motion: no-preference) {
  [carousel] { scroll-behavior: smooth; }
}

/* ============================================================
   [filter] — CSS-only content filter (Lo-JS with :has())
   Place checkboxes (or radios) as children of [filter].
   Items with [data-category] attribute are shown/hidden.
   Each filter checkbox's name attribute should match
   the data-category value it controls.
   When no checkbox is checked, all items are visible.

   Example:
     <div filter>
       <input type="checkbox" name="css" id="f-css">
       <label for="f-css">CSS</label>
       <input type="checkbox" name="js" id="f-js">
       <label for="f-js">JS</label>
       <input type="checkbox" name="all" id="f-all" checked hidden>
       <div data-category="css">CSS item</div>
       <div data-category="js">JS item</div>
       <div data-category="css js">Both</div>
     </div>

   Then add category-specific selectors in your own CSS:
     [filter]:has(:checked) > [data-category] { display: none; }
     [filter]:has(#f-all:checked) > [data-category] { display: block; }
     [filter]:has(#f-css:checked) > [data-category~="css"] { display: block; }
     [filter]:has(#f-js:checked) > [data-category~="js"] { display: block; }
   ============================================================ */
[filter] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 0.5rem);
  align-items: center;
}

/* ============================================================
   AutoAnimate — reserved CSS custom properties
   Read by js/autoanimate.js from each [autoanimate] element's
   computed style. Override per element or via Obs.js mode
   classes to control animation duration/easing.
   https://auto-animate.formkit.com
   ============================================================ */
[autoanimate] {
  --aa-duration: 250;
  --aa-easing: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  [autoanimate] { --aa-duration: 0; }
}

/* Obs.js: kill animations on weak devices */
html.has-delivery-mode-lite [autoanimate],
html.has-device-capability-weak [autoanimate],
html.has-conservation-preference-conserve [autoanimate] {
  --aa-duration: 0;
}

/* Obs.js: soften on moderate */
html.has-delivery-mode-cautious [autoanimate],
html.has-device-capability-moderate [autoanimate] {
  --aa-duration: 150;
}

/* ============================================================
   [carousel] nav — CSS-only prev/next + dots (scroll markers)
   Layered on [carousel]. Browsers that support scroll-marker /
   scroll-button render native arrows and dot markers that track
   snap positions automatically; others keep the plain scroll-snap
   carousel. No JS.
   ============================================================ */
[carousel] {
  scroll-marker-group: after;
}
[carousel] > *::scroll-marker {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--fg-muted);
  opacity: 0.4;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
[carousel] > *::scroll-marker:current {
  opacity: 1;
  background-color: var(--fg);
}
[carousel]::scroll-button(left),
[carousel]::scroll-button(right) {
  content: '‹';
  appearance: none;
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--bg-card);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  align-self: center;
  opacity: 0.9;
}
[carousel]::scroll-button(right) {
  content: '›';
}

/* ============================================================
   [lazy-render] — content-visibility lazy rendering
   Skips rendering/layout of below-fold sections until they near
   the viewport. Pairs well with [reveal]. The intrinsic-size hint
   keeps the scrollbar stable before the section renders.
   ============================================================ */
[lazy-render] {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ============================================================
   Print
   @page sets the physical sheet; margins live in the DOM
   (padding), not @page, so on-screen preview matches print.
   Size: `A4 portrait` (switch to `Letter portrait` for US).
   Helpers: [no-print] hides, [print-only] shows in print,
   [page-break-before]/[page-break-after]/[avoid-break] control
   paging, and the ink-friendly cleanup strips shadows/colors.
   ============================================================ */
@page {
  size: A4 portrait;
  margin: 0;
}

[print-only] {
  display: none;
}

@media print {
  html {
    color-scheme: light;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
  }
  [no-print] {
    display: none !important;
  }
  [print-only] {
    display: revert;
  }
  [page-break-before] {
    break-before: page;
  }
  [page-break-after] {
    break-after: page;
  }
  [avoid-break] {
    break-inside: avoid;
  }
}