/* Shortwave: "night band" control room.
   Warm graphite surfaces, one signal-orange accent (the tuning needle), Archivo Expanded for headings
   and readouts, Inter for UI, system mono for data. Mobile first; one column until 760px.
   Radius rule: 4px tags/chips, 8px controls and rows, 12px panels/dialogs/media. Dark only by design. */

@font-face { font-family:"Inter"; src:url("/static/fonts/inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("/static/fonts/archivo.woff2") format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }

:root {
  color-scheme: dark;
  /* surfaces, darkest to lightest */
  --ink-0:#0f100e; --ink-1:#171815; --ink-2:#1f201c; --ink-3:#2b2c27; --ink-4:#3b3c35; --well:#0b0c0a;
  /* text */
  --fg:#ece9e1; --fg-2:#a8a497; --fg-3:#76736a;
  /* one accent + semantic states */
  --accent:#ff6b2c; --accent-ink:#1c0c03; --accent-soft:color-mix(in oklab, var(--accent) 14%, var(--ink-1));
  --ok:#8fd19e; --warn:#f0c252; --bad:#ff6470;
  /* legacy aliases (scripts reference these inline) */
  --bg:var(--ink-0); --panel:var(--ink-1); --line:var(--ink-3); --text:var(--fg); --dim:var(--fg-2);

  /* type */
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Archivo", "Inter", system-ui, sans-serif;
  --font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --mono:var(--font-mono); --font:var(--font-ui);
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem; --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.125rem;

  /* spacing (4px grid) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* shape */
  --r-1:4px; --r-2:8px; --r-3:12px; --radius:var(--r-3);

  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;

  /* chrome sizes */
  --hdr:56px; --tabbar:58px; --safe-b:env(safe-area-inset-bottom, 0px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box }
html { background:var(--ink-0); color:var(--fg); font:400 var(--t-base)/1.55 var(--font-ui); -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01" }
body { margin:0; min-height:100dvh; padding-bottom:calc(var(--tabbar) + var(--safe-b)) }
::selection { background:color-mix(in oklab, var(--accent) 40%, transparent); color:var(--fg) }
a { color:inherit }
main a:not(.btn):not(.item) { text-decoration:underline; text-decoration-color:var(--ink-4); text-underline-offset:3px; transition:text-decoration-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease) }
main a:not(.btn):not(.item):hover { color:var(--fg); text-decoration-color:var(--accent) }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-1) }
img, video { max-width:100% }

h1, h2, h3 { margin:0 0 var(--s-3); line-height:1.15; font-weight:600; color:var(--fg) }
h1 { font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:var(--t-xl); letter-spacing:-.015em; text-wrap:balance }
h2 { font-family:var(--font-display); font-stretch:112%; font-size:var(--t-md); letter-spacing:.005em; display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-6) }
h2::after { content:""; flex:1; height:1px; background:var(--ink-3) }
dialog h2 { margin-top:0 } dialog h2::after { display:none }
h3 { font-size:var(--t-md); letter-spacing:-.005em }
p { margin:0 0 var(--s-3) }
.dim { color:var(--fg-2) } .err { color:var(--bad) } .ok { color:var(--ok) }
.mono { font-family:var(--font-mono); font-size:.86em; letter-spacing:0 }
b, strong { font-weight:600 }

.wrap { max-width:1180px; margin:0 auto; padding:var(--s-5) var(--s-4) var(--s-7) }
.wrap > h1:first-child, .wrap > .row.between:first-child { margin-bottom:var(--s-5) }
.wrap > .row.between:first-child h1 { margin:0 }
.wrap > h1 + p.dim { margin-top:calc(var(--s-2) * -1); margin-bottom:var(--s-5) }

/* ---------- header + nav ---------- */
header.top { position:sticky; top:0; z-index:20; height:var(--hdr); display:flex; align-items:center; gap:var(--s-4); padding:0 var(--s-4); background:var(--ink-0); border-bottom:1px solid var(--ink-3) }
/* blur only on desktop: backdrop-filter makes the header a containing block, which would trap the fixed mobile tab bar */
header.top .brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-stretch:125%; font-weight:800; font-size:.9375rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg); white-space:nowrap }
header.top .brand b { font-weight:300; color:var(--fg-2) }
header.top .brand svg { flex:none; display:block }
header.top .ver { margin-left:auto; display:inline-flex; align-items:center; gap:var(--s-2); color:var(--fg-3); font:500 var(--t-xs)/1 var(--font-mono) }
header.top .ver b { color:var(--warn); border:1px solid color-mix(in oklab, var(--warn) 40%, transparent); padding:3px 6px; border-radius:var(--r-1); font-weight:600; letter-spacing:.06em }

