/* ============================================================
   Clip — interface styles

   Extracted so other pages can share it. Everything is scoped to classes
   rather than tags, apart from the reset and the body defaults at the top, so
   dropping this into another page brings the palette and the controls without
   dictating its markup.

   The palette lives in :root. Override those custom properties on a later
   stylesheet and the whole surface follows.
   ============================================================ */

:root{
  --ink:#16171b;
  --panel:#1f2125;
  --raise:#16171b;
  --line:#16171b;
	/*--ink:#0D131E;
  --panel:#141C2A;
  --raise:#1D2839;
  --line:#29364B;*/
  --paper:#E9E6DF;
  --muted:#8B98AC;
  --dim:#5F6C80;
  /*--amber:#E9A33C;*/
  --amber:#ffd016;
  /*--amber-soft:rgba(233,163,60,.16);*/
	--amber-soft: rgb(from var(--amber) r g b / 0.15);
  --teal:#2964ff;/* --teal:#63AFA4; */
  --rose:#C9705F;
  /*--display:'Fraunces',Georgia,'Times New Roman',serif;*/
  /*--read:'Newsreader',Georgia,'Times New Roman',serif;*/
	--display:system-ui,-apple-system,'Segoe UI',sans-serif;
	--read:system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Controls are capsules: fully rounded, so width follows the label and the
     shape never changes with it. Icon-only controls take --round instead and
     stay perfectly circular. */
  --pill:999px;
  --round:50%;
  /* Glass: a light fill lifted off the surface rather than a flat panel colour,
     with a hairline top edge standing in for a specular highlight. */
  --glass:rgba(255,255,255,.055);
  --glass-up:rgba(255,255,255,.10);
  --glass-edge:rgba(255,255,255,.11);
  --glass-edge-up:rgba(255,255,255,.20);
  --blur:saturate(1.6) blur(14px);
  /* The chevron is drawn here rather than left to the platform, because the
     native one cannot be moved inside a capsule. Stroke matches --muted. */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%238B98AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");

  /* Native menus, scrollbars and focus rings follow the app rather than the
     system default. */
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);color:var(--paper);font-family:var(--ui);
  font-size:14px;line-height:1.5;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
::selection{background:var(--amber-soft);color:var(--paper)}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;height:100%}

.bar{
  display:flex;align-items:center;gap:18px;
  padding:12px 18px;border-bottom:1px solid var(--line);
  background:var(--panel);flex-shrink:0;
}
.mark{display:flex;align-items:center;flex-shrink:0}
/* Intrinsic dimensions stay on the tag so the header does not reflow while the
   image loads; height here drives the display size and width follows it. */
.mark img{height:30px;width:auto;display:block}
@media (max-width:560px){ .mark img{height:24px} }

.status{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  display:flex;align-items:center;gap:7px;min-width:0;flex:1;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--dim);flex-shrink:0}
.dot.on{background:var(--teal)}
.dot.work{background:var(--amber);animation:pulse 1.1s infinite}
.dot.err{background:var(--rose)}
@keyframes pulse{50%{opacity:.25}}
.status em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.toggles{display:flex;gap:6px;flex-shrink:0}
.tg{
  padding:6px 15px;border:1px solid var(--glass-edge);border-radius:var(--pill);
  font-size:11.5px;letter-spacing:.03em;color:var(--muted);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:.18s cubic-bezier(.34,1.4,.5,1);white-space:nowrap;
}
.tg:hover{background:var(--glass-up);border-color:var(--glass-edge-up);color:var(--paper)}
.tg[aria-pressed=true]{
  background:var(--amber);border-color:var(--amber);color:#1A1206;font-weight:600;
}
.tg[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1A1206;font-weight:600}
.tg:disabled{opacity:.35;cursor:not-allowed}

/* A hairline under the header — the only progress surface that is visible
   while the setup panel is closed, which is when file analysis runs. */
.topprog{height:2px;background:transparent;flex-shrink:0;overflow:hidden}
.topprog.on{background:var(--line)}
.topprog i{display:block;height:100%;width:0;background:var(--amber);transition:width .2s linear}
.topprog.unknown i{width:30%;animation:slide 1.2s infinite ease-in-out;transition:none}

