/* The /components/ page. Uses only tokens from tokens.css. */

.lib .bar { grid-template-columns: 1fr auto; }
.lib .bar-status { display: none; }
@media (min-width: 721px) { .lib .bar { grid-template-columns: 1fr auto 1fr; } .lib .bar-status { display: inline-flex; } }

.lib-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-2); overflow: hidden; margin-right: var(--space-2); }
.lib-seg button { padding: 0.3rem 0.6rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--fg-2); }
.lib-seg button + button { border-left: 1px solid var(--line-2); }
.lib-seg button:hover { color: var(--fg); }
.lib-seg button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }

.lib-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-7);
  width: min(80rem, 100%);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-9);
}

/* Navigation */
.lib-nav {
  position: sticky;
  top: var(--bar-h);
  align-self: start;
  max-height: calc(100dvh - var(--bar-h));
  overflow-y: auto;
  padding: var(--space-6) 0 var(--space-6);
  display: grid;
  gap: var(--space-5);
  scrollbar-width: thin;
}
.lib-nav ul { display: grid; margin-top: var(--space-2); }
.lib-nav a {
  display: block;
  padding: 0.2rem 0 0.2rem var(--space-3);
  border-left: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--fg-2);
  transition: color var(--dur-1), border-color var(--dur-1);
}
.lib-nav a.is-mono { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.02em; }
.lib-nav a:hover { color: var(--fg); }
.lib-nav a[aria-current] { color: var(--accent); border-left-color: var(--accent); }

/* Intro */
.lib-main { min-width: 0; padding-top: var(--space-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); align-content: start; }
.lib-title { margin-top: var(--space-4); font: var(--weight-display) var(--step-4)/0.96 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.lib-title em { font-style: normal; color: var(--accent); }
.lib-lede { margin-top: var(--space-4); max-width: var(--measure); font-size: var(--step-1); line-height: 1.55; color: var(--fg-2); }
.lib-counts { margin-top: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.lib-counts dd { font: var(--weight-display) var(--step-3)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }

/* Sections and cards */
.lib-section { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-5); scroll-margin-top: calc(var(--bar-h) + var(--space-4)); }
.lib-section-head { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line-2); }
.lib-h2 { font: 750 var(--step-3)/1.04 var(--font-display); letter-spacing: var(--tracking-display); }
.lib-h3 { font-size: var(--step-1); font-weight: 500; }
.lib-h3 code { font-family: var(--font-mono); font-size: var(--step-0); }
.lib-p, .lib-doc { max-width: var(--measure); color: var(--fg-2); }
.lib-doc { font-size: var(--step--1); }
.lib code { font-family: var(--font-mono); font-size: 0.92em; }

.lib-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  scroll-margin-top: calc(var(--bar-h) + var(--space-4));
  min-width: 0;
}
.lib-card { grid-template-columns: minmax(0, 1fr); }
.lib-card-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.lib-tag, .lib-sub { font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-3); }
.lib-tag { padding: 0.1rem 0.4rem; border: 1px dashed var(--line-2); border-radius: var(--radius-1); }
.lib-sub { display: block; margin-top: 2px; }

.lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lib-mini {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.lib-mini:hover { color: var(--fg); border-color: var(--fg-3); }
.lib-mini[aria-pressed='true'] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.lib-select { padding: 0.3rem 0.5rem; border: 1px solid var(--line-2); border-radius: var(--radius-1); background: var(--bg); color: var(--fg); font: inherit; font-size: var(--step--1); max-width: 100%; }

/* The stage is where live blocks render: the page background, the answer column's width. */
.lib-stage {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--bg) radial-gradient(circle, var(--dot) 0.7px, transparent 1px) 0 0 / 20px 20px;
  min-width: 0;
  transition: max-width var(--dur-3) var(--ease-out);
}
.lib-stage { grid-template-columns: minmax(0, 1fr); }
.lib-stage > * { max-width: 46rem; min-width: 0; }
.lib-stage.is-narrow { max-width: 360px; }
.lib-stage.is-prim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lib-stage.is-prim > .chips, .lib-stage.is-prim > .entry, .lib-stage.is-prim > .offer, .lib-stage.is-prim > .ask { flex: 1 1 100%; }
.lib-stage .entry { margin-top: 0; }
.lib-stage .ask.is-static { position: static; transform: none; width: 100%; }
.lib-stage .offer { margin: 0; }
.lib-empty { color: var(--fg-3); }

.lib-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.lib-props td:last-child { font-family: var(--font-sans); white-space: normal; }
.lib-props td:nth-child(2) { font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-2); white-space: normal; }
.lib-req { color: var(--accent); font-weight: 500; margin-left: 2px; }
.lib-used-h { margin-top: var(--space-4); }
.lib-used { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.lib-used a { font-size: var(--step--1); color: var(--fg); border-bottom: 1px solid var(--accent-line); }
.lib-used a:hover { color: var(--accent); }
.lib-fixture { font-size: var(--step--1); color: var(--fg-2); border-bottom: 1px dashed var(--line-2); }

.lib-json {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-1);
  background: var(--bg-sunken);
  color: var(--fg);
  font: 400 var(--step--2)/1.55 var(--font-mono);
  tab-size: 2;
  resize: vertical;
}
.lib-json[aria-invalid='true'] { border-color: var(--accent); }
.lib-errors { display: grid; gap: 2px; margin-top: var(--space-2); font: 400 var(--step--2)/1.4 var(--font-mono); color: var(--accent); }
.lib-errors li::before { content: '× '; }
.lib-error { font-family: var(--font-mono); font-size: var(--step--2); color: var(--accent); }

