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

.alt-hero { padding-top: 40px; padding-bottom: 20px; }
.alt-hero .display { max-width: 26ch; }
.alt-hero .lede { margin-top: 14px; max-width: 88ch; }
.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: 1020px; }
.alt-graph-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* re-assert the off state over the page-level channel opacities */
.edge.t1.off, .edge.t2.off, .edge.ret.off { opacity: 0.07; }

/* core */
.hub-ring { fill: rgba(255, 255, 255, 0.6); stroke: var(--pink); stroke-width: 1.6; }
.hub-store { fill: var(--teal); stroke: var(--teal); }
.hub-center-lbl { text-anchor: middle; }
.hub-band-lbl { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); text-anchor: middle; }
.hub-mpx-lbl { fill: var(--pink); }
.hub-pixdot { stroke: #fff; stroke-width: 1.2; }
.hub-store-title { font-family: var(--font); font-size: 16px; font-weight: 600; fill: #fff; text-anchor: middle; }
.hub-store-sub { font-family: var(--mono); font-size: 9.5px; fill: rgba(255, 255, 255, 0.75); text-anchor: middle; }
.hub-store-t1 { font-family: var(--mono); font-size: 10px; fill: #ffb3cd; text-anchor: middle; }

/* channels */
.edge.t2 { opacity: 0.5; }
.edge.t1 { opacity: 0.55; }
.edge.ret { stroke: var(--coral); opacity: 0.32; }
.hub-edge-lbl { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.hub-edge-lbl.pinkink { fill: var(--pink); }
.hub-edge-lbl.retink { fill: var(--coral); }
.dim-chip { opacity: 0.3; transition: opacity 0.4s; }

/* cards */
.hub-card a { text-decoration: none; cursor: pointer; }
.hub-card .node-box:hover { stroke: var(--muted-soft); }
.hub-card.flash .node-box { stroke: var(--pink); stroke-width: 2; }
.hub-card a:focus-visible .node-box { stroke: var(--pink); stroke-width: 2; }

@media (max-width: 760px) {
  .alt-legend { margin-left: 0; }
}