/* ================================================================
   _ui-v4.css — color · type · layout · components
   ================================================================ */

@layer reset, props, theme, color, typography, composition, layout, components, overrides;


/* ── properties (unlayered — must precede all layers) ──────────── */

@property --_color         { syntax: "<color>";   inherits: true; initial-value: oklch(50% 0.2 270); }
@property --_surface-level { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --_dark          { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --_type          { syntax: "<number>";  inherits: false; initial-value: -999; }
@property --_surface       { syntax: "<integer>"; inherits: false; initial-value: -999; }

@property --_motion        { syntax: "<integer>"; inherits: true; initial-value: 1; }
@property --_bg            { syntax: "<color>";   inherits: true; initial-value: oklch(100% 0 0); }
@property --_type-scale    { syntax: "<number>";  inherits: true; initial-value: 1; }
@property --_space-scale   { syntax: "<number>";  inherits: true; initial-value: 1; }


@property --_depth-a { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --_depth-b { syntax: "<integer>"; inherits: true; initial-value: 0; }
@property --_parity  { syntax: "<integer>"; inherits: true; initial-value: 0; }

/* ── functions (unlayered — definitions, not rules) ────────────── */

@function --surface(--level <number>: 0, --c <color>: var(--_color)) returns <color> {
  --base: calc(95% - var(--_dark) * 75%);
  --step: calc(-2.5% + var(--_dark) * 5.5%);
  --chroma: calc(0.02 + abs(var(--level)) * 0.012);
  result: oklch(from var(--c) clamp(10%, calc(var(--base) + var(--level) * var(--step)), 99%) var(--chroma) h);
}

@function --fill(--level: 0, --c: var(--_color)) returns <color> {
  --base: calc(45% + var(--_dark) * 23%);
  --step: calc(-5% + var(--_dark) * 10%);
  result: oklch(from var(--c) calc(var(--base) + var(--level) * var(--step)) c h);
}

@function --contrast(--amount <number>: 0.85, --bg <color>: var(--_bg)) returns <color> {
  result: oklch(from var(--bg) calc(l + (clamp(0, calc((0.5 - l) * 999), 1) - l) * var(--amount)) c h);
}

@function --alpha(--a <number>: 0.5, --base <color>: var(--_bg)) returns <color> {
  result: oklch(from var(--base) l c h / var(--a));
}

@function --shadow(--level: 1, --c: var(--_color)) {
  result: 0 calc(var(--level) * 1px) calc(var(--level) * 3px) calc(var(--level) * 1px) oklch(from var(--c) 30% calc(c * 0.5) h / calc(0.15 + var(--level) * 0.04));
}

@function --type(--step: 0) returns <length> {
  --min: calc(var(--_type-min) * pow(var(--_type-min-ratio), var(--step)));
  --max: calc(var(--_type-max) * pow(var(--_type-max-ratio), var(--step)));
  result: calc(clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * (100vi - var(--_fluid-min-vp)) / (var(--_fluid-max-vp) - var(--_fluid-min-vp))),
    var(--max)
  ) * var(--_type-scale));
}

@function --space(--step: 0) returns <length> {
  --min: calc(var(--_space-min) * pow(var(--_space-min-ratio), var(--step)));
  --max: calc(var(--_space-max) * pow(var(--_space-max-ratio), var(--step)));
  result: calc(clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) * (100vi - var(--_fluid-min-vp)) / (var(--_fluid-max-vp) - var(--_fluid-min-vp))),
    var(--max)
  ) * var(--_space-scale));
}


@function --hue(--angle <number>: 180, --c <color>: var(--_color)) returns <color> {
  result: oklch(from var(--c) l c calc(h + var(--angle)));
}

@function --mute(--amount <number>: 0.5, --c <color>: var(--_color)) returns <color> {
  result: oklch(from var(--c) l calc(c * (1 - var(--amount))) h);
}

@function --vibrant(--amount <number>: 0.5, --c <color>: var(--_color)) returns <color> {
  result: oklch(from var(--c) l calc(c + (0.4 - c) * var(--amount)) h);
}

