/* site.css — layout for fertig's own website.
 * NOT part of the library and not shipped in the npm package.
 *
 * The site pairs an editorial product story with a working interface preview.
 * Components, colour, and both themes still come from fertig itself.
 */

/* ---- tokens ---------------------------------------------------- */
:root {
  --font-display: "Inter", var(--fertig-f);
  --font-body:    "Inter", var(--fertig-f);
  --font-mono:    "IBM Plex Mono", var(--fertig-fm);

  --wrap: 78rem;                /* site content width */
  --rail: 11rem;                /* the label column, everywhere */
  --gut: clamp(1.25rem, 4vw, 2.5rem);

  --space-sm: .75rem; --space-md: 1.5rem;
  --space-lg: clamp(2.5rem, 6vw, 4rem);
  --space-xl: clamp(4rem, 10vw, 7rem);

  --rule: 1px solid var(--fertig-bd);
  --label: 600 .68rem/1.4 var(--font-mono);   /* the uppercase mono label */
  --site-surface: color-mix(in srgb, var(--fertig-el) 96%, var(--fertig-ac));
  --site-border: color-mix(in srgb, var(--fertig-fg) 11%, transparent);
  --site-shadow: 0 1px 2px var(--fertig-sh1), 0 16px 38px -28px var(--fertig-sh2);
  --site-shadow-lg: 0 2px 5px var(--fertig-sh1), 0 32px 88px -40px var(--fertig-sh2);
  --glow-ac: color-mix(in srgb, var(--fertig-ac) 15%, transparent);
  --glow-ac-strong: color-mix(in srgb, var(--fertig-ac) 25%, transparent);
}

/* ---- page shell ------------------------------------------------ */
html, body { overflow-x: clip }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 82% -8%, color-mix(in srgb, var(--fertig-ac) 8%, transparent), transparent 32rem),
    var(--fertig-bg);
}
/* see the theme toggle in site.js: for the one frame the scheme flips in,
   nothing transitions, or a light-dark() colour freezes on the old branch */
[data-theme-switching] *, [data-theme-switching] *::before, [data-theme-switching] *::after {
  transition: none !important;
}

/* let the page go full width; fertig's paper column is re-created inside the
   demo mock-up instead. body > * rather than the three landmarks, because the
   site also uses bare <div> bands at the top level. */
body > * {
  max-width: none; padding-inline: 0; background: none;
  border-inline: 0; border-radius: 0; margin: 0; box-shadow: none;
}
body > main { padding-bottom: 0 }

.skip-link {
  position: fixed; inset-block-start: .75rem; inset-inline-start: .75rem;
  z-index: 100; translate: 0 calc(-100% - 1.5rem);
  padding: .65rem .9rem; border: 1px solid var(--fertig-ac);
  border-radius: var(--fertig-r); background: var(--fertig-el);
  color: var(--fertig-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus-visible { translate: 0 }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut) }

/* the rail: a mono label in the margin, content beside it. The one structural
   idea the whole site is built from. */
.rail { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--space-md); align-items: start }
.rail > .tag {
  font: 600 .8rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none;
  color: var(--fertig-ac); padding-top: .35rem; margin: 0;
}
@media (width <= 46rem) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: .5rem }
  .rail > .tag { padding-top: 0 }
}

/* Full-bleed sections use space and surface shifts instead of hard dividers. */
.band { padding-block: clamp(3.75rem, 7vw, 5.75rem); position: relative }
.band + .band { border-top: 0 }
.band-quiet {
  background: color-mix(in srgb, var(--fertig-el) 94%, var(--fertig-ac));
}
/* a faint accent wash on the quiet bands, so alternate sections read as
   stepping into a slightly warmer/darker plane rather than a hard toggle */
.band-quiet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 36% at 16% 0%, var(--glow-ac), transparent 68%);
  opacity: .5;
}
.band > .wrap, .band > .rail { position: relative }
:is(section, article) + :is(section, article) { margin-top: 0 }   /* bands own the spacing */

/* Code blocks read as code in either theme: the site keeps them on the dark
   surface the way an editor does. color-scheme is all it takes — every fertig
   colour is light-dark(), so the token palette and the panel flip together,
   and the two alpha knobs are what [data-theme=dark] would have set. */
.band pre, pre.dark {
  color-scheme: dark; --fertig-a1: .5; --fertig-a2: .45;
  color: var(--fertig-fg);
  border: 1px solid var(--site-border);
  border-radius: 1rem;
  background: var(--fertig-face);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fertig-fg) 4%, transparent), var(--site-shadow);
}

/* ---- icons ------------------------------------------------------
   A local sprite (icons.svg, built by tools/build-icons.py from Lucide),
   referenced with <use>. No icon font, no runtime library, no third-party
   request: the file is served from this origin and cached like any asset.
   Sized in em so an icon tracks the type it sits in, and stroked with
   currentColor so it inherits the link or button colour it is placed in. */
.icon {
  inline-size: 1em; block-size: 1em; display: inline-block;
  vertical-align: -.135em;                  /* optical baseline, not geometric */
  flex: none; stroke: currentColor; fill: none;
}
.icon-lg { inline-size: 1.15em; block-size: 1.15em }

/* Theme toggle: it shows the theme you would get, not the one you are in, so
   the sun means "go light". One icon is hidden rather than swapped by script —
   the theme lives on <html data-theme>, so CSS already knows which to show. */
