/*
 * Admin tools — shared, scoped stylesheet.
 *
 * Extracted from the inline <style> blocks of the two standalone admin pages
 * (content transfer — .ct-* — and the Repeat Sentence TTS authoring page — .rs-*)
 * when both tools moved into the SPA as admin workspaces. The TTS page itself is
 * retired (the content console replaced it), but its `.rs-*` form/result atoms
 * live on there, and `.cc-*` below is the console's own.
 *
 * Every rule is scoped under `.admin-tool` (the wrapper class each admin
 * workspace root carries) so nothing here can leak into the rest of the SPA.
 * Shared, identical rules between the two pages (bare `button`, `.btn-primary`,
 * `.btn-ghost`, `button:disabled`, bare `h1`, bare `label`) are merged into a
 * single scoped copy. `.ct-*` and `.rs-*` class families don't collide, so
 * they're kept side by side.
 *
 * Deliberately NOT included (page-shell concerns the SPA already handles):
 * the `* { box-sizing }` reset, `body { ... }` rules, `#gate`, `#siteHeaderMount`.
 */

/* ---------------------------------------------------------------------- */
/* Shared header atoms (identical in both source pages)                   */
/* ---------------------------------------------------------------------- */

.admin-tool h1 {
  font-size: 1.375rem;
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-soft-tight);
}

.admin-tool label {
  display: block;
  font-size: var(--font-size-084);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.admin-tool label code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------- */
/* Shared buttons — identical skin to the practice primary action         */
/* (app-shell .btn-primary). Merged once from both pages.                 */
/* ---------------------------------------------------------------------- */

.admin-tool button {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: var(--space-7) var(--space-16);
  border-radius: var(--space-7);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.admin-tool .btn-primary { background: var(--accent-action); color: var(--text-on-emphasis); }
.admin-tool .btn-primary:hover:not(:disabled) { background: var(--accent-action-hover); }
.admin-tool .btn-primary:focus-visible {
  outline: var(--border-width-strong) solid var(--accent-action-soft-border);
  outline-offset: var(--space-2);
}
.admin-tool .btn-ghost {
  background: var(--bg-surface);
  color: var(--text-primary-darker);
  border: var(--border-width-default) solid var(--border-strong);
}
.admin-tool .btn-ghost:hover:not(:disabled) { border-color: var(--input-border-hover); }
.admin-tool button:disabled { background: var(--warm-gray-soft); color: var(--text-muted); cursor: not-allowed; }

/* ========================================================================
 * Content transfer (export / import). Wears the console's context strip,
 * tabs and action skins (.cc-* below) — only its own row/table atoms live here.
 * ======================================================================== */

.admin-tool .ct-wrap { max-width: 900px; margin: 0 auto; padding: var(--space-40) var(--space-20) var(--space-80); }
.admin-tool .ct-eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-tool .ct-sub { color: var(--text-muted); font-size: var(--text-body-size); margin: 0 0 var(--space-24); }

.admin-tool input[type=file] {
  font-family: var(--font-family-ui);
  font-size: 0.9rem;
  padding: var(--space-7) var(--space-10);
  color: var(--text-primary);
  background: var(--input-bg-active);
  border: var(--border-width-default) solid var(--input-border-default);
  border-radius: var(--radius-field);
}
/* The bundle picker sits above the head row, so it carries the gap itself. */
.admin-tool .ct-file { display: block; margin-bottom: var(--space-20); }

/* The one framed surface per view — mirrors .rs-input-block. */
.admin-tool .ct-panel { display: none; }
.admin-tool .ct-panel.is-active { display: block; }
.admin-tool .ct-panel-box {
  background: var(--bg-surface);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-20);
}

.admin-tool .ct-table { margin: var(--space-16) 0 0; }
.admin-tool .ct-row {
  display: grid;
  grid-template-columns: 24px minmax(120px, 1fr) minmax(0, 2fr) 90px;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-8) 0;
  border-bottom: var(--border-width-default) solid var(--border-subtle);
}
.admin-tool .ct-row:last-child { border-bottom: 0; }
.admin-tool .ct-row-head {
  color: var(--text-muted);
  font-size: var(--font-size-082);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: var(--border-width-default) solid var(--border-default);
}
.admin-tool .ct-col-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-size-08125); color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-tool .ct-col-desc { font-size: var(--font-size-084); color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-tool .ct-col-audio { font-size: var(--font-size-082); color: var(--text-muted); text-align: right; }

/* ========================================================================
 * Authoring form + results atoms (`.rs-*`) — now worn by the content console
 * ======================================================================== */

.admin-tool .rs-wrap { max-width: 900px; margin: 0 auto; padding: var(--space-40) var(--space-20) var(--space-80); }

.admin-tool .rs-eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-tool .rs-sub { color: var(--text-muted); font-size: var(--text-body-size); margin: 0 0 var(--space-24); }

/* The JSON input keeps its framed block — the one bordered surface on the page. */
.admin-tool .rs-input-block {
  background: var(--bg-surface);
  border: var(--border-width-default) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-20);
  margin-bottom: var(--space-24);
}

