/* ── Style Guide Layout ────────────────────────────────────────────────────── */

.sg-main {
  max-width: 100%;
  padding-inline: 0;
}

.sg-page-header {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
  border-block-end: 1px solid var(--colour-border);
}

.sg-page-header h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--colour-text-primary);
  margin-block-end: .35rem;
}

.sg-page-header p {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--colour-text-secondary);
}

.sg-wcag-key {
  margin-block-start: .5rem;
  font-size: .7rem;
  line-height: 1.6;
  max-width: 52rem;
}

.sg-wcag-key code {
  font-family: var(--font-mono);
  color: var(--colour-glow-primary);
}

/* ── Panels ─────────────────────────────────────────────────────────────────── */

.sg-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - 6rem);
}

@media (max-width: 800px) {
  .sg-panels {
    grid-template-columns: 1fr;
  }
}

.sg-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── Panel-level token overrides ─────────────────────────────────────────────
   Both panels always show their scheme regardless of the root theme.
   CSS custom properties cascade: these override :root for all children.
   ──────────────────────────────────────────────────────────────────────────── */

.sg-panel--dark {
  --colour-background:     #06060f;
  --colour-surface:        #0c0c1e;
  --colour-surface-raised: #111126;
  --colour-border:         #5a5a8a;
  --colour-border-mid:     #6a6aa0;
  --colour-accent:         #9b6dff;
  --colour-glow-primary:     #7fff8a;
  --colour-glow-secondary:     #ffbe00;
  --colour-text-primary:   #eaeaff;
  --colour-text-secondary: #b0b0e0;
  --colour-btn-primary-bg:     rgba(155, 109, 255, .12);
  --colour-btn-primary-border: rgba(155, 109, 255, .46);
  --colour-tag-border-primary:   rgba(127, 255, 138, .42);
  --colour-tag-text:           #7fff8a;
  --colour-tag-border:         rgba(127, 255, 138, .42);
  --colour-shadow-float:   rgba(0, 0, 0, .4);
  background: var(--colour-background);
  color: var(--colour-text-primary);
}

.sg-panel--light {
  --colour-background:     #f4f4f8;
  --colour-surface:        #ffffff;
  --colour-surface-raised: #eaeaf2;
  --colour-border:         #8a8aa8;
  --colour-border-mid:     #7a7a99;
  --colour-accent:         #a34800;
  --colour-glow-primary:     #8f3a11;
  --colour-glow-secondary:     #9a6200;
  --colour-text-primary:   #12121e;
  --colour-text-secondary: #4e4e6a;
  --colour-btn-primary-bg:     rgba(163, 72, 0, .12);
  --colour-btn-primary-border: rgba(163, 72, 0, .68);
  --colour-tag-border-primary:   rgba(184, 95, 0, .72);
  --colour-tag-text:           #7a2e00;
  --colour-tag-border:         rgba(184, 95, 0, .72);
  --colour-shadow-float:   rgba(18, 18, 30, .12);
  background: var(--colour-background);
  color: var(--colour-text-primary);
}

/* OKLCH progressive enhancement — same tokens, better gamut */
@supports (color: oklch(0.5 0.1 200)) {
  .sg-panel--dark {
    --colour-background:     oklch(0.1280 0.0213 282.97);
    --colour-surface:        oklch(0.1657 0.0372 281.55);
    --colour-surface-raised: oklch(0.1903 0.0419 281.66);
    --colour-border:         oklch(0.4884 0.0764 283.21);
    --colour-border-mid:     oklch(0.5469 0.0835 283.29);
    --colour-accent:         oklch(0.680 0.170 312);
    --colour-glow-primary:     oklch(0.8999 0.1938 145.45);
    --colour-glow-secondary:     oklch(0.8384 0.1722 83.57);
    --colour-text-primary:   oklch(0.9434 0.0278 285.36);
    --colour-text-secondary: oklch(0.7738 0.0682 284.68);
    --colour-btn-primary-bg:     oklch(0.680 0.170 312 / .12);
    --colour-btn-primary-border: oklch(0.680 0.170 312 / .46);
    --colour-tag-border-primary:   oklch(0.8999 0.1938 145.45 / .42);
    --colour-tag-text:           oklch(0.8999 0.1938 145.45);
    --colour-tag-border:         oklch(0.8999 0.1938 145.45 / .42);
  }

  .sg-panel--light {
    --colour-background:     oklch(0.9683 0.0053 286.30);
    --colour-surface:        oklch(1 0 89.88);
    --colour-surface-raised: oklch(0.9394 0.0107 286.19);
    --colour-border:         oklch(0.6439 0.0445 285.08);
    --colour-border-mid:     oklch(0.5908 0.0471 284.87);
    --colour-accent:         oklch(0.51 0.15 56);
    --colour-glow-primary:     oklch(0.46 0.14 45);
    --colour-glow-secondary:     oklch(0.5444 0.1173 70.85);
    --colour-text-primary:   oklch(0.1885 0.0243 283.83);
    --colour-text-secondary: oklch(0.4354 0.0459 284.33);
    --colour-btn-primary-bg:     oklch(0.51 0.15 56 / .12);
    --colour-btn-primary-border: oklch(0.51 0.15 56 / .68);
    --colour-tag-border-primary:   oklch(0.6 0.14 60 / .72);
    --colour-tag-text:           oklch(0.41 0.13 44);
    --colour-tag-border:         oklch(0.6 0.14 60 / .72);
  }
}

