:root {
  --bg: #0f1216;
  --panel-bg: #171b21;
  --panel-border: #2a3038;
  --text: #e6e9ee;
  --text-dim: #9aa4b2;
  --accent: #5b9dff;
  --accent-dim: #2c4a78;
  --ok: #4caf7d;
  --warn: #e0a94c;
  --error: #e2695f;
  --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.app-header {
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}
.app-header h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.tagline { color: var(--text-dim); margin: 0; }

/* Fixed to the page corner (not the header) so it's reachable from
   anywhere while scrolling, not just at the very top of the page. */
.settings-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-btn:hover { border-color: var(--accent-dim); }

/* Previously just `padding` + `max-height` on the <dialog> itself, with no
   `overflow` set — a native <dialog>'s own default overflow is `auto`, so
   once the header + hint text + full language list + action row together
   exceeded max-height, the DIALOG grew its own scrollbar in addition to
   `.lang-settings-list`'s inner one: two nested scrollbars, the outer one
   cutting the dialog off mid-list rather than letting it use the window.
   Fixed by making the dialog itself a fixed-size flex column (padding
   moved onto the form so the header/hint/action row can be flex: none —
   never scroll or shrink — while `.lang-settings-list` is the one flex: 1
   child that grows to fill whatever space is left and is the ONLY thing
   that scrolls). `[open]` scopes `display: flex` to when the dialog is
   actually showing — setting it unconditionally would fight the browser's
   own `dialog:not([open]) { display: none }` and can leave a "closed"
   dialog visibly rendered. */
.lang-settings-dialog {
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 0;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(640px, calc(100vh - 4rem));
  overflow: hidden;
}
.lang-settings-dialog[open] { display: flex; flex-direction: column; }
.lang-settings-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
#language-settings-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 1.5rem;
}
.lang-settings-dialog .panel-header-row { flex: none; }
.lang-settings-dialog .hint { margin: 0.5rem 0 1rem; flex: none; }
.lang-settings-actions { flex: none; }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  display: inline-flex;
  align-items: center;
}
.icon-btn:hover { color: var(--text); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.resume-item-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
/* A destructive action gets its own hover color — red only on hover/focus,
   not at rest, so the list doesn't read as alarming by default. */
.resume-delete-btn:hover, .resume-delete-btn:focus-visible { color: var(--error); }

.lang-settings-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* Themed scrollbars for this app's few internally-scrolling panels (the
   language-settings list, the target-language checkbox grid, and the
   review/edit cue table once it can scroll horizontally on narrow
   screens — see the responsive block near the bottom of this file) —
   styled to sit flush with the dark panels instead of a stock light/OS
   scrollbar. `scrollbar-width`/`scrollbar-color` cover Firefox; the
   `::-webkit-scrollbar*` pseudo-elements cover Chrome/Edge/Safari. */
.lang-settings-list,
.checkbox-grid,
#editor-container,
#share-editor-container {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border) transparent;
}
.lang-settings-list::-webkit-scrollbar,
.checkbox-grid::-webkit-scrollbar,
#editor-container::-webkit-scrollbar,
#share-editor-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.lang-settings-list::-webkit-scrollbar-track,
.checkbox-grid::-webkit-scrollbar-track,
#editor-container::-webkit-scrollbar-track,
#share-editor-container::-webkit-scrollbar-track {
  background: transparent;
}
.lang-settings-list::-webkit-scrollbar-thumb,
.checkbox-grid::-webkit-scrollbar-thumb,
#editor-container::-webkit-scrollbar-thumb,
#share-editor-container::-webkit-scrollbar-thumb {
  background: var(--panel-border);
  border-radius: 4px;
}
.lang-settings-list::-webkit-scrollbar-thumb:hover,
.checkbox-grid::-webkit-scrollbar-thumb:hover,
#editor-container::-webkit-scrollbar-thumb:hover,
#share-editor-container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-dim);
}
.lang-settings-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--panel-border);
  font-weight: 400;
  cursor: pointer;
}
.lang-settings-row:last-child { border-bottom: none; }
.lang-settings-row input { margin-top: 0.2rem; }
.lang-settings-row-text { display: flex; flex-direction: column; gap: 0.15rem; }
.lang-settings-row-name { font-weight: 600; font-size: 0.95rem; }
.lang-settings-row-note { color: var(--text-dim); font-size: 0.78rem; }

.lang-settings-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.app-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.panel h2 { margin-top: 0; font-size: 1.1rem; }

.panel-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-header-row h2 { margin-bottom: 0; }

/* A real, self-hosted flag icon — see assets/flags/README.md and
   languages.js's flagSrc(). Used wherever a language is shown outside of
   a plain <select> option (checkboxes, editor tabs, progress rows, export
   headings, the language-settings dialog) via app.js's
   languageBadgeFrag(). Sized to sit on the text baseline like a small
   inline icon rather than a full-height image; a subtle border keeps
   pale flags (Japan-style whites, etc.) visible against this app's dark
   panels without needing per-flag styling. */
