/* ===================================================================
   FIELD GUIDE — REFERENCE PAGE CHROME (renamed from sandbox.css; scope
   unchanged). Layout, labels, dividers, and demo-only styling
   (permutation cards, swatch grids, etc.) for these reference pages
   only — design-system.html, colors.html, spacing.html, component-sandbox.html.
   No longer includes the masthead: all four pages now mount the real
   Masthead component (components/masthead.css) instead of shipping
   hand-copied masthead markup styled from here.

   Not part of the portable design system: components/*.css must never
   depend on anything in this file, only on tokens.css. That boundary is
   the whole point of components/ existing as a separate directory — see
   tag-source.css's file header for a case where that boundary had
   already been quietly crossed (a component style duplicated in here)
   before being fixed.
   =================================================================== */

* { box-sizing: border-box; }

/* Reserves the vertical scrollbar's width on every page, whether or not
   that page is actually tall enough to scroll — without this, a short
   page (no scrollbar) renders a few px wider than a tall one (real
   scrollbar) at the same window size, and .masthead-inner's auto-margin
   centering (below) computes against that different width, so the
   masthead visibly shifts a few px left/right when navigating between
   short and tall pages. html, not body: the viewport scrollbar belongs
   to the root element (neither has an explicit `overflow` set here, so
   html is the one actually forming the scrolling box). */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-ui);
  padding-bottom: var(--space-10);
}

.sandbox-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) 0;
}

.sandbox-nav {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.sandbox-nav a {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  font-weight: var(--w-medium);
  color: var(--color-muted);
  text-decoration: none;
  padding-bottom: var(--space-1);
  border-bottom: var(--border-width-active) solid transparent;
}

.sandbox-nav a:hover {
  color: var(--color-ink);
}

.sandbox-nav a.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-brand);
}

/* Masthead + theme-toggle styling (.masthead, .masthead-wordmark,
   .theme-toggle, etc.) lives only in the canonical components/masthead.css
   now — all four real pages mount the Masthead component instead of
   shipping this markup by hand, so the copy that used to live here is
   gone, not just moved. This file is page-chrome only; components must
   not depend on it (see this file's own file-header note). */

.sandbox-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.sandbox-header .text-overline {
  color: var(--color-faint);
  display: block;
  margin-bottom: var(--space-2);
}

.sandbox-note {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  color: var(--color-muted);
  margin-top: var(--space-3);
}

.scale-section {
  margin-bottom: var(--space-9);
}

.scale-section > .text-overline {
  color: var(--color-faint);
  display: block;
  margin-bottom: var(--space-5);
}

.type-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.type-row:last-child {
  border-bottom: none;
}

.type-row-sample {
  flex: 1;
  min-width: 0;
}

.type-row-sample p,
.type-row-sample h1,
.type-row-sample h2,
.type-row-sample h3,
.type-row-sample h4 {
  margin: 0;
}

.type-row-spec {
  flex-shrink: 0;
  width: 200px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-faint);
  line-height: 1.6;
  text-align: right;
}

.type-row-spec code {
  display: block;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.data-card-demo {
  display: flex;
  gap: var(--space-7);
  padding: var(--space-6);
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-card);
  margin-top: var(--space-2);
}

.data-card-demo .cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ===================================================================
   COLOR SYSTEM PAGE — swatches, source tags, Tag-confidence mount
   points, permutation-state demo cards. Sandbox-only presentation; the
   tokens themselves live in tokens.css.
   =================================================================== */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.swatch-fill {
  height: 64px;
  border-radius: var(--radius-card);
  border: var(--border-width-hairline) solid var(--color-hairline);
}

.swatch-labels {
  display: flex;
  flex-direction: column;
  /* Original 0.2rem (3.2px) rounded to --space-1 (4px) — nearest
     neighbor, negligible visually. */
  gap: var(--space-1);
}

.swatch-name {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  font-weight: var(--w-medium);
  color: var(--color-ink);
}

.swatch-hex {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--color-faint);
}

/* .swatch-hex-value is styled identically to .swatch-hex (same class is
   applied to both) — it's distinguished only by [data-token], which
   theme.js reads via getComputedStyle to write in the live resolved hex.
   Nothing here is hand-typed. */

/* Source-identity shape+label styling (.tag-source / .tag-source-shape,
   used by colors.html's Data Provenance demo below) now lives in the
   canonical components/tag-source.css, linked by every page that needs
   it — not here. This file is page-chrome only; components must not
   depend on it (see this file's own file-header note). */

/* Status pills (.status-pill) retired — fully replaced by the canonical
   Tag-confidence component (components/tag-confidence.css), mounted via
   the shared loader on every page that used to hand-author this markup,
   including this one. See NAMING.md and the Part 4 migration report. */

