/* Gallery layout and showcase styles. Token-driven, so every theme reskins the gallery too.
   The kit itself lives in ../web/src/sds.css; nothing here restyles a .sds-* component except
   to place it. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sds-touch-target) + var(--sds-space-8));
  background: var(--sds-color-bg);
}

:root[data-sds-motion="reduce"] {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--sds-color-accent) 12%, transparent), transparent 70%),
    radial-gradient(900px 500px at -10% 30%, color-mix(in srgb, var(--sds-color-info) 7%, transparent), transparent 70%),
    var(--sds-color-bg);
  background-attachment: fixed;
  color: var(--sds-color-text);
  font-family: var(--sds-font-body);
  font-size: var(--sds-type-body-size);
  line-height: var(--sds-type-body-line-height);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--sds-motion-slow) var(--sds-ease-standard), color var(--sds-motion-slow) var(--sds-ease-standard);
}

code,
kbd:not(.sds-keycap) {
  font-family: var(--sds-font-mono);
  font-size: 0.85em;
}

code {
  padding: 0.1em 0.35em;
  border-radius: var(--sds-radius-sm);
  background: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
  color: var(--sds-color-text);
}

p {
  margin: 0;
}

a:not([class*="sds-"]) {
  color: var(--sds-color-accent);
}

a:not([class*="sds-"]):focus-visible {
  outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
  outline-offset: var(--sds-focus-ring-offset);
  border-radius: var(--sds-radius-sm);
}

.g-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.g-probe {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------ top bar */

.g-top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sds-space-4) var(--sds-space-6);
  padding: var(--sds-space-4) var(--sds-space-6);
  border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
  background: color-mix(in srgb, var(--sds-color-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

.g-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sds-space-4);
  color: var(--sds-color-text);
  text-decoration: none;
}

.g-brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--sds-color-accent), var(--sds-color-info), var(--sds-color-success), var(--sds-color-accent));
  box-shadow: var(--sds-glow-sm);
}

.g-brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--sds-color-bg);
}

.g-brand-text {
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-heading-size);
  font-weight: var(--sds-type-heading-weight);
  letter-spacing: var(--sds-type-heading-tracking);
  line-height: 1;
}

.g-brand-sub {
  color: var(--sds-color-text-muted);
  font-weight: var(--sds-type-body-weight);
}

.g-top-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-4) var(--sds-space-6);
}

.g-theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sds-space-2);
}

.g-inline-control {
  display: inline-flex;
  align-items: center;
  gap: var(--sds-space-4);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-label-size);
  font-weight: var(--sds-type-label-weight);
}

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

.g-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sds-space-8);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--sds-space-6);
}

.g-nav {
  position: sticky;
  top: calc(var(--sds-touch-target) + var(--sds-space-7));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--sds-space-1);
  max-height: calc(100vh - var(--sds-touch-target) - var(--sds-space-8));
  overflow-y: auto;
  padding: var(--sds-space-7) 0;
}

.g-nav a {
  padding: var(--sds-space-2) var(--sds-space-4);
  border-radius: var(--sds-radius-sm);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-label-size);
  text-decoration: none;
  transition: color var(--sds-motion-fast) var(--sds-ease-standard), background-color var(--sds-motion-fast) var(--sds-ease-standard);
}

.g-nav a:hover {
  background: color-mix(in srgb, var(--sds-color-text) 6%, transparent);
  color: var(--sds-color-text);
}

.g-nav-label {
  margin-top: var(--sds-space-5);
  padding: 0 var(--sds-space-4);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
  font-weight: var(--sds-type-label-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.g-nav-label:first-child {
  margin-top: 0;
}

.g-status {
  display: grid;
  gap: var(--sds-space-2);
  margin-top: var(--sds-space-6);
  padding: var(--sds-space-4);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-md);
  background: var(--sds-color-surface);
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

.g-status p {
  display: flex;
  align-items: center;
  gap: var(--sds-space-3);
}

.g-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sds-color-line-strong);
}

.g-dot[data-ok="true"] {
  background: var(--sds-color-success);
  box-shadow: 0 0 8px var(--sds-color-success);
}

.g-dot[data-ok="false"] {
  background: var(--sds-color-warning);
}

.g-main {
  min-width: 0;
  padding: var(--sds-space-7) 0 var(--sds-space-8);
}

/* --------------------------------------------------------------- hero */

.g-hero {
  padding: var(--sds-space-8) 0 var(--sds-space-7);
}