[data-theme-toggle] .icon { inline-size: 1.05em; block-size: 1.05em }
[data-theme-toggle] .sun { display: none }
:root[data-theme=dark] [data-theme-toggle] .sun { display: inline-block }
:root[data-theme=dark] [data-theme-toggle] .moon { display: none }
/* Space an icon from its label with gap on the parent, not a margin on the
   icon. The label is a text node, so :first-child / :last-child / :only-child
   all match the icon whether it leads or trails — structural selectors cannot
   tell the two apart, but a flex gap does not need to. */
:is(a, button):has(> .icon) { display: inline-flex; align-items: center; gap: .45em }
/* summary keeps display:list-item so it keeps its marker; margin instead */
summary > .icon { margin-inline-end: .45em }
.rows h3 > .icon, .foot-cols strong > .icon { margin-inline-end: .4em; color: var(--fertig-ac) }

/* ---- toolbar --------------------------------------------------- */
body > nav {
  position: sticky; inset-block-start: 0; z-index: 10;
  border-bottom: 1px solid color-mix(in srgb, var(--fertig-fg) 8%, transparent);
  background: color-mix(in srgb, var(--fertig-bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(145%);
  display: block; padding: 0;
  box-shadow: 0 10px 32px -28px var(--fertig-sh2);
}
.bar { display: flex; align-items: center; gap: 1rem; padding-block: .65rem; flex-wrap: wrap }
.bar > strong { font: 700 1.05rem/1 var(--font-display); letter-spacing: -.035em }
.bar > strong a { color: inherit; text-decoration: none; opacity: 1;
                  display: inline-flex; align-items: center; gap: .45em }
/* The mark is an <img>, so it keeps its own two tones rather than inheriting
   the wordmark's colour the way an icon does. */
.mark { border-radius: 0; box-shadow: none; flex: none }
.bar .mark { inline-size: 1.9em; block-size: 1.9em }
/* the hero sets it in the label rail, where it reads as a masthead device
   rather than decoration */
.hero .mark { inline-size: clamp(3rem, 7vw, 4.5rem); block-size: auto; margin-bottom: .8rem }
.foot-mark { inline-size: 2.4rem; block-size: auto; margin-bottom: .9rem; opacity: .85 }
.bar ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0;
          margin-inline-start: auto; flex-wrap: wrap; flex: 0 1 auto; min-width: 0 }
/* flex: 0 would set flex-basis:0 and squeeze the list until every link wrapped
   onto its own line — fertig's own toolbar rule sets flex:1, so this has to say
   "natural width" explicitly rather than just turn the growing off. It must
   still be allowed to SHRINK (0 1, not 0 0) or the row runs off a narrow
   screen; overflow-x:clip on the root then hides the last link entirely rather
   than scrolling to it. */
.bar li { margin: 0 }
.bar ul a {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 2.5rem; padding: .58rem .82rem; border-radius: var(--fertig-rp);
  color: var(--fertig-mut); text-decoration: none; white-space: nowrap; opacity: 1;
  font: 500 .8rem/1.3 var(--font-body); letter-spacing: .01em;
}
.bar ul a:hover { color: var(--fertig-fg); background: color-mix(in srgb, var(--fertig-face) 80%, transparent) }
.bar ul a[aria-current] {
  color: var(--fertig-ac);
  background: color-mix(in srgb, var(--fertig-ac) 12%, transparent);
}
.bar > strong a[aria-current] { color: var(--fertig-fg) }
.bar .nav-github a {
  margin-inline-start: .35rem; padding-inline: .9rem;
  border: 1px solid var(--site-border); color: var(--fertig-fg);
}
.bar .nav-github .icon { rotate: -45deg }
.bar > button { border-radius: var(--fertig-rp) }

/* Keep the sticky chrome useful on a phone. The identity and theme control
   stay in a compact first row; navigation gets the full second row and
   scrolls inline instead of wrapping into three more rows. */
@media (width <= 46rem) {
  .bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: .2rem 1rem; padding-block: .35rem;
  }
  .bar > button { justify-self: end }
  .bar > ul {
    grid-column: 1 / -1; grid-row: 2; inline-size: 100%;
    margin-inline-start: 0; flex-wrap: nowrap; overflow-x: auto;
    overscroll-behavior-inline: contain; padding-block: .1rem;
    scrollbar-width: none;
  }
  .bar > ul::-webkit-scrollbar { display: none }
  .bar > ul > li { flex: none }
  .bar .nav-github { display: none }
  .bar > strong a, .bar > ul a {
    min-block-size: 44px; align-items: center;
  }
  .bar > ul a { padding-block: .58rem }
  .bar > button { min-inline-size: 44px; min-block-size: 44px }
}

