/* ════════════════════════════════════════════════════════════════
   Progress Foundation — design system showcase
   ──────────────────────────────────────────────────────────────
   Rules that belong to this page only. The dark chrome (topbar,
   .wrap, .page-title, .lede, .sect) comes from ../shared/page.css;
   its colours and spacing steps from ../shared/tokens.css.

   Nothing here styles a component. Components are rendered inside
   specimen.html, in their own document, with the site's own CSS —
   so this file cannot reach them even by accident.
   ──────────────────────────────────────────────────────────── */

/* This file has its own token layer, and it is the only place in
   it where a literal is allowed to stand. Everything below refers
   to a name — the rule the design system asks of product code
   applies to the page that documents it.
   Steps, type sizes and radii come from ../shared/tokens.css.
   Breakpoints are the site's six; `ds:check` fails on a seventh.

   The page is light, because the site is light. The studio bar at
   the very top stays dark — it is the launcher's chrome, not part
   of the system — and everything below it is paper. There is no
   dark mode: a swatch has to be judged against the surface it will
   actually sit on. */
:root {
  /* Paper. Both values are the site's own, from tokens.css:
     White #fff and Grey 100 #e9efee. */
  --paper:     #fff;
  --paper-2:   #e9efee;
  --surface:   #fff;
  --surface-2: #f5f8f7;
  --hairline:  rgba(7, 8, 14, 0.12);
  --hairline-2: rgba(7, 8, 14, 0.06);

  /* Ink. #07080e is the colour the site's own `html` inherits. */
  --text-1: #07080e;
  --text-2: #4d5553;
  --text-3: #737b79;

  /* The site's green carries the accents on a light page: the
     current rubricator item, a token name, a link. */
  --accent:      #077964;
  --accent-soft: #e9efee;
  --accent-deep: #055a4a;

  /* The studio bar above the page keeps the launcher's own colour. */
  --page-deep: #0a1219;
  --page-veil: rgba(255, 255, 255, 0.94);

  --verdict-ok:    #077964;
  --verdict-drift: #9a6b12;
  --verdict-miss:  #b3261e;

  /* One hue per icon set, so a glyph's provenance is visible
     before its caption is read. */
  --set-green:  #077964;
  --set-grey:   #4d5553;
  --set-blue:   #116490;
  --set-purple: #7a5d7d;

  /* Sizes this page needs that the shared scale does not carry. */
  --text-micro:  10px;
  --text-nano:   11px;
  --hair:         1px;
  --icon:        24px;
  --icon-lg:     36px;
  --nav-w:      232px;
  --swatch-h:    72px;
  --icon-art-h:  52px;
  --stat-n:      28px;
  --demo-h:      64px;
  --topbar-h:    73px;   /* ../shared/page.css — .topbar, sticky at top */
  --radius-hair: 2px;
  --radius-dot:  50%;
  --radius-none: 0;
}

/* ─── Paper, over the shared dark chrome ──────────────────────── */

html, body {
  background: var(--paper);
  color: var(--text-1);
}
body { background: var(--paper); }

/* The studio bar is the one dark band, and it keeps its own rules
   from ../shared/page.css. Only its bottom edge is restated, so it
   parts from the paper cleanly. */
.topbar { border-bottom-color: transparent; }

.page-title { color: var(--text-1); }
.lede, .page__lede { color: var(--text-2); }
.sect__title { color: var(--text-3); }

::selection { background: var(--accent-soft); }


/* ─── Page frame ──────────────────────────────────────────────── */

.wrap { padding-bottom: 0; }

.page__back {
  display: inline-block;
  margin-bottom: var(--space-8);
  font-size: var(--text-small);
  color: var(--accent);
  text-decoration: none;
}
.page__back:hover { text-decoration: underline; }

.page__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.page__lede { margin-top: var(--space-4); max-width: 68ch; }

.page__source {
  max-width: 76ch;
  margin-top: var(--space-5);
  font-size: var(--text-caption);
  line-height: 1.7;
  color: var(--text-3);
}
.page__source code {
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  color: var(--accent);
  overflow-wrap: anywhere;
}

