/**
 * asw.css — Agentic Semantic Web
 * A standalone CSS framework for agent-generated web content.
 *
 * Semantic HTML + data-attributes. Zero classes required.
 * Single file. Builds on Open Props token foundation.
 *
 * Lineage: Open Props (tokens), Pico CSS (semantic HTML patterns),
 *          Charts.css (data-attribute vocabulary pattern).
 * License: MIT
 */

/* ── Open Props: props.colors.css ─────────────────────────────── */
:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #16191d;
  --gray-11: #0d0f12;
  --gray-12: #030507;
  --stone-0: #f8fafb;
  --stone-1: #f2f4f6;
  --stone-2: #ebedef;
  --stone-3: #e0e4e5;
  --stone-4: #d1d6d8;
  --stone-5: #b1b6b9;
  --stone-6: #979b9d;
  --stone-7: #7e8282;
  --stone-8: #666968;
  --stone-9: #50514f;
  --stone-10: #3a3a37;
  --stone-11: #252521;
  --stone-12: #121210;
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --red-10: #b02525;
  --red-11: #962020;
  --red-12: #7d1a1a;
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
  --pink-10: #8c1941;
  --pink-11: #731536;
  --pink-12: #59102a;
  --purple-0: #f8f0fc;
  --purple-1: #f3d9fa;
  --purple-2: #eebefa;
  --purple-3: #e599f7;
  --purple-4: #da77f2;
  --purple-5: #cc5de8;
  --purple-6: #be4bdb;
  --purple-7: #ae3ec9;
  --purple-8: #9c36b5;
  --purple-9: #862e9c;
  --purple-10: #702682;
  --purple-11: #5a1e69;
  --purple-12: #44174f;
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
  --violet-10: #5235ab;
  --violet-11: #462d91;
  --violet-12: #3a2578;
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
  --indigo-10: #2f44ad;
  --indigo-11: #283a94;
  --indigo-12: #21307a;
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --blue-10: #145591;
  --blue-11: #114678;
  --blue-12: #0d375e;
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
  --cyan-10: #095c6b;
  --cyan-11: #074652;
  --cyan-12: #053038;
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
  --teal-10: #066649;
  --teal-11: #054d37;
  --teal-12: #033325;
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --green-10: #237032;
  --green-11: #1b5727;
  --green-12: #133d1b;
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
  --lime-10: #4c7a0b;
  --lime-11: #3c6109;
  --lime-12: #2c4706;
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --yellow-10: #b35c00;
  --yellow-11: #804200;
  --yellow-12: #663500;
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
  --orange-10: #bf400d;
  --orange-11: #99330b;
  --orange-12: #802b09;
  --choco-0: #fff8dc;
  --choco-1: #fce1bc;
  --choco-2: #f7ca9e;
  --choco-3: #f1b280;
  --choco-4: #e99b62;
  --choco-5: #df8545;
  --choco-6: #d46e25;
  --choco-7: #bd5f1b;
  --choco-8: #a45117;
  --choco-9: #8a4513;
  --choco-10: #703a13;
  --choco-11: #572f12;
  --choco-12: #3d210d;
  --brown-0: #faf4eb;
  --brown-1: #ede0d1;
  --brown-2: #e0cab7;
  --brown-3: #d3b79e;
  --brown-4: #c5a285;
  --brown-5: #b78f6d;
  --brown-6: #a87c56;
  --brown-7: #956b47;
  --brown-8: #825b3a;
  --brown-9: #6f4b2d;
  --brown-10: #5e3a21;
  --brown-11: #4e2b15;
  --brown-12: #422412;
  --sand-0: #f8fafb;
  --sand-1: #e6e4dc;
  --sand-2: #d5cfbd;
  --sand-3: #c2b9a0;
  --sand-4: #aea58c;
  --sand-5: #9a9178;
  --sand-6: #867c65;
  --sand-7: #736a53;
  --sand-8: #5f5746;
  --sand-9: #4b4639;
  --sand-10: #38352d;
  --sand-11: #252521;
  --sand-12: #121210;
  --camo-0: #f9fbe7;
  --camo-1: #e8ed9c;
  --camo-2: #d2df4e;
  --camo-3: #c2ce34;
  --camo-4: #b5bb2e;
  --camo-5: #a7a827;
  --camo-6: #999621;
  --camo-7: #8c851c;
  --camo-8: #7e7416;
  --camo-9: #6d6414;
  --camo-10: #5d5411;
  --camo-11: #4d460e;
  --camo-12: #36300a;
  --jungle-0: #ecfeb0;
  --jungle-1: #def39a;
  --jungle-2: #d0e884;
  --jungle-3: #c2dd6e;
  --jungle-4: #b5d15b;
  --jungle-5: #a8c648;
  --jungle-6: #9bbb36;
  --jungle-7: #8fb024;
  --jungle-8: #84a513;
  --jungle-9: #7a9908;
  --jungle-10: #658006;
  --jungle-11: #516605;
  --jungle-12: #3d4d04;
}

/* ── Open Props: props.gray-oklch.css ─────────────────────────────── */
:where(*) {
  --gray-0: oklch(99% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-1: oklch(95% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-2: oklch(88% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-3: oklch(80% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-4: oklch(74% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-5: oklch(68% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-6: oklch(63% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-7: oklch(58% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-8: oklch(53% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-9: oklch(49% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-10: oklch(43% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-11: oklch(37% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-12: oklch(31% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-13: oklch(25% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-14: oklch(18% var(--gray-chroma, none) var(--gray-hue, none));
  --gray-15: oklch(10% var(--gray-chroma, none) var(--gray-hue, none));
}

/* ── Open Props: props.sizes.css ─────────────────────────────── */
:where(html) {
  --size-000: -.5rem;
  --size-00: -.25rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;
  --size-9: 4rem;
  --size-10: 5rem;
  --size-11: 7.5rem;
  --size-12: 10rem;
  --size-13: 15rem;
  --size-14: 20rem;
  --size-15: 30rem;
  --size-px-000: -8px;
  --size-px-00: -4px;
  --size-px-1: 4px;
  --size-px-2: 8px;
  --size-px-3: 16px;
  --size-px-4: 20px;
  --size-px-5: 24px;
  --size-px-6: 28px;
  --size-px-7: 32px;
  --size-px-8: 48px;
  --size-px-9: 64px;
  --size-px-10: 80px;
  --size-px-11: 120px;
  --size-px-12: 160px;
  --size-px-13: 240px;
  --size-px-14: 320px;
  --size-px-15: 480px;
  --size-fluid-1: clamp(.5rem, 1vw, 1rem);
  --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
  --size-fluid-4: clamp(2rem, 4vw, 3rem);
  --size-fluid-5: clamp(4rem, 5vw, 5rem);
  --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
  --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
  --size-fluid-8: clamp(10rem, 20vw, 15rem);
  --size-fluid-9: clamp(15rem, 30vw, 20rem);
  --size-fluid-10: clamp(20rem, 40vw, 30rem);
  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-header-1: 20ch;
  --size-header-2: 25ch;
  --size-header-3: 35ch;
  --size-xxs: 240px;
  --size-xs: 360px;
  --size-sm: 480px;
  --size-md: 768px;
  --size-lg: 1024px;
  --size-xl: 1440px;
  --size-xxl: 1920px;
  --size-relative-000: -.5ch;
  --size-relative-00: -.25ch;
  --size-relative-1: .25ch;
  --size-relative-2: .5ch;
  --size-relative-3: 1ch;
  --size-relative-4: 1.25ch;
  --size-relative-5: 1.5ch;
  --size-relative-6: 1.75ch;
  --size-relative-7: 2ch;
  --size-relative-8: 3ch;
  --size-relative-9: 4ch;
  --size-relative-10: 5ch;
  --size-relative-11: 7.5ch;
  --size-relative-12: 10ch;
  --size-relative-13: 15ch;
  --size-relative-14: 20ch;
  --size-relative-15: 30ch;
}

/* ── Open Props: props.fonts.css ─────────────────────────────── */
:where(html) {
  --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;
  --font-sans: var(--font-system-ui);
  --font-serif: ui-serif, serif;
  --font-mono: var(--font-monospace-code);
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;
  --font-size-00: .5rem;
  --font-size-0: .75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
}

/* ── Open Props: props.borders.css ─────────────────────────────── */
:where(html) {
  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --border-size-5: 25px;
  --radius-1: 2px;
  --radius-2: 5px;
  --radius-3: 1rem;
  --radius-4: 2rem;
  --radius-5: 4rem;
  --radius-6: 8rem;
  --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
  --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
  --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
  --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
  --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
  --radius-round: 1e5px;
  --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
  --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
  --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
  --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
  --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
  --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
  --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
  --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
  --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
  --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
  --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}

/* ── Open Props: props.shadows.css ─────────────────────────────── */
@import 'props.media.css';

:where(html) {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --shadow-strength-3: calc(var(--shadow-strength) + 2%);
  --shadow-strength-4: calc(var(--shadow-strength) + 3%);
  --shadow-strength-5: calc(var(--shadow-strength) + 4%);
  --shadow-strength-6: calc(var(--shadow-strength) + 5%);
  --shadow-strength-7: calc(var(--shadow-strength) + 6%);
  --shadow-strength-8: calc(var(--shadow-strength) + 7%);
  --shadow-strength-10: calc(var(--shadow-strength) + 9%);
  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-strength-10));
  --shadow-2: 
    0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6));
  --shadow-3: 
    0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --shadow-4: 
    0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7));
  --shadow-5: 
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 2px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 10px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 20px 20px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 40px 40px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --shadow-6: 
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
    0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
    0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
    0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
    0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)),
    0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8));
  --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / var(--shadow-strength-10));
  --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
  --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
  --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
  --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
}

@media (--OSdark) {
  :where(html) {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
  }
}
/* ── Open Props: props.easing.css ─────────────────────────────── */
:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
  --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
  --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
  --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
  --ease-spring-1: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001
  );
  --ease-spring-2: linear(
    0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
    1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
    0.999 61.6%, 0.995 71.2%, 1
  );
  --ease-spring-3: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1
  );
  --ease-spring-4: linear(
    0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
    1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
    0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
    0.998 78.9%, 1
  );
  --ease-spring-5: linear(
    0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
    1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
    0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
    1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
  );
  --ease-bounce-1: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
    0.885, 0.895, 0.908 89.7%, 0.946, 1
  );
  --ease-bounce-2: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
    1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
    0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
    0.973, 1
  );
  --ease-bounce-3: linear(
    0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
    1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
    0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
    0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
    0.96, 0.968, 0.981, 1
  );
  --ease-bounce-4: linear(
    0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
    0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
    0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
    0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
  );
  --ease-bounce-5: linear(
    0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
    0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
    0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
    0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
    0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
  );
  --ease-circ-in: cubic-bezier(.6,.04,.98,.335);
  --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
  --ease-circ-out: cubic-bezier(.075,.82,.165,1);
  --ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
  --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
  --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
  --ease-expo-in: cubic-bezier(.95,.05,.795,.035);
  --ease-expo-in-out: cubic-bezier(1,0,0,1);
  --ease-expo-out: cubic-bezier(.19,1,.22,1);
  --ease-quad-in: cubic-bezier(.55,.085,.68,.53);
  --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
  --ease-quad-out: cubic-bezier(.25,.46,.45,.94);
  --ease-quart-in: cubic-bezier(.895,.03,.685,.22);
  --ease-quart-in-out: cubic-bezier(.77,0,.175,1);
  --ease-quart-out: cubic-bezier(.165,.84,.44,1);
  --ease-quint-in: cubic-bezier(.755,.05,.855,.06);
  --ease-quint-in-out: cubic-bezier(.86,0,.07,1);
  --ease-quint-out: cubic-bezier(.23,1,.32,1);
  --ease-sine-in: cubic-bezier(.47,0,.745,.715);
  --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
  --ease-sine-out: cubic-bezier(.39,.575,.565,1);
}

/* ── Open Props: props.animations.css ─────────────────────────────── */
@import 'props.media.css';

:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
}

