/* Live Studio · © 2026 The Digital Third. All rights reserved. Proprietary and confidential: no copying, reuse or reverse engineering without written permission. */
/* D3 brand tokens (from ~/.claude/skills/d3-brand/tokens.css) */
@font-face { font-family: 'Druk Cond Super'; src: url('https://www.thedigitalthird.com/fonts/DrukCond-Super.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Druk Wide'; src: url('https://www.thedigitalthird.com/fonts/DrukWide-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'IBM Plex Mono'; src: url('https://www.thedigitalthird.com/fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Inter'; src: url('https://www.thedigitalthird.com/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: block; }

:root {
  --black: #000; --white: #fff; --studio-grey: #eaeaea; --dark-grey: #525252;
  --line: rgba(0,0,0,.4); --white-line: rgba(255,255,255,.4);
  --green: #2bf3ab; --red: #ff4848;
  --rainbow: linear-gradient(90deg, #ef4a5a, #faa744, #fddd34, #6ec49a, #77d1f4);
  --ease: cubic-bezier(0.21, 1, 0.34, 1);
}
* { box-sizing: border-box; margin: 0; }
.display { font-family: 'Druk Cond Super', 'Arial Narrow', sans-serif; text-transform: uppercase; line-height: .8; letter-spacing: .01em; }
.wide { font-family: 'Druk Wide', Arial, sans-serif; font-weight: 700; text-transform: uppercase; line-height: .96; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: 12px; }
.body { font-family: 'Inter', Arial, sans-serif; letter-spacing: .02em; line-height: 1.35; }

/* Light app pages (join, control) */
.page { background: #fff; color: #000; min-height: 100vh; padding: 20px; font-family: 'Inter', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.frame { border-top: .5px solid var(--line); border-left: .5px solid var(--line); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cell { border-right: .5px solid var(--line); border-bottom: .5px solid var(--line); padding: 20px; min-width: 0; }
.cell.black { background: #000; color: #fff; }
.q1 { grid-column: span 3; } .q2 { grid-column: span 6; } .q3 { grid-column: span 9; } .q4 { grid-column: span 12; }
@media (max-width: 760px) { .q1, .q2, .q3 { grid-column: span 12; } }
.lede { font-size: 17px; }
.muted { color: var(--dark-grey); font-size: 15px; }

.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px;
  border: .5px solid #000; background: #fff; color: #000; cursor: pointer; font: 700 15px/1 'Druk Wide', Arial, sans-serif; text-transform: uppercase; transition: color .45s var(--ease), transform .12s var(--ease); }
/* App controls (control, guest, viewer pages):
   - Hover firms the hairline into a solid edge on every button, picture tiles included. No fill and no
     motion: a tool is hovered all day, so hover stays quiet. (The website's text CTAs roll instead.)
   - Switching on wipes the fill up from below in the switch's own colour (--on, black by default; --on-ink is
     the text on it). Switching off drops it back down. It plays whoever flips it, so changes are visible.
   - One-shot buttons (no data-on) flash the fill while pressed and wipe it away on release: a "fired" beat. */
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--on, #000); clip-path: inset(100% 0 0 0); transition: clip-path .45s var(--ease); }
.btn:hover { box-shadow: inset 0 0 0 1.5px var(--edge, #000); }
.btn[data-on='true']::before, .btn:not([data-on]):not([aria-expanded]):active::before { clip-path: inset(0); }
.btn:not([data-on]):not([aria-expanded]):active::before { transition-duration: .08s; }   /* one-shot press flash; menu buttons wipe like a switch */
/* A button whose menu is open counts as on. */
.btn[aria-expanded='true']::before { clip-path: inset(0); }
.btn[aria-expanded='true'] { color: var(--on-ink, #fff); }
.btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.btn[data-on='true'], .btn:not([data-on]):not([aria-expanded]):active { color: var(--on-ink, #fff); }
/* On a filled button the edge shows as a thin inner line instead. */
.btn[data-on='true']:hover, .btn.solid:hover { box-shadow: inset 0 0 0 1.5px var(--on, #000), inset 0 0 0 2.5px var(--on-ink, #fff); }
/* A colour key square inside a switch turns into an outline when the switch fills with that colour. */
.btn[data-on='true'] .gc { background: transparent !important; border: 1px solid currentColor; }
.btn:active { transform: scale(.96); }
.btn.solid { background: #000; color: #fff; }
.btn:disabled { opacity: .35; pointer-events: none; }
input, select { width: 100%; min-height: 52px; border: .5px solid #000; padding: 0 16px; font: 17px 'Inter', Arial, sans-serif; background: #fff; border-radius: 0; }
label.mono { display: block; margin-bottom: 8px; }
input[type='range'] { min-height: 0; height: 24px; padding: 0; border: 0; accent-color: #000; background: none; }
input[type='checkbox'] { width: 18px; height: 18px; min-height: 0; accent-color: #000; margin: 0; }
/* Compact controls for dense operator panels */
.btn.chip { min-height: 32px; padding: 0 12px; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .02em; }
select.sm, input.sm { min-height: 40px; font-size: 14px; padding: 0 10px; }
/* Selects draw their own chevron, inset from the edge like the padding on the left, on every page. */
select { appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; padding-right: 44px; }
select.sm { background-position: right 12px center; background-size: 14px; padding-right: 36px; }
.rainbow { height: 6px; background: var(--rainbow); }
@media (prefers-reduced-motion: reduce) { .btn, .btn::before { transition: none; } }
/* Shared icons (js/icons.js) and segmented switches, used the same way on every page. */
.ic { width: 18px; height: 18px; flex: none; }
.btn { gap: 10px; }
.btn.chip .ic { width: 17px; height: 17px; }
.btn.chip.tall .ic, .top .btn .ic { width: 20px; height: 20px; }   /* the main action buttons up top */
.segs { display: inline-flex; }
.segs .btn + .btn { margin-left: -.5px; }
a.btn { text-decoration: none; }
/* Dropdown menus and on/off switches, shared by control and guest pages. */
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: .5px solid #000; padding: 8px; display: grid; gap: 6px; z-index: 25; min-width: 230px; }
.tg { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.tg input { position: absolute; opacity: 0; width: 0; height: 0; }
.tg i { width: 40px; height: 22px; border: .5px solid #000; position: relative; flex: none; transition: background .25s var(--ease); }
.tg i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; background: #000; transition: transform .25s var(--ease), background .25s; }
.tg input:checked + i { background: #000; }
.tg input:checked + i::after { transform: translateX(18px); background: #fff; }
.tg input:focus-visible + i { outline: 2px solid #000; outline-offset: 2px; }
.tg input:disabled + i, .tg input:disabled ~ span { opacity: .35; }

[data-needs][hidden] { display: none !important; }
/* Empty-state and hint text inside a grid takes the whole row, so it never wraps in one narrow column. */
.muted-empty, p.hint { grid-column: 1 / -1; }
/* Hover tips (js/tips.js): one small black label style for every tip in the app. */
.tip-pop { position: fixed; left: 0; top: 0; z-index: 300; width: max-content; max-width: 280px; padding: 8px 10px; background: #000; color: #fff;
  font: 13px/1.35 'Inter', Arial, sans-serif; letter-spacing: .01em; pointer-events: none; display: none; white-space: pre-line; }   /* \n starts a new line */
.tip-pop.on { display: block; }   /* appears in place after the hover pause; no wipe */