Vigilio Desto
9fd9096f0a
- Rewrite 00-reset.css with :where()-wrapped zero-specificity rules - Fix README token docs (--asw-* was incorrect, actual tokens use bare --*) - Add watch.py (pyinotify-based auto-rebuild of dist/asw.css on src/ changes)
5394 lines
174 KiB
CSS
5394 lines
174 KiB
CSS
/**
|
||
* tokens.css — Native CSS token system
|
||
* Replaces @import "open-props/open-props.min.css" for ASW v0.1
|
||
*
|
||
* Everything in this file is hand-authored, native CSS.
|
||
* No external dependencies. ~4KB gzipped.
|
||
*
|
||
* Values derived from OpenProps (MIT license), rounded to native oklch.
|
||
* v0.1 establishes a new visual baseline — minor perceptual differences
|
||
* from OpenProps are accepted and documented in CHANGELOG.
|
||
*/
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════════
|
||
CUSTOM MEDIA QUERIES — replaced open-props/media.min.css
|
||
════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@custom-media --sm-n-above (width >= 576px);
|
||
@custom-media --md-n-above (width >= 768px);
|
||
@custom-media --md-n-below (width < 768px);
|
||
@custom-media --lg-n-above (width >= 992px);
|
||
@custom-media --xl-n-above (width >= 1200px);
|
||
@custom-media --xxl-n-above (width >= 1400px);
|
||
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
||
|
||
/* Project-specific custom media */
|
||
@custom-media --docs-toc-hidden (width < 1100px);
|
||
@custom-media --nav-compact (width < 991px);
|
||
@custom-media --compact (width < 640px);
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════════
|
||
ANIMATIONS — replaced open-props @keyframes
|
||
════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@keyframes fade-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes asw-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════════
|
||
:ROOT TOKENS
|
||
════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
FONT STACKS — replaced open-props font families
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', sans-serif;
|
||
--font-monospace-code: 'Dank Mono', 'Operator Mono', 'Inconsolata', 'Fira Code', 'JetBrains Mono',
|
||
'Menlo', 'Monaco', 'Cascadia Code', 'SF Mono', monospace;
|
||
--font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
FONT SIZES — replaced open-props font-size scale
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--font-size-0: 0.75rem; /* 12px @ 16px base */
|
||
--font-size-1: 1rem; /* 16px */
|
||
--font-size-4: 1.5rem; /* 24px */
|
||
--font-size-5: 2rem; /* 32px */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
FONT WEIGHTS — replaced open-props font-weight scale
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--font-weight-2: 200; /* light */
|
||
--font-weight-4: 400; /* normal */
|
||
--font-weight-5: 500; /* medium */
|
||
--font-weight-6: 600; /* semibold */
|
||
--font-weight-7: 700; /* bold */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
LINE HEIGHTS — replaced open-props font-lineheight scale
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--font-lineheight-1: 1.25;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
SIZE SCALE — replaced open-props size-* tokens
|
||
Used for spacing, dimensions, and component sizing.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--size-1: 0.25rem; /* 4px */
|
||
--size-2: 0.5rem; /* 8px */
|
||
--size-3: 1rem; /* 16px */
|
||
--size-5: 1.5rem; /* 24px */
|
||
--size-7: 2rem; /* 32px */
|
||
--size-9: 4rem; /* 64px */
|
||
--size-12: 10rem; /* 160px */
|
||
|
||
/* Pixel-precise sizes for component dimensions */
|
||
--size-px-11: 120px; /* chart radial size */
|
||
--size-px-12: 160px; /* dropdown min-width */
|
||
--size-px-14: 320px; /* tooltip max-width */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
BORDER SIZES — replaced open-props border-size scale
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--border-size-2: 2px;
|
||
--border-size-3: 4px;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
BORDER RADIUS — replaced open-props radius-* tokens
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--radius-1: 2px;
|
||
--radius-2: 5px;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
SHADOWS — replaced open-props shadow-* tokens
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--shadow-2: 0 1px 2px -1px rgba(0,0,0,0.20),
|
||
0 2px 4px rgba(0,0,0,0.06),
|
||
0 1px 8px rgba(0,0,0,0.04);
|
||
--shadow-4: 0 8px 12px -4px rgba(0,0,0,0.20),
|
||
0 12px 24px rgba(0,0,0,0.12),
|
||
0 4px 6px rgba(0,0,0,0.04);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
EASING CURVES — replaced open-props ease-* tokens
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--ease-1: cubic-bezier(0.25, 0.1, 0.25, 1.0); /* ease-in-out standard */
|
||
--ease-2: cubic-bezier(0.33, 1.0, 0.68, 1.0); /* ease-out decel */
|
||
--ease-3: cubic-bezier(0.25, 1.0, 0.50, 1.0); /* ease-out soft */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
DURATIONS — replaced open-props duration-* tokens
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--duration-quick-1: 80ms;
|
||
--duration-quick-2: 150ms;
|
||
--duration-moderate-1: 180ms;
|
||
--duration-gentle-1: 320ms;
|
||
--duration-gentle-2: 500ms;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Z-INDEX LAYERS — replaced open-props layer-* tokens
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--layer-4: 40;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
COLOR SCALE (oklch, hue = var(--palette-hue))
|
||
Replaces open-props --color-* perceptual scale for light mode.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--color-1: oklch(98% 0.005 250); /* near-white */
|
||
--color-2: oklch(97% 0.007 250); /* white */
|
||
--color-3: oklch(93% 0.010 250); /* off-white */
|
||
--color-4: oklch(84% 0.015 250); /* light */
|
||
--color-8: oklch(58% 0.030 250); /* mid-grey */
|
||
--color-9: oklch(53% 0.040 250); /* grey */
|
||
--color-10: oklch(49% 0.040 250); /* grey-charcoal */
|
||
--color-11: oklch(42% 0.040 250); /* charcoal */
|
||
--color-12: oklch(35% 0.040 250); /* dark */
|
||
--color-13: oklch(28% 0.040 250); /* darker */
|
||
--color-14: oklch(20% 0.030 250); /* near-black */
|
||
--color-15: oklch(15% 0.030 250); /* black */
|
||
--color-16: oklch(10% 0.030 250); /* deep black */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
NAMED HUED COLORS — replaced open-props orange/teal/cyan/purple/pink
|
||
Used in syntax highlighting (02-typography.css) and chart fallbacks.
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--orange-4: oklch(75% 0.18 50); /* orange mid */
|
||
--orange-5: oklch(68% 0.18 50); /* orange deep */
|
||
--orange-7: oklch(55% 0.18 50); /* orange darker (light mode) */
|
||
--orange-8: oklch(50% 0.18 50); /* orange darkest (light mode) */
|
||
|
||
--teal-4: oklch(75% 0.15 185);
|
||
--teal-5: oklch(68% 0.15 185);
|
||
--teal-8: oklch(50% 0.15 185); /* teal dark (light mode) */
|
||
|
||
--cyan-4: oklch(72% 0.15 210);
|
||
--cyan-5: oklch(65% 0.15 210);
|
||
--cyan-9: oklch(45% 0.15 210); /* cyan dark (light mode) */
|
||
|
||
--purple-5: oklch(60% 0.15 300);
|
||
--pink-5: oklch(60% 0.15 350);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
PALETTE CONTROLS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--palette-hue: 250; /* blue-violet default */
|
||
--palette-chroma: 0.15;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
SURFACES — oklch for fine-grained dark steps
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--surface: oklch(12% 0.02 var(--palette-hue));
|
||
--surface-1: oklch(15% 0.02 var(--palette-hue));
|
||
--surface-2: oklch(18% 0.02 var(--palette-hue));
|
||
--surface-3: oklch(21% 0.02 var(--palette-hue));
|
||
--surface-card: var(--surface-1);
|
||
--surface-hover: oklch(22% 0.03 var(--palette-hue));
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
TEXT
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--text: oklch(92% 0.02 var(--palette-hue));
|
||
--text-2: oklch(78% 0.03 var(--palette-hue));
|
||
--text-3: oklch(62% 0.03 var(--palette-hue));
|
||
--text-dim: oklch(48% 0.03 var(--palette-hue));
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
ACCENT — peak chroma, palette-driven
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--accent: oklch(65% var(--palette-chroma) var(--palette-hue));
|
||
--accent-hover: oklch(72% var(--palette-chroma) var(--palette-hue));
|
||
--on-accent: oklch(5% 0.02 var(--palette-hue));
|
||
--accent-focus: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.35);
|
||
--accent-subtle: oklch(65% var(--palette-chroma) var(--palette-hue) / 0.10);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
LINKS — fixed blue hue
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--link: oklch(65% 0.15 250);
|
||
--link-hover: oklch(72% 0.15 250);
|
||
--link-underline: oklch(65% 0.08 250);
|
||
--link-hover-underline: oklch(72% 0.10 250);
|
||
--link-focus: oklch(65% 0.06 250);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
SECONDARY ACCENTS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--accent-blue: oklch(65% 0.15 250);
|
||
--accent-red: oklch(65% 0.18 25);
|
||
--accent-orange: oklch(75% 0.15 80);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
BORDERS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--border: oklch(25% 0.03 var(--palette-hue));
|
||
--border-subtle: oklch(20% 0.02 var(--palette-hue));
|
||
--border-width: 1px;
|
||
--outline-width: 2px;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
FONT STACK ALIASES
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--font-heading: var(--font-neo-grotesque);
|
||
--font-ui: var(--font-neo-grotesque);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
TYPOGRAPHY SCALE
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--text-xs: var(--font-size-0); /* 0.75rem */
|
||
--text-sm: 0.875rem; /* 0.875rem */
|
||
--text-base: var(--font-size-1); /* 1rem */
|
||
--text-2xl: var(--font-size-4); /* 1.5rem */
|
||
--text-3xl: var(--font-size-5); /* 2rem */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
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);
|
||
--h2-weight: var(--font-weight-4);
|
||
--h3-weight: var(--font-weight-4);
|
||
--h4-weight: var(--font-weight-5);
|
||
--h5-weight: var(--font-weight-6);
|
||
--h6-weight: var(--font-weight-6);
|
||
|
||
--h1-color: oklch(95% 0.02 var(--palette-hue));
|
||
--h2-color: oklch(90% 0.02 var(--palette-hue));
|
||
--h3-color: oklch(85% 0.03 var(--palette-hue));
|
||
--h4-color: oklch(78% 0.03 var(--palette-hue));
|
||
--h5-color: oklch(72% 0.03 var(--palette-hue));
|
||
--h6-color: oklch(65% 0.03 var(--palette-hue));
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
SPACING ALIASES
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--space-1: var(--size-1); /* 0.25rem */
|
||
--space-2: var(--size-2); /* 0.50rem */
|
||
--space-3: 0.75rem; /* 0.75rem */
|
||
--space-4: var(--size-3); /* 1.00rem */
|
||
--space-5: var(--size-5); /* 1.50rem */
|
||
--space-5a: 1.25rem; /* between --space-4 and --space-5 */
|
||
--space-6: var(--size-7); /* 2.00rem */
|
||
--space-8: var(--size-9); /* 4.00rem */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
LAYOUT TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--width-sm: 510px;
|
||
--width-md: 700px;
|
||
--width-lg: 950px;
|
||
--width-xl: 1200px;
|
||
--width-2xl: 1450px;
|
||
|
||
--width-prose: 65ch;
|
||
--width-report: 72ch;
|
||
--width-content: 64rem; /* 1024px */
|
||
|
||
--container-padding: var(--space-4);
|
||
|
||
--sidebar-link-max: var(--size-12);
|
||
--sidebar-min: 10rem;
|
||
--sidebar-max: 14rem;
|
||
--toc-min: 10rem;
|
||
--toc-max: 13rem;
|
||
--nav-height: 60px;
|
||
--docs-max-width: 1400px;
|
||
--card-min-width: 280px;
|
||
--tooltip-max-width: var(--size-px-14);
|
||
|
||
--grid-gap: var(--space-5);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
CHART DIMENSIONS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--chart-radial-size: var(--size-px-11);
|
||
--chart-radial-inset: 18px;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
DIFF VIEWER TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--diff-add-bg: color-mix(in oklch, var(--ok) 10%, transparent);
|
||
--diff-remove-bg: color-mix(in oklch, var(--error) 10%, transparent);
|
||
--diff-remove-text: oklch(88% 0.06 25);
|
||
--diff-hunk-bg: color-mix(in oklch, var(--info) 7%, transparent);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
AI-DISCLOSURE BORDER TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--ai-generated-border: color-mix(in oklch, var(--ok) 25%, transparent);
|
||
--ai-assisted-border: color-mix(in oklch, var(--info) 20%, transparent);
|
||
--ai-mixed-border: color-mix(in oklch, var(--warn) 30%, transparent);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
RHYTHM
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--type-space: var(--space-4);
|
||
--type-space-top: var(--space-5);
|
||
--leading: 1.6;
|
||
--leading-tight: var(--font-lineheight-1); /* 1.25 */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
RADIUS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--radius-sm: var(--radius-1); /* 2px */
|
||
--radius-md: 4px; /* between radius-1 and radius-2 */
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
EASING
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--ease: var(--duration-moderate-1) var(--ease-3);
|
||
--ease-fast: var(--duration-quick-1) var(--ease-2);
|
||
--spinner-duration: var(--duration-gentle-1);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
INLINE ELEMENT TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--selection: oklch(65% 0.08 250 / 0.30);
|
||
--mark-bg: oklch(45% 0.10 80 / 0.40);
|
||
--mark-color: var(--accent-orange);
|
||
--kbd-bg: var(--text);
|
||
--kbd-color: var(--surface);
|
||
--code-color: var(--text-2);
|
||
--table-stripe: oklch(8% 0.01 var(--palette-hue) / 0.50);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
FORM TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--input-bg: var(--surface-1);
|
||
--input-border: var(--border);
|
||
--input-active-bg: var(--surface);
|
||
--input-selected: color-mix(in oklch, var(--accent) 20%, transparent);
|
||
--input-px: var(--space-4);
|
||
--input-py: var(--space-3);
|
||
--disabled-opacity: 0.5;
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
STATE COLORS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--ok: oklch(75% 0.15 145);
|
||
--warn: oklch(75% 0.15 80);
|
||
--error: oklch(75% 0.15 25);
|
||
--info: oklch(75% 0.15 250);
|
||
--blocked: oklch(48% 0.03 var(--palette-hue));
|
||
|
||
--error-active: oklch(65% 0.18 25);
|
||
--error-focus: oklch(65% 0.06 25);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
COMPONENT TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--track-bg: var(--surface-2);
|
||
--modal-overlay: oklch(5% 0.01 var(--palette-hue) / 0.80);
|
||
--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");
|
||
|
||
/* Font weight aliases */
|
||
--weight-light: var(--font-weight-2);
|
||
--weight-normal: var(--font-weight-4);
|
||
--weight-medium: var(--font-weight-5);
|
||
--weight-semibold: var(--font-weight-6);
|
||
--weight-bold: var(--font-weight-7);
|
||
|
||
/* Shadows */
|
||
--shadow-dropdown: var(--shadow-2);
|
||
--shadow-modal: var(--shadow-4);
|
||
|
||
/* Focus ring & border widths */
|
||
--focus-ring-width: var(--border-size-2);
|
||
--border-width-thick: var(--border-size-3);
|
||
|
||
/* Dropdown */
|
||
--dropdown-min-width: var(--size-px-12);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
SYNTAX HIGHLIGHTING TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--syntax-comment: oklch(48% 0.03 var(--palette-hue));
|
||
--syntax-punctuation: oklch(48% 0.03 var(--palette-hue));
|
||
--syntax-string: oklch(75% 0.15 145);
|
||
--syntax-keyword: oklch(72% 0.15 250);
|
||
--syntax-property: oklch(65% 0.15 250);
|
||
--syntax-variable: oklch(75% 0.15 80);
|
||
--syntax-deleted: oklch(75% 0.15 25);
|
||
--syntax-inserted: oklch(75% 0.15 145);
|
||
--syntax-namespace: oklch(75% 0.15 80);
|
||
--syntax-url: var(--link);
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
UTILITY TOKENS
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
--print-surface: oklch(100% 0 0);
|
||
--print-text: oklch(0% 0 0);
|
||
--absolute-black: oklch(0% 0 0);
|
||
--hc-border: var(--color-10);
|
||
--hc-text: var(--color-1);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════════
|
||
LIGHT MODE — override semantic aliases using native oklch values
|
||
════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (prefers-color-scheme: light) {
|
||
:root {
|
||
color-scheme: light;
|
||
|
||
--surface: var(--color-1);
|
||
--surface-1: var(--color-2);
|
||
--surface-2: var(--color-3);
|
||
--surface-card: var(--color-1);
|
||
--surface-hover: var(--color-2);
|
||
|
||
--text: var(--color-14);
|
||
--text-2: var(--color-12);
|
||
--text-3: var(--color-10);
|
||
--text-dim: var(--color-8);
|
||
|
||
--accent: var(--color-9);
|
||
--accent-hover: var(--color-10);
|
||
--on-accent: var(--color-1);
|
||
|
||
--border: var(--color-4);
|
||
--border-subtle: var(--color-3);
|
||
|
||
--link: oklch(45% 0.15 250);
|
||
--link-hover: oklch(38% 0.15 250);
|
||
--link-underline: oklch(45% 0.08 250);
|
||
--link-hover-underline: oklch(38% 0.10 250);
|
||
--link-focus: oklch(45% 0.06 250);
|
||
|
||
--h1-color: var(--color-16);
|
||
--h2-color: var(--color-15);
|
||
--h3-color: var(--color-14);
|
||
--h4-color: var(--color-13);
|
||
--h5-color: var(--color-12);
|
||
--h6-color: var(--color-11);
|
||
|
||
--ok: oklch(40% 0.15 145);
|
||
--warn: oklch(40% 0.15 80);
|
||
--error: oklch(40% 0.15 25);
|
||
--info: oklch(40% 0.15 250);
|
||
|
||
--mark-bg: oklch(92% 0.08 80);
|
||
--mark-color: var(--color-15);
|
||
--selection: oklch(80% 0.06 250);
|
||
|
||
--syntax-comment: var(--color-8);
|
||
--syntax-punctuation: var(--color-10);
|
||
--syntax-string: oklch(40% 0.15 145);
|
||
--syntax-keyword: oklch(38% 0.15 250);
|
||
--syntax-property: oklch(45% 0.15 250);
|
||
--syntax-variable: oklch(40% 0.15 80);
|
||
--syntax-deleted: oklch(40% 0.15 25);
|
||
--syntax-inserted: oklch(40% 0.15 145);
|
||
--syntax-namespace: oklch(40% 0.15 80);
|
||
--syntax-url: var(--link);
|
||
}
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════════
|
||
MANUAL THEME OVERRIDE — data-theme attribute on <html>
|
||
════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
:root[data-theme="light"] {
|
||
color-scheme: light;
|
||
|
||
--surface: var(--color-1);
|
||
--surface-1: var(--color-2);
|
||
--surface-2: var(--color-3);
|
||
--surface-card: var(--color-1);
|
||
--surface-hover: var(--color-2);
|
||
|
||
--text: var(--color-14);
|
||
--text-2: var(--color-12);
|
||
--text-3: var(--color-10);
|
||
--text-dim: var(--color-8);
|
||
|
||
--accent: var(--color-9);
|
||
--accent-hover: var(--color-10);
|
||
--on-accent: var(--color-1);
|
||
|
||
--border: var(--color-4);
|
||
--border-subtle: var(--color-3);
|
||
|
||
--link: oklch(45% 0.15 250);
|
||
--link-hover: oklch(38% 0.15 250);
|
||
--link-underline: oklch(45% 0.08 250);
|
||
--link-hover-underline: oklch(38% 0.10 250);
|
||
--link-focus: oklch(45% 0.06 250);
|
||
|
||
--h1-color: var(--color-16);
|
||
--h2-color: var(--color-15);
|
||
--h3-color: var(--color-14);
|
||
--h4-color: var(--color-13);
|
||
--h5-color: var(--color-12);
|
||
--h6-color: var(--color-11);
|
||
|
||
--ok: oklch(40% 0.15 145);
|
||
--warn: oklch(40% 0.15 80);
|
||
--error: oklch(40% 0.15 25);
|
||
--info: oklch(40% 0.15 250);
|
||
|
||
--mark-bg: oklch(92% 0.08 80);
|
||
--mark-color: var(--color-15);
|
||
--selection: oklch(80% 0.06 250);
|
||
|
||
--syntax-comment: var(--color-8);
|
||
--syntax-punctuation: var(--color-10);
|
||
--syntax-string: oklch(40% 0.15 145);
|
||
--syntax-keyword: oklch(38% 0.15 250);
|
||
--syntax-property: oklch(45% 0.15 250);
|
||
--syntax-variable: oklch(40% 0.15 80);
|
||
--syntax-deleted: oklch(40% 0.15 25);
|
||
--syntax-inserted: oklch(40% 0.15 145);
|
||
--syntax-namespace: oklch(40% 0.15 80);
|
||
--syntax-url: var(--link);
|
||
}
|
||
|
||
:root[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════════
|
||
RESPONSIVE FONT SCALING
|
||
════════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (--lg-n-above) { html { font-size: 103%; } }
|
||
@media (--xl-n-above) { html { font-size: 106%; } }
|
||
@media (--xxl-n-above) { html { font-size: 109%; } }
|
||
/**
|
||
* 00-reset.css — Modern CSS reset
|
||
* Normalizes user-agent styles across browsers.
|
||
*
|
||
* Based on: Josh W. Comeau (2021-2025), David Bushell (2025),
|
||
* Andy Bell / Piccalilli (2023), Elad Shechter (2021).
|
||
*
|
||
* All selectors wrapped in :where() to zero specificity —
|
||
* any ASW layer file can override with a single element selector.
|
||
*
|
||
* Design-agnostic. No ASW tokens referenced.
|
||
*/
|
||
|
||
/* ── Box sizing ────────────────────────────────────────────────── */
|
||
|
||
:where(*, *::before, *::after) {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ── Remove default margin (except dialog which uses margin: auto) ── */
|
||
|
||
:where(*:not(dialog)) {
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── Remove default list styling ────────────────────────────────── */
|
||
|
||
:where(ul, ol) {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
/* ── Document root ──────────────────────────────────────────────── */
|
||
|
||
: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;
|
||
hanging-punctuation: first allow-end last;
|
||
cursor: default;
|
||
}
|
||
|
||
/* ── Body baseline ──────────────────────────────────────────────── */
|
||
|
||
:where(body) {
|
||
min-block-size: 100svb;
|
||
min-inline-size: 300px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* ── Animations and transitions ─────────────────────────────────── */
|
||
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
:where(html) {
|
||
interpolate-size: allow-keywords;
|
||
}
|
||
}
|
||
|
||
/* ── Media elements ─────────────────────────────────────────────── */
|
||
|
||
:where(img, picture, video, canvas, svg) {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* ── Form controls ──────────────────────────────────────────────── */
|
||
|
||
:where(input, button, textarea, select) {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
:where(button) {
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
:where(textarea) {
|
||
resize: vertical;
|
||
}
|
||
|
||
/* ── Anchor reset ───────────────────────────────────────────────── */
|
||
|
||
:where(a) {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* ── Typography overflow ────────────────────────────────────────── */
|
||
|
||
:where(p, h1, h2, h3, h4, h5, h6, li, figcaption, blockquote) {
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
|
||
/* ── Line wrapping quality ──────────────────────────────────────── */
|
||
|
||
:where(p, li, figcaption, blockquote) {
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
:where(h1, h2, h3, h4, h5, h6) {
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* ── Horizontal rule ────────────────────────────────────────────── */
|
||
|
||
:where(hr) {
|
||
border: none;
|
||
border-top: 1px solid currentColor;
|
||
color: inherit;
|
||
}
|
||
|
||
/* ── Table ───────────────────────────────────────────────────────── */
|
||
|
||
:where(table) {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
/* ── Code / pre ─────────────────────────────────────────────────── */
|
||
|
||
:where(pre) {
|
||
overflow-x: auto;
|
||
white-space: pre;
|
||
}
|
||
|
||
/* ── Focus visible ──────────────────────────────────────────────── */
|
||
|
||
:where(:focus-visible) {
|
||
outline: 2px solid currentColor;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ── Remove default fieldset border ──────────────────────────────── */
|
||
|
||
:where(fieldset) {
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
/**
|
||
* 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 {
|
||
font-family: var(--font-ui);
|
||
}
|
||
|
||
/* ── Top nav layout ──────────────────────────────────────────────────── */
|
||
/* Scoped to body > nav — sidebar and other navs are not affected. */
|
||
|
||
body > nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
overflow: visible;
|
||
}
|
||
|
||
body > nav ul {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
body > nav li {
|
||
display: inline-block;
|
||
margin: 0;
|
||
padding: var(--space-2) var(--space-3);
|
||
}
|
||
|
||
body > nav li a {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
color: var(--text);
|
||
padding: var(--space-2) var(--space-3);
|
||
margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
body > nav li a:hover {
|
||
color: var(--accent);
|
||
background: var(--surface-hover);
|
||
}
|
||
|
||
body > nav li strong,
|
||
body > nav li b {
|
||
color: var(--text);
|
||
}
|
||
|
||
@media (--md-n-below) {
|
||
body > nav { flex-wrap: wrap; gap: var(--space-2); }
|
||
body > nav ul { flex-wrap: wrap; gap: var(--space-1); }
|
||
}
|
||
|
||
/* ── Typography: Paragraphs ────────────────────────────────────────── */
|
||
|
||
p {
|
||
margin-top: 0;
|
||
margin-bottom: var(--type-space);
|
||
color: var(--text);
|
||
font-style: normal;
|
||
font-weight: var(--weight-normal);
|
||
}
|
||
|
||
/* ── Typography: Lists ─────────────────────────────────────────────── */
|
||
|
||
address,
|
||
dl,
|
||
ol,
|
||
ul {
|
||
margin-top: 0;
|
||
margin-bottom: var(--type-space);
|
||
color: var(--text);
|
||
font-style: normal;
|
||
font-weight: var(--weight-normal);
|
||
}
|
||
|
||
: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-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: var(--space-1) solid var(--border);
|
||
border-inline-start: var(--space-1) 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: var(--border-width) 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: var(--border-width) 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(--weight-normal);
|
||
}
|
||
|
||
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(--weight-normal);
|
||
text-align: left;
|
||
}
|
||
|
||
thead th,
|
||
thead td {
|
||
font-weight: 600;
|
||
border-bottom-width: var(--focus-ring-width);
|
||
}
|
||
|
||
tfoot th,
|
||
tfoot td {
|
||
border-top: var(--border-width) solid var(--border);
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/* Striped tables (class-based but useful) */
|
||
[data-table="striped"] tbody tr:nth-child(odd) th,
|
||
[data-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(--weight-normal);
|
||
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.
|
||
* agentic.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(--syntax-comment);
|
||
font-style: italic;
|
||
}
|
||
|
||
.token.punctuation {
|
||
color: var(--text-3); /* slightly muted */
|
||
}
|
||
|
||
.token.tag,
|
||
.token.deleted {
|
||
color: var(--syntax-deleted);
|
||
}
|
||
|
||
.token.attr-name,
|
||
.token.namespace {
|
||
color: var(--syntax-namespace);
|
||
}
|
||
|
||
.token.string,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.inserted {
|
||
color: var(--syntax-string);
|
||
}
|
||
|
||
.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(--syntax-keyword);
|
||
}
|
||
|
||
.token.function,
|
||
.token.class-name {
|
||
color: var(--cyan-4); /* function/class names */
|
||
}
|
||
|
||
.token.property {
|
||
color: var(--syntax-property);
|
||
}
|
||
|
||
.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(--syntax-variable);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
.token.bold { font-weight: var(--weight-bold); }
|
||
.token.italic { font-style: italic; }
|
||
|
||
/* Light mode overrides */
|
||
@media (prefers-color-scheme: light) {
|
||
.token.comment,
|
||
.token.prolog,
|
||
.token.doctype,
|
||
.token.cdata { color: var(--syntax-comment); }
|
||
|
||
.token.punctuation { color: var(--syntax-punctuation); }
|
||
|
||
.token.tag,
|
||
.token.deleted { color: var(--syntax-deleted); }
|
||
|
||
.token.attr-name,
|
||
.token.namespace { color: var(--syntax-namespace); }
|
||
|
||
.token.string,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.inserted { color: var(--syntax-string); }
|
||
|
||
.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(--syntax-keyword); }
|
||
|
||
.token.function,
|
||
.token.class-name { color: var(--cyan-9); }
|
||
|
||
.token.property { color: var(--syntax-property); }
|
||
|
||
.token.operator,
|
||
.token.entity,
|
||
.token.url { color: var(--syntax-url); }
|
||
|
||
.token.regex { color: var(--orange-7); }
|
||
|
||
.token.important,
|
||
.token.variable { color: var(--syntax-variable); }
|
||
}
|
||
|
||
/* ── 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: auto;
|
||
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 (--sm-n-above) {
|
||
dialog > article {
|
||
max-width: var(--width-sm);
|
||
}
|
||
}
|
||
|
||
@media (--md-n-above) {
|
||
dialog > article {
|
||
max-width: var(--width-md);
|
||
}
|
||
}
|
||
|
||
/* 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: var(--duration-moderate-1);
|
||
animation-timing-function: ease-in-out;
|
||
animation-fill-mode: both;
|
||
}
|
||
|
||
:where(.modal-is-opening, .modal-is-closing) dialog {
|
||
animation-duration: var(--duration-gentle-2);
|
||
animation-name: modal-overlay;
|
||
}
|
||
|
||
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||
animation-delay: var(--duration-moderate-1);
|
||
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 calc(var(--duration-gentle-2) * 2) 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);
|
||
}
|
||
|
||
/* Container layout rules moved to 08-layout.css */
|
||
/**
|
||
* 03-landmarks.css
|
||
* HTML landmark elements — structural bones of a page.
|
||
* Part of: Agentic Semantic Web
|
||
*
|
||
* Covers: body > nav, article, aside, section, hgroup, dt/dd, body > footer
|
||
*/
|
||
|
||
/* ── Navigation ────────────────────────────────────────────────────────*/
|
||
/* Semantic nav: <nav><strong>Brand</strong><ul><li><a>...</a></li></ul></nav> */
|
||
|
||
body > nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding: var(--space-5) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
||
margin-bottom: var(--space-6);
|
||
border-bottom: var(--border-width) solid var(--border);
|
||
}
|
||
|
||
/* Push nav-links and buttons to the right */
|
||
body > nav [data-nav-links] {
|
||
margin-inline-start: auto;
|
||
}
|
||
|
||
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 var(--ease);
|
||
}
|
||
|
||
body > nav a:hover,
|
||
body > nav a[aria-current="page"] {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Theme toggle ─────────────────────────────────────────────────────*/
|
||
|
||
body > nav [data-theme-toggle] {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1.25rem;
|
||
padding: var(--space-2);
|
||
color: var(--text-2);
|
||
transition: color var(--ease-3);
|
||
line-height: 1;
|
||
}
|
||
|
||
body > nav [data-theme-toggle]::before {
|
||
content: "☀️";
|
||
}
|
||
|
||
[data-theme="light"] body > nav [data-theme-toggle]::before {
|
||
content: "🌙";
|
||
}
|
||
|
||
body > nav [data-theme-toggle]:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Hamburger toggle ─────────────────────────────────────────────────*/
|
||
|
||
body > nav [data-nav-toggle] {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1.5rem;
|
||
padding: var(--space-1) var(--space-2);
|
||
color: var(--text-2);
|
||
transition: color var(--ease-3);
|
||
line-height: 1;
|
||
}
|
||
|
||
body > nav [data-nav-toggle]::before {
|
||
content: "☰";
|
||
}
|
||
|
||
body > nav [data-nav-toggle]:hover {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Mobile nav ───────────────────────────────────────────────────────*/
|
||
@media (--md-n-below) {
|
||
body > nav {
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
body > nav > ul:first-child {
|
||
order: 1;
|
||
}
|
||
|
||
body > nav [data-nav-toggle] {
|
||
display: block;
|
||
order: 2;
|
||
margin-inline-start: auto;
|
||
}
|
||
|
||
body > nav [data-theme-toggle] {
|
||
order: 3;
|
||
}
|
||
|
||
body > nav [data-nav-links] {
|
||
order: 4;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
padding-top: var(--space-3);
|
||
border-top: var(--border-width) solid var(--border);
|
||
margin-top: var(--space-2);
|
||
animation: fade-in var(--ease-3);
|
||
}
|
||
|
||
body > nav [data-nav-links] li + li::before {
|
||
display: none;
|
||
}
|
||
|
||
body > nav [data-nav-links] a {
|
||
display: block;
|
||
padding: var(--space-2) 0;
|
||
}
|
||
|
||
body > nav [data-nav-links][data-collapsed] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ── 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: var(--space-4) var(--space-5a);
|
||
/* margin: var(--space-3) 0; */
|
||
}
|
||
|
||
article > header {
|
||
margin: 0 0 var(--space-2) 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: var(--space-5) var(--space-6);
|
||
}
|
||
|
||
article > header {
|
||
margin-bottom: var(--space-3);
|
||
padding-bottom: var(--space-2);
|
||
}
|
||
}
|
||
|
||
/* ── 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: var(--space-3);
|
||
}
|
||
|
||
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 ──────────────────────────────────────────────────────────*/
|
||
|
||
article section + section,
|
||
main section + section {
|
||
padding-top: var(--space-5);
|
||
border-top: var(--border-width) solid var(--border-subtle);
|
||
}
|
||
|
||
hgroup p {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
/* 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 {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-6);
|
||
margin-top: var(--space-8);
|
||
padding: var(--space-6) max(var(--container-padding), calc((100% - var(--width-xl)) / 2));
|
||
border-top: var(--border-width) solid var(--border);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--text-3);
|
||
}
|
||
|
||
body > footer > p {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
body > footer h3 {
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-medium);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
body > footer > header strong {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-base);
|
||
color: var(--text);
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
body > footer > header p {
|
||
color: var(--text-dim);
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
body > footer ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
body > footer ul li {
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
body > footer a {
|
||
color: var(--text-3);
|
||
text-decoration: none;
|
||
transition: color var(--ease-3);
|
||
}
|
||
|
||
body > footer a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
body > footer > p {
|
||
margin-top: var(--space-6);
|
||
padding-top: var(--space-4);
|
||
border-top: var(--border-width) solid var(--border-subtle);
|
||
text-align: center;
|
||
color: var(--text-dim);
|
||
}
|
||
/**
|
||
* 04-forms.css
|
||
* Form element styling: buttons, inputs, selects, textareas, checkboxes, radios.
|
||
* Part of: Agentic Semantic Web
|
||
*
|
||
* Ported from: Pico CSS v2.1.1 (MIT)
|
||
* Modernizations: accent-color for checkbox/radio, no class-based variants
|
||
*/
|
||
|
||
/* ── 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(--weight-normal);
|
||
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(--weight-normal);
|
||
}
|
||
|
||
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(--weight-normal);
|
||
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);
|
||
}
|
||
/**
|
||
* 03-components.css → will become 05-components.css in Task 10
|
||
* Compound UI patterns: accordion, dialog, breadcrumb, steps.
|
||
* Part of: Agentic Semantic Web
|
||
*
|
||
* Buttons/forms extracted to 04-forms.css
|
||
* Landmarks extracted to 03-landmarks.css
|
||
* Sidebar/TOC extracted to 06-navigation.css
|
||
*/
|
||
|
||
/* ── Accordion / Disclosure ────────────────────────────────────────────*/
|
||
/* Standalone <details>/<summary> — no JS needed.
|
||
Nav dropdown variant lives in 03-landmarks.css.
|
||
Usage:
|
||
<details>
|
||
<summary>Title</summary>
|
||
<p>Content</p>
|
||
</details>
|
||
Grouped variant:
|
||
<div data-role="accordion">
|
||
<details>…</details>
|
||
<details>…</details>
|
||
</div>
|
||
*/
|
||
|
||
details:not(nav details) {
|
||
border: var(--border-width) solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: var(--space-3);
|
||
background: var(--surface-1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
details:not(nav details) > summary {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-3) var(--space-4);
|
||
font-family: var(--font-ui);
|
||
font-size: var(--text-base);
|
||
font-weight: var(--weight-medium);
|
||
color: var(--text);
|
||
cursor: pointer;
|
||
list-style: none;
|
||
user-select: none;
|
||
transition: background-color var(--ease), color var(--ease);
|
||
}
|
||
|
||
details:not(nav details) > summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
/* Chevron indicator */
|
||
details:not(nav details) > summary::after {
|
||
content: "▾";
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
transition: transform var(--ease);
|
||
flex-shrink: 0;
|
||
margin-inline-start: var(--space-3);
|
||
}
|
||
|
||
details:not(nav details)[open] > summary::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
details:not(nav details) > summary:hover {
|
||
background-color: var(--surface-hover);
|
||
color: var(--text);
|
||
}
|
||
|
||
details:not(nav details) > summary:focus-visible {
|
||
outline: var(--outline-width) solid var(--accent-focus);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
/* Body content */
|
||
details:not(nav details) > :not(summary) {
|
||
padding: var(--space-3) var(--space-4) var(--space-4);
|
||
border-top: var(--border-width) solid var(--border);
|
||
}
|
||
|
||
details:not(nav details) > :not(summary):last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Grouped accordion: flush borders between items */
|
||
[data-role="accordion"] > details:not(nav details) {
|
||
margin-bottom: 0;
|
||
border-radius: 0;
|
||
border-bottom-width: 0;
|
||
}
|
||
|
||
[data-role="accordion"] > details:not(nav details):first-child {
|
||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||
}
|
||
|
||
[data-role="accordion"] > details:not(nav details):last-child {
|
||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||
border-bottom-width: var(--border-width);
|
||
}
|
||
|
||
[data-role="accordion"] > details:not(nav details):only-child {
|
||
border-radius: var(--radius-md);
|
||
border-bottom-width: var(--border-width);
|
||
}
|
||
|
||
/* ── Dialog / Modal ────────────────────────────────────────────────────*/
|
||
/* Native <dialog> element. Works with dialog.showModal() / dialog.close().
|
||
Usage:
|
||
<dialog id="my-dialog">
|
||
<header><h2>Title</h2></header>
|
||
<p>Body content.</p>
|
||
<footer><button>Close</button></footer>
|
||
</dialog>
|
||
*/
|
||
|
||
dialog {
|
||
position: fixed;
|
||
inset: 0;
|
||
margin: auto;
|
||
padding: 0;
|
||
border: var(--border-width) solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
background: var(--surface-1);
|
||
color: var(--text);
|
||
box-shadow: var(--shadow-modal);
|
||
z-index: var(--layer-4);
|
||
max-width: min(90vw, 42rem);
|
||
max-height: min(90vh, 40rem);
|
||
overflow: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--border) transparent;
|
||
}
|
||
|
||
dialog:not([open]) {
|
||
display: none;
|
||
}
|
||
|
||
/* Backdrop (modal mode only — showModal()) */
|
||
dialog::backdrop {
|
||
background: var(--modal-overlay);
|
||
backdrop-filter: blur(4px);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
}
|
||
|
||
/* Internal layout */
|
||
dialog > header {
|
||
padding: var(--space-4) var(--space-5);
|
||
border-bottom: var(--border-width) solid var(--border);
|
||
background: transparent;
|
||
border-top: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
dialog > header h1,
|
||
dialog > header h2,
|
||
dialog > header h3 {
|
||
margin: 0;
|
||
font-size: var(--text-2xl);
|
||
color: var(--text);
|
||
}
|
||
|
||
dialog > :not(header):not(footer) {
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
dialog > footer {
|
||
padding: var(--space-3) var(--space-5);
|
||
border-top: var(--border-width) solid var(--border);
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: var(--space-3);
|
||
background: var(--surface);
|
||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Breadcrumb — <nav data-role="breadcrumb" aria-label="breadcrumb">
|
||
Usage:
|
||
<nav data-role="breadcrumb" aria-label="breadcrumb">
|
||
<ol>
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="/docs/">Docs</a></li>
|
||
<li aria-current="page">Token System</li>
|
||
</ol>
|
||
</nav>
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-role="breadcrumb"] {
|
||
font-family: var(--font-ui);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
[data-role="breadcrumb"] ol {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
gap: 0;
|
||
}
|
||
|
||
[data-role="breadcrumb"] li {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Separator: slash before every item after the first */
|
||
[data-role="breadcrumb"] li + li::before {
|
||
content: "/";
|
||
color: var(--text-3);
|
||
padding-inline: var(--space-2);
|
||
user-select: none;
|
||
font-weight: var(--weight-normal);
|
||
}
|
||
|
||
[data-role="breadcrumb"] a {
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
transition: color var(--ease);
|
||
}
|
||
|
||
[data-role="breadcrumb"] a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* Current page: plain text, full colour, no link underline */
|
||
[data-role="breadcrumb"] [aria-current="page"] {
|
||
color: var(--text);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Steps — <ol data-role="steps"> with data-status on each <li>
|
||
Usage:
|
||
<ol data-role="steps">
|
||
<li data-status="complete"><span>Plan</span></li>
|
||
<li data-status="active"><span>Build</span></li>
|
||
<li data-status="pending"><span>Deploy</span></li>
|
||
</ol>
|
||
|
||
data-status values: complete / active / pending
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-role="steps"] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
list-style: none;
|
||
margin: var(--space-5) 0;
|
||
padding: 0;
|
||
gap: 0;
|
||
counter-reset: steps-counter;
|
||
}
|
||
|
||
[data-role="steps"] > li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
min-width: 0;
|
||
position: relative;
|
||
counter-increment: steps-counter;
|
||
padding-top: calc(var(--space-5) + var(--space-3)); /* room for the node circle */
|
||
text-align: center;
|
||
}
|
||
|
||
/* Connector line between steps */
|
||
[data-role="steps"] > li + li::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: calc(var(--space-3) / 2 + 0.75rem); /* vertically centred on the node */
|
||
left: calc(-50% + 1.25rem);
|
||
right: calc(50% + 1.25rem);
|
||
height: var(--border-width);
|
||
background: var(--border);
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Step node circle — drawn via ::after on the li */
|
||
[data-role="steps"] > li::after {
|
||
content: counter(steps-counter);
|
||
position: absolute;
|
||
top: var(--space-3);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-semibold);
|
||
z-index: 1;
|
||
/* default (pending) colours — overridden below */
|
||
background: var(--surface-card);
|
||
border: var(--border-width) solid var(--border);
|
||
color: var(--text-3);
|
||
transition: background var(--ease), border-color var(--ease), color var(--ease);
|
||
}
|
||
|
||
/* Step label text */
|
||
[data-role="steps"] > li > span {
|
||
font-family: var(--font-ui);
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
transition: color var(--ease);
|
||
padding-inline: var(--space-2);
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* ── Status variants ────────────────────────────────────────────── */
|
||
|
||
[data-role="steps"] > [data-status="complete"]::after {
|
||
content: "✓";
|
||
background: var(--accent-subtle);
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
}
|
||
|
||
[data-role="steps"] > [data-status="complete"] > span {
|
||
color: var(--text-2);
|
||
}
|
||
|
||
/* Connector line from a completed step is accented */
|
||
[data-role="steps"] > [data-status="complete"] + li::before {
|
||
background: var(--accent);
|
||
}
|
||
|
||
[data-role="steps"] > [data-status="active"]::after {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
color: var(--on-accent);
|
||
box-shadow: 0 0 0 var(--focus-ring-width) var(--accent-focus);
|
||
}
|
||
|
||
[data-role="steps"] > [data-status="active"] > span {
|
||
color: var(--text);
|
||
font-weight: var(--weight-medium);
|
||
}
|
||
|
||
/* pending is the default — no additional rules needed */
|
||
|
||
/* ── Vertical variant ───────────────────────────────────────────── */
|
||
/* Add data-layout="vertical" to the ol for a top-down flow */
|
||
|
||
[data-role="steps"][data-layout="vertical"] {
|
||
flex-direction: column;
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
[data-role="steps"][data-layout="vertical"] > li {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
text-align: left;
|
||
padding-top: 0;
|
||
padding-left: calc(1.5rem + var(--space-4)); /* room for the node */
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
[data-role="steps"][data-layout="vertical"] > li::after {
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* Vertical connector: vertical line */
|
||
[data-role="steps"][data-layout="vertical"] > li + li::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: calc(-1 * var(--space-5));
|
||
left: 0.675rem; /* centred on the 1.5rem node */
|
||
width: var(--border-width);
|
||
height: var(--space-5);
|
||
right: auto;
|
||
background: var(--border);
|
||
}
|
||
|
||
[data-role="steps"][data-layout="vertical"] > [data-status="complete"] + li::before {
|
||
background: var(--accent);
|
||
}
|
||
|
||
[data-role="steps"][data-layout="vertical"] > li > span {
|
||
padding-inline: 0;
|
||
}
|
||
/**
|
||
* 06-navigation.css
|
||
* Navigation patterns beyond the basic nav landmark.
|
||
* Part of: Agentic Semantic Web
|
||
*
|
||
* Covers: sidebar navigation, table of contents (TOC)
|
||
*/
|
||
|
||
/* ── Sidebar nav ────────────────────────────────────────────────────── */
|
||
|
||
nav[data-nav="sidebar"] h3 {
|
||
color: var(--text-3);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
font-weight: var(--weight-medium);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-top: var(--space-3);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
nav[data-nav="sidebar"] h3:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
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-xs);
|
||
}
|
||
|
||
nav[data-nav="sidebar"] ul li {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
nav[data-nav="sidebar"] a {
|
||
display: block;
|
||
padding: var(--space-1) var(--space-3);
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
max-width: var(--sidebar-link-max);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
transition: background-color var(--ease), color var(--ease);
|
||
}
|
||
|
||
nav[data-nav="sidebar"] a:hover {
|
||
background-color: var(--surface-hover);
|
||
color: var(--text);
|
||
}
|
||
|
||
nav[data-nav="sidebar"] a[aria-current] {
|
||
background-color: var(--accent-subtle);
|
||
color: var(--accent);
|
||
}
|
||
|
||
/* ── TOC (aside) ────────────────────────────────────────────────────── */
|
||
|
||
aside[data-toc] h3 {
|
||
color: var(--text-3);
|
||
font-size: var(--text-xs);
|
||
font-family: var(--font-mono);
|
||
font-weight: var(--weight-medium);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: var(--space-2);
|
||
margin-top: 0;
|
||
}
|
||
|
||
aside[data-toc] nav ul {
|
||
display: flex;
|
||
flex-direction: column;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
gap: 0;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
aside[data-toc] nav ul li {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
aside[data-toc] nav a {
|
||
display: block;
|
||
padding: var(--space-1) var(--space-2);
|
||
color: var(--text-3);
|
||
text-decoration: none;
|
||
border-left: var(--focus-ring-width) solid transparent;
|
||
transition: color var(--ease), border-color var(--ease);
|
||
}
|
||
|
||
aside[data-toc] nav a:hover {
|
||
color: var(--text);
|
||
border-left-color: var(--border);
|
||
}
|
||
|
||
aside[data-toc] nav a[aria-current] {
|
||
color: var(--accent);
|
||
border-left-color: var(--accent);
|
||
}
|
||
/**
|
||
* 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: var(--border-width) solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-3) var(--space-4);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
margin: var(--space-5) 0;
|
||
}
|
||
|
||
[data-role="command-box"] .prefix {
|
||
color: var(--text-3);
|
||
margin-right: var(--space-2);
|
||
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: var(--border-width) dotted var(--border);
|
||
transition: border-color var(--ease);
|
||
}
|
||
|
||
[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: var(--border-width) 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: var(--border-width) 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: var(--border-width) 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: var(--border-width) 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: var(--tooltip-max-width);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity var(--ease);
|
||
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 var(--ease);
|
||
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: var(--space-6);
|
||
padding-bottom: var(--space-3);
|
||
border-bottom: var(--border-width) solid var(--border);
|
||
}
|
||
|
||
[data-subnav] a {
|
||
color: var(--text-dim);
|
||
text-decoration: none;
|
||
transition: color var(--ease);
|
||
}
|
||
|
||
[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: var(--border-width) 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: var(--diff-add-bg);
|
||
color: var(--syntax-string);
|
||
}
|
||
|
||
[data-diff-line="added"]::before {
|
||
content: "+";
|
||
color: var(--ok);
|
||
}
|
||
|
||
[data-diff-line="removed"] {
|
||
background: var(--diff-remove-bg);
|
||
color: var(--diff-remove-text);
|
||
}
|
||
|
||
[data-diff-line="removed"]::before {
|
||
content: "−";
|
||
color: var(--syntax-deleted);
|
||
}
|
||
|
||
[data-diff-line="context"] {
|
||
color: var(--text-3);
|
||
}
|
||
|
||
[data-diff-line="context"]::before {
|
||
content: " ";
|
||
}
|
||
|
||
/* Hunk header — @@ line markers */
|
||
[data-diff-line="hunk"] {
|
||
background: var(--diff-hunk-bg);
|
||
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 var(--ease), color var(--ease);
|
||
}
|
||
|
||
[data-redacted="reveal"]:hover,
|
||
[data-redacted="reveal"]:focus {
|
||
background: var(--surface-card);
|
||
color: var(--text);
|
||
outline: var(--border-width) 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: var(--absolute-black);
|
||
}
|
||
[data-redacted="reveal"]:hover,
|
||
[data-redacted="reveal"]:focus {
|
||
background: var(--surface-1);
|
||
color: var(--absolute-black);
|
||
}
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
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: var(--focus-ring-width);
|
||
background: var(--accent);
|
||
z-index: 9999;
|
||
/* Subtle shadow so bar is visible on light pages too */
|
||
box-shadow: 0 0 6px var(--accent-focus);
|
||
}
|
||
|
||
/* animation-timeline: scroll() — fills as the page scrolls.
|
||
Guarded: skip for users who prefer reduced motion. */
|
||
@media (--motionOK) {
|
||
[data-reading-progress]::before {
|
||
animation: asw-reading-progress auto linear;
|
||
animation-timeline: scroll(root);
|
||
}
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
ai-disclosure — styling for AI content disclosure attributes
|
||
Issue: agentic-semantic-web#58
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Subtle accent on AI-generated sections — light left border indicator */
|
||
[data-ai-disclosure] {
|
||
border-left: var(--focus-ring-width) solid transparent;
|
||
padding-left: var(--space-3);
|
||
}
|
||
|
||
[data-ai-disclosure="ai-generated"] {
|
||
border-left-color: var(--ai-generated-border);
|
||
}
|
||
|
||
[data-ai-disclosure="ai-assisted"] {
|
||
border-left-color: var(--ai-assisted-border);
|
||
}
|
||
|
||
/* Autonomous — more distinct: full accent treatment */
|
||
[data-ai-disclosure="autonomous"] {
|
||
border-left-color: var(--accent);
|
||
border-left-width: var(--focus-ring-width);
|
||
}
|
||
|
||
/* Mixed — yellow/amber to signal blended provenance */
|
||
[data-ai-disclosure="mixed"] {
|
||
border-left-color: var(--ai-mixed-border);
|
||
}
|
||
|
||
/* Disclosure badge — optional ::after label for verbose mode */
|
||
[data-ai-disclosure][data-show-disclosure]::after {
|
||
content: " [" attr(data-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(--duration-quick-2) var(--ease-1);
|
||
}
|
||
|
||
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(--duration-quick-2) var(--ease-1), color var(--duration-quick-2) var(--ease-1);
|
||
}
|
||
|
||
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);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
data-size — universal size modifier axis
|
||
Issue: lineage-ingestion / Semantic UI modifier grammar
|
||
|
||
Scales font-size, padding, and gap on any component.
|
||
Inherit-safe: child elements scale relative to the component root.
|
||
|
||
Usage:
|
||
<span data-badge data-size="lg">token</span>
|
||
<div data-role="status-card" data-size="sm">…</div>
|
||
<a data-role="primary" data-size="xl">Big CTA</a>
|
||
|
||
Values: xs / sm / md (default, no-op) / lg / xl
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
[data-size="xs"] {
|
||
font-size: var(--font-size-00, 0.6rem);
|
||
padding: var(--space-1) var(--space-2);
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
[data-size="sm"] {
|
||
font-size: var(--text-xs);
|
||
padding: var(--space-1) var(--space-4);
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
/* md is the default — explicit reset for override contexts */
|
||
[data-size="md"] {
|
||
font-size: var(--text-base);
|
||
padding: var(--space-2) var(--space-4);
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
[data-size="lg"] {
|
||
font-size: var(--text-2xl);
|
||
padding: var(--space-3) var(--space-5);
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
[data-size="xl"] {
|
||
font-size: var(--text-3xl);
|
||
padding: var(--space-4) var(--space-5);
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
/* ── Demo block ────────────────────────────────────────────────────── */
|
||
/* Inline demonstration area within docs pages.
|
||
Usage: <div data-demo>…live HTML example…</div> */
|
||
|
||
[data-demo] {
|
||
border: var(--border-width) solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
padding: var(--space-5);
|
||
background: var(--surface-1);
|
||
margin-block: var(--space-4);
|
||
}
|
||
|
||
} /* end @layer data-attrs */
|
||
/**
|
||
* 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
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Max-width content column — constrains fluid sections to readable width */
|
||
[data-wrap] {
|
||
max-width: var(--width-content);
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-5);
|
||
}
|
||
|
||
/* 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 (--md-n-above) {
|
||
[data-visible="desktop"] {
|
||
display: initial;
|
||
}
|
||
}
|
||
|
||
/* Hide on desktop */
|
||
[data-visible="mobile"] {
|
||
display: initial;
|
||
}
|
||
|
||
@media (--md-n-above) {
|
||
[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: var(--focus-ring-width) solid currentColor;
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 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: var(--outline-width) solid var(--text-3);
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* Spinner rotation — guarded: skip for users who prefer reduced motion */
|
||
@media (--motionOK) {
|
||
:is(button, [role="button"], a)[aria-busy="true"]::before {
|
||
animation: spin var(--spinner-duration) linear infinite;
|
||
}
|
||
|
||
:is(section, article, main, div)[aria-busy="true"]::after {
|
||
animation: spin var(--spinner-duration) 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: var(--hc-border);
|
||
--border-color-subtle: var(--border-subtle);
|
||
--text-primary: var(--hc-text);
|
||
--text-secondary: var(--text-2);
|
||
--border-width: var(--focus-ring-width);
|
||
}
|
||
|
||
/* Thicker borders on interactive elements */
|
||
a,
|
||
button,
|
||
input,
|
||
select,
|
||
textarea,
|
||
[data-wikilink] {
|
||
border-width: var(--focus-ring-width);
|
||
}
|
||
|
||
/* Stronger focus indicators */
|
||
:focus-visible {
|
||
outline-width: var(--border-width-thick);
|
||
outline-offset: var(--border-width-thick);
|
||
}
|
||
}
|
||
|
||
} /* end @layer utilities */
|
||
/**
|
||
* 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: var(--space-6); /* column bar width / bar chart bar height */
|
||
--chart-gap: 6px; /* spacing between data points */
|
||
|
||
/* Axis / labels */
|
||
--chart-axis: var(--border);
|
||
--chart-axis-width: var(--outline-width);
|
||
--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(--space-4);
|
||
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(--space-4);
|
||
}
|
||
|
||
/* 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(--space-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 var(--ease), inline-size var(--duration-moderate-1) 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(--space-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(--space-1);
|
||
/* Move below axis */
|
||
order: 2;
|
||
margin-block-start: var(--space-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 var(--duration-moderate-1) 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(--space-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(--space-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(--space-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: var(--outline-width) 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: var(--outline-width) 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(--space-2);
|
||
justify-content: center;
|
||
margin-block-end: var(--space-4);
|
||
}
|
||
|
||
[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(--space-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(--space-2);
|
||
}
|
||
|
||
[data-chart="radial"] tbody { display: flex; }
|
||
[data-chart="radial"] tr { display: flex; }
|
||
|
||
/* The gauge circle */
|
||
[data-chart="radial"] td {
|
||
position: relative;
|
||
width: var(--chart-radial-size);
|
||
height: var(--chart-radial-size);
|
||
border-radius: 50%;
|
||
background: conic-gradient(
|
||
var(--color, var(--chart-color-1)) 0deg calc(var(--size, 0.5) * 360deg),
|
||
var(--surface-1, var(--surface)) 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: var(--chart-radial-inset);
|
||
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(--space-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 var(--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(--space-1);
|
||
white-space: nowrap;
|
||
padding: 0;
|
||
margin-block-start: var(--space-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(--space-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 */
|
||
/**
|
||
* 07-chroma.css
|
||
* CSS-only syntax highlighting — maps Hugo/Chroma class names to Open Props
|
||
* color tokens. Requires Hugo markup.highlight.noClasses = false.
|
||
*
|
||
* Generated class reference: hugo gen chromastyles --style=monokai
|
||
* Token palette: Open Props perceptual color scale.
|
||
* Part of: Agentic Semantic Web
|
||
*/
|
||
|
||
/* ── Wrapper ─────────────────────────────────────────────────────────── */
|
||
|
||
.chroma {
|
||
background: var(--surface-1);
|
||
border-radius: var(--radius-2);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.chroma pre {
|
||
background: var(--surface-1);
|
||
padding: var(--space-4);
|
||
border-radius: var(--radius-2);
|
||
overflow-x: auto;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── Keywords ────────────────────────────────────────────────────────── */
|
||
/* .k .kc .kd .kn .kp .kr .kt */
|
||
|
||
.chroma .k,
|
||
.chroma .kc,
|
||
.chroma .kd,
|
||
.chroma .kp,
|
||
.chroma .kr,
|
||
.chroma .kt {
|
||
color: var(--syntax-keyword);
|
||
}
|
||
|
||
/* KeywordNamespace — import/from/as */
|
||
.chroma .kn {
|
||
color: var(--syntax-keyword);
|
||
}
|
||
|
||
/* ── Strings ─────────────────────────────────────────────────────────── */
|
||
/* .s .sa .sb .sc .dl .sd .s2 .se .sh .si .sx .sr .s1 .ss */
|
||
|
||
.chroma .s,
|
||
.chroma .sa,
|
||
.chroma .sb,
|
||
.chroma .sc,
|
||
.chroma .dl,
|
||
.chroma .sd,
|
||
.chroma .s2,
|
||
.chroma .sh,
|
||
.chroma .si,
|
||
.chroma .sx,
|
||
.chroma .sr,
|
||
.chroma .s1,
|
||
.chroma .ss {
|
||
color: var(--syntax-string);
|
||
}
|
||
|
||
/* LiteralStringEscape — \n \t etc — slightly lighter to distinguish */
|
||
.chroma .se {
|
||
color: var(--syntax-string);
|
||
}
|
||
|
||
/* ── Comments ────────────────────────────────────────────────────────── */
|
||
/* .c .c1 .ch .cm .cp .cpf .cs */
|
||
|
||
.chroma .c,
|
||
.chroma .c1,
|
||
.chroma .ch,
|
||
.chroma .cm,
|
||
.chroma .cp,
|
||
.chroma .cpf,
|
||
.chroma .cs {
|
||
color: var(--syntax-comment);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ── Numbers ─────────────────────────────────────────────────────────── */
|
||
/* .m .mb .mf .mh .mi .mo .mx */
|
||
|
||
.chroma .m,
|
||
.chroma .mb,
|
||
.chroma .mf,
|
||
.chroma .mh,
|
||
.chroma .mi,
|
||
.chroma .il,
|
||
.chroma .mo,
|
||
.chroma .mx {
|
||
color: var(--syntax-variable);
|
||
}
|
||
|
||
/* ── Names / Functions ───────────────────────────────────────────────── */
|
||
/* .n .na .nb .nc .nd .ne .nf .ni .nl .nn .nx .py */
|
||
|
||
.chroma .na,
|
||
.chroma .nc,
|
||
.chroma .nd,
|
||
.chroma .ne,
|
||
.chroma .nf,
|
||
.chroma .nx,
|
||
.chroma .py {
|
||
color: var(--syntax-keyword);
|
||
}
|
||
|
||
/* ── Operators / Punctuation ─────────────────────────────────────────── */
|
||
/* .o .ow .p */
|
||
|
||
.chroma .o,
|
||
.chroma .ow {
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ── Error ───────────────────────────────────────────────────────────── */
|
||
|
||
.chroma .err {
|
||
color: var(--syntax-deleted);
|
||
background: transparent;
|
||
}
|
||
|
||
/* ── Generic diffs / emphasis ────────────────────────────────────────── */
|
||
|
||
.chroma .gd { color: var(--syntax-deleted); }
|
||
.chroma .gi { color: var(--syntax-inserted); }
|
||
.chroma .ge { font-style: italic; }
|
||
.chroma .gs { font-weight: bold; }
|
||
|
||
/* ── Line number chrome ──────────────────────────────────────────────── */
|
||
|
||
.chroma .ln,
|
||
.chroma .lnt {
|
||
color: var(--text-3);
|
||
user-select: none;
|
||
padding-inline-end: var(--space-4);
|
||
}
|
||
/**
|
||
* 08-layout.css
|
||
* Layout patterns: container, docs layout, grid helpers
|
||
* Part of: Agentic Semantic Web
|
||
*/
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Flexbox primitives — data-layout attributes for layout composition
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Row: horizontal flex with wrap — nav bars, action rows, inline groups */
|
||
[data-layout="row"] {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
/* Column: vertical flex with standard gap */
|
||
[data-layout="col"] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
/* Stack: vertical flex with larger gap for section-level content spacing */
|
||
[data-layout="stack"] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
/* Spread: space-between — stat bars, toolbar items, distributed nav */
|
||
[data-layout="spread"] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
/* Center: centred flex — hero content, empty states, modals */
|
||
[data-layout="center"] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
/* ── Responsive: collapse horizontal layouts to stacked at 640px ──── */
|
||
@media (--compact) {
|
||
[data-layout="spread"],
|
||
[data-layout="row"] {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
}
|
||
|
||
/* ── Container ─────────────────────────────────────────────────────── */
|
||
|
||
.container {
|
||
max-width: var(--width-content);
|
||
margin-inline: auto;
|
||
padding-inline: var(--container-padding);
|
||
}
|
||
|
||
/* ── Body landmark container ────────────────────────────────────────── */
|
||
|
||
body > nav { width: 100%; }
|
||
body > footer { width: 100%; }
|
||
|
||
/* Main: content container. Same pattern as article/section.
|
||
Hugo pack and most SSGs wrap content in <main>. */
|
||
body > main {
|
||
width: 100%;
|
||
max-width: var(--width-lg);
|
||
margin-inline: auto;
|
||
padding-inline: var(--container-padding);
|
||
}
|
||
|
||
/* Header: wider than article — room for hero titles, eyebrows, meta. */
|
||
body > header {
|
||
width: 100%;
|
||
max-width: var(--width-lg);
|
||
margin-inline: auto;
|
||
padding-inline: var(--container-padding);
|
||
}
|
||
|
||
/* Article and section: standard content width. Reading width lives on
|
||
inner elements (p, li…) via max-inline-size — not on the container. */
|
||
body > article,
|
||
body > section {
|
||
width: 100%;
|
||
max-width: var(--width-lg);
|
||
margin-inline: auto;
|
||
padding-inline: var(--container-padding);
|
||
}
|
||
|
||
/* ── Body baseline ──────────────────────────────────────────────────── */
|
||
|
||
body {
|
||
background-color: var(--surface);
|
||
color: var(--text);
|
||
font-weight: var(--weight-normal);
|
||
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">. */
|
||
/* Base hero — 09-landing.css overrides for full landing pages */
|
||
[data-layout="hero"] {
|
||
text-align: center;
|
||
padding: var(--space-8) var(--space-5);
|
||
border-bottom: var(--border-width) 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: var(--border-width) 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: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr minmax(var(--toc-min), var(--toc-max));
|
||
grid-template-rows: auto;
|
||
gap: var(--space-6);
|
||
max-width: var(--docs-max-width);
|
||
margin-inline: auto;
|
||
padding: var(--space-6) var(--space-5);
|
||
align-items: start;
|
||
}
|
||
|
||
/* ── Sidebar + TOC shared sticky behaviour ──────────────────────────── */
|
||
|
||
[data-layout="docs"] > nav[data-nav="sidebar"],
|
||
[data-layout="docs"] > aside[data-toc] {
|
||
position: sticky;
|
||
max-height: calc(100vh - var(--nav-height) - var(--space-4) * 2);
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--border) transparent;
|
||
}
|
||
|
||
/* ── Left sidebar ───────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] > nav[data-nav="sidebar"] {
|
||
top: calc(var(--nav-height) + var(--space-4));
|
||
}
|
||
|
||
/* ── Main content ───────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] > article {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ── Right TOC ──────────────────────────────────────────────────────── */
|
||
|
||
[data-layout="docs"] > aside[data-toc] {
|
||
top: calc(var(--nav-height) + var(--space-8));
|
||
padding-top: var(--space-8);
|
||
}
|
||
|
||
|
||
/* ── 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;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
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="next"] {
|
||
margin-inline-start: 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 (--docs-toc-hidden) {
|
||
[data-layout="docs"] {
|
||
grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr;
|
||
}
|
||
[data-layout="docs"] > aside[data-toc] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (--md-n-below) {
|
||
[data-layout="docs"] {
|
||
grid-template-columns: 1fr;
|
||
padding: var(--space-4);
|
||
}
|
||
[data-layout="docs"] > nav[data-nav="sidebar"] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Article content column: reading-optimised prose width.
|
||
Overrides body > article container sizing from 08-layout.css. */
|
||
[data-layout="docs"] > article {
|
||
min-width: 0;
|
||
justify-self: center;
|
||
width: 100%;
|
||
max-width: var(--width-prose);
|
||
}
|
||
|
||
/* ── Console layout ─────────────────────────────────────────────────── */
|
||
/* Docs variant: sidebar flush to the viewport left edge. */
|
||
/* No outer centering — grid spans full width, sidebar has no left gap. */
|
||
|
||
[data-layout="console"] {
|
||
display: grid;
|
||
grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr minmax(var(--toc-min), var(--toc-max));
|
||
grid-template-rows: auto;
|
||
gap: var(--space-6);
|
||
padding: var(--space-6) var(--space-5) var(--space-6) 0;
|
||
align-items: start;
|
||
}
|
||
|
||
[data-layout="console"] > nav[data-nav="sidebar"],
|
||
[data-layout="console"] > aside[data-toc] {
|
||
position: sticky;
|
||
max-height: calc(100vh - var(--nav-height) - var(--space-4) * 2);
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: var(--border) transparent;
|
||
}
|
||
|
||
[data-layout="console"] > nav[data-nav="sidebar"] {
|
||
top: calc(var(--nav-height) + var(--space-4));
|
||
padding-inline: var(--space-3);
|
||
}
|
||
|
||
[data-layout="console"] > article {
|
||
min-width: 0;
|
||
max-width: none;
|
||
}
|
||
|
||
[data-layout="console"] > aside[data-toc] {
|
||
top: calc(var(--nav-height) + var(--space-8));
|
||
padding-top: var(--space-8);
|
||
}
|
||
|
||
@media (--docs-toc-hidden) {
|
||
[data-layout="console"] {
|
||
grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-max)) 1fr;
|
||
}
|
||
[data-layout="console"] > aside[data-toc] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (--md-n-below) {
|
||
[data-layout="console"] {
|
||
grid-template-columns: 1fr;
|
||
padding: var(--space-4);
|
||
}
|
||
[data-layout="console"] > nav[data-nav="sidebar"] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ── Grid helpers ───────────────────────────────────────────────────── */
|
||
|
||
[data-layout="grid-2"] {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--grid-gap);
|
||
}
|
||
|
||
[data-layout="grid-3"] {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--grid-gap);
|
||
}
|
||
|
||
[data-layout="card-grid"] {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
|
||
gap: var(--grid-gap);
|
||
}
|
||
|
||
[data-layout="stats"] {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--grid-gap);
|
||
}
|
||
|
||
[data-layout="stats"] > * {
|
||
flex: 1;
|
||
min-width: var(--size-px-11);
|
||
}
|
||
|
||
[data-layout="stats"] [data-stat="value"],
|
||
[data-layout="stats"] .value {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-3xl);
|
||
font-weight: var(--weight-bold);
|
||
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 (--md-n-below) {
|
||
[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. */
|
||
|
||
article[data-layout="prose"],
|
||
[data-layout="prose"] {
|
||
max-width: var(--width-prose);
|
||
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: var(--border-width);
|
||
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: var(--outline-width) 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: var(--text-base);
|
||
line-height: var(--leading);
|
||
}
|
||
|
||
[data-layout="report"] > header,
|
||
[data-layout="report"] > article,
|
||
[data-layout="report"] > footer {
|
||
max-width: var(--width-report);
|
||
margin-inline: auto;
|
||
padding-inline: var(--space-5);
|
||
}
|
||
|
||
[data-layout="report"] > header {
|
||
padding-top: var(--space-6);
|
||
padding-bottom: var(--space-5);
|
||
border-bottom: var(--outline-width) 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"] > article {
|
||
padding-bottom: var(--space-8);
|
||
}
|
||
|
||
[data-layout="report"] > footer {
|
||
border-top: var(--border-width) 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: var(--print-surface);
|
||
--text: var(--print-text);
|
||
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: var(--text-3);
|
||
}
|
||
|
||
[data-layout="report"] a[href^="#"]::after {
|
||
content: "";
|
||
}
|
||
|
||
[data-layout="report"] nav,
|
||
[data-layout="report"] [data-no-print] {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════════════════════
|
||
Essay / Paper layout — article[data-paper]
|
||
Long-form research content with centred masthead.
|
||
(Merged from 08a-essay.css)
|
||
══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* ── Reading column ─────────────────────────────────────────────────── */
|
||
|
||
article[data-paper] {
|
||
max-width: 68ch;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
/* ── Centred masthead ───────────────────────────────────────────────── */
|
||
|
||
article[data-paper] > header {
|
||
text-align: center;
|
||
padding-bottom: var(--space-6);
|
||
margin-bottom: var(--space-6);
|
||
border-bottom: var(--border-width) solid var(--border-subtle);
|
||
}
|
||
|
||
article[data-paper] > header h1 {
|
||
font-size: clamp(1.6rem, 4vw, 2.4rem);
|
||
font-weight: var(--weight-light);
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.15;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
/* ── Abstract / description ─────────────────────────────────────────── */
|
||
|
||
article[data-paper] > header [data-abstract] {
|
||
font-size: var(--text-base);
|
||
color: var(--text-2);
|
||
max-width: 52ch;
|
||
margin-inline: auto;
|
||
margin-bottom: var(--space-4);
|
||
line-height: var(--leading);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ── Byline ─────────────────────────────────────────────────────────── */
|
||
|
||
article[data-paper] > header [data-byline] {
|
||
font-size: var(--text-sm);
|
||
color: var(--text-3);
|
||
font-family: var(--font-mono);
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
article[data-paper] > header [data-byline] time {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ── Tags beneath byline ────────────────────────────────────────────── */
|
||
|
||
article[data-paper] > header nav[data-role="tag-cloud"] {
|
||
justify-content: center;
|
||
margin-top: var(--space-3);
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ── Footer prev/next ───────────────────────────────────────────────── */
|
||
|
||
article[data-paper] > footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--space-4);
|
||
margin-top: var(--space-8);
|
||
padding-top: var(--space-5);
|
||
border-top: var(--border-width) solid var(--border-subtle);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
article[data-paper] > footer a {
|
||
color: var(--text-2);
|
||
text-decoration: none;
|
||
}
|
||
|
||
article[data-paper] > footer a:hover {
|
||
color: var(--text);
|
||
}
|
||
/**
|
||
* 09-landing.css
|
||
* Landing-page specific layout and component styles.
|
||
* Loads after 08-layout so hero overrides correctly take precedence.
|
||
* Part of: Agentic Semantic Web
|
||
*/
|
||
|
||
/* ── Landing page container ───────────────────────────────────────────── */
|
||
|
||
[data-landing] {
|
||
max-width: var(--width-xl);
|
||
margin-inline: auto;
|
||
padding-inline: var(--container-padding);
|
||
}
|
||
|
||
[data-landing] > h2 {
|
||
text-align: center;
|
||
margin-top: var(--space-8);
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
|
||
[data-landing] > p {
|
||
text-align: center;
|
||
color: var(--text-2);
|
||
max-width: 50ch;
|
||
margin-inline: auto;
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
|
||
/* ── [data-section] — horizontal-rule sections ──────────────────────────
|
||
Usage: <section data-section> or <section data-section="demo">
|
||
─────────────────────────────────────────────────────────────────────── */
|
||
|
||
[data-section] {
|
||
padding-block: var(--space-8);
|
||
border-bottom: var(--border-width) solid var(--border-subtle);
|
||
}
|
||
|
||
/* ── [data-section-header] — centered section heading ───────────────────
|
||
Usage: <header data-section-header> inside [data-section]
|
||
─────────────────────────────────────────────────────────────────────── */
|
||
|
||
[data-section-header] {
|
||
text-align: center;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
[data-section-header] h2 {
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
[data-section-header] > p {
|
||
color: var(--text-2);
|
||
max-width: 50ch;
|
||
margin-inline: auto;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ── Hero ─────────────────────────────────────────────────────────────── */
|
||
|
||
[data-hero] {
|
||
text-align: center;
|
||
padding: clamp(3.5rem, 10vw, 7rem) var(--space-5) clamp(3rem, 8vw, 5.5rem);
|
||
border-bottom: var(--border-width) solid var(--border-subtle);
|
||
}
|
||
|
||
[data-hero] h1 {
|
||
font-size: clamp(2.6rem, 6vw, 4.5rem);
|
||
font-weight: var(--weight-light);
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.05;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
[data-hero] > p {
|
||
font-size: clamp(1rem, 2.5vw, 1.2rem);
|
||
color: var(--text-2);
|
||
max-width: 46ch;
|
||
margin-inline: auto;
|
||
line-height: var(--leading-tight);
|
||
}
|
||
|
||
[data-hero] > nav {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: var(--space-5);
|
||
}
|
||
|
||
[data-hero] > nav a {
|
||
display: inline-block;
|
||
padding: var(--space-2) var(--space-5);
|
||
border-radius: var(--radius-md);
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
text-decoration: none;
|
||
border: var(--border-width) solid var(--border);
|
||
background: var(--surface-1);
|
||
color: var(--text-2);
|
||
transition: background-color var(--ease-3), color var(--ease-3), border-color var(--ease-3);
|
||
}
|
||
|
||
[data-hero] > nav a:first-child {
|
||
background: var(--accent);
|
||
color: var(--on-accent);
|
||
border-color: transparent;
|
||
}
|
||
|
||
[data-hero] > nav a:hover {
|
||
background: var(--surface-2);
|
||
color: var(--text);
|
||
}
|
||
|
||
[data-hero] > nav a:first-child:hover {
|
||
background: var(--accent-hover);
|
||
color: var(--on-accent);
|
||
}
|
||
|
||
/* ── figure[data-pane] — side-by-side demo panes ────────────────────────
|
||
Usage:
|
||
<figure data-pane="code">
|
||
<figcaption>HTML</figcaption>
|
||
<pre><code>…</code></pre>
|
||
</figure>
|
||
<figure data-pane="result">
|
||
<figcaption>Result</figcaption>
|
||
<div data-pane-body>…</div>
|
||
</figure>
|
||
─────────────────────────────────────────────────────────────────────── */
|
||
|
||
figure[data-pane] {
|
||
background: var(--surface-1);
|
||
border: var(--border-width) solid var(--border);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0;
|
||
}
|
||
|
||
figure[data-pane] > figcaption {
|
||
background: var(--surface-2);
|
||
border-bottom: var(--border-width) solid var(--border);
|
||
padding: var(--space-2) var(--space-4);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--text-3);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
figure[data-pane="code"] > pre {
|
||
margin: 0;
|
||
padding: var(--space-4) var(--space-5);
|
||
background: transparent;
|
||
border: none;
|
||
font-size: 0.775rem;
|
||
line-height: 1.75;
|
||
flex: 1;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
figure[data-pane="result"] > [data-pane-body] {
|
||
padding: var(--space-5);
|
||
flex: 1;
|
||
}
|
||
|
||
figure[data-pane="result"] > [data-pane-body] article {
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── article[data-pillar] — three-pillar feature cards ──────────────────
|
||
ASW already styles article as a card; data-pillar tunes internals.
|
||
─────────────────────────────────────────────────────────────────────── */
|
||
|
||
article[data-pillar] {
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
article[data-pillar] h3 {
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
article[data-pillar] > p {
|
||
color: var(--text-2);
|
||
font-size: var(--text-sm);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── [data-preview] — inert mini page preview ───────────────────────────
|
||
Sits inside article[data-card="page-type"]. pointer-events: none keeps
|
||
it visually alive but non-interactive.
|
||
─────────────────────────────────────────────────────────────────────── */
|
||
|
||
[data-preview] {
|
||
margin-top: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: var(--surface);
|
||
border: var(--border-width) solid var(--border-subtle);
|
||
border-radius: var(--radius-sm);
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── [data-agent-native] — agent vocabulary section ─────────────────────
|
||
─────────────────────────────────────────────────────────────────────── */
|
||
|
||
[data-agent-native] h4 {
|
||
margin-top: 0;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
[data-agent-native] pre {
|
||
font-size: var(--text-xs);
|
||
margin-top: var(--space-3);
|
||
}
|