.admin-tool textarea {
  width: 100%;
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-08125);
  padding: var(--space-12);
  color: var(--text-primary);
  background: var(--input-bg-active);
  border: var(--border-width-default) solid var(--input-border-default);
  border-radius: var(--radius-field);
  resize: vertical;
}
.admin-tool textarea:hover { border-color: var(--input-border-hover); }
.admin-tool textarea:focus { outline: none; border-color: var(--input-border-focus); }

.admin-tool .rs-actions { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; margin-top: var(--space-14); }
.admin-tool .rs-hint { color: var(--text-muted); font-size: var(--font-size-084); }

/* Summaries / gate messages — muted uppercase eyebrow; success green, failure red. No filled plate. */
.admin-tool .rs-summary {
  margin: 0 0 var(--space-16);
  font-size: var(--font-size-082);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--line-height-135);
  color: var(--text-secondary);
}
.admin-tool .rs-summary.is-ok { color: var(--success-text-stronger); }
.admin-tool .rs-summary.is-error { color: var(--danger-text); text-transform: none; letter-spacing: 0.01em; }

.admin-tool .rs-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.admin-tool .rs-results-head-actions { display: flex; gap: var(--space-12); }

/* Each generated item is a dash-separated row (bottom hairline), not a card. */
.admin-tool .rs-item {
  padding: var(--space-16) 0;
  border-bottom: var(--border-width-default) solid var(--border-subtle);
}
.admin-tool .rs-item:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-tool .rs-item-head { display: flex; align-items: baseline; gap: var(--space-10); margin-bottom: var(--space-6); }
.admin-tool .rs-status {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-tool .rs-status.ok { color: var(--success-text-stronger); }
.admin-tool .rs-status.bad { color: var(--danger-text); }
.admin-tool .rs-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-size-08125); color: var(--text-muted); }
.admin-tool .rs-text { font-size: var(--text-body-large-size); margin-bottom: var(--space-4); }
.admin-tool .rs-meta { font-size: var(--font-size-084); color: var(--text-muted); margin-bottom: var(--space-8); }
.admin-tool .rs-item audio { width: 100%; max-width: 420px; margin-bottom: var(--space-4); }
.admin-tool .rs-error { color: var(--danger-text); font-size: var(--font-size-084); }
.admin-tool .rs-pick { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-084); color: var(--text-secondary); margin-top: var(--space-8); }

.admin-tool .hidden { display: none; }

/* ========================================================================
 * Content console — the unified authoring workspace (.cc-*).
 * Same atoms as the tools it replaces (.rs-input-block, .rs-actions,
 * .rs-summary, .ct-row-controls); only the staging table is new.
 * ======================================================================== */

.admin-tool .cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-084);
}
.admin-tool .cc-table th {
  text-align: left;
  padding: var(--space-8) var(--space-10) var(--space-8) 0;
  color: var(--text-muted);
  font-size: var(--font-size-082);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: var(--border-width-default) solid var(--border-default);
}
.admin-tool .cc-table td {
  padding: var(--space-10) var(--space-10) var(--space-10) 0;
  vertical-align: top;
  border-bottom: var(--border-width-default) solid var(--border-subtle);
}
.admin-tool .cc-table tr:last-child td { border-bottom: 0; }

