/* Reel tab: the five steps of a talking-head edit (js/reel.js). One column; the open step is a card, the others
   are rows on one rail. Narrow panels keep everything readable; wide ones centre the column. */
body .workspace main[data-pane=reel]{display:flex!important;flex-direction:column;min-height:0;gap:0!important}
body .workspace main[data-pane=reel][hidden]{display:none!important}
main[data-pane=reel]>article.khr{flex:1;min-height:0;display:flex;flex-direction:column;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
main[data-pane=reel] .workspace-scroll{padding:0 2px!important}
@media(min-width:620px){main[data-pane=reel]>article.khr{width:100%;max-width:600px;align-self:center}}

.khr-top{display:flex;align-items:center;gap:10px;padding:2px 2px 10px;flex-wrap:wrap}
.khr-clip{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:2px}
.khr-clip b{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dk-text,var(--text))}
.khr-clip small{font-size:11px;color:var(--muted,#8b8b92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khr-clip small:empty{display:none}
#khr-recipe{flex:0 1 230px;min-width:180px}
#khr-recipe button{min-height:26px;padding:4px 6px}

.khr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.khr-step{position:relative;border:1px solid transparent;border-radius:11px;transition:background .18s,border-color .18s}
/* the rail: one thin line from step to step, through the number badges */
.khr-step:not(:last-child)::after{content:"";position:absolute;left:21px;top:33px;bottom:-11px;width:2px;border-radius:1px;background:var(--dk-line-2,rgba(255,255,255,.1));z-index:0}
.khr-step.is-ok:not(:last-child)::after{background:linear-gradient(#1f6fff,#1f6fff80)}
.khr-step.is-open{background:var(--surface,#2a2a2a);border-color:var(--dk-line-2,rgba(255,255,255,.12))}
.khr-step.is-open:not(:last-child)::after{display:none}

.khr-head{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:22px auto minmax(0,1fr);align-items:center;gap:10px;min-height:42px;padding:9px 11px;cursor:pointer;border-radius:11px;position:relative;z-index:1}
.khr-head:focus-visible{outline:2px solid var(--accent,#2f7bff);outline-offset:-2px}
.khr-head:disabled{cursor:default}@media (hover:hover) and (pointer:fine){.khr-step:not(.is-open) .khr-head:not(:disabled):hover{background:rgba(255,255,255,.04)}}
.khr-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;box-sizing:border-box;border:1.5px solid var(--dk-line-2,rgba(255,255,255,.22));color:var(--muted,#8b8b92);background:var(--bg,#1e1e1e)}
.khr-num svg{width:13px;height:13px}
.khr-step.is-current .khr-num{border:0;color:#fff;background:linear-gradient(145deg,#2fc5fa,#1457ff 60%,#0648e7);box-shadow:0 2px 8px rgba(20,87,255,.45)}
.khr-step.is-ok .khr-num{border:0;color:#fff;background:#1457ff}
.khr-step.is-done:not(.is-ok) .khr-num{border-color:#2f7bff;color:#6aaeff}
.khr-step.is-locked .khr-num svg{width:11px;height:11px;opacity:.75}
.khr-title{font-size:13px;font-weight:650;color:var(--dk-text,var(--text));white-space:nowrap}
.khr-step.is-locked .khr-title{color:var(--muted,#8b8b92);font-weight:550}
.khr-sum{justify-self:end;max-width:100%;font-size:11px;color:var(--muted,#8b8b92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.khr-step.is-open .khr-sum{display:none}
.khr-result{font-size:12px;line-height:1.35;color:var(--dk-text,var(--text));font-variant-numeric:tabular-nums;margin-top:-4px}
.khr-result:empty{display:none}

.khr-body{padding:0 11px 11px 43px;display:flex;flex-direction:column;gap:9px}
.khr-opts{gap:7px!important}
.khr-opts>label{grid-template-columns:64px minmax(0,1fr)!important}
.khr-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.khr-actions button{margin:0!important;transform:none}
.khr-actions button{height:32px!important;min-height:32px!important;padding-top:0!important;padding-bottom:0!important;border-radius:9px!important;font-size:12px!important;font-weight:600;line-height:1!important}
.khr-actions .khs-ghost{width:auto!important;flex:0 0 auto;padding:6px 12px!important;border-color:var(--dk-line-2,rgba(255,255,255,.14))!important}
.khr-actions .khs-ghost.on{border-color:#2f7bff!important;color:#8cc1ff}
.khr-actions .primary{flex:1 1 110px;width:auto!important;min-width:0!important;padding:7px 14px!important}
.khr-actions button:disabled{opacity:.45;cursor:default}

.khr-prog{display:flex;flex-direction:column;gap:6px;padding:2px 0 3px}
.khr-prog i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.khr-prog em{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#1457ff,#2fc5fa);transition:width .25s ease-out}
.khr-prog i.indef em{position:absolute;width:30%!important;animation:khr-slide 1.25s cubic-bezier(.65,0,.35,1) infinite}
@keyframes khr-slide{from{left:-30%}to{left:100%}}
.khr-prog small{font-size:11px;color:var(--muted,#8b8b92);font-variant-numeric:tabular-nums}
.khr-err{font-size:11px;line-height:1.4;color:#ff6b6b}

/* the transcript editor of the Captions tab, lent to the Transcribe step */
.khr-edit{margin:0 0 0 -32px}
.khr-edit .khr-editor{max-height:min(320px,45vh);overflow:auto;border:1px solid var(--dk-line-2,rgba(255,255,255,.1));border-radius:9px;padding:6px}

main[data-pane=reel] .apply-row{margin-top:8px!important}
main[data-pane=reel] .apply-row .primary:disabled{opacity:.55}

@media(max-width:360px){
  .khr-head{grid-template-columns:20px minmax(0,auto) minmax(0,1fr);gap:8px;padding:8px 9px}
  .khr-step:not(:last-child)::after{left:18px}
  .khr-num{width:20px;height:20px;font-size:10px}
  .khr-body{padding:0 9px 10px 9px}
  .khr-edit{margin:0}
  .khr-opts>label{grid-template-columns:56px minmax(0,1fr)!important}
  #khr-recipe{flex-basis:100%}
}
html:not(.dark-mode) .khr-step.is-open{background:rgba(255,255,255,.6)}
html:not(.dark-mode) .khr-num{background:#fff}
@media(prefers-reduced-motion:reduce){.khr-prog i.indef em{animation:none;left:35%}}
@media(min-width:620px){.khr-actions .primary{flex:0 0 168px;margin-left:auto!important}}

/* take map in the Cut step: every attempt in source order; ✓ goes into the reel, the rest is dimmed with its reason */
.khr-takes{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.khr-takes-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.khr-takes-head span{font-size:12px;font-weight:650;color:var(--dk-text,var(--text))}
.khr-takes-head small{font-size:11px;color:var(--muted,#8b8b92);font-variant-numeric:tabular-nums}
.khr-takes ol{list-style:none;margin:0;padding:3px;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;border-radius:9px;background:rgba(0,0,0,.18);border:1px solid var(--dk-line-2,rgba(255,255,255,.08))}
.khr-take{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:start;gap:6px;padding:6px 7px;border-radius:7px;cursor:pointer;opacity:.5;transition:opacity .15s,background .15s}@media (hover:hover) and (pointer:fine){.khr-take:hover{background:rgba(255,255,255,.05);opacity:.8}}
.khr-take.on{opacity:1}
.khr-take.on .khr-tk-t{color:#8cc1ff}
.khr-take:focus-visible{outline:2px solid var(--accent,#2f7bff);outline-offset:-2px}
.khr-tk-t{font-size:10.5px;line-height:16px;color:var(--muted,#8b8b92);font-variant-numeric:tabular-nums}
.khr-tk-x{font-size:11.5px;line-height:16px;color:var(--dk-text,var(--text));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.khr-take:not(.on) .khr-tk-x{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.28)}
.khr-take em{font-style:normal;font-size:10px;line-height:16px;color:var(--muted,#8b8b92);white-space:nowrap}
html:not(.dark-mode) .khr-takes ol{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}@media (hover:hover) and (pointer:fine){html:not(.dark-mode) .khr-take:hover{background:rgba(0,0,0,.04)}}
html:not(.dark-mode) .khr-take:not(.on) .khr-tk-x{text-decoration-color:rgba(0,0,0,.3)}
/* options in the narrow step card: a segmented control stays on one line (Relaxed · Natural · Tight) */
.khr-opts .segmented{display:flex!important;flex-wrap:nowrap!important}
.khr-opts .segmented button{flex:1 1 0;min-width:0!important;padding-left:4px!important;padding-right:4px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khr-opts>label:has(.segmented){grid-template-columns:44px minmax(0,1fr)!important}