.g-eyebrow {
  color: var(--sds-color-accent);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.g-hero-title {
  margin: var(--sds-space-4) 0 var(--sds-space-5);
  font-family: var(--sds-font-display);
  font-size: clamp(var(--sds-type-title-size), 6vw, calc(var(--sds-type-display-size) * 1.5));
  font-weight: var(--sds-type-display-weight);
  line-height: var(--sds-type-display-line-height);
  letter-spacing: var(--sds-type-display-tracking);
  background: linear-gradient(100deg, var(--sds-color-text) 20%, var(--sds-color-accent) 60%, var(--sds-color-info));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.g-lede {
  max-width: 62ch;
  color: var(--sds-color-text-muted);
  font-size: calc(var(--sds-type-body-size) * 1.125);
}

.g-hero-theme {
  margin-top: var(--sds-space-5);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
}

/* ----------------------------------------------------------- sections */

.g-section {
  padding: var(--sds-space-8) 0 var(--sds-space-6);
  border-top: var(--sds-border-thin) solid var(--sds-color-line);
}

.g-section-head {
  margin-bottom: var(--sds-space-6);
}

.g-section-head h2 {
  margin: 0 0 var(--sds-space-3);
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-title-size);
  font-weight: var(--sds-type-title-weight);
  line-height: var(--sds-type-title-line-height);
  letter-spacing: var(--sds-type-title-tracking);
}

.g-section-head p {
  max-width: 70ch;
  color: var(--sds-color-text-muted);
}

.g-sub {
  margin: var(--sds-space-6) 0 var(--sds-space-4);
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-heading-size);
  font-weight: var(--sds-type-heading-weight);
  line-height: var(--sds-type-heading-line-height);
}

.g-card > .g-sub:first-child {
  margin-top: 0;
}

.g-note,
.g-muted {
  color: var(--sds-color-text-muted);
}

.g-note {
  margin-bottom: var(--sds-space-4);
}

.g-card {
  padding: var(--sds-space-6);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-lg);
  background: color-mix(in srgb, var(--sds-color-surface) 88%, transparent);
}

.g-stack {
  display: grid;
  gap: var(--sds-space-5);
}

.g-stack + .g-stack {
  margin-top: var(--sds-space-5);
}

.g-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sds-space-5);
}

.g-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-4);
  margin-top: var(--sds-space-4);
}

.g-card.g-row {
  margin-top: 0;
}

.g-row-label {
  min-width: 5ch;
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

.g-num {
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.g-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--sds-radius-pill);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
  font-weight: var(--sds-type-label-weight);
  white-space: nowrap;
}

.g-badge[data-pass="yes"] {
  background: color-mix(in srgb, var(--sds-color-success) 18%, transparent);
  color: var(--sds-color-success);
}

.g-badge[data-pass="no"] {
  background: color-mix(in srgb, var(--sds-color-danger) 18%, transparent);
  color: var(--sds-color-danger);
}

.g-badge[data-pass="info"] {
  background: color-mix(in srgb, var(--sds-color-text) 8%, transparent);
  color: var(--sds-color-text-muted);
}

.g-table-wrap {
  overflow-x: auto;
}

/* --------------------------------------------------------------- color */

.g-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sds-space-5);
}

.g-swatch {
  margin: 0;
  overflow: hidden;
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-lg);
  background: var(--sds-color-surface);
}

.g-swatch-chip {
  display: flex;
  align-items: flex-end;
  height: 96px;
  padding: var(--sds-space-4);
  border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
}

.g-swatch-aa {
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-heading-size);
  font-weight: var(--sds-type-heading-weight);
}

.g-swatch figcaption {
  display: grid;
  gap: var(--sds-space-2);
  padding: var(--sds-space-4);
}

.g-swatch strong {
  font-size: var(--sds-type-label-size);
}

.g-swatch code {
  justify-self: start;
  font-size: var(--sds-type-caption-size);
}

.g-swatch-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sds-space-3);
}

.g-swatch-hex {
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

/* Role backgrounds for probes, chips and pair samples. */
[data-role="bg"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-bg); }
[data-role="surface"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-surface); }
[data-role="surface-raised"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-surface-raised); }
[data-role="overlay"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-overlay); }
[data-role="text"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-text); }
[data-role="text-muted"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-text-muted); }
[data-role="text-inverse"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-text-inverse); }
[data-role="accent"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-accent); }
[data-role="accent-strong"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-accent-strong); }
[data-role="on-accent"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-on-accent); }
[data-role="success"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-success); }
[data-role="warning"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-warning); }
[data-role="danger"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-danger); }
[data-role="info"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-info); }
[data-role="focus"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-focus); }
[data-role="line"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-line); }
[data-role="line-strong"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-line-strong); }
[data-role="disabled"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-disabled); }
[data-role="on-disabled"]:is(.g-probe, .g-swatch-chip) { background-color: var(--sds-color-on-disabled); }