/* ── reset ─────────────────────────────────────────────────────── */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; background-repeat: no-repeat; }
  :root { interpolate-size: allow-keywords; }
  html { color-scheme: light dark; line-height: 1.5; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
  :where(body, figure, blockquote, dl, dd, p) { margin-block-end: 0; }
  :where(img, picture) { max-width: 100%; display: block; }
  :where(table, thead, tbody, tfoot, tr) { isolation: isolate; }
  :where(input, button, textarea, select) { font: inherit; }
}


/* ── props ─────────────────────────────────────────────────────── */

@layer props {
  :root {
    --font-system-ui: system-ui, sans-serif;
    --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
    --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
    --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
    --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
    --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
    --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
    --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
    --font-monospace-code: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
    --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
    --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
    --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
    --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
    --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
    --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
  }
}


/* ── theme ─────────────────────────────────────────────────────── */

@layer theme {
  :root {
    --_fluid-min-vp:   22.5rem;
    --_fluid-max-vp:   77.5rem;
    --_type-min:       1.125rem;
    --_type-max:       1.25rem;
    --_type-min-ratio: 1.2;
    --_type-max-ratio: 1.25;
    --_space-min:       0.5rem;
    --_space-max:       0.75rem;
    --_space-min-ratio: 1.4;
    --_space-max-ratio: 1.65;
    --_font-heading:   var(--font-system-ui);
    --_font-body:      var(--font-system-ui);
    --_font-mono:      var(--font-monospace-code);
  }
}


/* ── color ─────────────────────────────────────────────────────── */

@layer color {
  :where(*) {
    --_bg: if(not style(--_surface: -999): --surface(var(--_surface)));
    background: if(not style(--_surface: -999): var(--_bg));
  }
  body { --_surface: 0; }
  :root { --_dark: 0; --_motion: 1; }
  @media (prefers-color-scheme: dark) { :root { --_dark: 1; } }
  html[data-ui-scheme="dark"]  { --_dark: 1; }
  html[data-ui-scheme="light"] { --_dark: 0; }
  @media (prefers-reduced-motion: reduce) { :root { --_motion: 0; } }
  html[data-ui-motion="none"] { --_motion: 0; }
  html[data-ui-density="compact"]     { --_space-scale: 0.75; }
  html[data-ui-density="comfortable"] { --_space-scale: 1.25; }
  html[data-ui-size="small"]          { --_type-scale: 0.85; }
  html[data-ui-size="large"]          { --_type-scale: 1.15; }
  @container style(--_parity: 0) { .surface { --_depth-b: calc(var(--_depth-a) + 1); --_surface: var(--_depth-b); --_parity: 1; } }
  @container style(--_parity: 1) { .surface { --_depth-a: calc(var(--_depth-b) + 1); --_surface: var(--_depth-a); --_parity: 0; } }
}


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

@layer typography {
  :where(*) {
    font-size: if(not style(--_type: -999): --type(var(--_type)));
    letter-spacing: if(not style(--_type: -999): calc(0.01em - var(--_type) * 0.01em));
    line-height: if(not style(--_type: -999): calc(1.5 - var(--_type) * 0.075));
  }

  body { --_type: 0; font-family: var(--_font-body); color: --contrast(0.9); }
  h1, h2, h3, h4, h5, h6 { font-family: var(--_font-heading); color: --fill(0); }
  h1 { --_type: 5; }
  h2 { --_type: 4; }
  h3 { --_type: 3; }
  h4 { --_type: 2; }
  h5 { --_type: 1; }
  small { --_type: -1; }
  .muted { color: --contrast(0.4); }
  code, pre { font-family: var(--_font-mono); font-size: 0.85em; }
  code { padding: 0.1em 0.4em; border-radius: 0.25rem; }
  a { color: --fill(); } a:hover { color: --fill(1); }
  hr { border: none; height: 1px; background: --alpha(0.15, --fill()); }
}


/* ── composition ───────────────────────────────────────────────── */