/* ---- landing hero --------------------------------------------- */
.hero { border-bottom: var(--rule) }
.home-hero {
  position: relative; display: grid; align-items: center;
  min-block-size: calc(100svh - 3.9rem); overflow: hidden; border-bottom: 0;
  padding-block: clamp(2.25rem, 5svh, 4.5rem) clamp(2rem, 4svh, 3rem);
  background: transparent;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, var(--glow-ac-strong), transparent 28rem),
    radial-gradient(circle at 64% 4%, color-mix(in srgb, var(--fertig-violet-500) 14%, transparent), transparent 24rem);
  opacity: .8;
}
.hero-grid {
  position: relative; display: grid;
  max-width: 88rem;
  grid-template-columns: minmax(18rem, .72fr) minmax(33rem, 1.28fr);
  column-gap: clamp(2rem, 4vw, 4rem); row-gap: clamp(1.25rem, 2.5svh, 2rem);
  align-content: center; align-items: center;
}
.hero-copy { min-width: 0 }
.release-link {
  display: inline-flex; align-items: center; gap: .65rem;
  margin-bottom: 1rem; padding: .45rem .75rem;
  border: 1px solid var(--site-border); border-radius: var(--fertig-rp);
  background: color-mix(in srgb, var(--fertig-el) 72%, transparent);
  color: var(--fertig-mut); text-decoration: none;
  font: 600 .72rem/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
}
.release-link > span {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%;
  background: var(--fertig-ac); box-shadow: 0 0 0 .3rem var(--glow-ac);
}
.release-link:hover { color: var(--fertig-fg) }
.home-hero h1 {
  max-width: 13ch; margin: 0 0 1.1rem;
  font: 700 clamp(3.35rem, 5.1vw, 4.8rem)/.94 var(--font-display);
  letter-spacing: -.065em; text-wrap: balance;
}
.home-hero h1 span { color: var(--fertig-mut) }
.home-hero h1 em { color: var(--fertig-ac); font-style: normal }
.home-hero .lede {
  max-width: 36rem; margin: 0 0 1.35rem;
  color: var(--fertig-mut); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.65;
}
.home-hero .row { margin: 0 }
.home-hero .row > * { white-space: nowrap }
.cta-compact { display: none }
.cta-row { position: relative; z-index: 1 }
.cta-row :is(a.primary, .button-link, button) {
  min-block-size: 3.15rem; padding-inline: 1.35rem; border-radius: .85rem;
  font-weight: 600;
}
.button-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 5rem; padding: .48em 1.1em;
  border: 1px solid var(--site-border); border-radius: .85rem;
  background: color-mix(in srgb, var(--fertig-el) 72%, transparent); color: var(--fertig-fg);
  text-align: center; text-decoration: none;
}
.button-link:hover { background: var(--fertig-face); border-color: var(--fertig-mut) }
.cta-row .primary {
  background: var(--fertig-ac);
  box-shadow: 0 .5rem 1.6rem -.7rem color-mix(in srgb, var(--fertig-ac) 70%, transparent);
}
.cta-row .primary:hover {
  box-shadow: 0 .7rem 2rem -.7rem color-mix(in srgb, var(--fertig-ac) 80%, transparent);
}
.hero-install {
  display: inline-grid; grid-template-columns: auto auto; gap: .45rem 1.2rem; align-items: center;
  margin-top: .85rem; padding: .65rem .9rem;
  border: 1px solid var(--site-border); border-radius: .8rem;
  background: color-mix(in srgb, var(--fertig-el) 70%, transparent);
  box-shadow: var(--site-shadow);
}
.hero-install span {
  color: var(--fertig-mut); font: 600 .65rem/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.hero-install code { padding: 0; border: 0; background: none; color: var(--fertig-fg); font-size: .86rem }
.hero-workbench {
  min-width: 0; padding: .6rem; border: 1px solid var(--site-border);
  border-radius: 1.45rem; background: color-mix(in srgb, var(--fertig-tb) 88%, transparent);
  box-shadow: var(--site-shadow-lg), 0 1.5rem 3rem -2rem var(--glow-ac-strong);
}
.workbench-chrome {
  min-block-size: 2.35rem; padding-inline: .65rem; display: grid;
  grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center;
  color: var(--fertig-mut); font: 500 .62rem/1.4 var(--font-mono); letter-spacing: .04em;
}
.workbench-chrome > span:nth-child(2) { justify-self: center }
.workbench-chrome > b {
  justify-self: end; display: inline-flex; gap: .45rem; align-items: center;
  font-weight: 500; color: var(--fertig-fg);
}
.workbench-chrome > b i { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--fertig-green-500) }
@media (prefers-reduced-motion: no-preference) {
  .hero-workbench[data-demo-running] .workbench-chrome > b i {
    animation: workbench-live-pulse .9s ease-in-out infinite alternate;
  }
}
@keyframes workbench-live-pulse {
  to { scale: 1.35; box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--fertig-green-500) 18%, transparent) }
}
.window-dots { display: flex; gap: .32rem }
.window-dots i { inline-size: .46rem; block-size: .46rem; border-radius: 50%; background: var(--fertig-bd) }
.window-dots i:first-child { background: var(--fertig-red-500) }
.window-dots i:nth-child(2) { background: var(--fertig-amber-500) }
.window-dots i:nth-child(3) { background: var(--fertig-green-500) }
.workbench-screen {
  display: grid; grid-template-columns: minmax(12rem, .68fr) minmax(19rem, 1.32fr);
  block-size: clamp(24rem, 58svh, 32rem); min-block-size: 0; overflow: hidden;
  border: 1px solid var(--site-border); border-radius: 1.05rem; background: var(--fertig-el);
}
.workbench-code {
  color-scheme: dark; --fertig-a1: .5; --fertig-a2: .45;
  min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-inline-end: 1px solid var(--fertig-bd);
  background: var(--fertig-bg); color: var(--fertig-fg);
}
.workbench-codebar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem .85rem .35rem;
}
.workbench-codebar label, .workbench-caption {
  margin: 0; color: var(--fertig-mut); font: 600 .62rem/1.4 var(--font-mono);
  letter-spacing: .09em; text-transform: uppercase;
}
.workbench-codebar button {
  min-width: 0; margin: 0; padding: .22rem .5rem;
  border: 1px solid var(--fertig-bd); border-radius: .45rem;
  background: transparent; color: var(--fertig-mut); box-shadow: none;
  font: 600 .58rem/1.35 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.workbench-codebar button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--fertig-ac) 45%, var(--fertig-bd));
  background: var(--fertig-face); color: var(--fertig-fg);
}
.workbench-editor-stack { position: relative; min-width: 0; min-height: 0; overflow: hidden }
.workbench-highlight,
.workbench-editor {
  position: absolute; inset: 0; display: block;
  inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: none;
  margin: 0; padding: .5rem 1rem 1rem; overflow-x: hidden; overflow-y: auto;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: 500 clamp(.67rem, .72vw, .74rem)/1.55 var(--font-mono);
  tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-gutter: stable;
}
.workbench-highlight {
  z-index: 0; pointer-events: none; overflow: hidden; scrollbar-gutter: auto;
  padding-inline-end: calc(1rem + var(--workbench-editor-gutter, 0px));
  color: var(--fertig-fg);
}
.workbench-highlight code {
  display: block; min-width: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; white-space: inherit; overflow-wrap: inherit;
}
.workbench-editor {
  z-index: 1; resize: none; appearance: none; field-sizing: fixed; color: var(--fertig-fg);
  caret-color: var(--fertig-green-300); scrollbar-color: var(--fertig-gray-700) transparent;
}
.workbench-editor-stack[data-highlighted] .workbench-editor {
  color: transparent; -webkit-text-fill-color: transparent;
}
.workbench-editor:hover { background: transparent }
.workbench-editor:focus-visible {
  outline: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fertig-ac) 52%, transparent);
}
.workbench-output {
  min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--fertig-el);
}
.output-toolbar {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--fertig-bd);
  background: var(--fertig-tb); font-size: .7rem;
}
.output-toolbar span { color: var(--fertig-mut) }
.workbench-preview {
  display: block; inline-size: 100%; max-inline-size: none; block-size: 100%; min-block-size: 0;
  border: 0; border-radius: 0; background: var(--fertig-bg); color-scheme: light dark;
}
.workbench-caption {
  display: flex; justify-content: center; gap: .65rem; padding: .65rem .4rem .05rem;
}
.workbench-caption span:nth-child(2) { color: var(--fertig-ac) }
.proof {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .75rem; margin: 0 0 .25rem; padding: 0;
}
.proof > div {
  padding: .9rem 1rem; border: 1px solid var(--site-border);
  border-radius: 1rem; background: var(--site-surface); box-shadow: var(--site-shadow);
}
.proof :is(dt, dd) { margin: 0 }
.proof dt { margin-bottom: .28rem; font: 600 1.15rem/1.1 var(--font-display); letter-spacing: -.02em }
.proof dd {
  color: var(--fertig-mut); font: 600 .65rem/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
}
@media (width > 62rem) and (width <= 70rem) {
  .cta-wide { display: none }
  .cta-compact { display: inline }
  .cta-row :is(a.primary, .button-link, button) { padding-inline: .85rem }
}
@media (width <= 62rem) {
  .home-hero {
    display: block; min-block-size: 0;
    padding-block: clamp(2.5rem, 6svh, 4rem) clamp(2.5rem, 6svh, 4rem);
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr) }
  .hero-copy { max-width: 46rem }
  .hero-workbench { max-width: 70rem; justify-self: center; inline-size: 100% }
  .cta-wide { display: none }
  .cta-compact { display: inline }
  .cta-row :is(a.primary, .button-link, button) { padding-inline: 1rem }
}
@media (width <= 48rem) {
  .workbench-screen {
    grid-template-columns: minmax(0, 1fr); block-size: auto; min-block-size: 0;
  }
  .workbench-code {
    block-size: clamp(16rem, 42svh, 20rem); min-block-size: 0;
    border-inline-end: 0; border-block-end: 1px solid var(--fertig-bd);
  }
  .workbench-preview { block-size: clamp(22rem, 58svh, 28rem); min-block-size: 0 }
}
@media (width <= 38rem) {
  .home-hero { padding-block: clamp(2rem, 6svh, 3rem) 2.5rem }
  .home-hero h1 { font-size: clamp(2.75rem, 14vw, 4rem) }
  .proof { grid-template-columns: repeat(2, 1fr) }
}

