/* ═══════════════════════════════════════════════════════════════
   lykn.pl — Design System
   Dark mode only. All colours from lichen/moss artwork.
   Typography: IBM Plex Sans · Space Grotesk · IBM Plex Mono
   Layout: Every Layout primitives + Utopia fluid tokens
   ═══════════════════════════════════════════════════════════════ */


/* ── Colour Tokens (OKLCH) ─────────────────────────────────── */

:root {
    --primary-950: oklch(15% 0.025 120);
    --primary-900: oklch(22% 0.030 120);
    --primary-800: oklch(30% 0.040 125);
    --primary-700: oklch(38% 0.050 125);
    --primary-600: oklch(46% 0.060 120);
    --primary-500: oklch(55% 0.070 118);
    --primary-400: oklch(65% 0.070 115);
    --primary-300: oklch(75% 0.060 112);
    --primary-200: oklch(85% 0.040 110);
    --primary-100: oklch(92% 0.025 108);
    --primary-50: oklch(96% 0.015 108);

    --accent-900: oklch(25% 0.060 55);
    --accent-700: oklch(40% 0.100 58);
    --accent-500: oklch(65% 0.170 60);
    --accent-300: oklch(80% 0.140 65);
    --accent-100: oklch(92% 0.060 70);

    --secondary-900: oklch(25% 0.050 92);
    --secondary-700: oklch(40% 0.080 93);
    --secondary-500: oklch(60% 0.120 95);
    --secondary-300: oklch(78% 0.100 95);
    --secondary-100: oklch(93% 0.040 95);

    --neutral-950: oklch(12% 0.010 110);
    --neutral-900: oklch(18% 0.012 110);
    --neutral-800: oklch(25% 0.012 110);
    --neutral-700: oklch(35% 0.010 110);
    --neutral-600: oklch(50% 0.010 110);
    --neutral-500: oklch(62% 0.010 110);
    --neutral-400: oklch(72% 0.010 110);
    --neutral-300: oklch(82% 0.010 110);

    --violet-700: oklch(38% 0.060 300);
    --violet-500: oklch(55% 0.090 300);
    --violet-300: oklch(72% 0.070 300);

    /* Semantic */
    --page-bg: oklch(20% 0.025 210);
    --surface-raised: var(--neutral-900);
    --surface-overlay: var(--primary-900);
    --text-primary: var(--primary-100);
    --text-secondary: var(--neutral-500);
    --text-brand: var(--primary-400);
    --interactive: var(--accent-500);
    --interactive-hover: var(--accent-300);
    --border-subtle: var(--neutral-800);
    --border-default: var(--neutral-700);

    /* Component — reference semantic/primitive tokens, never used raw in markup */
    --door-icon-learn: var(--primary-400);
    --door-icon-build: var(--secondary-500);
    --door-icon-explore: var(--accent-500);

    --section-accent: var(--interactive);

    --btn-primary-bg: var(--interactive);
    --btn-primary-fg: var(--primary-950);
    --btn-primary-hover-bg: var(--interactive-hover);
    --btn-secondary-bg: transparent;
    --btn-secondary-fg: var(--text-secondary);
    --btn-secondary-border: var(--border-default);

    --editor-bg: var(--surface-raised);
    --editor-fg: var(--text-primary);
    --editor-border: var(--border-default);

    /* Footer surface — a shade darker than page-bg for contrast */
    --footer-surface: var(--neutral-950);
    --footer-text: var(--neutral-400);
    --footer-text-dim: var(--neutral-600);
    --footer-heading: var(--primary-100);
    --footer-link: var(--neutral-400);
    --footer-link-hover: var(--primary-100);
    --footer-border: var(--neutral-800);

    /* Region (page-level) accent — wayfinding breadcrumb, NOT the interactive colour.
     Overridden per-page via body.region-* below. Default is home (amber). */
    --region-accent: var(--accent-500);
    --region-accent-dark: var(--accent-700);

    /* Homepage hero surface — photographic lichen artwork at 20% opacity.
     Target file: 2880×1800 JPEG (16:10), focal point at 40% from top, centred horizontally, under 500KB.
     To revert to the synthetic CSS texture (useful before the photograph lands), swap `--hero-surface`
     for the radial-gradient stack preserved below and bump `--hero-surface-opacity` back to 1. */
    --hero-surface: url('/images/lichen-hero.jpg');
    --hero-surface-opacity: 0.15;

    /* Synthetic fallback — keep in sync with the photograph's tonal range if it ever needs reuse.
  --hero-surface:
    radial-gradient(ellipse 60% 80% at 30% 40%, oklch(30% 0.05 125 / 0.55), transparent 70%),
    radial-gradient(ellipse 45% 55% at 72% 55%, oklch(38% 0.06 115 / 0.45), transparent 70%),
    radial-gradient(ellipse 80% 45% at 45% 92%, oklch(22% 0.03 128 / 0.70), transparent 65%),
    radial-gradient(circle  20% at 85% 25%, oklch(50% 0.09 60 / 0.22), transparent 60%);
  --hero-surface-opacity: 1;
  */

    /* Syntax */
    --syn-kw: var(--secondary-500);
    --syn-fn: var(--primary-400);
    --syn-str: var(--accent-500);
    --syn-cm: var(--neutral-500);
    --syn-num: var(--primary-300);
    --syn-ty: var(--secondary-300);
    --syn-text: var(--primary-100);

    /* Typography */
    --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
    --font-caption: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --font-prose: 'Newsreader', Georgia, serif;

    /* Utopia Type Scale: 360/16/1.2 → 1440/20/1.333 */
    --step--2: clamp(0.69rem, 0.65rem + 0.22vi, 0.80rem);
    --step--1: clamp(0.83rem, 0.76rem + 0.37vi, 1.07rem);
    --step-0: clamp(1rem, 0.89rem + 0.56vi, 1.42rem);
    --step-1: clamp(1.20rem, 1.04rem + 0.81vi, 1.90rem);
    --step-2: clamp(1.44rem, 1.21rem + 1.15vi, 2.53rem);
    --step-3: clamp(1.73rem, 1.41rem + 1.61vi, 3.37rem);
    --step-4: clamp(2.07rem, 1.62rem + 2.24vi, 4.49rem);
    --step-5: clamp(2.49rem, 1.87rem + 3.11vi, 5.99rem);

    /* Utopia Space Scale */
    --space-3xs: clamp(0.25rem, 0.22rem + 0.14vi, 0.36rem);
    --space-2xs: clamp(0.50rem, 0.44rem + 0.28vi, 0.71rem);
    --space-xs: clamp(0.75rem, 0.67rem + 0.42vi, 1.07rem);
    --space-s: clamp(1.00rem, 0.89rem + 0.56vi, 1.42rem);
    --space-m: clamp(1.50rem, 1.33rem + 0.83vi, 2.13rem);
    --space-l: clamp(2.00rem, 1.78rem + 1.11vi, 2.84rem);
    --space-xl: clamp(3.00rem, 2.67rem + 1.67vi, 4.27rem);
    --space-2xl: clamp(4.00rem, 3.56rem + 2.22vi, 5.69rem);
    --space-3xl: clamp(6.00rem, 5.33rem + 3.33vi, 8.53rem);
    --space-s-m: clamp(1.00rem, 0.78rem + 1.11vi, 2.13rem);
    --space-s-l: clamp(1.00rem, 0.56rem + 2.22vi, 2.84rem);
    --space-m-l: clamp(1.50rem, 1.11rem + 1.94vi, 2.84rem);
    --space-l-xl: clamp(2.00rem, 1.33rem + 3.33vi, 4.27rem);

    /* Layout */
    --measure: 60ch;
    --page-max: 72rem;
    --gutter: var(--space-s-m);
}