@layer composition {
  /* containers */
  .stack { display: flex; flex-direction: column; gap: var(--_gap, .75rem); }
  .row   { display: flex; flex-wrap: wrap; gap: var(--_gap, .5rem); }
  .split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--_gap, .5rem); }
  .grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--_col, 15rem), 1fr)); gap: var(--_gap, 1rem); }
  .flank { display: flex; flex-wrap: wrap; gap: var(--_gap, 1rem); }
  .flank > :first-child { flex: 1 1 var(--_flank, auto); }
  .flank > :last-child { flex: 999 1 0; }
  .flank-end { display: flex; flex-wrap: wrap; gap: var(--_gap, 1rem); }
  .flank-end > :first-child { flex: 999 1 0; }
  .flank-end > :last-child { flex: 1 1 var(--_flank, auto); }
  /* modifiers */
  .span { grid-column: 1 / -1; }
  .wrap { flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; }
  /* alignment */
  .ai-start { align-items: flex-start; } .ai-center { align-items: center; } .ai-end { align-items: flex-end; } .ai-baseline { align-items: baseline; } .ai-stretch { align-items: stretch; }
  .jc-start { justify-content: flex-start; } .jc-center { justify-content: center; } .jc-end { justify-content: flex-end; } .jc-between { justify-content: space-between; } .jc-around { justify-content: space-around; } .jc-evenly { justify-content: space-evenly; }
  .as-start { align-self: flex-start; } .as-center { align-self: center; } .as-end { align-self: flex-end; } .as-baseline { align-self: baseline; } .as-stretch { align-self: stretch; }
}


/* ── layout ────────────────────────────────────────────────────── */