/* ---- the showcase: real components, restyled live -------------------- */
.showcase { padding-block: clamp(4rem, 7vw, 5.75rem); background: transparent }
.showcase-bar {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; margin-bottom: 1.2rem;
}
.showcase-bar [role=tablist] { flex: 1 1 auto; min-width: 0 }
.dots { display: flex; gap: .5rem; align-items: center; margin: 0; flex-wrap: wrap }
.dots button {
  position: relative; inline-size: 44px; block-size: 44px;
  padding: 0; min-width: 0; border: 0; box-shadow: none;
  background: none; cursor: pointer;
}
.dots button::before {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  inline-size: 1.5rem; block-size: 1.5rem; translate: -50% -50%;
  border-radius: 999px; border: 2px solid transparent;
  /* Each button carries its own data-accent, so the dot paints itself. */
  background: var(--fertig-ac);
}
.dots button:hover::before { transform: scale(1.12) }
.dots button[aria-pressed=true]::before { border-color: var(--fertig-fg) }
@media (prefers-reduced-motion: no-preference) {
  .dots button::before { transition: transform .12s var(--fertig-ease-out, ease-out) }
}

.stage {
  border: 1px solid var(--site-border);
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--fertig-ac) 5%, transparent), transparent 42%),
    var(--fertig-face);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  box-shadow: var(--site-shadow-lg);
  container: stage / inline-size;
  position: relative;
}
.stage-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); position: relative }
@container stage (width >= 44rem) {
  .stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .stage-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
.stage .card {
  border-color: var(--site-border);
  border-radius: 1.1rem;
  box-shadow: var(--site-shadow);
  background: var(--fertig-el);
}
.stage [hidden] { display: none }

/* ---- section headers ------------------------------------------- */
.band h2 {
  max-width: 18ch; margin: 0;
  font: 700 clamp(2.2rem, 4.4vw, 3.5rem)/1.04 var(--font-display);
  letter-spacing: -.055em; text-wrap: balance;
}
.head {
  max-width: none; margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  grid-template-rows: auto 1fr; column-gap: clamp(2rem, 7vw, 6rem); align-items: end;
}
.head > .section-kicker { grid-column: 1; grid-row: 1 }
.head > h2 { grid-column: 1; grid-row: 2 }
.head > p:not(.section-kicker) { grid-column: 2; grid-row: 1 / span 2; align-self: end }
.showcase-intro > div { grid-column: 1; grid-row: 1 / span 2 }
.showcase-intro > div + p { grid-column: 2; grid-row: 1 / span 2; align-self: end }
.head h2 { margin-bottom: 0 }
.head p { color: var(--fertig-mut); margin: 0; line-height: 1.65; font-size: 1rem }
.section-kicker {
  margin: 0 0 .85rem !important; color: var(--fertig-ac) !important;
  font: 600 .68rem/1.4 var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase;
}
.page-title { font: 700 clamp(2.7rem, 6vw, 4.8rem)/.98 var(--font-display); letter-spacing: -.055em; margin: 0 0 var(--space-sm) }
.page-intro { max-width: 44rem; color: var(--fertig-mut); line-height: 1.6; margin: 0 }
/* A page header is a label, not a hero: the xl band rhythm belongs to the
   landing page's sections and leaves a docs page opening on a screen of air.
   The rule under it still separates header from body, so the space can go. */
.page-head {
  border-top: 0; padding-block: var(--space-lg) var(--space-md);
  background:
    radial-gradient(circle at 76% 0%, var(--glow-ac), transparent 24rem),
    transparent;
}
.page-head + .band { padding-top: var(--space-lg) }
.eyebrow { font: 600 .8rem/1.4 var(--font-body); color: var(--fertig-ac); margin: 0 0 .7rem }
@media (width <= 52rem) {
  .head { display: block }
  .head h2 { margin-bottom: 1rem }
}
/* A heading that names a region for a screen reader without drawing one. The
   showcase is a section of the page; it had no heading, so its first heading
   was an h3 inside a demo card and the outline jumped from h1 to h3. */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---- the spec table: the signature move ------------------------ */
.spec { border-collapse: collapse; inline-size: 100%; margin: 0; box-shadow: none; border: 0 }
.spec tr { border-bottom: var(--rule); background: none }
.spec tr:first-child { border-top: 0 }
.spec tr:last-child { border-bottom: 0 }
.spec :is(th, td) { border: 0; background: none }
.spec th {
  text-align: start; font: 500 .9rem/1.5 var(--font-body); letter-spacing: 0;
  color: var(--fertig-mut); padding: .85rem 0; inline-size: 14rem; vertical-align: baseline;
}
.spec td { padding: .85rem 0; font-family: var(--font-mono); font-size: .9rem; vertical-align: baseline }
.spec td span { font-family: var(--font-body); color: var(--fertig-mut); font-size: .85rem }
@media (width <= 40rem) {
  .spec th { inline-size: auto; display: block; padding-bottom: 0 }
  .spec td { display: block; padding-top: .2rem }
}

/* ---- labelled rows, used instead of card grids ----------------- */
/* A card grid, not hairline-separated rows. The rows read as a spec sheet,
   which fought the showcase above them — this is the same information with the
   same restraint, but it belongs to the same page. */
.rows { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)) }
.rows > * {
  grid-column: span 4; min-block-size: 12rem;
  border: 1px solid var(--site-border); border-radius: 1.25rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--site-surface);
  box-shadow: var(--site-shadow);
  min-width: 0;
}
.rows > :first-child, .rows > :nth-child(2) { grid-column: span 6 }
.rows > *:hover {
  border-color: var(--fertig-mut);
  translate: 0 -.2rem;
}
@media (prefers-reduced-motion: no-preference) {
  .rows > * { transition: translate .18s var(--fertig-ease-out), box-shadow .18s var(--fertig-ease-out), border-color .18s var(--fertig-ease-out) }
}
.rows h3 {
  display: flex; align-items: center; gap: .55em;
  font: 600 1.15rem/1.25 var(--font-display); letter-spacing: -.025em;
  margin: 0 0 .7rem; color: var(--fertig-fg);
}
.rows h3 .icon { inline-size: 1.15em; block-size: 1.15em; color: var(--fertig-ac) }
.rows p { margin: 0; color: var(--fertig-mut); font-size: .93rem; line-height: 1.6 }
.rows p + p { margin-top: .5rem }
/* a row that wants the full width — a table or a wide figure */
.rows > .span { grid-column: 1 / -1 }
@media (width <= 54rem) {
  .rows > *, .rows > :first-child, .rows > :nth-child(2) { grid-column: span 6 }
}
@media (width <= 34rem) {
  .rows > *, .rows > :first-child, .rows > :nth-child(2) { grid-column: 1 / -1 }
}