/* ---------- drop ---------- */
.drop{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:40px;text-align:center;
}
.drop.hide{display:none}
.dz{
  width:min(560px,100%);padding:56px 34px;
  border:1px dashed var(--line);border-radius:10px;background:var(--panel);
  transition:.18s;
}
.dz.hot{border-color:var(--amber);background:var(--raise)}
.dz h1{font-family:var(--display);font-weight:900;font-size:25px;line-height:1.25;margin-bottom:10px}
.dz p{color:var(--muted);font-size:13px;max-width:40ch;margin:0 auto 20px}
.pick{
  display:inline-block;padding:11px 26px;border-radius:var(--pill);
  background:var(--amber);color:#1A1206;font-weight:600;font-size:13px;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.pick:hover{filter:brightness(1.08)}
.legal{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.04em}

/* ---------- workspace ----------
   grid-template-rows is explicit on purpose. Left to `auto`, the row takes its
   min-content height from the transcript column, and a long sermon stretches
   the row far past the viewport — which pushes the video preview, centred in a
   several-thousand-pixel-tall .screen, clean off the bottom of the window. */
.work{
  flex:1;display:grid;overflow:hidden;min-height:0;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.85fr);
  grid-template-rows:minmax(0,1fr);
}
.work.hide{display:none}

.stage{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--line)}

.screen{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;
  background:#070B12;padding:16px;min-height:0;overflow:hidden;position:relative;
}
#preview{max-width:100%;max-height:100%;border-radius:3px;background:#000;display:block}
#media{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* Out of flow on purpose. As a flex sibling of the canvas this label took a
   share of the row and squeezed the preview narrower than its own box. */
.audio-only{
  position:absolute;top:10px;left:12px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.1em;text-transform:uppercase;
}

/* waveform spine — the signature */
.spine{
  border-top:1px solid var(--line);background:var(--panel);
  padding:10px 14px 12px;flex-shrink:0;
}
.spine-head{
  display:flex;align-items:baseline;gap:10px;margin-bottom:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}
.spine-head b{color:var(--muted);font-weight:400}
.spine-head .key{margin-left:auto;display:flex;gap:12px;text-transform:none;letter-spacing:.04em}
.key i{font-style:normal;display:inline-flex;align-items:center;gap:4px}
.key i::before{content:'';width:8px;height:2px;border-radius:1px;background:currentColor}
.k-clip{color:var(--amber)}
.k-pause{color:var(--teal)}
#wave{width:100%;height:74px;display:block;cursor:crosshair;border-radius:3px;background:var(--ink);touch-action:none;border-radius:.6em}

