/* Visual gallery used by guides/styling.md. These examples are documentation-only. */
.styling-guide {
  --sg-ink: #12212b;
  --sg-muted: #60727d;
  --sg-line: #d8e2e6;
  --sg-panel: #ffffff;
  --sg-subtle: #f3f7f7;
  --sg-accent: #087f75;
  --sg-accent-soft: #dff4ef;
  --sg-blue: #2563eb;
  --sg-purple: #7c3aed;
  --sg-danger: #c2413b;
  --sg-warning: #a96809;
  --sg-success: #15865a;
  color: var(--sg-ink);
}

[data-md-color-scheme="slate"] .styling-guide {
  --sg-ink: #eef7f7;
  --sg-muted: #a7bac2;
  --sg-line: #30434d;
  --sg-panel: #17252d;
  --sg-subtle: #1e3039;
  --sg-accent: #70e3db;
  --sg-accent-soft: #173f3d;
  --sg-blue: #82aaff;
  --sg-purple: #c4a4ff;
  --sg-danger: #ff9087;
  --sg-warning: #f3bd69;
  --sg-success: #72d5a0;
}

.sg-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(112, 227, 219, .22), transparent 28%),
    linear-gradient(135deg, #0d2b35, #0d4a4d 56%, #087f75);
  border-radius: 1.25rem;
  box-shadow: 0 18px 46px rgba(9, 31, 45, .18);
  color: #f5ffff;
  margin: 0 0 2rem;
  overflow: hidden;
  padding: clamp(1.35rem, 4vw, 2.6rem);
  position: relative;
}

.sg-hero::after {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  content: "";
  height: 16rem;
  position: absolute;
  right: -5rem;
  top: -8rem;
  width: 16rem;
}

.sg-hero p { max-width: 44rem; }
.sg-hero .sg-kicker {
  color: #92f0e7;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0 0 .55rem;
  text-transform: uppercase;
}

