/* Voice Trainer - voice-trainer.css
 * Tool styles for /things/voice-trainer/
 * Uses :root tokens from main.css. Skin driven by html[data-skin] attribute.
 * Dark (office) is the default. Workshop (light) overrides via data-skin.
 */

/* ── Skin tokens ────────────────────────────────────────────────────────────── */

/* Default: Office — dark elevated card, light text, amber accent */
.vt-wrap {
  --vt-surface:     var(--slate);
  --vt-text:        var(--off-white);
  --vt-muted:       var(--office-mist);
  --vt-border:      rgba(248, 249, 247, 0.12);
  --vt-accent:      var(--amber);
  --vt-accent-bg:   rgba(181, 133, 58, 0.10);
  --vt-ground-text: var(--off-white);

  background: var(--office-bg);
  color:      var(--off-white);
}

/* Workshop (light) — cream ground, white cards, sage accent */
html[data-skin="workshop"] .vt-wrap {
  --vt-surface:     #ffffff;
  --vt-text:        var(--slate);
  --vt-muted:       var(--slate-mid);
  --vt-border:      var(--rule);
  --vt-accent:      var(--sage);
  --vt-accent-bg:   rgba(92, 138, 122, 0.10);
  --vt-ground-text: var(--slate);

  background: var(--off-white);
  color:      var(--vt-text);
}

/* thing-stage override: content aligns to top, not vertically centred */
.thing-stage { justify-content: flex-start; }

/* ── Shell surface overrides ─────────────────────────────────────────────────── */

/* Office: close the seam between var(--slate) shell and var(--office-bg) content */
body.skin-office .thing-shell,
body.skin-office .thing-shell .footer { background: var(--office-bg); }

/* Workshop: flip entire surface to light */
html[data-skin="workshop"] .thing-shell {
  background: var(--off-white);
  color:      var(--slate);
}

html[data-skin="workshop"] .thing-shell .footer     { background: var(--off-white); }
html[data-skin="workshop"] .thing-shell .footer a   { color: var(--slate-muted); border-bottom-color: var(--rule); }
html[data-skin="workshop"] .thing-shell .footer a:hover { color: var(--slate); }

html[data-skin="workshop"] .nav                     { background: var(--off-white); }
html[data-skin="workshop"] .nav-wordmark            { color: var(--slate); }
html[data-skin="workshop"] .nav-back                { color: var(--slate-muted); }
html[data-skin="workshop"] .nav-back:hover          { color: var(--slate); }
html[data-skin="workshop"] .nav .btn-ghost          { color: var(--slate-muted); }
html[data-skin="workshop"] .nav .btn-ghost:hover    { color: var(--slate); }


/* ── Layout ─────────────────────────────────────────────────────────────────── */

.vt-wrap {
  width:           100%;
  max-width:       600px;
  display:         flex;
  flex-direction:  column;
  gap:             24px;
  padding-bottom:  48px;
}

/* ── Screens ────────────────────────────────────────────────────────────────── */

