/* RetenDemo · board view — page-specific bits on top of ../styles.css */

.alt-hero { padding-top: 40px; padding-bottom: 20px; }
.alt-hero .display { max-width: 30ch; }
.alt-hero .lede { margin-top: 14px; max-width: 92ch; }
.d-md { font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.045em; }
.alt-note { margin-top: 12px; font-size: 11.5px; color: var(--muted); }

.alt-body { padding-bottom: 56px; }

.alt-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin-bottom: 12px;
}
.alt-controls-lbl { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.alt-legend { flex: 1 0 100%; margin-top: 2px; margin-left: 0; }

/* the shared stylesheet hides .graph-card below 1000px — alt views scroll instead */
.alt-graph-card { display: block !important; overflow-x: auto; }
.alt-graph-card svg { min-width: 1100px; }
.alt-graph-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* board entities */
.user-dot { fill: var(--canvas); stroke: var(--ink); stroke-width: 1.4; }
.user-num { font-family: var(--mono); font-size: 13px; fill: var(--ink); }
.board-mono-title { font-family: var(--mono); font-weight: 500; }
.gtm-chip { stroke: var(--muted-soft); }
.cont-detail { stroke: var(--pink); }
.pill { fill: rgba(255, 255, 255, 0.7); stroke: var(--hairline); }
.pill-ours { stroke: var(--pink); }
.pill-txt { font-family: var(--mono); font-size: 11px; fill: var(--body-strong); }

.store-box { fill: var(--teal); stroke: var(--teal); }
.store-title { fill: #fff; }
.store-sub { font-family: var(--mono); font-size: 9.5px; fill: rgba(255, 255, 255, 0.75); }
.store-t1 { font-family: var(--mono); font-size: 10px; fill: #ffb3cd; }

.data-chip { stroke: var(--pink); }
.net-tag { font-family: var(--mono); font-size: 10px; }
.net-tag.t2ink { fill: var(--muted); }
.net-tag.pinkink, .board-quote.pinkink { fill: var(--pink); }

/* board quotes and channels */
.board-quote { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.board-ev-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; fill: #15803d; }
.edge.zoom { opacity: 0.35; }
.edge.t2 { opacity: 0.55; }
.edge.t1 { opacity: 0.6; }
.edge.ev { stroke: #22c55e; opacity: 0.4; }

/* keep the reduced-motion play button clear of the closing board quote */
.play-overlay { bottom: 96px; }