.sg-hero h1 { color: inherit; margin: 0 0 .55rem; }
.sg-hero .sg-lede { color: #d8f6f2; font-size: 1.08rem; margin: 0; }

.sg-demo {
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: .9rem;
  box-shadow: 0 8px 24px rgba(9, 31, 45, .07);
  margin: 1rem 0 1.35rem;
  overflow: hidden;
}

.sg-demo__bar {
  align-items: center;
  background: var(--sg-subtle);
  border-bottom: 1px solid var(--sg-line);
  color: var(--sg-muted);
  display: flex;
  font-size: .66rem;
  font-weight: 750;
  gap: .5rem;
  justify-content: space-between;
  letter-spacing: .045em;
  padding: .6rem .8rem;
  text-transform: uppercase;
}

.sg-demo__bar code { color: var(--sg-accent); font-size: .64rem; }
.sg-demo__body { padding: clamp(.9rem, 3vw, 1.35rem); }
.sg-demo__body > :first-child { margin-top: 0; }
.sg-demo__body > :last-child { margin-bottom: 0; }

.sg-chip-row, .sg-button-row, .sg-token-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.sg-chip, .sg-token {
  align-items: center;
  background: var(--sg-accent-soft);
  border: 1px solid color-mix(in srgb, var(--sg-accent) 22%, var(--sg-line));
  border-radius: 999px;
  color: var(--sg-accent);
  display: inline-flex;
  font-size: .72rem;
  font-weight: 750;
  gap: .35rem;
  padding: .3rem .58rem;
}

.sg-chip--info { color: var(--sg-blue); }
.sg-chip--success { color: var(--sg-success); }
.sg-chip--warning { color: var(--sg-warning); }
.sg-chip--danger { color: var(--sg-danger); }
.sg-button-row--spaced, .sg-state-grid--spaced, .sg-form-actions { margin-top: .8rem; }

.sg-token { background: var(--sg-subtle); color: var(--sg-ink); font-family: var(--md-code-font-family); font-weight: 600; }
.sg-token b { color: var(--sg-accent); font-family: inherit; }

.sg-palette {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sg-color { min-width: 0; }
.sg-color__swatch { border-radius: .65rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); height: 4.3rem; }
.sg-color__label { color: var(--sg-muted); display: block; font-size: .65rem; margin-top: .35rem; overflow-wrap: anywhere; }
.sg-color__label strong { color: var(--sg-ink); display: block; font-size: .7rem; }
.sg-color--accent .sg-color__swatch { background: #087f75; }
.sg-color--accent-soft .sg-color__swatch { background: #dff4ef; }
.sg-color--ink .sg-color__swatch { background: #12212b; }
.sg-color--muted .sg-color__swatch { background: #60727d; }
.sg-color--surface .sg-color__swatch { background: #f3f7f7; }
.sg-color--danger .sg-color__swatch { background: #c2413b; }

.sg-button {
  border: 1px solid transparent;
  border-radius: .55rem;
  box-shadow: 0 3px 8px rgba(9,31,45,.09);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 750;
  justify-content: center;
  min-width: 6rem;
  padding: .62rem .8rem;
}

.sg-button--solid { background: var(--sg-accent); color: white; }
.sg-button--outline { background: transparent; border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-button--soft { background: var(--sg-accent-soft); color: var(--sg-accent); }
.sg-button--ghost { background: transparent; color: var(--sg-accent); }
.sg-button--danger { background: var(--sg-danger); color: white; }
.sg-button--disabled { background: var(--sg-subtle); color: var(--sg-muted); opacity: .62; }
.sg-button--sm { font-size: .65rem; min-width: 4.5rem; padding: .42rem .6rem; }
.sg-button--lg { font-size: .84rem; min-width: 7.1rem; padding: .78rem 1rem; }

.sg-surface-grid, .sg-state-grid, .sg-type-grid, .sg-layout-grid, .sg-scope-grid {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sg-surface {
  background: var(--sg-panel);
  border: 1px solid var(--sg-line);
  border-radius: .7rem;
  min-height: 6rem;
  padding: 1rem;
}

.sg-surface strong { display: block; font-size: .8rem; margin-bottom: .28rem; }
.sg-surface small { color: var(--sg-muted); font-size: .67rem; }
.sg-surface--raised { box-shadow: 0 10px 24px rgba(9,31,45,.13); }
.sg-surface--soft { background: var(--sg-accent-soft); border-color: color-mix(in srgb, var(--sg-accent) 25%, var(--sg-line)); }
.sg-surface--danger { background: color-mix(in srgb, var(--sg-danger) 10%, var(--sg-panel)); border-left: 4px solid var(--sg-danger); }

.sg-type-grid { align-items: end; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-type { border-left: 2px solid var(--sg-accent); padding-left: .75rem; }
.sg-type__sample { color: var(--sg-ink); display: block; line-height: 1.15; }
.sg-type__meta { color: var(--sg-muted); display: block; font-size: .62rem; margin-top: .45rem; }
.sg-type--display .sg-type__sample { font-size: 1.65rem; font-weight: 800; }
.sg-type--title .sg-type__sample { font-size: 1.2rem; font-weight: 750; }
.sg-type--body .sg-type__sample { font-size: .9rem; }
.sg-type--caption .sg-type__sample { color: var(--sg-muted); font-size: .68rem; }

.sg-layout-grid { grid-template-columns: 1fr 1fr; }
.sg-layout-box { background: var(--sg-subtle); border: 1px dashed color-mix(in srgb, var(--sg-accent) 48%, var(--sg-line)); border-radius: .6rem; padding: .65rem; }
.sg-layout-box--stack { display: grid; gap: .45rem; }
.sg-layout-box--inline { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; }
.sg-layout-box--grid { display: grid; gap: .45rem; grid-template-columns: repeat(3, 1fr); }
.sg-layout-box__item { background: var(--sg-accent-soft); border-radius: .35rem; color: var(--sg-accent); font-size: .65rem; font-weight: 750; padding: .55rem .35rem; text-align: center; }
.sg-layout-box__item--span-2 { grid-column: span 2; }
.sg-layout-box__label { color: var(--sg-muted); display: block; font-family: var(--md-code-font-family); font-size: .63rem; margin-bottom: .55rem; }

.sg-form-preview { background: var(--sg-subtle); border: 1px solid var(--sg-line); border-radius: .7rem; padding: 1rem; }
.sg-form-preview__grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
.sg-field { display: grid; gap: .28rem; }
.sg-field label { color: var(--sg-ink); font-size: .68rem; font-weight: 750; }
.sg-field input, .sg-field select { background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: .42rem; color: var(--sg-ink); min-height: 2rem; padding: .35rem .5rem; width: 100%; }
.sg-field--wide { grid-column: 1 / -1; }
.sg-field__hint { color: var(--sg-muted); font-size: .61rem; }

.sg-state { align-items: flex-start; border: 1px solid var(--sg-line); border-radius: .65rem; display: flex; gap: .6rem; min-height: 5.5rem; padding: .75rem; }
.sg-state__dot { border-radius: 50%; flex: 0 0 .62rem; height: .62rem; margin-top: .2rem; }
.sg-state strong { display: block; font-size: .75rem; }
.sg-state small { color: var(--sg-muted); display: block; font-size: .64rem; line-height: 1.4; margin-top: .2rem; }
.sg-state--success .sg-state__dot { background: var(--sg-success); }
.sg-state--warning .sg-state__dot { background: var(--sg-warning); }
.sg-state--error .sg-state__dot { background: var(--sg-danger); }

.sg-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-scope { border: 1px solid var(--sg-line); border-radius: .75rem; overflow: hidden; }
.sg-scope__chrome { align-items: center; background: var(--sg-subtle); border-bottom: 1px solid var(--sg-line); display: flex; gap: .35rem; padding: .55rem .7rem; }
.sg-scope__dot { background: var(--sg-muted); border-radius: 50%; height: .38rem; opacity: .65; width: .38rem; }
.sg-scope__chrome code { color: var(--sg-muted); font-size: .62rem; margin-left: auto; }
.sg-scope__body { padding: 1rem; }
.sg-scope--dark { --sg-local-ink: #edfafa; --sg-local-muted: #a6c1c4; --sg-local-panel: #102d34; --sg-local-accent: #74e7dc; background: var(--sg-local-panel); color: var(--sg-local-ink); }
.sg-scope--dark .sg-scope__chrome { background: #183d43; border-color: #29545a; }
.sg-scope--dark .sg-scope__chrome code, .sg-scope--dark small { color: var(--sg-local-muted); }
.sg-scope--dark .sg-chip { background: #1b5654; border-color: #347d78; color: var(--sg-local-accent); }
.sg-scope--dark strong { color: var(--sg-local-ink); }

.sg-density-row { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
.sg-density { background: var(--sg-subtle); border: 1px solid var(--sg-line); border-radius: .65rem; padding: .75rem; }
.sg-density__bars { display: grid; gap: .3rem; margin-top: .55rem; }
.sg-density__bar { background: var(--sg-accent); border-radius: .25rem; height: .42rem; }
.sg-density__bar:nth-child(1) { width: 100%; }
.sg-density__bar:nth-child(2) { width: 74%; }
.sg-density__bar:nth-child(3) { width: 48%; }
.sg-density strong { display: block; font-size: .72rem; }
.sg-density small { color: var(--sg-muted); font-size: .62rem; }
.sg-density--comfortable .sg-density__bars { gap: .5rem; }
.sg-density--spacious .sg-density__bars { gap: .75rem; }

.sg-recipe-flow { align-items: center; display: grid; gap: .6rem; grid-template-columns: 1fr auto 1fr auto 1fr; }
.sg-recipe-node { background: var(--sg-subtle); border: 1px solid var(--sg-line); border-radius: .65rem; padding: .75rem; text-align: center; }
.sg-recipe-node strong { display: block; font-size: .72rem; }
.sg-recipe-node small { color: var(--sg-muted); font-size: .6rem; }
.sg-recipe-arrow { color: var(--sg-accent); font-size: 1.2rem; font-weight: 800; }

.sg-dashboard { background: var(--sg-subtle); border: 1px solid var(--sg-line); border-radius: .8rem; padding: .8rem; }
.sg-dashboard__header { align-items: center; display: flex; gap: .6rem; justify-content: space-between; margin-bottom: .75rem; }
.sg-dashboard__header strong { font-size: .84rem; }
.sg-dashboard__header small { color: var(--sg-muted); font-size: .62rem; }
.sg-dashboard__body { display: grid; gap: .65rem; grid-template-columns: 1.1fr .9fr; }
.sg-dashboard__metric, .sg-dashboard__chart { background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: .55rem; padding: .7rem; }
.sg-dashboard__metric span { color: var(--sg-muted); display: block; font-size: .61rem; }
.sg-dashboard__metric strong { display: block; font-size: 1.45rem; margin-top: .18rem; }
.sg-dashboard__metric em { color: var(--sg-success); font-size: .62rem; font-style: normal; }
.sg-dashboard__chart { align-items: end; display: flex; gap: .35rem; height: 6.2rem; }
.sg-dashboard__chart i { background: linear-gradient(180deg, var(--sg-accent), color-mix(in srgb, var(--sg-accent) 35%, transparent)); border-radius: .25rem .25rem 0 0; display: block; flex: 1; height: 35%; }
.sg-dashboard__chart i:nth-child(2) { height: 52%; }
.sg-dashboard__chart i:nth-child(3) { height: 43%; }
.sg-dashboard__chart i:nth-child(4) { height: 76%; }
.sg-dashboard__chart i:nth-child(5) { height: 66%; }

.sg-compare { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.sg-compare__side { border: 1px solid var(--sg-line); border-radius: .7rem; overflow: hidden; }
.sg-compare__label { background: var(--sg-subtle); border-bottom: 1px solid var(--sg-line); color: var(--sg-muted); font-size: .65rem; font-weight: 750; padding: .55rem .7rem; text-transform: uppercase; }
.sg-compare__body { padding: .8rem; }
.sg-compare__body--raw > div { color: var(--sg-muted); font-size: .7rem; padding: .25rem 0; }
.sg-compare__body--raw div:nth-child(2) { border-bottom: 1px solid var(--sg-line); border-top: 1px solid var(--sg-line); padding: .7rem 0; }

.sg-callout { background: var(--sg-accent-soft); border: 1px solid color-mix(in srgb, var(--sg-accent) 30%, var(--sg-line)); border-left: 4px solid var(--sg-accent); border-radius: .6rem; color: var(--sg-ink); padding: .85rem 1rem; }
.sg-callout strong { display: block; font-size: .78rem; margin-bottom: .2rem; }
.sg-callout p { font-size: .76rem; margin: 0; }

@media (max-width: 700px) {
  .sg-palette, .sg-surface-grid, .sg-state-grid, .sg-type-grid, .sg-scope-grid, .sg-density-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-layout-grid, .sg-compare, .sg-dashboard__body { grid-template-columns: 1fr; }
  .sg-recipe-flow { grid-template-columns: 1fr; }
  .sg-recipe-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 460px) {
  .sg-palette, .sg-surface-grid, .sg-state-grid, .sg-type-grid, .sg-scope-grid, .sg-density-row, .sg-form-preview__grid { grid-template-columns: 1fr; }
  .sg-field--wide { grid-column: auto; }
}