/* colors_and_type.css */ /* ============================================================ 247420 design system — colors + type shadcn-neutral (2026-07-30 restyle): confident display type, ink-on-paper with a grayscale accent, print texture inert. RESTYLED from the prior "Acid Editorial" warm-paper/electric-lime identity -- see the RESTYLED notes below for the token-by-token detail. Scope-prefixed at build time. Source-of-truth tokens. Component sheet lives in app-shell.css. ============================================================ */ /* System-font stack only — no web-font @import/@font-face. Every --ff-* token below is the same fallback chain that used to sit after the custom family names; removing the custom names just exposes it directly. */ .ds-247420 { /* Tree view indentation tokens */ --tree-indent: 12px; --tree-base-indent: 6px; /* Paper / Ink — RESTYLED (2026-08b) back to true neutral grayscale, replacing the brief "warm editorial, amber lead" identity (2026-08a, warm cream/brown/amber) which itself replaced the 2026-07-30 shadcn-neutral grayscale identity. User rejected warm-brown outright ("brown is lame") and asked for a pure neutral base so the brand duo below is the only color in the system. Every downstream color-mix()/ var() derivation in this file keeps its formula; only these ROOT values change, cascading through all 32 consumer files automatically. Contrast re-verified by hand (WCAG relative-luminance formula): --ink 17.40:1, --ink-2 12.63:1, --ink-3 7.00:1 on --paper (all far clear of AA 4.5:1); --ink-3 on --paper-2/--paper-3 also re-measured at 6.42:1 / 5.56:1, both still clear. */ --paper: #FFFFFF; --paper-2: #F5F5F5; --paper-3: #E5E5E5; --ink: #1A1A1A; --ink-2: #333333; --ink-3: #595959; /* re-verified 2026-08b neutral restyle: 7.00:1 on --paper, 6.42:1 on --paper-2, 5.56:1 on --paper-3 -- all clear of AA 4.5:1 with margin */ --ink-3-dark: #4D4D4D; /* dark theme bg-3 (tier-3 surface), neutral equivalent */ --paper-3-dark: #BFBFBF; /* dark theme fg-3 (tier-3 text); re-verified against --ink-3-dark/--ink-2/--ink below */ /* Lore palette. --acid held the shadcn-neutral near-black accent (2026-07-30), then a warm amber lead (2026-08a) -- RESTYLED again (2026-08b) to the project's own brand codename read as a color: #247420 (green). --purple below is retuned to #420247, the codename's digit reversal, as the deliberate secondary lead -- the two together ARE the new identity, not an arbitrary accent choice. mascot/signals stay as the category/status palette, untouched by this restyle. */ --acid: #247420; /* accent FILL -- 5.84:1 against --paper via --accent-fg (white) on top */ --acid-deep: #133F10; /* accent TEXT tone on --paper -- 12.03:1 */ --green: #247420; --green-2: #3A9A34; --green-deep: #133F10; --green-tint: #D7E4C2; --purple: #420247; /* the brand codename's digit reversal, the identity's secondary lead -- 15.77:1 on --paper */ --purple-2: #7F18A4; --purple-deep: #220026; --purple-tint: #E2CFE4; --mascot: #FF2E84; --mascot-2: #FF3CA7; --mascot-tint: #F7CEDD; --mascot-deep: #B81F63; /* Fixed ink-surface mascot text tone (6.67:1 on --ink). Unlike --mascot-deep, this NEVER follows the theme: it is for always-dark surfaces like the .cli card, which stay ink under a light theme and so need a tone chosen for ink rather than for the active theme. Same role --paper-3-dark plays for the tier-3 text ramp. */ --mascot-on-ink: #FF5C9E; /* Same always-dark-surface pattern, for .ds-cli-ok's success/OK text. RESTYLED 2026: .ds-cli-ok previously used --acid directly (the bright lime), which cleared contrast on --ink by construction; now that --acid is a dark neutral, it fails 1.15:1 on the still-always-dark .cli card (npm run a11y caught this on the terminal kit). Reuses the dark-theme --green retune value (7.48:1 on --ink) rather than inventing a new hue, since --green already carries the "success" semantic elsewhere. */ --success-on-ink: #5CBF52; /* Signals */ --sun: #F5C344; /* Error/status tones are theme-tuned: the root values are the LIGHT (paper) pair (flame 4.74:1, amber 4.5+:1 on paper); the dark blocks below restore the originals (#FF5A1F / #D9A93A) which were tuned on ink and fail on paper (2.9:1 / 2.0:1). */ --flame: #C53E00; /* #8A6512 measured 4.5+:1 on --paper but only 4.26:1 on --bg-2, which the dashboard card status text actually renders on - darkened for margin on both backgrounds (5.21:1 on --bg-2). */ --amber: #7C570F; --sky: #3A6EFF; /* --warn = interactive danger controls (buttons, banners, menus, error inputs); --danger below = passive error/status text and metrics (kpi/sparkline deltas, auth-error text). Two tokens, one convention. #E0241A measured 4.19:1 on --paper — fails WCAG AA 4.5:1 for the many TEXT usages (.field-error, .ds-btn-warn, .ds-stat-val.err-rate, toast/ session error labels), not just the interactive-control (>=3:1) usages. Darkened to clear AA on --paper (5.29:1), --paper-2 (4.78:1), and the thebird warm-paper preset (5.25:1) while staying visually a clear warm red. */ --warn: #C41C0C; /* Paired foreground for --warn used as a FILL (a danger button background), not as text-on-paper (--warn's own tuning above). --paper clears 5.97:1 on this --warn -- --warn was tuned dark specifically for the text-on-paper direction, so re-using it for the opposite direction (paper text on this as a fill) needs its own token, not a re-derivation of --warn itself. */ --warn-fg: var(--paper); /* Syntax-token aliases: light values pass 4.5:1 on paper; the dark blocks restore the bright dark-tuned originals. Components reference ONLY these. */ --code-string: var(--green); --code-keyword: #2453C9; --code-fn: #B84300; --code-str-alt: var(--mascot-deep); --code-num: #946300; /* 0.55 lightness measured 4.70:1 on --paper but only 4.25:1 on --bg-2 (the auth-error banner's actual background) - darkened for AA margin on both. --danger = passive error/status text and metrics; --warn above = interactive danger controls. */ --danger: oklch(0.50 0.18 25); --success: var(--green-2); --live: var(--green); /* Semantic surfaces */ --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); /* --accent is the FILL; --accent-ink is the readable TEXT tone for links/eyebrows/accents on paper; --accent-fg is what sits ON an --accent fill. RESTYLED: --accent (formerly the bright --acid lime, dark text on top) is now a dark neutral (webjsx-toolkit's --primary: 0 0% 15%), so --accent-fg flips to a LIGHT tone (webjsx-toolkit's --primary-foreground: 0 0% 100%) -- verified via npm run a11y after the initial restyle caught this exact dark-on-dark 1.15:1 failure across every kit's .btn-primary/ .active nav item, both of which read --accent-fg as their text color. */ --accent: var(--acid); --accent-fg: var(--paper); --accent-ink: var(--acid-deep); --accent-bright: var(--acid); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */ /* Blends --accent-ink (the readable/darker ink variant), not the raw --accent fill, so light-theme active states clear contrast against --bg; dark/ink and auto-dark restate the prior --accent-based value explicitly below so this change does not leak into them via inheritance. */ --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg)); /* On-color foregrounds — text/icons that sit ON a saturated fill (accent, danger, category chips). Theme-driven so white-on-color never hard-codes #fff. --on-accent tracks --accent-fg; --on-color is the generic light foreground for any colored fill. */ --on-accent: var(--accent-fg); --on-color: #fff; /* Scrims — modal/overlay backdrops. Derived from --fg so a dark theme dims with its own ink rather than a baked rgba(0,0,0). */ --scrim: color-mix(in oklab, var(--fg) 40%, transparent); --scrim-strong: color-mix(in oklab, var(--fg) 72%, transparent); --scrim-media: color-mix(in oklab, var(--fg) 85%, transparent); /* Category palette — surfaces (forum tags, project cards) that color-code by category. Canonical so a theme/accent swap recolors categories instead of drifting from a private --cat-* block. Derived from the base palette. */ --cat-green: var(--green-2); --cat-purple: var(--purple-2); --cat-mascot: var(--mascot); --cat-sun: var(--sun); --cat-flame: var(--flame); --cat-sky: var(--sky); /* Readable TEXT tones for the category hues — the same FILL/TEXT split the lead accent already draws with --accent (fill) vs --accent-ink (text). The bare --cat-* values are chroma-matched to sit behind ink on a swatch, avatar, or tag; as `color:` on newsprint paper they land at ~3.1:1, under the 4.5:1 floor. Any `color:` use of a category hue takes the -ink tone; only background/border-color take the bare one. Each -deep source is already remapped per-theme below, so these follow the theme too. */ --cat-green-ink: var(--green-deep); --cat-purple-ink: var(--purple-deep); --cat-mascot-ink: var(--mascot-deep); --panel-bg: var(--bg); --panel-bg-2: var(--bg-2); --panel-accent: var(--accent); --panel-0: var(--bg); --panel-1: var(--bg-2); --panel-2: var(--bg-3); --panel-hover: color-mix(in oklab, var(--fg) 4%, var(--panel-1)); --panel-3: color-mix(in oklab, var(--fg) 12%, transparent); --panel-text: var(--fg); --panel-text-2: var(--fg-2); --panel-text-3: var(--fg-3); --panel-accent-2: var(--accent-bright, var(--accent)); --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent); /* Single-layer, half-strength companion to --shadow-1, used ONLY by .panel. .panel already carries a tonal --panel-1 fill and a --rule border; a full --shadow-1 on top made three simultaneous edge/surface signals read as boxed/cardy rather than PilotDeck's flat, near-borderless look. --shadow-1/2/3 stay untouched — they are the real elevation scale for things that must read as floating (dialog/dropdown/tooltip/toast). */ --panel-shadow-1: 0 1px 2px color-mix(in oklab, var(--fg) 4%, transparent); /* Type — system-font stack, no custom web fonts loaded (README's explicit no-web-font principle: zero network font requests, zero FOUT risk). RESTYLED 2026-08b: --ff-display no longer forks to a serif stack (that was the prior warm-editorial identity's one deliberate exception, explicitly rejected by the user -- "we dont like any fonts, and we dont like any serifs"). One system sans-serif stack for every text role; headings differentiate from body purely by the fs/fw scale tokens and weight, never by font-family. */ --ff-display: system-ui, sans-serif; --ff-narrow: system-ui, sans-serif; --ff-body: system-ui, sans-serif; --ff-mono: ui-monospace, Menlo, Consolas, monospace; /* Weight scale — regular is the default voice for body/UI text everywhere; medium/semibold/bold are reserved for genuine emphasis (active state, unread counts, own-message author, section headers). Never reach for a hardcoded 600/700 in a component rule — use these so the whole surface can be re-tuned in one place instead of drifting per-component. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Sub-12px tiers exist ONLY for dense OS/data chrome — taskbar strips, session chips, tool-call headers, file-row metadata, ID/stat columns. Never use them for body copy or ordinary UI text: at these sizes the system stack loses its readable x-height, so they are reserved for glanceable, secondary, non-prose material. --fs-pico is the floor. */ --fs-pico: 10px; --fs-nano: 11px; --fs-micro: 12px; --fs-tiny: 13px; --fs-xs: 14px; --fs-sm: 15px; --fs-body: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-h4: clamp(24px, 2cqi, 28px); --fs-h3: clamp(26px, 2.6cqi, 34px); --fs-h2: clamp(28px, 3.6cqi, 44px); --fs-h1: clamp(34px, 4.4cqi, 52px); --fs-hero: clamp(42px, 7cqi, 96px); --fs-mega: clamp(56px, 11cqi, 168px); /* Bridges the fixed --fs-* ladder (tops out at --fs-xl, 21px) and the fluid heading clamps below it — use for fixed (non-clamping) UI text that needs to sit between --fs-xl and a heading tier, e.g. empty-state icon glyphs. */ --fs-2xl: 28px; /* Icon size scale — canonical sizes for glyphs/icons across the kit going forward. Existing ad-hoc pixel values (6/7/8/10/12/14/16/18px etc.) don't need to be migrated in this pass; new/updated icon usage should. */ --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* App/chrome typescale: the default heading scale above is tuned for marketing/hero layouts (h1 up to 64px). Application chrome — page titles, panel headers — needs a compact ceiling so a PageHeader title doesn't dwarf the content. Opt in with `data-typescale="app"` on a container. */ --fs-h1-app: clamp(22px, 2cqi, 26px); --fs-h2-app: clamp(18px, 1.6cqi, 21px); --fs-h3-app: clamp(16px, 1.5cqi, 18px); --fs-h4-app: clamp(15px, 1.6cqi, 17px); --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.55; --lh-long: 1.7; --tr-caps: 0.10em; --tr-label: 0.10em; --tr-tight: -0.02em; --tr-tighter: -0.03em; /* Spacing (8pt) */ /* Micro rungs below --space-1 — dense editor/inspector chrome (table cell padding, pill gaps, tight toolbar gutters) needs finer steps than the 8pt scale offers; same reasoning as --r-hair/--r-0 sitting below --r-1. */ --space-hair: 2px; --space-half: 3px; --space-0: 0; --space-1: 4px; --space-1-5: 5px; --space-1-75: 6px; --space-2: 8px; --space-2-5: 10px; --space-2-75: 12px; /* fills the 10->16 hole (row-form gap, dense cell pad) */ --space-3: 16px; --space-3-5: 20px; /* fills the 16->24 hole (settings body, mono block pad) */ --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px; --space-10: 192px; --density: 1; --pad-y: calc(var(--space-6) * var(--density)); --pad-x: calc(var(--space-6) * var(--density)); --gutter: calc(var(--space-4) * var(--density)); /* Borders — chunky or none */ --bw-hair: 1px; --bw-rule: 2px; --bw-chunk: 4px; --bw-slab: 8px; /* Retuned toward PilotDeck's near-borderless whisper: 14% read as a visibly drawn line, not a hairline. 8% keeps the edge perceptible (still enough to separate a --panel-1-filled surface from its --bg backdrop) without competing with the fill + shadow already doing the container-definition work in .panel. --rule-strong is untouched — it is the deliberate stronger variant for places that need a visible seam (table rules, active tab underline), not the ambient panel/card edge. */ --rule: color-mix(in oklab, currentColor 8%, transparent); --rule-strong: color-mix(in oklab, currentColor 28%, transparent); /* Micro rungs below --r-1 — chips, badges, scrollbar thumbs, tick marks genuinely want a tighter corner than the base radius; without these two tokens the component sheets fell back to raw px literals bypassing the scale. RESTYLED (webjsx-toolkit look): base --radius is 0.5rem (8px), with radius-sm/md/lg at radius-4px/radius-2px/radius (4px/6px/8px) -- --r-1 below is retuned to that 8px base; --r-2/--r-3 keep proportional headroom above it for large-surface corners (cards, dialogs) rather than collapsing to a single flat rung, since webjsx-toolkit itself has no opinion above its one --radius value. */ --r-hair: 2px; --r-0: 4px; --r-1: 8px; --r-2: 10px; --r-3: 14px; --r-pill: 999px; --dur-snap: 80ms; --dur-base: 160ms; --dur-slow: 280ms; --dur-reveal: 560ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* Physical tier — a slight overshoot that reads as a printed stamp landing, used by presses and signature reveals (not by routine UI fades). Kept available post-restyle since some existing consumers still reference it; new work should prefer the webjsx-toolkit-equivalent curves below. */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* RESTYLED (webjsx-toolkit look): its three named easing curves, ported verbatim from webjsx-toolkit/src/styles.css's @theme inline block. */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-collapse: cubic-bezier(0.2, 0, 0, 1); --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); /* Print texture — the prior "Acid Editorial" signature surface treatment. RESTYLED: opacity zeroed so .ds-grain/.ds-halftone (currently applied by no consumer, verified by grep across src/components and ui_kits) render inert under the flat-surface webjsx-toolkit look, without deleting the machinery in case a future editorial-mode consumer opts back in. --grain itself (the data-URI) and --grain-blend are left defined for that reason. */ --grain-opacity: 0; --grain-blend: multiply; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Offset-ink registration — the small print-mark offset used on editorial edges (panel spine, expo numbering). A literal length, not a color. */ --ink-offset: 3px; /* ============================================================ Stacking scale — the ONE ordered set of layers anything may paint into. Rungs are 100 apart so a future layer can be inserted between two neighbours without renumbering the rest, and so a component may locally offset (+1/+2) within its own rung without colliding with the next one. Order is the contract; the numbers are just how it is spelled. Read top to bottom as "what paints over what": --z-below -1 decorative texture UNDER its own content (.ds-grain/.ds-halftone print layer) --z-base 0 in-flow content; the default plane --z-raised 100 a thing lifted above its siblings inside one component (code-lang tab, timeline dot, selection checkbox, resize handle) --z-sticky 200 sticky-within-a-scroller chrome: section labels, sticky table headers, save bars. Above raised content it scrolls past. --z-header 300 the app's own sticky chrome band (.app-topbar/.app-chrome) --z-drawer 400 off-canvas panels (sidebar/pane/session drawers) and their scrim, which must cover the header they slide over --z-window 500 free-floating window-manager surfaces — the OS kit's .wm-root canvas of draggable windows. Above the shell, below all transient popups. --z-dock 600 persistent OS shell furniture that must stay above windows: launcher dock, menubar, taskbar, os-root --z-dropdown 700 menus/popovers anchored to a trigger; they must escape the dock that spawned them --z-modal 800 blocking dialogs, lightboxes, command palettes and their backdrops --z-toast 900 transient notifications — above a modal, because they report on what the modal did --z-tooltip 1000 pointer-following hint; never blocked --z-top 1100 last resort: boot/loading veils and full-screen takeovers that outrank everything, including a tooltip ============================================================ */ --z-below: -1; --z-base: 0; --z-raised: 100; --z-raised-1: calc(var(--z-raised) + 1); --z-raised-2: calc(var(--z-raised) + 2); --z-raised-3: calc(var(--z-raised) + 3); --z-sticky: 200; --z-header: 300; --z-drawer: 400; --z-window: 500; --z-dock: 600; --z-dropdown: 700; --z-modal: 800; --z-toast: 900; --z-tooltip: 1000; --z-top: 1100; --measure: 68ch; --measure-wide: 940px; --measure-narrow: 760px; /* Page-stage ceiling — independent of --measure-wide (which stays the narrower editorial hero/prose measure). Fluid so ultra-wide viewports actually gain real estate instead of flat-lining at a fixed px cap. Percentage, not vw: a stage nested in a sidebar shell or an embedded window has no useful viewport of its own, and a vw term there resolves against the browser instead of the container it actually sits in. */ --stage-wide: min(96%, 1600px); /* Ultra-wide tier — past this the eye loses the line more than the layout gains, so multi-column content takes the extra width instead of one column growing without bound. */ --stage-ultra: min(96%, 2100px); --sidebar-width: 256px; --sidebar-width-collapsed: 64px; /* Canonical breakpoint values — @media can't reference custom properties, so these are documented here (not tokenized) for consistency across responsive.css/responsive2-workspace.css/hero-content.css: - 480px (max-width) mobile portrait - 768px (max-width) mobile/tablet boundary, compact nav/sidebar collapse - 768-1024px (min/max-width) tablet landscape band - 900px (max-width) / 901px (min-width) tablet/desktop layout reflow - 1025px (min-width) desktop Always use these exact values; a near-miss (e.g. 760px, 481px) should be aligned to its canonical neighbour when touched. */ --lh-tall: 1.4; /* Control size scale — heights for status/topbar/crumb + controls. */ --size-sm: 32px; --size-base: 42px; --size-lg: 56px; /* Dense control-height ladder — the actual heights front-door controls (buttons, fields, rows) snap to, one rung tighter than the --size-* chrome scale so app UI reads compact instead of marketing-scale. Density scales them so [data-density=compact/spacious] moves every control at once. Mirrors webgeist's 30/38/46 button ladder, retuned for this system. */ --ctl-sm: calc(28px * var(--density)); --ctl-md: calc(34px * var(--density)); --ctl-lg: calc(42px * var(--density)); /* The canonical single-line input/select/searchfield height (== --ctl-md) and the default list-row min-height, both density-aware. */ --field-height: var(--ctl-md); --row-height: calc(40px * var(--density)); /* Unified focus-ring tokens (single source for the design system). Outset rings (the default) tokenize colour+width+offset; bordered text fields use the inset variant. Deliberate negative offsets on edge-flush/clipping containers stay literal. --focus-color uses --accent-ink (the readable text/UI-boundary tone), never bare --accent (the lime FILL token, which measures ~1.07:1 against --paper and is nearly invisible as an outline — see AGENTS.md token-split rule). */ --focus-color: var(--accent-ink); --focus-w: 2px; --focus-offset: 2px; --focus-ring-inset: inset 0 0 0 var(--focus-w) var(--focus-color); /* letterbox background for video/media containers */ --media-letterbox: #000; } /* ============================================================ Focus-visible styles for keyboard navigation ============================================================ */ .ds-247420 :focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Button variants with focus-visible */ .ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Link focus-visible — all route through the single --focus-* token set so a focus retune (colour/width/offset) happens in one place, never per selector. */ .ds-247420 a:focus-visible, .ds-247420[role="link"]:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Form inputs with focus-visible */ .ds-247420 input:focus-visible, .ds-247420 textarea:focus-visible, .ds-247420 select:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Interactive element focus-visible */ .ds-247420[tabindex]:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } .ds-247420[data-theme="ink"], .ds-247420[data-theme="dark"] { color-scheme: dark; --bg: var(--ink); --bg-2: var(--ink-2); --bg-3: var(--ink-3-dark); --fg: var(--paper); --fg-2: var(--paper-2); --fg-3: var(--paper-3-dark); --panel-bg: var(--bg); --panel-bg-2: var(--bg-2); --panel-0: var(--bg); --panel-1: var(--bg-2); --panel-2: var(--bg-3); --panel-3: color-mix(in oklab, var(--fg) 20%, transparent); --panel-text: var(--fg); --panel-text-2: var(--fg-2); --panel-text-3: var(--fg-3); /* RESTYLED 2026-08b (green/purple lead): dark-mode accent is a LIGHT green chip (#5CBF52, already verified elsewhere in this file at 7.48:1+ on ink surfaces -- reused rather than inventing a new hex) with a DARK --ink foreground -- the inverse of light mode's dark-fill/light-text pairing, same convention every prior restyle used (light chip on dark page, not a same-dark-as-bg chip). --accent does not alias --acid here (--acid is tuned for light-mode fill-with-light-text; dark mode needs its own light-fill-with-dark-text direction). */ --accent: #5CBF52; --accent-fg: var(--ink); --accent-ink: var(--paper); --accent-bright: #5CBF52; --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg)); --danger: oklch(0.68 0.19 25); --flame: #FF5A1F; --amber: #D9A93A; /* warn/sky dark-tuned pairs (mirror flame/amber): the :root paper values (#E0241A / #3A6EFF) are too dark on ink; these clear AA 4.5:1 on --ink. */ --warn: #FF5A52; /* Paired foreground for --warn-as-fill (see :root's --warn-fg comment) -- dark theme's --warn is the lighter tuned red, so its fill needs the dark --ink text, the opposite pairing from :root. */ --warn-fg: var(--ink); --sky: #6E9BFF; /* Category/heritage dark-tuned pairs (same convention as flame/amber/warn/ sky above): the :root values are the PAPER tones and go dark-on-dark here. Measured on --ink (#0E0E12) / --bg-2 (#1F1F26): mascot-deep #B81F63 was 3.13:1 / 2.66:1, purple-2 #7F18A4 2.36:1 / 2.00:1, green #247420 3.30:1 / 2.80:1 — all failing AA for the text roles they carry (aicat/community author names, kpi deltas, stamps, rails). The replacements clear 4.5:1 on BOTH ink surfaces: #FF5C9E 6.67/5.67, #C277FF 6.77/5.75, #5CBF52 8.28/7.04. These are text-tone retunes only — the paper values are untouched. */ --mascot-deep: #FF5C9E; --purple-2: #C277FF; --green: #5CBF52; /* --cat-*-ink text tones for dark. The :root sources (--green-deep #133F10, --purple-deep #220026) are near-black PAPER tones — on ink they land at 1.60:1 / 1.01:1, i.e. invisible. Repoint them at the dark-tuned values already proven above: #5CBF52 8.28:1 on ink / 7.04:1 on --bg-2, #C277FF 6.77:1 / 5.75:1. --cat-mascot-ink needs no entry here: it tracks --mascot-deep, which this same block already remaps to #FF5C9E. */ --cat-green-ink: #5CBF52; --cat-purple-ink: #C277FF; --code-string: var(--green-2); --code-keyword: var(--sky); --code-fn: var(--flame); --code-str-alt: var(--mascot); --code-num: var(--sun); } /* [data-accent="X"] overrides (below) hardcode LIGHT-tuned fills (--acid, --purple, --green) with no dark-theme companion, so data-theme=dark + data-accent=acid/purple/green produced a near-invisible fill against the dark page bg (measured: acid 1.15:1, purple 1.04:1, green 2.98:1 on --ink -- all under the 3:1 non-text UI-fill floor). Same convention as the base --accent retune above: restate the fill as its dark-tuned equivalent so the swatch stays visible, using tones already verified elsewhere in this file (green retune 7.48:1 on --ink, purple-2 retune 6.11:1 on --ink). */ .ds-247420[data-theme="ink"][data-accent="acid"], .ds-247420[data-theme="dark"][data-accent="acid"] { --accent: #5CBF52; --accent-bright: #5CBF52; --accent-fg: var(--ink); --accent-ink: var(--paper); --panel-accent: #5CBF52; } .ds-247420[data-theme="ink"][data-accent="purple"], .ds-247420[data-theme="dark"][data-accent="purple"] { --accent: #C277FF; --accent-bright: #C277FF; --accent-fg: var(--ink); --accent-ink: #C277FF; --panel-accent: #C277FF; } .ds-247420[data-theme="ink"][data-accent="green"], .ds-247420[data-theme="dark"][data-accent="green"] { --accent: #5CBF52; --accent-bright: #5CBF52; --accent-fg: var(--ink); --accent-ink: #5CBF52; --panel-accent: #5CBF52; } /* Restores the pre-existing (weaker) dark-theme selection tint after the light-theme-only bump in app-shell.css's base ::selection rule. */ .ds-247420[data-theme="ink"] ::selection, .ds-247420[data-theme="dark"] ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); } /* NOTE: the [data-theme="auto"] block below mirrors the [data-theme="ink"/"dark"] block above token-for-token. 'auto + OS-dark' and 'explicit dark' are the same visual context and resolve every token — including --danger — identically. The two are kept as separate selectors only because one is media-gated; a future de-drift can consolidate them into a shared selector list once a build step can hoist the media query. */ @media (prefers-color-scheme: dark) { .ds-247420[data-theme="auto"] { --bg: var(--ink); --bg-2: var(--ink-2); --bg-3: var(--ink-3-dark); --fg: var(--paper); --fg-2: var(--paper-2); --fg-3: var(--paper-3-dark); --panel-bg: var(--bg); --panel-bg-2: var(--bg-2); --panel-0: var(--bg); --panel-1: var(--bg-2); --panel-2: var(--bg-3); --panel-3: color-mix(in oklab, var(--fg) 20%, transparent); --panel-text: var(--fg); --panel-text-2: var(--fg-2); --panel-text-3: var(--fg-3); --accent: #5CBF52; /* mirrors [data-theme=ink/dark] retune above */ --accent-fg: var(--ink); --accent-ink: var(--paper); --accent-bright: #5CBF52; --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg)); --danger: oklch(0.68 0.19 25); --flame: #FF5A1F; --amber: #D9A93A; --warn: #FF5A52; --warn-fg: var(--ink); --sky: #6E9BFF; /* Mirrors the [data-theme="ink"] category retune above token-for-token — see that block for the measured before/after ratios. */ --mascot-deep: #FF5C9E; --purple-2: #C277FF; --green: #5CBF52; --cat-green-ink: #5CBF52; --cat-purple-ink: #C277FF; --code-string: var(--green-2); --code-keyword: var(--sky); --code-fn: var(--flame); --code-str-alt: var(--mascot); --code-num: var(--sun); } .ds-247420[data-theme="auto"] ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); } } /* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g. mount() added the class to an inner element while the ancestor html already had it), the inner element would otherwise re-trigger the root light defaults and detach from the ancestor's data-theme override. Force the inner element to inherit the ancestor's resolved tokens. */ .ds-247420 .ds-247420 { --bg: inherit; --bg-2: inherit; --bg-3: inherit; --fg: inherit; --fg-2: inherit; --fg-3: inherit; --panel-bg: inherit; --panel-bg-2: inherit; --accent: inherit; --accent-fg: inherit; --accent-ink: inherit; --panel-1: inherit; --panel-2: inherit; --panel-3: inherit; --panel-text: inherit; --panel-text-2: inherit; --panel-text-3: inherit; --panel-accent-2: inherit; --panel-shadow: inherit; --panel-shadow-1: inherit; --on-accent: inherit; --on-color: inherit; --scrim: inherit; --scrim-strong: inherit; --scrim-media: inherit; --cat-green: inherit; --cat-purple: inherit; --cat-mascot: inherit; --cat-green-ink: inherit; --cat-purple-ink: inherit; --cat-mascot-ink: inherit; --mascot-on-ink: inherit; --success-on-ink: inherit; --cat-sun: inherit; --cat-flame: inherit; --cat-sky: inherit; --code-string: inherit; --code-keyword: inherit; --code-fn: inherit; --code-str-alt: inherit; --code-num: inherit; } /* ============================================================ Named-theme preset contract ------------------------------------------------------------ A theme is one [data-theme="X"] block that overrides ONLY the semantic surface tokens — never component rules, never raw literals in component sheets. The base :root above IS the "paper" theme; [data-theme="paper"] restates it so the attribute is explicit and round-trippable. To add a theme: copy a block, rename the attr, retune the ~8 semantic tokens. ============================================================ */ .ds-247420[data-theme="paper"] { color-scheme: light; --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --accent: var(--acid); --accent-fg: var(--paper); --accent-ink: var(--acid-deep); --accent-tint: color-mix(in oklab, var(--accent-ink) 22%, var(--bg)); /* A paper island under a dark ancestor must not inherit the dark signal pair. */ --flame: #C53E00; --amber: #7C570F; --warn: #C41C0C; --sky: #3A6EFF; } /* thebird — warm-paper brand preset. A first-class swappable theme: it lives here in the canonical layer (not as a global :root override) so any consumer can opt in with data-theme="thebird". The OS-shell chrome (bar heights, window controls) stays in src/kits/os/theme.css; only color lives here. */ .ds-247420[data-theme="thebird"] { color-scheme: light; --paper: #F5F0E4; --paper-2: #EFE9DB; --paper-3: #E3DAC7; --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --accent: var(--green); --accent-fg: var(--paper); --accent-ink: var(--green); } /* github-dark — pi-web's GitHub-dark theme. Cool dark palette with blue accent, ported from pi-web (https://github.com/jmfederico/pi-web). */ .ds-247420[data-theme="github-dark"] { color-scheme: dark; --bg: #0d1117; --bg-2: #161b22; --bg-3: #21262d; --fg: #e6edf3; --fg-2: #c9d1d9; --fg-3: #8b949e; --panel-bg: var(--bg); --panel-bg-2: var(--bg-2); --panel-0: var(--bg); --panel-1: var(--bg-2); --panel-2: var(--bg-3); --panel-3: color-mix(in oklab, var(--fg) 20%, transparent); --panel-text: var(--fg); --panel-text-2: var(--fg-2); --panel-text-3: var(--fg-3); --accent: #58a6ff; --accent-fg: #ffffff; --accent-ink: #58a6ff; --accent-bright: #79c0ff; --accent-tint: color-mix(in oklab, var(--accent) 30%, var(--bg)); --danger: #ff7b72; --flame: #ff7b72; --amber: #d29922; --warn: #ff7b72; --warn-fg: #0d1117; --sky: #58a6ff; --mascot-deep: #ff7b72; --purple-2: #d2a8ff; --green: #3fb950; --green-2: #3fb950; --cat-green-ink: #3fb950; --cat-purple-ink: #d2a8ff; --code-string: var(--green-2); --code-keyword: var(--sky); --code-fn: var(--flame); --code-str-alt: var(--mascot-deep); --code-num: var(--amber); } .ds-247420[data-theme="github-dark"] ::selection { background: color-mix(in oklab, var(--accent) 24%, var(--bg-2)); color: var(--fg); } .ds-247420[data-density="compact"] { --density: 0.75; } .ds-247420[data-density="comfortable"] { --density: 1; } .ds-247420[data-density="spacious"] { --density: 1.35; } .ds-247420[data-accent="acid"] { --accent: var(--acid); --accent-bright: var(--acid); --accent-fg: var(--paper); --accent-ink: var(--acid-deep); --panel-accent: var(--acid); } .ds-247420[data-accent="green"] { --accent: var(--green); --accent-bright: var(--green-2); --accent-fg: var(--paper); --accent-ink: var(--green); --panel-accent: var(--green); } .ds-247420[data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF; --accent-fg: var(--paper); --accent-ink: var(--purple-2); --panel-accent: var(--purple); } .ds-247420[data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink); --accent-ink: var(--mascot-deep);--panel-accent: var(--mascot); } /* Type-scale modifier — opt-in body/lg/xl bump for surfaces that want denser or larger reading sizes without a custom override. */ .ds-247420[data-typescale="sm"] { --fs-body: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-h4: clamp(22px, 1.9cqi, 24px); --fs-h3: clamp(23px, 2.4cqi, 32px); --fs-h2: clamp(26px, 3.4cqi, 41px); --fs-h1: clamp(32px, 4.2cqi, 48px); } .ds-247420[data-typescale="lg"] { --fs-body: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-h4: clamp(27px, 2.2cqi, 31px); --fs-h3: clamp(28px, 2.9cqi, 38px); --fs-h2: clamp(31px, 4cqi, 49px); --fs-h1: clamp(38px, 4.8cqi, 58px); } /* Debug grid overlay — 8px mascot grid. Toggle via class on any container. */ .ds-247420 .with-grid-overlay { background-image: linear-gradient(to right, rgba(232,75,138,0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(232,75,138,0.15) 1px, transparent 1px); background-size: 8px 8px; } /* Reduced-motion guard — neutralizes every transition/animation/transform inside the design-system scope when the user requests reduced motion. Components remain free to opt back in with `@media (prefers-reduced-motion: no-preference) { ... }`. */ @media (prefers-reduced-motion: reduce) { .ds-247420 *, .ds-247420 *::before, .ds-247420 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Semantic alias tier — primitive -> semantic -> component ------------------------------------------------------------ Three layers, in order: 1. PRIMITIVE (above) raw palette values: --acid, --green, --sky, --warn, --panel-1/2/3, --paper/--ink, etc. These are the only tokens that ever carry a literal color/length. A re-brand edits primitives. 2. SEMANTIC (here) named-by-INTENT aliases that resolve to a primitive (e.g. --accent: var(--panel-accent)). A component or a future re-brand can retune ONE semantic variable (say, --rail-danger) without hunting through every primitive it happens to reuse elsewhere. 3. COMPONENT (app-shell.css, community.css, etc.) component sheets keep consuming primitives directly today (--accent, --panel-*, --green, --warn, ...) exactly as before — this tier does not repoint any existing component rule. It exists so a FUTURE swap has a semantic layer ready to migrate onto, one component sheet at a time, without a flag-day rewrite. Purely additive: no primitive token's name or value changes here, and no component references these new names yet. Naming matches vocabulary already established elsewhere in this system: --surface-1/2 mirror the --panel-1/--panel-2 tonal-surface steps already used across app-shell.css/community.css; --rail-info/-success/-warning/-error mirror the canonical .tone-info/.tone-success/.tone-warning/.tone-error banner/badge/chip severity names (app-shell.css L592, community.css .cm-banner.tone-*) rather than inventing a new severity vocabulary. ============================================================ */ .ds-247420 { /* --accent already exists as a primitive-facing alias (var(--acid)) above; restated here under the semantic tier for discoverability alongside its siblings. Same value, same token — not a second definition. */ --surface-1: var(--panel-1); --surface-2: var(--panel-2); /* Rail/status severity aliases — map onto the same color choices the existing .cm-banner.tone-* rules in community.css already use, so a future rail/indicator component can consume one semantic name instead of picking the right primitive per severity by hand. */ --rail-info: var(--sky); --rail-success: var(--green-2); --rail-warning: var(--amber); --rail-error: var(--warn); } /* Elevation tokens consumed by overlays (Tooltip, Popover, Dropdown, Dialog). */ .ds-247420 { --shadow-1: 0 1px 2px color-mix(in oklab, var(--fg) 8%, transparent); --shadow-2: 0 4px 12px color-mix(in oklab, var(--fg) 10%, transparent), 0 2px 4px color-mix(in oklab, var(--fg) 6%, transparent); --shadow-3: 0 12px 32px color-mix(in oklab, var(--fg) 14%, transparent), 0 4px 8px color-mix(in oklab, var(--fg) 8%, transparent); /* Overlay elevation — the float for dialogs/lightboxes that sit above a scrim; heavier than --shadow-3 and theme-driven (was raw rgba(0,0,0,.4)). */ --shadow-overlay: 0 12px 40px color-mix(in oklab, var(--fg) 28%, transparent), 0 4px 12px color-mix(in oklab, var(--fg) 16%, transparent); /* --z-popover is an alias, not a rung: popovers and dropdowns are the same anchored-to-a-trigger layer and must never be able to drift apart. The rungs themselves live with the stacking scale above. */ --z-popover: var(--z-dropdown); } /* app-shell.css */ .ds-247420 * { box-sizing: border-box; } /* width:100% + overflow-x:clip on both html and body: without an explicit width, either can end up narrower than the real viewport once ANY descendant's layout box overflows horizontally by even a subpixel (a flex row that doesn't quite wrap, a fixed-width child inside a shrinking container) -- the sticky .app-topbar/.app-chrome then reads as "not filling the page" because it's pinned to .app's box while the page-level scrollbar (driven by body's real scrollWidth) sits further right than .app's right edge, and login-style narrow pages show the same scrollbar short of the visual page edge. clip (not hidden) so no new scroll container is introduced -- .app-main/.app-side-shell already own their own scroll regions and must stay the only scrollers. */ .ds-247420, .ds-247420 body { margin: 0; padding: 0; width: 100%; overflow-x: clip; } .ds-247420 button, .ds-247420 input, .ds-247420 select, .ds-247420 textarea { font: inherit; } /* Global reduced-motion safety net: catches any component transition/animation that lacks its own per-file prefers-reduced-motion override (most components already opt out locally; this is the backstop for the rest, e.g. plugins-config.css, catalog-theme.css, sidebar-misc.css, row-print.css, topbar.css, primitives.css, git-status.css, panel-row.css). Scroll-snap carousels handle scroll-behavior themselves and are unaffected. */ @media (prefers-reduced-motion: reduce) { .ds-247420 *, .ds-247420 *::before, .ds-247420 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .ds-247420 .skip-link { --skip-link-preflight-translate-clear: -100%; position: absolute; top: 0; left: 0; transform: translateY(var(--skip-link-preflight-translate-clear)); background: var(--accent); color: var(--accent-fg); padding: var(--space-2) var(--space-3); text-decoration: none; z-index: var(--z-top); border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); --skip-link-min-touch-target: 44px; min-height: var(--skip-link-min-touch-target); display: inline-flex; align-items: center; } .ds-247420 .skip-link:focus { transform: translateY(0); top: 10px; outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } .ds-247420 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .ds-247420 .ds-aspect { aspect-ratio: var(--aspect, 16 / 9); width: 100%; overflow: hidden; } .ds-247420 .ds-aspect > * { width: 100%; height: 100%; object-fit: cover; display: block; } .ds-247420 .ds-aspect-square { --aspect: 1 / 1; } .ds-247420 .ds-aspect-video { --aspect: 16 / 9; } .ds-247420 .ds-aspect-portrait { --aspect: 3 / 4; } .ds-247420 body { background: var(--bg); color: var(--fg); font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ds-247420 { --selection-tint-paper-share: 46%; } .ds-247420 ::selection { background: color-mix(in oklab, var(--accent) var(--selection-tint-paper-share), var(--bg-2)); color: var(--fg); } .ds-247420 .app, .ds-247420 .ds-stage { container-type: inline-size; overflow-x: clip; min-width: 0; } .ds-247420 .app * { min-width: 0; } .ds-247420 .app, .ds-247420 .ds-stage, .ds-247420 .app *, .ds-247420 .ds-stage * { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; } /* Firefox gets themed scrollbars via scrollbar-width/-color above; Chrome, Safari, and Edge need the ::-webkit-scrollbar family too, or every scrollable node in the app shell falls back to the raw OS scrollbar and clashes with the dark UI. Same selector scope, same --bg-3 token. */ .ds-247420 .app::-webkit-scrollbar, .ds-247420 .ds-stage::-webkit-scrollbar, .ds-247420 .app *::-webkit-scrollbar, .ds-247420 .ds-stage *::-webkit-scrollbar { width: 8px; height: 8px; } .ds-247420 .app::-webkit-scrollbar-track, .ds-247420 .ds-stage::-webkit-scrollbar-track, .ds-247420 .app *::-webkit-scrollbar-track, .ds-247420 .ds-stage *::-webkit-scrollbar-track { background: transparent; } .ds-247420 .app::-webkit-scrollbar-thumb, .ds-247420 .ds-stage::-webkit-scrollbar-thumb, .ds-247420 .app *::-webkit-scrollbar-thumb, .ds-247420 .ds-stage *::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r-pill, 999px); } .ds-247420 h1, .ds-247420 .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); margin: 0; } .ds-247420 h2, .ds-247420 .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; } .ds-247420 h3, .ds-247420 .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; font-weight: 600; margin: 0; } .ds-247420 h4, .ds-247420 .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; margin: 0; } .ds-247420[data-typescale="app"] h1, .ds-247420[data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; font-weight: var(--fw-medium); } .ds-247420[data-typescale="app"] h2, .ds-247420[data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); font-weight: var(--fw-medium); } .ds-247420[data-typescale="app"] h3, .ds-247420[data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); font-weight: var(--fw-medium); } .ds-247420[data-typescale="app"] h4, .ds-247420[data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); } .ds-247420 .t-hero { font-family: var(--ff-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; } .ds-247420 .t-mega { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.92; letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; } .ds-247420 .t-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: var(--tr-tight); } .ds-247420 .t-mono { font-family: var(--ff-mono); font-weight: 400; } .ds-247420 .t-body { font-family: var(--ff-body); } .ds-247420 .t-label { font-family: var(--ff-body); font-size: var(--fs-tiny); letter-spacing: 0; font-weight: 600; } .ds-247420 .t-micro { font-family: var(--ff-body); font-size: var(--fs-micro); letter-spacing: 0; color: var(--fg-3); font-weight: 600; } .ds-247420 .t-meta { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg-3); } .ds-247420 .lede, .ds-247420 .t-lede { font-family: var(--ff-body); font-size: var(--fs-xl); line-height: var(--lh-tall); max-width: 38ch; font-weight: 400; color: var(--fg-2); margin: 0; } .ds-247420 h1 + .lede, .ds-247420 h1 + .t-lede, .ds-247420 h2 + .lede, .ds-247420 h2 + .t-lede, .ds-247420 h3 + .lede, .ds-247420 h3 + .t-lede, .ds-247420 .t-h1 + .lede, .ds-247420 .t-h1 + .t-lede { margin-top: var(--space-2); } /* .app-main.narrow widens well past prose measure on wide no-sidebar viewports on purpose (topbar.css) so full-width siblings like .post-meta/ h1/.post-index use the room. .lede/.ds-prose keep their reading-measure caps (38ch/--measure) but stayed left edge-anchored inside that wider column, turning the freed width into one-sided dead whitespace on the right of the article body instead of being absorbed as margin. */ .ds-247420 .app-main.narrow > .lede, .ds-247420 .app-main.narrow > .t-lede, .ds-247420 .app-main.narrow > .ds-prose { margin-left: auto; margin-right: auto; } .ds-247420 .lede + .post-body, .ds-247420 .t-lede + .post-body, .ds-247420 .lede + .ds-prose, .ds-247420 .t-lede + .ds-prose { margin-top: var(--space-4); } .ds-247420 .lede + .ds-section, .ds-247420 .t-lede + .ds-section { margin-top: var(--space-8); } .ds-247420 .eyebrow { font-family: var(--ff-mono); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 12px; } .ds-247420 .eyebrow::before { content: ''; width: 28px; height: 3px; background: currentColor; } .ds-247420 .ds-prose { font-family: var(--ff-body); font-size: var(--fs-lg); line-height: var(--lh-long); max-width: var(--measure); text-wrap: pretty; } .ds-247420 .ds-prose p { margin: 0 0 var(--space-4); } .ds-247420 .ds-prose h1 { font-size: clamp(34px, 5.4cqi, 64px); margin-bottom: var(--space-3); } .ds-247420 .ds-prose h2 { margin: var(--space-6) 0 var(--space-3); font-size: var(--fs-h3); } .ds-247420 .ds-prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-h4); font-weight: 600; } .ds-247420 .ds-prose h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-xl); font-weight: 600; } .ds-247420 .ds-prose hr { border: none; border-top: var(--bw-hair) solid var(--rule); margin: var(--space-6) 0; } .ds-247420 .ds-prose blockquote { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); border-left: var(--bw-chunk, 3px) solid var(--panel-accent); background: var(--panel-hover); border-radius: var(--r-1); color: var(--panel-text-2); font-family: var(--ff-body); } .ds-247420 .ds-prose blockquote p:last-child { margin-bottom: 0; } .ds-247420 .ds-prose .ds-prose-endnote, .ds-247420 .ds-prose-endnote { margin-top: var(--space-5); margin-bottom: 0; font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: var(--lh-base); color: var(--fg-3); } .ds-247420 .dim { color: var(--fg-3); } .ds-247420 a { color: inherit; text-decoration: none; } .ds-247420 a.ds-link-accent, .ds-247420 .ds-prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* Visited state was entirely absent -- a returning user had no way to tell an already-read link from an unread one, the one link state browsers don't fake for you. --purple-2 keeps it distinct from both the unvisited accent and any hover/danger tone already in the palette. */ .ds-247420 a.ds-link-accent:visited, .ds-247420 .ds-prose a:visited { color: var(--purple-2); } .ds-247420 a.ds-link-accent:hover, .ds-247420 .ds-prose a:hover { background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent; } .ds-247420 kbd { font-family: var(--ff-mono); font-size: 0.85em; background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-1); } .ds-247420 code { --code-pill-tier3-surface: var(--bg-3); font-family: var(--ff-mono); font-size: 0.92em; background: var(--code-pill-tier3-surface); padding: 0.15em 0.5em; border-radius: var(--r-1); } .ds-247420 pre { font-family: var(--ff-mono); background: var(--panel-bg); color: var(--panel-text, inherit); padding: var(--space-5); overflow-x: auto; line-height: 1.55; font-size: var(--fs-sm); margin: 0; border-radius: var(--r-3); } .ds-247420 pre .k { color: var(--code-str-alt, var(--mascot)); } .ds-247420 pre .s { color: var(--code-string, var(--green)); } .ds-247420 pre .c { color: var(--fg-3); } .ds-247420 pre .n { color: var(--code-num); } /* ============================================================ AppShell — page frame. The topbar floats above a soft background; the body sits inside a rounded inner shell for a friendlier feel. ============================================================ */ .ds-247420 .app { display: flex; flex-direction: column; /* Offset parent for the sidebar drawer/scrim/toggle, which are absolute so they overlay THIS shell (a thebird WM window) rather than the viewport. */ position: relative; /* Explicit at every width, not just the >=1400px override below: a block- level flex container's width:auto normally fills its containing block, but that only held reliably once html/body also carried width:100% (see base.css) -- restating it here removes any remaining ambiguity for the one box every sticky header/scrollbar-fill report traces back to. */ width: 100%; min-height: 100vh; /* Definite height so the flex column resolves height:100% for descendants (e.g. a full-height chat) at every breakpoint, not just where a desktop media override happened to set explicit heights. dvh tracks mobile chrome. */ min-height: 100dvh; height: 100dvh; background: var(--bg); color: var(--fg); /* Notched-device safe area padding (no-op on devices without notches) */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* When the app shell is embedded inside a windowed surface (e.g. the freddie dashboard mounted in a WM window via .fd-root) it is NOT a full-page app: `min-height:100vh` and the absence of an explicit width make it collapse to 0 width at desktop, where the responsive single-column @media rules don't apply. Inside .fd-root it must fill its container instead. (At <=767px the grid already linearizes, which is why the bug only showed at desktop width.) */ .ds-247420 .fd-root .app { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; } .ds-247420 .fd-root .app-body { min-width: 0; } /* Opt-in for long-form/marketing content pages (e.g. a lore/article page) mounted in this same shell -- the default .app is a HARD height:100dvh clamp so its two children (.app-side-shell/.app-main) can each own independent internal scroll (the correct split-scroll architecture for dashboard-style kits like chat/dashboard/os, see .app-side-shell's own comment). A page whose content is simply longer than the viewport and should scroll as one normal document -- not clip at the fold -- opts in with .app-doc-scroll: height becomes min-height only, so .app (and every flex descendant relying on min-height:0 to cap its own height) can grow past 100dvh instead of clipping. Consumers set this by adding the class to whatever element carries .app (see AnEntrypoint/design#viewport-clamp for the reproduction this fixes -- a 247420.xyz content route clipped at exactly the viewport height with the rest of the page unreachable). */ .ds-247420 .app.app-doc-scroll { height: auto; min-height: 100dvh; overflow: visible; } .ds-247420 .app-doc-scroll .app-body { min-height: auto; } .ds-247420 .app-doc-scroll .app-main, .ds-247420 .app-doc-scroll .app-side-shell { overflow-y: visible; min-height: auto; height: auto; } /* Full-bleed canvas host (e.g. a game/3D viewport that fills the page behind the shell): the shell's opaque var(--bg) would paint OVER the canvas and hide it. Mark the host with `canvas-host` to make the shell surfaces transparent so the live canvas shows through. The canvas itself is the backdrop. */ .ds-247420 .canvas-host, .ds-247420 .canvas-host .app, .ds-247420 body.canvas-host { background: transparent !important; } .ds-247420 { --app-status-h: 26px; --app-topbar-h: 64px; --app-crumb-h: 56px; } .ds-247420 .app-topbar { position: sticky; top: 0; z-index: var(--z-header); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-height: var(--app-topbar-h); padding: var(--space-2-5) var(--pad-x); border-bottom: var(--bw-hair, 1px) solid var(--rule); /* Explicit opaque fill, not "inherits var(--bg) by being transparent": a sticky header with no background of its own reads correctly only when nothing with a different fill ever scrolls under it. Any kit with a tinted section, hero gradient, or --bg-2 panel behind the topbar showed it as colorless/see-through once that content scrolled underneath — the "titlebar has no color" report. Every sticky header in this shell (crumb, merged chrome, status) must carry the same opaque var(--bg) so none of them silently depend on page order to look filled. */ background: var(--bg); } /* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them in .app-chrome and they share ONE sticky band instead of stacking as two bars. The breadcrumb provides the left identity (it already begins with the brand), so the topbar's standalone brand is hidden to avoid showing the name twice; nav and the crumb's right slot sit together on the right. */ .ds-247420 .app-chrome { position: sticky; top: 0; z-index: var(--z-header); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--pad-x); border-bottom: var(--bw-hair, 1px) solid var(--rule); /* Same opaque-fill requirement as standalone .app-topbar above — the merged crumb+topbar band is sticky and must not depend on nothing scrolling under it to look filled. */ background: var(--bg); } .ds-247420 .app-chrome > .app-topbar, .ds-247420 .app-chrome > .app-crumb { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; min-height: 0; flex: 1 1 auto; /* Standalone .app-topbar/.app-crumb each carry their own border-bottom for when they're the lone sticky bar -- inside a merged .app-chrome that hairline is still active on the CHILD box, which sits above the chrome's own bottom edge (crumb+topbar rows are shorter than the chrome's full height once padding/gap are added), painting a second, fainter line above the chrome's real bottom border. Only .app-chrome should own the merged band's edge. */ border-bottom: none; } .ds-247420 .app-chrome > .app-crumb { order: 1; flex: 1 1 auto; min-width: 0; } /* flex:1 1 auto + min-width:0 (not the previous 0 0 auto): a merged * chrome's topbar carries the search input, which has its own shrink * basis (.ds-topbar-search, kits-appended.css) meant to yield space before * the row wraps -- but a `0 0 auto` topbar box never shrinks itself, so the * search input's flexibility was inert and the whole topbar instead * dropped to a second line as one unit once combined crumb+topbar content * exceeded the row (witnessed live on the search kit at 1280px: crumb * 564px + topbar 596px overflowed a 1184px content box, wrapping the * topbar under the crumb and reading as a broken sticky header). Letting * the topbar itself shrink means the search input actually compresses * first, keeping both bars on one line at realistic content widths. */ .ds-247420 .app-chrome > .app-topbar { order: 2; flex: 1 1 auto; min-width: 0; justify-content: flex-end; } .ds-247420 .app-chrome > .app-topbar > .brand { display: none; } .ds-247420 .app-chrome > .app-topbar > nav { margin-left: 0; } .ds-247420 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; } .ds-247420 .app-topbar > .brand { flex: 0 0 auto; } .ds-247420 .app-topbar > .app-search { flex: 1 1 auto; } /* SearchInput() passed directly as Topbar's search prop renders with no Topbar-owned wrapper (see Topbar's isElement branch). Its own outer span (.ds-search-input-wrap) is display:contents, so .ds-search-field becomes the actual direct .app-topbar flex-item child — an inline-flex box that otherwise shrinks to its content and starves the input's own width:100% of anything to grow into, truncating the placeholder. Matches .app-search's flex-basis above so both search-slot shapes size the same. */ .ds-247420 .app-topbar > .ds-search-field { flex: 1 1 auto; max-width: 360px; min-width: 0; } .ds-247420 .app-topbar > nav { margin-left: auto; } /* Utility cluster grouping: the theme toggle sits after the repo-info nav links with no visual separation between the two groups, so the row read as one undifferentiated strip of controls. A thin inset rule plus extra left gap reads as "these are a distinct utility group", matching the subtle divider already used between .app-status segments. */ .ds-247420 .app-topbar > .app-topbar-theme { flex: 0 0 auto; margin-left: var(--space-2); padding-left: var(--space-3); position: relative; } .ds-247420 .app-topbar > .app-topbar-theme::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--rule-strong); } .ds-247420 .app-topbar nav { display: flex; gap: var(--space-1); font-size: var(--fs-sm); flex-wrap: wrap; } .ds-247420 .app-topbar nav a { flex: 0 0 auto; } .ds-247420 .app-topbar nav a { color: var(--fg-2); /* Dense desktop chrome (was a 44px pill with 12px 14px pad — marketing-scale touch target in the top bar): --r-1 rounded rect, tighter padding. The 44px floor is UNCONDITIONAL, not behind @media(pointer:coarse) — switch and head-pointer users drive a fine pointer and are never reported as coarse, so a coarse-gated floor leaves them a 39px target. Measured live at 1920: the gated form rendered 39px with pointer:coarse false. Padding stays dense; only the floor moves, so the compact chrome reads unchanged. */ padding: var(--space-2) var(--space-2-5); min-height: 44px; display: flex; align-items: center; border-radius: var(--r-1); transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); } .ds-247420 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); } .ds-247420 .app-topbar nav a:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* RESTYLED: borderless per explicit user request -- the active tab used to carry an inset box-shadow underline; that decorative line is gone. Active state is now conveyed by text color + weight alone (--accent-ink, 600), consistent with tonal-surfaces-over-borders and readable without relying on any drawn line. */ .ds-247420 .app-topbar nav a.active { color: var(--accent-ink); font-weight: 600; } .ds-247420 .brand { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--tr-tight); } /* The wordmark separator printed in the electric lead — the brand tell. */ .ds-247420 .app-search { display: inline-flex; align-items: center; gap: var(--space-2-5); /* Snap to the single-line control ladder (--field-height == --ctl-md, 34px, density-scaled) so the topbar search aligns with sibling topbar controls and shrinks under [data-density]. Was raw 9px 16px padding off the ladder — the one front-door input the control-height port missed. */ height: var(--field-height); padding: 0 var(--space-3); background: var(--bg-2); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--fg-3); max-width: 360px; /* Match the system-wide input border language (.ds-field / .ds-search-input: tonal fill + printed baseline rule) instead of a borderless pill, so the topbar search reads as the same control family as every other input. */ box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule), inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong); transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease); } .ds-247420 .app-search .icon { opacity: 0.6; } .ds-247420 .app-search input { border: 0; background: transparent; font-family: inherit; font-size: inherit; color: var(--fg); width: 100%; } /* Same focus language as .ds-field/.ds-search-input: no outline ring, the baseline rule thickens to the accent instead — matching every other form input in the system rather than a one-off outline ring. */ .ds-247420 .app-search:focus-within { background: var(--bg); box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule), inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent); } .ds-247420 .app-crumb { min-height: var(--app-crumb-h); padding: var(--space-1-75) var(--pad-x); display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--fg-3); min-width: 0; } .ds-247420 .app-crumb .sep { opacity: 0.5; flex: 0 0 auto; } /* Trail segments and the current/leaf segment truncate independently instead of the whole crumb bar overflowing — a long segment (deep file path, long title) must not push the sibling segments or the right slot off-screen. */ .ds-247420 .app-crumb > span:not(.sep):not(.crumb-right) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; } /* Ancestor trail segments previously had no rule of their own and simply inherited .app-crumb's base --fg-3 — the same tone the separators sit on top of (before their own 0.5 opacity dims them further). That leaves only two visually distinct tiers in practice (dim separator, bold leaf) rather than three, since the ancestor tone reads as "default text colour", not a deliberate middle step. --fg-3 is the crumb bar's OWN base, so explicitly restating it here is the anchor for the 3-tier read: separator (--fg-3 at 0.5 opacity, dimmest) < ancestor (--fg-3, mid) < leaf (--fg bold, brightest). */ .ds-247420 .app-crumb > span:not(.sep):not(.leaf):not(.crumb-right) { color: var(--fg-3); } .ds-247420 .app-crumb .leaf { color: var(--fg); font-weight: 600; flex: 0 1 auto; } .ds-247420 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); flex: 0 0 auto; } /* The shell is the grid cell (.app-body's fixed sidebar column); it must own its own scroll, not just size to content, because .app-body's row track is `minmax(0, 1fr)` — a real height the sidebar can overflow once bins + labels + more exceed it. Without this the extra rows were silently chopped at the viewport edge with no way to reach them. */ /* .app-side-shell and .app-main (below) are two INDEPENDENT scroll regions side by side -- correct by design (a sidebar nav and a main panel each own their own overflow), but with default invisible/overlay OS scrollbars a user hovering the boundary has no visual cue which region the wheel will scroll, or that there even are two scrollable zones rather than one page scroll. Thin always-visible scrollbar tracks make each region's own scroll ownership legible without changing the (correct) two-region architecture. */ .ds-247420 .app-side-shell { /* RESTYLED: a lone border-right (removed below) read as an accidental floating line rather than deliberate framing, since the sidebar's background was identical to the page's and nothing else on the page had a matching border for visual balance. A tonal-surface fill (--bg-2, one step off the page background) makes the split-scroll boundary legible the same way every other panel/card edge in this system already is -- via a fill difference, not a hairline -- consistent with the tonal-surfaces-over-borders principle instead of contradicting it. */ background: var(--bg-2); overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; /* Bottom-edge fade: a rail longer than the viewport otherwise shows only the thin scrollbar track as its sole "there is more below" cue. Mirrors the horizontal fade already used by .os-instances (src/kits/os/theme.css) for its own overflow edge, oriented top-to-bottom for this vertical scroller. The top edge stays fully opaque (rows start flush under the topbar with no need to hint upward scroll on initial load); only the trailing 24px softens toward transparent. */ -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); } .ds-247420 .app-side-shell::-webkit-scrollbar { width: 8px; } .ds-247420 .app-side-shell::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); } .ds-247420 .app-side-shell::-webkit-scrollbar-track { background: transparent; } .ds-247420 .app-body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; align-content: stretch; flex: 1; min-height: 0; } .ds-247420 .app-body.no-side { grid-template-columns: minmax(0, 1fr); } /* When there is no sidebar, the empty side-shell must not occupy a grid row, otherwise main wraps to a second (collapsed) row. Remove it from layout. */ .ds-247420 .app-body.no-side .app-side-shell { display: none; } .ds-247420 .app-side { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-2) var(--space-5) var(--space-3); font-size: var(--fs-sm); } /* Sidebar section wrapper emitted by Side() (src/components/shell/app-shell.js). It is the `role="group"` that owns the heading + its links, so it must be the thing that groups them visually too: without a rule it was a bare block, and the only separation between sections came from .app-side's own flex gap — which meant the heading floated equidistant between the group it labels and the one above it. Stacking the group's own children tightly re-attaches the heading to its links. */ .ds-247420 .app-side-group { display: flex; flex-direction: column; gap: var(--space-hair); } .ds-247420 .app-side .group { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); padding: 0 var(--space-3); margin-bottom: var(--space-1-75); } .ds-247420 .app-side a { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--space-2-5); align-items: center; /* Dense rounded-rect nav row (was a 44px pill with 12px 14px padding — tall and consumer-shaped). A --r-1 rounded rect reads as compact app chrome. The 44px floor is UNCONDITIONAL for the same reason as .skip-link's: a pointer:coarse gate misses switch and head-pointer users, who report a fine pointer. Measured live at 1920 the gated form rendered 39px. Padding is unchanged, so the row stays dense — only the floor moves. */ padding: var(--space-2) var(--space-2-5); min-height: 44px; border-radius: var(--r-1); color: var(--fg-2); margin-bottom: var(--space-hair); } @media (pointer: coarse) { .ds-247420 .app-side a { min-height: 44px; padding: var(--space-2-75) var(--space-3); } } /* A sidebar row with no href and no handler is a static label, not a control: Side() emits it as an only so it keeps the grid layout above. It must not claim to be pressable — no pointer, no hover highlight. (An anchor without href is already skipped by the tab order and exposed as generic, not link.) */ .ds-247420 .app-side a:not([href]) { cursor: default; } /* An entry naming a section/tag that does not exist yet — in the sidebar tree or the topbar nav. It stays visible so the intended shape of the docs is legible, but it is not a link and must not read as one: dimmed, and inert like any other href-less anchor. Both selectors are needed because the two navs style their anchors separately. */ .ds-247420 .app-side a.is-unwritten, .ds-247420 .app-topbar nav a.is-unwritten { color: var(--fg-3); cursor: default; } .ds-247420 .app-topbar nav a.is-unwritten:hover { background: none; color: var(--fg-3); } .ds-247420 .app-side a[href]:hover { background: var(--bg-2); color: var(--fg); } .ds-247420 .app-side a:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } .ds-247420 .app-side a.active { color: var(--fg); background: var(--bg-3); font-weight: 500; } .ds-247420 .app-side .count { background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--fg-2); padding: 3px 10px; font-size: var(--fs-micro); font-weight: 700; border-radius: var(--r-pill); } /* Active state is a flat neutral highlight (--bg-3/--fg), not an accent fill -- no hue, just a perceivable shade step up from the plain a[href]:hover (--bg-2). --fg over --bg-3 is the same body-text pairing used everywhere else in the sidebar, so it inherits that AA contrast for free instead of depending on a per-[data-accent] retune. The count chip stays on its default neutral pairing above; there is no accent-on-ink inversion to double down on anymore. */ .ds-247420 .app-side a.active .count { background: color-mix(in oklab, var(--fg) 16%, transparent); color: var(--fg-2); } .ds-247420 .app-main { /* Bottom padding reserves clearance equal to the status bar's own height so the last scrolled child never sits flush behind .app-status (a flex sibling pinned below .app-main in the .app column, not a child of it). --app-status-h-live tracks the bar's collapsed/expanded state (set by the toggle in app-shell.js) and falls back to the full bar height when unset (bar starts expanded / JS hasn't run yet). */ padding: var(--space-5) var(--pad-x) var(--app-status-h-live, var(--app-status-h)); min-width: 0; /* Full-height flex column so a single flex:1 child (e.g. .chat) fills the region between crumb and status instead of floating at content height. */ display: flex; flex-direction: column; min-height: 0; align-self: stretch; height: 100%; } /* Document children (hero, sections, panels) keep their natural height in the scrolling flex column. Without flex-shrink:0 the flex algorithm shrinks them toward min-height:0 once total content exceeds the fixed-height .app-main, collapsing every section to 0 and piling content on top of itself — the failure mode any long-scroll page (a marketing/landing route) hits. Grow children (.chat/.grow/etc.) re-assert flex:1 1 auto below via higher specificity, so a single full-height pane still fills the region. */ .ds-247420 .app-main > * { min-height: 0; flex: none; } /* The main region scrolls its own overflow at every breakpoint (previously only ≥901px), so a fixed-height .app never clips route content and inner panels don't fight the page scroll. */ .ds-247420 .app-main { overflow-y: auto; } /* Reserve the scrollbar track so routes with/without overflow don't shift the layout horizontally when the bar appears. */ .ds-247420 .app-main { scrollbar-gutter: stable; } /* Same visible-scroll-ownership rationale as .app-side-shell above -- makes this the visually distinct SECOND independent scroll region rather than an invisible-scrollbar mystery next to the sidebar. */ .ds-247420 .app-main { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } .ds-247420 .app-main::-webkit-scrollbar { width: 8px; } .ds-247420 .app-main::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); } .ds-247420 .app-main::-webkit-scrollbar-track { background: transparent; } /* Jump-target anchors clear the inner-scroll top edge (no chrome overlap, but a little breathing room when deep-linked within .app-main). */ .ds-247420 .app-main [id] { scroll-margin-top: var(--space-4); } /* Full-height route children fill the region instead of scrolling the page. .aicat-focus-col was missing from this list: .app-main > * defaults every direct child to flex:none (content height) a few rules up, so without a grant here .chat-thread inside it never becomes the actual scrolling ancestor -- .app-main scrolls instead, .chat-thread grows to full content height, and thread-scroll.js's IntersectionObserver (rooted at .chat-thread) never fires because .chat-thread never overflows. New messages landed off-screen with no auto-scroll, live-confirmed via CDP. */ .ds-247420 .app-main > .chat, .ds-247420 .app-main > .chat-area, .ds-247420 .app-main > .chat-kit-page, .ds-247420 .app-main > .aicat-focus-col, .ds-247420 .app-main > .ds-file-stage, .ds-247420 .app-main > .ds-files-stack, .ds-247420 .app-main > .grow { flex: 1 1 auto; min-height: 0; } /* width:100% is load-bearing, not redundant with max-width: .app-body is a CSS grid, and margin:auto on a grid item overrides the default stretch, shrinking the item to its max-content width instead of filling the track and then clamping -- confirmed live at 2560px viewport where mainWidth measured 688px against a correctly-resolved 1400px max-width. Explicit width:100% restores fill-then-cap for every .narrow page, not just wide viewports (the shrink-to-fit bug undersized even the base 760px case). */ .ds-247420 .app-main.narrow { width: 100%; max-width: var(--measure-narrow); margin: 0 auto; } /* .narrow means "prose reading measure", not "shrink the whole shell on wide screens". The old clamp(760px, 46vw, 1000px) grew too slowly to track the real available column: at 1920px viewport the .app-body grid's second track (.app width minus --sidebar-width) is ~1556px, but 46vw=883px sat well under the 1000px ceiling, leaving a ~340px dead gutter between the sidebar and the centered narrow column on an ordinary desktop screen (not just ultrawide) -- confirmed live via a real 1920x1080 CDP viewport, a project page (#/p/). 62vw tracks the actual column growth far closer (1920*0.62=1190px, much nearer the 1556px track than 883px was) while the 1200px ceiling still keeps prose from stretching into an unreadable full-bleed line -- sidebar-present narrow pages read the same width class as the no-side variant below instead of visibly starving next to it. */ .ds-247420 .app-body:not(.no-side) .app-main.narrow { max-width: clamp(var(--measure-narrow), 62vw, 1200px); } /* A shell with no sidebar has no competing column, so the prose clamp there was leaving the whole sidebar's worth of width empty -- 760px of content inside a 1413px shell on a real page. Widen the clamp by the space the absent sidebar would have taken so the measure still reads as prose, just not starved. The floor stays a fixed 980px (no-side is still readable narrow); the ceiling grows with viewport instead of staying pinned at 980px forever -- on a 2560px ultrawide the old fixed value left over half the shell as dead side margin. 1400px ceiling keeps prose measure sane (nobody wants a 2400px-wide paragraph) while letting non-prose content (index rows, meta) actually use the extra room. 60vw sat below the 1016px floor on every viewport under ~1693px, so ordinary desktop widths (1440, 1536) always resolved to the bare floor -- a live CDP measurement at 1440x900 found a ~424px dead gutter (212px each side) around the blog's narrow column, read by users as "not filling the page". 74vw crosses the floor around 1373px so real desktop widths actually grow past it, same reasoning as the sidebar variant above. */ .ds-247420 .app-body.no-side .app-main.narrow { max-width: clamp(calc(var(--measure-narrow) + var(--sidebar-width)), 74vw, 1400px); } /* Article-body heading rhythm and lede spacing, consumed by flatspace-rendered long-form pages (docs, papers) that drop headings/panels directly into .app-main. */ .ds-247420 .app-main > h1, .ds-247420 .app-main > h2, .ds-247420 .app-main > h3 { margin-top: 36px; margin-bottom: 12px; } .ds-247420 .app-main > h1:first-child { margin-top: 8px; } .ds-247420 .app-main > .panel, .ds-247420 .app-main > .work-detail-chips, .ds-247420 .app-main > .cli { margin-top: 18px; margin-bottom: 18px; } .ds-247420 .app-main .ds-lede { margin-top: 4px; margin-bottom: 18px; max-width: 64ch; line-height: 1.6; } .ds-247420 .work-detail-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 10px; } @media (max-width: 720px) { .ds-247420 .app-main > h1, .ds-247420 .app-main > h2, .ds-247420 .app-main > h3 { margin-top: 28px; } } @media (min-width: 1400px) { /* No outer ceiling: .app tracks 100vw at every width, including past 1920px and 2560px+ ultrawide displays, so the shell always fills the real screen edges instead of leaving dead margin on either side. Row/prose measure caps (--measure-wide, --stage-wide, 64ch, etc.) own line-length readability independently of the shell's own width, so letting .app grow unbounded does not create unreadable rows -- text still wraps at its own cap; only the surrounding chrome (panels, sidebar, status bar) stretches to use the extra space. Measured live at 2560px: the prior 1920px cap left a symmetric 320px dead margin on each side (640px total) -- this was the root cause of pages appearing to "shrink to content" rather than fill the screen on wide monitors. */ .ds-247420 .app { width: 100%; margin-left: auto; margin-right: auto; } .ds-247420 .app-main .chat, .ds-247420 .app-main > .chat-area, .ds-247420 .app-main > .main-content { max-width: none; margin: 0; width: 100%; } /* Status bar spans the full-width .app edge-to-edge; no separate width constraint (which previously narrowed it). */ .ds-247420 .app-status { width: 100%; } /* Cap row text measure inside the wide main (ultrawide readability). */ .ds-247420 .row .title, .ds-247420 .row .sub { max-width: var(--measure-wide); } } .ds-247420 .app-status { display: flex; align-items: center; gap: var(--space-3); width: 100%; height: var(--app-status-h); min-height: var(--app-status-h); /* A thin desktop status strip, not a webpage footer band. */ padding: 0 var(--space-4); /* Status chrome is prose, not code - mono is reserved for code/paths. */ font-family: var(--ff-body); font-size: var(--fs-xs); line-height: 1.2; color: var(--fg-3); border-top: 1px solid var(--rule); } .ds-247420 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: var(--space-3); } .ds-247420 .app-status .item:first-of-type { color: var(--accent-ink); } /* Subtle divider between adjacent status segments — a thin inset rule, not a full-height border, so it reads as a quiet separator rather than boxing each item. */ .ds-247420 .app-status .item:not(:first-of-type)::before { content: ''; flex: 0 0 auto; width: 1px; height: 10px; background: var(--rule-strong); } .ds-247420 .app-status .spread { flex: 1; } /* The status bar NEVER wraps: at narrow widths the trailing items (hints, agent target) drop in priority order instead of breaking mid-word onto a second line. */ .ds-247420 .app-status { flex-wrap: nowrap; overflow: hidden; } /* Collapse control — the status bar permanently claims --app-status-h of viewport on every page; this toggle lets it shrink to a thin reachable strip instead. The bar itself stays a fixed-height flex child (never display:none) so the toggle remains reachable to re-expand. */ .ds-247420 .app-status-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; /* 24px matches this codebase's established icon-only-control floor (.ds-chip-remove-btn, .ds-avatar-sm) — 18px measured under the interactive-target minimum every other micro-control here already clears. */ width: 24px; height: 24px; padding: 0; margin-right: var(--space-1); background: transparent; border: none; color: var(--fg-3); cursor: pointer; border-radius: var(--r-0); } .ds-247420 .app-status-toggle:hover { color: var(--fg); background: var(--bg-3); } .ds-247420 .app-status-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } .ds-247420 .app-status.is-collapsed { height: var(--space-4); min-height: var(--space-4); overflow: hidden; } .ds-247420 .app-status.is-collapsed .item, .ds-247420 .app-status.is-collapsed .spread { display: none; } @media (max-width: 1100px) { .ds-247420 .app-status .item:last-of-type:not(:only-of-type) { display: none; } } /* The "dateline" — ASCII bar used at the top of every preview/brand page. 3-4 flex slots; a .spread filler pushes the trailing slot to the far edge instead of every span running together with no gap. */ .ds-247420 .dateline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; overflow: hidden; font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.2; letter-spacing: 0.02em; color: var(--fg-3); } .ds-247420 .dateline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* The spreader itself only ever set flex-basis -- an empty div with no background renders as blank space, not the "dotted spreader" the preview page's own caption describes. border-bottom (not background-image) keeps the dots crisp at 1px without a repeating-gradient banding artifact. */ .ds-247420 .dateline .spread { flex: 1 1 auto; min-width: var(--space-3); align-self: stretch; display: flex; align-items: center; } .ds-247420 .dateline .spread::after { content: ''; flex: 1 1 auto; border-bottom: var(--bw-hair, 1px) dotted var(--rule-strong); } .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-md); min-height: var(--ctl-md); padding: 0 var(--space-2-75); font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: var(--r-1); border: var(--bw-hair) solid transparent; box-shadow: none; transition: transform var(--dur-base) var(--ease-spring), background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease); } .ds-247420 .btn { background: var(--bg-2); color: var(--fg); border-color: var(--rule); } .ds-247420 .btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); } .ds-247420 .btn-primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; } .ds-247420 .btn-primary:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow-2); } .ds-247420 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 var(--bw-hair) var(--fg); } .ds-247420 .btn-ghost:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); transform: translateY(-1px); } .ds-247420 .btn:active, .ds-247420 .btn-primary:active, .ds-247420 .btn-ghost:active { transform: translateY(1px); box-shadow: none; } /* Disabled state: --fg-3 (the tuned tertiary-text token, AA-clear against every panel tier) instead of a blind opacity halving -- opacity multiplies the SURROUNDING contrast too, so a light-on-dark button can drop under 3:1 even though "disabled" only needs to stay legible, not full-strength. */ .ds-247420 .btn:disabled, .ds-247420 .btn-primary:disabled, .ds-247420 .btn-ghost:disabled, .ds-247420 .btn.is-disabled, .ds-247420 .btn-primary.is-disabled, .ds-247420 .btn-ghost.is-disabled { background: var(--bg-2); color: var(--fg-3); border-color: var(--rule); box-shadow: none; cursor: not-allowed; pointer-events: none; } .ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible, .ds-247420 .ds-icon-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } .ds-247420 .btn-sm, .ds-247420 .btn-sm.btn-primary, .ds-247420 .btn-sm.btn-ghost { height: var(--ctl-sm); min-height: var(--ctl-sm); padding: 0 var(--space-2); font-size: var(--fs-tiny); gap: var(--space-1); } /* Link-styled button: an underline (not just color) is the affordance that separates "this navigates" from "this triggers an action" -- .btn-ghost's outline reads as a secondary ACTION button, not a link, at a glance. */ .ds-247420 .btn-link { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: none; box-shadow: none; padding: 0; height: auto; min-height: 0; font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ds-247420 .btn-link:hover { color: var(--fg); } .ds-247420 .btn-link:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } .ds-247420 .btn-lg, .ds-247420 .btn-lg.btn-primary, .ds-247420 .btn-lg.btn-ghost { height: var(--ctl-lg); min-height: var(--ctl-lg); padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2); } /* App chrome is compact/dense (see --fs-h1-app etc in colors_and_type.css) -- the marketing-scale hover lift/shadow reads as an oversized flourish at this density, so app-typescale buttons opt out of it deliberately. */ .ds-247420[data-typescale="app"] .btn:hover, .ds-247420[data-typescale="app"] .btn-primary:hover, .ds-247420[data-typescale="app"] .btn-ghost:hover { transform: none; box-shadow: none; } .ds-247420[data-typescale="app"] .btn:active, .ds-247420[data-typescale="app"] .btn-primary:active, .ds-247420[data-typescale="app"] .btn-ghost:active { transform: none; } .ds-247420[data-typescale="app"] .panel { transition: box-shadow var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease); } .ds-247420[data-typescale="app"] a.row:hover .meta, .ds-247420[data-typescale="app"] .row[role="button"]:hover .meta { transform: none; } .ds-247420 .ds-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; cursor: pointer; border-radius: var(--r-1, 8px); background: transparent; color: var(--fg); width: 32px; height: 32px; transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); } .ds-247420 .ds-icon-btn:hover { background: var(--bg-2); } .ds-247420 .ds-icon-btn-xs { width: 22px; height: 22px; } .ds-247420 .ds-icon-btn-sm { width: 26px; height: 26px; } .ds-247420 .ds-icon-btn-base { width: 32px; height: 32px; } .ds-247420 .ds-icon-btn-lg { width: 40px; height: 40px; } .ds-247420 .ds-icon-btn-xl { width: 48px; height: 48px; } @media (pointer: coarse) { .ds-247420 .ds-icon-btn-xs { width: 32px; height: 32px; } .ds-247420 .ds-icon-btn-sm { width: 32px; height: 32px; } } .ds-247420 .ds-icon-btn-ghost { background: transparent; } .ds-247420 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); } .ds-247420 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); } .ds-247420 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); } /* --warn-fg (not a bare --ink/--on-color literal): --ink only clears AA against dark theme's lighter --warn (#FF5A52, 6.27:1); light theme's --warn is a darker red (#C41C0C) where --ink measures just 2.92:1, well under the 4.5:1 floor. --warn-fg is the theme-paired token (light: paper text 5.97:1, dark: ink text 6.27:1) -- same fix as .btn-primary.danger in app-shell/files.css, which had this exact light-theme regression live. */ .ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--warn-fg); } .ds-247420 .ds-icon-btn-danger:hover { filter: brightness(0.92); } .ds-247420 .ds-icon-btn:active { transform: translateY(1px); } .ds-247420 .ds-icon-btn:disabled, .ds-247420 .ds-icon-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ds-247420 .ds-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; font-size: var(--fs-micro); font-weight: 600; line-height: 1; border-radius: var(--r-pill); background: var(--bg-3); color: var(--fg-2); } /* --fs-nano (11px), not --fs-pico (10px): --fs-pico sits below the 11px legibility floor other small-scale labels in this system respect (see .ds-stat-lbl, .ds-session-row-id), and this size is used live for the workspace rail item-count badge (atoms.js Badge size="sm"). */ .ds-247420 .ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-nano); } .ds-247420 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); } .ds-247420 .ds-badge.tone-green, .ds-247420 .ds-badge.tone-success { background: var(--green-tint); color: var(--green-deep); } /* tone-live is its own hue (sky), split out of the success/green group: "live/broadcasting now" and "operation succeeded" are different facts and read identically when both borrow the brand's accent green — a LIVE badge next to an "ok" chip must not look like the same state. --sky is already used for informational surfaces (ds-alert-info, audio-file icons) and is never pinned by the thebird brand's `--accent:var(--green)!important` override, so it stays visually distinct under every accent preset. */ .ds-247420 .ds-badge.tone-live { background: color-mix(in oklab, var(--sky) 22%, var(--bg)); color: var(--sky); } .ds-247420 .ds-badge.tone-flame, .ds-247420 .ds-badge.tone-error { background: var(--flame); color: var(--on-color); } .ds-247420 .ds-badge.tone-wip, .ds-247420 .ds-badge.tone-neutral { background: var(--bg-3); color: var(--fg-2); } .ds-247420 .ds-badge.tone-purple { background: var(--purple-tint); color: var(--purple-deep); } .ds-247420 .ds-badge.tone-mascot { background: var(--mascot-tint); color: var(--ink); } .ds-247420 .ds-badge.tone-sun, .ds-247420 .ds-badge.tone-yellow { background: var(--sun); color: var(--ink); } .ds-247420 .ds-badge.tone-blue { background: var(--accent-tint); color: var(--accent-ink); } .ds-247420 .ds-badge.tone-orange { background: color-mix(in oklab, var(--flame) 22%, var(--bg)); color: var(--flame); } .ds-247420 .chip { display: inline-flex; align-items: center; gap: var(--space-1-75); padding: 3px 10px; background: var(--bg-2); color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; border-radius: var(--r-pill); } .ds-247420 .chip.chip--sm { padding: var(--space-half) var(--space-2); font-size: var(--fs-micro); gap: var(--space-1); } .ds-247420 .chip.chip--lg { padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-xs); } .ds-247420 .chip.chip--tag { text-transform: none; letter-spacing: 0; font-weight: 500; border-radius: var(--r-0); padding: var(--space-half) var(--space-2); } .ds-247420 .chip.tone-green, .ds-247420 .chip.tone-success, .ds-247420 .chip.tone-ok { background: var(--green-tint); color: var(--green-deep); } /* tone-live: its own sky hue, split from tone-ok/tone-success — see the .ds-badge.tone-live comment above for the rationale. A small pulsing dot precedes the label so "live" reads as an active broadcast state, not a static status chip. */ .ds-247420 .chip.tone-live { background: color-mix(in oklab, var(--sky) 16%, var(--bg)); color: var(--sky); position: relative; padding-left: 22px; } .ds-247420 .chip.tone-live::before { content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); transform: translateY(-50%); } @media (prefers-reduced-motion: no-preference) { .ds-247420 .chip.tone-live::before { animation: chip-live-pulse 1.6s ease-in-out infinite; } } @keyframes chip-live-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--sky) 50%, transparent); } 50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; } } @media (prefers-reduced-motion: reduce) { .ds-247420 .chip.tone-live::before { animation: none; } } .ds-247420 .chip.tone-flame, .ds-247420 .chip.tone-error, .ds-247420 .chip.tone-miss { background: var(--flame); color: var(--on-color); } .ds-247420 .chip.tone-warn { background: color-mix(in oklab, var(--amber) 22%, var(--bg)); color: var(--amber); } .ds-247420 .chip.tone-wip, .ds-247420 .chip.tone-neutral { background: var(--bg-3); color: var(--fg-2); } .ds-247420 .chip.accent, .ds-247420 .chip.tone-accent { background: var(--accent-tint); color: var(--accent-ink); } .ds-247420 .chip.tone-dim { background: var(--bg-3); color: var(--fg-3); } .ds-247420 .chip.tone-purple { background: var(--purple-tint); color: var(--purple-deep); } .ds-247420 .chip.tone-mascot { background: var(--mascot-tint); color: var(--ink); } .ds-247420 .chip.tone-sun, .ds-247420 .chip.tone-yellow { background: var(--sun); color: var(--ink); } .ds-247420 .chip.tone-disabled { background: var(--bg-3); color: var(--fg-3); } .ds-247420 .chip.tone-blue { background: var(--accent-tint); color: var(--accent-ink); } .ds-247420 .chip.tone-orange { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); } .ds-247420 .chip.ds-chip-removable { padding-right: var(--space-1); } .ds-247420 .ds-chip-remove-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: var(--space-half); padding: 0; border: none; border-radius: var(--r-pill); background: transparent; color: currentColor; opacity: 0.7; cursor: pointer; } .ds-247420 .ds-chip-remove-btn:hover, .ds-247420 .ds-chip-remove-btn:focus-visible { opacity: 1; background: color-mix(in oklab, currentColor 16%, transparent); } .ds-247420 .ds-chip-remove-btn svg { width: var(--icon-xs); height: var(--icon-xs); } @media (pointer: coarse) { .ds-247420 .ds-chip-remove-btn { width: 24px; height: 24px; margin-left: 0; } .ds-247420 .ds-chip-remove-btn svg { width: var(--icon-xs); height: var(--icon-xs); } } .ds-247420 .ds-pill { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font-size: var(--fs-micro); background: var(--bg-3); color: var(--fg-2); margin: 1px; } .ds-247420 .ds-pill.tone-accent { background: var(--accent-tint); color: var(--accent-ink); } .ds-247420 .ds-pill.tone-muted { background: transparent; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--rule); } /* .glyph-* sizes (14/18/22px) are for small inline text-adjacent glyphs (single characters/icons sitting in a text flow), a different scale and purpose than the .ds-icon-btn-* tap-target scale (22/26/32/40/48px) below -- the -sm/-lg naming overlap is coincidental, not a shared system. */ .ds-247420 .glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-family: var(--ff-mono); font-size: var(--fs-tiny); opacity: 0.8; } .ds-247420 .glyph { --glyph-size-sm: var(--fs-nano); --glyph-size-base: var(--fs-tiny); --glyph-size-lg: var(--fs-body); } .ds-247420 .glyph-sm { width: var(--icon-xs); height: var(--icon-xs); } .ds-247420 .glyph-base { width: 18px; height: 18px; } .ds-247420 .glyph-lg { width: 22px; height: 22px; } /* Shared empty-state base -- hero-content.css's .empty and community.css's .fd-empty previously duplicated this full rule set; both are joined into this selector list so the shared declarations live in one place, with each keeping its own file-local rule for context-specific extras (background/radius/font-size for .empty; padding for .fd-empty). New consumers can add .ds-empty-state directly instead of a fresh copy. */ .ds-247420 .ds-empty-state, .ds-247420 .empty, .ds-247420 .fd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-3); text-align: center; color: var(--fg-3); } .ds-247420 .ds-empty-state--panel { background: var(--bg-2); border-radius: var(--r-1); } .ds-247420 .ds-empty-state--compact { padding: var(--space-5) var(--space-3); } /* .ds-tooltip — shared floating bubble (overlay-primitives/tooltip.js appends one instance to and repositions it via useFloating). Fade timing matches the component's own 350ms hover-intent delay. */ .ds-247420 .ds-tooltip { position: fixed; z-index: var(--z-top); max-width: 240px; padding: var(--space-1) var(--space-2); border-radius: var(--r-1); background: var(--fg); color: var(--bg); font-size: var(--fs-xs); line-height: 1.35; box-shadow: var(--shadow-2); pointer-events: none; opacity: 0; transform: scale(0.96); transition: opacity var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease); } .ds-247420 .ds-tooltip:not([hidden]) { opacity: 1; transform: scale(1); } .ds-247420 .ds-tooltip::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--fg); transform: rotate(45deg); } .ds-247420 .ds-tooltip[data-placement^="top"]::after { bottom: -3px; left: 50%; margin-left: -3px; } .ds-247420 .ds-tooltip[data-placement^="bottom"]::after { top: -3px; left: 50%; margin-left: -3px; } .ds-247420 .ds-tooltip[data-placement^="left"]::after { right: -3px; top: 50%; margin-top: -3px; } .ds-247420 .ds-tooltip[data-placement^="right"]::after { left: -3px; top: 50%; margin-top: -3px; } .ds-247420 .ds-tooltip.kind-danger { background: var(--warn); color: var(--warn-fg); } .ds-247420 .ds-tooltip.kind-danger::after { background: var(--warn); } @media (prefers-reduced-motion: reduce) { .ds-247420 .ds-tooltip { transition: none; } } /* -- Menubar ------------------------------------------------------------- Row of closed triggers (mirrors .ds-dp-trigger's affordance); without this the wrapper and its item divs fall back to block-level UA defaults, stacking the triggers vertically and rendering them as filled buttons abutting any adjacent status text. */ .ds-247420 .ds-menubar { display: inline-flex; align-items: center; gap: var(--space-1); } .ds-247420 .ds-menubar-item { display: inline-flex; } .ds-247420 .ds-menubar-trigger { display: inline-flex; align-items: center; min-height: 32px; padding: var(--space-1-5) var(--space-2-5); border: 0; border-radius: var(--r-2); background: var(--bg-2); color: var(--fg); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; transition: background-color var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); } .ds-247420 .ds-menubar-trigger:hover { background: var(--bg-3); } .ds-247420 .ds-menubar-trigger:focus-visible { box-shadow: var(--focus-ring-inset); outline: none; } .ds-247420 .ds-menubar-trigger.is-open { background: var(--bg-3); } @media (prefers-reduced-motion: reduce) { .ds-247420 .ds-menubar-trigger { transition: none; } } /* ============================================================ Panel — soft tonal container, no border decoration ============================================================ */ .ds-247420 .panel { /* PilotDeck-parity: the reference canvas has NO visible container edge anywhere except a single hairline (sidebar only) — page bg and panel fill read as the same tone. Stacking a tonal fill + a border + a shadow (the previous three-layer treatment) is what critics independently flagged as "every card reads as a boxed gray tile" / "grid of gray cards" — the single most-repeated, highest-impact gap. Panels are now flat (transparent, no border): content groups are separated by whitespace and an optional --panel-shadow-1 whisper only, never a fill. Use .panel-tonal to opt back into the filled/bordered look for surfaces that genuinely need a floating card (e.g. dropdowns, dialogs already have their own elevation scale and are unaffected). */ background: transparent; border: none; border-radius: var(--r-2); /* AGENTS.md "outer 2:1 inner": outer separation is --space-6, inner sibling gap --space-4 (48:24 = 2:1), matching .ds-panel-trio/ .ds-panel-duo. Bumped up one rung from --space-5/--space-3 for more PilotDeck-style airy whitespace while preserving the 2:1 ratio. */ margin: 0 0 var(--space-6); padding: var(--space-4); position: relative; transition: box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease), transform var(--dur-base) var(--ease-spring); } /* Opt-in tonal/bordered card — the pre-restyle .panel look, kept for surfaces that need to read as a discrete floating card rather than a text grouping on flat canvas (e.g. a composer input, which PilotDeck itself DOES give a faint 1px border+no fill — see .panel-inline below for that exact treatment). */ .ds-247420 .panel.panel-tonal { background: var(--panel-1, var(--bg-2)); border: var(--bw-hair) solid var(--rule); box-shadow: var(--panel-shadow-1); } /* Editorial accent spine — an opt-in printed-ink rule down the left edge that reads as a magazine pull-quote bar, not a glow card. */ .ds-247420 .panel.panel-spine { border-radius: 0 var(--r-2) var(--r-2) 0; padding-left: calc(var(--space-3) + var(--bw-chunk)); } .ds-247420 .panel.panel-spine::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--bw-chunk); background: var(--accent); border-radius: var(--bw-chunk) 0 0 var(--bw-chunk); } /* PilotDeck's composer is the ONE element with a visible edge on an otherwise flat canvas — a faint 1px border, no tonal fill. */ .ds-247420 .panel.panel-inline { background: transparent; border: var(--bw-hair) solid var(--rule); padding: var(--space-3) var(--space-3); } .ds-247420 .panel.panel-wide { background: transparent; box-shadow: none; border: none; } /* Changelog (and any other panel-wide content) needs its OWN container-query context: the existing `@container (max-width: 760px) .ds-changelog-row` rule in hero-content.css measures the nearest CQ ancestor, which without this is `.app`/`.ds-stage` (base.css) — the whole shell width, not this panel's actual rendered width. A changelog panel sitting inside .ds-panel-trio (three equal siblings) can be far narrower than 760px while the shell itself stays well over that, so the row-collapse rule never engages and the message column's `minmax(0, 1fr)` track collapses to 0 — the text then renders past the panel's right edge, clipped mid-word instead of wrapping. Scoping the container here (not on .panel generally) keeps the blast radius to panel-wide content only. */ .ds-247420 .panel.panel-wide { container-type: inline-size; } /* Dense panel — a compact container for app surfaces (inspector sections, sidebars) that want the .panel look without the roomy 16px pad + 24px stack gap. Tighter corner + padding + head, so it sits between .panel and the flush editor .ds-ep-panel. */ .ds-247420 .panel.panel--dense { padding: var(--space-2); margin-bottom: var(--space-2-75); border-radius: var(--r-1); } .ds-247420 .panel.panel--dense .panel-head { padding: var(--space-1-5) var(--space-2); } .ds-247420 .panel.panel--dense .panel-body { padding: var(--space-1-5) var(--space-2) var(--space-2); } .ds-247420 .panel.panel--dense .panel-body > * + * { margin-top: var(--space-2); } .ds-247420 .panel-head { display: flex; align-items: baseline; justify-content: space-between; /* Shares the .panel-body 16px side padding so the caps label and the body rows sit on ONE left axis (the old 24/32 padding was authored for the pre-padding .panel-wide era and indented the label 16px past its content). */ padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); letter-spacing: 0; /* A hairline divider is the header's only structural separator from the body — without it, a sentence-case label at fs-sm/600 reads as just another dim meta line once the eye drops past the top of the panel. */ border-bottom: var(--bw-hair) solid var(--rule); margin-bottom: var(--space-1); } .ds-247420 .panel.panel-wide .panel-head { padding-left: 0; padding-right: 0; } /* A borderless .panel-wide (no card edge to lean on) would otherwise show a divider floating with nothing to visually anchor it — drop it there and rely on spacing alone, matching panel-wide's already-transparent chrome. */ .ds-247420 .panel.panel-wide .panel-head { border-bottom: none; margin-bottom: 0; } .ds-247420 .panel.panel--dense .panel-head { border-bottom: var(--bw-hair) solid var(--rule); margin-bottom: 0; } .ds-247420 .panel-head > :last-child:not(.ds-badge) { font-weight: 500; color: var(--fg-3); font-family: var(--ff-mono); letter-spacing: 0; } /* Panel titles render as a real heading (h2 by default) for AT heading-jump navigation, but must read identically to the old plain span — reset the UA heading margin/size/weight so it inherits .panel-head's own type rules instead of the browser's h2 stylesheet. */ .ds-247420 .panel-title { margin: 0; font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; } /* Category glyph beside a panel title (kits / previews / decks / docs on the homepage) — same inline-svg vocabulary as icons.js, sized to sit on the text baseline rather than dominating it. */ .ds-247420 .ds-panel-title-glyph { display: inline-flex; align-items: center; gap: var(--space-1-5, 6px); } .ds-247420 .ds-panel-title-glyph .ds-icon { flex-shrink: 0; color: var(--fg-3); } .ds-247420 .panel-body { padding: var(--space-2) var(--space-3) var(--space-3); } .ds-247420 .panel-body > * { margin: 0; } /* One-line explanatory caption under a panel's title — e.g. distinguishing two visually-similar panels (lore palette vs semantic tokens) in words instead of leaving the reader to infer it from the title alone. */ .ds-247420 .ds-panel-caption { font-size: var(--fs-sm); color: var(--fg-3); margin: 0 0 var(--space-2); } /* Inner sibling rhythm scales with density like the outer panel rhythm, so a compact/spacious surface stays proportional instead of only its outer intervals moving while the panel interiors hold still. Kept strictly below the outer .ds-panel-gap interval at every density — that ordering is what makes proximity report grouping truthfully. */ .ds-247420 .panel-body > * + * { margin-top: calc(var(--space-3) * var(--density)); } .ds-247420 .panel.panel-wide .panel-body { padding: 0; } /* ============================================================ Row — primary list pattern. Indicator rail on the left, no hairlines between rows. ============================================================ */ .ds-247420 .row { display: grid; grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; /* App density is the BASE: a list row is quiet working chrome, so it defaults to the compact 12px/16px rhythm (density-scaled) rather than the old 16px/24px marketing padding. .row--lede restores the roomier marketing voice for editorial index pages. */ padding: calc(var(--space-2-75) * var(--density)) var(--space-3); background: var(--bg); border-radius: var(--r-1); color: var(--fg); position: relative; /* Only background + the leading rail animate; padding/size never change on interaction, so they are deliberately absent (a padding transition here was dead and misleading). */ transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring); } .ds-247420 .row + .row { margin-top: 2px; } /* Mobile tap-target floor: at compact/comfortable density on a touch viewport the padding-only row height can fall under the 44px effective tap target (WCAG 2.5.5), especially at [data-density="compact"] (0.75x). Force a min-height on narrow/coarse-pointer viewports only, so the dense desktop mono/list layout (file-row, index-row) is untouched above 640px. */ @media (max-width: 640px), (pointer: coarse) { .ds-247420 .row, .ds-247420 a.row, .ds-247420 button.row, .ds-247420 .row[role="button"] { min-height: 44px; } } /* Interactive rows (anchor/button wrappers) get a hairline lift on hover, matching the btn/panel elevation language — non-interactive rows (plain divs used as static list items) are unaffected since the selector needs a real interactive role. */ .ds-247420 a.row:hover, .ds-247420 button.row:hover, .ds-247420 .row[role="button"]:hover { box-shadow: var(--shadow-1); } /* `detail` drops to its own full-width line. The row is a grid, so span every track (grid-column 1/-1); flex-basis:100% covers the flex-row fallback. */ .ds-247420 .ds-row-detail { white-space: pre-wrap; font-family: var(--ff-mono); font-size: var(--fs-sm); line-height: var(--lh-snug); margin-top: var(--space-2); padding: 10px 12px; background: var(--bg); border-radius: var(--r-1); overflow-x: auto; flex-basis: 100%; grid-column: 1 / -1; } /* RESTYLED: borderless per explicit user request -- the left-edge indicator rail (.row::before, plus every rail-tone / active / error variant of it) is gone. Status/active/error state is now conveyed by tonal background alone (already the case for .active/.row-state-error below); the screen-reader status word Row() already emits alongside the rail is untouched, so assistive tech loses nothing. */ /* A clickable row (onClick -> role=button, or a link row) is interactive, so it carries a pointer cursor; without this the click affordance is invisible. */ .ds-247420 .row[role="button"], .ds-247420 a.row { cursor: pointer; } .ds-247420 .row[role="button"]:hover, .ds-247420 a.row:hover { background: var(--bg-2); } /* Editorial hover-reveal — the row's meta (cta) slides toward the lead accent and nudges right, the printed-index "open" affordance. */ .ds-247420 .row .meta { transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); } .ds-247420 a.row:hover .meta, .ds-247420 .row[role="button"]:hover .meta { color: var(--accent-ink); transform: translateX(3px); } .ds-247420 .row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); } .ds-247420 .row.active .title { color: var(--accent-ink); } /* ConversationList rows use `ds-session-row`, not `row` -- CI's a11y-audit caught --fg-3 (--ink-3) on `.ds-session-sub` failing AA (measured 4.43:1) inside a rail-tinted row after the warm-paper retune. --fg-2 (--ink-2) clears comfortably; scoped to `.ds-session-sub` specifically so plain rows without a rail tone keep the lighter --fg-3 tone. */ .ds-247420 .ds-session-row.active .ds-session-sub, .ds-247420 .ds-session-row[class*="rail-"] .ds-session-sub { color: var(--fg-2); } .ds-247420 .row.row-state-disabled { opacity: 0.5; pointer-events: none; } .ds-247420 .row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); } .ds-247420 .row.rail-purple { background: color-mix(in oklab, var(--purple-2) 8%, var(--bg-2)); } .ds-247420 .row.rail-flame { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); } .ds-247420 .row-grid { /* explicit grid-template-columns set inline */ } /* A row with no leading code/index drops the empty first column so the title takes the full width instead of wrapping in the narrow code gutter. */ .ds-247420 .row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; } /* Template-rendered index/example rows (site/theme.mjs panels, via panelNode()/examplesNode() in src/page-html/client-script.js) share one row template across every panel-driven section on the homepage — "ui kits", "previews", "file browser", "web components", "public api", "why design", "live examples". Every one of those rows carries an inline ".meta.dim" description and a trailing ".ds-row-arrow"; some ALSO carry a leading ".code" span (file_browser/web_components/api_exports items have a `code` field, "why design"/"live examples" items do not) — the selector below has to handle both shapes as ONE template, not two. Un-augmented, the base 3-track .row grid (minmax(80px,12ch) / minmax(0,1fr) / auto) either crams the title into the narrow 12ch code gutter (no-code rows) or, worse, auto-places an EXPLICIT-grid orphan: once .title/.ds-row-arrow/.meta.dim below are pinned to explicit grid-column/grid-row, a .code span left on `auto` placement can't share row 1 with .title (already occupying column 1) and gets pushed into a phantom row 3, rendering as a stray floating "fb"/"wc"/"api" line under the description — the exact bug this rule exists to prevent, previously left unfixed for the has-code case. Rows carrying a dim meta description and an arrow always get the two-row template: code + title + arrow share row 1 (code first, in its own narrow track), the description drops to its own full-width row 2 and wraps normally — matching how every other multi-line row pattern in this file (.ds-row-detail) already gets a dedicated line. */ .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) { grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: var(--space-1); } .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .code { grid-column: 1; grid-row: 1; } .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .title { grid-column: 2; grid-row: 1; } .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .ds-row-arrow { grid-column: 3; grid-row: 1; } .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow) .meta.dim { grid-column: 1 / -1; grid-row: 2; } /* No-code rows ("why design", "live examples") drop the empty leading gutter so the title starts flush left instead of leaving a dead 12ch column — same fix .row-nocode already applies to the base template. */ .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow):not(:has(.code)) { grid-template-columns: minmax(0, 1fr) auto; } .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow):not(:has(.code)) .title { grid-column: 1; } .ds-247420 .row:has(.meta.dim):has(.ds-row-arrow):not(:has(.code)) .ds-row-arrow { grid-column: 2; } .ds-247420 .row .meta.dim { white-space: normal; min-width: 0; text-align: left; } .ds-247420 .ds-row-arrow { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; align-self: center; justify-self: end; } .ds-247420 a.row:hover .ds-row-arrow, .ds-247420 .row[role="button"]:hover .ds-row-arrow { color: var(--accent-ink); } /* `.row-code` / `.row-title` / `.row-meta` are the BEM-ish spelling of the same three cells as `.code` / `.title` / `.meta`. Both spellings are live in the wild (preview/index-row.html uses the hyphenated one), and a cell that matches no rule falls back to browser defaults — 16px body text in all three tracks, which is precisely the undifferentiated render the specimen page was shipping. Aliased rather than renamed so neither spelling can silently go unstyled again. */ .ds-247420 .row .code, .ds-247420 .row .row-code { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* Title defaults to the quiet app voice (fs-sm/500) — the 18px/600 marketing voice is now opt-in via .row--lede. */ .ds-247420 .row .title, .ds-247420 .row .row-title { font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-sm); line-height: var(--lh-snug); display: flex; align-items: baseline; gap: var(--space-2-5); flex-wrap: wrap; min-width: 0; } .ds-247420 .row .title .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); } /* Marketing/editorial index row — restores the roomier padding + larger title the default carried before app-scale became the base. */ .ds-247420 .row--lede { padding: var(--space-3) var(--space-4); } .ds-247420 .row--lede .title { font-size: var(--fs-lg); font-weight: 600; } /* App typescale: list rows are quiet working chrome (the 18px/600 default is a marketing-surface voice). One size for ALL app list rows - matches .ds-file-row/.ds-session-title at fs-sm/500; values mirror the kit's own mobile block below. Marketing pages without data-typescale keep the default. */ .ds-247420[data-typescale="app"] .row { padding: 12px 16px; } .ds-247420[data-typescale="app"] .row .title { font-size: var(--fs-sm); font-weight: 500; } .ds-247420 .row .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); } /* Context-pane cwd fact reads as a path (like .ds-dash-cwd/.ds-session-agent/ .ds-dash-model) -- scoped to that one row so no other Row .sub is affected. */ .ds-247420 .ds-context-cwd-row .row .sub { font-family: var(--ff-mono); } .ds-247420 .row .meta, .ds-247420 .row .row-meta { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; } /* `.row-meta` carries free prose ("state machine · 3k · shipping"), unlike `.meta`'s short tabular counts — so it wraps instead of forcing the row's third track wide enough to overflow a phone viewport. */ .ds-247420 .row .row-meta { white-space: normal; } /* Hairline-divided index list. `.row` is deliberately hairline-FREE (the rail is the affordance), but an editorial index reads as a printed table of contents: the divider IS the structure, which is what preview/index-row.html's caption claims. Opt-in on the container so no existing rail-based list changes. */ .ds-247420 .row-list > .row + .row { margin-top: 0; border-top: 1px solid var(--rule); border-radius: 0; } .ds-247420 .row-list > .row:first-child { border-radius: var(--r-1) var(--r-1) 0 0; } .ds-247420 .row-list > .row:last-child { border-radius: 0 0 var(--r-1) var(--r-1); } /* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */ .ds-247420 .ds-works-meta { display: inline-flex; align-items: center; gap: .4em; } .ds-247420 a.row { text-decoration: none; } /* ============================================================ Hero ============================================================ */ /* RESTYLED 2026 (webjsx-toolkit look): centered-stack hero, replacing the prior asymmetric two-column editorial grid (title-wide / body+aside-offset) per a deliberate house-rule reversal -- shadcn/webjsx-toolkit itself has no asymmetric-grid opinion, and the prior "no centered stack, ever" rule was specific to the retired Acid Editorial identity. All child classes/markup are UNCHANGED (no JS component edit needed) -- only the grid arrangement and each part's own layout (aside becomes a full-width card below the body instead of a right-column card) changed. Centered text, capped measure. RE-CENTERED 2026-08-09: reverted the 2026-07-31 de-centering (flex-start + left text-align + left inset) back to a centered stack -- the airy, dead-centered arrangement is the intended house look after all, matching the plain centered-lead reference this hero is now aligned to. Aside card dropped its filled background/accent bar for a plain top-rule divider. */ .ds-247420 .ds-hero { padding: var(--space-9) 0 var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); max-width: var(--stage-wide); text-align: center; position: relative; isolation: isolate; } .ds-247420 .ds-hero-head { display: grid; gap: var(--space-3); justify-items: center; margin-inline: auto; } .ds-247420 .ds-hero-body { margin-inline: auto; } /* The stat/badge/CTA cluster now sits as a full-width card BELOW the body copy, left-aligned with the rest of the stack, rather than a right-offset column -- still carries its own visual weight via the top accent bar (rotated from the former left spine) so it still reads as a deliberate block, not an afterthought. */ .ds-247420 .ds-hero-aside { position: relative; isolation: isolate; width: 100%; max-width: 46ch; margin-inline: auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); background: transparent; border-top: var(--bw-hair, 1px) solid var(--rule); padding: var(--space-4) var(--space-5) var(--space-5); text-align: left; } .ds-247420 .ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); } .ds-247420 .ds-hero-stat { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-2); letter-spacing: var(--tr-tight); padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3); } .ds-247420 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; } /* HeroFromPageData's richer badge shape ({label, desc}) renders a strong figure plus a muted descriptor inside the same .ds-hero-stat row — give the pair a baseline-aligned inline layout instead of falling back to unstyled default inline flow. */ .ds-247420 .ds-hero-stat-n { font-weight: 700; color: var(--fg); margin-right: var(--space-2); } .ds-247420 .ds-hero-stat-l { color: var(--fg-3); font-size: var(--fs-xs); } .ds-247420 .ds-hero-title { font-family: var(--ff-display); font-weight: 700; /* Bespoke display clamp, deliberately off the --fs-* ladder: --fs-hero is clamp(42px,7cqi,96px) and --fs-mega is clamp(56px,11cqi,168px). This lead runs a steeper 9cqi slope with a LOWER 40px floor so a two-line 16ch title still fits a narrow column, and a 116px ceiling between the two tiers. Snapping to either changes the hero's whole optical weight. */ font-size: clamp(40px, 9cqi, 116px); /* 0.96 let ascenders/descenders visibly touch between wrapped lines at the upper end of this clamp (measured on "the creative department of the internet" at the 116px ceiling) -- 1.02 keeps the tight, no-air display feel this title wants while clearing enough vertical room that letters stop colliding. */ line-height: 1.02; letter-spacing: var(--tr-tighter); margin: 0; max-width: 16ch; margin-inline: auto; text-wrap: balance; } .ds-247420 .ds-hero-body { font-family: var(--ff-body); font-size: var(--fs-xl); line-height: 1.45; margin: 0; max-width: 46ch; color: var(--fg-2); } /* The lead phrase in the title — printed in the electric lead, not glowing. */ .ds-247420 .ds-hero-accent { color: var(--accent-ink); font-weight: 700; } .ds-247420 .ds-hero-actions { display: flex; gap: var(--space-2, 10px); flex-wrap: wrap; justify-content: flex-start; margin-top: var(--space-4); } /* Hero CTA labels are content-driven (e.g. "GitHub", proper nouns from home.yaml) and the site's voice is deliberately all-lowercase everywhere else. Force the rendered case here rather than hand-lowercasing every proper-noun label at the content layer, so a future CTA label doesn't silently reintroduce Title Case. */ .ds-247420 .ds-hero-actions .btn { text-transform: lowercase; } /* Filter input above the homepage's "ui kits" panel — reuses the same .input token the search kit's own topbar query box uses, just placed inline above the panel instead of in a topbar slot. */ .ds-247420 .ds-kits-panel-wrap { display: flex; flex-direction: column; gap: var(--space-2, 10px); } .ds-247420 .ds-kits-filter { display: flex; } .ds-247420 .ds-kits-filter-input { width: 100%; max-width: 32ch; } /* Category pill row above the kits grid — same tonal-surface convention as .chip (primitives.css), never a bespoke color. Active state fills with --accent/--accent-fg (the same pairing .btn-primary already uses) rather than inventing a new "selected" hue. */ .ds-247420 .ds-cat-pills { display: flex; flex-wrap: wrap; gap: var(--space-1-75); } .ds-247420 .ds-cat-pill { display: inline-flex; align-items: center; gap: var(--space-1-75); padding: var(--space-1) var(--space-2-5); background: var(--bg-2); color: var(--fg-2); border: none; border-radius: var(--r-pill); font-family: var(--ff-body); font-size: var(--fs-tiny); font-weight: 500; cursor: pointer; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .ds-247420 .ds-cat-pill:hover { background: var(--bg-3); } .ds-247420 .ds-cat-pill.is-active { background: var(--accent); color: var(--accent-fg); } .ds-247420 .ds-cat-pill-count { font-family: var(--ff-mono); font-size: var(--fs-nano); opacity: 0.7; } @media (prefers-reduced-motion: reduce) { .ds-247420 .ds-cat-pill { transition: none; } } /* Below this width the aside card's own internal rhythm (stat rows still stacked vertically at full width) is already correct for a narrow column — no separate breakpoint override needed now that .ds-hero is always a single-column left-aligned stack at every width. */ @container (max-width: 900px) { .ds-247420 .ds-hero { padding: var(--space-7) 0 var(--space-6); } } /* .ds-hero already supplies its own --space-8 (96px) trailing padding, same "gap owned by one side only" pattern as * + .ds-section below. A .panel right after it still added its own --space-6-scaled top margin PLUS its panel-head top padding on top of that -- measured live, the stat block sat ~138px from "currently shipping" (96 hero pad + panel's own lead) versus the ~42px any other block gets ahead of a .panel, and well past the 96px .ds-section itself uses for its "more space above than below" lead. Zero the panel's own top margin here so the hero's trailing padding is the only contributor, matching every other panel/section transition on the page. */ .ds-247420 .ds-hero + .panel { margin-top: 0; } .ds-247420 .ds-chat-title { margin: 0; font-size: inherit; } /* ============================================================ Section grouping ============================================================ */ .ds-247420 .ds-section { margin: var(--space-8) 0; } /* A .ds-section's own margin-top exists so a BARE first section (no element above it inside .app-main/.ds-app-surface) still gets the --space-8 lead from something. But .app-main and .ds-tier are flex/grid containers, where sibling margins never collapse -- so once ANY preceding sibling supplies its own trailing space (a .panel's --space-4 bottom margin, or a prior .ds-section's own --space-8 bottom margin), that top margin stacks ON TOP of it instead of coordinating into one gap: measured live, two adjacent .ds-section elements sat 192px apart (96 + 96) instead of 96, and a .panel followed by a .ds-section sat ~136px apart instead of the intended single gap. Zeroing the top margin on every NON-first .ds-section collapses the pair back to one coordinated gap, supplied by whichever side already carries it (the preceding sibling's own bottom margin, or the .ds-section's trailing margin below) -- same "gap is owned by one side only" pattern as .ds-panel-gap + .ds-panel-gap / .row + .row elsewhere in this file. */ .ds-247420 * + .ds-section { margin-top: 0; } /* Compact section (e.g. a PageHeader used as a page's first element): no large leading margin, modest trailing margin — top-aligns without consumer overrides. */ .ds-247420 .ds-section-compact { margin-top: 0; margin-bottom: var(--space-4); } .ds-247420 .ds-section > h3 { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h3); /* Zero top margin looks like it inverts the more-space-above-than-below rule, but it does not: this h3 is always the section's first child and .ds-section itself carries the --space-8 (96px) lead, so the effective space above is 96px against 32px below. Adding a top margin here would double the lead. Measured live on project_page: gapAboveInSection 0 with the section margin supplying the separation, gapBelow 32. */ margin: 0 0 var(--space-5); letter-spacing: -0.01em; } @media (max-width: 900px) { .ds-247420 .ds-section { margin: var(--space-4) 0; } } /* ============================================================ Print texture — the signature surface treatment. Opt-in overlay that reads as risograph/newsprint grain, layered above the surface fill but below content. Faint by default so type stays crisp; reduced-data and reduced-motion are unaffected (texture is static). ============================================================ */ .ds-247420 .ds-grain { position: relative; isolation: isolate; } .ds-247420 .ds-grain::after { content: ''; position: absolute; inset: 0; z-index: var(--z-below); pointer-events: none; background-image: var(--grain); background-size: 160px 160px; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); } /* ============================================================ Marquee / ticker — brand kinetic device ("always open 24/7"). The track holds two identical runs so the loop is seamless; reduced-motion freezes it to a single static run. Editorial, not a decorative flourish. ============================================================ */ .ds-247420 .ds-marquee { overflow: hidden; width: 100%; border-block: var(--bw-hair) solid var(--rule-strong); padding: var(--space-2) 0; font-family: var(--ff-display); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%); } .ds-247420 .ds-marquee-track { display: inline-flex; gap: var(--space-5); white-space: nowrap; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .ds-247420 .ds-marquee-track { animation: ds-marquee-run 28s linear infinite; } .ds-247420 .ds-marquee:hover .ds-marquee-track, .ds-247420 .ds-marquee:focus-within .ds-marquee-track, .ds-247420 .ds-marquee:active .ds-marquee-track { animation-play-state: paused; } } .ds-247420 .ds-marquee-run { display: inline-flex; align-items: center; gap: var(--space-5); } .ds-247420 .ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); } .ds-247420 .ds-marquee-sep { color: var(--accent-ink); } @keyframes ds-marquee-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Touch has no hover-pause; slow the ticker so it burns less attention. */ @media (hover: none), (pointer: coarse) { .ds-247420 .ds-marquee-track { animation-duration: 40s; } } @media (prefers-reduced-motion: reduce) { /* Static: wrap to a readable strip instead of a frozen half-offscreen run. */ .ds-247420 .ds-marquee-track { animation: none; flex-wrap: wrap; white-space: normal; } .ds-247420 .ds-marquee-run-b { display: none; } } /* ============================================================ Install — single CLI command card ============================================================ */ .ds-247420 .cli { display: flex; align-items: center; gap: 14px; overflow-x: auto; padding: var(--space-3-5) var(--space-4); background: var(--ink); color: var(--paper); border-radius: var(--r-3); font-family: var(--ff-mono); font-size: var(--fs-lg); } /* user-select:none (matching .ds-cli-row .prompt below) so selecting/copying a command line grabs only the command text, not the prompt mark itself -- otherwise every copy-pasted line carries a leading '$ ' that has to be stripped by hand before it can be re-run. */ .ds-247420 .cli .prompt { color: var(--green-2); user-select: none; } .ds-247420 .cli .cmd { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); } .ds-247420 .cli .copy { padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper); font-size: var(--fs-tiny); letter-spacing: var(--tr-tight); font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-pill); } .ds-247420 .cli .copy:hover { background: var(--fg-3); } .ds-247420 .cli .copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Multi-line CLI block: when .cli holds .ds-cli-row / .ds-cli-comment children (quickstart scripts, multi-command snippets — see CliBlock in src/components/content.js) it stacks as a column instead of the single-line install row. */ .ds-247420 .cli:has(.ds-cli-row), .ds-247420 .cli:has(.ds-cli-comment) { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--fs-sm); line-height: 1.6; } .ds-247420 .ds-cli-row { display: flex; gap: 10px; font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.6; padding: 3px 0; } .ds-247420 .ds-cli-row .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; } /* `overflow-wrap: break-word` only breaks a token when it genuinely cannot fit the line at all (last resort); `word-break: break-word` (its predecessor here) breaks ANY overflowing token eagerly, which is what split "anentrypoint-design" mid-identifier inside the importmap JSON line. `min-width: 0` lets the flex child actually shrink to trigger wrapping instead of pushing the panel wider. */ .ds-247420 .ds-cli-row .cmd { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: var(--paper); } .ds-247420 .ds-cli-comment { color: var(--fg-3); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.6; padding: 3px 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; } /* Quickstart copy button: sits below the multi-line block (Install's inline copy button assumes a single-line row with room beside it; the stacked quickstart block has no such side room). */ .ds-247420 .ds-quickstart-cli { flex-direction: column; align-items: stretch; gap: var(--space-2); } .ds-247420 .ds-quickstart-copy { align-self: flex-end; padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper); font-family: var(--ff-body); font-size: var(--fs-tiny); letter-spacing: var(--tr-tight); font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong); border-radius: var(--r-pill); border: none; } .ds-247420 .ds-quickstart-copy:hover { background: var(--fg-3); } .ds-247420 .ds-quickstart-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* ============================================================ Receipt — key/value table ============================================================ */ .ds-247420 table.kv { width: 100%; border-collapse: collapse; } .ds-247420 table.kv td { padding: 8px 0; font-family: var(--ff-body); font-size: var(--fs-sm); } .ds-247420 table.kv tr + tr td { border-top: 1px solid var(--rule); } .ds-247420 table.kv td:first-child { color: var(--fg-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-caps); width: 14ch; /* The 14ch column width is a target, not a guarantee — a label whose uppercase-transformed width fills the column exactly (e.g. "environment") leaves zero slack before the value cell, so label and value render with no visible gap between them ("ENVIRONMENTproduction") while shorter labels (region, build, by) are saved only by leftover column slack. An explicit right-side padding guarantees a gap regardless of label length, instead of relying on slack that a long label can consume entirely. */ padding-right: var(--space-3); } .ds-247420 table.kv td:last-child { font-weight: 600; overflow-wrap: anywhere; min-width: 0; } /* Tiny screens: stack the key over the value instead of squeezing a 14ch label column beside long unbroken values (URLs, hashes). */ @media (max-width: 400px) { .ds-247420 table.kv td { display: block; width: auto; padding: 4px 0; } .ds-247420 table.kv td:first-child { padding-top: 8px; } .ds-247420 table.kv tr + tr td { border-top: 0; } .ds-247420 table.kv tr + tr td:first-child { border-top: 1px solid var(--rule); } } /* ============================================================ Generic table ============================================================ */ .ds-247420 table { width: 100%; border-collapse: collapse; font-family: var(--ff-body); font-size: var(--fs-sm); /* A data grid, not a card: a tight --r-0 corner (was --r-3/22px, which read as a rounded card). Cells drop to 8px 12px for a dense, scannable row (was 12/14 x 16 => ~43px rows). Density scales the vertical padding. */ border-radius: var(--r-0); overflow: hidden; } /* Panel heads / KPI labels / table headers were all identical uppercase- tracked-mono weight (600), so a page with several of these side by side (a dashboard) reads as one flat volume with no anchor -- the most repetitive, least-singular label (a column header, one of many per table) drops to a lighter 500 with slightly tighter tracking, keeping the system's uppercase-mono voice but giving panel titles (still 600) a real step up as the "read this first" tier. */ .ds-247420 table th { text-align: left; padding: calc(var(--space-2) * var(--density)) var(--space-2-75); font-size: var(--fs-tiny); font-weight: 500; color: var(--fg-3); text-transform: uppercase; letter-spacing: calc(var(--tr-caps) * 0.7); background: var(--bg-2); } /* letter-spacing adds trailing space AFTER the last glyph too, but the table's own border-radius+overflow:hidden (above) clips flush to the card edge -- the last header's positive tracking bleeds past its own padding box and gets cropped mid-word ("STATUS" -> "STATI"). Absorb that bleed with a bit of extra right padding on the last column only, so no header text sits closer to the clip edge than --tr-caps can push it. */ .ds-247420 table th:last-child { padding-right: calc(var(--space-2-75) + var(--tr-caps, 0px)); } .ds-247420 table td { padding: calc(var(--space-2) * var(--density)) var(--space-2-75); border-top: 1px solid var(--rule); } .ds-247420 table tr.clickable { cursor: pointer; } .ds-247420 table tr.clickable:hover td { background: var(--bg-2); } .ds-247420 table tr.clickable:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; } .ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); } /* Non-clickable (static) rows still get a subtle hover cue — most dashboard tables (freddie's sessions-by-platform/model, tool distribution, commands) never pass onRowClick, so they had zero row-hover feedback at all. A dim hover on ANY row (not just .clickable) reads as "you're scanning this row" without implying it's actionable. */ .ds-247420 table tr:not(.clickable):hover td { background: color-mix(in oklab, var(--bg-2) 60%, transparent); } /* Table() striped/compact opt-in density modifiers (webgeist g-table parity). Scoped under .ds-table-wrap so they never leak onto an unrelated bare a consumer hand-rolls outside this component. */ .ds-247420 .ds-table-wrap.is-striped table tr:nth-child(even) td { background: var(--bg-2); } .ds-247420 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):hover td, .ds-247420 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):focus-visible td { background: var(--bg-3, var(--bg-2)); } .ds-247420 .ds-table-wrap.is-striped table tr:not(.clickable):nth-child(even):hover td { background: color-mix(in oklab, var(--bg-3, var(--bg-2)) 60%, transparent); } .ds-247420 .ds-table-wrap.is-compact table th { padding: var(--space-1-5, 5px) var(--space-2, 8px); } .ds-247420 .ds-table-wrap.is-compact table td { padding: var(--space-1-5, 5px) var(--space-2, 8px); } /* Numeric-column right-alignment: Table() (content/table.js) tags a cell td.is-num when its raw content is a plain integer/decimal, so digit columns (session counts, tool counts, etc.) line up on the ones place instead of ragged-left like prose columns. th.is-num mirrors it on the matching header so the label sits over its column. */ .ds-247420 table td.is-num, .ds-247420 table th.is-num { text-align: right; font-variant-numeric: tabular-nums; } /* ============================================================ Changelog ============================================================ */ .ds-247420 .ds-changelog-row { /* The !important is load-bearing and was empirically confirmed so -- do not remove it on a specificity argument. A changelog row carries three tracks (date, version, message) where a plain .row carries two, and the responsive blocks in responsive.css legitimately rewrite .row's template at several breakpoints. Those blocks are later in the cascade, so at tablet width the two-track override wins on source order and collapses the version column: measured live, removing this flag changes the computed template from "120.75px 77.625px 70.125px" to "103.5px 0px 165px" -- a zero-width column and the version silently gone. Scoping to .app does not help, because the competing rules would need to be scoped in lockstep. */ grid-template-columns: minmax(110px, 14ch) minmax(60px, 9ch) minmax(0, 1fr) !important; } .ds-247420 .ds-changelog-ver { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm); } /* Belt-and-suspenders for the message column: `.row .title` (panel-row.css) is already `white-space: normal` (no nowrap/ellipsis), so long entries wrap by word as expected whenever the message track has any real width. This only matters in the narrow zone between "row still on 3 columns" and the panel's own `@container` breakpoint kicking in (see .panel-wide's new container-type in panel-row.css) — overflow-wrap:anywhere is the fallback so a single long unbroken token still wraps instead of overflowing the track, rather than depending solely on the breakpoint transition. */ .ds-247420 .ds-changelog-row .title { overflow-wrap: anywhere; min-width: 0; } /* ============================================================ Works ============================================================ */ .ds-247420 .work-detail { padding: var(--space-4) var(--space-5) var(--space-5); margin: 4px 0 var(--space-2); background: var(--bg-2); border-radius: var(--r-3); display: flex; flex-direction: column; gap: var(--space-3); } .ds-247420 .ds-work-body { margin: 0; max-width: 60ch; } .ds-247420 .ds-work-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ============================================================ Manifesto / pull moment ============================================================ */ .ds-247420 .ds-manifesto { max-width: 60ch; } .ds-247420 .ds-manifesto-para { font-family: var(--ff-body); font-size: var(--fs-lg); line-height: var(--lh-long); margin: 0 0 var(--space-3); } .ds-247420 .ds-manifesto-para.dim { color: var(--fg-3); } /* ============================================================ Currently shipping dots ============================================================ */ .ds-247420 .ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; } .ds-247420 .ds-dot-on { color: var(--green-2); } /* Off/idle reads as a HOLLOW ring (transparent fill, currentColor outline) instead of a solid dot in a dimmer color -- filled-vs-outline is a shape cue that survives grayscale/colorblind simulation, where a solid green dot and a solid gray dot at the same size can look identical in luminance. */ .ds-247420 .ds-dot-off { color: var(--fg-3); background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } /* live is a distinct hue from a plain "on" dot — see .chip.tone-live's comment for the success-vs-live rationale. */ .ds-247420 .ds-dot-live { color: var(--sky); } /* warn is solid but smaller with a ring outset, a distinct silhouette from both -on's plain fill and -off's plain ring so tone doesn't rely on hue alone to differentiate from either neighbor. */ .ds-247420 .ds-dot-warn { color: var(--amber); box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber) 35%, transparent); } .ds-247420 .ds-dot-idle { color: var(--fg-3); } /* ============================================================ KPI ============================================================ */ .ds-247420 .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); } .ds-247420 .kpi-card { /* Was --space-5 (32px) pad + --r-3 (22px) — four cards ate a full fold. A 16px pad on a --r-1 corner keeps them prominent but dense; the number drops from a 48px marketing display to a 32px app-scale figure. */ padding: var(--space-3); background: var(--bg-2); border-radius: var(--r-1); /* A thin border + hover elevation gives the tile real edges and a "this is a distinct object" affordance instead of a flat color patch that blends into the surrounding panel — matches the "no border, no hover state" gap named against the stat tiles. */ border: 1px solid var(--rule); position: relative; transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; } .ds-247420 .kpi-card:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--rule)); transform: translateY(-1px); box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.12)); } /* Number+caption stack, isolated from .kpi-foot below it. Previously the number and label were plain block children of .kpi-card with the label's own margin-top providing the gap — visually fine for a single card, but across a row of four the caption's WRAPPED height (one line vs two, e.g. "requests · 24h" vs "error rate · 5xx+4xx") pushed .kpi-foot down by a different amount per card, so the deltas/sparklines never lined up on one shared baseline. A dedicated flex column groups exactly the two elements that must stay glued together, independent of whatever sits below. */ .ds-247420 .kpi-stack { display: flex; flex-direction: column; align-items: flex-start; } .ds-247420 .kpi-glyph { position: absolute; top: var(--space-2); right: var(--space-2); color: var(--fg-3); opacity: 0.6; display: inline-flex; } .ds-247420 .kpi-card .num { font-family: var(--ff-body); font-weight: 600; /* Numeric display size, not a heading tier: --fs-h4 is clamp(19px,1.8cqi, 24px) — too small and too flat a slope for a KPI figure that must read as the loudest thing in its card, and --fs-h3 (22/30) tops out short of 32. Deliberate off-scale value tuned to the .kpi-card box. */ font-size: clamp(22px, 3cqi, 32px); line-height: 1; letter-spacing: var(--tr-tight); } .ds-247420 .kpi-card .lbl { font-size: var(--fs-xs); color: var(--fg-3); font-weight: 600; margin-top: 8px; letter-spacing: var(--tr-tight); } .ds-247420 .kpi-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); } .ds-247420 .kpi-delta { display: inline-flex; align-items: center; gap: var(--space-hair); font-size: var(--fs-xs); font-weight: 600; } /* --green, not --success (--green-2): --success measures 3.2:1 on --paper-2, below the 4.5:1 AA floor for text -- --success is tuned for non-text uses (fills/backgrounds, where 3:1 suffices), --green clears 5.2:1 as text. */ .ds-247420 .kpi-delta-up { color: var(--green); } .ds-247420 .kpi-delta-down { color: var(--danger); } .ds-247420 .ds-sparkline path { stroke: currentColor; } .ds-247420 .ds-sparkline-up { color: var(--green); } .ds-247420 .ds-sparkline-down { color: var(--danger); } /* ============================================================ BarChart ============================================================ */ .ds-247420 .ds-barchart { display: flex; flex-direction: column; gap: var(--space-2); } .ds-247420 .ds-barchart-row { display: grid; grid-template-columns: minmax(90px, 25%) 1fr auto; align-items: center; gap: var(--space-2); } .ds-247420 .ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); } .ds-247420 .ds-barchart-track { /* 6px unifies with the system's other bar tracks (.ds-upload-bar, .ds-bar-bg); was --space-2 (8px), the lone thicker slab in the bar family. */ height: var(--space-1-75); border-radius: var(--r-pill); background: var(--bg-3); overflow: hidden; } .ds-247420 .ds-barchart-fill { height: 100%; width: var(--bar-pct, 0%); background: var(--fg-3); border-radius: var(--r-pill); } .ds-247420 .ds-barchart-fill.is-active { background: var(--accent); } .ds-247420 .ds-barchart-value { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; } /* ============================================================ Empty state ============================================================ */ /* Shares its base declarations with .ds-empty-state (primitives.css) via the combined selector there -- .empty only adds its own font-size/background/ radius modifiers on top. Was --space-8 (96px) padding; --space-6 (48px) still centres a message with air without the empty state dominating the fold. */ .ds-247420 .empty { background: var(--bg-2); border-radius: var(--r-1); font-size: var(--fs-sm); } /* ============================================================ Form ============================================================ */ .ds-247420 .row-form { display: grid; gap: var(--space-2-75); padding: var(--space-5); background: var(--bg-2); border-radius: var(--r-3); /* Grid's default justify-items:stretch was silently stretching the submit * button (a direct grid child, same as every input) to the full column * width -- other primary buttons elsewhere (e.g. session-ui's "new * session") are inline/compact by contrast, since they're not grid * children. justify-self:start keeps inputs/textareas at their natural * grid-stretched width (a form field SHOULD fill its column) while the * submit button sizes to its own content, matching the compact convention * used everywhere else primary buttons appear. */ } .ds-247420 .row-form > button[type="submit"] { justify-self: start; } .ds-247420 .row-form input, .ds-247420 .row-form textarea { font-family: inherit; font-size: var(--fs-sm); padding: 12px 16px; /* --bg here previously resolved to the SAME color as .row-form's own * --bg-2 background in the dark theme, leaving only a 14%-opacity * currentColor ring (var(--rule)) as the sole edge between an input and * the panel behind it -- effectively invisible. --bg-3 (one step darker * than the panel) plus a stronger border restores a real, panel-distinct * field surface. * LOAD-BEARING !important: `.row-form input` and states-interactions.css's * bare `input[type="text"]:where(...)` rule are both (0,1,1) specificity * (the :where() wrapper there is intentionally zero-specificity) -- * states-interactions.css @imports AFTER this file in app-shell.css, so on * this exact tie it wins by source order and silently discarded these two * declarations. Only !important beats that without restructuring the * shared bare-input rule's own selector, which many other consumers rely on. */ background: var(--bg-3) !important; color: var(--fg); border: 0; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 28%, transparent) !important; } .ds-247420 .row-form input:focus-visible, .ds-247420 .row-form textarea:focus-visible { box-shadow: var(--focus-ring-inset); } /* Field char counter (TextField maxLength) — canonical definition is with the rest of the .ds-field family below (states-interactions.css); this duplicate was removed to stop the two bodies fighting on stylesheet load order. */ /* Multi-column form layout (Form columns prop) */ .ds-247420 .row-form[data-columns="2"] { grid-template-columns: repeat(2, 1fr); } .ds-247420 .row-form[data-columns="3"] { grid-template-columns: repeat(3, 1fr); } @media (max-width: 600px) { .ds-247420 .row-form[data-columns="2"], .ds-247420 .row-form[data-columns="3"] { grid-template-columns: 1fr; } } /* ============================================================ Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+) ============================================================ */ /* Breakpoint reference (CSS custom properties can't be used in @media queries, so these are documented here for consistency — always use these exact values): - Mobile/tablet boundary: 768px (max-width) — used for compact nav/sidebar collapse (catalog-theme.css, sidebar-misc.css). Note: kits-appended.css uses 760px for the same kind of collapse in a few places — a near-miss of this value, worth aligning to 768px when touched. - Tablet/desktop boundary: 900px (max-width) / 901px (min-width) — used for main layout reflow (hero-content.css, responsive2-workspace.css) - Tablet landscape band: 768px–1024px (min-width 768px / max-width 1024px) — used in this file (responsive.css) for a specific tablet treatment; aligned to the 768px mobile/tablet boundary above (was 481px, a near-miss). */ /* -------------------------------------------------------------------- Mobile Portrait Breakpoint (480px and below) ---------------------------------------------------------------------- */ @media (max-width: 480px) { /* App Layout: single-column + drawer is handled once in the ≤900px block; no need to re-declare grid-template-columns here (was a redundant !important). */ /* Topbar Navigation: stack the nav onto its own full-width row below the brand and let it scroll horizontally. The brand stays on the first row; nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */ .ds-247420 .app-topbar { gap: var(--space-2); padding: var(--space-2-75) var(--space-3); } /* .app-chrome (the merged topbar+crumb band) inherits --pad-x — 32-48px of desktop-scale horizontal padding — with no mobile override anywhere, unlike .app-topbar above. On a 375px phone that reads as the title/ controls floating inset from the screen edges instead of flush. */ .ds-247420 .app-chrome { padding: var(--space-2) var(--space-3); } /* When the topbar is folded into .app-chrome it is a flex:0 0 auto child, so it sizes to its nav's content and overflows the viewport instead of letting the nav's own overflow-x:auto engage. Constrain it to the chrome width so the horizontally-scrolling nav stays inside the screen. */ .ds-247420 .app-chrome > .app-topbar { max-width: 100%; min-width: 0; flex-basis: 100%; } .ds-247420 .app-topbar > nav { flex: 1 1 100%; margin-left: 0; order: 3; min-width: 0; max-width: 100%; display: flex; gap: var(--space-hair); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* Fade the trailing edge so a clipped last item (e.g. "source ->" cut to "sour") reads as scrollable content, not a broken/truncated label. */ mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%); } .ds-247420 .app-topbar nav::-webkit-scrollbar { display: none; } .ds-247420 .app-topbar nav a { flex: 0 0 auto; padding: var(--space-2-5) var(--space-2-75); min-height: 44px; white-space: nowrap; } .ds-247420 .brand { font-size: var(--fs-tiny); font-weight: 600; } /* Search */ .ds-247420 .app-search { display: none; /* Hide search on mobile unless explicitly pinned */ } /* Main Content */ .ds-247420 .app-main { padding: var(--space-4) var(--space-2); } .ds-247420 .app-main.narrow { max-width: 100%; margin: 0; } /* Headings stay on the fluid base clamps (cqi) — no mobile re-clamp. */ /* Panel & Row */ .ds-247420 .panel { margin: 0 0 var(--space-3); } .ds-247420 .panel-head { padding: var(--space-3) var(--space-2); gap: var(--space-2); } .ds-247420 .panel-body { padding: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; } .ds-247420 .panel-body > table { min-width: 100%; } /* Scoped to the `.app` shell so this wins on SPECIFICITY (0,2,0) rather than on an !important flag. Three rules would otherwise beat a bare `.row` (0,1,0) here: `.row.row-nocode` (0,2,0, panel-row.css) out-specifies it, and the `@media(481-1024)` + `@media(max-width:768px)` `.row` rules later in THIS file win on source order (a media query adds no specificity). `.app` is safe to require: `.app-body`/`.row` only ever render inside it (single call site, shell.js AppShell). */ .ds-247420 .app .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2-75) var(--space-3); row-gap: var(--space-1); } .ds-247420 .row .sub { grid-column: 1 / -1; order: 3; } .ds-247420 .row .title { font-size: var(--fs-sm); } /* Changelog carries 3 children: give date+ver line one, message wraps below (the generic 2-col .row override staggers it into an implicit row). Needs (0,3,0) to clear BOTH the `.app .row` rule directly above and `.ds-changelog-row`'s own !important base in hero-content.css — an !important base can only be beaten by another !important, so this one stays until that upstream flag is removed (hero-content.css is outside this change's scope). */ .ds-247420 .app .row.ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; } .ds-247420 .ds-changelog-row .title { grid-column: 1 / -1; } .ds-247420 .btn:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-primary:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-ghost:not(.btn-sm):not(.btn-lg) { /* 11px vertical is optical, not scale drift: --space-2-75 (12) would tip the intrinsic box past the 44px min-height floor below and make the floor dead, changing the mobile button rhythm. */ padding: 11px var(--space-3); font-size: var(--fs-tiny); min-height: 44px; /* Touch target minimum */ } /* File Grid */ .ds-247420 .ds-file-grid { display: flex; flex-direction: column; gap: var(--space-half); } .ds-247420 .ds-file-row { gap: var(--space-2); padding: var(--space-2-5) var(--space-2-75); font-size: var(--fs-xs); } .ds-247420 .ds-file-open { gap: var(--space-2-5); } /* At mobile row widths, a fixed-size meta column (date/size) plus the always-visible action buttons leave the flexible title only a few px — not enough for even one legible character before the two collide. Drop the metadata column here; the title + actions still fully identify and operate on the row, and meta stays available in the file viewer. */ .ds-247420 .ds-file-row .ds-file-meta { display: none; } .ds-247420 .ds-file-row .ds-file-actions { opacity: 1; } /* H4: floor finger-sized controls so file actions/sort/filter/breadcrumb are reachable by touch (cohesion sweep). */ .ds-247420 .ds-file-act, .ds-247420 .ds-file-sort-btn, .ds-247420 .ds-crumb-seg { min-height: 44px; } .ds-247420 .ds-file-filter-input { min-height: 44px; } .ds-247420 .ds-file-check, .ds-247420 .ds-file-selectall, .ds-247420 .ds-density-btn { min-height: 44px; min-width: 44px; } /* Chat */ .ds-247420 .chat-stack { max-width: 100%; min-width: 0; } .ds-247420 .chat-bubble { padding: var(--space-2-5) var(--space-2-75); font-size: var(--fs-sm); } .ds-247420 .chat-avatar { width: 28px; height: 28px; font-size: 11px; } .ds-247420 .chat-msg:hover { padding: var(--space-1) 0; margin: 0; background: transparent; } .ds-247420 .chat-composer { padding: var(--space-2); gap: var(--space-1-75); } .ds-247420 .chat-composer textarea { padding: var(--space-2-5) var(--space-2-75); font-size: var(--fs-sm); } /* KPI Cards */ .ds-247420 .kpi { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); } .ds-247420 .kpi-card { padding: var(--space-3); } /* Container-relative like the base rule (5vw sized against the viewport and jumped across the breakpoint). */ .ds-247420 .kpi-card .num { font-size: clamp(22px, 8cqi, 32px); } /* Empty State */ .ds-247420 .empty { padding: var(--space-5); font-size: var(--fs-xs); } /* Form */ .ds-247420 .row-form { gap: var(--space-2-5); padding: var(--space-3); } .ds-247420 .row-form input, .ds-247420 .row-form textarea { padding: 11px var(--space-2-75); font-size: var(--fs-sm); } /* Hero Section — keep fluid base font-size, just unconstrain width on mobile. */ .ds-247420 .ds-hero { padding: var(--space-6) 0 var(--space-5); } .ds-247420 .ds-hero-title { max-width: 100%; } .ds-247420 .ds-hero-body { max-width: 100%; } /* Table Responsiveness */ .ds-247420 table { font-size: var(--fs-xs); } .ds-247420 table th, .ds-247420 table td { padding: var(--space-2-5) var(--space-2-75); } /* CLI Block */ .ds-247420 .cli { flex-direction: column; align-items: flex-start; gap: var(--space-2-5); padding: var(--space-3) var(--space-2-75); font-size: var(--fs-xs); } .ds-247420 .cli .copy { padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-micro); } } /* -------------------------------------------------------------------- Container Query Responsive (720px and below) ---------------------------------------------------------------------- */ @container (max-width: 760px) { /* `.app`-scoped for specificity, not an !important flag: the bare `.app-body` (0,1,0) was out-specified by `.app-body.no-side` (0,2,0) in topbar.css, so a sidebar-less shell kept its base template. `.app .app-body` is (0,2,0) and lands later in source, beating both topbar.css rules on merit. */ .ds-247420 .app .app-body { grid-template-columns: 1fr; } .ds-247420 .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); } .ds-247420 .app-topbar nav { font-size: var(--fs-xs); gap: var(--space-2-75); } /* Same (0,2,0) lift as the 480px block above — clears `.row.row-nocode` and the later `@media` `.row` rules in this file without a flag. */ .ds-247420 .app .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); } .ds-247420 .row .sub { grid-column: 1 / -1; order: 3; } /* (0,3,0) + !important: still required to beat `.ds-changelog-row`'s !important base in hero-content.css (see the 480px block). */ .ds-247420 .app .row.ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; } .ds-247420 .ds-changelog-row .title { grid-column: 1 / -1; } } /* -------------------------------------------------------------------- Tablet Landscape Breakpoint (768px to 1024px) ---------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { /* App Layout — side handled by 900px drawer block; restore for 901-1024 */ .ds-247420 .app-side a { padding: var(--space-2-75) var(--space-2-75); gap: var(--space-2); grid-template-columns: 16px 1fr auto; font-size: var(--fs-xs); min-height: 44px; } /* Topbar Navigation (flex container — no grid-template here) */ .ds-247420 .app-topbar { gap: var(--space-3); padding: var(--space-2-75) var(--space-4); } .ds-247420 .app-chrome { padding: var(--space-2-75) var(--space-4); } .ds-247420 .app-topbar nav { display: flex; gap: var(--space-2); font-size: var(--fs-xs); flex-wrap: wrap; } .ds-247420 .app-topbar nav a { padding: var(--space-2-75) var(--space-2-75); font-size: var(--fs-xs); min-height: 44px; } .ds-247420 .brand { font-size: var(--fs-sm); } /* Search */ .ds-247420 .app-search { display: inline-flex; max-width: 280px; font-size: var(--fs-xs); /* 14px inline is between --space-2-75 (12) and --space-3 (16) with no tier; it is the width that centers the search glyph against the 280px max-width field. Snapping either way reads as a mis-centered control. */ padding: var(--space-2) 14px; } /* Main Content */ .ds-247420 .app-main { padding: var(--space-6) var(--space-4); } .ds-247420 .app-main.narrow { max-width: 100%; } /* Headings stay on the fluid base clamps (cqi) — no tablet re-clamp. */ /* File list — single column rows on tablet (cards only via data-columns) */ .ds-247420 .ds-file-row { grid-template-columns: 24px minmax(0, 1fr) auto auto; /* 14px inline (no tier between 12 and 16) is the tablet row inset that keeps the 24px icon column optically flush with the panel edge. */ gap: var(--space-2-75); padding: var(--space-2-75) 14px; } /* Chat Bubbles */ .ds-247420 .chat-stack { max-width: min(75%, 420px); } .ds-247420 .chat-bubble { /* 11px/14px are the tuned tablet bubble insets; neither is on the scale (11 sits between --space-2-5 and --space-2-75, 14 between --space-2-75 and --space-3) and snapping visibly re-pitches every bubble in a thread. */ padding: 11px 14px; font-size: var(--fs-sm); } .ds-247420 .chat-avatar { width: 32px; height: 32px; font-size: 12px; } /* KPI Cards */ .ds-247420 .kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); } .ds-247420 .btn:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-primary:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-ghost:not(.btn-sm):not(.btn-lg) { /* 18px inline has no tier (--space-3 is 16, --space-3-5 is 20); it is the tablet CTA width tuned against the 12px vertical, so snapping changes the button aspect on the most visible control in the kit. */ padding: var(--space-2-75) 18px; font-size: var(--fs-sm); } /* Panel - keep the head on the body's left axis at laptop widths too. */ .ds-247420 .panel-head { padding: var(--space-2) var(--space-3); } .ds-247420 .panel-body { padding: var(--space-2) var(--space-3); } /* Hero — fluid base font-size; only width unconstrained on tablet. */ .ds-247420 .ds-hero { padding: var(--space-7) 0 var(--space-6); max-width: 100%; } .ds-247420 .ds-hero-title { max-width: 100%; } /* Row */ .ds-247420 .row { grid-template-columns: minmax(90px, 12ch) minmax(0, 1fr) auto; /* 14px block (no tier between 12 and 16) is the tablet row height tuned against the 12ch code column; snapping re-pitches the whole list. */ gap: var(--space-2); padding: 14px var(--space-3); } } /* -------------------------------------------------------------------- Mid Breakpoint (768px and below) — collapse sidebar + simplify row grid ---------------------------------------------------------------------- */ @media (max-width: 768px) { /* Sidebar stacks above main rather than sitting beside it */ .ds-247420 .app-body { grid-template-columns: 1fr; } .ds-247420 .app-side { width: 100%; max-width: none; } /* Row drops the leading code column; title + meta share the line */ .ds-247420 .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); } .ds-247420 .row .code { display: none; } /* Changelog's date lives in span.code — hiding it is data loss, not reflow. */ .ds-247420 .ds-changelog-row .code { display: inline; font-size: var(--fs-micro); } .ds-247420 .row .sub { grid-column: 1 / -1; } } /* -------------------------------------------------------------------- Desktop Breakpoint Enhancements (1025px and up) ---------------------------------------------------------------------- */ @media (min-width: 1025px) { /* Chat Bubbles */ .ds-247420 .chat-stack { max-width: min(70%, 480px); } /* KPI Cards */ .ds-247420 .kpi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); } } /* ============================================================ Chat — minimal styles (placeholder for full chat surface) ============================================================ */ .ds-247420 .ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); } .ds-247420 .ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); } .ds-247420 .ds-chat-msg.user { background: var(--accent-tint); color: var(--fg); align-self: flex-end; } .ds-247420 .ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; } .ds-247420 .ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); } .ds-247420 .ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); } .ds-247420 .ds-chat-composer input:focus-visible { box-shadow: var(--focus-ring-inset); } /* ============================================================ File surface — responsive grid + row layouts ============================================================ */ /* Default file grid — a vertical list of rows. Each row lays out its own columns internally; the container only stacks them. Card mode (multi-column) is opt-in via [data-columns]. */ .ds-247420 .ds-file-grid { display: flex; flex-direction: column; gap: var(--space-1); } .ds-247420 .ds-file-grid:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-2); } /* Listing wrapper holds the optional filter + sort header above the grid. */ .ds-247420 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; } /* The quick filter is a compact control, not a full-width form row - a giant input above the grid reads as a search page and costs fold height. */ /* The filter is now an inline item in the single .ds-file-controls toolbar row (the standalone right-aligned .ds-file-filter strip was removed). */ .ds-247420 .ds-file-filter-input { width: min(280px, 100%); padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-sm); background: var(--bg); color: var(--fg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1); } .ds-247420 .ds-file-controls .ds-file-filter-wrap { flex: 0 1 220px; display: contents; } .ds-247420 .ds-file-controls .ds-file-filter-wrap .ds-file-filter-input { flex: 0 1 220px; } .ds-247420 .ds-file-filter-input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); } .ds-247420 .ds-file-sort { display: flex; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); } .ds-247420 .ds-file-sort-btn { font-size: var(--fs-tiny); font-family: var(--ff-mono); color: var(--fg-3); background: none; border: none; cursor: pointer; padding: var(--space-hair) var(--space-1); border-radius: var(--r-1); } .ds-247420 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); } .ds-247420 .ds-file-sort-btn.active { color: var(--accent-ink); } .ds-247420 .ds-file-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Skeleton shimmer rows shown while a directory loads. */ .ds-247420 .ds-file-row-skeleton { cursor: default; pointer-events: none; } /* In-place refresh: dim the populated grid instead of swapping it for shimmer rows (the rows stay; the round-trip reads as a settle, not a reload). */ .ds-247420 .ds-file-grid.is-refreshing { opacity: .6; } @media (prefers-reduced-motion: no-preference) { .ds-247420 .ds-file-grid { transition: opacity .15s var(--ease); } } /* EventList loading skeleton (shares the .ds-skel shimmer base above). */ .ds-247420 .ds-event-row-skeleton { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-75) var(--space-3); pointer-events: none; } .ds-247420 .ds-skel-rank { height: 12px; width: 2.5ch; } .ds-247420 .ds-event-state { padding: var(--space-2) var(--space-3); } .ds-247420 .ds-skel { display: inline-block; border-radius: var(--r-1); background: var(--bg-2); position: relative; overflow: hidden; } .ds-247420 .ds-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--bg-3), transparent); transform: translateX(-100%); } @media (prefers-reduced-motion: no-preference) { .ds-247420 .ds-skel::after { animation: ds-skel-shimmer 1.2s infinite; } } .ds-247420 .ds-skel-icon { width: 22px; height: 22px; } .ds-247420 .ds-skel-title { height: 12px; width: 60%; } .ds-247420 .ds-skel-meta { height: 10px; width: 64px; margin-left: auto; } @keyframes ds-skel-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .ds-247420 .ds-skel::after { animation: none; } } /* File row — linear layout (checkbox? · open-button[code · icon · title · meta] · actions). The row is a flex strip; the open ; the browser's native :focus-visible outline on a renders inconsistently across engines (often clipped by table border-collapse), so it needs the same explicit outline treatment every other interactive primitive in this file gets, via the shared --focus-* tokens. -------------------------------------------------------------- */ .ds-247420 tr.clickable:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: calc(-1 * var(--focus-offset)); } /* ------------------------------------------------------------ Component States — Disabled, Loading, Error, Success -------------------------------------------------------------- */ /* Disabled state for all interactive elements. The `.is-disabled` class variants cover Btn()'s anchor-rendered case (shell.js) — an has no :disabled pseudo-class, so a disabled link-styled button relies entirely on this class selector for its visual treatment (aria-disabled + tabindex are set in JS; this is the paired CSS half). */ /* opacity:0.6 alone barely separated from an active .btn-primary against a busy background -- close enough in dark mode that users clicked disabled buttons expecting them to work. grayscale flattens any color signal (no more "still looks clickable-green") and the steeper opacity drop reads as unmistakably inert at a glance, not just slightly dimmed. */ .ds-247420 .btn:disabled, .ds-247420 .btn-primary:disabled, .ds-247420 .btn-ghost:disabled, .ds-247420 .btn.is-disabled, .ds-247420 .btn-primary.is-disabled, .ds-247420 .btn-ghost.is-disabled, .ds-247420 button:disabled, .ds-247420[disabled] { opacity: 0.5; filter: grayscale(60%); cursor: not-allowed; pointer-events: none; } /* Systemic hover fallback — button-like elements with no design-system class (a bare