/* The guide's own layout and parts, in v2's roles only, as any app's would be.
 * scripts/test-v2-literals.mjs holds this file to the same rule as v2's stylesheets. */

/* ── The frame: areas in the top bar; the area's pages left; "On this page" right ── */
.site {
  display: grid;
  grid-template-columns: repeat(var(--ds-columns), minmax(0, 1fr));
  column-gap: var(--ds-gutter);
  max-width: var(--ds-full);
  margin-inline: auto;
  padding: var(--ds-space-7) var(--ds-margin) var(--ds-space-9);
}

.site-rail,
.site-toc {
  position: sticky;
  top: var(--ds-space-5);
  grid-row: 1;
  align-self: start;
  display: grid;
  gap: var(--ds-space-3);
}

.site-rail { grid-column: 1 / span 2; }
.site-toc { grid-column: 11 / span 2; }
.site-rail > .ds-label { text-decoration: none; }

.site-main {
  grid-column: 3 / span 8;
  grid-row: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--ds-space-8);
}

.site-main > section {
  display: grid;
  gap: var(--ds-space-5);
  scroll-margin-top: var(--ds-space-5);
}

.site-main > .ds-running-head { margin-bottom: calc(-1 * var(--ds-space-6)); }

.ds-running-head a {
  color: inherit;
  text-decoration: none;
}

.site-footer {
  grid-column: 3 / span 8;
  margin-top: var(--ds-space-8);
  padding-top: var(--ds-space-3);
  border-top: var(--ds-line) solid var(--ds-rule);
  color: var(--ds-text-2);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

/* On a narrow screen the area's pages sit above the page, as a row. */
.site-pages { display: none; }

.site-pages ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1) var(--ds-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-body);
}

.site-pages a {
  color: var(--ds-text-2);
  text-decoration: none;
}

.site-pages a[aria-current="page"] {
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
  box-shadow: inset 0 calc(-1 * var(--ds-line-strong)) 0 var(--ds-rule-strong);
}

.site-skip {
  position: absolute;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  z-index: var(--ds-layer-float);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-ink);
  color: var(--ds-on-ink);
  transform: translateY(calc(-100% - var(--ds-space-5)));
}

.site-skip:focus { transform: none; }

@media (width <= 1279px) {
  .site-rail { grid-column: 1 / span 3; }
  .site-toc { display: none; }

  .site-main,
  .site-footer { grid-column: 4 / span 9; }
}

@media (width <= 959px) {
  .site-rail { display: none; }
  .site-pages { display: block; }

  .site-main,
  .site-footer { grid-column: 1 / -1; }
}

@media (width <= 639px) {
  .site { padding-inline: var(--ds-space-5); }
}

/* ── Reading parts ───────────────────────────────────────────────────────── */
.page-intro { gap: var(--ds-space-4); }

.lede {
  max-width: var(--ds-measure);
  margin: 0;
  font-size: var(--ds-type-lede);
  line-height: var(--ds-leading-ui);
}

.prose {
  max-width: var(--ds-measure);
  display: grid;
  gap: var(--ds-space-3);
}

.prose p,
.prose ul { margin: 0; }
.prose li + li { margin-top: var(--ds-space-1); }

.note {
  margin: 0;
  color: var(--ds-text-2);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

.quote {
  max-width: var(--ds-measure);
  margin: 0;
  padding-top: var(--ds-space-3);
  border-top: var(--ds-line-strong) solid var(--ds-rule-strong);
  display: grid;
  gap: var(--ds-space-2);
}

.quote p {
  margin: 0;
  font-size: var(--ds-type-lede);
  line-height: var(--ds-leading-ui);
}

.quote cite {
  font-style: normal;
  color: var(--ds-text-2);
  font-size: var(--ds-type-small);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-5);
  font-size: var(--ds-type-ui);
}

.code {
  margin: 0;
  padding: var(--ds-space-3) var(--ds-space-4);
  overflow-x: auto;
  background: var(--ds-surface-sunk);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-5);
  color: var(--ds-text-2);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

.legend > span {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ds-space-2);
}

.st-decided { color: var(--ds-text); }
.st-rec { color: var(--ds-text-2); }
.st-open { color: var(--ds-warn); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-space-9) * 3), 1fr));
  gap: var(--ds-space-4);
}

.card {
  display: grid;
  gap: var(--ds-space-3);
  align-content: start;
  font-size: var(--ds-type-ui);
  line-height: var(--ds-leading-ui);
}

.card > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-space-2);
}