/* ---- grids ----------------------------------------------------- */
.cols-2 { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: start }
@media (width >= 52rem) { .cols-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) } }
.cols-3 { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) }
.cols-4 { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) }
/* grid items default to min-width:auto, so a long line inside <pre> can push a
   column past 1fr and scroll the whole page sideways. This is the fix. */
:is(.cols-2, .cols-3, .cols-4, .example, .docs, .blocks-layout, .foot-cols) > * { min-width: 0 }
.spaced { margin-top: 1.2rem }           /* after a grid, whose items zero their margins */

/* ---- the browser mock-up that shows the real sheet ------------- */
.mock {
  /* the measure is a page-level token, so the preview behaves like a page:
     drag --fertig-w below the column width and the panel narrows with it */
  max-inline-size: var(--fertig-w);
  border: 1px solid var(--site-border); border-radius: 1.25rem;
  overflow: hidden; background: var(--fertig-el);
  box-shadow: var(--site-shadow-lg);
}
.mock-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--fertig-tb); border-bottom: var(--rule); font: var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--fertig-mut) }
.mock-body { padding: 1.4rem; font-size: .95em }
.mock-body > :first-child { margin-top: 0 }
/* :not(dialog) — a modal is centred by margin:auto, so it must keep its own */
.mock-body > :last-child:not(dialog) { margin-bottom: 0 }

