/* ── interactive.css ── operable demos embedded in case studies ──
   Loaded per-page only where a component is used. Everything is scoped to a
   component root class so the file is inert on pages that don't include it.
   Palette + type come from brand.css tokens. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ══ sketch wireframes ══════════════════════════════════════════════
   Low-fidelity placeholders that show layout intent (bars, text lines,
   buttons, badges) with a clearly-labeled asset slot for the real export
   to drop into. Deliberately monochrome — no brand colour fills — so a
   wireframe never reads as a finished screen. */
.wf { --wire: #C9C7BF; --wire-fill: #ECEAE3; --wire-fill-2: #E0DDD4; --wire-ink: #8C8A80;
  margin: 1.75rem 0; font-family: var(--font-body); }

/* a horizontal, scrollable flow of state screens with → connectors */
.wf-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 0.5rem 0 1rem; -webkit-overflow-scrolling: touch; }
.wf-arrow { flex: 0 0 auto; align-self: center; color: var(--wire); font-size: 20px; padding: 0 0.55rem; user-select: none; }

/* one wireframe "screen" */
.wf-screen { flex: 0 0 auto; width: 178px; background: var(--paper); border: 1.5px solid var(--wire); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.wf-state-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wire-ink); padding: 0.55rem 0.7rem 0; }
.wf-screen-body { padding: 0.6rem 0.7rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

/* building blocks */
.wf-bar { height: 30px; border-radius: 7px; background: var(--wire-fill); border: 1px solid var(--wire); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.wf-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 8px; border-radius: 999px; border: 1.5px dashed var(--wire); font-size: 9px; font-weight: 800; color: var(--wire-ink); letter-spacing: 0.03em; white-space: nowrap; }
.wf-badge.solid { border-style: solid; background: var(--wire-fill-2); }
.wf-line { height: 8px; border-radius: 4px; background: var(--wire-fill); }
.wf-line.sm { height: 7px; }
.wf-w40 { width: 40%; } .wf-w55 { width: 55%; } .wf-w70 { width: 70%; } .wf-w85 { width: 85%; } .wf-w100 { width: 100%; }
.wf-note-bar { border-radius: 7px; background: var(--wire-fill); border: 1px solid var(--wire); padding: 6px 8px; display: flex; gap: 5px; }
.wf-note-bar .wf-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wf-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--wire); flex: 0 0 auto; }
.wf-btn { height: 26px; border-radius: 7px; background: var(--wire-fill-2); border: 1px solid var(--wire); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--wire-ink); letter-spacing: 0.02em; }
.wf-btn.ghost { background: transparent; border-style: dashed; }
.wf-btn.primary { background: var(--wire); color: var(--paper); border-color: var(--wire); }
.wf-btn.tiny { height: 20px; font-size: 9px; padding: 0 8px; }
.wf-row { display: flex; gap: 6px; align-items: center; }
.wf-row.end { justify-content: flex-end; }
.wf-spacer { flex: 1; }

/* the asset slot — crosshatched box that names the export it expects */
.wf-asset { position: relative; border: 1.5px dashed var(--wire); border-radius: 8px; background:
  repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(140,138,128,0.07) 9px, rgba(140,138,128,0.07) 10px);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; min-height: 64px; }
.wf-asset span { font-size: 9.5px; font-weight: 800; color: var(--wire-ink); line-height: 1.35; letter-spacing: 0.02em; }
.wf-asset.tall { flex: 1; min-height: 96px; }

/* caption under a wireframe block */
.wf-caption { font-size: 13px; color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.5; }
.wf-caption strong { color: var(--ink); font-weight: 700; }
.wf-legend { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wire-ink); margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 7px; }
.wf-legend::before { content: ''; width: 22px; height: 12px; border: 1.5px dashed var(--wire); border-radius: 3px; }