.vt-screen {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.vt-screen[hidden] { display: none; }

/* ── Card ────────────────────────────────────────────────────────────────────── */

.vt-card {
  background:     var(--vt-surface);
  border:         1px solid var(--vt-border);
  border-radius:  8px;
  padding:        24px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

/* ── Start screen ────────────────────────────────────────────────────────────── */

.vt-header { text-align: center; padding: 8px 0; }

.vt-title {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      clamp(36px, 9vw, 52px);
  letter-spacing: -0.02em;
  color:          var(--vt-ground-text);
  line-height:    1.1;
}

.vt-tagline {
  font-size:      14px;
  color:          var(--vt-muted);
  margin-top:     8px;
  letter-spacing: 0.04em;
}

.vt-streak-badge {
  text-align:     center;
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--vt-accent);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.vt-btn-primary {
  background:    var(--vt-accent);
  color:         var(--white);
  border:        none;
  border-radius: 6px;
  padding:       12px 28px;
  font-size:     15px;
  font-weight:   500;
  cursor:        pointer;
  transition:    opacity 0.15s;
  align-self:    center;
  min-width:     140px;
  text-align:    center;
}

.vt-btn-primary:hover:not(:disabled) { opacity: 0.85; }
.vt-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.vt-btn-secondary {
  background:    transparent;
  color:         var(--vt-muted);
  border:        1px solid var(--vt-border);
  border-radius: 6px;
  padding:       12px 28px;
  font-size:     15px;
  font-weight:   400;
  cursor:        pointer;
  transition:    color 0.15s, border-color 0.15s;
  align-self:    center;
  min-width:     140px;
  text-align:    center;
}

.vt-btn-secondary:hover { color: var(--vt-text); border-color: var(--vt-text); }

/* ── Skin slider in nav ──────────────────────────────────────────────────────── */

/* Office (default): dark nav — active side = accent, inactive = mist */
.nav .toggle-label--left  { color: var(--office-mist); }
.nav .toggle-label--right { color: var(--amber); }

/* Workshop: light nav — active side = sage, inactive = slate-muted */
html[data-skin="workshop"] .nav .toggle-label--left  { color: var(--sage); }
html[data-skin="workshop"] .nav .toggle-label--right { color: var(--slate-muted); }

/* Mute thumb shadow — reduces double-amber against the Office nav top rule */
.nav .toggle-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* Push the labeled toggle group flush right in the trainer nav flow */
.nav--thing .nav-actions { margin-left: auto; }

/* ── Progress bar ────────────────────────────────────────────────────────────── */

.vt-progress {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.vt-progress-track {
  flex:          1;
  height:        3px;
  background:    var(--vt-border);
  border-radius: 2px;
  overflow:      hidden;
}

.vt-progress-fill {
  height:        100%;
  background:    var(--vt-accent);
  width:         0%;
  transition:    width 400ms ease;
  border-radius: 2px;
}

.vt-progress-text {
  font-size:   12px;
  color:       var(--vt-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Start screen additions ──────────────────────────────────────────────────── */

.vt-start-desc {
  font-size:   14px;
  color:       var(--vt-muted);
  text-align:  center;
  line-height: 1.6;
}

.vt-start-paths {
  display:         flex;
  gap:             12px;
  justify-content: center;
  flex-wrap:       wrap;
}

.vt-btn-path {
  background:     transparent;
  border:         1px solid var(--vt-accent);
  border-radius:  6px;
  padding:        14px 20px;
  font-size:      15px;
  font-weight:    500;
  color:          var(--vt-accent);
  cursor:         pointer;
  transition:     background 0.15s;
  flex:           1;
  min-width:      140px;
  max-width:      220px;
  text-align:     left;
  line-height:    1.4;
}

.vt-btn-path:hover { background: var(--vt-accent-bg); }

.vt-path-label {
  display:     block;
  font-size:   12px;
  font-weight: 400;
  color:       var(--vt-muted);
  margin-top:  4px;
}

/* ── Exercise intro line ─────────────────────────────────────────────────────── */

.vt-intro {
  font-size:   13px;
  color:       var(--vt-muted);
  line-height: 1.5;
}

.vt-intro[hidden] { display: none; }

/* ── Exercise card content ───────────────────────────────────────────────────── */

.vt-type-badge {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--vt-accent);
}

.vt-prompt {
  font-size:   16px;
  line-height: 1.6;
  color:       var(--vt-text);
}

.vt-dead-word {
  background:    rgba(181, 133, 58, 0.2);
  color:         var(--amber);
  font-style:    normal;
  border-radius: 3px;
  padding:       1px 3px;
}

/* ── Hint ────────────────────────────────────────────────────────────────────── */

.vt-hint-wrap { display: flex; flex-direction: column; gap: 8px; }

.vt-hint-toggle {
  align-self:            flex-start;
  background:            transparent;
  border:                none;
  padding:               0;
  font-size:             13px;
  color:                 var(--vt-muted);
  cursor:                pointer;
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            color 0.15s;
}

.vt-hint-toggle:hover { color: var(--vt-text); }

.vt-hint {
  font-size:   14px;
  font-style:  italic;
  color:       var(--vt-muted);
  line-height: 1.5;
}

.vt-hint[hidden] { display: none; }

/* ── Textarea ────────────────────────────────────────────────────────────────── */

.vt-textarea-wrap { position: relative; }

.vt-textarea {
  width:         100%;
  background:    transparent;
  border:        1px solid var(--vt-border);
  border-radius: 6px;
  padding:       12px 48px 12px 14px;
  font-family:   var(--sans);
  font-size:     15px;
  font-weight:   300;
  color:         var(--vt-text);
  line-height:   1.6;
  resize:        vertical;
  min-height:    100px;
  transition:    border-color 0.15s;
}

.vt-textarea:focus { outline: none; border-color: var(--vt-accent); }
.vt-textarea::placeholder { color: var(--vt-muted); opacity: 0.7; }

/* ── Dead word input ─────────────────────────────────────────────────────────── */

.vt-deadword-wrap { display: flex; justify-content: center; }

.vt-deadword-input {
  background:    transparent;
  border:        1px solid var(--vt-border);
  border-radius: 6px;
  padding:       10px 16px;
  font-family:   var(--sans);
  font-size:     15px;
  font-weight:   400;
  color:         var(--vt-text);
  text-align:    center;
  min-width:     240px;
  max-width:     100%;
  transition:    border-color 0.15s;
}

.vt-deadword-input:focus { outline: none; border-color: var(--vt-accent); }
.vt-deadword-input::placeholder { color: var(--vt-muted); opacity: 0.5; }

/* ── Error ───────────────────────────────────────────────────────────────────── */

.vt-error {
  font-size:   14px;
  color:       var(--rose);
  text-align:  center;
  min-height:  1.4em;
}

.vt-error[hidden] { display: none; }

/* ── Score bars ──────────────────────────────────────────────────────────────── */

.vt-score-bars { display: flex; flex-direction: column; gap: 8px; }

.vt-bar-row {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.vt-bar-label {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--vt-muted);
  width:          74px;
  flex-shrink:    0;
}

.vt-bar-track {
  flex:          1;
  height:        5px;
  background:    var(--vt-border);
  border-radius: 3px;
  overflow:      hidden;
}

.vt-bar-fill {
  height:        100%;
  background:    var(--vt-accent);
  width:         0%;
  transition:    width 700ms ease-out;
  border-radius: 4px;
}

.vt-bar-value {
  font-size:   12px;
  font-weight: 400;
  color:       var(--vt-muted);
  width:       16px;
  text-align:  right;
  flex-shrink: 0;
}

/* ── Reveal: original prompt block (the before) ─────────────────────────────── */

.vt-prompt-label {
  display:        block;
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--vt-muted);
  opacity:        0.65;
  margin-bottom:  4px;
}

.vt-prompt-text {
  font-size:   13px;
  color:       var(--vt-muted);
  line-height: 1.55;
  opacity:     0.70;
  margin:      0 0 20px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--vt-border);
}

/* ── Reveal answer (Your line) ───────────────────────────────────────────────── */

.vt-reveal-answer-text {
  font-size:   15px;
  color:       var(--vt-text);
  line-height: 1.6;
  margin-top:  4px;
}

/* ── Reveal card disclosure ("Why this scored where it did") ─────────────────── */

.vt-reveal-disclosure {
  margin-top: 20px;
}

.vt-critique {
  padding-top: 4px;
}

/* ── Verdict (result.worked promoted above bars) ─────────────────────────────── */

.vt-verdict {
  font-size:     15px;
  font-weight:   400;
  color:         var(--vt-text);
  line-height:   1.55;
  margin-top:    16px;
  margin-bottom: 16px;
}

/* ── Feedback text ───────────────────────────────────────────────────────────── */

.vt-feedback { display: flex; flex-direction: column; gap: 12px; }

.vt-worked {
  font-size:   14px;
  color:       var(--vt-accent);
  line-height: 1.55;
}

.vt-improve {
  font-size:   14px;
  color:       var(--vt-muted);
  line-height: 1.55;
}

.vt-version {
  border-top:     1px solid var(--vt-border);
  margin-top:     4px;
  padding-top:    20px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.vt-version-label {
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--vt-muted);
  opacity:        0.65;
}

.vt-version-text {
  font-size:   16px;
  color:       var(--vt-text);
  line-height: 1.65;
  font-style:  italic;
}

/* ── Dead word reveal ────────────────────────────────────────────────────────── */

.vt-dw-result {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  padding:        8px 0;
}

.vt-dw-score {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      48px;
  letter-spacing: -0.02em;
  color:          var(--vt-text);
  line-height:    1;
}

.vt-dw-feedback {
  font-size:   14px;
  color:       var(--vt-muted);
  line-height: 1.5;
  text-align:  center;
}

/* ── Session end ─────────────────────────────────────────────────────────────── */

.vt-end-score-small {
  text-align: center;
  font-size:  13px;
  color:      var(--vt-muted);
}

.vt-end-streak {
  text-align: center;
  font-size:  13px;
  color:      var(--vt-muted);
  min-height: 1.4em;
}

.vt-end-actions {
  display:         flex;
  justify-content: center;
  gap:             12px;
  flex-wrap:       wrap;
}

/* ── Session read (end screen top) ──────────────────────────────────────────── */

.vt-session-read {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.vt-read-item {
  background:    var(--vt-surface);
  border:        1px solid var(--vt-border);
  border-radius: 8px;
  padding:       16px 20px;
  display:       flex;
  flex-direction: column;
  gap:           6px;
}

.vt-read-label {
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--vt-accent);
}

.vt-read-quote {
  font-size:   15px;
  color:       var(--vt-text);
  line-height: 1.6;
  font-style:  italic;
}

.vt-read-caption {
  font-size:  12px;
  color:      var(--vt-muted);
  margin-top: 2px;
}

.vt-read-fix {
  font-size:   13px;
  color:       var(--vt-muted);
  line-height: 1.55;
  margin-top:  6px;
}

/* ── Start screen progress link ──────────────────────────────────────────────── */

.vt-start-progress {
  text-align: center;
  margin-top: 4px;
}

.vt-start-progress[hidden] { display: none; }

.vt-progress-link {
  background:            transparent;
  border:                none;
  padding:               0;
  font-size:             12px;
  color:                 var(--vt-muted);
  cursor:                pointer;
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            color 0.15s;
}

.vt-progress-link:hover { color: var(--vt-text); }

/* ── Start screen auth line ──────────────────────────────────────────────────── */

.vt-start-auth {
  text-align: center;
  margin-top: 4px;
}

.vt-start-auth[hidden] { display: none; }

.vt-auth-link {
  background:            transparent;
  border:                none;
  padding:               0;
  font-size:             12px;
  color:                 var(--vt-muted);
  cursor:                pointer;
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            color 0.15s;
}

.vt-auth-link:hover { color: var(--vt-text); }

.vt-start-auth-saved {
  font-size: 12px;
  color:     var(--vt-muted);
}

/* ── Progress screen ─────────────────────────────────────────────────────────── */

.vt-progress-title {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      24px;
  letter-spacing: -0.01em;
  color:          var(--vt-text);
  text-align:     center;
}

/* ── Progress chart SVG ──────────────────────────────────────────────────────── */

.vt-chart-wrap {
  width:    100%;
  overflow: visible;
}

.vt-chart-wrap text {
  font-family: var(--sans);
  font-size:   10px;
  fill:        var(--vt-muted);
}

.vt-chart-wrap .vt-chart-axis {
  stroke:       var(--vt-border);
  stroke-width: 1;
}

.vt-chart-wrap .vt-chart-grid {
  stroke:           var(--vt-border);
  stroke-width:     1;
  stroke-dasharray: 3 4;
}

.vt-chart-dot {
  fill: var(--vt-surface);
  stroke-width: 2;
}

/* ── Progress legend ─────────────────────────────────────────────────────────── */

.vt-chart-legend {
  display:         flex;
  flex-wrap:       wrap;
  gap:             10px 16px;
  justify-content: center;
  margin-top:      12px;
}

.vt-legend-item {
  display:     flex;
  align-items: center;
  gap:         6px;
  cursor:      pointer;
  user-select: none;
}

.vt-legend-swatch {
  width:         12px;
  height:        3px;
  border-radius: 2px;
  flex-shrink:   0;
}

.vt-legend-label {
  font-size:  12px;
  color:      var(--vt-muted);
  transition: color 0.15s;
}

.vt-legend-item:hover .vt-legend-label { color: var(--vt-text); }
.vt-legend-item.vt-legend--off .vt-legend-label { opacity: 0.35; }
.vt-legend-item.vt-legend--off .vt-legend-swatch { opacity: 0.35; }

/* ── Session shape bars (< 3 sessions) ───────────────────────────────────────── */

.vt-shape-wrap {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.vt-shape-row {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.vt-shape-meta {
  display:         flex;
  justify-content: space-between;
  font-size:       12px;
  color:           var(--vt-muted);
}

.vt-shape-bars {
  display:     flex;
  gap:         4px;
  align-items: flex-end;
  height:      40px;
}

.vt-shape-bar {
  flex:          1;
  border-radius: 3px 3px 0 0;
  min-height:    4px;
}

.vt-chart-empty {
  text-align: center;
  font-size:  14px;
  color:      var(--vt-muted);
  padding:    24px 0;
  line-height: 1.6;
}

/* ── Disclosure ──────────────────────────────────────────────────────────────── */

.vt-disclosure { padding: 4px 0; }

.vt-disclosure-trigger {
  background:  transparent;
  border:      none;
  padding:     0;
  font-size:   13px;
  color:       var(--vt-muted);
  cursor:      pointer;
  display:     flex;
  align-items: center;
  gap:         6px;
  transition:  color 0.15s;
}

.vt-disclosure-trigger:hover { color: var(--vt-text); }

.vt-disclosure-arrow {
  font-size:          10px;
  display:            inline-block;
  transition:         transform 0.2s;
}

.vt-disclosure-trigger[aria-expanded="true"] .vt-disclosure-arrow {
  transform: rotate(90deg);
}

.vt-disclosure-panel {
  margin-top:  8px;
  font-size:   13px;
  color:       var(--vt-muted);
  line-height: 1.6;
  padding-left: 16px;
}

.vt-disclosure-panel[hidden] { display: none; }

/* ── Rule ────────────────────────────────────────────────────────────────────── */

.vt-rule {
  border:     none;
  border-top: 1px solid var(--vt-border);
  margin:     4px 0;
}

/* ── Credit ──────────────────────────────────────────────────────────────────── */

.vt-credit {
  font-size:  12px;
  text-align: center;
}

.vt-credit a {
  color:                 var(--vt-muted);
  border-bottom:         1px dotted var(--vt-border);
  text-underline-offset: 3px;
  transition:            color 0.15s;
}

.vt-credit a:hover { color: var(--vt-text); }

/* ── Feedback widget ─────────────────────────────────────────────────────────── */

.vt-feedback-host { display: none; }


/* ── Confetti ────────────────────────────────────────────────────────────────── */

@keyframes vt-fall {
  to {
    transform: translate(var(--vt-drift, 0px), var(--vt-fall, 60vh)) rotate(720deg);
    opacity:   0;
  }
}

.vt-confetti {
  position:       fixed;
  pointer-events: none;
  z-index:        9999;
  animation:      vt-fall 1.6s ease-in forwards;
}

/* ── Progress chart ──────────────────────────────────────────────────────────── */

.vt-chart-trend {
  stroke:           var(--vt-accent);
  stroke-width:     1.5;
  stroke-dasharray: 5 4;
  stroke-opacity:   0.40;
}

.vt-legend-item--total { cursor: default; }
.vt-legend-item--total:hover .vt-legend-label { color: var(--vt-muted); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .vt-card    { padding: 18px 16px; }
  .vt-end-actions { flex-direction: column; align-items: center; }

  /* Shrink answer box so prompt stays visible above the keyboard */
  .vt-textarea { min-height: 72px; }

  /* Pin the prompt below the sticky nav (nav = 14px pad + 28px track + 14px pad = 56px) */
  .vt-prompt {
    position:   sticky;
    top:        56px;
    background: var(--vt-surface);
    z-index:    1;
  }
}