/* Primer 07 — page-specific components. */

/* ── shared demo layout for §2 and §3 ───────────────────────────────────── */
.lit { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.lit__stage {
  background: #0e1524; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-300);
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.lit__stage--dark { background: #0b0f18; }
.lit__stage canvas { width: 100%; height: auto; }
.lit__control { margin-bottom: 16px; }
.lit__row { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 14px; margin-bottom: 6px; }
.lit__en { color: var(--color-neutral-500); font-size: 11px; }
.lit__val { color: var(--color-accent-700); }
.lit__val--hot { color: var(--hot); }

.diag {
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
  background: var(--color-surface); padding: 12px 14px;
}
.diag__label { font-size: 11px; color: var(--color-neutral-500); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.diag__row { display: flex; justify-content: space-between; padding: 3px 0; }
.diag__rowlabel { font-size: 13px; color: var(--color-neutral-700); }
.diag__rowval { font-size: 13px; color: var(--color-neutral-800); }
.diag__text { font-size: 12.5px; line-height: 1.55; margin-top: 6px; color: var(--color-accent-700); }
.diag__text--warn { color: var(--hot); }
.diag__text--plain { color: var(--color-neutral-700); }

/* ── §3 GI toggle + effect cards ────────────────────────────────────────── */
.segbtns {
  display: flex; border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 18px;
}
.segbtns__btn {
  flex: 1; border: 0; cursor: pointer; padding: 11px 8px;
  font-family: var(--font-heading); font-size: 13.5px;
  background: var(--color-surface); color: var(--color-neutral-600);
}
.segbtns__btn + .segbtns__btn { border-left: 1px solid var(--color-divider); }
.segbtns__btn[aria-pressed="true"] { background: var(--color-accent-100); color: var(--color-accent-700); }

.effects { display: flex; flex-direction: column; gap: 12px; }
.effect {
  border: 1px solid var(--color-divider); border-left: 3px solid var(--color-neutral-400);
  border-radius: var(--radius-sm); background: var(--color-surface); padding: 12px 14px;
}
.effect--on { border-left-color: var(--color-accent-500); }
.effect--on-hot { border-left-color: var(--hot); }
.effect__title { font-family: var(--font-heading); font-size: 14px; color: var(--color-neutral-800); margin-bottom: 3px; }
.effect__body { font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-700); }
.effects__note { font-size: 12px; color: var(--color-neutral-500); margin-top: 14px; line-height: 1.5; }

.cardgrid--3 .tcard__title { font-size: 17px; }

.fig__room {
  position: relative; width: 96px; height: 64px;
  border: 1px solid var(--color-neutral-300); border-radius: 4px; overflow: hidden;
}

@media (max-width: 680px) {
  .lit, .cardgrid--3 { grid-template-columns: 1fr; }
}