/* The "Aa" on each chip uses the role's natural partner. */
.g-swatch-aa { color: var(--sds-color-text); }
.g-swatch-aa:is([data-role="text"], [data-role="text-muted"], [data-role="focus"], [data-role="success"], [data-role="warning"], [data-role="danger"], [data-role="info"], [data-role="line-strong"], [data-role="on-disabled"]) { color: var(--sds-color-bg); }
.g-swatch-aa:is([data-role="accent"], [data-role="accent-strong"]) { color: var(--sds-color-on-accent); }
.g-swatch-aa[data-role="on-accent"] { color: var(--sds-color-accent); }
.g-swatch-aa[data-role="text-inverse"] { color: var(--sds-color-text); }
.g-swatch-aa[data-role="disabled"] { color: var(--sds-color-on-disabled); }

.g-pairs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sds-type-label-size);
}

.g-pairs th,
.g-pairs td {
  padding: var(--sds-space-3) var(--sds-space-4);
  border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
  text-align: left;
}

.g-pairs th {
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
  font-weight: var(--sds-type-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.g-pair-sample {
  display: inline-block;
  padding: var(--sds-space-2) var(--sds-space-4);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-sm);
  font-weight: var(--sds-type-label-weight);
}

.g-pair-sample[data-bg="bg"] { background: var(--sds-color-bg); }
.g-pair-sample[data-bg="surface"] { background: var(--sds-color-surface); }
.g-pair-sample[data-bg="surface-raised"] { background: var(--sds-color-surface-raised); }
.g-pair-sample[data-bg="accent"] { background: var(--sds-color-accent); }
.g-pair-sample[data-bg="accent-strong"] { background: var(--sds-color-accent-strong); }
.g-pair-sample[data-bg="text"] { background: var(--sds-color-text); }
.g-pair-sample[data-bg="disabled"] { background: var(--sds-color-disabled); }
.g-pair-sample[data-fg="text"] { color: var(--sds-color-text); }
.g-pair-sample[data-fg="text-muted"] { color: var(--sds-color-text-muted); }
.g-pair-sample[data-fg="on-accent"] { color: var(--sds-color-on-accent); }
.g-pair-sample[data-fg="text-inverse"] { color: var(--sds-color-text-inverse); }
.g-pair-sample[data-fg="on-disabled"] { color: var(--sds-color-on-disabled); }
.g-pair-sample[data-fg="focus"] { color: var(--sds-color-focus); }
.g-pair-sample[data-fg="line-strong"] { color: var(--sds-color-line-strong); }
.g-pair-sample[data-fg="success"] { color: var(--sds-color-success); }
.g-pair-sample[data-fg="warning"] { color: var(--sds-color-warning); }
.g-pair-sample[data-fg="danger"] { color: var(--sds-color-danger); }
.g-pair-sample[data-fg="info"] { color: var(--sds-color-info); }

/* ---------------------------------------------------------------- type */

.g-type {
  display: grid;
  gap: 0;
  padding-top: var(--sds-space-3);
  padding-bottom: var(--sds-space-3);
}

.g-type-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sds-space-6);
  padding: var(--sds-space-5) 0;
  border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
}

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

.g-type-meta {
  display: grid;
  gap: var(--sds-space-2);
}

.g-type-meta code {
  justify-self: start;
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
}

.g-type-sample {
  overflow-wrap: anywhere;
}

.g-type-sample[data-role="display"] { font-family: var(--sds-font-display); font-size: var(--sds-type-display-size); font-weight: var(--sds-type-display-weight); line-height: var(--sds-type-display-line-height); letter-spacing: var(--sds-type-display-tracking); }
.g-type-sample[data-role="title"] { font-family: var(--sds-font-display); font-size: var(--sds-type-title-size); font-weight: var(--sds-type-title-weight); line-height: var(--sds-type-title-line-height); letter-spacing: var(--sds-type-title-tracking); }
.g-type-sample[data-role="heading"] { font-family: var(--sds-font-display); font-size: var(--sds-type-heading-size); font-weight: var(--sds-type-heading-weight); line-height: var(--sds-type-heading-line-height); letter-spacing: var(--sds-type-heading-tracking); }
.g-type-sample[data-role="body"] { font-size: var(--sds-type-body-size); font-weight: var(--sds-type-body-weight); line-height: var(--sds-type-body-line-height); letter-spacing: var(--sds-type-body-tracking); max-width: 60ch; }
.g-type-sample[data-role="label"] { font-size: var(--sds-type-label-size); font-weight: var(--sds-type-label-weight); line-height: var(--sds-type-label-line-height); letter-spacing: var(--sds-type-label-tracking); }
.g-type-sample[data-role="caption"] { font-size: var(--sds-type-caption-size); font-weight: var(--sds-type-caption-weight); line-height: var(--sds-type-caption-line-height); letter-spacing: var(--sds-type-caption-tracking); color: var(--sds-color-text-muted); }