/* ── Per-region wayfinding accents (Lynch) ─────────────────── */
/* --region-accent      : base (nav underline)
   --region-accent-dark : darker shade (page-label caption, step markers)
   For non-home h1 tint we derive a LOW-SATURATION version of --region-accent
   inline via oklch(from ...) — no token needed. */

body.region-home {
    --region-accent: var(--accent-500);
    /* amber */
    --region-accent-dark: var(--accent-700);
}

body.region-tour {
    --region-accent: var(--primary-500);
    /* moss green */
    --region-accent-dark: var(--primary-700);
}

body.region-reference {
    --region-accent: var(--secondary-500);
    /* chartreuse */
    --region-accent-dark: var(--secondary-700);
}

body.region-playground {
    --region-accent: var(--primary-400);
    /* teal-green */
    --region-accent-dark: var(--primary-600);
}

body.region-blog {
    --region-accent: var(--primary-600);
    /* deep green */
    --region-accent-dark: var(--primary-700);
}

body.region-book {
    --region-accent: var(--neutral-500);
    /* warm grey */
    --region-accent-dark: var(--neutral-700);
}

body.region-tuckin {
    --region-accent: var(--violet-500);
    /* soft violet */
    --region-accent-dark: var(--violet-700);
}


/* ── Reset ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--text-primary);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}

/* Measure axiom */
* {
    max-inline-size: var(--measure);
}

