/* jam/public/ui/studio.css — the studio's language, for every page of the jam.
   The tokens are the design system's (two-planets-creative-design design-system/tokens.css),
   which names the jam as one of its surfaces and the studio app's Live view as the reference
   where surfaces disagree: the #0a0a0c ground, cool greys, hairline rules at .12 and .25,
   square corners, IBM Plex Mono for every control, number and label (letterspaced caps
   eyebrows, tabular figures), Atkinson Hyperlegible Next to read. Warm is the one live accent;
   cool is for what arrives. Each page adds its own sheet after this one. */

@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #0a0a0c;
  --well: #070708;
  --surface: #131316;
  --elevated: #1a1a1e;
  --line: rgba(138, 138, 148, .12);
  --line-strong: rgba(138, 138, 148, .25);
  --ink: #f2f2f6;
  --ink-prose: #d4d4dc;
  --ink-2: #b8b8c4;
  --ink-3: #8e8ea0;
  --ink-dim: #5a5a68;
  --warm: #e8bc8c;
  --on-warm: #0a0a0c;
  --cool: #94b8d4;
  --warm-wash: rgba(232, 188, 140, .15);
  --cool-wash: rgba(148, 184, 212, .12);
  --danger: #f0908d;
  --success: #7fcaa0;
  --live: #0ca30c;
  /* The jam's seven figures (shared/contract.js SHAPES; music.js COLORS). */
  --figure-pulse: #8a8580;
  --figure-glance: #7fb7c9;
  --figure-lift: #9fd0a8;
  --figure-strike: #e8b25c;
  --figure-think: #b59bd6;
  --figure-fault: #e2675a;
  --figure-launch: #f4d98b;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gutter: 24px;
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);
  --accent-warm: var(--warm);
  --accent-cool: var(--cool);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--ground); color: var(--ink-2); }
body { font: 400 15px/1.55 var(--sans); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: var(--ink-dim); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--warm); }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 500; line-height: 1.2; }
p { margin: .4rem 0; }
ul, ol { margin: .3rem 0; padding-left: 1.1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--warm); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; padding: 8px 12px; background: var(--ink); color: var(--ground); z-index: 100; }
.skip:focus { left: 16px; }
.grow { flex: 1; }
.sep { margin: 0 .55em; color: var(--ink-dim); }
.num, output, time { font-variant-numeric: tabular-nums; }

