/* Controls: buttons, fields, chips, segmented controls, panels. */

button, input, select, textarea { font: inherit; color: var(--text); }
input, select, textarea { background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 var(--s3); height: 2.5rem; min-width: 0; }
textarea { height: auto; padding: var(--s2) var(--s3); resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: #3A4252; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fail); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent); }
::placeholder { color: #5C6577; }

/* ---------- buttons ---------- */
/* Sizes: default 36px, .l 44px, .s 32px (36px hit area). Icon-only buttons are square (.icon).
   Colours go through --sf (fill) and --sb (border), so slanted shapes (.split, nudges) can draw
   their border along the diagonal too. */
.btn { --sf: var(--panel-2); --sb: var(--line-2); position: relative; height: 2.25rem; padding: 0 var(--s3); background: var(--sf); border: 1px solid var(--sb); border-radius: var(--radius); color: var(--text); font: 600 .875rem var(--body); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; transition: background-color var(--t-press), border-color var(--t-press), color var(--t-press), transform var(--t-press); }
.btn:hover { --sb: #5B6478; --sf: var(--hover); }
.btn:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .42; cursor: default; }
.btn[aria-disabled="true"]:hover { --sb: var(--line-2); --sf: var(--panel-2); }
.btn.l { height: 2.75rem; padding: 0 var(--s4); }
.btn.s, .btn.small { height: 2rem; padding: 0 .625rem; font-size: .8125rem; }
.btn.s::before, .btn.small::before { content: ''; position: absolute; inset: -2px; }
.btn.icon { padding: 0; width: 2.25rem; }
.btn.l.icon { width: 2.75rem; }
.btn.s.icon { width: 2rem; }
.btn.display, .btn.display-btn { font: 700 1.125rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
.btn.display-btn { height: 2.75rem; }

.btn.primary { --sf: var(--accent); --sb: var(--accent); color: var(--on-accent); }
.btn.primary:hover { --sf: var(--accent-hi); --sb: var(--accent-hi); }
.btn.primary:focus-visible, .btn.danger-solid:focus-visible, .btn.rec.on:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }
.btn.ghost { --sf: transparent; --sb: transparent; color: var(--muted); }
.btn.ghost:hover { --sf: var(--hover); --sb: transparent; color: var(--text); }
.btn.ghost[aria-pressed="true"] { color: var(--accent); }
.btn.danger-solid { --sf: var(--fail); --sb: var(--fail); color: var(--on-fail); }
.btn.danger-solid:hover { --sf: #FF6B76; --sb: #FF6B76; }
.btn.danger-outline, .btn.danger { color: var(--text); }
.btn.danger-outline { --sb: rgba(255, 77, 90, .45); color: #FF7A84; }
.btn.danger-outline:hover, .btn.danger:hover { --sb: var(--fail); --sf: rgba(255, 77, 90, .08); color: var(--fail); }
.btn.warn-outline { --sb: rgba(255, 176, 32, .6); color: var(--amber); }
.btn.warn-outline:hover { --sb: var(--amber); --sf: rgba(255, 176, 32, .08); }

/* Record: tally-red outline at rest; filled red with a blinking dot and timer while recording. */
.btn.rec { --sb: rgba(229, 32, 46, .7); color: #FF6B75; }
.btn.rec:hover { --sb: var(--tally); --sf: rgba(229, 32, 46, .1); }
.btn.rec.on { --sf: var(--tally); --sb: var(--tally); color: #fff; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.btn.rec.on .icon { animation: blink2 1s steps(2) infinite; }

/* Split button: [● REC | ↺ −30s], slanted outer ends. A clip-path would cut the border off the
   diagonal, so the button's own background is the border colour (clipped to the slanted shape) and
   ::before, the same shape 1px inside, is the fill. Set colours with --sf / --sb, not background. */
.split { display: inline-flex; }
.split > .btn { border-radius: 0; isolation: isolate; }
.split > .btn:first-child { clip-path: polygon(.5rem 0, 100% 0, 100% 100%, 0 100%); padding-left: 1rem; }
.split > .btn:last-child { clip-path: polygon(0 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); padding-right: 1rem; margin-left: -1px; }
/* The halves overlap by 1px (each keeps its whole outline); the hovered one comes to the front. */
.split > .btn:hover, .split > .btn:focus-visible { z-index: 1; }
.split > .btn:first-child, .split > .btn:last-child { background: var(--sb); border-color: transparent; }
.split > .btn:first-child::before, .split > .btn:last-child::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--sf), var(--sf)), var(--under, var(--panel)); clip-path: inherit; transition: background-color var(--t-press); }

/* Pending request: spinner replaces the icon, button can't be pressed twice. */
.btn.pending { pointer-events: none; }
.btn.pending .icon { visibility: hidden; }
.btn.pending::after { content: ''; position: absolute; left: calc(50% - .5rem); top: calc(50% - .5rem); width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn.pending:has(> span) { color: transparent; }
.btn.pending:has(> span)::after { border-color: var(--text); border-right-color: transparent; }
a.btn { color: var(--text); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; align-items: center; background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2px; gap: 2px; height: 2.25rem; }
.seg > button { height: 100%; min-width: 2rem; padding: 0 var(--s3); display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 0; border-radius: 3px; color: var(--muted); font: 600 .8125rem var(--body); cursor: pointer; transition: background-color var(--t-press), color var(--t-press); }
.seg > button:hover { color: var(--text); background: var(--hover); }
.seg > button[aria-pressed="true"] { background: var(--panel-2); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.seg-label { font: 600 .6875rem var(--mono); letter-spacing: .08em; color: var(--muted); padding: 0 var(--s2); text-transform: uppercase; }
.seg.l { height: 2.75rem; }
/* Preview quality (Feeds and Multiview bands): "720p", not "720P". */
.pq .unit { text-transform: none; }

/* ---------- fields ---------- */
.field { display: grid; gap: var(--s1); font-size: .8125rem; color: var(--muted); }
.field-err { color: var(--fail); font-size: .8125rem; min-height: 0; }
.field-err:empty { display: none; }
.err { color: var(--fail); font-size: .8125rem; margin: var(--s1) 0 0; word-break: break-word; }
.err:empty { display: none; }
.hint { color: var(--muted); font-size: .8125rem; margin: 0 0 var(--s4); }
.k { color: var(--muted); font: .75rem var(--mono); letter-spacing: .06em; }
input.ms { width: 6rem; font-family: var(--mono); }

/* ---------- chips (state vocabulary) ---------- */
/* Skewed like the brand; text sits upright enough at -10deg to stay legible. */
.chip { display: inline-flex; align-items: center; gap: var(--s1); height: 1.5rem; padding: 0 .5625rem; font: 700 .8125rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; transform: skewX(-10deg); white-space: nowrap; border: 1px solid transparent; }
.chip .icon { transform: skewX(10deg); }
.c-live { background: var(--live); color: var(--on-live); }
.c-warn { background: var(--amber); color: var(--on-amber); }
.c-warn-line { border-color: var(--amber); color: var(--amber); }
.c-bad { background: var(--fail); color: var(--on-fail); }
.c-off { background: var(--line); color: var(--muted); }
.c-rec { background: var(--tally); color: #fff; font-variant-numeric: tabular-nums; }
.c-standby { background: var(--amber); color: var(--on-amber); }
.c-line { border-color: var(--line-2); color: var(--muted); }
.c-lock { border-color: rgba(54, 214, 255, .6); color: var(--accent); }
.c-view { border-color: var(--line-2); color: var(--text-2); }
.blink { animation: blink2 1s steps(2) infinite; }
.blink-2s { animation: blink2 1s steps(2) 2; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: var(--s4) 1.25rem; margin-bottom: var(--s4); }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
label.btn { cursor: pointer; }
label.btn:has(+ input:focus-visible), label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { font: 600 .6875rem var(--mono); padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 3px; color: var(--text-2); white-space: nowrap; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .625rem var(--s2); border-bottom: 1px solid var(--line); font-size: .875rem; vertical-align: middle; }
th { color: var(--muted); font: 700 .8125rem var(--display); letter-spacing: .06em; text-transform: uppercase; }
td.num { font-family: var(--mono); }