nav.tabs { position:fixed; z-index:20; left:0; right:0; bottom:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; height:calc(var(--tabbar) + var(--safe-b)); padding-bottom:var(--safe-b); background:var(--ink-1); border-top:1px solid var(--ink-3) }
nav.tabs a { position:relative; display:grid; place-items:center; font-size:var(--t-xs); font-weight:500; letter-spacing:.01em; text-decoration:none; color:var(--fg-2); transition:color var(--dur-1) var(--ease); -webkit-tap-highlight-color:transparent }
nav.tabs a::before { content:""; position:absolute; top:-1px; left:50%; width:28px; height:2px; border-radius:0 0 2px 2px; background:var(--accent); transform:translateX(-50%) scaleX(0); transition:transform var(--dur-2) var(--ease) }
nav.tabs a.on { color:var(--fg); font-weight:600 }
nav.tabs a.on::before { transform:translateX(-50%) scaleX(1) }
nav.tabs a:active { color:var(--fg) }

@media (min-width:760px) {
  :root { --hdr:60px }
  body { padding-bottom:0 }
  header.top { padding:0 var(--s-5); gap:var(--s-6); background:color-mix(in oklab, var(--ink-0) 86%, transparent); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2) }
  nav.tabs { position:static; height:100%; padding:0; display:flex; gap:var(--s-1); background:none; border:0 }
  nav.tabs a { padding:0 var(--s-3); font-size:var(--t-sm) }
  nav.tabs a::before { top:auto; bottom:-1px; width:auto; left:var(--s-3); right:var(--s-3); transform:scaleX(0); border-radius:2px 2px 0 0 }
  nav.tabs a.on::before { transform:scaleX(1) }
  nav.tabs a:hover { color:var(--fg) }
  .wrap { padding:var(--s-6) var(--s-5) var(--s-8) }
  h1 { font-size:var(--t-2xl) }
}

/* ---------- layout ---------- */
.grid { display:grid; gap:var(--s-4); grid-template-columns:minmax(0,1fr) }
@media (min-width:760px) { .grid.two { grid-template-columns:repeat(2, minmax(0,1fr)) } .grid.three { grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (min-width:1040px) { .grid.split > .list { position:sticky; top:calc(var(--hdr) + var(--s-5)) } .grid.three { grid-template-columns:repeat(3, minmax(0,1fr)) } .grid.two.review-grid, .grid.two.split { grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start } }
.row { display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap }
.row.between { justify-content:space-between; gap:var(--s-3) }
.spacer { flex:1 }

/* ---------- surfaces ---------- */
.card { background:var(--ink-1); border:1px solid var(--ink-3); border-radius:var(--r-3); padding:var(--s-4) }
@media (min-width:760px) { .card { padding:var(--s-5) } }
.card h3 { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-2) }
.card > .row:last-child { margin-top:var(--s-4) }
.card p:last-of-type { margin-bottom:0 }
.card p + .row, .card p + .btn, .card .list + .btn { margin-top:var(--s-4) }

/* channel cards on the queue */
.chan { display:flex; flex-direction:column; gap:var(--s-3) }
.chan h3 { margin:0 }
.chan h3 .name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chan p { margin:0 }
.chan .row { margin-top:auto; padding-top:var(--s-1) }
.kv { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-3); margin:0; padding:var(--s-3) 0; border-top:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3) }
.kv dt { font-size:var(--t-xs); color:var(--fg-3); margin-bottom:2px }
.kv dd { margin:0; font-family:var(--font-display); font-stretch:115%; font-weight:600; font-size:var(--t-md); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.last { min-height:24px; font-size:var(--t-sm); color:var(--fg-2); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) }
.last a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-4); border-radius:var(--r-2); border:1px solid var(--ink-4); background:var(--ink-2); color:var(--fg); font:500 var(--t-sm)/1 var(--font-ui); letter-spacing:.005em; white-space:nowrap; cursor:pointer; text-decoration:none; transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); -webkit-tap-highlight-color:transparent }
.btn:hover { background:var(--ink-3); border-color:#4b4c44 }
.btn:active { transform:translateY(1px) scale(.985) }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:650 }
.btn.primary:hover { background:#ff7d45; border-color:#ff7d45 }
.btn.danger { color:var(--bad); border-color:color-mix(in oklab, var(--bad) 35%, var(--ink-3)); background:color-mix(in oklab, var(--bad) 7%, var(--ink-1)) }
.btn.danger:hover { background:color-mix(in oklab, var(--bad) 14%, var(--ink-1)); border-color:color-mix(in oklab, var(--bad) 55%, var(--ink-3)) }
.btn.sm { min-height:34px; padding:0 var(--s-3); font-size:var(--t-sm) }
.btn[disabled] { opacity:.45; cursor:default; transform:none }
@media (pointer:coarse) { .btn.sm { min-height:40px } }

/* segmented filter (review) */
.seg { display:inline-flex; gap:2px; padding:3px; background:var(--ink-1); border:1px solid var(--ink-3); border-radius:var(--r-2) }
.seg .btn { border:0; background:none; color:var(--fg-2); min-height:30px; padding:0 var(--s-3); border-radius:5px; text-transform:capitalize }
.seg .btn:hover { color:var(--fg); background:var(--ink-2) }
.seg .btn.primary { background:var(--ink-3); color:var(--fg); font-weight:600 }
@media (pointer:coarse) { .seg .btn { min-height:36px } }

/* ---------- forms ---------- */
label { display:block; font-size:var(--t-sm); font-weight:500; color:var(--fg-2); margin:var(--s-4) 0 6px }
label:first-child { margin-top:0 }
input, select, textarea { width:100%; min-height:44px; padding:10px 12px; font:400 1rem/1.4 var(--font-ui); color:var(--fg); background:var(--well); border:1px solid var(--ink-3); border-radius:var(--r-2); transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease) }
@media (min-width:760px) { input, select, textarea { font-size:var(--t-base) } }
input::placeholder, textarea::placeholder { color:var(--fg-3) }
input:hover, select:hover, textarea:hover { border-color:var(--ink-4) }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent) }
textarea { min-height:96px; resize:vertical }
select { cursor:pointer }
input[type="number"] { font-variant-numeric:tabular-nums }
.field-row { display:grid; gap:0 var(--s-3); grid-template-columns:repeat(2, minmax(0,1fr)); align-items:end }
.field-row label { margin-top:var(--s-4) }
details { margin-top:var(--s-3) }
summary { cursor:pointer; font-size:var(--t-sm) }
details ul { margin:var(--s-3) 0 0; padding-left:var(--s-4); font-size:var(--t-xs); line-height:1.6; color:var(--fg-2); max-height:260px; overflow:auto }
details li b { color:var(--fg) }

