/* Pyre.Stream Home rework (plan 2026-10-26-stream-home-rework). Tokens only:
   no raw colour, no px. Phone first: one column under 40em, KPI strip three
   then two across, nothing scrolls sideways (min-width: 0 on every grid child). */
#sec-home .home { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; container: home / inline-size; }
#sec-home .home-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); min-width: 0; }
#sec-home .home-row:not(:has(> .home-slot:not(:empty):not(.home-slot--off))) { display: none; }
#sec-home .home-slot { min-width: 0; }
#sec-home .home-slot:empty { display: none; }
#sec-home .home-slot--off { display: none; }
/* The rows are sized by their container, not the viewport (the sidebar takes
   width), so the wide card spans two tracks only when the row has room for two
   (two 18rem tracks and the gap); below that it takes the one track there is and
   never makes an implicit column that scrolls sideways. */
#sec-home .home-slot--wide { grid-column: 1 / -1; }
@container home (min-width: 38rem) {
  #sec-home .home-slot--wide { grid-column: span 2; }
}
#sec-home .home-card { height: 100%; min-width: 0; }
#sec-home .home-card .card-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
#sec-home .home-sub, #sec-home .home-why { color: var(--text-dim); font-size: var(--fs-small); }
#sec-home .home-more { margin-left: auto; font-size: var(--fs-small); }
#sec-home .home-foot { color: var(--text-faint); font-size: var(--fs-micro); margin: 0; padding: 0 var(--space-4) var(--space-4); }
#sec-home .home-stale { color: var(--warn); font-size: var(--fs-small); margin: var(--space-1) 0 0; }
#sec-home .home-stale[hidden] { display: none; }
#sec-home .home-src { display: inline-flex; font-size: var(--fs-micro); color: var(--text-faint); border: thin solid var(--border); border-radius: var(--r-chip); padding: 0 var(--space-1); }

#sec-home .home-band { display: grid; grid-template-columns: minmax(0, 1.6fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) var(--space-5); border: thin solid var(--border-accent); border-radius: var(--r-lg); background: var(--surface-raised); min-width: 0; }
#sec-home .home-band__state { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
#sec-home .home-band__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-title); font-weight: 600; }
#sec-home .home-band__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; }
#sec-home .home-fact { min-width: 0; }
#sec-home .home-fact dt, #sec-home .home-band__label { font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }
#sec-home .home-fact dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
#sec-home .home-band__col { display: flex; flex-direction: column; gap: var(--space-2); border-left: thin solid var(--border); padding-left: var(--space-4); min-width: 0; }
#sec-home .home-v { font-weight: 600; overflow-wrap: anywhere; }
#sec-home .home-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#sec-home .home-chip { display: inline-flex; align-items: center; border: thin solid var(--border); border-radius: var(--r-chip); padding: 0 var(--space-2); font-size: var(--fs-micro); font-weight: 600; color: var(--text-dim); }
#sec-home .home-chip--ok { color: var(--ok); }
#sec-home .home-chip--warn { color: var(--warn); }
#sec-home .home-chip--bad { color: var(--danger); }
#sec-home .home-chip--live { color: var(--on-strong); background: var(--accent); border-color: var(--accent); }
#sec-home .home-note { color: var(--text-faint); font-size: var(--fs-micro); margin: 0; }
#sec-home .home-open { align-self: flex-start; min-height: var(--touch-min); }

#sec-home .home-att, #sec-home .home-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; min-width: 0; }
#sec-home .home-att { gap: var(--space-2); }
#sec-home .home-att li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--surface-inset); min-width: 0; }
#sec-home .home-att .t { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#sec-home .home-att a { margin-left: auto; align-self: center; white-space: nowrap; flex: none; min-height: var(--touch-min); display: inline-flex; align-items: center; }
#sec-home .home-list li { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: thin solid var(--border); min-width: 0; }
#sec-home .home-list li:last-child { border-bottom: 0; }
#sec-home .home-list .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
#sec-home .home-list .amt { font-family: var(--font-mono); white-space: nowrap; }
#sec-home .home-setup .sec-health-label { white-space: nowrap; flex: none; }

#sec-home .home-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-3); }
#sec-home .home-kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: thin solid var(--border); border-radius: var(--r-md); background: var(--surface-inset); min-width: 0; }
#sec-home .home-kpi .stat-value { font-family: var(--font-mono); font-size: var(--fs-section); }
#sec-home .home-spark .sk { width: 100%; height: auto; display: block; }
#sec-home .home-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: var(--space-3); }
#sec-home .home-clip { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
#sec-home .home-clip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-inset); }

@media (max-width: 40em) {
  #sec-home .home-band { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  #sec-home .home-band__col { border-left: 0; padding-left: 0; border-top: thin solid var(--border); padding-top: var(--space-3); }
  #sec-home .home-row { grid-template-columns: minmax(0, 1fr); }
  #sec-home .home-slot--wide { grid-column: auto; }
  #sec-home .home-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sec-home .home-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 26em) {
  #sec-home .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}