html,
body,
div,
section,
header,
nav,
main,
footer,
article,
aside,
figure,
pre,
table,
.cover,
.grid,
.with-sidebar,
.switcher,
.reel,
.cluster,
.page-wrap,
.hero-encounter {
    max-inline-size: none;
}


/* ── Typography ────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--step-4);
    font-weight: 600;
}

h2 {
    font-size: var(--step-2);
    font-weight: 500;
}

h3 {
    font-size: var(--step-1);
    font-weight: 500;
}

h4 {
    font-size: var(--step-0);
    font-weight: 500;
}

/* Non-home pages: quieter headings, h1 tinted with a low-saturation region accent.
   Home keeps the current sizes/weights so the front-page lineage + door titles are protected. */
body:not(.region-home) h1 {
    font-size: var(--step-3);
    font-weight: 400;
    color: oklch(from var(--region-accent) l calc(c * 0.5) h);
}

body:not(.region-home) h2 {
    font-size: var(--step-1);
    font-weight: 400;
}

body:not(.region-home) h3 {
    font-size: var(--step-0);
    font-weight: 400;
}

.subtitle {
    font-family: var(--font-caption);
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.caption {
    font-family: var(--font-caption);
    font-size: var(--step--2);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.caption.is-region-label {
    color: var(--region-accent-dark);
}

.caption.is-step-marker {
    font-size: var(--step-0);
    font-weight: 500;
    color: var(--region-accent-dark);
}

/* Tour sections: h2 is the step label (uppercase, cycling section colour),
   h3 is the example title (region accent). */
.tour-step + .tour-step,
.ref-section + .ref-section {
    padding-block-start: var(--space-xl);
    border-block-start: 1px solid var(--border-subtle);
}

.tour-step> :first-child>h2 {
    font-weight: 500;
    color: var(--section-accent, var(--region-accent));
}

.tour-step h3 {
    color: var(--region-accent);
}

a {
    color: var(--interactive);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--interactive-hover);
}


/* ── Layout Primitives ─────────────────────────────────────── */

.stack {
    display: flex;
    flex-direction: column;
}

.stack>*+* {
    margin-block-start: var(--space, var(--space-s));
}

.box {
    padding: var(--padding, var(--space-s-m));
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
}

.center {
    max-inline-size: var(--center-max, var(--measure));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--space-xs));
    align-items: center;
}

.with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--space-l));
}

.with-sidebar>.sidebar {
    flex-basis: 20rem;
    flex-grow: 1;
    min-inline-size: 0;
    overflow: hidden;
}

.with-sidebar>.not-sidebar {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 55%;
}

.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, var(--space-l));
}

.switcher>* {
    flex-grow: 1;
    flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
}

.cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--cover-min, 100dvh);
}

.cover>* {
    margin-block: auto;
}

.cover> :first-child:not(.centered) {
    margin-block-start: 0;
}

.cover> :last-child:not(.centered) {
    margin-block-end: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
    gap: var(--space, var(--space-s-m));
}

.page-wrap {
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}


/* ── Code ──────────────────────────────────────────────────── */

pre {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: var(--space-s);
    overflow-x: auto;
    font-size: calc(var(--step-0) * 0.88);
    line-height: 1.55;
    tab-size: 2;
}

pre code {
    background: none;
    border: none;
    padding: 0;
}

code {
    background: var(--surface-raised);
    border-radius: 3px;
    padding: 0.12em 0.3em;
    font-size: 0.88em;
}

.sk {
    color: var(--syn-kw);
}

.sf {
    color: var(--syn-fn);
}

.ss {
    color: var(--syn-str);
}

.sc {
    color: var(--syn-cm);
}

.sn {
    color: var(--syn-num);
}

.st {
    color: var(--syn-ty);
}

.code-pair {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.code-pair>* {
    flex: 1;
    min-inline-size: min(100%, 20rem);
}

.code-label {
    font-family: var(--font-caption);
    font-size: var(--step--2);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-block-end: var(--space-3xs);
}


/* ── Navigation ────────────────────────────────────────────── */

.site-header {
    position: relative;
    overflow: hidden;
    background: oklch(15% 0.025 210);
    border-block-end: 1px solid var(--border-subtle);
}

body:not(.region-home) .site-header {
    border-block-end: 0.5px solid oklch(42% 0.06 60);
}

body:not(.region-home) .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/lichen-nav.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.45) 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.45) 100%);
    opacity: 0.20;
    pointer-events: none;
}

.site-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s) 0;
    font-family: var(--font-caption);
    font-size: var(--step--1);
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-nav .logo {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--step-1);
    color: var(--text-brand);
    letter-spacing: 0.04em;
    margin-inline-end: auto;
}