.lang-flag {
  display: inline-block;
  width: 1.3em;
  height: auto;
  margin-right: 0.4em;
  border-radius: 2px;
  outline: 1px solid rgba(255, 255, 255, 0.15);
  outline-offset: -1px;
  vertical-align: middle;
  position: relative;
  top: -0.08em;
}

.dropzone {
  border: 2px dashed var(--panel-border);
  border-radius: var(--radius);
  padding: 2.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent-dim); }
.dropzone.dragover { border-color: var(--accent); background: rgba(91, 157, 255, 0.08); }
.dropzone-text { margin: 0 0 0.3rem; font-weight: 600; }
.dropzone-sub { margin: 0; color: var(--text-dim); font-size: 0.85rem; }

.input-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 1rem 0;
}
.input-divider::before, .input-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

.text-input-block label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--text-dim); }
textarea, select, input[type="text"] {
  width: 100%;
  background: #10141a;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
}
textarea { resize: vertical; }

.input-summary { margin: 1rem 0 0; color: var(--ok); font-size: 0.9rem; }
.input-error { margin: 1rem 0 0; color: var(--error); font-size: 0.9rem; }
.hint { display: block; color: var(--text-dim); font-size: 0.8rem; margin-top: 0.3rem; }
.notice-warn { color: var(--warn); font-size: 0.85rem; margin: 0.5rem 0 0; }

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .options-grid { grid-template-columns: 1fr; }
}
.option-group label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; }
.option-subrow { margin-top: 0.6rem; }
.radio-row { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 400; }
.radio-row label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }

.checkbox-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; }
.checkbox-grid { max-height: 220px; overflow-y: auto; border: 1px solid var(--panel-border); border-radius: 6px; padding: 0.75rem; }
.checkbox-item { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; font-size: 0.9rem; width: 150px; }
.checkbox-item-disabled { color: var(--text-dim); opacity: 0.5; cursor: not-allowed; }

.primary-btn, .secondary-btn {
  border: none;
  border-radius: 6px;
  padding: 0.65rem 1.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 600;
}
.primary-btn { background: var(--accent); color: #071018; }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.secondary-btn { background: transparent; border: 1px solid var(--panel-border); color: var(--text); }
.secondary-btn:hover { border-color: var(--accent-dim); }

.progress-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.progress-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: #10141a;
  border-radius: 6px;
  font-size: 0.9rem;
}
.progress-lang { font-weight: 600; display: flex; align-items: center; }
.progress-status { color: var(--text-dim); }

/* #progress-list's rows (translation progress, with a bar underneath)
   need the column layout below; #resume-list reuses .progress-item/
   .progress-lang too (see renderResumeBanner()) but stays a plain side-
   by-side row (label + Resume button) — scoped to #progress-list so that
   reuse isn't affected. */
#progress-list .progress-item { flex-direction: column; gap: 0.35rem; }
.progress-item-top { display: flex; justify-content: space-between; gap: 1rem; }

/* Native <progress> restyled to match the dark panels: a thin, flat bar
   rather than the browser's default chunky/glossy look. Indeterminate
   (no `value` attribute — see resetProgressList()'s own comment) gets a
   subtle animated stripe instead of a fixed fraction, so "Waiting…"/
   "Loading…" doesn't misleadingly imply a known percentage. */
.progress-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border: none;
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel-border);
}
.progress-bar::-webkit-progress-bar { background: var(--panel-border); border-radius: 3px; }
.progress-bar::-webkit-progress-value { background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.progress-bar::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
.progress-bar:indeterminate {
  background: linear-gradient(90deg, var(--panel-border) 25%, var(--accent-dim) 50%, var(--panel-border) 75%);
  background-size: 200% 100%;
  animation: progress-bar-stripe 1.4s linear infinite;
}
.progress-bar:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes progress-bar-stripe {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}

.editor-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.editor-tab {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.editor-tab.active { border-color: var(--accent); color: var(--text); background: rgba(91, 157, 255, 0.1); }

/* The cue table itself stays `width: 100%` of its own natural (unshrunk)
   column widths rather than being squeezed to fit — on a narrow screen
   that's wider than the viewport, so the table scrolls horizontally
   within this wrapper instead of the whole page doing so or every column
   getting illegibly cramped. Applies to both this app's own editor
   (#editor-container) and the shared-link editor (#share-editor-container,
   share.html/share-app.js) since both wrap a `.cue-table` the same way. */
#editor-container, #share-editor-container { overflow-x: auto; }

.cue-editor-empty { color: var(--text-dim); }
.cue-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cue-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--panel-border);
  position: sticky;
  top: 0;
  background: var(--panel-bg);
}
.cue-table td { padding: 0.35rem 0.5rem; vertical-align: top; border-bottom: 1px solid #1d222a; }
.cue-col-num { color: var(--text-dim); width: 2.5rem; }
.cue-source { color: var(--text-dim); max-width: 220px; }
.cue-cell { min-width: 90px; }
.cue-cell-view { cursor: text; padding: 0.15rem 0.3rem; border-radius: 4px; white-space: pre-wrap; }
.cue-cell-view:hover { background: rgba(255, 255, 255, 0.04); }
.cue-cell-input {
  width: 100%;
  background: #10141a;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  padding: 0.2rem 0.35rem;
  font-family: inherit;
  font-size: inherit;
}
.cue-field.cue-cell-error .cue-cell-view { outline: 1px solid var(--error); }
.cue-field[title]:not([title=""]) .cue-cell-view { outline: 1px dashed var(--warn); }

/* Start/end are two independent click-to-edit fields (see editor.js's
   makeEditableField()), but boxed together in one pill so they read as
   one connected "timing" unit rather than two unrelated table columns —
   the same visual pairing a raw "00:00:01,000 --> 00:00:04,000" line has
   in the source file, just with each half separately editable. */
.cue-timing-cell { white-space: nowrap; }
.timing-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  background: #10141a;
}
.timing-group .cue-field { min-width: 6.5rem; text-align: center; }
.timing-group .cue-cell-input { text-align: center; padding: 0.2rem 0.25rem; }
.timing-arrow { color: var(--text-dim); font-size: 0.8rem; flex: none; }