/* ---- shared elevated panel ------------------------------------- */
.panel {
  border: 1px solid var(--site-border); border-radius: 1.25rem;
  background: var(--site-surface);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--site-shadow);
}
.panel > :first-child { margin-top: 0 }
.panel > :last-child { margin-bottom: 0 }
#components { background: transparent }
.component-trio > .card {
  block-size: 100%; border-color: var(--site-border); border-radius: 1.25rem;
  background: var(--site-surface); box-shadow: var(--site-shadow);
}
.component-trio > .card > header { font-weight: 600 }
.component-trio [role=listbox] { margin-block: 0 }
.home-item-list { margin: 0; padding: .35rem }
#customize { background: color-mix(in srgb, var(--fertig-bg) 84%, var(--fertig-ac)) }
#customize form {
  padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--site-border);
  border-radius: 1.25rem; background: var(--site-surface); box-shadow: var(--site-shadow);
}
#questions details {
  border: 1px solid var(--site-border); border-radius: 1rem;
  padding-inline: 1rem; background: var(--site-surface); box-shadow: var(--site-shadow);
}
#questions details + details { margin-top: .7rem }
main > #install {
  background:
    radial-gradient(circle at 76% 50%, var(--glow-ac-strong), transparent 30rem),
    color-mix(in srgb, var(--fertig-el) 94%, var(--fertig-ac));
}
main > #install h2 { max-width: 17ch }

/* ================================================================
   DOCS and BLOCKS — a persistent sidebar, not a table of contents
   that scrolls away and leaves you with no idea where you are
   ================================================================ */
.docs, .blocks-layout {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr); align-items: start;
}
@media (width >= 60rem) {
  .docs, .blocks-layout { grid-template-columns: 15rem minmax(0, 1fr) }
}

.sidebar { font-size: .88rem }
@media (width >= 60rem) {
  .sidebar {
    position: sticky; inset-block-start: 4.8rem;
    max-block-size: calc(100dvh - 5.8rem); overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem;
    border: 1px solid var(--site-border); border-radius: 1.2rem;
    background: var(--site-surface); box-shadow: var(--site-shadow);
  }
  .sidebar > details {
    margin: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .sidebar > details > summary { display: none }        /* always open on desktop */
}
.sidebar ul { list-style: none; padding: 0; margin: 0 0 1rem }
.sidebar li { margin: 0 }
.sidebar a {
  /* flex, not block: the icon rule above uses gap, and a later display:block
     here would win the cascade and collapse the space beside a glyph */
  display: flex; align-items: center; gap: .45em;
  padding: .38rem .65rem; color: var(--fertig-mut);
  text-decoration: none; border-radius: .65rem;
}
.sidebar a:hover { color: var(--fertig-fg); background: var(--fertig-face) }
.sidebar a[aria-current="true"] {
  color: var(--fertig-ac); background: color-mix(in srgb, var(--fertig-ac) 12%, transparent);
  font-weight: 600;
}
.sidebar strong { display: block; font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--fertig-fg); margin: 1.2rem 0 .4rem }
.sidebar > * > :first-child { margin-top: 0 }
/* the summary is the first child but is hidden on desktop, so the label
   after it is the one that must not carry a top margin */
@media (width >= 60rem) { .sidebar > details > summary + strong { margin-top: 0 } }
/* narrow screens: the nav collapses into a disclosure the reader opens */
@media (width <= 60rem) {
  .sidebar > details {
    border: 1px solid var(--site-border); border-radius: 1rem; padding: .2rem .9rem;
    background: var(--site-surface); box-shadow: var(--site-shadow);
  }
  .sidebar > details > summary {
    min-block-size: 44px; padding-block: .55rem;
    font: var(--label); letter-spacing: .08em; text-transform: uppercase;
  }
  .sidebar a { min-block-size: 44px; align-items: center; padding-block: .45rem }
}

.doc-body > section { scroll-margin-top: 4.5rem }
.doc-body > section + section { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule) }
/* :not(dialog *) — these are the prose column's headings. The docs render live
   components, and a dialog title inside one is UI text that fertig already
   styles; an unlayered rule here would silently outrank the library it demos. */
.doc-body h2:not(dialog *) { margin-top: 0; font: 600 1.35rem/1.2 var(--font-display); letter-spacing: -.03em }
.doc-body h3:not(dialog *) { font: 600 1rem/1.3 var(--font-display); letter-spacing: -.02em; margin-top: 1.8rem }
.doc-body p { max-width: 44rem; line-height: 1.65 }
.doc-body > #install .cols-2 { grid-template-columns: minmax(0, 1fr) }
.doc-body > #install pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-body pre > code, .block-code pre > code {
  display: block; font: 500 .8rem/1.62 var(--font-mono); tab-size: 2;
}
.doc-code-scroll {
  max-block-size: min(28rem, 60dvh); overflow: auto; overscroll-behavior: contain;
}