.lib-src summary { cursor: pointer; }
.lib-src pre { margin-top: var(--space-2); padding: var(--space-3); overflow-x: auto; border-radius: var(--radius-1); background: var(--bg-sunken); font: 400 var(--step--2)/1.55 var(--font-mono); color: var(--fg-2); }

/* Foundations */
.lib-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3); }
.lib-swatch { display: grid; gap: var(--space-2); align-content: start; }
.lib-chip { display: grid; place-items: center; height: 4.5rem; border: 1px solid var(--line); border-radius: var(--radius-1); }
.lib-chip span { padding: 0.1rem 0.5rem; border-radius: var(--radius-1); background: var(--bg); font: 400 var(--step-2)/1 var(--font-display); }
.lib-swatch figcaption { display: grid; gap: 1px; font-size: var(--step--2); }
.lib-val { font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-3); }
.lib-ratio { font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-2); }
.lib-ratio.is-fail { color: var(--accent); }
.lib-role { color: var(--fg-2); font-size: var(--step--1); }

.lib-type { display: grid; border-top: 1px solid var(--line); }
.lib-type-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.lib-type-sample { line-height: 1.1; overflow-wrap: anywhere; }
.lib-type-sample.is-display { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
.lib-type-sample.is-voice { font-family: var(--font-voice); font-style: italic; font-weight: 300; }
.lib-type-sample.is-sans { font-family: var(--font-sans); }
.lib-type-sample.is-mono { font-family: var(--font-mono); letter-spacing: var(--tracking-micro); }

.lib-space { display: grid; gap: var(--space-2); }
.lib-space-row { display: grid; grid-template-columns: 6rem 4rem 1fr; align-items: center; gap: var(--space-3); font-size: var(--step--2); }
.lib-space-row i { height: 0.75rem; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.lib-radii { display: flex; gap: var(--space-5); }
.lib-radii figure { display: grid; gap: var(--space-2); justify-items: start; font-size: var(--step--2); }
.lib-radii span { width: 3.5rem; height: 3.5rem; border: 1px solid var(--fg-3); }

.lib-motion { display: grid; gap: var(--space-3); }
.lib-motion-row { display: grid; grid-template-columns: 9rem 14rem minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: var(--step--2); }
.lib-track { position: relative; height: 1.25rem; border-bottom: 1px solid var(--line-2); }
.lib-track i { position: absolute; left: 0; bottom: -5px; width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--accent); transition-property: left; }
.lib-motion.is-on .lib-track i { left: calc(100% - 10px); }

/* Composer */
.lib-compose { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: start; }
.lib-compose-src { position: sticky; top: calc(var(--bar-h) + var(--space-4)); }
.lib-compose-out { display: grid; gap: var(--space-3); min-width: 0; }
.lib-compose-out .turn-question { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.02; letter-spacing: var(--tracking-display); }
.lib-stage.is-turn { background: var(--bg); }

.lib-toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: var(--space-5);
  max-width: min(36rem, calc(100% - 2 * var(--gutter)));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  font-size: var(--step--1);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.lib-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) {
  .lib-split, .lib-compose { grid-template-columns: 1fr; }
  .lib-compose-src { position: static; }
}
@media (max-width: 860px) {
  .lib-layout { grid-template-columns: 1fr; gap: 0; }
  .lib-nav {
    position: sticky;
    z-index: 10;
    top: var(--bar-h);
    max-height: none;
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    margin: 0 calc(var(--gutter) * -1);
    padding: var(--space-2) var(--gutter);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .lib-nav-group { display: flex; align-items: center; gap: var(--space-2); flex: none; }
  .lib-nav-group > .micro { display: none; }
  .lib-nav ul { display: flex; margin: 0; }
  .lib-nav a { white-space: nowrap; border-left: 0; padding: 0.2rem 0.4rem; }
  .lib-card { padding: var(--space-4); }
  .lib-stage { padding: var(--space-5) var(--space-3); }
  .lib-motion-row { grid-template-columns: 1fr; }
  .lib-seg { display: none; }
}
@media print { .lib-nav, .lib-json, .lib-tools, .bar { display: none; } .lib-layout { display: block; } }

/* Variants: smaller examples under the editable one. */
.lib-variant { display: grid; gap: var(--space-2); margin: 0; min-width: 0; }
.lib-variant figcaption { font-size: var(--step--1); }
.lib-variant figcaption b { font-weight: 500; }
.lib-stage.is-variant { padding: var(--space-5) var(--space-4); }

/* Layouts: the real page structures, inside a stage. */
.lib-stage.is-layout { padding: var(--space-6) var(--space-5); }
.lib .turn:last-child { min-height: 0; }
.lib-page { width: 100%; padding: 0; }

/* Layouts: the session grid and the landing, inside a stage. */
.lib-session { padding: 0; animation: none; }
.lib .lib-session .rail { top: calc(var(--bar-h) + var(--space-4)); }
.lib-stage.is-landing-demo { padding: 0; overflow: hidden; }
.lib-stage.is-landing-demo .land-step { min-height: 0; padding: var(--space-8) 0; }
.lib-stage.is-landing-demo .land-step:last-child { padding-bottom: var(--space-8); }

/* Glyph coverage */
.lib-glyph-fig { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; }
.lib-glyphs td:last-child { font-family: inherit; white-space: normal; }
.lib-glyph { display: inline-block; min-width: 1.5em; font-size: var(--step-1); }
.lib-miss { color: var(--accent); }