/* ------------------------------------------------------- space, radius */

.g-space-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 50px;
  align-items: center;
  gap: var(--sds-space-4);
  padding: var(--sds-space-2) 0;
}

.g-space-row code {
  justify-self: start;
  font-size: var(--sds-type-caption-size);
}

.g-space-bar {
  height: 14px;
  min-width: 1px;
  border-radius: var(--sds-radius-sm);
  background: linear-gradient(90deg, var(--sds-color-accent), var(--sds-color-info));
}

.g-space-bar[data-step="0"] { width: var(--sds-space-0); }
.g-space-bar[data-step="1"] { width: var(--sds-space-1); }
.g-space-bar[data-step="2"] { width: var(--sds-space-2); }
.g-space-bar[data-step="3"] { width: var(--sds-space-3); }
.g-space-bar[data-step="4"] { width: var(--sds-space-4); }
.g-space-bar[data-step="5"] { width: var(--sds-space-5); }
.g-space-bar[data-step="6"] { width: var(--sds-space-6); }
.g-space-bar[data-step="7"] { width: var(--sds-space-7); }
.g-space-bar[data-step="8"] { width: var(--sds-space-8); }

.g-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sds-space-5);
}

.g-tile {
  display: grid;
  justify-items: center;
  gap: var(--sds-space-2);
}

.g-tile code {
  font-size: var(--sds-type-caption-size);
}

.g-radius-tile {
  width: 72px;
  height: 72px;
  border: var(--sds-border-thick) solid var(--sds-color-accent);
  background: color-mix(in srgb, var(--sds-color-accent) 14%, transparent);
}

.g-radius-tile[data-radius="none"] { border-radius: var(--sds-radius-none); }
.g-radius-tile[data-radius="sm"] { border-radius: var(--sds-radius-sm); }
.g-radius-tile[data-radius="md"] { border-radius: var(--sds-radius-md); }
.g-radius-tile[data-radius="lg"] { border-radius: var(--sds-radius-lg); }
.g-radius-tile[data-radius="pill"] { width: 112px; border-radius: var(--sds-radius-pill); }

.g-border-tile {
  width: 112px;
  height: 44px;
  border-style: solid;
  border-color: var(--sds-color-line-strong);
  border-radius: var(--sds-radius-md);
}

.g-border-tile[data-border="thin"] { border-width: var(--sds-border-thin); }
.g-border-tile[data-border="thick"] { border-width: var(--sds-border-thick); }

/* ----------------------------------------------------------- elevation */

.g-elevation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sds-space-7);
  padding: var(--sds-space-7);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-lg);
  background: var(--sds-color-bg);
}

.g-elev {
  display: grid;
  align-content: end;
  gap: var(--sds-space-2);
  min-height: 120px;
  padding: var(--sds-space-5);
  border-radius: var(--sds-radius-lg);
  background: var(--sds-color-surface-raised);
}

.g-elev code {
  justify-self: start;
  font-size: var(--sds-type-caption-size);
}

.g-elev[data-elev="shadow-sm"] { box-shadow: var(--sds-shadow-sm); }
.g-elev[data-elev="shadow-md"] { box-shadow: var(--sds-shadow-md); }
.g-elev[data-elev="shadow-lg"] { box-shadow: var(--sds-shadow-lg); }
.g-elev[data-elev="glow-sm"] { box-shadow: var(--sds-glow-sm); }
.g-elev[data-elev="glow-md"] { box-shadow: var(--sds-glow-md); }
.g-elev[data-elev="glow-lg"] { box-shadow: var(--sds-glow-lg); }

/* -------------------------------------------------------------- motion */

.g-motion {
  display: grid;
  gap: var(--sds-space-4);
  margin-bottom: var(--sds-space-5);
}

.g-motion-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 60px;
  align-items: center;
  gap: var(--sds-space-5);
}

.g-motion-row code {
  justify-self: start;
  font-size: var(--sds-type-caption-size);
}

.g-motion-track {
  position: relative;
  height: 28px;
  border-radius: var(--sds-radius-pill);
  background: color-mix(in srgb, var(--sds-color-text) 6%, transparent);
}

.g-motion-dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sds-color-accent);
  box-shadow: var(--sds-glow-sm);
  transition-property: left;
}