.page__footer {
  margin: var(--space-16) 0 var(--space-10);
  font-size: var(--text-caption);
  color: var(--text-3);
}
.footer-pad { height: var(--space-16); }

.note {
  max-width: 68ch;
  margin-bottom: var(--space-6);
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--text-2);
}

/* ─── Numbers ─────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (min-width: 640px)  { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.stat {
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-lg);
}
.stat__n {
  display: block;
  font-size: var(--stat-n);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__l {
  display: block;
  margin-top: 6px;
  font-size: var(--text-caption);
  line-height: 1.35;
  color: var(--text-2);
}
.stat__h {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-nano);
  line-height: 1.35;
  color: var(--text-3);
}

/* ─── Swatches ────────────────────────────────────────────────── */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--space-2);
}
.swatch {
  overflow: hidden;
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-lg);
}
.swatch__chip {
  display: block;
  height: var(--swatch-h);
  border-bottom: var(--hair) solid var(--hairline);
}
.swatch__body { padding: var(--space-3); }
.swatch__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
}
.swatch__count {
  flex: none;
  font-size: var(--text-nano);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.swatch__hex {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  text-transform: uppercase;
  color: var(--accent);
}
.swatch__token {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-nano);
  color: var(--text-3);
  word-break: break-all;
}
.swatch__use {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-nano);
  line-height: 1.5;
  color: var(--text-2);
}
.swatch__use li { font-family: var(--font-mono); overflow-wrap: anywhere; }
.swatch__where { margin-top: var(--space-2); font-size: var(--text-nano); line-height: 1.5; color: var(--text-2); }

/* ─── Tables (token tables, Figma comparison) ─────────────────── */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
.tbl th,
.tbl td {
  padding: 10px var(--space-3) 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--hair) solid var(--hairline);
}
.tbl th {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tbl td code,
.tbl th code { font-family: var(--font-mono); font-size: var(--text-nano); color: var(--accent); }
.tbl td small { display: block; margin-top: 3px; font-size: var(--text-nano); line-height: 1.5; color: var(--text-3); }
.tbl--scroll { display: block; overflow-x: auto; }

.verdict { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.verdict::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--radius-dot);
  background: var(--verdict-ok);
}
.verdict--drift::before { background: var(--verdict-drift); }
.verdict--miss::before  { background: var(--verdict-miss); }

/* ─── Type specimens ──────────────────────────────────────────── */

.type-row {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: var(--hair) solid var(--hairline);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .type-row { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; } }

.type-sample {
  overflow: hidden;
  color: var(--text-1);
  /* The three families the site loads, nothing else. */
}
.type-sample--serif { font-family: "Merriweather", serif; }
.type-sample--cond  { font-family: "Barlow Condensed", sans-serif; }
.type-sample--body  { font-family: "Inter", sans-serif; }
.type-sample--caps  { text-transform: uppercase; }