.accessibility-note {
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-sunken);
  margin-top: var(--space-4);
}

.accessibility-note p {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.accessibility-note p:last-child { margin-bottom: 0; }

/* ===================================================================
   LAYOUT & SPACING PAGE — token tables and root font-size preview.
   Sandbox-only presentation; the tokens themselves live in tokens.css.
   =================================================================== */

.space-table {
  border-top: var(--border-width-hairline) solid var(--color-hairline);
}

.space-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.space-row-name {
  flex: 0 0 7rem;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink);
  font-weight: var(--w-medium);
}

.space-row-rem,
.space-row-px {
  flex: 0 0 4.375rem;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--ui-body-sm-size);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.space-row-px {
  color: var(--color-ink);
  font-weight: var(--w-medium);
}

.space-row-bar {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.space-row-bar-fill {
  height: 8px;
  background: var(--color-ink-secondary);
  border-radius: 2px;
}

.usage-table {
  border-top: var(--border-width-hairline) solid var(--color-hairline);
}

.usage-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.usage-row-name {
  flex: 0 0 11.875rem;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink);
  font-weight: var(--w-medium);
}

.usage-row-value {
  flex: 0 0 4.375rem;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}

.usage-row-desc {
  flex: 1;
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink-secondary);
  line-height: 1.5;
}

/* Methodology tables — same hairline-divided-rows convention as
   .usage-table/.usage-row, just two columns instead of three (no
   description column needed). The header row reuses the .text-overline
   treatment (uppercase, tracked, faint) already used for column-label-
   type text elsewhere in this file, rather than inventing a new
   pattern. */
.methodology-table {
  border-top: var(--border-width-hairline) solid var(--color-hairline);
  margin-bottom: var(--space-5);
}

.methodology-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
}

.methodology-row.is-header {
  color: var(--color-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-ui);
  font-size: var(--ui-overline-size);
  font-weight: var(--w-semibold);
}

.methodology-row-name {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink);
  font-weight: var(--w-medium);
}

.methodology-row-value {
  flex: 0 0 auto;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}

.methodology-formula {
  display: block;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-card);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--ui-body-sm-size);
  color: var(--color-ink);
}

.root-fontsize-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-sunken);
  margin-bottom: var(--space-6);
}

.root-fontsize-control-label {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  font-weight: var(--w-medium);
  color: var(--color-ink);
  flex-shrink: 0;
}

.root-fontsize-buttons {
  display: inline-flex;
  gap: var(--space-1);
}

.root-fontsize-buttons button {
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  font-weight: var(--w-medium);
  color: var(--color-ink-secondary);
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-tag);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  line-height: 1.2;
}

.root-fontsize-buttons button:hover {
  border-color: var(--color-ink-secondary);
  color: var(--color-ink);
}

.root-fontsize-buttons button.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-surface);
}

.root-fontsize-control-note {
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  color: var(--color-muted);
  flex-basis: 100%;
}

/* ===================================================================
   SANDBOX FOOTER — low-key cross-link between the reference kit pages
   (Type Scale / Color System / Layout & Spacing) and the scratch
   Component Sandbox. Deliberately quieter than .sandbox-nav — this is
   a secondary path, not a peer of the main section tabs.
   =================================================================== */

.sandbox-footer {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: var(--border-width-hairline) solid var(--color-hairline);
}

.sandbox-footer a {
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  color: var(--color-faint);
  text-decoration: none;
}

.sandbox-footer a:hover {
  color: var(--color-muted);
}

/* ===================================================================
   COMPONENT SANDBOX — workbench container, component-sandbox.html only.
   The dashed placeholder box only applies while :empty, so it steps
   aside the moment real component markup lands inside and doesn't need
   to be manually stripped out later. No component-specific styling
   belongs in this block.
   =================================================================== */

.sandbox-workbench:empty {
  min-height: 240px;
  border: var(--border-width-hairline) dashed var(--color-hairline);
  border-radius: var(--radius-card);
}

.component-standalone-demo {
  margin-bottom: var(--space-6);
}

.component-standalone-demo .text-overline {
  display: block;
  color: var(--color-faint);
  margin-bottom: var(--space-3);
}

@media (max-width: 600px) {
  .type-row {
    flex-direction: column;
    gap: var(--space-2);
  }
  .type-row-spec {
    width: auto;
    text-align: left;
  }
  .space-row {
    flex-wrap: wrap;
  }
  .space-row-bar {
    flex-basis: 100%;
  }
  .usage-row {
    flex-wrap: wrap;
  }
  .usage-row-desc {
    flex-basis: 100%;
  }
}