.g-motion[data-run] .g-motion-dot {
  left: calc(100% - 24px);
}

.g-motion-dot[data-duration="fast"] { transition-duration: var(--sds-motion-fast); }
.g-motion-dot[data-duration="base"] { transition-duration: var(--sds-motion-base); }
.g-motion-dot[data-duration="slow"] { transition-duration: var(--sds-motion-slow); }
.g-motion-dot[data-ease="standard"] { transition-timing-function: var(--sds-ease-standard); }
.g-motion-dot[data-ease="emphasis"] { transition-timing-function: var(--sds-ease-emphasis); }
.g-motion-dot[data-ease="exit"] { transition-timing-function: var(--sds-ease-exit); }

/* -------------------------------------------------------- matrices */

.g-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.g-matrix caption {
  padding-bottom: var(--sds-space-5);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-label-size);
  text-align: left;
}

.g-matrix th {
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
  font-weight: var(--sds-type-body-weight);
  text-align: left;
}

.g-matrix thead th {
  padding: 0 var(--sds-space-4) var(--sds-space-4);
}

.g-matrix tbody th {
  padding-right: var(--sds-space-5);
  white-space: nowrap;
}

.g-matrix td {
  padding: var(--sds-space-4);
  vertical-align: middle;
}

.g-matrix td .sds-slider {
  min-width: 120px;
}

.g-state-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-5);
  margin-top: var(--sds-space-6);
  padding-top: var(--sds-space-5);
  border-top: var(--sds-border-thin) solid var(--sds-color-line);
}

.g-state-cell {
  display: grid;
  justify-items: center;
  gap: var(--sds-space-3);
}

.g-state-cell code {
  font-size: var(--sds-type-caption-size);
}

.g-tabpanel {
  margin-top: var(--sds-space-5);
  color: var(--sds-color-text-muted);
}

.g-panel-title {
  margin-bottom: var(--sds-space-3);
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-heading-size);
  font-weight: var(--sds-type-heading-weight);
}

.g-tooltip-row {
  min-height: 96px;
  padding-left: var(--sds-space-8);
  align-items: flex-end;
  gap: var(--sds-space-8);
}

.g-toasts {
  display: grid;
  justify-items: start;
  gap: var(--sds-space-4);
}

.g-meters {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: var(--sds-space-5) var(--sds-space-6);
}

.g-meters label {
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-label-size);
}

/* -------------------------------------------------------------- screens */

.g-screens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--sds-space-6);
}

.g-screen {
  display: grid;
  gap: var(--sds-space-4);
  margin: 0;
  padding: var(--sds-space-7) var(--sds-space-6) var(--sds-space-5);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-lg);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sds-color-accent) 16%, transparent), transparent 55%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--sds-color-text) 3%, transparent) 0 2px, transparent 2px 12px),
    var(--sds-color-bg);
}

.g-screen figcaption {
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
  text-align: center;
}

.g-screen-frame {
  display: grid;
  align-content: start;
  gap: var(--sds-space-5);
  min-height: 380px;
}

.g-screen-head {
  display: flex;
  align-items: center;
  gap: var(--sds-space-3);
  min-height: var(--sds-icon-button-sm-size);
}

.g-screen-title,
.g-dialog-title {
  margin: 0;
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-title-size);
  font-weight: var(--sds-type-title-weight);
  line-height: var(--sds-type-title-line-height);
  letter-spacing: var(--sds-type-title-tracking);
}

.g-screen-menu,
.g-dialog-menu {
  display: grid;
  gap: var(--sds-space-4);
}

.g-dialog-menu {
  margin-top: var(--sds-space-6);
}

.g-dialog-title + .g-muted {
  margin-top: var(--sds-space-4);
}

.g-screen-list {
  display: grid;
  gap: var(--sds-space-1);
}

.g-list-button {
  justify-content: flex-start;
  width: 100%;
}

.g-list-button span {
  flex: 1;
  text-align: left;
}

.g-chevron {
  color: var(--sds-color-text-muted);
}

.g-screen-fields {
  display: grid;
  gap: var(--sds-space-5);
}

.g-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--sds-space-4);
  font-size: var(--sds-type-label-size);
  font-weight: var(--sds-type-label-weight);
}

.g-field .sds-slider {
  grid-column: 1 / -1;
}

.g-field > output {
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

.g-field-inline {
  min-height: var(--sds-touch-target);
}

.g-screen-tabs {
  justify-self: start;
}

.g-bindings {
  display: grid;
  gap: var(--sds-space-2);
  margin: 0;
}

.g-bindings[hidden] {
  display: none;
}

.g-bindings div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sds-space-4);
  padding: var(--sds-space-3) 0;
  border-bottom: var(--sds-border-thin) solid var(--sds-color-line);
}