.site-nav a {
    color: var(--text-secondary);
}

.site-nav a:hover {
    color: var(--text-primary);
}

.site-nav a.is-current {
    color: var(--text-primary);
    border-block-end: 2px solid var(--region-accent);
    padding-block-end: 2px;
}

.nav-links {
    display: flex;
    gap: var(--space-s);
    list-style: none;
}


/* ── Homepage: Zone 1 — The Encounter ──────────────────────── */

.hero-encounter {
    position: relative;
    min-block-size: 90dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) 0;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hero-surface);
    background-size: cover;
    background-position: center 40%;
    opacity: var(--hero-surface-opacity, 1);
    pointer-events: none;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, var(--page-bg) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--step-5);
    font-weight: 600;
    color: var(--text-brand);
    letter-spacing: 0.06em;
    line-height: 1;
}

.hero-tagline {
    font-family: var(--font-caption);
    font-size: var(--step-1);
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-block-start: var(--space-2xs);
}

.hero-pitch {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--neutral-400);
    margin-block-start: var(--space-xs);
}

.install-cmd {
    margin-block-start: var(--space-m);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: var(--space-2xs) var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    transition: border-color 0.15s;
}

.install-cmd:hover {
    border-color: var(--interactive);
}

.install-cmd .prompt {
    color: var(--syn-kw);
    user-select: none;
}


/* ── Homepage: Zone 2 — The Three Doors ────────────────────── */

.three-doors {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.three-doors .switcher {
    --threshold: 22rem;
    --space: var(--space-m);
}

.door {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: var(--space-m);
    transition: border-color 0.2s, transform 0.2s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.door:hover {
    border-color: var(--interactive);
    transform: translateY(-2px);
    color: var(--text-primary);
}

.door-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-inline-end: var(--space-3xs);
    background: var(--door-icon, var(--interactive));
}

.door-title {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: 500;
}

.door-desc {
    font-family: var(--font-caption);
    font-size: var(--step--1);
    color: var(--text-secondary);
}

.door pre {
    border: none;
    margin-block-start: auto;
    font-size: calc(var(--step--1) * 0.92);
}


/* ── Homepage: Zone 3 — The Lineage ────────────────────────── */

.lineage {
    padding: var(--space-2xl) 0;
    border-block-start: 1px solid var(--border-subtle);
}

.lineage h2 {
    margin-block-end: var(--space-l);
}

.lineage-list {
    list-style: none;
}

.lineage-item {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--text-secondary);
    line-height: 1.6;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-m);
    border-inline-start: 2px solid var(--border-subtle);
    transition: border-color 0.2s;
}

.lineage-item+.lineage-item {
    margin-block-start: var(--space-2xs);
}

.lineage-item:hover {
    border-color: var(--interactive);
}

.lineage-item strong {
    color: var(--interactive);
    font-weight: 500;
}


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

.site-footer {
    background: var(--footer-surface);
    color: var(--footer-text);
    margin-block-start: var(--space-2xl);
    position: relative;
    overflow: hidden;
    border-block-start: 0.5px solid oklch(28% 0.04 60);
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/lichen-footer.jpg');
    background-size: cover;
    background-position: center bottom;
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    opacity: 0.10;
    pointer-events: none;
}

.footer-inner {
    position: relative;
    max-inline-size: var(--page-max);
    margin-inline: auto;
    padding: var(--space-xl) var(--gutter) var(--space-l);
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l) var(--space-xl);
    padding-block-end: var(--space-l);
}

.footer-brand-col {
    flex-basis: 240px;
    flex-grow: 1;
    max-inline-size: 300px;
}

.footer-brand-name {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--text-brand);
    letter-spacing: 0.04em;
    margin-block-end: var(--space-2xs);
}

.footer-tagline {
    font-family: var(--font-caption);
    font-size: var(--step--1);
    color: var(--footer-text-dim);
    line-height: 1.5;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l) var(--space-xl);
    flex: 1;
}

.footer-col {
    min-inline-size: 140px;
    flex: 1;
}

.footer-col-title {
    font-family: var(--font-caption);
    font-size: var(--step--2);
    font-weight: 500;
    color: var(--accent-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: var(--space-xs);
}

.footer-col-list {
    list-style: none;
}

.footer-col-list li {
    margin-block-end: var(--space-3xs);
}

.footer-col-list a {
    font-family: var(--font-caption);
    font-size: var(--step--1);
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-col-list a:hover {
    color: var(--footer-link-hover);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2xs) var(--space-l);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--footer-border);
}

.footer-copyright,
.footer-meta {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--footer-text-dim);
}

