/* tab-pages.css, P04-S08-PH03. Styles the three tab pages and the contagion refresh text.
   It paints the structure classes of css/panels.css and css/stream.css with the shell tokens (css/terminal-shell.css, declared on .ts-scope).
   Every selector sits under .ts-scope or starts with tp-, so no old page style is touched. It loads nothing: no url(), no @import, no font.
   State is told by a shape and by words first, and by color third (DESIGN_NOTES_PH03 answer 5). Nothing here loops, and nothing moves for more than 600 ms. */

.ts-panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.ts-panel-h a{font-size:var(--fs-sm);min-height:var(--tap);display:inline-flex;align-items:center}

/* The panel's own title is the h2 above. The S05 frame repeats it as an h3, so it stays out of sight and out of the reading order. */
.ts-panel .stream-title{display:none}
.ts-panel .stream-panel{margin:0}

.ts-panel .stream-source,
.ts-panel .stream-stale,
.ts-panel .stream-loading,
.ts-panel .stream-error,
.ts-panel .stream-empty{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);line-height:var(--lh);color:var(--text-2)}
.ts-panel .stream-source::before{content:"\25CF\00a0";color:var(--teal)}
.ts-panel [data-state="stale"] .stream-source::before{content:"\25B2\00a0";color:var(--amber)}
.ts-panel .stream-stale::before{content:"\25B2\00a0";color:var(--amber)}
.ts-panel .stream-error::before{content:"\25C6\00a0";color:var(--danger)}
.ts-panel .stream-empty::before{content:"\25AC\00a0";color:var(--edge)}
.ts-panel .stream-loading::before{content:"\25CB\00a0";color:var(--edge)}
.ts-panel .stream-retry{color:var(--teal);min-height:var(--tap);padding:0 var(--sp-2)}

.ts-panel .stream-fields{display:grid;gap:var(--sp-2);margin:0}
.ts-panel .stream-field{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline}
.ts-panel .stream-label{font-size:var(--fs-xs);color:var(--text-3)}
.ts-panel .stream-value{color:var(--text-1);font-size:var(--fs-base)}
.ts-panel .stream-change{font-size:var(--fs-sm);color:var(--text-2)}
.ts-panel .stream-wall{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);color:var(--text-2)}
.ts-panel .stream-wall a{margin-left:var(--sp-2)}

.ts-panel .stream-rows{display:grid;gap:0;max-height:16rem;overflow:auto}
.ts-panel .stream-rows .stream-row{padding:var(--sp-2) 0;border-bottom:1px solid var(--line);align-items:baseline}
.ts-panel .stream-cell{min-width:0;overflow-wrap:anywhere}
.ts-panel .stream-cell[data-dir="up"] .stream-value::before{content:"\2191\00a0"}
.ts-panel .stream-cell[data-dir="down"] .stream-value::before{content:"\2193\00a0"}

.ts-panel .stream-heat{gap:var(--sp-2)}
.ts-panel .stream-tile{min-width:7rem;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-1);background:var(--heat-3)}
.ts-panel .stream-tile[data-band="low"]{background:var(--heat-1)}
.ts-panel .stream-tile[data-band="mid"]{background:var(--heat-3)}
.ts-panel .stream-tile[data-band="high"]{background:var(--heat-5)}
.ts-panel .stream-sector{display:block;font-size:var(--fs-sm);color:var(--text-1)}
.ts-panel .stream-count{font-size:var(--fs-xs);color:var(--text-3)}
.ts-panel .stream-legend{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-3)}
.ts-panel .stream-bars{color:var(--teal)}

/* The regime bar is a band under the page title, not one of the data panels. */
.tp-regime{margin-top:var(--sp-4)}
.tp-regime .stream-panel{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-1)}
.tp-regime .stream-title{display:none}
.tp-regime .stream-fields{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.tp-regime .stream-source,.tp-regime .stream-stale,.tp-regime .stream-loading,.tp-regime .stream-error,.tp-regime .stream-empty{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--text-2)}
.tp-regime .stream-source::before,.tp-regime .stream-loading::before,.tp-regime .stream-empty::before{content:"\25CF\00a0";color:var(--teal)}
.tp-regime .stream-stale::before{content:"\25B2\00a0";color:var(--amber)}
.tp-regime .stream-error::before{content:"\25C6\00a0";color:var(--danger)}
.tp-regime .stream-empty::before{content:"\25AC\00a0";color:var(--edge)}
.tp-regime .stream-loading::before{content:"\25CB\00a0";color:var(--edge)}

.tp-intro{margin:var(--sp-3) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:var(--text-2)}
.tp-views{margin-top:var(--sp-5)}
.tp-views h2{font:700 var(--fs-lg)/1.2 var(--font-text);color:var(--text-1)}
.tp-views ul{margin:var(--sp-3) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.tp-views a{min-height:var(--tap);display:inline-flex;align-items:center}
.tp-panel-intro{margin:calc(var(--sp-2) * -1) 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.tp-noscript{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--text-2)}

/* Contagion refresh text under the graph */
.tp-refresh{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text-2)}
.tp-refresh p{margin:var(--sp-1) 0}
.tp-refresh-count::before{content:"\25CF\00a0";color:var(--teal)}
.tp-refresh-stale::before{content:"\25B2\00a0";color:var(--amber)}
.tp-refresh-list summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center}
.tp-refresh [hidden]{display:none}

@media (prefers-reduced-motion:reduce){.ts-panel *,.tp-refresh *{transition:none;animation:none}}