.g-bindings dt {
  font-size: var(--sds-type-label-size);
  font-weight: var(--sds-type-label-weight);
}

.g-bindings dd {
  display: flex;
  gap: var(--sds-space-2);
  margin: 0;
}

kbd:not(.sds-keycap) {
  display: inline-grid;
  place-items: center;
  min-width: 2.2em;
  padding: var(--sds-space-1) var(--sds-space-3);
  border: var(--sds-border-thin) solid var(--sds-color-line-strong);
  border-bottom-width: var(--sds-border-thick);
  border-radius: var(--sds-radius-sm);
  background: var(--sds-color-surface);
  color: var(--sds-color-text);
}

.g-credits {
  max-height: 260px;
  overflow-y: auto;
  border-radius: var(--sds-radius-md);
  text-align: center;
  mask-image: linear-gradient(transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(transparent, black 12%, black 88%, transparent);
  padding: var(--sds-space-6) 0;
}

.g-credits:focus-visible {
  outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
  outline-offset: var(--sds-focus-ring-offset);
}

.g-credits-studio {
  margin-bottom: var(--sds-space-6);
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-heading-size);
  font-weight: var(--sds-type-heading-weight);
  color: var(--sds-color-accent);
}

.g-credits dl {
  margin: 0;
}

.g-credits dt {
  margin-top: var(--sds-space-5);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.g-credits dd {
  margin: var(--sds-space-1) 0 0;
  font-size: var(--sds-type-body-size);
}

/* --------------------------------------------------------------- icons */

.g-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sds-space-3);
}

.g-icon-tile {
  display: grid;
  justify-items: center;
  gap: var(--sds-space-3);
  margin: 0;
  padding: var(--sds-space-5) var(--sds-space-2) var(--sds-space-4);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-md);
  background: var(--sds-color-surface);
  color: var(--sds-color-text);
  transition: color var(--sds-motion-fast) var(--sds-ease-standard), border-color var(--sds-motion-fast) var(--sds-ease-standard);
}

.g-icon-tile:hover {
  border-color: var(--sds-color-accent);
  color: var(--sds-color-accent);
}

.g-icon-tile .sds-icon {
  width: 28px;
  height: 28px;
}

.g-icon-tile figcaption {
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

.g-icon-tile[data-present="false"] {
  border-style: dashed;
  opacity: 0.55;
}

.g-icon-missing {
  width: 28px;
  height: 28px;
  border: var(--sds-border-thin) dashed var(--sds-color-line-strong);
  border-radius: var(--sds-radius-sm);
}

/* -------------------------------------------------------------- sounds */

.g-sounds {
  display: flex;
  flex-direction: column;
  gap: var(--sds-space-4);
}

.g-sound-toolbar,
.g-sound-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-4);
}

.g-sound-compare {
  padding-top: var(--sds-space-4);
  border-top: var(--sds-border-thin) solid var(--sds-color-line);
}

.g-sound-list {
  display: flex;
  flex-direction: column;
}

.g-sound-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-4);
  padding: var(--sds-space-3) 0;
  border-top: var(--sds-border-thin) solid var(--sds-color-line);
}

.g-sound-row > strong {
  min-width: 8ch;
}

.g-sound-row > span {
  flex: 1 1 16rem;
  color: var(--sds-color-text-muted);
}

.g-sound-facts {
  flex: 1 1 100%;
  margin: 0;
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
}

.g-footer {
  margin-top: var(--sds-space-8);
  padding-top: var(--sds-space-6);
  border-top: var(--sds-border-thin) solid var(--sds-color-line);
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .g-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--sds-space-5);
  }

  .g-nav {
    display: none;
  }

  .g-elevation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .g-type-row,
  .g-meters,
  .g-motion-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sds-space-3);
  }
}

/* ------------------------------------------------------------ v1.1 */

.g-layer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-4) var(--sds-space-6);
}

.g-layer-controls .sds-select {
  min-width: 0;
}

.g-cell {
  display: grid;
  justify-items: start;
  gap: var(--sds-space-2);
}

.g-wide-matrix .g-matrix td {
  min-width: calc(var(--sds-touch-target) * 3);
}

.g-matrix td .sds-text-input {
  min-width: calc(var(--sds-touch-target) * 3.5);
}

.g-matrix td .sds-save-slot-card {
  min-width: calc(var(--sds-touch-target) * 7);
}

.g-matrix td .sds-field-row,
.g-matrix td .g-list-cell,
.g-matrix td .g-disc-cell,
.g-matrix td .sds-link-row {
  min-width: calc(var(--sds-touch-target) * 5);
}