.transport{display:flex;align-items:center;gap:12px;margin-top:9px}
.play{
  width:36px;height:36px;border-radius:var(--round);background:var(--paper);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.play:hover{transform:scale(1.07)}
.play:active{transform:scale(.96)}
.tc{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.tc b{color:var(--paper);font-weight:400}
.rangepill{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;
  padding:4px 9px;border-radius:4px;border:1px solid var(--amber);
  color:var(--amber);display:none;align-items:center;gap:8px;
}
.rangepill.on{display:flex}
.rangepill button{color:var(--muted);font-size:13px;line-height:1}
.rangepill button:hover{color:var(--paper)}

/* ---------- transcript ---------- */
.side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--ink)}
.side-head{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.side-head .eyebrow{flex:1}
.mini{
  padding:5px 14px;border:1px solid var(--glass-edge);border-radius:var(--pill);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  font-size:11.5px;color:var(--muted);transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.mini:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.mini:disabled{opacity:.35;cursor:not-allowed}

#script{
  flex:1;overflow-y:auto;padding:18px 20px 220px;
  font-family:var(--read);font-size:14px;line-height:1.5;
  font-weight:500;color:#C8CFDA;
}
#script p{margin-bottom:15px;cursor:text}
#script p.cur{color:var(--paper)}
.w{border-radius:2px;transition:background .09s,color .09s}
.w.lit{background:var(--amber-soft);color:var(--amber)}
.w.said{color:var(--paper)}
.ts{
  font-family:var(--mono);font-size:9.5px;color:var(--dim);
  letter-spacing:.05em;margin-right:8px;user-select:none;cursor:pointer;
  vertical-align:.14em;
}
.ts:hover{color:var(--amber)}

.hint{color:var(--dim);font-family:var(--ui);font-size:12.5px;font-style:italic}

/* floating make-clip */
.float{
  position:fixed;z-index:60;display:none;gap:1px;
  background:var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}
.float.on{display:flex}
.float button{
  background:var(--glass);padding:8px 16px;font-size:12px;font-weight:500;
  border-radius:var(--pill);white-space:nowrap;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.float button:hover{background:var(--amber);color:#1A1206}

/* ---------- clips ---------- */
/* The tray sizes to its cards rather than clipping them at a guessed height —
   a fixed max-height cut the export row off the bottom of every card. */
.tray{
  border-top:1px solid var(--line);background:var(--panel);flex-shrink:0;
  display:flex;flex-direction:column;
}
.tray-head{display:flex;align-items:center;gap:10px;padding:10px 16px 8px}
.tray-head .eyebrow{flex:1}
.count{font-family:var(--mono);font-size:10px;color:var(--dim)}
.fold{
  color:var(--dim);font-size:11px;font-family:var(--mono);letter-spacing:.06em;
  padding:4px 12px;border:1px solid var(--glass-edge);border-radius:var(--pill);
  background:var(--glass);transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.fold:hover{color:var(--paper);border-color:var(--dim)}
.tray.shut .grid{display:none}
.tray.shut .tray-head{padding-bottom:10px}
.grid{
  display:flex;align-items:flex-start;gap:11px;
  overflow-x:auto;overflow-y:hidden;padding:0 16px 14px;
  scrollbar-width:thin;
}
.grid:empty::after{
  content:'No clips yet. Generate them from Settings, or select transcript text and choose Make clip.';
  font-size:12.5px;color:var(--dim);font-style:italic;padding:14px 0;
}
.clip{
  position:relative;
  width:200px;flex-shrink:0;border:1px solid var(--line);border-radius:1em;
  overflow:hidden;background:var(--ink);text-align:left;transition:.15s;
  margin-top:2px;
}
.clip:hover{border-color:var(--amber);}
.clip[data-active="1"]{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.thumb{
  width:100%;aspect-ratio:16/9;background:var(--raise);display:block;object-fit:cover;
  position:relative;
}
.thumb-ph{
  width:100%;aspect-ratio:16/9;background:var(--raise);
  display:grid;place-items:center;font-family:var(--mono);
  font-size:9.5px;color:var(--dim);letter-spacing:.1em;
}
.clip-body{padding:8px 10px 10px}
.clip-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:4px;
}
.clip-tag.mine{color:var(--rose)}
.clip-txt{
  font-family:var(--read);font-size:12.5px;line-height:1.4;color:#BFC8D5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.clip-meta{
  display:flex;justify-content:space-between;align-items:center;margin-top:7px;
  font-family:var(--mono);font-size:9.5px;color:var(--dim);
}
/* Sits over the thumbnail rather than in the metadata line: a destructive
   action wants its own space, away from the row of exports it used to share a
   line with. The scrim is a real backdrop blur because it lands on video
   frames, which can be any colour underneath. */
.del{
  position:absolute;top:8px;right:8px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--round);
  border:1px solid rgba(255,255,255,.18);
  background: rgba(10, 14, 19, 0);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  color:gray;line-height:0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
/* Always visible, not revealed on hover: the point of moving it here was to
   make tidying up easier, and a control you have to go looking for is the
   problem it was meant to solve. The scrim keeps it legible over any frame. */
/* Drawn rather than typed, so it sits on the true centre of the circle. */
.del svg{
  width:14px;height:14px;display:block;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;fill:none;
}
.clip:hover .del{border-color:rgba(255,255,255,.30)}
.del:hover{background:var(--rose);border-color:var(--rose);color:#1A0906;transform:scale(1.08)}
.del:active{transform:scale(.94)}
.del:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.gterm .del{
  position:static;top:auto;right:auto;
  width:22px;height:22px;margin:0 0 0 auto;
  border:none;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--dim);
}
.gterm .del svg{width:11px;height:11px}
.gterm .del:hover{background:none;color:var(--rose);transform:none}

/* A row of capsules rather than a segmented bar: each action is its own shape,
   which is what makes the row read as controls instead of a strip. */
.exports{display:flex;gap:4px;margin-top:8px}
.exports button{
  flex:1;background:var(--glass);border:1px solid var(--glass-edge);
  border-radius:var(--pill);padding:5px 4px;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.04em;color:var(--muted);
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.exports button.hot{color:var(--amber);font-weight:600;border-color:var(--amber-soft)}
.exports button:hover:not(:disabled){background:var(--amber);color:#1A1206}
.exports button:disabled{opacity:.3;cursor:not-allowed}
.exports button.busy{background:var(--amber);color:#1A1206}
.snap{
  font-family:var(--mono);font-size:9px;color:var(--teal);
  margin-top:5px;display:block;letter-spacing:.03em;
}

/* ---------- re-trim ---------- */
.trim{
  display:flex;align-items:center;gap:2px;margin-top:5px;
  font-family:var(--mono);font-size:8.5px;color:var(--dim);
}
.trim i{font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:0 1px}
.trim .trim-gap{flex:1}
.trim button{
  padding:3px 8px;border-radius:var(--pill);color:var(--muted);
  background:var(--glass);border:1px solid var(--glass-edge);
  font-size:8px;line-height:1;transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.trim button:hover{background:var(--amber);color:#1A1206}
.trim .zoom{margin-left:6px;letter-spacing:.06em;text-transform:uppercase}
.trim.on .zoom{background:var(--amber);color:#1A1206}
.trim.on i{color:var(--amber)}
.k-key{color:#7E8CA6}

/* ---------- setup panel ---------- */
.setup{
  position:fixed;inset:auto 16px 16px auto;width:min(360px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line);border-radius:1em;
  padding:15px 16px;z-index:80;box-shadow:0 14px 40px rgba(0,0,0,.6);display:none;
}
.setup.on{display:block}
.setup h3{font-family:var(--display);font-weight:900;font-size:15px;margin-bottom:3px}
.setup > p{font-size:12px;color:var(--muted);margin-bottom:13px}
.row{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:12.5px}
.row label{color:var(--muted);flex:0 1 auto;min-width:0}
.row select,.row input[type=text]{flex:1 1 auto}
/* appearance:none is what lets the capsule hold: left alone, the platform
   draws its own rounded rectangle inside and the radius has no effect. */
.row select,.row input[type=text]{
  -webkit-appearance:none;appearance:none;
  background:var(--glass);border:1px solid var(--glass-edge);color:var(--paper);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-radius:var(--pill);padding:6px 14px;font:inherit;font-size:12px;
  min-width:0;max-width:100%;text-overflow:ellipsis;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.row select{
  padding-right:30px;                      /* room the chevron sits in */
  background-image:var(--chev);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:9px 6px;
  cursor:pointer;
}
.row select:hover,.row input[type=text]:hover{
  background-color:var(--glass-up);border-color:var(--glass-edge-up);
}
.row select:focus-visible,.row input[type=text]:focus-visible{
  outline:none;border-color:var(--amber);
}
/* switch styling lives with .switch, further down */
.go{
  width:100%;padding:11px;border-radius:var(--pill);background:var(--amber);
  color:#1A1206;font-weight:600;font-size:13px;margin-top:5px;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.go:hover:not(:disabled){filter:brightness(1.08)}
.go:active:not(:disabled){transform:scale(.985)}
.go:disabled{opacity:.4;cursor:not-allowed}
.diag{font-family:var(--mono);font-size:10.5px;line-height:1.7}
.diag .ok{color:var(--teal);font-weight:400}
.diag .no{color:var(--rose);font-weight:400}
.note code{
  font-family:var(--mono);font-size:11px;background:var(--ink);
  padding:1px 5px;border-radius:3px;color:var(--paper);white-space:nowrap;
}
.note{
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--dim);line-height:1.55;
}
.note b{color:var(--muted);font-weight:500}
.modelnote{
  font-family:var(--mono);font-size:10.5px;color:var(--dim);
  margin:-4px 0 12px;line-height:1.6;letter-spacing:.02em;
}
.modelnote b{color:var(--muted);font-weight:400}
.modelnote .cached{color:var(--teal)}

/* ---------- follow sensitivity ---------- */
.framing{
  display:none;align-items:center;gap:9px;margin-top:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.framing.on{display:flex}
.framing input[type=range]{
  flex:1;max-width:190px;accent-color:var(--teal);height:3px;cursor:pointer;
}
.framing b{color:var(--teal);font-weight:400;min-width:52px;text-transform:none;letter-spacing:.02em}

/* ---------- progress ---------- */
.prog{margin-top:12px;display:none}
.prog.on{display:block}
.prog-line{
  display:flex;align-items:baseline;gap:8px;margin-bottom:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.02em;
}
.prog-line b{color:var(--paper);font-weight:400}
.prog-line .eta{margin-left:auto;color:var(--amber);white-space:nowrap}
.track{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.track i{
  display:block;height:100%;width:0;border-radius:2px;
  background:var(--amber);transition:width .3s linear;
}
/* No content-length from the CDN means no percentage to show — say so with a
   marquee rather than a bar that pretends to know how far along it is. */
.track.unknown i{width:34%;transition:none;animation:slide 1.3s infinite ease-in-out}
@keyframes slide{0%{margin-left:-34%}100%{margin-left:100%}}

/* ---------- glossary ---------- */
.gloss{
  position:fixed;inset:auto 16px 16px auto;width:min(400px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:15px 16px;z-index:80;box-shadow:0 14px 40px rgba(0,0,0,.6);display:none;
}
.gloss.on{display:block}
.gloss h3{font-family:var(--display);font-weight:500;font-size:15px;margin-bottom:3px}
.gloss > p{font-size:12px;color:var(--muted);margin-bottom:13px}
.gform{display:flex;align-items:center;gap:7px;margin-bottom:12px}
.gform input{
  flex:1;min-width:0;background:var(--glass);border:1px solid var(--glass-edge);color:var(--paper);
  border-radius:var(--pill);padding:7px 14px;font:inherit;font-size:12.5px;font-family:var(--read);
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.gform input:hover{background:var(--glass-up);border-color:var(--glass-edge-up)}
.gform input:focus{outline:none;border-color:var(--amber);background:var(--glass-up)}
.gform span{color:var(--dim);font-size:13px;flex-shrink:0}
.gform button{
  flex-shrink:0;padding:7px 16px;border-radius:var(--pill);background:var(--amber);
  color:#1A1206;font-weight:600;font-size:12px;
}
.gform button:disabled{opacity:.35;cursor:not-allowed}
.gterms{max-height:190px;overflow-y:auto;scrollbar-width:thin}
.gterms:empty::after{
  content:'No corrections yet. Select a misheard word in the transcript and choose Correct.';
  display:block;font-size:11.5px;color:var(--dim);font-style:italic;line-height:1.5;
}
.gterm{
  display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--line);font-family:var(--read);font-size:13px;
}
.gterm s{color:var(--dim)}
.gterm em{font-style:normal;color:var(--dim);font-family:var(--mono);font-size:10px}
.gterm b{color:var(--teal);font-weight:400}
.gterm .del{margin-left:auto}
.gcount{
  font-family:var(--mono);font-size:9px;padding:1px 5px;border-radius:7px;
  background:var(--teal);color:#0A1614;margin-left:5px;font-weight:600;
}

/* corrected + removed words in the transcript */
.w.fixed{border-botttom:1px dotted var(--teal)}
.w.gone{
  color:#4A5568;text-decoration:line-through;
  text-decoration-color:rgba(201,112,95,.85);text-decoration-thickness:1px;
}
.w.gone.lit{background:none;color:#4A5568}
#script p.allgone .ts{opacity:.35}

/* ---------- scoring weights ---------- */
.tune{
  position:fixed;inset:auto 16px 16px auto;width:min(360px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:15px 16px;z-index:80;box-shadow:0 14px 40px rgba(0,0,0,.6);display:none;
}
.tune.on{display:block}
.tune h3{font-family:var(--display);font-weight:500;font-size:15px;margin-bottom:3px}
.tune > p{font-size:12px;color:var(--muted);margin-bottom:13px}
.tune > p b{color:var(--paper);font-weight:400}
.trow{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}
.trow label{width:72px;flex-shrink:0}
.trow input[type=range]{flex:1;accent-color:var(--amber);height:3px;cursor:pointer}
.trow b{color:var(--amber);font-weight:400;min-width:20px;text-align:right}
.trow.spread{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.trow.spread input[type=range]{accent-color:var(--teal)}
.trow.spread b{color:var(--teal)}

/* ---------- recent projects ---------- */
.recent{width:min(430px,calc(100vw - 32px))}
.rrow{
  display:flex;align-items:center;gap:9px;padding:8px 0;
  border-top:1px solid var(--line);font-size:12.5px;
}
.rrow:first-child{border-top:none}
.rrow .meta{flex:1;min-width:0}
.rrow b{display:block;font-weight:400;color:var(--paper);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .sub{
  font-family:var(--mono);font-size:9.5px;color:var(--dim);
  letter-spacing:.04em;text-transform:uppercase;
}
.rrow .sub .warm{color:var(--teal)}
.rrow .sub .cold{color:var(--dim)}
.rrow.here b{color:var(--amber)}
.rempty{font-size:12px;color:var(--dim);padding:6px 0 2px}

/* ---------- content panel ---------- */
.content{width:min(520px,calc(100vw - 32px))}
.cbox{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.cbox:first-child{border-top:none;padding-top:0;margin-top:0}
.chead{display:flex;align-items:center;gap:8px}
.chead b{
  flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.chead .st{font-family:var(--mono);font-size:9.5px;color:var(--dim)}
.chead .st.run{color:var(--amber)}
.chead .st.err{color:var(--rose)}
.cbtn{
  padding:4px 11px;border-radius:var(--pill);background:var(--glass);
  border:1px solid var(--glass-edge);color:var(--muted);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.cbtn:hover:not(:disabled){background:var(--amber);color:#1A1206}
.cbtn:disabled{opacity:.35;cursor:not-allowed}
.cout{
  display:none;margin-top:8px;padding:9px 10px;border-radius:1em;background:var(--ink);
  border:1px solid var(--line);font-size:12px;line-height:1.62;color:var(--paper);
  max-height:320px;overflow-y:auto;scrollbar-width:thin;white-space:pre-wrap;
}
.cout.on{display:block}
.cout:empty::after{content:'thinking…';color:var(--dim);font-family:var(--mono);font-size:10px}

/* ---------- caption style ----------
   An accordion inside the Captions section rather than a panel of its own: as a
   floating panel it covered the settings it belonged to, and had nothing to
   close it with. The 0fr/1fr grid animates to the content's real height without
   anyone having to guess a max-height. */
.acc{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .22s ease, margin-top .22s ease;
  margin-top:0;
}
.acc.on{grid-template-rows:1fr;margin-top:10px}
.acc > .acc-in{overflow:hidden;min-height:0}
.acc.on > .acc-in{padding-top:11px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){ .acc{transition:none} }

.acc .row{margin-bottom:8px}
.acc .row.sep,.acc .trow.sep{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.acc input[type=color]{
  width:40px;height:24px;padding:0;border:1px solid var(--glass-edge);
  border-radius:var(--pill);background:var(--glass);cursor:pointer;overflow:hidden;
}
/* The swatch itself has to be rounded too, or a square colour fills the capsule. */
.acc input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.acc input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--pill)}
.acc .go{margin-top:13px}
.tg.sub{
  font-size:10.5px;padding-left:8px;padding-right:8px;
  color:var(--amber);border-color:var(--amber-soft);
}
.tg.sub[aria-expanded=true]{background:var(--amber-soft)}

/* ---------- settings ---------- */
.gear{
  display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--pill);
  border:1px solid var(--glass-edge);color:var(--muted);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:.18s cubic-bezier(.34,1.4,.5,1);
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
}
.gear:hover,.gear[aria-expanded=true]{
  color:var(--paper);border-color:var(--glass-edge-up);background:var(--glass-up);
}
/* Icon alone below the label breakpoint, so it becomes a circle rather than a
   stubby capsule. */
@media (max-width:560px){ .gear{padding:7px;border-radius:var(--round)} }
.gear svg{transition:transform .3s}
.gear[aria-expanded=true] svg{transform:rotate(45deg)}
@media (max-width:560px){ .gear span{display:none} }

.setup{max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin}
.set-head{display:flex;align-items:center;margin-bottom:12px}
.set-head h3{flex:1}
/* Proportioned like the clip card's remove button: a drawn cross at roughly
   0.42 of the circle, so both read as the same control at different scales.
   Typing the character instead puts it above the optical centre. */
.set-head .x{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:28px;height:28px;border-radius:var(--round);
  border:1px solid var(--glass-edge);background:var(--glass);
  color:var(--dim);line-height:0;
  transition:.18s cubic-bezier(.34,1.4,.5,1);
}
.set-head .x svg{
  width:12px;height:12px;display:block;
  stroke:currentColor;stroke-width:1.9;stroke-linecap:round;fill:none;
}
.set-head .x:hover{
  background:var(--rose);border-color:var(--rose);color:#1A0906;transform:scale(1.08);
}
.set-head .x:active{transform:scale(.94)}
.set-head .x:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.set-sec{padding-top:12px;margin-top:12px;border-top:1px solid var(--line)}
.set-sec:first-of-type{padding-top:0;margin-top:0;border-top:none}
.set-title{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px;
}
.set-row{display:flex;gap:6px;flex-wrap:wrap}
.set-hint{font-size:11px;color:var(--dim);margin:-2px 0 9px 51px}
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:12.5px;margin-bottom:7px}

/* ---------- switches ----------
   The markup stays an ordinary <input type=checkbox>, so every `.checked` read
   in the app keeps working and the control is still a checkbox to a screen
   reader and to the keyboard. appearance:none hands the drawing over: the input
   itself becomes the track, and ::after is the knob that slides across it. */
.switch input[type=checkbox],
.row input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  position:relative;flex-shrink:0;cursor:pointer;
  width:40px;height:24px;margin:0;border-radius:var(--pill);
  background:var(--glass);border:1px solid var(--glass-edge);
  transition:background-color .22s ease, border-color .22s ease;
}
.switch input[type=checkbox]::after,
.row input[type=checkbox]::after{
  content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:var(--round);
  background:var(--muted);
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  /* The knob overshoots slightly on the way across — the small physical cue
     that separates a switch from a box that fills in. */
  transition:transform .28s cubic-bezier(.34,1.5,.5,1), background-color .22s ease;
}
.switch input[type=checkbox]:checked,
.row input[type=checkbox]:checked{
  background:var(--amber);border-color:var(--amber);
}
.switch input[type=checkbox]:checked::after,
.row input[type=checkbox]:checked::after{
  transform:translateX(16px);background:#FFF;
}
.switch input[type=checkbox]:hover:not(:checked),
.row input[type=checkbox]:hover:not(:checked){
  background:var(--glass-up);border-color:var(--glass-edge-up);
}
.switch input[type=checkbox]:focus-visible,
.row input[type=checkbox]:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}
.switch input[type=checkbox]:active::after,
.row input[type=checkbox]:active::after{width:21px}   /* squashes under the thumb */
@media (prefers-reduced-motion:reduce){
  .switch input[type=checkbox]::after,
  .row input[type=checkbox]::after{transition:none}
}

.go.alt{background:var(--raise);color:var(--paper);border:1px solid var(--line)}
.go.alt:hover:not(:disabled){background:var(--amber);color:#1A1206;border-color:var(--amber)}
.go:disabled{opacity:.4;cursor:not-allowed}
.setup .framing{margin-top:10px}

.cutpill{
  margin-left:auto;
  font-family:var(--mono);font-size:10.5px;padding:4px 11px;border-radius:var(--pill);
  border:1px solid var(--rose);color:var(--rose);display:none;align-items:center;gap:8px;
}
.cutpill.on{display:flex}
.cutpill button{color:var(--dim);font-size:13px;line-height:1}
.cutpill button:hover{color:var(--paper)}

.float button.danger:hover{background:var(--rose);color:#1A0906}

@media (max-width:900px){
  /* the stage gets the larger share — a preview too small to judge the crop on
     is worth less than two more lines of transcript */
  .work{grid-template-columns:1fr;grid-template-rows:minmax(0,1.15fr) minmax(0,1fr)}
  .stage{border-right:none;border-bottom:1px solid var(--line)}
  .bar{flex-wrap:wrap;gap:10px}
  .status{order:3;width:100%;flex:1 0 100%}
  .toggles{flex-wrap:wrap}
  /* The workspace is two stacked rows here, so the tray has to give ground or
     the video preview gets squeezed to nothing. Compact cards, a ceiling, and
     a grid that scrolls rather than clipping what does not fit. */
  .screen{padding:8px}
  .spine{padding:7px 12px 9px}
  #wave{height:48px}
  .transport{margin-top:7px}
  .tray{max-height:30vh}
  .grid{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:10px}
  .clip{width:152px}
  .clip .thumb,.clip .thumb-ph{aspect-ratio:16/9}
  .clip-txt{font-size:11.5px;-webkit-line-clamp:2}
  .exports button{font-size:8px;padding:5px 2px}
}
@media (max-width:900px) and (max-height:700px){
  .tray{max-height:26vh}
}
@media (max-width:560px){
  .spine-head .key{display:none}      /* the legend costs a whole line here */
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}