.footer-meta a {
    color: var(--footer-text-dim);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-meta a:hover {
    color: var(--footer-link-hover);
}


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

.btn-primary,
.btn-secondary,
.btn-ghost {
    font-family: var(--font-caption);
    font-size: var(--step--1);
    border-radius: 4px;
    padding: var(--space-3xs) var(--space-s);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary {
    font-weight: 500;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: none;
}

.btn-primary:hover {
    background: var(--btn-primary-hover-bg);
}

.btn-secondary {
    font-weight: 400;
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border: 1px solid var(--btn-secondary-border);
}

.btn-secondary:hover {
    border-color: var(--interactive);
    color: var(--text-primary);
}

/* Small chip-style button used for loading playground examples */
.btn-chip {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: var(--space-3xs) var(--space-xs);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-chip:hover {
    border-color: var(--interactive);
    color: var(--text-primary);
}


/* ── Playground editor ─────────────────────────────────────── */

.playground-label {
    font-family: var(--font-caption);
    font-size: var(--step--2);
    color: var(--text-secondary);
}

.lykn-editor {
    font-family: var(--font-mono);
    font-size: calc(var(--step-0) * 0.88);
    line-height: 1.55;
    background: var(--editor-bg);
    color: var(--editor-fg);
    border: 1px solid var(--editor-border);
    border-radius: 6px;
    padding: var(--space-s);
    resize: vertical;
    min-block-size: 20rem;
    inline-size: 100%;
    tab-size: 2;
}

.lykn-editor:focus {
    outline: 2px solid var(--interactive);
    outline-offset: -1px;
}

.lykn-output {
    min-block-size: 14rem;
    max-block-size: 24rem;
    max-inline-size: 100%;
    overflow: auto;
}

.lykn-console {
    min-block-size: 4rem;
    max-block-size: 12rem;
    max-inline-size: 100%;
    overflow: auto;
    color: var(--syn-fn);
}


/* ── Reference page sections ───────────────────────────────── */

.ref-section>h2 {
    color: var(--section-accent);
}

/* Entries flow vertically, separated by a hairline rather than wrapped in cards —
   readable/scannable instead of template-y. Code examples get full line length. */
.ref-entries>.ref-entry+.ref-entry {
    padding-block-start: var(--space-s);
}

.ref-entry-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
    align-items: baseline;
}


/* ── Page layout helpers ───────────────────────────────────── */

.page-block {
    padding-block: var(--space-l);
}

.page-block-lg {
    padding-block: var(--space-xl) 0 var(--space-2xl);
}

.cta-block {
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--border-subtle);
}

.blog-entry {
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--border-subtle);
}

.empty-state {
    padding-block: var(--space-xl);
    text-align: center;
}


/* ── Blog post prose ───────────────────────────────────────── */

.prose {
    font-family: var(--font-prose);
    font-size: var(--step--1);
    font-variation-settings: 'opsz' 14;
    line-height: 1.75;
}

.prose > * { max-inline-size: 48rem; }
.prose pre { max-inline-size: 48rem; }

.prose h2 {
    margin-block-start: var(--space-l);
    color: var(--accent-500);
}

.prose h3 {
    margin-block-start: var(--space-m);
    color: var(--accent-300);
}

.prose pre {
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle);
}

.prose pre code {
    background: none !important;
    font-family: var(--font-mono);
}

.prose code {
    background: var(--surface-raised);
    border-radius: 3px;
    padding: 0.12em 0.3em;
    font-size: 0.88em;
    font-family: var(--font-mono);
}

.prose p + p {
    margin-block-start: var(--space-xs);
}

.prose ul,
.prose ol {
    padding-inline-start: var(--space-m);
    margin-block-start: var(--space-xs);
}

.prose li + li {
    margin-block-start: var(--space-3xs);
}

.prose table {
    border-collapse: collapse;
    font-size: var(--step--1);
    margin-block-start: var(--space-xs);
}

.prose th,
.prose td {
    padding: var(--space-3xs) var(--space-s);
    border: 1px solid var(--border-subtle);
    text-align: start;
}

.prose th {
    background: var(--surface-raised);
    font-weight: 500;
}

/* Syntax highlighting in prose is handled by /js/prose-highlight.js
   which applies the same .sk/.sf/.ss/.sc/.sn/.st span classes used
   on the Tour and Reference pages. Syntect is disabled in _cobalt.yml. */


/* ── 404 page ──────────────────────────────────────────────── */

.display-glyph {
    font-size: var(--step-5);
    color: var(--text-brand);
    line-height: 1;
}


/* ── Utilities ─────────────────────────────────────────────── */

.text-center {
    text-align: center;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}