/* Showroom chrome (gallery + stage). Every selector is sr-*-namespaced (or scoped under an
   sr-* body class) so the showroom's own chrome can never collide with the components on
   display — the whole point of the stage is that the exhibit's CSS behaves exactly as it
   does in production. Token fallbacks keep it standing even without the shared tokens. */

/* ── Gallery ─────────────────────────────────────────────────────────────── */
body.sr-gallery { background:#0B1E3A; min-height:100vh; }
.sr-headtag { color:#B9C7DD; font-family:var(--font-head,'Nunito',sans-serif); font-weight:800;
  font-size:.82em; letter-spacing:.06em; text-transform:uppercase; }

.sr-main { max-width:1180px; margin:0 auto; padding:38px 24px 70px; }
.sr-intro h1 { color:#fff; font-family:var(--font-head,'Nunito',sans-serif); font-size:2em; margin:0 0 10px; }
.sr-intro p { color:#B9C7DD; max-width:820px; line-height:1.55; margin:0; }
/* Underlined: in-paragraph links must be distinguishable without color (WCAG link-in-text-block). */
.sr-intro a { color:var(--green,#7DC400); text-decoration:underline; text-underline-offset:3px; }

.sr-family { margin-top:52px; }
.sr-family > h2 { color:#fff; font-family:var(--font-head,'Nunito',sans-serif); font-size:1.3em; margin:0 0 6px; }
.sr-context { color:#8FA3C4; font-size:.9em; line-height:1.5; max-width:860px; margin:0; }

.sr-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:22px; margin-top:18px; }
@media (max-width:480px){ .sr-cards { grid-template-columns:1fr; } }
.sr-card { background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow,0 10px 30px rgba(4,14,30,.35)); }
.sr-frame { display:block; background:#0F2547; border-bottom:1px solid var(--grey-lt,#E8ECF2); }
.sr-frame img { display:block; width:100%; aspect-ratio:1280/800; object-fit:cover; object-position:top; }
.sr-frame:hover img { opacity:.92; }
.sr-noshot { display:flex; align-items:center; justify-content:center; aspect-ratio:1280/800;
  padding:20px; text-align:center; color:#8FA3C4; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
.sr-meta { padding:14px 18px 16px; }
.sr-meta-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sr-meta-top h3 { margin:0; color:var(--navy,#0D2240); font-size:1em; }
.sr-chip { flex:none; font-family:var(--font-head,'Nunito',sans-serif); font-weight:800; font-size:.66em;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:20px;
  background:var(--grey-lt,#E8ECF2); color:var(--grey-dk,#4A5568); }
.sr-chip.is-inflow { background:#E7F4D4; color:#3F6B00; }
.sr-chip.is-candidate { background:#FDEFD3; color:#8A5A00; }
.sr-chip.is-paused { background:#E1E8F5; color:#2C4A77; }
/* Live pill (flagged families): a real button — shows server truth, click = this-browser
   preview toggle. Dashed ring while a preview override is active. */
button.sr-chip-live { border:0; font:inherit; font-family:var(--font-head,'Nunito',sans-serif);
  font-weight:800; font-size:.66em; cursor:pointer; }
button.sr-chip-live:hover { filter:brightness(.95); }
.sr-chip.is-preview { background:#FDEFD3; color:#8A5A00; outline:2px dashed var(--amber,#F59E0B); outline-offset:1px; }
.sr-preview-note { margin:8px 0 0; font-size:.78em; line-height:1.5; color:#8A5A00;
  background:#FDF6E3; border:1px solid #F2E3B3; border-radius:8px; padding:7px 10px; }
.sr-preview-note a { color:#1560A8; }
/* --grey-dk not --grey-mid: 6.3:1 on the grey-lt chip (WCAG AA needs 4.5; grey-mid is 3.9). */
.sr-chip.is-retired { background:var(--grey-lt,#E8ECF2); color:var(--grey-dk,#4A5568); }
.sr-notes { color:var(--grey-dk,#4A5568); font-size:.86em; line-height:1.5; margin:8px 0 0; }
.sr-meta-foot { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:12px; font-size:.8em; color:var(--grey-mid,#6B7688); }
.sr-meta-foot a { color:#1560A8; text-decoration:none; }   /* not --blue: 12px link needs 4.5:1 on white (--blue is 3.4) */
.sr-meta-foot a:hover { text-decoration:underline; }

.sr-foot { text-align:center; color:#8FA3C4; font-size:.8em; padding:0 24px 40px; }   /* 6.5:1 on the navy body */
.sr-foot code { font-size:1em; }

/* ── Stage ───────────────────────────────────────────────────────────────── */
body.sr-stage-page { min-height:100vh; display:flex; flex-direction:column; }
body.sr-dark { background:#0B1E3A; }
body.sr-light { background:var(--off-white,#F4F6F9); }

.sr-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 16px; background:#081831; }
.sr-back { color:#B9C7DD; text-decoration:none; font-size:.86em; white-space:nowrap; }
.sr-back:hover { color:#fff; }
.sr-title { color:#fff; font-family:var(--font-head,'Nunito',sans-serif); font-weight:800; font-size:.9em;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.sr-action { font:inherit; font-weight:700; font-size:.82em; color:#08243F;
  background:var(--green,#7DC400); border:0; border-radius:8px; padding:7px 14px; cursor:pointer; }
.sr-action:hover { filter:brightness(1.07); }
body.sr-embed .sr-back, body.sr-embed .sr-title { display:none; }
body.sr-embed .sr-actions { margin:0 auto; }

.sr-note { margin:10px 16px 0; font-size:.8em; line-height:1.5; }
body.sr-dark .sr-note { color:#8FA3C4; }
body.sr-light .sr-note { color:var(--grey-dk,#4A5568); }   /* grey-dk not -mid: .8em text needs 4.5:1 on off-white */

.sr-info { margin:14px 16px 0; padding:12px 16px; border-radius:10px; font-size:.85em; line-height:1.55; }
.sr-info p { margin:0; }
.sr-info p + p { margin-top:8px; }
body.sr-dark .sr-info { background:rgba(255,255,255,.06); color:#B9C7DD; }
body.sr-light .sr-info { background:#fff; color:var(--grey-dk,#4A5568); border:1px solid var(--grey-lt,#E8ECF2); }

.sr-stagearea { flex:1; padding:36px 24px; }
.sr-stagearea.sr-bleed { padding:0; }
.sr-fail { color:#FF7B7B; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
body.sr-light .sr-fail { color:#C0272D; }

/* Callback trace — small fixed corner console; sits above the modal overlay on purpose
   so the seam events stay visible while a modal is open. */
.sr-log { position:fixed; left:10px; bottom:10px; z-index:9999; max-width:min(440px,85vw);
  max-height:132px; overflow:auto; padding:8px 12px; border-radius:8px;
  background:rgba(8,24,49,.93); color:#9FE870; font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }