/*
 * The gallery's own chrome: the bar, the layout, the swatches, the audit
 * table. The components are not here — the page imports components.css, the
 * same file a product imports beside its tokens, so the button it shows is
 * the shipped button and not a drawing of one. If a rule here needs a literal
 * colour to look right, the token set is missing a token and the fix belongs
 * in derive.js, not in this file.
 *
 * One specimen is drawn locally, deliberately: the list row. Rows are
 * density, not vocabulary — separator-rows against cards is a real
 * per-product difference (design.md §2) — so there is no shared row to
 * import, and the gallery draws a neutral one to hang the menu specimen on.
 */

:root { color-scheme: light dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ the control bar */

.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px clamp(16px, 4vw, 48px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.bar h1 {
  font-size: 17px; font-weight: 650; letter-spacing: -.02em; margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.bar h1 svg { width: 22px; height: 22px; flex: none; }

.bar .group { display: flex; align-items: center; gap: 7px; }
.bar .group > span { font-size: 12px; color: var(--text-dim); }
.bar .spacer { margin-left: auto; }

/* A product swatch. The ring, not a border colour change, marks the current one
   — a border swap would move the layout by a pixel on every click. */
.hue {
  width: 27px; height: 27px; border-radius: var(--radius-pill);
  border: none; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px transparent;
  transition: box-shadow .12s;
}
.hue[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.hue:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

input[type="color"] {
  width: 27px; height: 27px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: none; overflow: hidden;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--radius-pill); }
input[type="color"]::-moz-color-swatch { border: none; border-radius: var(--radius-pill); }

/* ----------------------------------------------------------------- layout */

main { max-width: 940px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 96px; }

section { margin-top: 56px; }
section > h2 {
  font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); margin: 0 0 6px;
}
/* No measure: the prose shares its right edge with the panel it introduces, so a
   section reads as one block rather than as a paragraph with a column of nothing
   beside it. What bounds the line is main's 940px, not a rule here.

   The previous `max-width: 62ch` was wrong twice over. It bore no relation to the
   panel width, and `ch` is the width of the zero glyph, not of a character: this
   font averages 6.92px against a 8.67px `ch`, so 62ch set 75 characters. If a
   measure ever comes back, it belongs in a unit that means what it says. */
section > .note { color: var(--text-dim); font-size: 14px; margin: 0 0 20px; }

/* The box a specimen sits in. It was called .panel until components.css took
   that name for the folded section — the gallery's own chrome yields to the
   shared vocabulary, which is the direction that has to hold. */
.specimen {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.specimen + .specimen { margin-top: 14px; }
.specimen > h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 14px;
}

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row + .row { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* -------------------------------------------------------------- swatches */

/* auto-fit, not auto-fill: auto-fill keeps the tracks it laid out even when
   nothing lands in them, so the three text swatches sat in five tracks and
   trailed off two-fifths short of the panel edge. auto-fit collapses the empty
   ones and the remaining swatches stretch to the edge.

   The trade is that a short row's swatches come out wider than a full row's —
   260px here against 152px above. Sharing the edge is worth more than matching
   the neighbouring row's tile width; the label and the hex are what is being
   read, and both are left-aligned in the tile either way. */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }

/* `.sample`, not `.chip`: the chip is a component now, and the coloured bar in
   a swatch tile is not one. */
.swatch {
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface);
}
.swatch .sample { height: 52px; display: flex; align-items: center; justify-content: center; }
.swatch .sample span { font-size: 12px; font-weight: 600; }
.swatch .meta { padding: 7px 9px; }
.swatch .name { font-size: 12px; font-weight: 600; }
.swatch .val {
  font: 11px/1.4 var(--mono); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- list rows */

.list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface);
}
.item + .item { border-top: 1px solid var(--line); }
.item:hover { background: var(--surface-2); }
.item .txt { flex: 1; min-width: 0; }
.item .txt b { font-weight: 550; font-size: 15px; }
.item .txt small { display: block; color: var(--text-faint); font-size: 12.5px; }
.item .state { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* The panels are the component; the surface they sit on is gallery chrome —
   in a product they line a sheet, and here they need something to line. */
/* Panels line a sheet edge to edge, so this specimen gives them an edge to
   line rather than the usual padded box. */
.panel-demo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.panel-demo > .panel:first-of-type { border-top: none; }
.panel-demo > .panel:last-of-type { border-bottom: none; }

/* ----------------------------------------------------------- audit table */

table.audit { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.audit th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); font-weight: 600; padding: 0 10px 9px 0;
}
table.audit td { padding: 8px 10px 8px 0; border-top: 1px solid var(--line); }
table.audit code { font: 12.5px/1 var(--mono); color: var(--text-dim); }
table.audit .ratio { font-variant-numeric: tabular-nums; font-weight: 600; }
table.audit .verdict { font-size: 12px; font-weight: 600; }
table.audit .pass .verdict { color: var(--ok, var(--text-dim)); }
table.audit .fail .ratio, table.audit .fail .verdict { color: var(--danger); }

/* ------------------------------------------------------------------- CSS */

pre.out {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 16px;
  font: 12.5px/1.65 var(--mono); overflow-x: auto; margin: 0;
}
pre.out .tok { color: var(--accent-strong); }
pre.out .cm { color: var(--text-faint); }

/* The page footer is the component; only where it sits is gallery chrome. */
footer.footer { margin-top: 72px; border-top: 1px solid var(--line); }