.g-matrix td .sds-resource-bar,
.g-matrix td .sds-progress-bar {
  min-width: calc(var(--sds-touch-target) * 3);
}

.g-rows {
  display: grid;
  gap: var(--sds-space-1);
}

.g-narrow {
  display: grid;
  gap: var(--sds-space-1);
  max-width: calc(var(--sds-touch-target) * 6);
  padding: var(--sds-space-3);
  border: var(--sds-border-thin) dashed var(--sds-color-line-strong);
  border-radius: var(--sds-radius-md);
}

.g-tiles-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-4);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.g-tiles-live > legend {
  width: 100%;
  margin-bottom: var(--sds-space-3);
  padding: 0;
}

.g-scroll-demo {
  display: grid;
  gap: var(--sds-space-4);
  max-height: calc(var(--sds-touch-target) * 3.5);
  padding: var(--sds-space-4);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  color: var(--sds-color-text-muted);
}

.g-progress-live {
  flex: 1 1 calc(var(--sds-touch-target) * 4);
  width: auto;
}

.g-caption-stage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--sds-touch-target) * 5), 1fr));
  gap: var(--sds-space-5);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sds-color-accent) 20%, transparent), transparent 60%),
    var(--sds-color-bg);
}

.g-caption-cell {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: var(--sds-space-3);
  min-height: calc(var(--sds-touch-target) * 2);
}

.g-captions-live {
  flex: 1 1 100%;
  min-height: calc(var(--sds-touch-target) * 1.5);
}

.g-header-demo .sds-screen-header {
  margin: calc(var(--sds-space-6) * -1) calc(var(--sds-space-6) * -1) var(--sds-space-4);
}

.g-auto-caps dd {
  align-items: center;
}

.g-device-pick {
  margin-bottom: var(--sds-space-4);
}

.g-log {
  margin: var(--sds-space-4) 0 0;
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

.g-log-block {
  max-height: calc(var(--sds-touch-target) * 5);
  overflow: auto;
  padding: var(--sds-space-4);
  border-radius: var(--sds-radius-md);
  background: var(--sds-color-bg);
  white-space: pre-wrap;
}

.g-external-log {
  position: fixed;
  right: var(--sds-space-5);
  bottom: var(--sds-space-5);
  z-index: var(--sds-layer-toast);
  max-width: min(var(--sds-dialog-width), calc(100% - 2 * var(--sds-space-5)));
  margin: 0;
  padding: var(--sds-space-3) var(--sds-space-4);
  border: var(--sds-border-thin) solid var(--sds-color-line-strong);
  border-radius: var(--sds-radius-md);
  background: var(--sds-color-surface-raised);
  color: var(--sds-color-text);
  box-shadow: var(--sds-shadow-md);
  opacity: 0;
  transition: opacity var(--sds-motion-base) var(--sds-ease-standard);
  pointer-events: none;
}

.g-external-log[data-shown] {
  opacity: 1;
}

.g-hud-stage {
  display: grid;
  grid-template-rows: auto minmax(calc(var(--sds-touch-target) * 3), 1fr) auto;
  margin-bottom: var(--sds-space-5);
  overflow: hidden;
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-lg);
  background:
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--sds-color-accent) 30%, transparent), transparent 45%),
    radial-gradient(circle at 75% 30%, color-mix(in srgb, var(--sds-color-info) 25%, transparent), transparent 40%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--sds-color-text) 4%, transparent) 0 2px, transparent 2px 16px),
    var(--sds-color-bg);
}

.g-hud-bars {
  display: grid;
  flex: 1;
  gap: var(--sds-space-2);
  max-width: calc(var(--sds-touch-target) * 6);
}

.g-hud-play {
  display: grid;
  place-items: center;
  color: var(--sds-color-text-muted);
  font-family: var(--sds-font-mono);
  font-size: var(--sds-type-caption-size);
}

.g-hud-hint {
  font-size: var(--sds-type-label-size);
  font-weight: var(--sds-type-label-weight);
}

.g-glyph {
  width: 40px;
  height: 40px;
}

.g-brand-icon {
  width: 28px;
  height: 28px;
}

.g-row-tight {
  margin-top: 0;
}

/* screens */

.g-screen-wide {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .g-screen-wide {
    grid-column: auto;
  }
}

.g-screen-frame > .sds-screen-header {
  margin: calc(var(--sds-panel-padding) * -1) calc(var(--sds-panel-padding) * -1) 0;
}

.g-screen-scroll {
  max-height: 340px;
  margin: 0 calc(var(--sds-space-3) * -1);
  padding: 0 var(--sds-space-3);
}

