/* Vocabulary reader.
 *
 * Built on the house tokens (css/tokens.css) and the house Glow-UI grammar
 * (css/glow.css), exactly as views/pin_video.css is — accent through
 * `var(--glow-accent, #a78bfa)`, radii from --radius-sm/md/lg (6/10/12),
 * spacing from --space-*, state colours from --danger / --success.
 *
 * THE ONE LAW (Glow-UI): everything interactive glows dimly; the chosen one
 * glows brighter. State is BRIGHTNESS, never a flat grey beside a lit thing.
 *
 * BRIGHTNESS BUDGET, brightest first:
 *   1. the page picture and the box on the picture being typed about
 *   2. the picked number of rows
 *   3. idle choices and boxes — dim, but lit
 *   4. cards — soft ambient only
 */

/* ----------------------------------------------------------- the picker */

.vr-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--glow-accent, #a78bfa) 45%, transparent);
  border-radius: var(--radius-lg, 12px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 4%, transparent);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.vr-drop-over {
  border-color: var(--glow-accent, #a78bfa);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
}

.vr-drop-text {
  margin: 0;
  font-weight: 600;
}

.vr-file {
  max-width: 100%;
}

/* -------------------------------------------------------- the two halves */

.vr-run {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vr-run-top {
  display: flex;
  gap: var(--space-2);
}

.vr-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

/* One column on a narrow window: the page first, the words under it. */
@media (max-width: 900px) {
  .vr-edit {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vr-half {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.vr-panel-title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

/* ------------------------------------------------------ the page picture */

.vr-page-frame {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  box-shadow: 0 0 22px color-mix(in srgb, var(--glow-accent, #a78bfa) 18%, transparent);
}

.vr-page-img {
  display: block;
  width: 100%;
  height: auto;
}

.vr-page-missing {
  margin: 0 0 var(--space-3);
}

/* A box over each picture on the page. Dim until its words are being
   typed, then it is the brightest thing on the page. */
.vr-box {
  position: absolute;
  border: 2px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 55%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.vr-box-on {
  border-color: var(--danger, #ef4444);
  background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--danger, #ef4444) 45%, transparent);
}

.vr-box-num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text, #e5e7eb);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------- the choices */

.vr-step {
  margin-top: var(--space-3);
}

.vr-step-title {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
}

.vr-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vr-choice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 35%, transparent);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 5%, transparent);
  color: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.vr-choice:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--glow-accent, #a78bfa) 65%, transparent);
}

.vr-choice-on {
  border-color: var(--glow-accent, #a78bfa);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 16%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--glow-accent, #a78bfa) 35%, transparent);
}

.vr-choice:disabled {
  opacity: 0.55;
  cursor: default;
}

.vr-choice-label {
  font-weight: 600;
}

.vr-rows-note,
.vr-find-hint {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
}

.vr-find-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.vr-source {
  font-size: 0.85rem;
  opacity: 0.8;
}

.vr-find-said {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--danger, #ef4444);
}

/* -------------------------------------------------------------- the words */

.vr-table-head {
  margin-bottom: var(--space-2);
}

.vr-table-hint {
  margin: 0;
  font-size: 0.85rem;
}

.vr-save-line {
  margin: var(--space-1, 4px) 0 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

.vr-table-wrap {
  overflow-x: auto;
}

.vr-table {
  width: 100%;
  border-collapse: collapse;
}

.vr-th {
  text-align: left;
  padding: var(--space-2);
  font-size: 0.85rem;
  opacity: 0.8;
  border-bottom: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 25%, transparent);
}

.vr-th-num,
.vr-td-num {
  width: 2.5rem;
  text-align: right;
  opacity: 0.7;
}

.vr-td {
  padding: var(--space-1, 4px) var(--space-2);
  vertical-align: middle;
}

/* The row being typed in matches the lit box on the page — one thing is
   being worked on, and it is lit in both halves at once. */
.vr-row-on .vr-td {
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent);
}

.vr-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 4%, transparent);
  color: inherit;
  font: inherit;
}

.vr-input:focus {
  outline: none;
  border-color: var(--glow-accent, #a78bfa);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 30%, transparent);
}

.vr-input-sentence {
  min-width: 12rem;
}

/* ------------------------------------------------ where the rest plugs in */

.vr-mount:empty {
  display: none;
}

.vr-mount {
  margin-top: var(--space-3);
}

/* ------------------------------------------------------------- the work */

.vr-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 12%, transparent);
  overflow: hidden;
}

.vr-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--glow-accent, #a78bfa);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow-accent, #a78bfa) 55%, transparent);
  transition: width 200ms ease;
}

.vr-progress-line {
  margin: var(--space-2) 0 0;
  font-weight: 600;
}

.vr-settings > .vr-progress-card {
  margin-top: var(--space-3);
}

.vr-error-what {
  margin: 0 0 var(--space-1, 4px);
  font-weight: 600;
}

.vr-error-fix {
  margin: 0;
  opacity: 0.85;
}

/* ---------------------------------------------- M8: the settings panel */

.vr-settings {
  margin-top: var(--space-3);
}

.vr-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.vr-step-head .vr-step-title {
  margin-bottom: var(--space-1, 4px);
}

.vr-step-note {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.vr-select {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--glow-accent, #a78bfa) 35%, transparent);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--glow-accent, #a78bfa) 5%, transparent);
  color: inherit;
}

.vr-range {
  width: 100%;
  accent-color: var(--glow-accent, #a78bfa);
}

.vr-check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.vr-check-label {
  font-weight: 600;
}

.vr-check-hint {
  margin: var(--space-1, 4px) 0 0;
}

.vr-make-row {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.vr-make-note {
  margin: 0;
}

/* ------------------------------------------------- M8: suggested words */

.vr-suggest-panel {
  margin: var(--space-2) 0;
}

.vr-suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.vr-suggest-hint {
  flex: 1 1 200px;
  font-size: 0.85rem;
}

.vr-suggest-said {
  margin: var(--space-2) 0 0;
  font-weight: 600;
}

/* ---------------------------------------------------- M8: the finished */

.vr-done h3 {
  margin: 0 0 var(--space-2);
}

.vr-result-video {
  width: 100%;
  max-height: 60vh;
  border-radius: var(--radius-md, 10px);
  background: #000;
}

.vr-done-row {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --------------------------------------- M4: Chinese under the words */

.vr-step-bilingual {
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  padding-top: var(--space-3);
}

.vr-provider-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.vr-provider-label {
  font-weight: 600;
}

.vr-fonts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0;
}

.cf-picker {
  flex: 1 1 200px;
  min-width: 0;
}

.cf-title {
  margin: 0 0 var(--space-1, 4px);
  font-size: 0.9rem;
}

.cf-input {
  width: 100%;
}

.cf-note {
  margin: 0;
  font-size: 0.85rem;
}

.vr-zh-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.vr-zh-note {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
}

.vr-zh-said {
  margin: var(--space-2) 0 0;
  font-weight: 600;
}

/* The Chinese column: two boxes stacked in one cell. */

.vr-td-zh {
  vertical-align: top;
}

.vr-td-zh .vr-input {
  width: 100%;
  margin-bottom: var(--space-1, 4px);
}

.vr-td-zh-checked {
  background: rgba(120, 200, 255, 0.1);
  box-shadow: inset 2px 0 0 var(--accent, #6cc6ff);
}

.vr-zh-mark {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* Rows, columns, the margin around the page and the padding inside each
   picture — one line each, the heading on the left and the control beside
   it. The two spaces are typed in page pixels, with an arrow either side
   that moves them one pixel at a time. */
.vr-grid-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 0;
}

.vr-grid-label {
  margin: 0;
  min-width: 190px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.vr-px {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vr-nudge {
  width: 28px;
  height: 28px;
  line-height: 1;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  font-size: 0.75rem;
}

.vr-nudge:hover {
  border-color: var(--focus-ring);
}

.vr-nudge:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.vr-px-input {
  width: 72px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vr-px-input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 30%, transparent);
}

.vr-px-unit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The heading line, with the small "Saved" mark on its right. */
.vr-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.vr-saved-mark {
  font-size: 0.75rem;
  color: var(--success);
  opacity: 0.9;
}

/* "Boxes touch each other" — the one-press way to have every box fill its
   whole spot, so each one shares its edge with the next. */
.vr-flush-line {
  margin-top: 2px;
}

.vr-flush-on {
  border-color: var(--focus-ring);
}

.vr-flush-hint {
  font-size: 0.8rem;
}
.vr-log-details > summary {
  cursor: pointer;
  margin: 10px 0 6px;
}