/* ── STRUCTURAL CSS ONLY ─────────────────────────────────────────────
   Layout scaffolding and interaction mechanics, shared by every Theme
   Lab page. No colors, fonts, borders, radii, or shadows — all visual
   styling lives in the theme files (themes/*.css), so the Baseline
   theme shows the naked shell. One documented exemption at the bottom:
   the phone bezel (.tl-phone-shell), which is lab chrome, not themed
   content — see CLAUDE.md. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

.tl-switcherbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
}
.tl-switcherbar .tl-spacer { flex: 1; }
.tl-switcherbar label { display: inline-flex; align-items: center; gap: 6px; }

.tl-page { max-width: 920px; margin: 0 auto; padding: 24px 20px 80px; }
.tl-section { margin-top: 56px; }
.tl-section > * + * { margin-top: 12px; }

.tl-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tl-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tl-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.tl-swatch { min-height: 76px; display: flex; align-items: flex-end; padding: 8px; }

.tl-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; }
.tl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.tl-field-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tl-fieldset { margin-bottom: 18px; }
.tl-fieldset > * + * { margin-top: 8px; }

.tl-table-wrap { overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; text-align: left; }

.tl-card-body > * + * { margin-top: 8px; }
.tl-card-actions { display: flex; gap: 10px; margin-top: 14px; }

.tl-tabs { display: flex; }
.tl-tabpanels { margin-top: 14px; }

.tl-list { list-style: none; padding: 0; margin: 0; }
.tl-list-item { display: flex; align-items: center; gap: 12px; }
.tl-list-item .tl-list-body { flex: 1; }

.tl-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tl-modal-backdrop { position: absolute; inset: 0; }
.tl-modal-dialog { position: relative; width: 100%; max-width: 440px; }
.tl-modal-dialog > * + * { margin-top: 10px; }
.tl-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.tl-toast-region {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center;
}

.tl-empty { text-align: center; padding: 48px 20px; }
.tl-empty > * + * { margin-top: 8px; }

.tl-footer { margin-top: 72px; padding-top: 20px; }

/* ── Example-page layout containers (structural only) ──────────────── */
.tl-cols { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.tl-side { position: sticky; top: 64px; }
.tl-side > * + * { margin-top: 16px; }
.tl-feed { max-width: 560px; margin: 0 auto; }
.tl-feed > * + * { margin-top: 16px; }
.tl-figure { min-height: 150px; display: flex; align-items: flex-end; }
.tl-figure .tl-swatch { flex: 1; min-height: 150px; }
@media (max-width: 720px) {
  .tl-cols { grid-template-columns: 1fr; }
  .tl-side { position: static; }
}

/* ── Embed + viewport mechanics ─────────────────────────────────────── */
html[data-embed="1"] .tl-switcherbar { display: none !important; }
html[data-viewport="mobile"]:not([data-embed="1"]) .tl-page,
html[data-viewport="mobile"]:not([data-embed="1"]) .tl-footer { display: none; }
html:not([data-viewport="mobile"]) .tl-phone,
html[data-embed="1"] .tl-phone { display: none !important; }
.tl-phone { display: flex; justify-content: center; padding: 24px 16px 80px; }
.tl-phone iframe { width: 375px; height: min(720px, calc(100vh - 180px)); border: 0; display: block; }
@media (max-width: 520px) { .tl-switcherbar .tl-viewport-label { display: none; } }

/* ── DOCUMENTED EXEMPTION — lab shell chrome, not themed content ─────
   The phone bezel is a preview device: identical under every theme,
   never styled by theme CSS, invisible to the Baseline guarantee. */
.tl-phone-shell {
  padding: 10px; border-radius: 40px; background: #15161a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.tl-phone-shell iframe { border-radius: 30px; background: #fff; }