.card > header b,
.card > a.card-title {
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-weight-display);
  font-size: var(--ds-type-lede);
}

.card p,
.card ul { margin: 0; }
.card .rules { color: var(--ds-text-2); }
.card > .ds-tag { justify-self: start; }

.apps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.apps li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--ds-space-2);
  padding: var(--ds-space-2) 0;
  border-top: var(--ds-line) solid var(--ds-rule-soft);
}

.apps small {
  grid-column: 1;
  color: var(--ds-text-2);
  font-size: var(--ds-type-caption);
  overflow-wrap: anywhere;
}

.apps .ds-tag {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}

.venn {
  margin: 0;
  display: grid;
  justify-items: start;
  gap: var(--ds-space-2);
}

.venn svg {
  width: min(100%, calc(var(--ds-space-9) * 4));
  height: auto;
  color: var(--ds-ink);
}

.venn text {
  fill: var(--ds-text-2);
  font-family: var(--ds-font-mono);
}

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.topic {
  padding: 0 var(--ds-space-2);
  border: var(--ds-line) solid var(--ds-rule);
  border-radius: var(--ds-radius-tag);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-body);
}

.scroll { overflow-x: auto; }
.uses { min-width: calc(var(--ds-space-9) * 9); }
.uses td.c { text-align: center; }

.dot-part,
.dot-none { color: var(--ds-text-3); }

.dec td:first-child {
  font-weight: var(--ds-weight-semibold);
  width: 16%;
}

.dec td:last-child { white-space: nowrap; }

.journey ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
}

.journey li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--ds-space-5) minmax(0, 1fr) auto;
  gap: var(--ds-space-2);
  align-items: baseline;
  padding: var(--ds-space-2) 0;
  border-top: var(--ds-line) solid var(--ds-rule-soft);
}

.journey li::before {
  content: counter(step);
  color: var(--ds-text-3);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-caption);
}

.journey header span {
  color: var(--ds-text-2);
  font-size: var(--ds-type-caption);
}

.finding .big {
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-weight-display);
  font-size: var(--ds-type-h1);
  line-height: 1;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1);
}

.swatches i {
  width: var(--ds-space-5);
  height: var(--ds-space-5);
  border: var(--ds-line) solid var(--ds-rule);
}

.lockup {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding: var(--ds-space-2) 0;
}

.lockup-mark {
  width: var(--ds-space-8);
  height: var(--ds-space-8);
}

.lockup-bar {
  align-self: stretch;
  width: calc(var(--ds-line-strong) * 2);
  margin-block: var(--ds-space-2);
  background: var(--ds-ink);
}

.lockup-words {
  display: grid;
  gap: var(--ds-space-1);
}

.lockup-name {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-display);
  font-size: var(--ds-type-lede);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-wordmark);
  text-transform: uppercase;
}

.marks {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--ds-space-6);
}

.marks figure {
  margin: 0;
  display: grid;
  justify-items: start;
  gap: var(--ds-space-2);
}

.marks .ds-mark.m16 {
  width: var(--ds-space-4);
  height: var(--ds-space-4);
}

.marks .ds-mark.m24 {
  width: var(--ds-space-5);
  height: var(--ds-space-5);
}

.marks .ds-mark.m48 {
  width: var(--ds-space-7);
  height: var(--ds-space-7);
}

.marks .ds-mark.m96 {
  width: var(--ds-space-9);
  height: var(--ds-space-9);
}

.ramps {
  margin: 0;
  display: grid;
  gap: var(--ds-space-1);
}

.ramp,
.ramp-steps {
  display: grid;
  grid-template-columns: var(--ds-space-9) repeat(10, minmax(0, 1fr));
  align-items: center;
}

.ramp > span:not(.ds-label) { height: var(--ds-space-6); }

.ramp-steps {
  color: var(--ds-text-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-caption);
}

.ramp-steps > span { text-align: center; }
.ramps figcaption { margin-top: var(--ds-space-2); }

.spaces {
  display: grid;
  gap: var(--ds-space-2);
}

.space-row {
  display: grid;
  grid-template-columns: calc(var(--ds-space-9) + var(--ds-space-7)) minmax(0, 1fr);
  align-items: center;
  gap: var(--ds-space-4);
  font-size: var(--ds-type-small);
}

.space-row i {
  display: block;
  height: var(--ds-space-3);
  background: var(--ds-ink);
}

.icon-board {
  display: grid;
  gap: var(--ds-space-4);
  --icon-size: var(--ds-space-5);
}

