/* ═══════════════════════════════════════════════════════════
   Speech Lab — pronunciation & shadowing trainer
   compose → generating → practice → library
   English-only, LTR, mobile-first. Tokens come from base.css.
   ═══════════════════════════════════════════════════════════ */

/* base.css owns the design tokens. The prototype carried its own copy so it
   could render standalone; that copy is deliberately NOT here, so the palette
   can never drift away from the rest of the platform. */

.sl { color: var(--text); font-family: var(--font-ui); }
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.sl .mono { font-family: var(--font-mono); }
.sl button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.sl button:disabled { cursor: not-allowed; }
.sl button:focus-visible,
.sl [tabindex]:focus-visible,
.sl input:focus-visible,
.sl textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.sl .icon { width: 18px; height: 18px; flex: none; display: inline-block; }

/* Applies to EVERY svg in the module, not just those wrapped in .icon.
   Most icons are inserted bare (transport buttons, the voice sample button),
   and an unstyled svg defaults to fill:black / stroke:none — which rendered
   these outline glyphs as solid black blobs. */
.sl svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The few shapes that are meant to be solid rather than outlined. */
.sl .sample-btn svg polygon,
.sl .playpause svg polygon,
.sl .playpause svg rect,
.sl .lactions svg polygon { fill: currentColor; stroke: none; }

.sl .sl-transport button svg,
.sl .sample-btn svg,
.sl .lactions button svg { width: 20px; height: 20px; }
.sl .sl-transport .playpause svg { width: 24px; height: 24px; }
.sl .sl-screen { display: none; }
.sl .sl-screen.active { display: block; }
.sl .hidden { display: none !important; }