.g-title-screen {
  align-content: center;
  text-align: center;
}

.g-title-mark {
  display: grid;
  gap: var(--sds-space-2);
}

.g-title-mark .sds-section-header {
  margin: 0;
}

.g-title-name {
  margin: 0;
  color: var(--sds-color-accent);
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-display-size);
  font-weight: var(--sds-type-display-weight);
  line-height: var(--sds-type-display-line-height);
  letter-spacing: var(--sds-type-display-tracking);
}

.g-results-win .sds-screen-header-title {
  color: var(--sds-color-success);
}

.g-results-lose .sds-screen-header-title {
  color: var(--sds-color-text-muted);
}

.g-rewards {
  justify-content: center;
  gap: var(--sds-space-7);
  margin-top: 0;
}

.g-confirm-screen,
.g-loading-screen {
  align-content: center;
}

.g-confirm-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr));
  gap: var(--sds-space-4);
}

/* ------------------------------------------------- no sideways page scroll (issue #63) */
/* A matrix scrolls inside its own box; grid and flex children may shrink below their content. */

.g-main,
.g-section,
.g-section > *,
.g-stack > *,
.g-card,
.g-wide-matrix,
.g-screen,
.g-screen-frame,
.g-screen-frame > * {
  min-width: 0;
}

.g-wide-matrix,
.g-table-wrap {
  position: relative; /* clips absolutely placed parts (visually hidden labels) with the box */
  max-width: 100%;
  overflow-x: auto;
}

.g-top {
  background: var(--sds-color-bg);
}

/* Phone width: the header scrolls away with the page instead of covering half of it. */
@media (max-width: 700px) {
  html {
    scroll-padding-top: var(--sds-space-5);
  }

  .g-top {
    position: static;
  }

  .g-pairs {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .sds-tabs {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- v1.2 core (gallery-v12.js) */

.g-grow {
  flex: 1;
  min-width: 0;
}

.g-align-start {
  align-items: flex-start;
}

.g-media {
  background:
    linear-gradient(135deg, var(--sds-color-series-1), var(--sds-color-series-4));
}

.g-carousel-item {
  display: grid;
  place-items: center;
  min-height: calc(var(--sds-touch-target) * 2.5);
  background-color: var(--sds-color-surface-raised);
  color: var(--sds-color-text);
  font-family: var(--sds-font-display);
  font-size: var(--sds-type-title-size);
}

.g-slider,
.g-slider-row {
  display: grid;
  gap: var(--sds-space-2);
  width: min(100%, calc(var(--sds-touch-target) * 7));
}

.sds-field-row-control > .g-slider {
  width: calc(var(--sds-touch-target) * 6);
  max-width: 100%;
}

.g-slider-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.g-dl {
  margin: 0;
}

.g-prose {
  max-width: 60ch;
  color: var(--sds-color-text);
  line-height: var(--sds-type-body-line-height);
}

.g-detail-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--sds-setting-detail-width));
  gap: var(--sds-space-5);
  align-items: start;
}

.g-screen-with-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--sds-setting-detail-width));
  gap: var(--sds-space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .g-detail-demo,
  .g-screen-with-detail {
    grid-template-columns: 1fr;
  }
}

.g-screen-v12 .sds-setting-detail {
  position: sticky;
  top: var(--sds-space-5);
}

.g-stack-screen {
  margin-top: var(--sds-space-4);
}

.g-mode {
  padding: var(--sds-space-2) var(--sds-space-4);
  border: var(--sds-border-thin) solid var(--sds-color-line-strong);
  border-radius: var(--sds-radius-pill);
  font-family: var(--sds-font-mono);
}

.g-captions-static {
  align-items: flex-start;
  min-height: calc(var(--sds-touch-target) * 2);
}

.g-pinned {
  margin-top: calc(var(--sds-touch-target) * 2);
}

.g-slot-caption {
  color: var(--sds-color-text-muted);
  font-size: var(--sds-type-caption-size);
}

/* review notes (#143) */
.g-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sds-space-2);
  margin-top: var(--sds-space-2);
}

.g-review-cell {
  min-width: 18ch;
}

.g-review-cell .g-review {
  margin-top: 0;
}

.g-review-panel {
  margin-top: var(--sds-space-6);
  padding: var(--sds-space-6);
  border: var(--sds-border-thin) solid var(--sds-color-line);
  border-radius: var(--sds-radius-lg);
  background: color-mix(in srgb, var(--sds-color-surface) 88%, transparent);
}

.g-review-panel ul {
  display: grid;
  gap: var(--sds-space-2);
  padding-left: var(--sds-space-6);
}