/* example / code split */
.example { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); margin: 1.1rem 0; align-items: start }
.example > .demo {
  border: 1px solid var(--site-border); border-radius: 1rem; padding: 1.1rem;
  background: var(--site-surface); box-shadow: var(--site-shadow);
}
.example > .demo > :first-child { margin-top: 0 }
.example > .demo > :last-child:not(dialog) { margin-bottom: 0 }
.example pre { margin: 0; block-size: 100% }
/* size the split by its own container, not the viewport */
@supports (container-type: inline-size) {
  .doc-body { container: doc / inline-size }
  @container doc (width >= 34rem) { .example { grid-template-columns: minmax(0,1fr) minmax(0,1fr) } }
  @container doc (width >= 44rem) {
    .doc-body > #install .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  }
}

/* ---- blocks: one column, full width ---------------------------- */
.block-group + .block-group { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule) }
.block-group > h2 { font: 600 1.35rem/1.2 var(--font-display); letter-spacing: -.03em; margin: 0 0 .5rem; scroll-margin-top: 4.5rem }
.block-group > p { color: var(--fertig-mut); max-width: 44rem; margin-block: 0 var(--space-md) }

/* one block: a rail-labelled header, a full-width preview, then its code.
   Two columns squeezed both halves and scrolled the code sideways; the code
   is the point, so it gets the whole measure. */
.block { margin: 0; padding-block: var(--space-md); border-top: var(--rule); scroll-margin-top: 4.5rem }
.block:first-of-type { border-top: 0; padding-top: 0 }
.block > .rail { margin-bottom: var(--space-sm) }
.block h3 { font: 600 .95rem/1.3 var(--font-display); letter-spacing: -.02em; margin: 0 0 .25rem }
.block > .rail p { margin: 0; color: var(--fertig-mut); font-size: .88rem; line-height: 1.55; max-width: 44rem }
.block-preview {
  border: 1px solid var(--site-border); border-radius: 1.2rem; padding: 1.4rem;
  background: var(--site-surface); box-shadow: var(--site-shadow); margin-bottom: .6rem;
}
.block-preview > :first-child { margin-top: 0 }
.block-preview > :last-child:not(dialog) { margin-bottom: 0 }
.block-preview > form {
  inline-size: min(100%, 30rem); margin-inline: auto;
}
.block-preview > form > fieldset { margin: 0 }
.block-preview dialog {
  width: min(36rem, calc(100dvw - 2rem)); max-width: calc(100dvw - 2rem);
}
/* the code is secondary to the preview — closed until it is asked for */
.block-code { position: relative; border: 0; padding: 0; background: none; margin: 0 }
.block-code > summary {
  min-block-size: 2.6rem; padding-block: .55rem; padding-inline-end: 6rem;
  font: var(--label); letter-spacing: .07em; text-transform: uppercase; color: var(--fertig-mut);
}
.block-code > summary:hover { color: var(--fertig-fg) }
.block-code[open] > summary { margin-bottom: .4rem }
.block-code pre {
  margin: 0; max-block-size: 26rem; overflow-x: hidden;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.block-code button { position: absolute; inset-block-start: .3rem; inset-inline-end: .5rem; z-index: 2 }

/* ---- footer ---------------------------------------------------- */
body > footer {
  border-top: 1px solid var(--site-border); padding-block: var(--space-xl);
  background: color-mix(in srgb, var(--fertig-bg) 96%, var(--fertig-ac));
  color: var(--fertig-fg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) body > footer { opacity: .98 }
}
html[data-theme=light] body > footer { opacity: .98 }
.footer-main {
  display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.6fr);
  gap: clamp(3rem, 8vw, 7rem); align-items: start;
}
.footer-brand p {
  max-width: 13ch; margin: 0;
  font: 600 clamp(1.7rem, 3.5vw, 2.6rem)/1.05 var(--font-display);
  letter-spacing: -.045em;
}
.foot-cols { display: grid; gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.foot-cols strong { display: block; font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--fertig-mut); margin-bottom: .6rem }
.foot-cols ul { list-style: none; padding: 0; margin: 0 }
.foot-cols li { margin: 0; padding-block: .18rem }
.foot-cols a { color: var(--fertig-fg); text-decoration: none; font-size: .88rem }
.foot-cols a:hover { color: var(--fertig-ac) }
.foot-note {
  margin: clamp(3rem, 7vw, 5rem) 0 0; padding-top: var(--space-md); border-top: var(--rule);
  font: var(--label); letter-spacing: .05em; color: var(--fertig-mut);
  display: flex; gap: 1.2rem; flex-wrap: wrap;
}
@media (width <= 48rem) {
  .footer-main { grid-template-columns: 1fr }
  .foot-cols { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) }
}

/* ---- bleeding edge, site-only ---------------------------------- */

/* cross-document view transitions: navigating home <-> docs cross-fades,
   and the toolbar is carried across instead of being torn down */
@view-transition { navigation: auto }
body > nav { view-transition-name: toolbar }