/* ---------- status tags ---------- */
.pill { --c:var(--fg-2); display:inline-flex; align-items:center; gap:6px; flex:none; height:22px; padding:0 7px; border-radius:var(--r-1); font:600 10.5px/1 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--c); background:color-mix(in oklab, var(--c) 11%, transparent); border:1px solid color-mix(in oklab, var(--c) 26%, transparent); white-space:nowrap }
.pill.running, .pill.uploading { --c:var(--warn) }
.pill.rendered, .pill.approved, .pill.published, .pill.live, .pill.active, .pill.uploaded { --c:var(--ok) }
.pill.failed, .pill.rejected, .pill.killed { --c:var(--bad) }
.pill.pending, .pill.paused, .pill.queued { --c:var(--fg-2) }
/* a live job transmits: the only dot in the system, and it means something */
.pill.running::before, .pill.uploading::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:signal 1.6s var(--ease) infinite }
@keyframes signal { 0%, 100% { opacity:1 } 50% { opacity:.25 } }

/* ---------- lists ---------- */
.list { display:flex; flex-direction:column; background:var(--ink-1); border:1px solid var(--ink-3); border-radius:var(--r-3); overflow:hidden }
.list > .empty { border:0; border-radius:0 }
.item { position:relative; display:flex; gap:var(--s-3); align-items:center; min-height:60px; padding:var(--s-3) var(--s-4); text-decoration:none; color:var(--fg); transition:background-color var(--dur-1) var(--ease) }
.item + .item { border-top:1px solid var(--ink-3) }
a.item:hover { background:var(--ink-2) }
.item.on { background:var(--ink-2) }
.item.on::before { content:""; position:absolute; left:0; top:var(--s-2); bottom:var(--s-2); width:2px; border-radius:0 2px 2px 0; background:var(--accent) }
.list .item > .pill:first-child { min-width:88px; justify-content:center }
.item .title { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.item .title b { display:block; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.item .meta { color:var(--fg-2); font-size:var(--t-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums }
.card .list { background:var(--ink-0) }
.item img { flex:none }

/* ---------- data ---------- */
.stat { font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:var(--t-xl); line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:var(--s-2) 0 var(--s-3) }
.stat small { font-family:var(--font-ui); font-stretch:100%; font-size:var(--t-sm); color:var(--fg-2); font-weight:400; letter-spacing:0; margin-left:var(--s-2) }
table { width:100%; border-collapse:collapse; font-size:var(--t-sm); font-variant-numeric:tabular-nums }
th, td { text-align:left; padding:10px var(--s-3) 10px 0; border-bottom:1px solid var(--ink-3); vertical-align:top }
th:last-child, td:last-child { padding-right:0 }
th { color:var(--fg-3); font-weight:500; font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; border-bottom-color:var(--ink-4) }
tbody tr:last-child td { border-bottom:0 }
.wrap > table { display:block; overflow-x:auto }

.empty { padding:var(--s-6) var(--s-5); text-align:center; color:var(--fg-2); font-size:var(--t-sm); border:1px dashed var(--ink-4); border-radius:var(--r-3) }
.empty a { color:var(--fg) }

/* ---------- job: media, beats, log ---------- */
.player { display:block; aspect-ratio:9/16; height:min(70vh, 640px); width:auto; max-width:100%; margin:0 auto; background:#050504; border-radius:var(--r-3); border:1px solid var(--ink-3); object-fit:contain }
.job-grid { display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr) }
.job-grid .job-main > .card:first-child { margin-top:0 !important }
@media (min-width:1040px) { .job-grid { grid-template-columns:auto minmax(0,1fr); align-items:start } .job-media { position:sticky; top:calc(var(--hdr) + var(--s-5)) } .job-main > h2:first-child { margin-top:0 } }
.beats { display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); margin-top:var(--s-4) }
.beat { background:var(--well); border:1px solid var(--ink-3); border-radius:var(--r-2); overflow:hidden }
.beat img, .beat video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:var(--ink-2) }
.beat p { font-size:var(--t-xs); line-height:1.45; padding:var(--s-2); margin:0; color:var(--fg-2) }
.log { font:400 12.5px/1.65 var(--font-mono); background:var(--well); border:1px solid var(--ink-3); border-radius:var(--r-3); padding:var(--s-3) var(--s-4); max-height:60vh; overflow:auto; white-space:pre-wrap; word-break:break-word; color:#cfcbc0; scrollbar-color:var(--ink-4) transparent }
.log .t { color:var(--fg-3) } .log .error { color:var(--bad) } .log .warn { color:var(--warn) } .log .debug { color:var(--fg-3) }

/* review detail: player beside the text fields on wide screens */
.review-detail { display:grid; gap:var(--s-4) var(--s-5); grid-template-columns:minmax(0,1fr) }
.review-detail .player { height:min(64vh, 600px) }
@media (min-width:1240px) { .review-detail { grid-template-columns:auto minmax(0,1fr); align-items:start } .review-detail .player { height:min(70vh, 600px) } }
.review-detail .facts { font-size:var(--t-sm); display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--s-2); margin:0 }
.review-detail .row { margin-top:var(--s-5) }
@media (max-width:759px) { .review-detail .row { display:grid; grid-template-columns:1fr 1fr } .review-detail .row .spacer { display:none } }

/* ---------- overlays ---------- */
#toast { position:fixed; z-index:40; left:50%; bottom:calc(var(--tabbar) + var(--safe-b) + var(--s-3)); max-width:calc(100vw - var(--s-6)); transform:translate(-50%, 8px); padding:var(--s-3) var(--s-4); background:var(--ink-2); color:var(--fg); border:1px solid var(--ink-4); border-radius:var(--r-2); font-size:var(--t-sm); font-weight:500; box-shadow:0 12px 32px -12px rgb(0 0 0 / .6); opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease) }
#toast.show { opacity:1; transform:translate(-50%, 0) }
@media (min-width:760px) { #toast { bottom:var(--s-5) } }
#debug { position:fixed; z-index:30; left:var(--s-2); bottom:calc(var(--tabbar) + var(--safe-b) + var(--s-2)); margin:0; max-width:60vw; padding:6px var(--s-2); font:11px/1.45 var(--font-mono); color:var(--fg-3); background:var(--well); border:1px solid var(--ink-3); border-radius:var(--r-1); white-space:pre-wrap }
@media (min-width:760px) { #debug { bottom:var(--s-2) } }
dialog { width:min(520px, calc(100vw - var(--s-6))); padding:var(--s-5); background:var(--ink-1); color:var(--fg); border:1px solid var(--ink-4); border-radius:var(--r-3); box-shadow:0 24px 64px -16px rgb(0 0 0 / .7) }
dialog[open] { animation:rise var(--dur-3) var(--ease) }
dialog::backdrop { background:rgb(8 8 6 / .72); backdrop-filter:blur(2px) }
dialog .row:last-child { margin-top:var(--s-5) !important }
@keyframes rise { from { opacity:0; transform:translateY(8px) scale(.985) } }

/* ---------- chat ---------- */
.chat-wrap { display:flex; flex-direction:column; max-width:820px; height:calc(100dvh - var(--hdr) - var(--tabbar) - var(--safe-b)); padding-bottom:var(--s-3) }
.chat-wrap > .row.between:first-child { margin-bottom:var(--s-3) }
@media (min-width:760px) { .chat-wrap { height:calc(100dvh - var(--hdr)); padding-bottom:var(--s-5) } .chat-wrap > .row.between:first-child { margin-bottom:var(--s-4) } }
/* phone keyboard open: drop the tab bar so the composer gets the room */
@media (max-width:759px) {
  body:has(#chat-input:focus) { padding-bottom:0 }
  body:has(#chat-input:focus) nav.tabs { display:none }
  body:has(#chat-input:focus) .chat-wrap { height:calc(100dvh - var(--hdr)) }
  .chat-wrap { padding-top:var(--s-4) }
}
.thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-2) 2px var(--s-4); scrollbar-color:var(--ink-4) transparent }
.msg { max-width:min(88%, 640px); padding:10px 14px; border-radius:var(--r-3); background:var(--ink-1); border:1px solid var(--ink-3); white-space:pre-wrap; word-break:break-word; line-height:1.55; animation:arrive var(--dur-2) var(--ease) }
.msg.assistant { align-self:flex-start; border-top-left-radius:var(--r-1) }
.msg.user { align-self:flex-end; background:var(--accent-soft); border-color:color-mix(in oklab, var(--accent) 28%, var(--ink-3)); border-top-right-radius:var(--r-1) }
.msg .body:empty { display:none }
.msg .tool { display:block; margin-top:var(--s-2); padding:6px 10px; font:12px/1.45 var(--font-mono); color:var(--fg-2); background:var(--well); border:1px solid var(--ink-3); border-left:2px solid var(--accent); border-radius:var(--r-1); white-space:normal; overflow-wrap:anywhere }
.msg .tool b { color:var(--fg); font-weight:600; margin-right:4px }
.msg .tool .mono { font-size:inherit }
.msg .meta { font:11px/1 var(--font-mono); color:var(--fg-3); margin-top:var(--s-2) }
.cursor { display:inline-block; width:.55em; height:1.05em; margin-left:1px; background:var(--accent); vertical-align:text-bottom; border-radius:1px; animation:blink 1s steps(2) infinite }
@keyframes blink { to { opacity:0 } }
@keyframes arrive { from { opacity:0; transform:translateY(4px) } }
.composer { display:flex; gap:var(--s-2); align-items:flex-end; padding:6px; background:var(--ink-1); border:1px solid var(--ink-3); border-radius:var(--r-3); transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease) }
.composer:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent) }
.composer textarea { min-height:44px; max-height:200px; resize:none; border:0; background:none; padding:11px 8px; box-shadow:none }
.composer textarea:focus { box-shadow:none }
.composer .btn { flex:none; min-height:44px }

/* ---------- login ---------- */
.login { min-height:100dvh; display:grid; align-content:center; max-width:400px; margin:0 auto; padding:var(--s-6) var(--s-4) 18vh }
body.bare { padding-bottom:0 }
.login .mark { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5) }
.login h1 { margin:0; font-size:var(--t-xl); text-transform:uppercase; letter-spacing:.04em; font-weight:800 }
.login h1 b { font-weight:300; color:var(--fg-2) }
.login .card { margin-top:var(--s-5) }
.login .err:empty { display:none }
.login .err { margin:var(--s-3) 0 0; font-size:var(--t-sm) }
.login .btn { width:100%; margin-top:var(--s-4) }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .cursor { animation:none }
}
/* youtube setup */
.yt h4 { margin:18px 0 8px; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim) }
.yt details { border:1px solid var(--line); border-radius:8px; padding:10px 12px } .yt summary { cursor:pointer; font-weight:600 }
.steps { margin:10px 0 0 18px; padding:0; display:flex; flex-direction:column; gap:12px } .steps li b { display:block; margin-bottom:2px } .steps code { font-size:.85em; word-break:break-all; color:var(--text) }
.creds label { margin-top:8px }