/* Divider between the two panels */
.sg-panel--light {
  border-inline-start: 1px solid var(--colour-border);
}

/* ── Panel header ────────────────────────────────────────────────────────────── */

.sg-panel-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--colour-border);
}

.sg-scheme-name {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--colour-text-secondary);
}

.sg-current-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .15em .55em;
  border-radius: 3px;
  background: var(--colour-accent);
  color: var(--colour-surface);
  opacity: 0;
  transition: opacity 200ms ease;
}

.sg-panel[data-sg-current] .sg-current-badge {
  opacity: 1;
}

/* ── Section containers ──────────────────────────────────────────────────────── */

.sg-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sg-section-title {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--colour-text-secondary);
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--colour-border);
}

/* ── Colour swatches ─────────────────────────────────────────────────────────── */

.sg-swatches {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.sg-swatch-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.sg-swatch-group-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--colour-text-secondary);
}

.sg-swatch-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
  min-width: 5rem;
}

.sg-swatch-chip {
  block-size: 2.5rem;
  border-radius: 5px;
  border: 1px solid var(--colour-border);
}

.sg-swatch-name {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--colour-text-secondary);
  line-height: 1.4;
}

/* ── Typography specimens ────────────────────────────────────────────────────── */

.sg-type-specimens {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sg-type-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid color-mix(in srgb, var(--colour-border) 50%, transparent);
}

.sg-type-row:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.sg-token-badge {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--colour-accent);
  align-self: start;
}

.sg-type-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.sg-wcag-badge {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  padding: .15em .5em;
  border-radius: 3px;
  border: 1px solid currentcolor;
}

.sg-wcag-badge--aaa {
  color: var(--colour-glow-primary);
}

.sg-wcag-badge--aa {
  color: var(--colour-glow-secondary);
}

.sg-wcag-badge--fail {
  color: var(--colour-window-close, #ff5f57);
}

/* Type specimens — use explicit vars so they always use the panel's overridden tokens */
.sg-specimen-display {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--colour-text-primary);
}

.sg-specimen-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--colour-text-primary);
}

.sg-specimen-h3 {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--colour-glow-primary);
}

.sg-specimen-body {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--colour-text-secondary);
}

.sg-specimen-strong {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--colour-text-primary);
}

.sg-specimen-meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--colour-text-secondary);
}

.sg-specimen-code {
  font-family: var(--font-mono);
  font-size: .875em;
  color: var(--colour-glow-primary);
}

.sg-specimen-blockquote {
  font-size: .9375rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--colour-text-secondary);
  padding-inline-start: .85rem;
  border-inline-start: 2px solid var(--colour-border-mid);
}

/* ── UI elements ─────────────────────────────────────────────────────────────── */

.sg-elements {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sg-element-row {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid color-mix(in srgb, var(--colour-border) 50%, transparent);
}

.sg-element-row:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.sg-element-demo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Button in the style guide needs explicit token usage (site's .btn class relies
   on components.css rules that are out of scope here) */
.sg-btn {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .5em 1.1em;
  border-radius: 5px;
  border: 1px solid var(--colour-btn-primary-border);
  background: var(--colour-btn-primary-bg);
  color: color-mix(in srgb, var(--colour-accent) 75%, var(--colour-text-primary));
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.sg-link {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--colour-text-secondary);
  border-block-end: 1px solid color-mix(in srgb, var(--colour-border-mid) 60%, transparent);
  padding-block-end: 1px;
}

.sg-accent-link {
  font-size: .9375rem;
  color: var(--colour-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sg-tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .07em;
  color: var(--colour-tag-text);
  border: 1px solid var(--colour-tag-border);
  border-radius: 3px;
  padding: .2em .5em;
  display: inline-block;
}

.sg-focus-demo:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Surface samples ─────────────────────────────────────────────────────────── */

.sg-surfaces {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sg-surface-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border-radius: 5px;
  border: 1px solid var(--colour-border);
}

.sg-surface-bg    { background: var(--colour-background); }
.sg-surface-surf  { background: var(--colour-surface); }
.sg-surface-raise { background: var(--colour-surface-raised); }

.sg-surface-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--colour-text-secondary);
}