/* ── Shared ─────────────────────────────────────────────── */
.sl-page-title { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin: 0 0 4px; }
.sl-page-sub { color: #79726a; font-size: 14px; margin: 0 0 18px; }
.sl-quota { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: #6b6357; padding: 10px 16px; background: var(--bg2); border-radius: var(--r-sm); }
.sl-quota b { font-family: var(--font-mono); color: var(--text); font-weight: 600; }
.sl-quota .sep { color: #b6ada0; }
.sl-err { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; }

/* ── Compose ────────────────────────────────────────────── */
.sl-compose { max-width: 720px; margin: 0 auto; padding: 8px 4px 60px; display: flex; flex-direction: column; gap: 18px; }
.sl-title-wrap { margin-bottom: 12px; }
.sl-title-wrap input {
  width: 100%; padding: 12px 16px; font-family: var(--font-ui); font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.sl-title-wrap input::placeholder { color: #a89f92; }

.sl-textarea-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 18px 18px 40px; }
.sl-textarea-wrap textarea { width: 100%; min-height: 200px; border: none; resize: vertical; font-family: var(--font-ui); font-size: 17px; line-height: 1.65; color: var(--text); background: transparent; }
.sl-textarea-wrap textarea::placeholder { color: #a89f92; font-style: italic; }
.sl-wordcount { position: absolute; right: 16px; bottom: 12px; font-family: var(--font-mono); font-size: 13px; color: #8a8072; transition: color var(--t); }
.sl-wordcount.warn { color: var(--warn); }
.sl-wordcount.danger { color: var(--danger); }
.sl-overage { display: flex; align-items: center; gap: 10px; background: var(--danger-bg); color: var(--danger); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; }
.sl-overage button { font-weight: 600; text-decoration: underline; color: var(--danger); }

.sl-voice { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.sl-voice-selected { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.sl-voice-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none; }
.sl-voice-selected .meta { flex: 1; min-width: 0; }
.sl-voice-selected .name { font-weight: 600; font-size: 14px; }
.sl-voice-selected .tag { font-size: 12px; color: #8a8072; }
.sl-voice-selected .change { font-size: 13px; font-weight: 600; color: var(--accent-text); padding: 8px 12px; border-radius: var(--r-sm); }
.sl-voice-selected .change:hover { background: var(--accent-bg); }

.sl-voice-panel { border-top: 1px solid var(--border); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sl-audition-note { font-size: 12px; color: #8a8072; font-style: italic; }
.sl-voice-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-filter-group { display: flex; background: var(--bg2); border-radius: 20px; padding: 3px; gap: 2px; }
.sl-filter-group button { padding: 6px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; color: #6b6357; }
.sl-filter-group button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.sl-voice-rows { max-height: 380px; overflow-y: auto; padding-right: 8px; display: flex; flex-direction: column; gap: 14px; }
.sl-tier { display: flex; flex-direction: column; gap: 6px; }
.sl-tier-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #a89f92; padding-left: 2px; }
.sl-voice-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); border: 1px solid transparent; transition: background var(--t), border-color var(--t); }
.sl-voice-row:hover { background: var(--bg2); }
.sl-voice-row .sample-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
.sl-voice-row .sample-btn:hover { background: var(--accent); color: #fff; }
.sl-voice-row.auditioning { background: var(--accent-bg); border-color: var(--accent); }
.sl-voice-row.auditioning .sample-btn { background: var(--accent); color: #fff; }
.sl-voice-row.selected { border-color: var(--green); background: var(--green-bg); }
.sl-voice-row .rname { flex: 1; font-size: 14px; font-weight: 600; }
.sl-voice-row .rtag { font-size: 12px; color: #8a8072; font-family: var(--font-mono); }
.sl-voice-row .check { width: 18px; height: 18px; color: var(--green); flex: none; visibility: hidden; }
.sl-voice-row.selected .check { visibility: visible; }
.sl-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.sl-eq span { width: 2px; background: currentColor; border-radius: 1px; animation: sl-eq .9s ease-in-out infinite; }
.sl-eq span:nth-child(2) { animation-delay: .15s; }
.sl-eq span:nth-child(3) { animation-delay: .3s; }
@keyframes sl-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .sl-eq span { animation: none; height: 9px; } }

.sl-cta { align-self: flex-start; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); transition: box-shadow var(--t); }
.sl-cta:hover:not(:disabled) { box-shadow: var(--shadow-md); }
.sl-cta:disabled { background: #c9c2b4; box-shadow: none; }
.sl-blocked { background: var(--gold-bg); border: 1px solid var(--gold); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.sl-blocked .t { font-weight: 700; color: #8a6416; }
.sl-blocked .d { font-size: 13px; color: #8a6416; }

/* ── Generating ─────────────────────────────────────────── */
.sl-generating { max-width: 520px; margin: 60px auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.sl-gen-ring { width: 88px; height: 88px; border-radius: 50%; border: 5px solid var(--bg2); border-top-color: var(--accent); animation: sl-spin 1.1s linear infinite; }
@keyframes sl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sl-gen-ring { animation: none; border-top-color: var(--bg2); } }
.sl-gen-status { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.sl-gen-sub { font-size: 14px; color: #79726a; margin: 0; }
.sl-gen-ready { background: var(--green-bg); color: #155c3c; border-radius: var(--r-sm); padding: 10px 16px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sl-gen-queued { background: var(--accent-bg); color: var(--accent-text); border-radius: var(--r); padding: 16px 18px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.sl-gen-failed { background: var(--warn-bg); border: 1px solid var(--warn); color: #8a5a05; border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sl-cancel { font-size: 13px; color: #8a8072; text-decoration: underline; }
.sl-retry { background: var(--warn); color: #fff; font-weight: 700; padding: 9px 18px; border-radius: var(--r-sm); }

/* ── Practice ───────────────────────────────────────────── */
.sl-practice { display: flex; flex-direction: column; height: calc(100vh - 150px); height: calc(100dvh - 150px); }
.sl-p-header { display: flex; align-items: center; gap: 10px; padding: 10px 4px; flex: none; }
.sl-p-header .back { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sl-p-header .back:hover { background: var(--bg2); }
.sl-p-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-p-voice-chip { font-size: 12px; font-weight: 600; color: var(--accent-text); background: var(--accent-bg); padding: 6px 10px; border-radius: 20px; flex: none; }
.sl-p-main { flex: 1; overflow-y: auto; padding: 8px 4px 12px; }
.sl-kbd-hint { font-size: 11px; color: #a89f92; text-align: center; padding: 4px 0; margin: 0 0 8px; }
.sl-kbd-hint kbd { font-family: var(--font-mono); background: var(--bg2); border-radius: 3px; padding: 1px 5px; margin: 0 1px; }

.sl-transcript { max-width: 66ch; margin: 0 auto; font-size: 19px; line-height: 2.1; }
.sl-word { display: inline; padding: 2px 3px; border-radius: var(--r-xs); cursor: pointer; }
.sl-word:hover { background: var(--bg2); }
/* The karaoke highlight has to be readable at a glance while a student is
   reading along and speaking. --accent-bg is an 8% tint, which was far too
   faint against the warm page for that. Solid accent with white text reads
   instantly without turning the passage into a stripe of colour, since only one
   word is ever lit. */
.sl-word.karaoke {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: var(--r-xs);
}
/* A lit word inside a selection keeps the selection's gold underline so the
   two states stay distinguishable. */
.sl-word.in-selection.karaoke { box-shadow: 0 0 0 2px var(--accent), inset 0 -2px 0 var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .sl-word.karaoke { transition: background .12s ease, color .12s ease; }
}
.sl-word.in-selection { background: var(--gold-bg); box-shadow: inset 0 -2px 0 var(--gold); }
.sl-word.pending { color: #b6ada0; cursor: default; }

.sl-selbar { flex: none; margin: 0 4px; background: var(--gold-bg); border: 1px solid var(--gold); border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sl-selbar .stext { font-weight: 600; font-size: 13px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-selbar .sdur, .sl-selbar .sipa { font-family: var(--font-mono); font-size: 13px; color: #8a6416; }
.sl-selbar .sipa { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-selbar .sactions { display: flex; gap: 6px; margin-left: auto; }
.sl-selbar .sactions button { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 16px; background: var(--surface); }
.sl-selbar .sactions .clear { background: none; color: #8a6416; }

.sl-dock { flex: none; background: var(--surface); border-top: 1px solid var(--border); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -4px 16px rgba(0,0,0,.04); }
.sl-modes { display: flex; gap: 6px; }
.sl-modes button { flex: 1; font-size: 12px; font-weight: 700; padding: 8px 4px; border-radius: var(--r-sm); color: #8a8072; background: var(--bg2); }
.sl-modes button.on { background: var(--green); color: #fff; }
.sl-transport { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sl-transport button { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg2); }
.sl-transport button.playpause { width: 56px; height: 56px; background: var(--green); color: #fff; }
.sl-transport button:disabled { opacity: .45; }
.sl-more-btn { align-self: center; font-size: 12px; color: #8a8072; display: flex; align-items: center; gap: 4px; }
.sl-drawer { display: none; flex-direction: column; gap: 12px; padding-top: 6px; border-top: 1px solid var(--border); }
.sl-drawer.open { display: flex; }
.sl-drawer-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sl-drawer-row label { width: 64px; color: #79726a; flex: none; }
.sl-drawer-row input[type=range] { flex: 1; accent-color: var(--accent); }
.sl-seg { display: flex; gap: 4px; }
.sl-seg button { padding: 5px 10px; font-size: 12px; font-weight: 700; border-radius: 14px; background: var(--bg2); color: #6b6357; }
.sl-seg button.on { background: var(--accent); color: #fff; }
.sl-hq-chip { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 12px; background: var(--gold-bg); color: #8a6416; }

/* ── Library ────────────────────────────────────────────── */
.sl-library { max-width: 860px; margin: 0 auto; padding: 8px 4px 60px; }
.sl-lib-note { font-size: 13px; color: #155c3c; background: var(--green-bg); border-radius: var(--r-sm); padding: 8px 12px; display: inline-flex; margin-bottom: 16px; }
.sl-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sl-lib-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-sm); transition: box-shadow var(--t); display: flex; flex-direction: column; gap: 8px; }
.sl-lib-card:hover { box-shadow: var(--shadow-md); }
.sl-lib-card .lt { font-weight: 700; font-size: 15px; }
.sl-lib-card .lf { font-size: 13px; color: #79726a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-lib-card .lmeta { display: flex; gap: 10px; font-size: 12px; color: #8a8072; font-family: var(--font-mono); flex-wrap: wrap; }
.sl-lib-card .lactions { display: flex; gap: 6px; margin-top: 4px; }
.sl-lib-card .lactions button { width: 32px; height: 32px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
.sl-lib-card .lactions button:hover { background: var(--accent); color: #fff; }
.sl-lib-card .lactions .del:hover { background: var(--danger); }
.sl-lib-empty { text-align: center; padding: 60px 20px; color: #8a8072; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sl-lib-empty a { color: var(--accent-text); font-weight: 700; cursor: pointer; }

/* ── Tabs ───────────────────────────────────────────────── */
.sl-tabs { display: flex; gap: 4px; background: var(--bg2); border-radius: 20px; padding: 3px; margin: 0 auto 16px; width: fit-content; }
.sl-tabs button { padding: 7px 18px; border-radius: 16px; font-size: 13px; font-weight: 600; color: #6b6357; }
.sl-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

@media (max-width: 560px) {
  .sl-transcript { font-size: 17px; line-height: 2; }
  .sl-selbar .stext { max-width: 130px; }
  .sl-selbar .sipa { max-width: 150px; }
}