.admin-tool .cc-cell-pick { width: 28px; padding-right: 0; }
.admin-tool .cc-cell-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-08125);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.admin-tool .cc-cell-type { color: var(--text-muted); font-size: var(--font-size-082); white-space: nowrap; }
.admin-tool .cc-cell-detail { color: var(--text-secondary); overflow-wrap: anywhere; }
.admin-tool .cc-note { color: var(--text-muted); }
.admin-tool .cc-errors { margin: 0; padding-left: var(--space-16); color: var(--danger-text); }
/* Shape advice about a row that imports fine — never red, or it reads as a rejection. */
.admin-tool .cc-warnings { margin: 0; padding-left: var(--space-16); color: var(--warning-text); }

/* Status chips — text only, no filled plate, medium weight ceiling. */
.admin-tool .admin-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-tool .admin-chip-ok { color: var(--success-text-stronger); }
.admin-tool .admin-chip-info { color: var(--accent-action); }
.admin-tool .admin-chip-warn { color: var(--warning-text); }
.admin-tool .admin-chip-error { color: var(--danger-text); text-transform: none; letter-spacing: 0.01em; }
.admin-tool .admin-chip-muted { color: var(--text-muted); }
.admin-tool .cc-cell-audio { white-space: nowrap; }
.admin-tool .cc-cell-audio .cc-generate {
  display: block;
  margin-top: var(--space-6);
  font-size: var(--font-size-082);
  padding: var(--space-4) var(--space-10);
}
.admin-tool .cc-player { margin-top: var(--space-8); max-width: 280px; }
.admin-tool .cc-player:empty { margin: 0; }

/* Section + task-type pickers — the practice context strip's own trigger/menu, borrowed wholesale.
   The app-shell rules already carry the look; these only outrank `.admin-tool button`, which is more
   specific than the bare `.reading-mode-trigger` / `.practice-mode-option` selectors. */
.admin-tool .cc-context {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.admin-tool .reading-mode-trigger {
  padding: var(--space-3) var(--space-9);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--space-7);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.84375rem;
  font-weight: var(--font-weight-regular);
}
.admin-tool .practice-mode-option {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--space-6);
  background: transparent;
  color: var(--practice-text-primary);
  font-size: var(--font-size-08125);
  font-weight: var(--font-weight-regular);
  white-space: normal;
}

/* Author / Manage — text tabs in the dashboard's idiom (muted → primary + medium when active,
   no underline, no plate), not a pair of buttons. */
.admin-tool .cc-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}
.admin-tool .cc-tab {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-090);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.admin-tool .cc-tab:hover { color: var(--text-primary); }
.admin-tool .cc-tab.active { color: var(--text-primary); font-weight: var(--font-weight-medium); }

/* Secondary/utility actions — quieter and smaller than the primary CTA, which keeps the
   "Check answer" skin. Destructive ones borrow the muted brick the rest of the app uses for
   incorrect/danger; the bright red is not in the palette. */
.admin-tool .cc-action {
  padding: var(--space-5) var(--space-12);
  font-size: var(--font-size-084);
  font-weight: var(--font-weight-regular);
  background: transparent;
  color: var(--text-secondary);
  border: var(--border-width-default) solid var(--border-subtle);
}
.admin-tool .cc-action:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); }
.admin-tool .cc-action:disabled { background: transparent; color: var(--text-faint); border-color: var(--border-subtle); }
.admin-tool .cc-action-danger { color: var(--danger-text); border-color: var(--danger-border); }
.admin-tool .cc-action-danger:hover:not(:disabled) { background: var(--danger-fill); border-color: var(--danger-text); color: var(--danger-text); }

/* The summary shares the head row with the actions, so it drops the block margin. */
.admin-tool .cc-head-summary { margin: 0; }

/* ── Content console: re-voice bar ────────────────────────────────────────────────────────────────
   Sits between the Manage header and the question table. The two pickers reuse the shared
   .reading-mode-trigger / .practice-mode-menu chrome the section/type pickers already use, so this adds
   layout only — no new control look. Hidden entirely for sections whose content carries no audio. */
.admin-tool .cc-revoice-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.admin-tool .cc-revoice-label {
  font-size: var(--font-size-082);
  color: var(--text-secondary);
}

/* The generated clip's preview player, one per re-voiced row, in the Audio column. */
.admin-tool .cc-cell-audio audio {
  max-width: 100%;
  height: var(--space-32);
}

/* Describe Image: the uploaded prompt image, shown at a working size so the admin can confirm the
   right file went up and that its detail is legible before spending a vision call on it. */
.admin-tool .cc-image-preview {
  margin-top: var(--space-12);
}

.admin-tool .cc-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}