/* ===========================================================================
 * The token styleguide page.
 *
 * Development-facing scaffolding, not product UI, but it obeys the same rules:
 * tokens only, no raw values, no native controls.
 * =========================================================================== */

.sg__header {
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--divider);
  margin-bottom: var(--space-8);
}

.sg__header p {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
}

.sg__section {
  margin-bottom: var(--space-16);
}

.sg__section > h2 {
  margin-bottom: var(--space-3);
}

.sg__note {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  margin-bottom: var(--space-4);
  max-width: var(--panel-width);
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-caption-size);
  color: var(--text-gold);
  /* File paths and rgba() strings are single unbreakable tokens far wider than
     the 393px player column. Without this they overflow the page. Breaking them
     is correct; clipping the container around them only hides the damage. */
  overflow-wrap: anywhere;
}

/* --- The wash proof ----------------------------------------------------- */
.sg__washproof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  /* Wraps in the 393px player column, where three items in a row do not fit.
     The card still spans the full column, which is what the drift proof needs. */
  flex-wrap: wrap;
}

.sg__washproof-probe {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sg__washproof-label {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.sg__stack .surface--nested {
  margin-top: var(--space-4);
}

.sg__pill {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-secondary);
}

/* --- Swatch grids ------------------------------------------------------- */
.sg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-column), 1fr));
  gap: var(--space-4);
}

.sg__swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}

.sg__swatch-chip {
  height: var(--space-16);
  border-radius: var(--radius-sm);
}

.sg__radius-chip {
  height: var(--space-16);
  background: var(--surface-2);
  border: var(--border-width) solid var(--gold-500);
}

.sg__token {
  font-weight: var(--font-weight-semibold);
}

.sg__resolved {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-secondary);
  word-break: break-all;
}

.sg__resolved--broken {
  color: var(--gold-100);
  font-weight: var(--font-weight-semibold);
}

.sg__swatch small {
  color: var(--text-tertiary);
}

.sg__text-sample {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  font-weight: var(--font-weight-semibold);
}

.sg__on-gold {
  background: var(--gradient-gold);
  color: var(--text-on-gold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  text-align: center;
}

/* --- Type scale --------------------------------------------------------- */
.sg__type,
.sg__spacing,
.sg__absences {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg__type li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--divider);
}

.sg__type-sample {
  /* min-width: 0 is the load-bearing part. A flex item's default
     min-width:auto refuses to shrink below its content, so a long sample
     widened the whole page in the 393px player column. Percentage min-widths
     do not fix this — they resolve against a container this item is itself
     widening. flex-basis 100% gives it its own row. */
  flex: 1 1 100%;
  min-width: 0;
  color: var(--text-primary);
}

.sg__type--display { font-size: var(--type-display-size); line-height: var(--type-display-leading); font-weight: var(--font-weight-semibold); }
.sg__type--h2      { font-size: var(--type-h2-size);      line-height: var(--type-h2-leading);      font-weight: var(--font-weight-semibold); }
.sg__type--h3      { font-size: var(--type-h3-size);      line-height: var(--type-h3-leading);      font-weight: var(--font-weight-semibold); }
.sg__type--body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-leading); }
.sg__type--body    { font-size: var(--type-body-size);    line-height: var(--type-body-leading); }
.sg__type--caption { font-size: var(--type-caption-size); line-height: var(--type-caption-leading); }

/* --- Spacing ------------------------------------------------------------ */
.sg__spacing li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.sg__spacing-bar {
  display: block;
  height: var(--space-4);
  background: var(--gradient-gold);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}

/* --- Focus -------------------------------------------------------------- */
.sg__focus-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sg__btn {
  height: var(--button-height);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.sg__btn--gold {
  background: var(--gradient-gold);
  color: var(--text-on-gold);
  border: none;
}

.sg__btn--outline {
  background: var(--surface-input);
  color: var(--text-gold);
  border: var(--border-width) solid var(--gold-500);
}

/* --- Absences ----------------------------------------------------------- */
.sg__absences li {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--divider);
  color: var(--text-secondary);
  max-width: var(--panel-width);
}

.sg {
  max-width: 100%;
}

/* ===========================================================================
 * The component catalogue (/styleguide).
 *
 * Chrome for the catalogue page itself. Deliberately quiet — a demo surface
 * that competes with the components on it is useless for judging them.
 * ======================================================================== */

.sg__eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-gold);
}

.sg__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.sg__toggle-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.sg__toggle-label {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sg__toggle {
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-secondary);
  text-decoration: none;
}

.sg__toggle:hover { border-color: var(--gold-rest); color: var(--text-gold); text-decoration: none; }
.sg__toggle.is-active { border-color: var(--gold-100); color: var(--gold-100); background: var(--gold-wash-hover); }

.sg__section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--divider);
}

.sg__section-head h2 { margin: 0; }

.sg__section-body { display: flex; flex-direction: column; gap: var(--space-6); }

/* A demo block is one labelled row of specimens. The label is monospaced so it
   reads as annotation rather than as product copy sitting in the demo. */
.sg__demo-block { display: flex; flex-direction: column; gap: var(--space-3); }

.sg__demo-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-placeholder);
}

.sg__demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.sg__demo-col { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--panel-width); }

/* A demo at the player column's width, for a component whose behaviour IS
   that width — the cabinet strip's peeking card only exists at 393. */
.sg__demo-phone { max-width: var(--shell-player-width); min-width: 0; }

.sg__demo-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Some specimens have to be seen against the page, not inside a card — the
   overlay layer in particular, whose whole recipe is about what is behind it. */
.sg__stage {
  position: relative;
  min-height: var(--space-16);
  padding: var(--space-5);
  border: var(--border-width) dashed var(--border-empty);
  border-radius: var(--radius-md);
}

/* Room above a trigger whose panel opens upward (FB03, placement: :above). */
.sg__stage--tall { padding-top: calc(var(--space-16) * 2); }

.sg__note--warn {
  color: var(--gold-100);
  border-left: var(--rule-width) solid var(--gold-100);
  padding-left: var(--space-3);
}

/* A stand-in for the admin top bar, so NV07 is catalogued in the geometry it
   ships in. The component is positioned BY the bar — its current-tab underline
   overlaps the bar's own rule — so shown floating on the catalogue background
   it reads as a detached row of links and the indicator looks misaligned. */
.sg__topbar-stub {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--divider);
  background: var(--surface-header);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sg__topbar-stub--narrow { max-width: var(--shell-player-width); }

/* FB03's open panel, drawn in the flow of the page rather than floating from
   a trigger, so its states can be reviewed without a click. */
.sg__menu-open {
  position: static;
}

/* A dashed stand-in for the admin frame, so a page-level demo (NV08) shows its
   width against the frame it sits in rather than against the catalogue. */
.sg__frame {
  padding: var(--space-4);
  border: var(--border-width) dashed var(--border-default);
  border-radius: var(--radius-md);
}

/* NV10 — the side nav at its real width, on the rail's own wash (D176). */
.sg__rail-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.sg__rail-stub {
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-3);
  background: var(--surface-sidebar);
  border: var(--border-width) solid var(--divider);
  border-radius: var(--radius-lg);
}