/* Shell: top bar (brand, tabs + ink, readouts, tally, user), page band, login. */

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: var(--s5); padding: 0 var(--gutter); height: var(--bar-h); background: var(--chrome); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
/* The AMG SYNC lockup; its marks and motion are in brand.css. */
.brand { display: flex; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; }

.tabs { position: relative; display: flex; gap: 2px; align-self: stretch; align-items: center; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: 100%; background: none; border: 0; color: var(--muted); font: italic 700 1.125rem var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 0 var(--s3); cursor: pointer; transition: color var(--t-press); text-decoration: none; }
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); }
.tab:focus-visible { outline-offset: -4px; }
/* The ink: one element that travels between tabs (S2, S3). Positioned by translate + scaleX only. */
.tab-ink { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--accent); transform-origin: 0 50%; pointer-events: none; will-change: transform; }
.tab-badge { display: inline-flex; align-items: center; gap: 3px; height: 1.125rem; padding: 0 .375rem; font: 700 .75rem/1 var(--mono); font-style: normal; letter-spacing: 0; transform: skewX(-10deg); }
.tab-badge.rec { background: var(--tally); color: #fff; }
.tab-badge.rec::before { content: ''; width: .375rem; height: .375rem; border-radius: 50%; background: #fff; animation: blink2 1s steps(2) infinite; }
.tab-badge.warn { background: var(--amber); color: var(--on-amber); }
.tab-badge.pop { animation: rollIn var(--t-in) var(--e-roll) both; }

/* Readouts: plain numbers, coloured only when they cross a threshold. Click for the System panel. */
.readouts { display: flex; align-items: center; gap: var(--s4); height: 2.5rem; padding: 0 var(--s3); background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; font: .8125rem var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.readouts:hover { background: var(--hover); border-color: var(--line-2); }
.ro { display: inline-flex; align-items: baseline; gap: .375rem; white-space: nowrap; }
.ro-k { font-size: .6875rem; letter-spacing: .08em; color: var(--muted); }
.ro.hot .ro-v { color: var(--amber); }
.ro.crit .ro-v { color: var(--fail); }
.ro.flash .ro-v { animation: bump 500ms var(--e-out); }

/* Tally: NOT PULLED (grey) / ON AIR 26/28 (red) / amber when a pulled output was dropped. */
.tally { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--s2); height: 2.25rem; padding: 0 var(--s4); background: var(--line); color: var(--muted); transform: skewX(-10deg); font: 800 1.125rem var(--display); letter-spacing: .1em; white-space: nowrap; cursor: default; }
.tally::before { content: ''; position: absolute; inset: 0; background: var(--tally); transform: scaleX(0); transform-origin: left; transition: transform var(--t-in) var(--e-whip); }
.tally::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; opacity: 0; }
.tally > * { position: relative; }
.tally-dot { width: .5625rem; height: .5625rem; border-radius: 50%; background: currentColor; }
.tally-n { font: 700 .875rem var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tally.on { color: #fff; }
.tally.on::before { transform: scaleX(1); }
.tally.on .tally-dot { animation: blink2 1s steps(2) infinite; }
.tally.glint::after { animation: glint 400ms var(--e-out) 200ms; opacity: 1; }
.tally.drop::before { background: var(--amber); }
.tally.drop { color: var(--on-amber); }

.user-btn { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; background: var(--line); border: 1px solid var(--line-2); display: grid; place-items: center; font: 600 .8125rem var(--body); color: var(--text-2); cursor: pointer; flex-shrink: 0; overflow: hidden; }
.user-btn:hover { border-color: var(--accent); color: var(--text); }
/* The avatar fills the button; its ring is the button's border. */
.who-av { width: 100%; height: 100%; border: 0; background: none; color: inherit; font: inherit; }
.conn-chip { animation: blink2 1s steps(2) 5; }

/* ---------- main + page band ---------- */
/* A full-screen dashboard for 16:9 displays (1080p to 4K): no centered column. */
main { padding: 0 var(--gutter) var(--s7); }
.band { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s5); }
.band-text { display: flex; flex-direction: column; gap: var(--s1); flex: 1; min-width: 18rem; }
.eyebrow { display: flex; align-items: center; gap: .625rem; min-height: 1rem; font: .75rem var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.eyebrow::before { content: ''; width: .5rem; height: .5rem; background: var(--event); transform: skewX(-14deg); flex-shrink: 0; }
.eyebrow .warn { color: var(--amber); }
.eyebrow .rec { color: #FF6B75; }
.band-title { width: fit-content; margin: 0; display: flex; align-items: baseline; gap: .625rem; font: italic 800 2.25rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.band-title > span { display: inline-block; }
.ph-slash { color: var(--accent); }
.ph-count { font-variant-numeric: tabular-nums; }
.ph-unit { color: var(--text-2); }
.band-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* The page rule: a hairline with a cyan head the width of the title. The tab ink hands off to it. */
.ph-rule { position: relative; height: 1px; margin: var(--s3) 0 var(--s4); background: var(--line); }
.ph-rule::before { content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: var(--rule-w, 6rem); background: var(--accent); transform: skewX(-14deg); transform-origin: left; transition: width var(--t-move) var(--e-out); }
.ph-rule.draw::before { animation: wipe var(--t-in) var(--e-whip) both; }
.band-title.wipe-in { animation: titleIn 280ms var(--e-out) both; }
.section-title { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s6) 0 var(--s3); font: italic 800 1.625rem var(--display); letter-spacing: .02em; text-transform: uppercase; }
.section-title::before { content: ''; align-self: center; width: 1.5rem; height: 3px; background: var(--accent); transform: skewX(-14deg); transform-origin: left; }
.section-title.draw::before { animation: wipe var(--t-in) var(--e-whip) both; animation-delay: calc(var(--i, 0) * 60ms); }
.section-title .k { font-style: normal; text-transform: none; }
/* Accounts that can only watch get a VIEW ONLY chip in the top bar. */
.view-only { display: none; }
body.only-view .view-only { display: inline-flex; }

/* ---------- login ---------- */
/* The column starts at a fixed height (sign-in with Discord sits about centred), so buttons, the
   password form or a message appearing grow it downward and never move the mark. */
.login-wrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: max(var(--s6), calc(50vh - 11rem)) var(--s5) var(--s5); }
.login { width: 100%; max-width: 24rem; display: grid; gap: .875rem; }
.login.shake { animation: shake 240ms var(--e-out); }
.login .field input { height: 2.75rem; }
.login .field input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--fail); }
.login .btn { height: 3rem; font: 700 1.25rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
.login-note { margin: 0; color: var(--muted); font-size: .8125rem; }
.login.fading > :not(.login-mark) { opacity: 0; transition: opacity var(--t-exit) var(--e-in); }
.login-form, .login-discord { display: grid; gap: .875rem; }
.login-form.reveal { animation: riseIn var(--t-in) var(--e-out) both; }
.login .btn .icon { margin-left: -.25rem; }
/* The quiet way in: a text link under Discord, never a second button. */
.login-alt { justify-self: center; padding: var(--s1) var(--s2); background: none; border: 0; border-radius: var(--radius); color: var(--muted); font: 500 .875rem var(--body); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .25rem; cursor: pointer; transition: color var(--t-press), text-decoration-color var(--t-press); }
.login-alt:hover { color: var(--text); text-decoration-color: var(--accent); }
/* A refused or cancelled Discord sign-in, or a session that ended: one clear line, edge on the left. */
.login-msg { display: flex; align-items: flex-start; gap: var(--s3); margin: 0; padding: var(--s3) var(--s4); background: var(--panel); border-left: 3px solid var(--accent); font-size: .9375rem; line-height: 1.45; color: var(--text); animation: dropIn var(--t-in) var(--e-out) both; }
.login-msg .icon { flex-shrink: 0; margin-top: .0625rem; color: var(--accent); }
.login-msg.bad { background: rgba(255, 77, 90, .08); border-left-color: var(--fail); }
.login-msg.bad .icon { color: var(--fail); }
#appRoot.arriving { animation: fadeIn var(--t-in) var(--e-out) 200ms both; }

/* ---------- system + user menus ---------- */
.sys { display: grid; gap: 6px; min-width: 22rem; padding: 2px 0 4px; }
.sys-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s3); font: .8125rem var(--mono); color: var(--text-2); }
.sys-row .warn { color: var(--amber); }
.sys-menu { max-width: 30rem; }
.user-menu { min-width: 17rem; }
.user-head { display: flex; align-items: center; gap: var(--s3); padding: 2px 0; }
.user-av { width: 2.5rem; height: 2.5rem; font-size: .875rem; }
.user-id { display: grid; gap: .375rem; min-width: 0; }
.user-head strong { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.user-menu .seg { width: 100%; }
.user-menu .seg > button { flex: 1; justify-content: center; white-space: nowrap; padding: 0 var(--s2); }
.banner .icon { flex-shrink: 0; }
.login h1 { margin-bottom: 0; }
.login-rule { margin: 0 0 var(--s2); --rule-w: 7.5rem; }
.login-rule::before { left: calc(50% - var(--rule-w) / 2); transform-origin: center; }

/* Set a password (a Discord account without one): the sign-in column, then its own title. It
   rises in plainly; the big intro is only for sign-in. */
.acct-setup-who { justify-self: center; display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; font-size: .9375rem; color: var(--text-2); }
.acct-setup-who .avatar { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }
.acct-setup-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-setup-title { margin: 0; text-align: center; font: italic 800 1.625rem/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.acct-setup-lead { margin: calc(-1 * var(--s2)) 0 var(--s1); text-align: center; font-size: .9375rem; color: var(--muted); }
.acct-setup-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s4); }
.acct-setup.acct-rise > * { animation: riseIn var(--t-in) var(--e-out) calc(var(--i, 0) * 40ms) both; }
/* Change password (user menu): each field's error sits right under it. */
.acct-pw-dlg .field-err { margin: calc(-1 * var(--s2)) 0 0; }