/* PostData — sheet layer
   The page is drawn as a ruled datasheet, not a stack of cards: a margin rail
   with a tick ruler, hairlines that run full-bleed across it, content inset.
   Loaded after components.css. */

:root { --rail: 68px; }
@media (max-width: 899px) { :root { --rail: 0px; } }

/* ---------- 1. Sheet: margin rail + body ---------- */
.sheet { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.sheet__rail { position: relative; border-right: var(--bw) solid var(--c-border); }
/* The ruler: a 24px tick pitch down the inside of the rule. Reads as
   measurement, costs one gradient. */
.sheet__rail::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 6px;
  background: repeating-linear-gradient(to bottom, var(--c-border) 0 1px, transparent 1px 24px);
}
.sheet__stamp {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-7));
  display: block;
  writing-mode: vertical-rl;
  padding: var(--sp-7) 0 0 var(--sp-6);
  font: var(--fw-medium) var(--fs-3xs) / 1 var(--font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.sheet__body { min-width: 0; padding-left: var(--sp-8); }
/* Hiding the rail removes it as a grid item, so the body would otherwise fall
   into the (zero-width) rail column and collapse. Drop to one column with it. */
@media (max-width: 899px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet__rail { display: none; }
  .sheet__body { padding-left: 0; }
}

/* Any hairline that should cross the rail instead of stopping at the body. */
.bleed {
  margin-left: calc((var(--rail) + var(--sp-8)) * -1);
  padding-left: calc(var(--rail) + var(--sp-8));
}
@media (max-width: 899px) { .bleed { margin-left: 0; padding-left: 0; } }
/* Late-declared components may reset padding-inline; re-assert the compensation. */
.bleed.bleed { padding-left: calc(var(--rail) + var(--sp-8)); }
@media (max-width: 899px) { .bleed.bleed { padding-left: 0; } }

/* ---------- 2. Corner registration ticks ----------
   Replaces the rounded-card look on the two objects that matter. */
.framed { position: relative; }
.framed::before, .framed::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border: 0 solid var(--c-border-strong);
  pointer-events: none;
}
.framed::before { top: -4px; left: -4px; border-width: var(--bw) 0 0 var(--bw); }
.framed::after { bottom: -4px; right: -4px; border-width: 0 var(--bw) var(--bw) 0; }

/* ---------- 3. Nav readout: the bar is an instrument, not a menu ---------- */
.site-nav__readout {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
  font: var(--fw-regular) var(--fs-2xs) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-feat);
  color: var(--c-muted);
  letter-spacing: 0.04em;
}
.site-nav__readout b { font-weight: var(--fw-medium); color: var(--c-text-dim); }
.site-nav__readout i { width: 1px; height: 10px; background: var(--c-border); }
.site-nav__links { margin-left: var(--sp-6); }
@media (max-width: 799px) { .site-nav__readout { display: none; } .site-nav__links { margin-left: auto; } }

/* ---------- 4. Spec bar: the numbers that used to be a bullet list ---------- */
.spec-bar {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-8);
  border-top: var(--bw) solid var(--c-border);
  border-bottom: var(--bw) solid var(--c-border);
}
.spec-bar__cell {
  flex: 1 1 118px;
  min-width: 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: var(--bw) solid var(--c-border-faint);
}
.spec-bar__cell:first-child { border-left: 0; padding-left: 0; }
.spec-bar__k {
  display: block;
  margin-bottom: var(--sp-4);
  font: var(--fw-medium) var(--fs-3xs) / 1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.spec-bar__v {
  font: var(--fw-medium) var(--fs-lg) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--num-feat);
  color: var(--c-text);
  white-space: nowrap;
}
.spec-bar__v small { margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- 5. Ladder — bulky vs lean ----------
   Both columns run the same 8 fixed-height slots, so the six vacant slots in
   the lean column ARE the argument. Nothing else has to say it. */
.ladder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--bw) solid var(--c-border);
}
@media (min-width: 780px) { .ladder { grid-template-columns: 1fr 1fr; } }
.track { min-width: 0; padding: var(--sp-6) var(--sp-7) var(--sp-6) 0; }
@media (min-width: 780px) {
  .track + .track { border-left: var(--bw) solid var(--c-border); padding-left: var(--sp-7); }
}
.track__head { display: flex; align-items: baseline; gap: var(--sp-5); padding-bottom: var(--sp-5); }
.track__title { margin: 0; font: var(--fw-medium) var(--fs-md) / 1 var(--font-mono); color: var(--c-muted); }
.track--lean .track__title { color: var(--c-text); }
.track__count {
  margin-left: auto;
  font: var(--fw-medium) var(--fs-2xl) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-faint);   /* 24px counts as large text: the 3:1 bar applies */
}
.track--lean .track__count { color: var(--c-accent); }
.track__count small {
  margin-left: var(--sp-3);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}
.slots { list-style: none; margin: 0; padding: 0; counter-reset: slot; }
.slots li {
  counter-increment: slot;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  margin: 0;
  min-height: 46px;
  padding: var(--sp-4) 0;
  border-top: var(--bw) solid var(--c-border-faint);
  font: var(--fw-regular) var(--fs-sm) / 1.35 var(--font-mono);
  color: var(--c-muted);
}
.slots li::before {
  content: counter(slot, decimal-leading-zero);
  font-size: var(--fs-2xs);
  color: var(--c-muted);
}
.track--lean .slots li { color: var(--c-text); }
.track--lean .slots li::before { color: var(--c-accent); }
/* A vacant slot: the counter goes away, a single dash stays. */
.slots li.is-vacant::before { content: "··"; color: var(--c-border-strong); }
.slots li.is-vacant::after { content: "—"; color: var(--c-border-strong); }
.track__note {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: var(--bw) solid var(--c-border-faint);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  max-width: 44ch;
}
.track--lean .track__note { color: var(--c-text-dim); }

/* ---------- 6. Endpoint rows — replaces the three-card API grid ---------- */
.rows { border-top: var(--bw) solid var(--c-border); }
.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-6);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: var(--bw) solid var(--c-border-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.row__verb { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--c-muted); }
.row__path { color: var(--c-text); overflow-wrap: anywhere; }
.row__note { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--c-muted); max-width: 54ch; }
@media (max-width: 719px) { .row { grid-template-columns: 3.5rem minmax(0, 1fr); } .row__note { grid-column: 2; } }

/* ---------- 7. Page head — device / explore / docs share this ---------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-6) var(--sp-7);
  padding-block: var(--sp-8) var(--sp-6);
  padding-inline: 0;
  margin-bottom: var(--sp-7);
  border-bottom: var(--bw) solid var(--c-border);
}
.page-head h1 {
  margin: 0;
  font: var(--fw-medium) clamp(1.75rem, 3.4vw, 2.375rem) / 1 var(--font-mono);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-5);
  font: var(--fw-regular) var(--fs-xs) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}
.page-head__meta i { width: 1px; height: 10px; background: var(--c-border-strong); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-left: auto; }
.page-head__count {
  margin-left: auto;
  font: var(--fw-medium) var(--fs-2xl) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.page-head__count small {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
@media (max-width: 719px) {
  .page-head__actions { margin-left: 0; width: 100%; }
  .page-head__actions .span-select { width: 100%; }
}