.export-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.export-group { border: 1px solid var(--panel-border); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.export-group-heading { font-weight: 600; font-size: 0.9rem; padding: 0 0.2rem 0.2rem; }
.export-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #10141a;
  border-radius: 6px;
  font-size: 0.9rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.share-link-row { width: 100%; margin-top: 0.3rem; }
.share-link-input {
  width: 100%;
  background: #0b0e12;
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  color: var(--text);
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  font-family: monospace;
}

.app-footer { text-align: center; color: var(--text-dim); font-size: 0.8rem; padding: 1.5rem; }

/* Guards against any one wide element (a long unbroken filename, a wide
   fixed-width child that slips through a flex/grid gap) forcing the whole
   page to scroll sideways on a phone — everything that legitimately needs
   horizontal scroll (the cue table) has its own scrollable wrapper above
   instead, so the page itself never should. */
html, body { overflow-x: hidden; }

/* --- responsive: tablet and phone widths --------------------------------
   Everything above this point was written for a single ~900px desktop
   column (.app-main's max-width) and already had a couple of narrow-width
   rules of its own (.options-grid at 640px, .lang-settings-dialog's own
   `min(…, calc(100vw - 2rem))` sizing) — this block is the rest of the
   pass: fixed-width things that would overflow a phone screen, and
   spacing/type that's needlessly large once there's no room for it. Two
   breakpoints: 720px catches tablets/small laptop windows and most
   phones in landscape; 420px catches the narrowest phones in portrait. */
@media (max-width: 720px) {
  .app-header { padding: 1.5rem 3.5rem 0.75rem 1rem; } /* right padding clears the fixed gear button */
  .app-header h1 { font-size: 1.3rem; }
  .tagline { font-size: 0.9rem; }
  .settings-btn { top: 0.75rem; right: 0.75rem; width: 2.2rem; height: 2.2rem; }
  .app-main { padding: 0 1rem 2rem; gap: 1rem; }
  .panel { padding: 1.1rem; }
  .dropzone { padding: 1.75rem 1rem; }

  /* A fixed 150px per checkbox item is fine wrapped across a wide row but
     wastes space — or, at extreme narrow widths, barely fits — a single
     narrow column; letting each item size itself to its content (still
     wrapping into as many columns as actually fit) reads better at every
     phone width than one fixed number. */
  .checkbox-item { width: auto; min-width: 0; }

  .lang-settings-dialog { width: calc(100vw - 1.25rem); max-height: calc(100vh - 2.5rem); }
  #language-settings-form { padding: 1.1rem; }
  .lang-settings-actions { flex-direction: column-reverse; }
  .lang-settings-actions .primary-btn,
  .lang-settings-actions .secondary-btn { width: 100%; }

  .panel-header-row { flex-wrap: wrap; row-gap: 0.5rem; }

  /* Long saved-session names (a real uploaded filename) or a long
     language name next to the Resume/delete buttons — allow the row to
     wrap onto two lines instead of clipping or forcing the page wider. */
  .progress-item { flex-wrap: wrap; row-gap: 0.4rem; }
  .progress-lang, .progress-item .resume-item-actions { min-width: 0; }
  .progress-lang { overflow-wrap: anywhere; }

  .export-row { flex-direction: column; align-items: stretch; }

  .cue-table { font-size: 0.8rem; }
  .cue-source { max-width: 140px; }
  .timing-group { flex-wrap: wrap; row-gap: 0.2rem; }
}

@media (max-width: 420px) {
  .app-header h1 { font-size: 1.1rem; }
  .app-header { padding-right: 3.25rem; }
  .dropzone-text { font-size: 0.95rem; }
  .dropzone-sub { font-size: 0.78rem; }
}