/* ==========================================================================
   docs.css — chrome for the reference site itself
   NOT part of the design system. Do not copy this file into a product; it
   only styles the specimen frames, swatches and code panels on these pages.
   ========================================================================== */

/* --- Specimen ------------------------------------------------------------
   A live example above the markup that produced it. */
.spec {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}
.spec + .spec { margin-block-start: var(--s-6); }
.spec__label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--hairline-soft);
  background: var(--bg-sunken);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3);
}
.spec__demo { padding: var(--s-6); }
.spec__demo--sunken { background: var(--bg-sunken); }
.spec__demo--tight { padding: var(--s-4); }
.spec__note {
  padding: var(--s-3) var(--s-5);
  border-block-start: 1px solid var(--hairline-soft);
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5;
}

/* Code panel with a copy button. */
.spec__code { position: relative; border-block-start: 1px solid var(--hairline-soft); }
.spec__code pre {
  margin: 0; padding: var(--s-5);
  border: 0; border-radius: 0;
  background: var(--bg-sunken);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.65;
}
.copy {
  position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3);
  min-height: 32px; padding-inline: var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  background: var(--bg-elevated);
  color: var(--text-2);
  font-size: var(--fs-xs); cursor: pointer;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.spec__code:hover .copy, .copy:focus-visible { opacity: 1; }
.copy[data-done="1"] { color: var(--accent); border-color: var(--accent); }

/* --- Swatches ------------------------------------------------------------  */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-4); }
.swatch {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
.swatch__chip { block-size: 72px; border-block-end: 1px solid var(--hairline-soft); }
.swatch__meta { padding: var(--s-3) var(--s-4); }
.swatch__name { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; }
.swatch__val  { margin-block-start: 2px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/* --- Scale rulers --------------------------------------------------------  */
.scale-row {
  display: grid; grid-template-columns: 64px 72px minmax(0, 1fr);
  align-items: center; gap: var(--s-4);
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--hairline-soft);
}
.scale-row:first-child { border-block-start: 0; }
.scale-row__name { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; }
.scale-row__val  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.scale-row__bar  { block-size: 14px; border-radius: 3px; background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }

/* Radius and shadow demo tiles. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-4); }
.tile {
  display: grid; place-items: center;
  block-size: 92px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-soft);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3);
}

/* --- Type specimen -------------------------------------------------------  */
.type-row { padding-block: var(--s-5); border-block-start: 1px solid var(--hairline-soft); }
.type-row:first-child { border-block-start: 0; }
.type-row__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-block-end: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3);
}

