/* =============================================================================
   Napisy - the preview with the current subtitle, the progress while the
   model works and the list of subtitles to correct.
   ============================================================================= */
.ns-view{align-items:stretch}
.ns-player{position:relative;align-self:center;max-width:100%;border-radius:var(--r-xs);overflow:hidden;background:#000;line-height:0}
.ns-video{display:block;max-width:100%;max-height:min(62vh,620px);background:#000;color-scheme:dark}
/* A recording without picture: a wide, low screen for the subtitle. */
.ns-player.is-audio{align-self:stretch}
.ns-player.is-audio .ns-video{width:100%;aspect-ratio:21/9;max-height:none}
.ns-overlay{
  position:absolute;left:50%;bottom:max(15%,52px);transform:translateX(-50%);
  width:max-content;max-width:92%;padding:.22em .6em;border-radius:6px;
  background:rgba(10,10,10,.8);color:#fff;text-align:center;white-space:pre-line;
  font-size:var(--ns-fs,18px);font-weight:600;line-height:1.3;letter-spacing:-.005em;pointer-events:none;
}

.ns-file{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.ns-file__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;letter-spacing:.08em;color:var(--fg-2)}
.ns-change{display:inline-flex;align-items:center;min-height:40px;flex:none;cursor:pointer}
.ns-change:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}
.ns-change:has(input:disabled){opacity:.45;cursor:not-allowed}

.ns-hint{margin-top:10px;font-size:13px;line-height:1.55;color:var(--fg-2)}
#nsRoot .tool__panel .pill:has(input:disabled){opacity:.5}
#nsRoot .tool__panel input:disabled{cursor:not-allowed}

/* While the model works: one bar and the words it has just heard. */
.ns-progress{display:flex;align-items:center;gap:14px}
.ns-bar{
  -webkit-appearance:none;appearance:none;flex:1;display:block;height:4px;border:0;border-radius:4px;
  background:rgba(250,250,247,.12);color:var(--olive);overflow:hidden;
}
.ns-bar::-webkit-progress-bar{background:rgba(250,250,247,.12);border-radius:4px}
.ns-bar::-webkit-progress-value{background:var(--olive);border-radius:4px;transition:width .3s var(--ease-out)}
.ns-bar::-moz-progress-bar{background:var(--olive);border-radius:4px}
.ns-pct{min-width:4ch;font-size:12px;letter-spacing:.04em;color:var(--olive);text-align:right;font-variant-numeric:tabular-nums}
.ns-live{max-width:74ch;font-size:15px;line-height:1.55;font-style:italic;color:var(--fg);overflow-wrap:anywhere}

/* The subtitles: hairline rows, number, times, text. */
.ns-list{display:flex;flex-direction:column}
.ns-head,.ns-cue{display:grid;grid-template-columns:44px 212px minmax(0,1fr) 36px;gap:14px;align-items:start}
.ns-head{padding:0 0 10px;border-bottom:1px solid var(--rule-d);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.ns-head span:last-child{grid-column:3 / span 2}
.ns-cues{list-style:none}
.ns-cue{padding:10px 0;border-bottom:1px solid var(--rule-d)}
.ns-cue__num{
  display:grid;place-items:center;width:44px;height:40px;border-radius:999px;
  font-size:12px;letter-spacing:.06em;color:var(--fg-3);font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease),background .2s var(--ease),transform 160ms var(--ease-out);
}
.ns-cue__num:hover{color:var(--ink);background:var(--olive)}
.ns-cue__num:active{transform:scale(.94)}
.ns-cue.is-active .ns-cue__num{color:var(--olive)}
.ns-cue.is-active .ns-cue__num:hover{color:var(--ink)}
.ns-cue__times{display:flex;align-items:center;gap:6px}
.ns-cue__arrow{font-size:12px;color:var(--fg-3)}
.ns-time,.ns-cue__text{
  border:1px solid var(--rule-d);border-radius:var(--r-xs);background:transparent;color:var(--fg);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ns-time{width:calc(8ch + 22px);height:40px;padding:0 6px;font-size:13px;letter-spacing:.02em;text-align:center;font-variant-numeric:tabular-nums}
.ns-cue__text{
  display:block;width:100%;min-height:40px;padding:8px 10px;resize:none;
  font-family:inherit;font-size:15px;line-height:1.45;letter-spacing:-.01em;
}
.ns-time:hover,.ns-cue__text:hover{border-color:rgba(250,250,247,.28)}
.ns-time:focus,.ns-cue__text:focus{border-color:var(--olive);background:rgba(250,250,247,.03)}
.ns-time:focus-visible,.ns-cue__text:focus-visible{outline:none}
.ns-time[aria-invalid="true"]{border-color:#ff8a7a}
.ns-cue.is-active .ns-cue__text{border-color:rgba(204,211,118,.55)}
.ns-del{
  display:grid;place-items:center;width:36px;height:36px;margin-top:2px;border-radius:50%;
  border:1px solid var(--rule-d);color:var(--fg-2);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.ns-del svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ns-del:hover{background:#ff8a7a;border-color:#ff8a7a;color:var(--ink)}
.ns-copy{align-self:flex-start;margin-top:14px;min-height:40px}

@media (max-width:640px){
  .ns-head{display:none}
  .ns-cue{grid-template-columns:40px minmax(0,1fr) 36px;grid-template-areas:"num times del" "text text text";gap:8px 10px}
  .ns-cue__num{grid-area:num;width:40px}
  .ns-cue__times{grid-area:times}
  .ns-cue__text{grid-area:text}
  .ns-del{grid-area:del}
  .ns-time{font-size:16px}
  .ns-cue__text{font-size:16px}
}
@media (prefers-reduced-motion: reduce){
  .ns-bar::-webkit-progress-value{transition:none}
}