@layer layout {
  .layout-doc { display: grid; grid-template-columns: var(--_sidebar, 16rem) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "nav nav" "sidebar main"; min-height: 100dvh; }
  .layout-doc .layout-nav { grid-area: nav; }
  .layout-doc .layout-sidebar { display: block; grid-area: sidebar; --_bg: --surface(-1); background: var(--_bg); padding: --space(1); overflow-y: auto; position: sticky; top: 0; height: 100dvh; border: none; max-height: none; max-width: none; }
  .layout-doc .layout-sidebar::backdrop { display: none; }
  .layout-doc .layout-main { grid-area: main; padding: --space(2); max-width: 72ch; }
  .layout-doc .layout-toc { display: none; }

  .layout-app { display: grid; grid-template-columns: var(--_sidebar, 16rem) 1fr; grid-template-rows: 1fr; grid-template-areas: "sidebar main"; min-height: 100dvh; }
  .layout-app .layout-sidebar { display: block; grid-area: sidebar; --_bg: --surface(-1); background: var(--_bg); padding: --space(1); overflow-y: auto; position: sticky; top: 0; height: 100dvh; border: none; max-height: none; max-width: none; }
  .layout-app .layout-sidebar::backdrop { display: none; }
  .layout-app .layout-main { grid-area: main; padding: --space(2); }

  .layout-stack { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header" "main" "footer"; min-height: 100dvh; }
  .layout-stack .layout-header { grid-area: header; }
  .layout-stack .layout-main { grid-area: main; padding: --space(2); max-width: 72ch; margin-inline: auto; width: 100%; }
  .layout-stack .layout-footer { grid-area: footer; }

  .layout-toggle { display: none; }

  @media (width < 768px) {
    .layout-doc { grid-template-columns: 1fr; grid-template-areas: "nav" "main"; }
    .layout-doc .layout-sidebar { display: revert; position: fixed; inset: 0 auto 0 0; width: var(--_sidebar, 16rem); height: 100dvh; max-height: 100dvh; z-index: 100; margin: 0; transform: translateX(-100%); opacity: 0; transition: transform calc(var(--_motion) * 0.25s) ease, opacity calc(var(--_motion) * 0.25s) ease, display calc(var(--_motion) * 0.25s) allow-discrete, overlay calc(var(--_motion) * 0.25s) allow-discrete; }
    .layout-doc .layout-sidebar[open] { transform: translateX(0); opacity: 1; }
    .layout-doc .layout-sidebar::backdrop { display: revert; background: oklch(0% 0 0 / 0.4); opacity: 0; transition: opacity calc(var(--_motion) * 0.25s) ease, display calc(var(--_motion) * 0.25s) allow-discrete, overlay calc(var(--_motion) * 0.25s) allow-discrete; }
    .layout-doc .layout-sidebar[open]::backdrop { opacity: 1; }
    .layout-doc .layout-main { padding: --space(1); }
    .layout-doc .layout-toggle { display: inline-flex; }

    .layout-app { grid-template-columns: 1fr; grid-template-areas: "main"; }
    .layout-app .layout-sidebar { display: revert; position: fixed; inset: 0 auto 0 0; width: var(--_sidebar, 16rem); height: 100dvh; max-height: 100dvh; z-index: 100; margin: 0; transform: translateX(-100%); opacity: 0; transition: transform calc(var(--_motion) * 0.25s) ease, opacity calc(var(--_motion) * 0.25s) ease, display calc(var(--_motion) * 0.25s) allow-discrete, overlay calc(var(--_motion) * 0.25s) allow-discrete; }
    .layout-app .layout-sidebar[open] { transform: translateX(0); opacity: 1; }
    .layout-app .layout-sidebar::backdrop { display: revert; background: oklch(0% 0 0 / 0.4); opacity: 0; transition: opacity calc(var(--_motion) * 0.25s) ease, display calc(var(--_motion) * 0.25s) allow-discrete, overlay calc(var(--_motion) * 0.25s) allow-discrete; }
    .layout-app .layout-sidebar[open]::backdrop { opacity: 1; }
    .layout-app .layout-toggle { display: inline-flex; }
  }

  @media (width >= 1024px) {
    .layout-doc { grid-template-columns: var(--_sidebar, 16rem) 1fr var(--_toc, 14ch); grid-template-areas: "nav nav nav" "sidebar main toc"; }
    .layout-doc .layout-toc { display: block; grid-area: toc; padding: --space(1); position: sticky; top: 0; height: 100dvh; overflow-y: auto; font-size: 0.8em; color: --contrast(0.4); }
  }
}


/* ── components ────────────────────────────────────────────────── */

@layer components {
  .card        { --_surface-level: calc(var(--_surface-level) + 1); --_bg: --surface(var(--_surface-level)); background: var(--_bg); }
  .code-editor { --_surface-level: calc(var(--_surface-level) - 1); --_bg: --surface(var(--_surface-level)); background: var(--_bg); }
  .card        { padding: 1.25rem; border: 1px solid --alpha(0.15, --fill()); border-radius: 0.5rem; }

  button {
    --_bg: --fill();
    --_border: --alpha(0.2, --contrast(0.3));
    --_shadow: --shadow(1);
    background: var(--_bg);
    color: --contrast();
    border: 1px solid var(--_border);
    border-radius: 0.375rem;
    padding: 0.4rem 1rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--_shadow);
    transition: all calc(var(--_motion) * 0.15s) ease;
  }
  button:hover { --_bg: --fill(1); --_shadow: --shadow(2); }
  button:active { --_bg: --fill(2); --_shadow: none; transform: translateY(calc(var(--_motion) * 1px)); }

  input[type="color"] { width: 2.5rem; height: 2rem; border: 1px solid --alpha(0.25, --fill()); border-radius: 0.25rem; cursor: pointer; padding: 2px; }
  input[type="range"] { accent-color: --fill(); }

  [popover].popover { position: fixed; inset: auto; margin: 0; border: none; min-width: clamp(10rem, 40vw, 18rem); max-width: min(90vw, 24rem); max-height: 80vh; overflow: auto; --_bg: --surface(1); background: var(--_bg); color: --contrast(0.7); border-radius: 0.5rem; box-shadow: --shadow(5); padding: --space(1); opacity: 1; transform: scale(1); position-area: self-block-start self-inline-end; position-try-order: most-block-size; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; position-visibility: anchors-visible; transition: opacity calc(var(--_motion) * 0.18s) ease-out, transform calc(var(--_motion) * 0.18s) ease-out, display calc(var(--_motion) * 0.18s) allow-discrete, overlay calc(var(--_motion) * 0.18s) allow-discrete; }
  [popover].popover:not(:popover-open) { opacity: 0; transform: scale(0.95); }
  [popover].popover.below-start { position-area: self-block-end self-inline-start; }
  [popover].popover.below-end { position-area: self-block-end self-inline-end; }
  [popover].popover.above-start { position-area: self-block-start self-inline-start; }
  [popover].popover.above-end { position-area: self-block-start self-inline-end; }

  .fab { position: fixed; bottom: --space(2); right: --space(2); z-index: 50; width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; anchor-name: --fab; }

  /* syntax highlighting — CSS Custom Highlight API */
  ::highlight(css-comment)     { color: oklch(from var(--_color) calc(45% + var(--_dark) * 20%) 0.03 h); }
  ::highlight(css-punctuation) { color: oklch(from var(--_color) calc(55% + var(--_dark) * 15%) 0.04 h); }
  ::highlight(css-property)    { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.18 calc(h + 180)); }
  ::highlight(css-value)       { color: oklch(from var(--_color) calc(60% + var(--_dark) * 15%) 0.12 calc(h + 60)); }
  ::highlight(css-number)      { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.16 calc(h + 120)); }
  ::highlight(css-unit)        { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.16 calc(h + 120)); }
  ::highlight(css-string)      { color: oklch(from var(--_color) calc(60% + var(--_dark) * 15%) 0.14 calc(h + 90)); }
  ::highlight(css-var-name)    { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.2 h); }
  ::highlight(css-selector)    { color: oklch(from var(--_color) calc(70% + var(--_dark) * 5%) 0.2 calc(h + 240)); }
  ::highlight(css-atrule)      { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.22 calc(h - 60)); }
  ::highlight(html-comment)    { color: oklch(from var(--_color) calc(45% + var(--_dark) * 20%) 0.03 h); }
  ::highlight(html-bracket)    { color: oklch(from var(--_color) calc(55% + var(--_dark) * 15%) 0.04 h); }
  ::highlight(html-tag)        { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.22 calc(h - 60)); }
  ::highlight(html-attribute)  { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.18 calc(h + 180)); }
  ::highlight(html-value)      { color: oklch(from var(--_color) calc(60% + var(--_dark) * 15%) 0.14 calc(h + 90)); }
  ::highlight(html-entity)     { color: oklch(from var(--_color) calc(65% + var(--_dark) * 10%) 0.16 calc(h + 120)); }
  ::highlight(html-doctype)    { color: oklch(from var(--_color) calc(55% + var(--_dark) * 15%) 0.1 calc(h + 30)); }

  /* code editor — highlighted textarea overlay */
  .code-editor { display: flex; --_bg: --surface(-1); background: var(--_bg); border-radius: 0.5rem; border: 1px solid --alpha(0.15, --fill()); min-height: 8rem; overflow: hidden; }
  .code-editor-gutter { margin: 0; padding: --space(1) --space(0) --space(1) --space(1); font-family: var(--_font-mono); font-size: 0.8em; line-height: 1.6; white-space: pre; color: --contrast(0.2); text-align: right; user-select: none; pointer-events: none; overflow: hidden; min-width: 2.5em; }
  .code-editor-wrap { position: relative; flex: 1; overflow: hidden; }
  .code-editor-wrap pre { margin: 0; padding: --space(1); font-family: var(--_font-mono); font-size: 0.8em; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: --contrast(0.6); pointer-events: none; }
  .code-editor-input { position: absolute; inset: 0; margin: 0; padding: --space(1); font-family: var(--_font-mono); font-size: 0.8em; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; background: transparent; color: transparent; caret-color: --fill(); border: none; outline: none; resize: none; overflow: auto; }
  .code-editor:focus-within { border-color: --alpha(0.4, --fill()); box-shadow: 0 0 0 2px --alpha(0.1, --fill()); }
}



/* ── overrides ─────────────────────────────────────────────────── */

@layer overrides {
  .mobile, .tablet, .desktop { display: none; }
  @media (width < 768px)           { .mobile  { display: revert-layer; } }
  @media (768px <= width < 1024px) { .tablet  { display: revert-layer; } }
  @media (width >= 1024px)         { .desktop { display: revert-layer; } }
  @media print                     { .np      { display: none; } }
  .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}