/* --- Do / Don't ----------------------------------------------------------  */
.rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (width >= 720px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rule {
  padding: var(--s-5);
  border-radius: var(--r-md);
  border-inline-start: 2px solid var(--hairline);
  background: var(--bg-sunken);
  font-size: var(--fs-sm);
}
.rule--do   { border-color: var(--ok);     background: var(--ok-wash); }
.rule--dont { border-color: var(--danger); background: var(--danger-wash); }
.rule__h {
  display: block; margin-block-end: var(--s-2);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.rule--do   .rule__h { color: var(--ok); }
.rule--dont .rule__h { color: var(--danger); }

/* --- Page index cards on the home page -----------------------------------  */
.idx__n {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent); letter-spacing: 0.06em;
}

/* --- Anchored headings ---------------------------------------------------  */
.anchor-h { display: flex; align-items: baseline; gap: var(--s-3); }
.anchor-h a {
  opacity: 0; font-size: var(--fs-sm); color: var(--text-3);
  text-decoration: none; transition: opacity var(--dur-fast) var(--ease);
}
.anchor-h:hover a, .anchor-h a:focus-visible { opacity: 1; }

/* --- Heading specimens ---------------------------------------------------
   A page may only have one <h1>. These render *as* a heading without being
   one, so a type specimen or a pattern demo does not corrupt the document
   outline for screen readers and search engines. */
.as-h1 { font-size: var(--fs-h1); font-weight: 660; line-height: 1.08; letter-spacing: -0.026em; text-wrap: balance; }
.as-h1--hero { font-size: clamp(2.5rem, min(0.6rem + 3.7vw, 8.4svh), 4.25rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.032em; }

/* --- Demo scaffolding ----------------------------------------------------
   Widths and paddings used only to frame a specimen. */
.demo-narrow { max-width: 420px; }
.demo-wide   { max-width: 760px; }
.demo-tall   { min-height: 220px; }
.demo-pad-y  { padding-block: var(--s-12); }
.demo-center { justify-content: center; }
.demo-between { justify-content: space-between; }
.demo-plain  { list-style: none; padding: 0; margin: 0; }
.demo-italic { font-style: italic; }
.demo-rule   { max-width: 58ch; border-inline-start: 2px solid var(--hairline); padding-inline-start: var(--s-4); }
.demo-band   { background: var(--bg-elevated); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: var(--s-3); text-align: center; margin-inline: auto; }
.demo-icon   { display: inline; vertical-align: -2px; margin-inline-end: 4px; }
.demo-320 { max-width: 320px; }

/* --- Documentation section rhythm ----------------------------------------
   Each h2 on a reference page opens a new topic, and without this they run
   straight on from the previous section's last specimen with no room to
   breathe. The hairline makes the boundary legible; the space makes it
   comfortable. First section in the column gets neither. */
.with-aside > div > h2 {
  margin-block-start: var(--s-20);
  padding-block-start: var(--s-10);
  border-block-start: 1px solid var(--hairline-soft);
}
.with-aside > div > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}
/* A .note or .rules block sitting directly before an h2 already carries its
   own weight — halve the gap so it does not read as a gap twice. */
.with-aside > div > .note + h2,
.with-aside > div > .rules + h2 { margin-block-start: var(--s-12); }

/* The paragraph under an h2 should sit close to it — it belongs to that
   heading, not to the space above. */
.with-aside > div > h2 + p { margin-block-start: var(--s-4); }

/* --- Logo specimens ------------------------------------------------------  */
.mark-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-8); }
.mark-item { text-align: center; }
.mark-item img, .mark-item svg { display: block; margin-inline: auto; }
.mark-item figcaption { margin-block-start: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
/* Checker ground proves the tile is opaque and works on any backdrop. */
.mark-checker {
  background-image:
    linear-gradient(45deg, var(--bg-sunken) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-sunken) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-sunken) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-sunken) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.mark-on { display: grid; place-items: center; padding: var(--s-8); border-radius: var(--r-md); }

/* --- Hero figure ---------------------------------------------------------
   The stacked-layers graphic on the home page. Entrance only, and base.css's
   global reduced-motion rule already covers it because the SVG is inline in
   the document rather than loaded as a file. */
.sysfig__layer, .sysfig__bit { animation: sysfig-rise var(--dur-slow) var(--ease) both; }
@keyframes sysfig-rise { from { opacity: 0; transform: translateY(10px); } }
/* var() resolves reliably in a stylesheet; in an SVG presentation attribute it
   is patchier across browsers, so the type is styled here instead. */
.sysfig text { font-family: var(--font-mono); }

/* --- SVG page specimens --------------------------------------------------  */
.demo-gap-6 { gap: var(--s-6); }
.demo-on-accent {
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s-4); border-radius: var(--r-md);
}
.demo-center-text { text-align: center; }
.demo-inline { display: inline-block; max-width: 100%; }
/* var() resolves reliably in a stylesheet; in an SVG presentation attribute it
   is patchier across browsers, so SVG type is styled here instead. */
.sysdiag text, .card-demo text, .yearclock text { font-family: var(--font-sans); }
.card-demo .nums-svg text, .card-demo text.nums-svg { font-variant-numeric: tabular-nums; }
.ramp { border-radius: var(--r-sm); overflow: hidden; }
.sharebar { display: block; }

/* Legend swatches, one class per ramp step. */
.demo-legend { gap: var(--s-2) var(--s-5); }
.legend-dot {
  display: inline-block; inline-size: 8px; block-size: 8px;
  border-radius: 50%; margin-inline-end: 6px;
}
.legend-dot--1 { background: var(--c-1); }
.legend-dot--2 { background: var(--c-2); }
.legend-dot--3 { background: var(--c-3); }
.legend-dot--4 { background: var(--c-4); }
.legend-dot--5 { background: var(--c-5); }
.legend-dot--6 { background: var(--c-6); }
.demo-w37 { inline-size: 37%; }