.type-meta { font-size: var(--text-caption); line-height: 1.6; color: var(--text-2); }
.type-meta b { display: block; font-size: var(--text-small); color: var(--text-1); }
.type-meta code { font-family: var(--font-mono); font-size: var(--text-nano); color: var(--accent); }
.type-sizes {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.type-sizes span { display: block; font-size: var(--text-nano); color: var(--text-3); }
.type-sizes b { font-size: var(--text-small); font-weight: 600; }

/* ─── Spacing ─────────────────────────────────────────────────── */

.space-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: 7px 0;
}
.space-row__n { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--accent); text-align: right; }
.space-row__bar { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: var(--space-3); align-items: center; }
@media (min-width: 640px) { .space-row__bar { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.space-row__fill { height: 14px; background: var(--accent); border-radius: var(--radius-hair); }
.space-row__meta { font-size: var(--text-nano); line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }

/* ─── Radii, shadows, motion, breakpoints ─────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}
.tile {
  padding: var(--space-3);
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-lg);
}
.tile__demo {
  height: var(--demo-h);
  margin-bottom: var(--space-3);
  background: var(--accent-soft);
}
.tile__demo--shadow { background: var(--paper); margin: 10px var(--space-5) 22px; height: 44px; }
.tile__name { font-family: var(--font-mono); font-size: var(--text-nano); color: var(--accent); word-break: break-all; }
.tile__v { margin-top: var(--space-1); font-size: var(--text-nano); line-height: 1.5; color: var(--text-3); word-break: break-all; }

/* The end labels would hang over both edges, so the track is inset
   by half a label and every mark is placed inside that inset. */
.ruler { position: relative; height: 62px; margin-top: var(--space-4); overflow: hidden; }
.ruler__track { position: absolute; top: 26px; left: 24px; right: 24px; height: var(--hair); background: var(--hairline); }
.ruler__mark { position: absolute; top: 0; width: 48px; margin-left: -24px; text-align: center; }
.ruler__tick { width: var(--hair); height: 20px; margin: 0 auto; background: var(--accent); }
.ruler__n { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: var(--text-micro); color: var(--text-2); }
.ruler__u { display: block; font-size: var(--text-micro); color: var(--text-3); }

/* ─── Page shell: rubricator + content ───────────────────────── */

.ds-shell { display: block; }

/* The shared topbar is sticky at top:0 and 73px tall, so the chip
   bar parks underneath it rather than behind it. */
.ds-nav {
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) var(--space-5);
  background: var(--page-veil);
  border-bottom: var(--hair) solid var(--hairline-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: var(--hair) solid var(--hairline);
  scrollbar-width: none;
}
.ds-nav::-webkit-scrollbar { display: none; }
.ds-nav__title { display: none; }
.ds-nav__list { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-nav__item { display: contents; }
.ds-nav__sub { display: none; }

.ds-nav__link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px var(--space-3);
  font-size: var(--text-caption);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-2);
  text-decoration: none;
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-pill);
}
.ds-nav__link:hover { color: var(--text-1); background: var(--surface-2); }
.ds-nav__link.is-current {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}
.ds-nav__n { font-variant-numeric: tabular-nums; opacity: 0.55; }

@media (min-width: 1024px) {
  .ds-shell {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
  }
  .ds-nav {
    position: sticky;
    top: var(--space-5);
    display: block;
    overflow: visible;
    padding: var(--space-5) var(--space-4) var(--space-5) var(--space-6);
    background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    max-height: calc(100vh - var(--space-10));
    overflow-y: auto;
  }
  .ds-nav__title {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .ds-nav__list { display: block; }
  .ds-nav__item { display: list-item; }
  .ds-nav__sub { display: block; margin: 2px 0 var(--space-2) 26px; padding: 0; list-style: none; }
  .ds-nav__link {
    padding: 5px 10px;
    white-space: normal;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: var(--radius-none);
  }
  .ds-nav__link:hover { background: var(--surface); }
  .ds-nav__link.is-current {
    color: var(--text-1);
    background: var(--surface-2);
    border-left-color: var(--accent);
  }
  .ds-nav__link--sub { font-size: var(--text-nano); color: var(--text-3); }
  .ds-main { max-width: none; margin: 0; padding-left: var(--space-2); padding-right: var(--space-8); }
}

/* Every section lands clear of the sticky chrome when jumped to:
   the topbar (73) plus the chip bar (≈45) on narrow screens. */
.sect { scroll-margin-top: calc(var(--topbar-h) + var(--space-12)); }
.cgroup { scroll-margin-top: calc(var(--topbar-h) + var(--space-12)); margin-bottom: var(--space-8); }
.component { scroll-margin-top: calc(var(--topbar-h) + var(--space-12)); }
@media (min-width: 1024px) {
  .sect, .cgroup, .component { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
}

.sect--summary { padding-top: var(--space-6); }

.sub__title {
  margin: var(--space-8) 0 var(--space-2);
  font-size: var(--text-h3-mobile);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.note--tight { margin-bottom: var(--space-4); font-size: var(--text-caption); }

/* ─── Parity, folded away until asked for ─────────────────────── */

.parity {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-lg);
}
.parity > summary {
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  color: var(--accent);
}
.parity[open] > summary { margin-bottom: var(--space-3); }

/* ─── Icons ───────────────────────────────────────────────────
   Four sets, one hue each, so where a glyph comes from is visible
   before its caption is read. The glyph is the point; the name is
   a caption under it. */

.icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3) var(--space-2) var(--space-2);
  text-align: center;
  background: var(--surface);
  border: var(--hair) solid var(--hairline-2);
  border-radius: var(--radius-lg);
}
.icon__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--icon-art-h);
  margin-bottom: var(--space-2);
}
.icon__art svg,
.icon__art img {
  width: var(--icon-lg);
  height: var(--icon-lg);
  object-fit: contain;
}
.icon__name,
.icon__name code {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--text-3);
}