.icon-board[data-size="16"] { --icon-size: var(--ds-space-4); }
.icon-board[data-size="48"] { --icon-size: var(--ds-space-7); }

.icon-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-space-3);
  padding-bottom: var(--ds-space-3);
  border-bottom: var(--ds-line-strong) solid var(--ds-rule-strong);
}

.icon-key {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-type-small);
}

.icon-board h3 {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  margin: var(--ds-space-3) 0 0;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-space-9) * 2), 1fr));
  gap: 0 var(--ds-space-4);
}

.icon-cell {
  margin: 0;
  padding: var(--ds-space-3) 0;
  border-top: var(--ds-line) solid var(--ds-rule-soft);
  display: grid;
  gap: var(--ds-space-2);
}

.icon-trio {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  color: var(--ds-ink);
}

.icon-cell figcaption {
  color: var(--ds-text-2);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

.ic {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
}

.phases {
  display: grid;
  border-top: var(--ds-line-strong) solid var(--ds-rule-strong);
}

.phase {
  display: grid;
  grid-template-columns: var(--ds-space-7) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--ds-space-4);
  padding: var(--ds-space-4) 0;
  border-bottom: var(--ds-line) solid var(--ds-rule-soft);
  font-size: var(--ds-type-ui);
  line-height: var(--ds-leading-ui);
}

.phase p { margin: 0; }

.phase .num {
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-weight-display);
  font-size: var(--ds-type-h2);
  line-height: 1;
  color: var(--ds-text-3);
}

.asks {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ask;
  display: grid;
  border-top: var(--ds-line-strong) solid var(--ds-rule-strong);
}

.asks li {
  counter-increment: ask;
  display: grid;
  grid-template-columns: var(--ds-space-7) minmax(0, 1fr);
  gap: var(--ds-space-4);
  padding: var(--ds-space-4) 0;
  border-bottom: var(--ds-line) solid var(--ds-rule-soft);
}

.asks li::before {
  content: counter(ask);
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-weight-display);
  font-size: var(--ds-type-h2);
  line-height: 1;
  color: var(--ds-text-3);
}

.asks p {
  margin: var(--ds-space-1) 0 0;
  color: var(--ds-text-2);
}

@media (width <= 639px) {
  .phase { grid-template-columns: var(--ds-space-6) minmax(0, 1fr); }
  .phase > :last-child { grid-column: 2; }
}

/* ── Specimens moved from the old components page ────────────────────────── */
.ref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

.ref-stack {
  display: grid;
  gap: var(--ds-space-4);
  align-content: start;
}

.ref-note {
  margin: 0;
  color: var(--ds-text-2);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

.ref-swatch {
  display: grid;
  gap: var(--ds-space-1);
  font-size: var(--ds-type-small);
  line-height: var(--ds-leading-ui);
}

.ref-swatch small {
  color: var(--ds-text-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-caption);
}

.ref-chip-color {
  display: block;
  height: var(--ds-space-7);
  border: var(--ds-line) solid var(--ds-rule);
}

.ref-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-space-9), 1fr));
  gap: var(--ds-space-4);
}

.ref-candidate {
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  min-height: var(--ds-space-6);
  border-bottom: var(--ds-line) solid var(--ds-rule-soft);
}

.ref-token {
  width: var(--ds-space-9);
  font-family: var(--ds-font-mono);
}

.ref-space { color: var(--ds-text-3); }

.ref-pct {
  min-width: var(--ds-space-8);
  text-align: right;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-type-ui);
  font-variant-numeric: tabular-nums;
}

.ref-type-display {
  font-family: var(--ds-font-display);
  font-stretch: var(--ds-display-stretch);
  font-weight: var(--ds-weight-display);
  font-size: var(--ds-type-h1);
  line-height: var(--ds-leading-tight);
}

.ref-mono { font-family: var(--ds-font-mono); }
.ref-corners td:nth-child(3) { width: 40%; }

/* ── The icon page's other sets ──────────────────────────────────────────── */
.icon-grid.dense { grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-space-9) + var(--ds-space-6)), 1fr)); }

.icon-cell small {
  display: block;
  color: var(--ds-text-3);
  font-size: var(--ds-type-caption);
}

.glyph {
  display: block;
  min-width: var(--icon-size);
  font-size: var(--icon-size);
  line-height: 1;
  text-align: center;
}

.app-icon {
  display: block;
  width: var(--ds-space-7);
  height: var(--ds-space-7);
}