.mic-check { margin: 28px 0 0; padding: 20px 22px; border: 1px solid var(--line); background: var(--card); }
.mic-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mic-heading h2 { margin: 5px 0 0; font: 400 27px/1.1 Georgia, serif; }
.mic-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.connect-mic { padding: 10px 14px; border: 1px solid var(--red); background: var(--red); color: white; font: inherit; cursor: pointer; }
.connect-mic:disabled { border-color: var(--green); background: var(--green); cursor: default; }
.disconnect-mic { padding: 10px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.disconnect-mic:disabled { opacity: .45; cursor: not-allowed; }
.connect-mic:focus-visible, .disconnect-mic:focus-visible, .capture-record:focus-visible, .take-delete:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.meter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; margin-top: 20px; }
.input-meter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 28px; padding: 4px; border: 1px solid var(--line); background: var(--paper); }
.input-meter i { background: #ddd5c9; }
.input-meter i.lit { background: var(--green); }
.input-meter.zone-quiet i.lit, .input-meter.zone-silence i.lit { background: #b7aa9a; }
.input-meter.zone-hot i.lit { background: #d6b36a; }
.input-meter.zone-clipped i.lit { background: var(--red); }
.meter-reading { min-width: 74px; }
.meter-reading span, .meter-reading strong { display: block; }
.meter-reading span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.meter-reading strong { margin-top: 3px; font-size: 13px; }
.clip-state { padding: 6px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.clip-state.healthy { border-color: var(--green); color: var(--green); }
.clip-state.quiet, .clip-state.silence { border-color: #b7aa9a; color: #6f675f; }
.clip-state.hot { border-color: #a15c16; color: #a15c16; }
.clip-state.clipped { border-color: var(--red); color: var(--red); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 9px; }
.meter-note, .remaining { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.remaining { color: var(--red); text-align: center; }
.mic-status { margin: 15px 0 0; color: var(--muted); font-size: 11px; }
.mic-check .setup { min-width: 0; margin-top: 14px; padding: 11px 0 0; border-width: 1px 0 0; background: transparent; }
.capture-list { display: grid; gap: 8px; margin-top: 20px; }
.capture-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); }
.capture-option strong, .capture-option small { display: block; }
.capture-option strong { font-size: 13px; }
.capture-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.capture-option.done { border-color: var(--green); }
.capture-option.done strong { color: var(--green); }
.capture-option.unreliable { border-color: #a15c16; }
.take-tools { flex-basis: 100%; display: grid; gap: 8px; min-width: 0; }
.take-card { display: grid; gap: 6px; min-width: 0; }
.take-meta, .take-safe, .mismatch { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.take-card.unreliable .take-safe { color: #a15c16; }
.take-player-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.take-delete { display: grid; min-width: 34px; height: 34px; place-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font: inherit; cursor: pointer; }
.take-delete svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.take-delete.confirm-delete { width: auto; min-width: 130px; border-radius: 17px; background: var(--red); color: white; }
.take-actions .take-replay.playing { border-color: var(--red); color: var(--red); }
.take-player, .sample-player audio { display: block; width: 100%; max-width: 100%; min-width: 0; }
.sample-audio { display: grid; gap: 10px; margin-bottom: 16px; }
.sample-player { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.capture-recorder { flex-basis: 100%; display: grid; grid-template-columns: auto minmax(60px, 1fr) 54px auto; align-items: center; gap: 8px; min-height: 42px; padding: 4px 12px 4px 4px; border: 1px solid #d8d8d8; border-radius: 24px; background: #f1f3f4; }
.capture-record { padding: 9px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.capture-record { min-width: 92px; border-color: var(--red); border-radius: 18px; background: var(--red); color: white; }
.capture-record.stop-mode { min-width: 112px; }
.capture-timeline { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: #c5c7c9; }
.capture-timeline i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.capture-live-level { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #d5d7d8; }
.capture-live-level i { display: block; width: 0; height: 100%; background: var(--green); transition: width 80ms linear; }
.capture-live-level i.hot { background: #d6b36a; }
.capture-live-level i.clipped { background: var(--red); }
.capture-recorder time { color: #5f6368; font-size: 11px; font-variant-numeric: tabular-nums; }
.capture-recorder.is-recording .capture-timeline i { animation: capture-progress var(--capture-limit, 60s) linear forwards; }
@keyframes capture-progress { to { transform: scaleX(1); } }
.capture-option.done .capture-recorder { display: none; }
.capture-option.done .capture-timeline, .capture-option.done .capture-recorder time { display: none; }
.capture-option.done .capture-record { background: transparent; color: var(--red); }
.capture-record:disabled { opacity: .45; cursor: not-allowed; }
.comparison-preview { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.comparison-preview .guidance { flex: 1; }
.comparison-actions { display: grid; flex: 0 0 auto; gap: 7px; }
.compare-all { padding: 10px 14px; border: 1px solid var(--red); background: transparent; color: var(--red); font: inherit; cursor: pointer; }
.compare-all { background: var(--red); color: white; }
.compare-all:disabled { opacity: .45; cursor: not-allowed; }

.comparison { margin-top: 34px; padding: clamp(24px, 5vw, 42px); border: 1px solid var(--line); background: var(--card); }
.comparison[hidden], .result[hidden], #rating-form[hidden] { display: none; }
.comparison-header, .result-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.comparison h2, .comparison h3 { margin: 8px 0 0; font: 400 clamp(28px, 5vw, 40px)/1.12 Georgia, serif; letter-spacing: -.025em; }
.comparison h3 { font-size: 30px; }
.comparison-intro { max-width: 680px; color: var(--muted); font: 16px/1.55 Georgia, serif; }
.comparison-close, .score-again, .keep-ranking, .reveal, .play { padding: 10px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.sample-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 28px 0; }
.sample { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--line); }
.sample legend { padding: 0 8px; color: var(--red); font: 700 11px ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.play { width: 100%; }
.play-both { margin-bottom: 7px; border-color: var(--red); }
.voice-plays { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 16px; }
.voice-plays.single-voice, .replay-options.single-voice { grid-template-columns: 1fr; }
.play.playing { border-color: var(--green); color: var(--green); }
.score { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.score label { cursor: pointer; }
.score input { position: absolute; opacity: 0; }
.score span { display: grid; height: 38px; place-items: center; border: 1px solid var(--line); background: white; }
.score input:checked + span { border-color: var(--red); background: var(--red); color: white; }
.score input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.sample small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; text-align: center; }
.reveal { display: block; margin: 0 auto; border-color: var(--red); background: var(--red); color: white; }
.reveal:disabled { opacity: .45; cursor: not-allowed; }
.comparison-status { margin: 12px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.ranking { padding: 0; margin: 26px 0; list-style: none; border-top: 1px solid var(--line); }
.ranking li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 210px auto; align-items: center; gap: 12px; padding: 15px 8px; border-bottom: 1px solid var(--line); }
.ranking .rank { color: var(--red); font: 400 25px Georgia, serif; }
.ranking p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.ranking b { font-size: 12px; }
.ranking .compact { width: auto; margin: 0; padding: 8px 10px; font-size: 11px; }
.replay-options { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 5px; }
.decision { padding: 17px; background: var(--paper); font: 17px/1.45 Georgia, serif; }
.keep-ranking { display: block; margin: 20px auto 0; border-color: var(--red); color: var(--red); }
.keep-ranking:disabled { opacity: .5; cursor: default; }
.preference-ledger { margin-top: 34px; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); background: var(--card); }
.preference-ledger > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.preference-ledger h2 { margin: 7px 0 0; font: 400 clamp(25px, 4vw, 34px)/1.15 Georgia, serif; }
.preference-count { color: var(--green); font-size: 12px; white-space: nowrap; }
.preference-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.preference-summary table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 12px; }
.preference-summary th, .preference-summary td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.preference-summary th { color: var(--muted); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.preference-history { margin: 24px 0 0; padding: 0; list-style: none; }
.preference-history li { position: relative; padding: 14px 92px 14px 0; border-top: 1px solid var(--line); }
.preference-history strong, .preference-history span { display: block; }
.preference-history span { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.preference-delete { position: absolute; top: 14px; right: 0; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; }
.preference-delete.confirm-delete { border-color: var(--red); color: var(--red); }
.preference-delete:disabled { cursor: wait; opacity: .55; }

@media (max-width: 650px) {
  .mic-heading { align-items: stretch; flex-direction: column; }
  .mic-actions, .connect-mic, .disconnect-mic { width: 100%; }
  .mic-actions { flex-direction: column; }
  .meter-row { grid-template-columns: minmax(0, 1fr) auto; }
  .clip-state { grid-column: 1 / 3; text-align: center; }
  .capture-option { align-items: stretch; flex-direction: column; }
  .capture-record { width: 100%; }
  .capture-recorder { width: 100%; min-width: 0; grid-template-columns: auto minmax(20px, 1fr) 36px auto; gap: 6px; padding-right: 9px; }
  .capture-recorder .capture-record { width: auto; min-width: 80px; padding-inline: 10px; }
  .capture-timeline { min-width: 0; }
  .take-player-row { width: 100%; }
  .comparison-preview { align-items: stretch; flex-direction: column; padding-bottom: 10px; }
  .comparison-actions, .compare-all { width: 100%; }
  .comparison-header, .result-heading { flex-direction: column; }
  .comparison-close, .score-again { width: 100%; }
  .sample-grid { grid-template-columns: 1fr; }
  .ranking li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .replay-options { grid-column: 2 / 4; width: 100%; }
  .ranking .compact { width: 100%; }
  .preference-ledger > header { flex-direction: column; }
  .preference-summary { overflow-x: auto; }
}