@keyframes fade-in {
  to { opacity: 1 }
}
@keyframes fade-in-bloom {
  0% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
100% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes fade-out {
  to { opacity: 0 }
}
@keyframes fade-out-bloom {
100% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
  0% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes scale-up {
  to { transform: scale(1.25) }
}
@keyframes scale-down {
  to { transform: scale(.75) }
}
@keyframes slide-out-up {
  to { transform: translateY(-100%) }
}
@keyframes slide-out-down {
  to { transform: translateY(100%) }
}
@keyframes slide-out-right {
  to { transform: translateX(100%) }
}
@keyframes slide-out-left {
  to { transform: translateX(-100%) }
}
@keyframes slide-in-up {
  from { transform: translateY(100%) }
}
@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}
@keyframes slide-in-right {
  from { transform: translateX(-100%) }
}
@keyframes slide-in-left {
  from { transform: translateX(100%) }
}
@keyframes shake-x {
  0%, 100% { transform: translateX(0%) }
  20% { transform: translateX(-5%) }
  40% { transform: translateX(5%) }
  60% { transform: translateX(-5%) }
  80% { transform: translateX(5%) }
}
@keyframes shake-y {
  0%, 100% { transform: translateY(0%) }
  20% { transform: translateY(-5%) }
  40% { transform: translateY(5%) }
  60% { transform: translateY(-5%) }
  80% { transform: translateY(5%) }
}
@keyframes shake-z {
  0%, 100% { transform: rotate(0deg) }
  20% { transform: rotate(-2deg) }
  40% { transform: rotate(2deg) }
  60% { transform: rotate(-2deg) }
  80% { transform: rotate(2deg) }
}
@keyframes spin {
  to { transform: rotate(1turn) }
}
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .5
  }
}
@keyframes float {
  50% { transform: translateY(-25%) }
}
@keyframes bounce {
  25% { transform: translateY(-20%) }
  40% { transform: translateY(-3%) }
  0%, 60%, 100% { transform: translateY(0) }
}
@keyframes pulse {
  50% { transform: scale(.9,.9) }
}
@media (--OSdark) {
  @keyframes fade-in-bloom {
    0% { opacity: 0; filter: brightness(1) blur(20px) }
   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
  100% { opacity: 1; filter: brightness(1) blur(0) }
  }
}
@media (--OSdark) {
  @keyframes fade-out-bloom {
  100% { opacity: 0; filter: brightness(1) blur(20px) }
   10% { opacity: 1; filter: brightness(0.5) blur(10px) }
    0% { opacity: 1; filter: brightness(1) blur(0) }
  }
}
/* ── Open Props: props.gradients.css ─────────────────────────────── */
:where(html) {
  --gradient-space: ;
  --gradient-1: linear-gradient(to bottom right var(--gradient-space), #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
  --gradient-2: linear-gradient(to bottom right var(--gradient-space), #48005c, #8300e2, #a269ff);
  --gradient-3: 
    radial-gradient(
      circle at top right var(--gradient-space), 
      hsl(180 100% 50%), hsl(180 100% 50% / 0%)
    ),
    radial-gradient(
      circle at bottom left var(--gradient-space), 
      hsl(328 100% 54%), hsl(328 100% 54% / 0%)
    );
  --gradient-4: linear-gradient(to bottom right var(--gradient-space), #00F5A0, #00D9F5);
  --gradient-5: conic-gradient(from -270deg at 75% 110% var(--gradient-space), fuchsia, floralwhite);
  --gradient-6: conic-gradient(from -90deg at top left var(--gradient-space), black, white);
  --gradient-7: linear-gradient(to bottom right var(--gradient-space), #72C6EF, #004E8F);
  --gradient-8: conic-gradient(from 90deg at 50% 0% var(--gradient-space), #111, 50%, #222, #111);
  --gradient-9: conic-gradient(from .5turn at bottom center var(--gradient-space), lightblue, white);
  --gradient-10: conic-gradient(from 90deg at 40% -25% var(--gradient-space), #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
  --gradient-11: conic-gradient(at bottom left var(--gradient-space), deeppink, cyan);
  --gradient-12: conic-gradient(from 90deg at 25% -10% var(--gradient-space), #ff4500, #d3f340, #7bee85, #afeeee, #7bee85);
  --gradient-13: radial-gradient(circle at 50% 200% var(--gradient-space), #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7);
  --gradient-14: conic-gradient(at top right var(--gradient-space), lime, cyan);
  --gradient-15: linear-gradient(to bottom right var(--gradient-space), #c7d2fe, #fecaca, #fef3c7);
  --gradient-16: radial-gradient(circle at 50% -250% var(--gradient-space), #374151, #111827, #000);
  --gradient-17: conic-gradient(from -90deg at 50% -25% var(--gradient-space), blue, blueviolet);
  --gradient-18: 
    linear-gradient(0deg var(--gradient-space),   hsla(0   100% 50% / 80%), hsla(0   100% 50% / 0) 75%),
    linear-gradient(60deg var(--gradient-space),  hsla(60  100% 50% / 80%), hsla(60  100% 50% / 0) 75%),
    linear-gradient(120deg var(--gradient-space), hsla(120 100% 50% / 80%), hsla(120 100% 50% / 0) 75%),
    linear-gradient(180deg var(--gradient-space), hsla(180 100% 50% / 80%), hsla(180 100% 50% / 0) 75%),
    linear-gradient(240deg var(--gradient-space), hsla(240 100% 50% / 80%), hsla(240 100% 50% / 0) 75%),
    linear-gradient(300deg var(--gradient-space), hsla(300 100% 50% / 80%), hsla(300 100% 50% / 0) 75%)
  ;
  --gradient-19: linear-gradient(to bottom right var(--gradient-space), #ffe259, #ffa751);
  --gradient-20: conic-gradient(from -135deg at -10% center var(--gradient-space), #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4);
  --gradient-21: conic-gradient(from -90deg at 25% 115% var(--gradient-space), #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, #0000ff, #0000ff, #0000ff, #0000ff);
  --gradient-22: linear-gradient(to bottom right var(--gradient-space), #acb6e5, #86fde8);
  --gradient-23: linear-gradient(to bottom right var(--gradient-space), #536976, #292E49);
  --gradient-24: conic-gradient(from .5turn at 0% 0% var(--gradient-space), #00c476, 10%, #82b0ff, 90%, #00c476);
  --gradient-25: conic-gradient(at 125% 50% var(--gradient-space), #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7);
  --gradient-26: linear-gradient(to bottom right var(--gradient-space), #9796f0, #fbc7d4);
  --gradient-27: conic-gradient(from .5turn at bottom left var(--gradient-space), deeppink, rebeccapurple);
  --gradient-28: conic-gradient(from -90deg at 50% 105% var(--gradient-space), white, orchid);
  --gradient-29: 
    radial-gradient(
      circle at top right var(--gradient-space), 
      hsl(250 100% 85%), hsl(250 100% 85% / 0%)
    ),
    radial-gradient(
      circle at bottom left var(--gradient-space), 
      hsl(220 90% 75%), hsl(220 90% 75% / 0%)
    );
  --gradient-30: radial-gradient(
      circle at top right var(--gradient-space), 
      hsl(150 100% 50%), hsl(150 100% 50% / 0%)
    ),
    radial-gradient(
      circle at bottom left var(--gradient-space), 
      hsl(150 100% 84%), hsl(150 100% 84% / 0%)
    );
  --noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  --noise-filter-1: contrast(300%) brightness(100%);
  --noise-filter-2: contrast(200%) brightness(150%);
  --noise-filter-3: contrast(200%) brightness(250%);
  --noise-filter-4: contrast(200%) brightness(500%);
  --noise-filter-5: contrast(200%) brightness(1000%);
}

@supports (background: linear-gradient(to right in oklab, #000, #fff)) {
  :where(html) {
    --gradient-space: in oklab;
  }
}
/* ── Layer: 00-reset ─────────────────────────────────── */
/**
 * 00-reset.css
 * CSS reset and normalization
 * Ported from: Pico CSS v2.1.1
 */

/* Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

/* Document */
:where(:root) {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  tab-size: 4;
}

/* Root font-size — 100% default, responsive scaling in 01-tokens.css */
html {
  font-size: 100%;
}

/* Body */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--text-base);   /* 1rem — inherits html responsive scaling */
  font-family: var(--font-ui);
  background-color: var(--surface);
  color: var(--text);
}

/* Prose font — same neo-grotesque stack, consistent across all contexts */
/* article and [data-layout="prose"] inherit body font — no override needed */

/* Main */
main {
  display: block;
}

/* Nested lists */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/* ── Layer: 01-tokens ─────────────────────────────────── */
/**
 * 01-tokens.css
 * ASW semantic layer — builds on Open Props
 *
 * Open Props (included by build.sh) provides the base scales:
 *   --gray-0…15, --green-0…12, --blue-0…12, --red-0…12, --yellow-0…12
 *   --size-1…15, --font-size-0…8, --font-weight-1…9
 *   --font-lineheight-0…5, --radius-1…6, --shadow-1…6
 *   --ease-1…5, --ease-spring-1…5, --ease-bounce-1…5
 *   --gradient-1…30, --animation-*, @keyframes
 *
 * This file defines only what Open Props doesn't:
 *   1. Surface / text / accent — semantic aliases (override to theme)
 *   2. Font stack aliases — prose, heading, ui (map to OP font stacks)
 *   3. Agent-native tokens — task, callout, session, wikilink, redacted
 *   4. A handful of precise values without direct OP equivalents
 *
 * To theme ASW:
 *   Override semantic aliases at :root in your own CSS.
 *   Use Open Props base tokens (--gray-*, --green-*, --size-*) as values.
 *
 * Lineage: absorbed patterns from Pico CSS, Open Props, Charts.css.
 */

/* ══════════════════════════════════════════════════════════════════
   DARK THEME (default)
   Using Open Props oklch gray scale — perceptually uniform steps.
   Set --gray-hue to tint all surfaces. Example:
     Trentuna:     --gray-hue: 45   (warm amber tint)
     vigilio-garden: --gray-hue: 150  (subtle green tint)
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Surfaces ──────────────────────────────────────────────────── */

  --surface:        var(--gray-15);   /* deepest background (oklch 10%) */
  --surface-1:      var(--gray-14);   /* cards, sidebars       (oklch 18%) */
  --surface-2:      var(--gray-13);   /* hover, raised elements (oklch 25%) */
  --surface-card:   var(--surface-1);
  --surface-hover:  var(--surface-2);

  /* ── Text ──────────────────────────────────────────────────────── */

  --text:           var(--gray-1);    /* primary   (95% lightness) */
  --text-2:         var(--gray-3);    /* secondary (80%) */
  --text-3:         var(--gray-5);    /* muted     (68%) */
  --text-dim:       var(--gray-7);    /* dim       (58%) */

  /* ── Accent ────────────────────────────────────────────────────── */

  --accent:              var(--green-5);
  --accent-hover:        var(--green-4);
  --on-accent:           var(--gray-15);
  --accent-focus:        rgba(34, 197, 94, 0.35);
  --accent-subtle:       rgba(34, 197, 94, 0.10);
  --accent-underline:    rgba(34, 197, 94, 0.45);
  --accent-hover-underline: rgba(34, 197, 94, 0.55);

  /* ── Links ─────────────────────────────────────────────────────── */
  /* Blue — web convention. Accent (green) reserved for UI chrome.   */

  --link:                  var(--blue-5);            /* #339af0 */
  --link-hover:            var(--blue-4);            /* #4dabf7 */
  --link-underline:        rgba(51, 154, 240, 0.4);
  --link-hover-underline:  rgba(51, 154, 240, 0.55);
  --link-focus:            rgba(51, 154, 240, 0.35);

  /* Secondary accents — reachable as named aliases */
  --accent-blue:    var(--blue-5);
  --accent-red:     var(--red-7);
  --accent-orange:  var(--yellow-6);

  /* ── Border ────────────────────────────────────────────────────── */

  --border:         var(--gray-11);   /* 37% lightness — visible against 10% bg */
  --border-subtle:  var(--gray-12);   /* 31% lightness — very subtle */
  --border-width:   1px;
  --outline-width:  2px;

  /* ── Font stacks ───────────────────────────────────────────────── */
  /* Open Props named stacks — no web font loading required.         */
  /* --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova  */
  /* --font-monospace-code: Dank Mono, Operator Mono, Inconsolata...  */

  --font-prose:    var(--font-neo-grotesque);
  --font-heading:  var(--font-neo-grotesque);
  --font-ui:       var(--font-neo-grotesque);
  /* --font-mono: var(--font-monospace-code) — provided directly by Open Props */

  /* ── Typography scale ─────────────────────────────────────────── */
  /* Open Props provides: --font-size-0 (.75rem) through --font-size-8 (3.5rem) */
  /* We define only the one gap: 0.875rem has no OP equivalent        */

  --text-xs:    var(--font-size-0);   /* 0.75rem  — badges, fine print */
  --text-sm:    0.875rem;             /* 0.875rem — metadata, captions (no OP match) */
  --text-base:  var(--font-size-1);   /* 1rem     — body */
  --text-2xl:   var(--font-size-4);   /* 1.5rem   — subheadings */
  --text-3xl:   var(--font-size-5);   /* 2rem     — section headings */

  /* ── Heading scale ─────────────────────────────────────────────── */

  --h1-size:   1.875rem;
  --h2-size:   1.5rem;
  --h3-size:   1.25rem;
  --h4-size:   1.0625rem;
  --h5-size:   0.9375rem;
  --h6-size:   0.8125rem;

  --h1-weight: var(--font-weight-4);   /* 400 */
  --h2-weight: var(--font-weight-4);
  --h3-weight: var(--font-weight-4);
  --h4-weight: var(--font-weight-5);   /* 500 */
  --h5-weight: var(--font-weight-6);   /* 600 */
  --h6-weight: var(--font-weight-6);

  --h1-color: var(--text);
  --h2-color: var(--text);
  --h3-color: var(--text);
  --h4-color: var(--text-2);
  --h5-color: var(--text-2);
  --h6-color: var(--text-3);

  /* ── Spacing aliases ─────────────────────────────────────────────
     Open Props sizes: --size-1 (.25rem), --size-2 (.5rem), --size-3 (1rem),
     --size-5 (1.5rem), --size-7 (2rem), --size-9 (4rem)
     We alias these with semantic names AND define --space-3 (0.75rem gap)
     ──────────────────────────────────────────────────────────────── */

  --space-1:  var(--size-1);    /* 0.25rem */
  --space-2:  var(--size-2);    /* 0.50rem */
  --space-3:  0.75rem;          /* 0.75rem — no OP equivalent */
  --space-4:  var(--size-3);    /* 1.00rem */
  --space-5:  var(--size-5);    /* 1.50rem */
  --space-6:  var(--size-7);    /* 2.00rem */
  --space-8:  var(--size-9);    /* 4.00rem */

  /* ── Rhythm ─────────────────────────────────────────────────────── */

  --type-space:      var(--space-4);    /* paragraph / element spacing */
  --type-space-top:  var(--space-5);    /* heading top margin after content */
  --leading:         1.6;
  --leading-tight:   var(--font-lineheight-1);   /* 1.25 */

  /* ── Radius ─────────────────────────────────────────────────────── */
  /* Open Props: --radius-1 (2px), --radius-2 (5px), --radius-3 (1rem) */

  --radius-sm:  var(--radius-1);   /* 2px */
  --radius-md:  4px;               /* between OP radius-1 and radius-2 */

  /* ── Easing ─────────────────────────────────────────────────────── */
  /* Open Props provides rich curves — we alias the most-used ones */

  --ease:       0.2s var(--ease-3);
  --ease-fast:  0.1s var(--ease-2);

  /* ── Inline element tokens ─────────────────────────────────────── */

  --selection:   rgba(96, 165, 250, 0.25);
  --mark-bg:     rgba(245, 158, 11, 0.2);
  --mark-color:  var(--accent-orange);
  --kbd-bg:      var(--text);
  --kbd-color:   var(--surface);
  --code-color:  var(--text-2);
  --table-stripe: rgba(38, 38, 38, 0.5);

  /* ── Form tokens ─────────────────────────────────────────────────── */

  --input-bg:         var(--surface-1);
  --input-border:     var(--border);
  --input-active-bg:  var(--surface);
  --input-selected:   rgba(34, 197, 94, 0.2);
  --input-px:         var(--space-4);
  --input-py:         var(--space-3);
  --disabled-opacity: 0.5;

  /* ── State colors ─────────────────────────────────────────────────── */

  --ok:           var(--green-5);
  --warn:         var(--yellow-5);
  --error:        var(--red-7);
  --info:         var(--blue-5);
  --blocked:      var(--gray-5);

  --error-active: var(--red-9);
  --error-focus:  rgba(239, 68, 68, 0.375);

  /* ── Component tokens ─────────────────────────────────────────────── */

  --track-bg:         var(--surface-2);   /* progress / meter background */
  --modal-overlay:    rgba(10, 10, 10, 0.8);
  --modal-backdrop:   blur(0.375rem);
  --accordion-active: var(--accent-hover);

  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' 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");


  /* ══════════════════════════════════════════════════════════════════
     AGENT-NATIVE TOKENS
     These are ASW's actual contribution — concepts no other framework has.
     Propose additions to Open Props: data-task, data-callout, data-session.
     ══════════════════════════════════════════════════════════════════ */

  --task-done:    var(--green-5);
  --task-blocked: var(--red-5);
  --task-wip:     var(--yellow-5);
  --task-todo:    var(--gray-5);

  --callout-info:  var(--blue-5);
  --callout-warn:  var(--yellow-5);
  --callout-error: var(--red-5);
  --callout-note:  var(--gray-5);

  --session-bg:   var(--surface-1);
  --wikilink:     var(--blue-4);
  --redacted:     var(--gray-8);

}


/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — override semantic aliases only
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --surface:        var(--gray-0);    /* 99% lightness */
    --surface-1:      var(--gray-1);    /* 95% */
    --surface-2:      var(--gray-2);    /* 88% */
    --surface-card:   var(--gray-0);
    --surface-hover:  var(--gray-1);

    --text:           var(--gray-14);   /* 18% — dark but not pure black */
    --text-2:         var(--gray-11);   /* 37% */
    --text-3:         var(--gray-8);    /* 53% */
    --text-dim:       var(--gray-6);    /* 63% */

    --accent:         var(--green-8);
    --accent-hover:   var(--green-9);
    --on-accent:      var(--gray-0);
    --accent-focus:   rgba(22, 163, 74, 0.35);
    --accent-subtle:  rgba(22, 163, 74, 0.10);

    --border:         var(--gray-3);    /* 80% — visible on near-white */
    --border-subtle:  var(--gray-2);    /* 88% — very subtle */

    --link:                  var(--blue-8);            /* #1971c2 */
    --link-hover:            var(--blue-7);            /* #1c7ed6 */
    --link-underline:        rgba(25, 113, 194, 0.4);
    --link-hover-underline:  rgba(25, 113, 194, 0.55);
    --link-focus:            rgba(25, 113, 194, 0.35);

    --h1-color: var(--gray-15);
    --h2-color: var(--gray-14);
    --h3-color: var(--gray-13);
    --h4-color: var(--gray-12);
    --h5-color: var(--gray-11);
    --h6-color: var(--gray-10);

    --mark-bg:    #fce6bf;
    --mark-color: var(--gray-15);
    --selection:  rgba(37, 99, 235, 0.2);

    --code-color:   var(--text-3);
    --table-stripe: rgba(111, 120, 135, 0.04);

    --input-bg:        var(--gray-0);
    --input-border:    var(--gray-4);
    --input-active-bg: var(--gray-0);
    --input-selected:  var(--gray-2);

    --track-bg:       var(--gray-3);
    --modal-overlay:  rgba(232, 234, 237, 0.75);

    --error:          oklch(50% 0.17 20);
    --error-active:   oklch(44% 0.18 20);

    --session-bg:     var(--surface-1);
  }
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE FONT SCALING
   Subtle upscaling at large viewports — all rem values follow.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) { html { font-size: 103%; } }
@media (min-width: 1280px) { html { font-size: 106%; } }
@media (min-width: 1536px) { html { font-size: 109%; } }

/* ── Layer: 02-semantic ─────────────────────────────────── */
/**
 * 02-semantic.css
 * Semantic HTML element styles
 * Part of: Agentic Semantic Web
 * 
 * Ported from: Pico CSS v2.1.1
 * License: MIT
 * 
 * This layer handles typography and semantic HTML elements.
 * Classes are NOT supported—use semantic tags only.
 */

/* ── Typography: Headings ──────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: var(--type-space);
  line-height: var(--leading-tight);
  font-family: var(--font-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1-size);
  color: var(--h1-color);
  font-weight: var(--h1-weight);
}

h2 {
  font-size: var(--h2-size);
  color: var(--h2-color);
  font-weight: var(--h2-weight);
}

h3 {
  font-size: var(--h3-size);
  color: var(--h3-color);
  font-weight: var(--h3-weight);
}

h4 {
  font-size: var(--h4-size);
  color: var(--h4-color);
  font-weight: var(--h4-weight);
}

h5 {
  font-size: var(--h5-size);
  color: var(--h5-color);
  font-weight: var(--h5-weight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h6 {
  font-size: var(--h6-size);
  color: var(--h6-color);
  font-weight: var(--h6-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Add spacing before headings that follow content elements */
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
  margin-top: var(--type-space-top);
}

/* ── Typography: UI elements — structural, navigational, informational ── */
/* These override the prose body font with the humanist sans UI stack.    */

nav,
header,
footer,
label,
th,
caption,
small,
figcaption,
button,
input,
select,
textarea,
hgroup > p,
hgroup > small {
  font-family: var(--font-ui);
}

/* ── Typography: Paragraphs ────────────────────────────────────────── */

p {
  margin-top: 0;
  margin-bottom: var(--type-space);
  color: var(--text);
  font-style: normal;
  font-weight: var(--font-weight-4);
}

/* ── Typography: Lists ─────────────────────────────────────────────── */

address,
dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: var(--type-space);
  color: var(--text);
  font-style: normal;
  font-weight: var(--font-weight-4);
}

:where(ol, ul) li {
  margin-bottom: calc(var(--type-space) * 0.25);
}

/* Nested lists: reduce spacing */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
  margin-top: calc(var(--type-space) * 0.25);
}

ul li {
  list-style: square;
}

/* ── Typography: Blockquote ────────────────────────────────────────── */

blockquote {
  display: block;
  margin: var(--type-space) 0;
  padding: var(--space-4);
  border-right: none;
  border-left: 0.25rem solid var(--border);
  border-inline-start: 0.25rem solid var(--border);
  border-inline-end: none;
}

blockquote footer {
  margin-top: calc(var(--type-space) * 0.5);
  color: var(--text-3);
}

/* ── Typography: Horizontal Rule ───────────────────────────────────── */

hr {
  height: 0;
  margin: var(--type-space) 0;
  border: 0;
  border-top: 1px solid var(--border);
  color: inherit;
}

/* ── Typography: Inline Elements ───────────────────────────────────── */

b,
strong {
  font-weight: bolder;
}

mark {
  padding: 0.125rem 0.25rem;
  background-color: var(--mark-bg);
  color: var(--mark-color);
  vertical-align: baseline;
}

ins {
  color: var(--text-2);
  text-decoration: none;
}

del {
  color: var(--accent-red);
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

small {
  font-size: 0.875em;
}

/* ── Links ─────────────────────────────────────────────────────────── */

:where(a:not([role=button])),
[role=link] {



  outline: none;
  background-color: transparent;
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.125em;
  transition: background-color var(--ease), 
              color var(--ease), 
              text-decoration var(--ease), 
              box-shadow var(--ease);
}

:where(a:not([role=button])):is(:hover, :active, :focus),
[role=link]:is(:hover, :active, :focus) {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover-underline);
}

:where(a:not([role=button])):focus-visible,
[role=link]:focus-visible {
  box-shadow: 0 0 0 var(--outline-width) var(--link-focus);
}

/* ── Text Selection ────────────────────────────────────────────────── */

::selection {
  background-color: var(--selection);
}

/* ── Tables ────────────────────────────────────────────────────────── */

:where(table) {
  width: 100%;
  margin-top: 0;
  margin-bottom: var(--type-space);
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
  color: var(--text);
  font-style: normal;
  font-weight: var(--font-weight-4);
}

th,
td {
  padding: calc(var(--space-4) / 2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  background-color: transparent;
  color: var(--text);
  font-weight: var(--font-weight-4);
  text-align: left;
}

thead th,
thead td {
  font-weight: 600;
  border-bottom-width: 2px;
}

tfoot th,
tfoot td {
  border-top: var(--border-width) solid var(--border);
  border-bottom: 0;
}

/* Striped tables (class-based but useful) */
table.striped tbody tr:nth-child(odd) th,
table.striped tbody tr:nth-child(odd) td {
  background-color: var(--table-stripe);
}

/* ── Code & Preformatted Text ──────────────────────────────────────── */

pre,
code,
kbd,
samp {
  font-size: 0.875em;
  font-family: var(--font-mono);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--code-color);
  font-weight: var(--font-weight-4);
  line-height: initial;
}

/* Inline code elements */
code,
kbd,
samp {
  display: inline-block;
  padding: 0.375rem;
}

/* Code blocks */
pre {
  display: block;
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  overflow-x: auto;
  -ms-overflow-style: scrollbar;
}

pre > code,
pre > samp {
  display: block;
  padding: 0;
  background: none;
  font-size: inherit;
  font-family: inherit;
  line-height: var(--leading);
}

/* Keyboard input */
kbd {
  background-color: var(--kbd-bg);
  color: var(--kbd-color);
  vertical-align: baseline;
}

/* ── Prism.js Syntax Highlighting Theme ────────────────────────────── *
 *
 * These rules style Prism.js token classes using ASW tokens.
 * asw.css provides the theme; each page loads Prism via:
 *
 *   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
 *   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
 *   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
 *
 * The CDN theme's colors are overridden here. ASW tokens handle dark/light.
 * ─────────────────────────────────────────────────────────────────── */

/* Reset Prism default background — pre already styled by ASW */
code[class*="language-"],
pre[class*="language-"] {
  color: var(--code-color);
  background: none;
  text-shadow: none;
}

pre[class*="language-"] {
  background: var(--surface-1);
}

/* Token colors — dark (default) */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--gray-6);       /* muted: ~55% lightness */
  font-style: italic;
}

.token.punctuation {
  color: var(--text-3);       /* slightly muted */
}

.token.tag,
.token.deleted {
  color: var(--red-4);        /* HTML tags, deleted code */
}

.token.attr-name,
.token.namespace {
  color: var(--yellow-4);     /* attribute names */
}

.token.string,
.token.attr-value,
.token.char,
.token.inserted {
  color: var(--green-4);      /* strings, values */
}

.token.number,
.token.boolean,
.token.constant,
.token.symbol {
  color: var(--orange-4);     /* literals */
}

.token.selector,
.token.builtin {
  color: var(--teal-4);       /* CSS selectors, builtins */
}

.token.keyword,
.token.atrule {
  color: var(--blue-4);       /* keywords, @rules */
}

.token.function,
.token.class-name {
  color: var(--cyan-4);       /* function/class names */
}

.token.property {
  color: var(--blue-5);       /* object properties */
}

.token.operator,
.token.entity,
.token.url {
  color: var(--text-2);       /* operators */
}

.token.regex {
  color: var(--orange-5);     /* regex literals */
}

.token.important,
.token.variable {
  color: var(--yellow-5);     /* !important, variables */
  font-weight: var(--font-weight-5);
}

.token.bold   { font-weight: var(--font-weight-7); }
.token.italic { font-style: italic; }

/* Light mode overrides */
@media (prefers-color-scheme: light) {
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata    { color: var(--gray-6); }

  .token.punctuation   { color: var(--gray-8); }

  .token.tag,
  .token.deleted       { color: var(--red-8); }

  .token.attr-name,
  .token.namespace     { color: var(--yellow-9); }

  .token.string,
  .token.attr-value,
  .token.char,
  .token.inserted      { color: var(--green-8); }

  .token.number,
  .token.boolean,
  .token.constant,
  .token.symbol        { color: var(--orange-8); }

  .token.selector,
  .token.builtin       { color: var(--teal-8); }

  .token.keyword,
  .token.atrule        { color: var(--blue-8); }

  .token.function,
  .token.class-name    { color: var(--cyan-9); }

  .token.property      { color: var(--blue-9); }

  .token.operator,
  .token.entity,
  .token.url           { color: var(--gray-8); }

  .token.regex         { color: var(--orange-7); }

  .token.important,
  .token.variable      { color: var(--yellow-9); }
}

/* ── Details / Summary ─────────────────────────────────────────────── */

details {
  display: block;
  margin-bottom: var(--space-4);
}

details summary {
  line-height: 1rem;
  list-style-type: none;
  cursor: pointer;
  transition: color var(--ease);
  color: var(--accent);
}

/* Hide browser default marker */
details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  display: none;
}

details summary::-moz-list-bullet {
  list-style-type: none;
}

/* CSS-drawn chevron using Unicode character ▸ (U+25B8) */
details summary::after {
  content: "▸";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-inline-start: calc(var(--space-4, 1rem) * 0.5);
  float: right;
  font-size: var(--text-sm);
  line-height: 1rem;
  text-align: center;
  color: var(--text-3);
  transform: rotate(90deg);  /* Point down when closed */
  transition: transform var(--ease);
}

details summary:focus {
  outline: none;
}

details summary:focus-visible {
  outline: var(--outline-width) solid var(--accent-focus);
  outline-offset: calc(var(--space-4, 1rem) * 0.5);
  color: var(--accordion-active);
}

/* Open state */
details[open] > summary {
  margin-bottom: var(--space-4);
  color: var(--text-3);
}

details[open] > summary::after {
  transform: rotate(180deg);  /* Point down when open */
}

/* ── Dialog / Modal ────────────────────────────────────────────────── */

dialog {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;
  padding: 0;
  border: 0;
  backdrop-filter: var(--modal-backdrop);
  background-color: var(--modal-overlay);
  color: var(--text);
}

dialog > article {
  width: 100%;
  max-height: calc(100vh - var(--space-4) * 2);
  margin: var(--space-4);
  overflow: auto;
}

/* Responsive max-widths for modal content */
@media (min-width: 576px) {
  dialog > article {
    max-width: 510px;
  }
}

@media (min-width: 768px) {
  dialog > article {
    max-width: 700px;
  }
}

/* Modal header */
dialog > article > header > * {
  margin-bottom: 0;
}

dialog > article > header .close,
dialog > article > header :is(a, button)[rel=prev] {
  margin: 0;
  margin-left: var(--space-4);
  padding: 0;
  float: right;
}

/* Modal footer */
dialog > article > footer {
  text-align: right;
}

dialog > article > footer button,
dialog > article > footer [role=button] {
  margin-bottom: 0;
}

dialog > article > footer button:not(:first-of-type),
dialog > article > footer [role=button]:not(:first-of-type) {
  margin-left: calc(var(--space-4) * 0.5);
}

/* Close button: Unicode ✕ (U+2715) instead of SVG */
dialog > article .close,
dialog > article :is(a, button)[rel=prev] {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: calc(var(--space-4) * -0.5);
  margin-bottom: var(--space-4);
  margin-left: auto;
  border: none;
  background-color: transparent;
  color: var(--text-3);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  opacity: 0.5;
  transition: opacity var(--ease);
  cursor: pointer;
}

dialog > article .close::before,
dialog > article :is(a, button)[rel=prev]::before {
  content: "✕";  /* Unicode heavy multiplication X */
}

dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
  opacity: 1;
}

/* Hidden state */
dialog:not([open]),
dialog[open=false] {
  display: none;
}

/* Body scroll lock when modal is open */
.modal-is-open {
  padding-right: var(--scrollbar-width, 0px);
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

.modal-is-open dialog {
  pointer-events: auto;
  touch-action: auto;
}

/* Animations (only if motion is not reduced) */
@media (prefers-reduced-motion: no-preference) {
  :where(.modal-is-opening, .modal-is-closing) dialog,
  :where(.modal-is-opening, .modal-is-closing) dialog > article {
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }
  
  :where(.modal-is-opening, .modal-is-closing) dialog {
    animation-duration: 0.8s;
    animation-name: modal-overlay;
  }
  
  :where(.modal-is-opening, .modal-is-closing) dialog > article {
    animation-delay: 0.2s;
    animation-name: modal;
  }
  
  .modal-is-closing dialog,
  .modal-is-closing dialog > article {
    animation-delay: 0s;
    animation-direction: reverse;
  }
  
  @keyframes modal-overlay {
    from {
      backdrop-filter: none;
      background-color: transparent;
    }
  }
  
  @keyframes modal {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
}

/* Respect reduced motion: instant show/hide */
@media (prefers-reduced-motion: reduce) {
  dialog,
  dialog > article {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Figure & Figcaption ───────────────────────────────────────────── */

figure {
  display: block;
  margin: 0;
  margin-bottom: var(--space-4);
  padding: 0;
}

figure figcaption {
  padding: calc(var(--space-4) * 0.5) 0;
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* ── Progress ──────────────────────────────────────────────────────── */

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: baseline;
  width: 100%;
  height: 0.5rem;
  margin-bottom: calc(var(--space-4) * 0.5);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--track-bg);
  color: var(--accent);
}

progress::-webkit-progress-bar {
  border-radius: var(--radius-md);
  background: none;
}

progress[value]::-webkit-progress-value {
  background-color: var(--accent);
  transition: inline-size var(--ease);
}

progress::-moz-progress-bar {
  background-color: var(--accent);
}

/* Indeterminate progress (animated) - respect motion preferences */
@media (prefers-reduced-motion: no-preference) {
  progress:indeterminate {
    background: var(--track-bg) 
                linear-gradient(to right, 
                  var(--accent) 30%, 
                  var(--track-bg) 30%) 
                top left / 150% 150% no-repeat;
    animation: progress-indeterminate 1s linear infinite;
  }
  
  progress:indeterminate[value]::-webkit-progress-value {
    background-color: transparent;
  }
  
  @keyframes progress-indeterminate {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  progress:indeterminate {
    background: var(--track-bg);
  }
}

/* ── Meter ─────────────────────────────────────────────────────────── */

meter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  vertical-align: baseline;
  width: 100%;
  height: 0.5rem;
  margin-bottom: calc(var(--space-4) * 0.5);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--track-bg);
  accent-color: var(--accent);  /* Modern CSS: browser renders with our accent */
}

/* Webkit meter styling */
meter::-webkit-meter-bar {
  border-radius: var(--radius-md);
  background-color: var(--track-bg);
}

meter::-webkit-meter-optimum-value {
  background-color: var(--accent);
}

meter::-webkit-meter-suboptimum-value {
  background-color: var(--accent-blue);
}

meter::-webkit-meter-even-less-good-value {
  background-color: var(--accent-red);  /* Red-ish for bad values */
}

/* Firefox meter styling */
meter::-moz-meter-bar {
  border-radius: var(--radius-md);
  background-color: var(--accent);
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background-color: var(--accent);
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background-color: var(--accent-blue);
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-color: var(--accent-red);
}

/* ── Content Container ─────────────────────────────────────────────── */
/* body > nav, body > main, and body > footer share container alignment so agents
   can write <body><nav>…<main>…<footer> and get consistent widths.
   Scoped to body > nav/main/footer to avoid affecting nested elements
   (breadcrumbs, pagination, mains inside grid layouts). */

body > nav,
body > main,
body > footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}

/* Default: constrained container (replaces .container class) */
@media (min-width: 576px) {
  body > nav,
  body > main:not([data-layout="fluid"]),
  body > footer {
    max-width: 510px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  body > nav,
  body > main:not([data-layout="fluid"]),
  body > footer {
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  body > nav,
  body > main:not([data-layout="fluid"]),
  body > footer {
    max-width: 950px;
  }
}

@media (min-width: 1280px) {
  body > nav,
  body > main:not([data-layout="fluid"]),
  body > footer {
    max-width: 1200px;
  }
}

@media (min-width: 1536px) {
  body > nav,
  body > main:not([data-layout="fluid"]),
  body > footer {
    max-width: 1450px;
  }
}

/* Full-width opt-out */
body > main[data-layout="fluid"] {
  max-width: none;
}

/* ── Layer: 03-components ─────────────────────────────────── */
/**
 * 03-components.css
 * UI component patterns (buttons, forms, nav, dialog, details)
 * Part of: Agentic Semantic Web
 * 
 * Ported from: Pico CSS v2.1.1
 * License: MIT
 * 
 * Modernizations:
 * - Uses `accent-color` for checkbox/radio (simpler than background-image)
 * - Drops class-based button variants (.secondary, .contrast, .outline)
 */

/* ── Buttons ───────────────────────────────────────────────────────────*/

button {
  margin: 0;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

button,
[type=submit],
[type=reset],
[type=button],
[role=button] {



  display: inline-block;
  padding: var(--input-py) var(--input-px);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  background-color: var(--surface);
  color: var(--text);
  font-weight: var(--font-weight-4);
  font-size: var(--text-base);
  line-height: var(--leading);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--ease), 
              border-color var(--ease), 
              color var(--ease);
}

button:is(:hover, :active, :focus-visible),
[type=submit]:is(:hover, :active, :focus-visible),
[type=reset]:is(:hover, :active, :focus-visible),
[type=button]:is(:hover, :active, :focus-visible),
[role=button]:is(:hover, :active, :focus-visible) {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

button:focus-visible,
[type=submit]:focus-visible,
[type=reset]:focus-visible,
[type=button]:focus-visible,
[role=button]:focus-visible {
  box-shadow: 0 0 0 var(--outline-width) var(--accent-focus);
}

button[disabled],
[type=submit][disabled],
[type=reset][disabled],
[type=button][disabled],
[role=button][disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Form Elements ─────────────────────────────────────────────────────*/

input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading);
  font-family: inherit;
  letter-spacing: inherit;
}

fieldset {
  width: 100%;
  margin: 0;
  margin-bottom: var(--space-4);
  padding: 0;
  border: 0;
}

fieldset legend,
label {
  display: block;
  margin-bottom: calc(var(--space-4) * 0.375);
  color: var(--text);
  font-weight: var(--font-weight-4);
}

input:not([type=checkbox], [type=radio], [type=range], [type=file]),
select,
textarea {
  width: 100%;
  padding: var(--input-py) var(--input-px);
  border: var(--border-width) solid var(--input-border);
  border-radius: var(--radius-md);
  outline: none;
  background-color: var(--input-bg);
  color: var(--text);
  font-weight: var(--font-weight-4);
  transition: background-color var(--ease), 
              border-color var(--ease), 
              color var(--ease);
}

input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):is(:active, :focus-visible),
select:not([readonly]):is(:active, :focus-visible),
textarea:not([readonly]):is(:active, :focus-visible) {
  border-color: var(--accent);
  background-color: var(--input-active-bg);
}

input:not([type=checkbox], [type=radio], [type=range], [type=file], [readonly]):focus-visible,
select:not([readonly]):focus-visible,
textarea:not([readonly]):focus-visible {
  box-shadow: 0 0 0 var(--outline-width) var(--accent);
}

input:not([type=checkbox], [type=radio], [type=range], [type=file])[disabled],
select[disabled],
textarea[disabled] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}

input::placeholder,
textarea::placeholder,
select:invalid {
  color: var(--text-3);
  opacity: 1;
}

input:not([type=checkbox], [type=radio]),
select,
textarea {
  margin-bottom: var(--space-4);
}

/* ── Select Dropdown ───────────────────────────────────────────────────*/

select:not([multiple], [size]) {
  padding-right: calc(var(--input-px) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

select[multiple] option:checked {
  background: var(--input-selected);
  color: var(--text);
}

/* ── Textarea ──────────────────────────────────────────────────────────*/

textarea {
  display: block;
  resize: vertical;
}

/* ── Checkboxes & Radios (Modern CSS) ──────────────────────────────────*/

label:has([type=checkbox], [type=radio]) {
  width: fit-content;
  cursor: pointer;
}

[type=checkbox],
[type=radio] {
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.125em;
  margin-right: 0.5em;
  vertical-align: middle;
  cursor: pointer;
  
  /* Modern CSS: use browser's native styling with our accent color */
  accent-color: var(--accent);
}

[type=checkbox] ~ label,
[type=radio] ~ label {
  display: inline-block;
  margin-bottom: 0;
  cursor: pointer;
}

[type=checkbox] ~ label:not(:last-of-type),
[type=radio] ~ label:not(:last-of-type) {
  margin-right: 1em;
}

/* ── Validation States ─────────────────────────────────────────────────*/

input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
  border-color: var(--accent);
}

input[aria-invalid=false]:is(:active, :focus-visible),
select[aria-invalid=false]:is(:active, :focus-visible),
textarea[aria-invalid=false]:is(:active, :focus-visible) {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 var(--outline-width) var(--accent-focus) !important;
}

input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
  border-color: var(--error);
}

input[aria-invalid=true]:is(:active, :focus-visible),
select[aria-invalid=true]:is(:active, :focus-visible),
textarea[aria-invalid=true]:is(:active, :focus-visible) {
  border-color: var(--error-active);
  box-shadow: 0 0 0 var(--outline-width) var(--error-focus) !important;
}

/* ── Helper Text ───────────────────────────────────────────────────────*/

:where(input, select, textarea, fieldset) + small {
  display: block;
  width: 100%;
  margin-top: calc(var(--space-4) * -0.75);
  margin-bottom: var(--space-4);
  color: var(--text-3);
}

:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
  color: var(--accent);
}

:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
  color: var(--accent-red);
}

label > :where(input, select, textarea) {
  margin-top: calc(var(--space-4) * 0.25);
}

/* ── Navigation ────────────────────────────────────────────────────────*/
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */

body > nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

body > nav strong {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.03em;
}

body > nav ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

body > nav ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

body > nav ul li + li::before {
  content: "|";
  color: var(--text-dim);
  margin: 0 0.75rem;
}

body > nav a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}

body > nav a:hover,
body > nav a[aria-current="page"] {
  color: var(--text);
}

/* Medium screens: allow links to wrap */
@media (max-width: 991px) {
  body > nav ul {
    flex-wrap: wrap;
    gap: 0.25rem 0;
  }
}

/* Small screens: stack brand above links */
@media (max-width: 767px) {
  body > nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  body > nav ul:last-child {
    flex-wrap: wrap;
  }
  
  body > nav ul:last-child li + li::before {
    display: none;
  }
}

/* ── Nav Dropdown ──────────────────────────────────────────────────────*/
/* <details> inside <nav> becomes a dropdown menu. No classes needed.
   Usage: <nav><ul><li><details><summary>Menu</summary><ul><li>...</li></ul></details></li></ul></nav> */

body > nav li:has(details) {
  display: flex;
  align-items: center;
}

body > nav details {
  position: relative;
  margin: 0;
}

body > nav details summary {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  list-style: none;
  cursor: pointer;
  transition: color 0.15s;
}

body > nav details summary:hover {
  color: var(--text);
}

/* Override accordion chevron in nav context */
body > nav details summary::after {
  content: "▾";
  float: none;
  margin-inline-start: 0.25rem;
  transform: none;
  font-size: var(--text-xs);
}

body > nav details[open] > summary::after {
  content: "▴";
  transform: none;
}

/* Dropdown panel */
body > nav details > ul,
body > nav details > div {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 160px;
  padding: 0.5rem 0;
  margin: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  list-style: none;
  display: flex;
  flex-direction: column;
}

body > nav details > ul li {
  margin: 0;
  padding: 0;
}

/* Remove pipe separator in dropdown items */
body > nav details > ul li + li::before {
  display: none;
}

body > nav details > ul li a {
  display: block;
  padding: 0.35rem 1rem;
  color: var(--text-2);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: background-color 0.1s, color 0.1s;
}

body > nav details > ul li a:hover {
  background: var(--border-subtle);
  color: var(--text);
}

/* Close dropdown when clicking outside (CSS-only via :focus-within) */
nav details:not(:focus-within) > ul,
nav details:not(:focus-within) > div {
  /* Allow browser default open/close behavior — 
     no forced hiding. Agent can add JS for click-outside. */
}

/* Mobile: dropdown becomes full-width */
@media (max-width: 767px) {
  nav details > ul,
  nav details > div {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border);
    margin-left: 0.5rem;
    padding: 0.25rem 0 0.25rem 0.5rem;
    background: transparent;
  }
}

/* ── Articles & Cards ──────────────────────────────────────────────────*/
/* Semantic article: <article><header><h3>Title</h3></header>Content</article> */
/* Container query: layout adapts to article's own width, not viewport.
   An article in a sidebar shrinks gracefully; at full width it expands. */

article {
  container-type: inline-size;
  container-name: article;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 0.75rem 0;
}

article > header {
  margin: 0 0 0.5rem 0;
  padding: 0 0 0.4rem 0;
  border-bottom: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0;
  background-color: transparent;
}

article header h3 {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

/* Narrow container: compact card (sidebar, grid cell) */
@container article (max-width: 300px) {
  article > header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.25rem;
  }
  
  article header h3 {
    font-size: var(--text-xs);
  }
  
  article > :is(p, dl, ul, ol) {
    font-size: var(--text-sm);
  }
}

/* Wide container: spacious layout */
@container article (min-width: 600px) {
  article {
    padding: 1.5rem 2rem;
  }
  
  article > header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
  }
}

/* ── Definition Lists ──────────────────────────────────────────────────*/
/* Monospace data display for dt/dd pairs */

dt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  margin-top: 0.75rem;
}

dd {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text);
  margin-left: 0;
  margin-top: 0.15rem;
}

article dt:first-of-type {
  margin-top: 0;
}

/* ── Sections ──────────────────────────────────────────────────────────*/

section + section {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

hgroup p {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: 0.25rem;
}

/* Section intro: hgroup as centered subtitle block */
section > hgroup:first-child {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* Card variant: navigation cards use UI font h3, not session-log monospace */
article[data-role="card"] header h3 {
  font-family: var(--font-ui);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

/* ── Footer ────────────────────────────────────────────────────────────*/

body > footer,
footer:last-child {
  margin-top: 3rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* ── Layer: 04-data-attrs ─────────────────────────────────── */
/**
 * 04-data-attrs.css
 * Agentic extensions: data-attribute selectors for vault concepts
 * Part of: Agentic Semantic Web
 */

@layer data-attrs {

/* ══════════════════════════════════════════════════════════════════════════
   Vault-specific role patterns
   ══════════════════════════════════════════════════════════════════════════ */

/* Command box for install instructions */
[data-role="command-box"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: 1.5rem 0;
}

[data-role="command-box"] .prefix {
  color: var(--text-3);
  margin-right: 0.5rem;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Wikilinks — [[Note Name]]
   ══════════════════════════════════════════════════════════════════════════ */

[data-wikilink] {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.9em;
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  transition: border-color 0.15s;
}

[data-wikilink]:hover {
  border-bottom-color: var(--accent-blue);
}

[data-wikilink][data-unresolved] {
  color: var(--text-dim);
  border-bottom-color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tasks — - [ ] todo / - [x] done / - [?] blocked
   ══════════════════════════════════════════════════════════════════════════ */

[data-task] {
  display: block;
  padding: 0.4em 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

[data-task]::before {
  margin-right: 0.75em;
  font-weight: 700;
}

[data-task="todo"]::before {
  content: "○";
  color: var(--accent-orange);
}

[data-task="done"]::before {
  content: "●";
  color: var(--accent);
}

[data-task="blocked"]::before {
  content: "◐";
  color: var(--accent-red);
}

/* ══════════════════════════════════════════════════════════════════════════
   Status indicators — awake / sleeping / blocked / unknown
   ══════════════════════════════════════════════════════════════════════════ */

[data-status] {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

[data-status="awake"] {
  color: var(--accent);
}

[data-status="sleeping"] {
  color: var(--text-3);
  font-style: italic;
}

[data-status="blocked"] {
  color: var(--accent-red);
}

[data-status="unknown"] {
  color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   Callouts — note / warning / error / tip
   ══════════════════════════════════════════════════════════════════════════ */

[data-callout] {
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-left: 3px solid var(--accent-blue);
  background: var(--surface-card);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

[data-callout="warning"] { border-left-color: var(--accent-orange); }
[data-callout="error"]   { border-left-color: var(--accent-red); }
[data-callout="tip"]     { border-left-color: var(--accent); }

[data-callout-title] {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 0.5em;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   Session metadata — mode / timestamp / hash
   ══════════════════════════════════════════════════════════════════════════ */

[data-session] {
  display: block;
  padding: 0.75em 1em;
  margin: 1em 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

[data-mode="autonomous"] { color: var(--accent-blue); }
[data-mode="interactive"] { color: var(--accent); }

[data-session-meta] {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tags and hashes
   ══════════════════════════════════════════════════════════════════════════ */

[data-tag] {
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.85em;
  text-decoration: none;
}

[data-tag]::before { content: "#"; }
[data-tag]:hover { color: var(--text); }

[data-hash] {
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   Semantic roles — timeline / status-card / diff
   ══════════════════════════════════════════════════════════════════════════ */

[data-role="timeline"] {
  border-left: 1px solid var(--border);
  padding-left: 1.5em;
  margin: 1.5em 0;
}

[data-role="timeline"] > * {
  position: relative;
  margin-bottom: 1.5em;
}

[data-role="timeline"] > *::before {
  content: "●";
  position: absolute;
  left: -1.85em;
  color: var(--accent);
  font-size: 0.7em;
}

[data-role="status-card"] {
  padding: 1.25em;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: 1em 0;
}

[data-role="diff"] {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 0.75em 1em;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

[data-role="diff"] .add    { color: var(--accent); }
[data-role="diff"] .remove { color: var(--accent-red); }
[data-role="diff"] .context { color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════════════════
   Tooltips — hover/focus-visible, accessible
   Usage: <span data-tooltip="Explanation text">term</span>
   ══════════════════════════════════════════════════════════════════════════ */

[data-tooltip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--text-dim);
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.75rem;
  background: var(--surface-1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

/* Arrow */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.15rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.35rem solid transparent;
  border-top-color: var(--border);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
}

/* Bottom placement */
[data-tooltip-position="bottom"]::after {
  bottom: auto;
  top: calc(100% + 0.5rem);
}

[data-tooltip-position="bottom"]::before {
  bottom: auto;
  top: calc(100% + 0.15rem);
  border-top-color: transparent;
  border-bottom-color: var(--border);
}

/* Generator utility roles */
[data-role="log-entry"] {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

[data-role="list-item"] {
  padding: 0.1rem 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   Sub-navigation — section nav within a page group
   ══════════════════════════════════════════════════════════════════════════ */

/* Usage:
   <nav data-subnav>
     <a href="/vigilio/" aria-current="page">index</a>
     <a href="/vigilio/now">now</a>
     <a href="/vigilio/status">status</a>
   </nav>
   
   Place inside <main class="container"> before article content.
   aria-current="page" marks the active section. No classes needed. */

[data-subnav] {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

[data-subnav] a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}

[data-subnav] a + a::before {
  content: "/";
  color: var(--border);
  margin: 0 0.6rem;
}

[data-subnav] a:hover {
  color: var(--text);
}

[data-subnav] a[aria-current="page"] {
  color: var(--text);
}


/* ══════════════════════════════════════════════════════════════════════════
   data-diff — CSS diff viewer for code review and comparison output
   Issue: agentic-semantic-web#52
   ══════════════════════════════════════════════════════════════════════════ */

[data-diff] {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-5) 0;
  padding: 0;
}

/* File header */
[data-diff-file] {
  display: block;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
  padding: 0.4em 1em;
  font-size: var(--text-xs);
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* Individual diff lines */
[data-diff-line] {
  display: block;
  padding: 0.15em 1em 0.15em 3em;
  position: relative;
  line-height: 1.6;
  white-space: pre;
}

/* Prefix gutter marker */
[data-diff-line]::before {
  position: absolute;
  left: 1em;
  width: 1.5em;
  text-align: center;
}

[data-diff-line="added"] {
  background: rgba(34, 197, 94, 0.10);
  color: var(--green-3);
}

[data-diff-line="added"]::before {
  content: "+";
  color: var(--green-5);
}

[data-diff-line="removed"] {
  background: rgba(239, 68, 68, 0.10);
  color: #f8b4b4;
}

[data-diff-line="removed"]::before {
  content: "−";
  color: var(--red-6);
}

[data-diff-line="context"] {
  color: var(--text-3);
}

[data-diff-line="context"]::before {
  content: " ";
}

/* Hunk header — @@ line markers */
[data-diff-line="hunk"] {
  background: rgba(99, 179, 237, 0.07);
  color: var(--accent-blue);
  font-style: italic;
}

[data-diff-line="hunk"]::before {
  content: "@@";
  font-style: normal;
  color: var(--accent-blue);
  opacity: 0.6;
}


/* ══════════════════════════════════════════════════════════════════════════
   data-redacted — privacy-aware redaction styling
   Issue: agentic-semantic-web#55
   ══════════════════════════════════════════════════════════════════════════ */

/* Base: fully redacted — black bar, not selectable */
[data-redacted] {
  background: var(--text);
  color: transparent;
  border-radius: var(--radius-sm);
  user-select: none;
  /* Screen reader replacement handled via aria-label on element */
}

/* Block-level redaction */
[data-redacted]:is(p, div, section, article, li) {
  display: block;
  min-height: 1.2em;
}

/* Variant: reveal on hover/focus */
[data-redacted="reveal"] {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

[data-redacted="reveal"]:hover,
[data-redacted="reveal"]:focus {
  background: var(--surface-card);
  color: var(--text);
  outline: 1px solid var(--border);
  border-radius: var(--radius-sm);
  user-select: text;
}

/* Variant: label — shows [REDACTED] text */
[data-redacted="label"] {
  background: var(--surface-1);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.35em;
  user-select: none;
}

[data-redacted="label"]::before {
  content: "[REDACTED]";
}

[data-redacted="label"] > * {
  display: none;
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  [data-redacted] {
    background: #1a1a1a;
  }
  [data-redacted="reveal"]:hover,
  [data-redacted="reveal"]:focus {
    background: #f0f0f0;
    color: #111;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   data-reading-progress — CSS-only scroll progress bar
   Issue: agentic-semantic-web#53
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes asw-reading-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

[data-reading-progress]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  z-index: 9999;
  /* animation-timeline: scroll() — fills as the element scrolls */
  animation: asw-reading-progress auto linear;
  animation-timeline: scroll(root);
}

/* Graceful degradation: if animation-timeline unsupported, ::before is empty */

/* Subtle shadow so bar is visible on light pages too */
[data-reading-progress]::before {
  box-shadow: 0 0 6px var(--accent-focus);
}


/* ══════════════════════════════════════════════════════════════════════════
   ai-disclosure — styling for AI content disclosure attributes
   Issue: agentic-semantic-web#58
   ══════════════════════════════════════════════════════════════════════════ */

/* Subtle accent on AI-generated sections — light left border indicator */
[ai-disclosure] {
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
}

[ai-disclosure="ai-generated"] {
  border-left-color: rgba(34, 197, 94, 0.25);
}

[ai-disclosure="ai-assisted"] {
  border-left-color: rgba(99, 179, 237, 0.20);
}

/* Autonomous — more distinct: full accent treatment */
[ai-disclosure="autonomous"] {
  border-left-color: var(--accent);
  border-left-width: 2px;
}

/* Mixed — yellow/amber to signal blended provenance */
[ai-disclosure="mixed"] {
  border-left-color: rgba(245, 158, 11, 0.30);
}

/* Disclosure badge — optional ::after label for verbose mode */
[ai-disclosure][data-show-disclosure]::after {
  content: " [" attr(ai-disclosure) "]";
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  vertical-align: super;
  font-size: 0.65em;
}

/* ── CTA buttons: data-role on <a> ─────────────────────────────────────── */
/* Agents write <a href="..."> naturally. data-role styles intent without class names. */
a[data-role="primary"] {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--ease-1) 150ms;
}

a[data-role="primary"]:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  text-decoration: none;
}

a[data-role="secondary"] {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-2);
  text-decoration: none;
  transition: border-color var(--ease-1) 150ms, color var(--ease-1) 150ms;
}

a[data-role="secondary"]:hover {
  border-color: var(--accent);
  color: var(--text);
  text-decoration: none;
}

/* ── Badge atom ────────────────────────────────────────────────────────────── */
/* Icon badge / token pill. <span data-badge>token</span>. */
[data-badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  margin-bottom: var(--space-3);
}

} /* end @layer data-attrs */

/* ── Layer: 05-utilities ─────────────────────────────────── */
/**
 * 05-utilities.css
 * Utility patterns (layout helpers, text modifiers, responsive utilities)
 * Part of: Agentic Semantic Web
 */

@layer utilities {

/* ══════════════════════════════════════════════════════════════════════════
   Text utilities
   ══════════════════════════════════════════════════════════════════════════ */

[data-text~="mono"] {
  font-family: var(--font-mono);
}

[data-text~="dim"] {
  color: var(--text-3);
}

[data-text~="accent"] {
  color: var(--accent);
}

[data-text~="small"] {
  font-size: var(--text-xs);
}

/* Eyebrow — small monospace uppercase accent label above a heading */
[data-text~="eyebrow"] {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout utilities
   ══════════════════════════════════════════════════════════════════════════ */

/* Grid layout with responsive stacking */
[data-layout="grid-2"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  [data-layout="grid-2"] {
    grid-template-columns: 1fr;
  }
}

/* Card grid — responsive wrap for article cards */
[data-layout="card-grid"] {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

[data-layout="card-grid"] > * {
  flex: 1 1 calc(50% - 0.75rem);
  min-width: 240px;
}

@media (max-width: 600px) {
  [data-layout="card-grid"] > * {
    flex-basis: 100%;
  }
}

/* Stats bar — horizontal row of key-value metrics */
[data-layout="stats"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

[data-layout="stats"] > * {
  flex: 1 1 0;
  min-width: 5rem;
  padding: 0.75rem 0;
  text-align: center;
  border-right: 1px solid var(--border-subtle);
}

[data-layout="stats"] > *:last-child {
  border-right: none;
}

[data-layout="stats"] .value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

[data-layout="stats"] .label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.2rem;
}

@media (max-width: 400px) {
  [data-layout="stats"] > * {
    flex-basis: 33%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
}

/* Inline definition lists */
dl[data-layout="inline"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1rem;
  align-items: baseline;
}

dl[data-layout="inline"] dt,
dl[data-layout="inline"] dd {
  margin: 0;
  padding: 0;
  margin-inline-start: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive visibility
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide on mobile */
[data-visible="desktop"] {
  display: none;
}

@media (min-width: 768px) {
  [data-visible="desktop"] {
    display: initial;
  }
}

/* Hide on desktop */
[data-visible="mobile"] {
  display: initial;
}

@media (min-width: 768px) {
  [data-visible="mobile"] {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Loading indicator — aria-busy
   Usage: <button aria-busy="true">Loading…</button>
          <section aria-busy="true">Content loading…</section>
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes spin {
  to { transform: rotate(360deg); }
}

[aria-busy="true"] {
  cursor: progress;
}

/* Inline spinner before text in buttons and interactive elements */
:is(button, [role="button"], a)[aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Disable interaction on busy buttons */
:is(button, [role="button"])[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.7;
}

/* Block-level busy: overlay spinner centered */
:is(section, article, main, div)[aria-busy="true"] {
  position: relative;
  min-height: 3rem;
}

:is(section, article, main, div)[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--text-3);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   Accessibility enhancements
   ══════════════════════════════════════════════════════════════════════════ */

/* Disable all transitions and animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Increase contrast for high-contrast preference */
@media (prefers-contrast: more) {
  :root {
    --border-color: #404040;
    --border-color-subtle: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #d4d4d4;
    --border-width: 2px;
  }
  
  /* Thicker borders on interactive elements */
  a,
  button,
  input,
  select,
  textarea,
  [data-wikilink] {
    border-width: 2px;
  }
  
  /* Stronger focus indicators */
  :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

} /* end @layer utilities */

/* ── Layer: 06-charts ─────────────────────────────────── */
/**
 * 06-charts.css
 * Data-driven charts from semantic HTML tables.
 * Absorbed from Charts.css — class API converted to data-attributes.
 *
 * Core vocabulary:
 *   data-chart="bar|column|line|area|pie"   — chart type
 *   data-chart-labels                        — show axis labels (thead)
 *   data-chart-spacing="1–5"                — gap between bars (default 2)
 *   data-chart-stacked                       — stacked multi-dataset mode
 *   style="--size: 0.8"                      — data injection on <td> (legal exception)
 *   style="--color: #hex"                    — per-row color override on <tr>
 *
 * Pragmatic exception: style="--size: N" and style="--color: X" on table cells
 * are DATA injection, not presentation — they bind numeric values to CSS.
 * This is the one place ASW permits inline style attributes.
 *
 * Chart dimensions:
 *   --chart-height       Bar chart: bar thickness. Column chart: chart height.
 *   --chart-bar-size     Column chart: bar width.
 *   --chart-gap          Gap between data points.
 *
 * Lineage: Charts.css (MIT) — converted class API to data-attribute API.
 * Reference: chartscss.org
 */

@layer charts {

/* ══════════════════════════════════════════════════════════════════════════
   Shared chart tokens
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart] {

  /* Data series colors — cycle via nth-child in each chart type */
  --chart-color-1:  var(--accent);           /* green  */
  --chart-color-2:  var(--accent-blue);      /* blue   */
  --chart-color-3:  var(--accent-orange);    /* orange */
  --chart-color-4:  var(--accent-red);       /* red    */
  --chart-color-5:  var(--purple-5, #ae3ec9);
  --chart-color-6:  var(--cyan-5, #15aabf);
  --chart-color-7:  var(--pink-5, #e64980);
  --chart-color-8:  var(--teal-5, #0ca678);

  /* Layout */
  --chart-height:   200px;   /* column chart area height */
  --chart-bar-size: 2rem;    /* column bar width / bar chart bar height */
  --chart-gap:      6px;     /* spacing between data points */

  /* Axis / labels */
  --chart-axis:          var(--border);
  --chart-axis-width:    2px;
  --chart-label:         var(--text-3);
  --chart-label-size:    var(--text-xs);

  /* Bar styling */
  --chart-radius:   var(--radius-2);

  /* Reset table styles — <table> is presentational structure here */
  display: block;
  inline-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
}

[data-chart] caption {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-3);
  text-align: start;
  padding-block-end: var(--size-3);
  caption-side: top;
}

/* thead: hidden by default, shown with data-chart-labels */
[data-chart] thead {
  display: none;
}

[data-chart][data-chart-labels] thead {
  display: block;
}

/* tbody: each chart type overrides this */
[data-chart] tbody {
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   Bar chart — horizontal bars
   ══════════════════════════════════════════════════════════════════════════

   Structure:
     <table data-chart="bar">
       <caption>Title</caption>
       <tbody>
         <tr>
           <th scope="row">Label</th>
           <td style="--size: 0.8">80%</td>
         </tr>
       </tbody>
     </table>

   The bar width = 100% × --size. Bar is a ::before pseudo on td.
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="bar"] tbody {
  display: flex;
  flex-direction: column;
  gap: var(--chart-gap);

  /* Left axis line */
  border-inline-start: var(--chart-axis-width) solid var(--chart-axis);
  padding-inline-start: 0;
}

[data-chart="bar"] tr {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

/* Row label (th) */
[data-chart="bar"] th[scope="row"] {
  font-size: var(--chart-label-size);
  font-weight: 400;
  color: var(--chart-label);
  min-inline-size: 5rem;
  max-inline-size: 8rem;
  text-align: end;
  padding-block: 0;
  padding-inline: var(--size-2) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* Data cell — the track */
[data-chart="bar"] td {
  flex: 1;
  position: relative;
  block-size: var(--chart-bar-size);
  display: flex;
  align-items: center;
  padding: 0;
  overflow: visible;
}

/* The bar itself — ::before */
[data-chart="bar"] td::before {
  content: "";
  display: block;
  block-size: 100%;
  inline-size: calc(100% * var(--size, 0.5));
  background: var(--color, var(--chart-color-1));
  border-radius: 0 var(--chart-radius) var(--chart-radius) 0;
  transition: opacity 0.15s ease, inline-size 0.3s var(--ease-3, ease-out);
}

[data-chart="bar"] td:hover::before {
  opacity: 0.8;
}

/* Data label (text inside/after bar) */
[data-chart="bar"] td::after {
  content: attr(data-value);
  position: absolute;
  inset-inline-start: calc(100% * var(--size, 0.5) + 0.35rem);
  font-size: var(--chart-label-size);
  color: var(--text-3);
  white-space: nowrap;
}

/* Color cycling for multi-series */
[data-chart="bar"] tr:nth-child(1) td::before { background: var(--color, var(--chart-color-1)); }
[data-chart="bar"] tr:nth-child(2) td::before { background: var(--color, var(--chart-color-2)); }
[data-chart="bar"] tr:nth-child(3) td::before { background: var(--color, var(--chart-color-3)); }
[data-chart="bar"] tr:nth-child(4) td::before { background: var(--color, var(--chart-color-4)); }
[data-chart="bar"] tr:nth-child(5) td::before { background: var(--color, var(--chart-color-5)); }
[data-chart="bar"] tr:nth-child(6) td::before { background: var(--color, var(--chart-color-6)); }
[data-chart="bar"] tr:nth-child(7) td::before { background: var(--color, var(--chart-color-7)); }
[data-chart="bar"] tr:nth-child(8) td::before { background: var(--color, var(--chart-color-8)); }
[data-chart="bar"] tr:nth-child(n+9) td::before { background: var(--color, var(--chart-color-1)); }

/* ── Spacing modifiers ──────────────────────────────────── */
[data-chart="bar"][data-chart-spacing="1"] tbody { gap: 2px; }
[data-chart="bar"][data-chart-spacing="2"] tbody { gap: 6px; }
[data-chart="bar"][data-chart-spacing="3"] tbody { gap: 10px; }
[data-chart="bar"][data-chart-spacing="4"] tbody { gap: 16px; }
[data-chart="bar"][data-chart-spacing="5"] tbody { gap: 24px; }

/* ══════════════════════════════════════════════════════════════════════════
   Column chart — vertical bars
   ══════════════════════════════════════════════════════════════════════════

   Structure:
     <table data-chart="column">
       <caption>Title</caption>
       <tbody>
         <tr>
           <th scope="row">Jan</th>
           <td style="--size: 0.6">60</td>
         </tr>
       </tbody>
     </table>

   The chart area is --chart-height. Each column height = --chart-height × --size.
   Columns sit at the bottom of the chart area (flex-end alignment).
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="column"] tbody {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--chart-gap);
  block-size: var(--chart-height);
  border-block-end: var(--chart-axis-width) solid var(--chart-axis);
  padding: 0;
}

[data-chart="column"] tr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  block-size: 100%;
  gap: var(--size-1);
}

/* Column label (th) at the bottom */
[data-chart="column"] th[scope="row"] {
  font-size: var(--chart-label-size);
  font-weight: 400;
  color: var(--chart-label);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
  padding: 0;
  padding-block-start: var(--size-1);
  /* Move below axis */
  order: 2;
  margin-block-start: var(--size-2);
}

/* Data cell — the column bar */
[data-chart="column"] td {
  display: block;
  inline-size: 100%;
  block-size: calc(var(--chart-height) * var(--size, 0.5));
  padding: 0;
  order: 1;
  transition: block-size 0.3s var(--ease-3, ease-out);
  border-radius: var(--chart-radius) var(--chart-radius) 0 0;
}

/* Color cycling for columns */
[data-chart="column"] tr:nth-child(1) td { background: var(--color, var(--chart-color-1)); }
[data-chart="column"] tr:nth-child(2) td { background: var(--color, var(--chart-color-2)); }
[data-chart="column"] tr:nth-child(3) td { background: var(--color, var(--chart-color-3)); }
[data-chart="column"] tr:nth-child(4) td { background: var(--color, var(--chart-color-4)); }
[data-chart="column"] tr:nth-child(5) td { background: var(--color, var(--chart-color-5)); }
[data-chart="column"] tr:nth-child(6) td { background: var(--color, var(--chart-color-6)); }
[data-chart="column"] tr:nth-child(7) td { background: var(--color, var(--chart-color-7)); }
[data-chart="column"] tr:nth-child(8) td { background: var(--color, var(--chart-color-8)); }
[data-chart="column"] tr:nth-child(n+9) td { background: var(--color, var(--chart-color-1)); }

[data-chart="column"] td:hover {
  opacity: 0.8;
}

/* ── Spacing modifiers ──────────────────────────────────── */
[data-chart="column"][data-chart-spacing="1"] tbody { gap: 2px; }
[data-chart="column"][data-chart-spacing="2"] tbody { gap: 6px; }
[data-chart="column"][data-chart-spacing="3"] tbody { gap: 12px; }
[data-chart="column"][data-chart-spacing="4"] tbody { gap: 20px; }
[data-chart="column"][data-chart-spacing="5"] tbody { gap: 32px; }

/* ── Column chart labels ───────────────────────────────── */
/* When data-chart-labels present, show thead as axis header */
[data-chart="column"][data-chart-labels] thead {
  display: flex;
  justify-content: space-around;
  margin-block-end: var(--size-2);
}

[data-chart="column"][data-chart-labels] thead th {
  font-size: var(--chart-label-size);
  color: var(--chart-label);
  font-weight: 400;
  text-align: center;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Area chart — filled area from baseline
   ══════════════════════════════════════════════════════════════════════════

   CSS-only area charts use linear-gradient on the td background.
   Each point's area = --size fraction of the column height.

   Structure identical to column — but cells connect visually.
   The visual connection requires identical widths and no gap (or clip).
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="area"] tbody {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  block-size: var(--chart-height);
  border-block-end: var(--chart-axis-width) solid var(--chart-axis);
  gap: 0; /* no gap — cells must connect */
  padding: 0;
}

[data-chart="area"] tr {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  flex: 1;
  block-size: 100%;
}

[data-chart="area"] th[scope="row"] {
  font-size: var(--chart-label-size);
  font-weight: 400;
  color: var(--chart-label);
  text-align: center;
  order: 2;
  padding-block-start: var(--size-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Area cell — filled gradient from --size down to baseline */
[data-chart="area"] td {
  display: block;
  inline-size: 100%;
  block-size: calc(var(--chart-height) * var(--size, 0.5));
  padding: 0;
  order: 1;
  background: linear-gradient(
    to bottom,
    var(--chart-color-1) 0%,
    color-mix(in oklch, var(--chart-color-1), transparent 70%) 100%
  );
}

/* ══════════════════════════════════════════════════════════════════════════
   Line chart — dots connected by a visual line
   ══════════════════════════════════════════════════════════════════════════

   CSS-only: we use the column approach but mark the top with a dot (::after)
   and use a border-top line to simulate connection between points.
   True line interpolation requires JavaScript or SVG.

   What we ship: column bars in outline/transparent mode with an accent dot
   at the top — semantic, readable, no JS.
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="line"] tbody {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  block-size: var(--chart-height);
  border-block-end: var(--chart-axis-width) solid var(--chart-axis);
  gap: 0;
  padding: 0;
  position: relative;
}

[data-chart="line"] tr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  block-size: 100%;
}

[data-chart="line"] th[scope="row"] {
  font-size: var(--chart-label-size);
  font-weight: 400;
  color: var(--chart-label);
  text-align: center;
  order: 2;
  padding-block-start: var(--size-1);
  white-space: nowrap;
}

/* Line chart cell — transparent bar with accent top border + dot */
[data-chart="line"] td {
  display: block;
  inline-size: 100%;
  block-size: calc(var(--chart-height) * var(--size, 0.5));
  padding: 0;
  order: 1;
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--chart-color-1), transparent 80%) 0%,
    transparent 60%
  );
  border-block-start: 2px solid var(--chart-color-1);
  position: relative;
}

/* Dot at data point */
[data-chart="line"] td::before {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--chart-color-1);
  border: 2px solid var(--surface);
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pie chart — conic-gradient segments
   ══════════════════════════════════════════════════════════════════════════

   CSS-only pie charts use conic-gradient on a single element.
   Each segment's arc = --size × 360deg.
   Requires stacking values in CSS — not practical to automate per-row.

   For agent use: pie charts work best with explicit conic-gradient
   set as a custom property. The data-chart="pie" wrapper provides
   the shape and size; the agent sets --pie-segments.
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="pie"] {
  --pie-size: min(200px, 100%);
  --pie-segments: conic-gradient(
    var(--chart-color-1) 0% 25%,
    var(--chart-color-2) 25% 50%,
    var(--chart-color-3) 50% 75%,
    var(--chart-color-4) 75% 100%
  );
}

/* Pie uses a generated element — hide table structure visually */
[data-chart="pie"] tbody { display: none; }

/* Show caption + legend from thead */
[data-chart="pie"] thead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2);
  justify-content: center;
  margin-block-end: var(--size-3);
}

[data-chart="pie"] thead th {
  font-size: var(--chart-label-size);
  color: var(--chart-label);
  font-weight: 400;
}

/* The pie rendered as ::before on the table element */
[data-chart="pie"]::before {
  content: "";
  display: block;
  inline-size: var(--pie-size);
  block-size: var(--pie-size);
  border-radius: 50%;
  background: var(--pie-segments);
  margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Stacked bars — data-chart-stacked modifier
   ══════════════════════════════════════════════════════════════════════════
   When multiple <td> in one <tr>, stack them.
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="bar"][data-chart-stacked] td {
  /* Multiple tds per row — share the bar track inline */
  display: inline-block;
  inline-size: calc(100% * var(--size, 0.2));
  border-radius: 0;
}

[data-chart="bar"][data-chart-stacked] td::before {
  display: none; /* td IS the bar in stacked mode */
}

[data-chart="bar"][data-chart-stacked] td:first-of-type {
  border-radius: 0 0 0 0;
}

[data-chart="bar"][data-chart-stacked] td:last-of-type {
  border-radius: 0 var(--chart-radius) var(--chart-radius) 0;
}

/* Stacked color cycling */
[data-chart][data-chart-stacked] td:nth-of-type(1) { background: var(--chart-color-1); }
[data-chart][data-chart-stacked] td:nth-of-type(2) { background: var(--chart-color-2); }
[data-chart][data-chart-stacked] td:nth-of-type(3) { background: var(--chart-color-3); }
[data-chart][data-chart-stacked] td:nth-of-type(4) { background: var(--chart-color-4); }

/* ══════════════════════════════════════════════════════════════════════════
   Accessibility
   ══════════════════════════════════════════════════════════════════════════ */

/* Ensure cell content (the data value) is readable for screen readers
   but visually hidden inside the bar — text is in aria / caption */
[data-chart="bar"] td,
[data-chart="column"] td {
  font-size: var(--chart-label-size);
  color: transparent; /* data visible to SR, hidden visually */
}

/* Respect user preference — no transitions */
@media (prefers-reduced-motion: reduce) {
  [data-chart] td,
  [data-chart] td::before {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Radial chart — circular gauge
   ══════════════════════════════════════════════════════════════════════════

   Structure:
     <table data-chart="radial" style="--size: 0.72">
       <caption>Token budget used</caption>
       <tbody><tr><td><span>72%</span></td></tr></tbody>
     </table>

   The gauge is a conic-gradient on the td element.
   --size (0–1) drives the arc: --size × 360deg = colored portion.
   ::before pseudo creates a donut hole cutout over the gradient.
   <span> inside td floats the value text above the donut via z-index.
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="radial"] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-2);
}

[data-chart="radial"] caption {
  font-size: var(--chart-label-size);
  color: var(--chart-label);
  text-align: center;
  caption-side: bottom;
  padding-block-start: var(--size-2);
}

[data-chart="radial"] tbody { display: flex; }
[data-chart="radial"] tr { display: flex; }

/* The gauge circle */
[data-chart="radial"] td {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color, var(--chart-color-1)) 0deg calc(var(--size, 0.5) * 360deg),
    var(--surface-1, #111111) 0deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  color: transparent; /* data readable by SR, hidden visually */
}

/* Donut hole */
[data-chart="radial"] td::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--surface);
  z-index: 0;
}

/* Value text centered in the donut hole */
[data-chart="radial"] td span {
  position: relative;
  z-index: 1;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 600;
}

/* Status color variants */
[data-chart="radial"][data-status="warning"] td {
  background: conic-gradient(
    var(--accent-orange, #f08c00) 0deg calc(var(--size, 0.5) * 360deg),
    var(--surface-1, #111111) 0deg
  );
}

[data-chart="radial"][data-status="danger"] td {
  background: conic-gradient(
    var(--accent-red, #e03131) 0deg calc(var(--size, 0.5) * 360deg),
    var(--surface-1, #111111) 0deg
  );
}

/* ══════════════════════════════════════════════════════════════════════════
   Burndown chart — sprint burndown with CSS ideal-line overlay
   ══════════════════════════════════════════════════════════════════════════

   Structure: same as column chart, but:
   - Bars use --accent-red (remaining work = red)
   - tbody::after renders a diagonal linear-gradient as the ideal-line
   - Ideal line runs top-left to bottom-right: full work at start → zero at end

   <table data-chart="burndown">
     <caption>Sprint burndown</caption>
     <tbody>
       <tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
       ...
     </tbody>
   </table>
   ══════════════════════════════════════════════════════════════════════════ */

[data-chart="burndown"] tbody {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  block-size: var(--chart-height);
  border-block-end: var(--chart-axis-width) solid var(--chart-axis);
  position: relative; /* required for ::after overlay */
  gap: var(--chart-gap);
  padding: 0;
}

/* Ideal-line overlay — diagonal gradient = ideal burn velocity */
[data-chart="burndown"] tbody::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    color-mix(in oklch, var(--chart-color-2, var(--accent-blue, #4dabf7)), transparent 20%) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

[data-chart="burndown"] tr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  block-size: 100%;
  gap: var(--size-1);
}

/* Remaining-work bar — red, with ideal line overlay above it */
[data-chart="burndown"] td {
  display: block;
  inline-size: 100%;
  block-size: calc(var(--chart-height) * var(--size, 0.5));
  background: color-mix(in oklch, var(--chart-color-4, var(--accent-red, #e03131)), transparent 25%);
  border-radius: var(--chart-radius) var(--chart-radius) 0 0;
  order: 1;
  padding: 0;
  border: none;
  color: transparent;
  position: relative;
  z-index: 1;
  transition: opacity 0.15s ease;
}

[data-chart="burndown"] td:hover { opacity: 0.85; }

[data-chart="burndown"] th[scope="row"] {
  font-size: var(--chart-label-size);
  font-weight: 400;
  color: var(--chart-label);
  text-align: center;
  order: 2;
  padding-block-start: var(--size-1);
  white-space: nowrap;
  padding: 0;
  margin-block-start: var(--size-2);
}

/* ── Spacing modifiers for area and line (port from bar/column) ──── */

[data-chart="area"][data-chart-spacing="1"] tbody { gap: 0; }
[data-chart="area"][data-chart-spacing="2"] tbody { gap: 2px; }
[data-chart="area"][data-chart-spacing="3"] tbody { gap: 6px; }
[data-chart="area"][data-chart-spacing="4"] tbody { gap: 12px; }
[data-chart="area"][data-chart-spacing="5"] tbody { gap: 20px; }

[data-chart="line"][data-chart-spacing="1"] tbody { gap: 0; }
[data-chart="line"][data-chart-spacing="2"] tbody { gap: 2px; }
[data-chart="line"][data-chart-spacing="3"] tbody { gap: 6px; }
[data-chart="line"][data-chart-spacing="4"] tbody { gap: 12px; }
[data-chart="line"][data-chart-spacing="5"] tbody { gap: 20px; }

/* ── data-chart-reverse modifier ────────────────────────────────── */

[data-chart="bar"][data-chart-reverse] tbody {
  flex-direction: column-reverse;
}

[data-chart="column"][data-chart-reverse] tbody {
  flex-direction: row-reverse;
}

/* ── data-chart-stacked on column ───────────────────────────────── */

[data-chart="column"][data-chart-stacked] tr {
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
}

[data-chart="column"][data-chart-stacked] td {
  flex: 1;
  border-radius: 0;
  block-size: calc(var(--chart-height) * var(--size, 0.2));
}

[data-chart="column"][data-chart-stacked] td:first-of-type {
  border-radius: var(--chart-radius) 0 0 0;
}

[data-chart="column"][data-chart-stacked] td:last-of-type {
  border-radius: 0 var(--chart-radius) 0 0;
}

/* ── data-chart-labels on bar ────────────────────────────────────── */

[data-chart="bar"][data-chart-labels] thead {
  display: block;
  margin-block-end: var(--size-2);
}

[data-chart="bar"][data-chart-labels] thead th {
  font-size: var(--chart-label-size);
  color: var(--chart-label);
  font-weight: 400;
}

} /* end @layer charts */

/* ── Layer: 08-layout ─────────────────────────────────── */
/**
 * 08-layout.css
 * Layout patterns: container, docs layout, grid helpers
 * Part of: Agentic Semantic Web
 */

/* ── Container ─────────────────────────────────────────────────────── */

.container {
  max-width: var(container-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ── Body baseline ──────────────────────────────────────────────────── */

body {
  background-color: var(--surface);
  color: var(--text);
  font-weight: var(--font-weight-4);
  line-height: var(--leading);
  font-variant-emoji: text; /* render emoji as monochrome glyphs, not OS pictographs */
  min-height: 100vh;
  /* font-family and font-size live in 00-reset.css — do not set here */
}

/* ── Hero ──────────────────────────────────────────────────────────── */
/* Landing page hero block. Usually <header data-layout="hero">. */
[data-layout="hero"] {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border-bottom: 1px solid var(--border);
}

/* ── Install snippet ────────────────────────────────────────────────── */
/* One-liner install code pill. <p data-layout="install"><code>...</code></p> */
[data-layout="install"] {
  display: inline-block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: var(--space-4) 0;
}

/* ── Actions row ────────────────────────────────────────────────────── */
/* CTA button row. <nav data-layout="actions"> wraps primary + secondary links. */
nav[data-layout="actions"] {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-5);
  padding: 0;
}

nav[data-layout="actions"] a {
  text-decoration: none;
  color: var(--text-2);
}

nav[data-layout="actions"] a:hover {
  color: var(--text);
}

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

[data-layout="docs"] {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  grid-template-rows: auto;
  gap: var(--space-6);
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  align-items: start;
}

/* ── Left sidebar ───────────────────────────────────────────────────── */

[data-layout="docs"] > aside:first-of-type {
  position: sticky;
  top: calc(60px + var(--space-4));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  /* ASW-styled scrollbar — thin, subtle, no system chrome */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar {
  width: 4px;
}

[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-track {
  background: transparent;
}

[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
}

[data-layout="docs"] > aside:first-of-type::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

/* Sidebar nav — vertical list, no top-bar chrome */
[data-layout="docs"] > aside:first-of-type nav,
nav[data-nav="sidebar"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: none;
  gap: 0;
}

[data-layout="docs"] > aside:first-of-type nav small {
  display: block;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}

[data-layout="docs"] > aside:first-of-type nav small:first-child {
  margin-top: 0;
}

[data-layout="docs"] > aside:first-of-type nav ul,
nav[data-nav="sidebar"] ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

[data-layout="docs"] > aside:first-of-type nav ul li {
  margin: 0;
  padding: 0;
}

/* No pipe separators in sidebar */
[data-layout="docs"] > aside:first-of-type nav ul li + li::before,
nav[data-nav="sidebar"] ul li + li::before {
  display: none;
}

[data-layout="docs"] > aside:first-of-type nav a {
  display: block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-2);
  text-decoration: none;
  transition: background-color var(--ease), color var(--ease);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

[data-layout="docs"] > aside:first-of-type nav a:hover {
  background-color: var(--surface-hover);
  color: var(--text);
}

[data-layout="docs"] > aside:first-of-type nav a[aria-current] {
  background-color: var(--accent-subtle);
  color: var(--accent);
}

/* ── Main content ───────────────────────────────────────────────────── */

[data-layout="docs"] > article {
  min-width: 0;
}

/* ── Right TOC ──────────────────────────────────────────────────────── */

[data-layout="docs"] > aside[data-toc] {
  position: sticky;
  top: calc(60px + var(--space-4));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* TOC nav — vertical, compact, no top-bar chrome */
[data-layout="docs"] > aside[data-toc] nav,
nav[data-nav="toc"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border: none;
  gap: 0;
}

[data-layout="docs"] > aside[data-toc] small {
  display: block;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

[data-layout="docs"] > aside[data-toc] nav ul,
nav[data-nav="toc"] ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  font-size: var(--text-xs);
}

[data-layout="docs"] > aside[data-toc] nav ul li {
  margin: 0;
  padding: 0;
}

[data-layout="docs"] > aside[data-toc] nav ul li + li::before,
nav[data-nav="toc"] ul li + li::before {
  display: none;
}

[data-layout="docs"] > aside[data-toc] nav a {
  display: block;
  padding: 0.2rem var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-3);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

[data-layout="docs"] > aside[data-toc] nav a:hover {
  color: var(--text);
  border-left-color: var(--border);
}

[data-layout="docs"] > aside[data-toc] nav a[aria-current] {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ── Prev/Next navigation ───────────────────────────────────────────── */

[data-role="prev-next"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
  gap: var(--space-4);
}

[data-role="prev-next"] a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--text-2);
  max-width: 45%;
  transition: color var(--ease);
}

[data-role="prev-next"] a:hover {
  color: var(--accent);
}

[data-role="prev-next"] a[rel="prev"] {
  align-items: flex-start;
}

[data-role="prev-next"] a[rel="next"] {
  align-items: flex-end;
  margin-left: auto;
}

[data-role="prev-next"] small {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-role="prev-next"] span {
  font-size: var(--text-sm);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  [data-layout="docs"] {
    grid-template-columns: 200px 1fr;
  }
  [data-layout="docs"] > aside[data-toc] {
    display: none;
  }
}

@media (max-width: 768px) {
  [data-layout="docs"] {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }
  [data-layout="docs"] > aside:first-of-type {
    display: none;
  }
}

/* Allow <main> as content column in docs layout — override body > main container sizing */
[data-layout="docs"] > main {
  max-width: none;
  min-width: 0;
}

/* ── Grid helpers ───────────────────────────────────────────────────── */

[data-layout="grid-2"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

[data-layout="grid-3"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

[data-layout="card-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

[data-layout="stats"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

[data-layout="stats"] > * {
  flex: 1;
  min-width: 120px;
}

[data-layout="stats"] [data-stat="value"],
[data-layout="stats"] .value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-7);
  color: var(--accent);
  display: block;
}

[data-layout="stats"] [data-stat="label"],
[data-layout="stats"] .label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

@media (max-width: 768px) {
  [data-layout="grid-2"],
  [data-layout="grid-3"] {
    grid-template-columns: 1fr;
  }
}

/* ── Prose layout ───────────────────────────────────────────────────── */
/* Reading-optimised width. ~65 characters per line — Bringhurst/LaTeX  */
/* standard for comfortable prose. Use on <main> or any block element.  */

main[data-layout="prose"],
[data-layout="prose"] {
  max-width: 65ch;
  margin-inline: auto;
}

/* ── Timeline layout ────────────────────────────────────────────────── */
/* Chronological spine: vertical accent line, node per event.           */
/* Usage: <ol data-layout="timeline"> <li> <time>…</time> <article>     */
/* Issue: agentic-semantic-web#54                                        */

[data-layout="timeline"] {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  position: relative;
}

/* Vertical spine */
[data-layout="timeline"]::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--border);
}

[data-layout="timeline"] > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--space-5);
  align-items: start;
  padding-left: calc(1.2rem + var(--space-3));
  margin-bottom: var(--space-6);
  position: relative;
}

[data-layout="timeline"] > li:last-child {
  margin-bottom: 0;
}

/* Node dot */
[data-layout="timeline"] > li::before {
  content: "";
  position: absolute;
  left: 0.275rem;
  top: 0.45rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Time element */
[data-layout="timeline"] > li > time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  padding-top: 0.1em;
  display: block;
  margin-bottom: var(--space-1);
}

/* Content */
[data-layout="timeline"] > li > article,
[data-layout="timeline"] > li > div {
  min-width: 0;
}

[data-layout="timeline"] > li > article > :first-child,
[data-layout="timeline"] > li > div > :first-child {
  margin-top: 0;
}

/* Alternate variant: alternating left/right */
[data-layout="timeline alternate"] > li:nth-child(even) {
  direction: rtl;
}

[data-layout="timeline alternate"] > li:nth-child(even) > * {
  direction: ltr;
}

/* ── Report layout ──────────────────────────────────────────────────── */
/* Print-first document layout. Clean on screen, correct on paper.      */
/* Light surface. Constrained width. Print stylesheet built in.         */
/* Issue: agentic-semantic-web#56                                        */

[data-layout="report"] {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: var(--leading);
}

[data-layout="report"] > header,
[data-layout="report"] > main,
[data-layout="report"] > footer {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

[data-layout="report"] > header {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-6);
}

[data-layout="report"] > header h1 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-3);
  color: var(--text);
}

[data-layout="report"] > main {
  padding-bottom: var(--space-8);
}

[data-layout="report"] > footer {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Print styles */
@media print {
  [data-layout="report"] {
    --surface: #ffffff;
    --text: #000000;
    font-size: 11pt;
  }

  [data-layout="report"] > header {
    page-break-after: avoid;
  }

  [data-layout="report"] h2,
  [data-layout="report"] h3 {
    page-break-after: avoid;
  }

  [data-layout="report"] pre,
  [data-layout="report"] table,
  [data-layout="report"] figure {
    page-break-inside: avoid;
  }

  [data-layout="report"] a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  [data-layout="report"] a[href^="#"]::after {
    content: "";
  }

  [data-layout="report"] nav,
  [data-layout="report"] [data-no-print] {
    display: none !important;
  }
}