/* ── type ─────────────────────────────────────────────────────────────────── */
.eyebrow { margin: 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow.warm { color: var(--warm); }
.meta { font: 300 11.5px/1.5 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hint { display: block; font: 400 13px/1.5 var(--sans); color: var(--ink-3); }
.quiet { color: var(--ink-3); }
.error, .warn { color: var(--danger); }
.danger { color: var(--danger) !important; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.lede { font: 400 17px/1.55 var(--sans); color: var(--ink-prose); max-width: 62ch; }

/* ── controls: square, outlined, mono ─────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 1px solid var(--line-strong); color: var(--ink-2); padding: 7px 12px; font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 0; white-space: nowrap; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.btn:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.primary { border-color: var(--warm); color: var(--warm); }
.btn.primary:hover { background: var(--warm); color: var(--on-warm); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { border-color: var(--line-strong); color: var(--ink-2); background: none; }
.btn .glyph { font-size: 13px; line-height: 1; letter-spacing: 0; }
.link { background: none; border: 0; padding: 4px 2px; color: var(--ink-3); font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.link:hover { color: var(--ink); }

input, textarea, select { width: 100%; background: var(--well); border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); padding: 8px 10px; font: 400 14px/1.45 var(--sans); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--warm); }
input::placeholder, textarea::placeholder { color: var(--ink-dim); }
input:disabled, textarea:disabled, select:disabled { opacity: .45; cursor: not-allowed; }
textarea { resize: vertical; }
select { appearance: none; padding-right: 28px; font: 300 13px/1.4 var(--mono); background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type=checkbox] { width: auto; accent-color: var(--warm); }
input[type=range] { -webkit-appearance: none; appearance: none; background: none; border: 0; height: 20px; padding: 0; min-width: 72px; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
input[type=range]::-moz-range-track { height: 2px; background: var(--line-strong); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: var(--ink); border-radius: 50%; border: 0; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--ink); border-radius: 50%; border: 0; }
input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--warm); }
label { display: block; font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
label > input, label > textarea, label > select { margin-top: 5px; }
.check { display: flex; gap: .5rem; align-items: center; color: var(--ink-2); }
.check input { margin: 0; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); }
.seg button { background: none; border: 0; border-left: 1px solid var(--line-strong); padding: 5px 10px; font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.seg button:first-child { border-left: 0; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--ground); }

.switch { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 30px; height: 16px; border: 1px solid var(--line-strong); border-radius: 99px; position: relative; flex: none; transition: border-color .2s; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); transition: transform .2s, background .2s; }
.switch input:checked + .track { border-color: var(--warm); }
.switch input:checked + .track::after { transform: translateX(14px); background: var(--warm); }
.switch input:focus-visible + .track { outline: 1px solid var(--warm); outline-offset: 2px; }

.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > label { flex: 1 1 9rem; }
.fold summary { cursor: pointer; color: var(--ink-3); font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; list-style: none; padding: 4px 0; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: '+ '; color: var(--warm); }
.fold[open] summary::before { content: '– '; }

/* ── the bar ──────────────────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: rgba(10, 10, 12, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 400 11.5px var(--mono); letter-spacing: .32em; text-transform: uppercase; flex: none; }
.brand img { display: block; }
.crumb { font: 400 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); padding-left: 16px; border-left: 1px solid var(--line-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crumb:empty { display: none; }
.who { font: 400 11px var(--mono); letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; }

/* A jam's state, as the studio shows live: a dot and a word. */
.state { display: inline-flex; align-items: center; gap: 7px; font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); flex: none; }
.state.live { color: var(--warm); }
.state.live::before { background: var(--live); animation: breathe 2s ease-in-out infinite; }
.state.scheduled::before { background: var(--cool); }
@keyframes breathe { 50% { opacity: .45; } }

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); padding: 20px 22px 22px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.panel-head h2, h2.label { font: 400 11.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.panel-head .count { font: 400 11px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.empty { margin: 8px 0 0; padding: 16px; border: 1px dashed var(--line-strong); font: 400 13.5px/1.5 var(--sans); color: var(--ink-3); text-align: center; }
.prose-small p { font: 400 13.5px/1.55 var(--sans); color: var(--ink-2); margin: 0 0 .6rem; }
.links { font: 400 11px/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.links a { color: var(--ink-2); text-decoration: none; }
.links a:hover { color: var(--warm); }

/* A figure's colour, by name (the page never writes a style attribute). */
.fig { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); flex: none; }
[data-shape=pulse] { --fig: var(--figure-pulse); }
[data-shape=glance] { --fig: var(--figure-glance); }
[data-shape=lift] { --fig: var(--figure-lift); }
[data-shape=strike] { --fig: var(--figure-strike); }
[data-shape=think] { --fig: var(--figure-think); }
[data-shape=fault] { --fig: var(--figure-fault); }
[data-shape=launch] { --fig: var(--figure-launch); }
.fig[data-shape] { background: var(--fig); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 10px 16px; font: 400 13.5px/1.4 var(--sans); z-index: 1200; max-width: calc(100vw - 32px); }

.foot { border-top: 1px solid var(--line); padding: 26px var(--gutter) 48px; text-align: center; font: 400 11.5px/1.7 var(--mono); letter-spacing: .03em; color: var(--ink-3); }
.foot p { margin: 0; }
.foot a { color: var(--ink-3); text-decoration-color: var(--line-strong); }
.foot a:hover { color: var(--ink); }

/* ── a page of prose (About & privacy) ─────────────────────────────────────── */
.prose { width: 100%; max-width: 44rem; margin: 0 auto; padding: 48px var(--gutter) 64px; flex: 1; }
.prose h1 { font: 500 clamp(26px, 4vw, 36px)/1.15 var(--sans); letter-spacing: -.01em; margin: 10px 0 14px; }
.prose h2 { font: 400 11.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 36px 0 10px; }
.prose p { color: var(--ink-prose); font-size: 15.5px; }
.prose a { color: var(--warm); }

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .bar { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}