/* Sections arrive as they are scrolled into view. A scroll-driven animation,
   so there is no observer and no JavaScript — the browser runs it off the
   scroll position. Behind @supports because where it is missing the content
   must simply be there, not stuck at opacity 0. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band > .wrap, .home-hero > .wrap {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    /* the first screen is already in view on load; animating it just delays it */
    .home-hero > .wrap { animation: none }
  }
}
/* translate only, deliberately no opacity. A scroll-driven animation sits at
   its start position until the timeline advances, so fading in from 0 leaves
   content invisible wherever the timeline never runs — a window taller than
   the range, a zoomed-out page, a screenshot. Moving it 1rem is the same
   effect to look at and cannot hide anything. */
@keyframes rise {
  from { translate: 0 1rem }
  to   { translate: 0 0 }
}

/* ================================================================
   COMPONENTS PAGE — grid listing with filter bar and search
   ================================================================ */
.comp-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md);
  padding: 1rem; border: 1px solid var(--site-border); border-radius: 1.2rem;
  background: var(--site-surface); box-shadow: var(--site-shadow);
}
.comp-filters {
  display: flex; flex-wrap: wrap; gap: .4rem;
  min-inline-size: 0; max-inline-size: none; padding: 0; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.comp-filter {
  font: var(--label); letter-spacing: .04em; text-transform: uppercase;
  padding: .42em .9em; border-radius: var(--fertig-rp);
  border: 1px solid var(--site-border); background: transparent;
  color: var(--fertig-mut); cursor: pointer; white-space: nowrap;
}
.comp-filter:hover { color: var(--fertig-fg); border-color: var(--fertig-mut) }
.comp-filter[aria-pressed="true"] {
  color: var(--fertig-on-ac, #f7f8fb); background: var(--fertig-ac);
  border-color: var(--fertig-ac);
}
@media (width <= 46rem) {
  [role=tab] { min-block-size: 44px }
  .comp-filters {
    flex-wrap: wrap; inline-size: 100%; overflow: visible;
  }
  .comp-filter { flex: none; min-inline-size: 44px; min-block-size: 44px }
}
.comp-search-wrap { flex: 1 1 14rem; max-width: 22rem }
.comp-search {
  inline-size: 100%; font: 400 .9rem/1.4 var(--font-body);
  padding: .55rem .9rem; border-radius: .8rem;
  border: 1px solid var(--site-border); background: var(--fertig-el);
  color: var(--fertig-fg);
}
.comp-search::placeholder { color: var(--fertig-mut) }
.comp-search:focus-visible { border-color: var(--fertig-ac);
  box-shadow: 0 0 0 2px var(--glow-ac) }
.comp-count {
  font: var(--label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fertig-mut); margin: 0 0 var(--space-md);
}
.comp-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.comp-card {
  border: 1px solid var(--site-border); border-radius: 1.25rem;
  padding: 1.35rem;
  background: var(--site-surface);
  box-shadow: var(--site-shadow);
  display: flex; flex-direction: column; gap: .6rem;
  min-width: 0;
}
.comp-card[hidden] { display: none }
.comp-card:hover {
  border-color: var(--fertig-mut);
  translate: 0 -.2rem;
}
@media (prefers-reduced-motion: no-preference) {
  .comp-card { transition: translate .18s var(--fertig-ease-out), box-shadow .18s var(--fertig-ease-out), border-color .18s var(--fertig-ease-out) }
}
.comp-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.comp-card-head h3 {
  font: 600 1rem/1.3 var(--font-body); letter-spacing: -.01em;
  margin: 0; margin-inline-end: auto; color: var(--fertig-fg);
}
.comp-card-head .badge {
  font: 600 .6rem/1.4 var(--font-mono); letter-spacing: .06em;
  text-transform: uppercase; padding: .25em .65em;
}
.comp-copy {
  min-width: 0; min-height: 2rem; margin: 0; padding: .3rem .62rem;
  border: 1px solid var(--site-border); border-radius: .55rem;
  background: var(--fertig-el); color: var(--fertig-mut); box-shadow: none;
  font: 600 .62rem/1.2 var(--font-mono); letter-spacing: .04em;
}
.comp-copy:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--fertig-ac) 45%, var(--site-border));
  background: var(--fertig-face); color: var(--fertig-fg);
}
.comp-copy[data-copied] {
  border-color: color-mix(in srgb, var(--fertig-green-500) 45%, var(--site-border));
  color: var(--fertig-green-500);
}
.comp-card-preview {
  border: 1px solid var(--site-border); border-radius: 1rem;
  padding: 1rem; background: color-mix(in srgb, var(--fertig-bg) 72%, var(--fertig-el));
  min-height: 7rem;
}
.comp-card-preview > :first-child { margin-top: 0 }
.comp-card-preview > :last-child { margin-bottom: 0 }
.comp-card-desc {
  margin: 0; font-size: .88rem; line-height: 1.6; color: var(--fertig-mut);
}
.comp-card-code {
  margin-top: auto; padding: .75rem .85rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  color-scheme: dark; --fertig-a1: .5; --fertig-a2: .45;
  border: 1px solid var(--site-border); border-radius: .85rem;
  background: var(--fertig-bg);
}
.comp-card-code code {
  display: block; min-width: 0;
  font: 500 .78rem/1.62 var(--font-mono); tab-size: 2;
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--fertig-fg);
}
.comp-empty {
  text-align: center; padding: var(--space-xl) 0; color: var(--fertig-mut);
}
.comp-empty p { font-size: 1.1rem; margin-bottom: var(--space-md) }
@media (width <= 46rem) {
  .comp-toolbar { flex-direction: column; align-items: stretch }
  .comp-search-wrap { flex-basis: auto; max-width: none }
  .comp-grid { grid-template-columns: 1fr }
}

/* the theme toggle is the one thing here that needs JavaScript */
@media (scripting: none) { .bar button { display: none } }