.icon--green  { border-color: color-mix(in srgb, var(--set-green) 30%, transparent); }
.icon--green  .icon__art { color: var(--set-green); }
.icon--green  .icon__name code { color: var(--set-green); }
.icon--grey   .icon__art { color: var(--set-grey); }
.icon--blue   { border-color: color-mix(in srgb, var(--set-blue) 26%, transparent); }
.icon--blue   .icon__art { color: var(--set-blue); }
.icon--blue   .icon__name code { color: var(--set-blue); }
.icon--purple { border-color: color-mix(in srgb, var(--set-purple) 30%, transparent); }
.icon--purple .icon__name code { color: var(--set-purple); }

.icons__empty { font-size: var(--text-caption); color: var(--verdict-miss); }

/* ─── Component specimens ─────────────────────────────────────── */

.component { margin-bottom: var(--space-10); }
.component__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.component__name { font-size: var(--text-h3-mobile); font-weight: 600; letter-spacing: -0.01em; }
.component__block { font-size: var(--text-nano); }
.component__tag {
  padding: 2px var(--space-2);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verdict-drift);
  border: var(--hair) solid currentColor;
  border-radius: var(--radius-pill);
}
.component__note { max-width: 76ch; margin-bottom: var(--space-3); font-size: var(--text-small); line-height: 1.6; color: var(--text-2); }

.component__states { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.component__states button {
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--text-caption);
  color: var(--text-2);
  cursor: pointer;
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-pill);
}
.component__states button[aria-pressed="true"] { color: var(--paper); background: var(--accent); border-color: var(--accent); }

.component__statenote:empty { display: none; }
.component__statenote {
  margin: 0 0 var(--space-3);
  font-size: var(--text-nano);
  line-height: 1.6;
  color: var(--text-3);
}

/* The frame renders at the component's own width and is scaled
   down to fit. A transform does not shrink the layout box, so the
   overflow has to be clipped here or the page grows sideways. */
.stage {
  overflow: hidden;
  max-width: 100%;
  background: var(--paper);
  border: var(--hair) solid var(--hairline);
  border-radius: var(--radius-lg);
}
.stage__inner { position: relative; width: 100%; overflow: hidden; }
.stage iframe {
  display: block;
  border: 0;
  transform-origin: 0 0;
}
.component__src {
  margin-top: var(--space-2);
  font-size: var(--text-nano);
  line-height: 1.6;
  color: var(--text-3);
}
.component__src a { color: var(--accent); overflow-wrap: anywhere; }
.component__src b { font-weight: 500; color: var(--text-2); }

/* ─── Divergence list ─────────────────────────────────────────── */

.diverge { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.diverge__item {
  padding: var(--space-3);
  background: var(--surface);
  border: var(--hair) solid var(--hairline);
  border-left: 2px solid var(--verdict-drift);
  border-radius: var(--radius-lg);
}
.diverge__t { font-size: var(--text-small); font-weight: 600; }
.diverge__d { margin-top: 5px; font-size: var(--text-nano); line-height: 1.55; color: var(--text-2); }