/* ============================================================
   Hit Coach (#hitCoachPanel). Team-only. Loaded after hit-dna.css and
   reuses its meter marks; colour stays on data: nearer to hits = blue,
   weaker than hits = orange. Weak state is never shown by colour alone
   (a text badge always accompanies it).
   ============================================================ */

.hit-coach-panel {
  --hd-hit: #2a78d6;
  --hd-miss: #eb6834;
  --hd-ink: rgb(0 0 0 / 72%);
  --hd-band: rgb(0 0 0 / 6%);
  --hc-line: var(--glass-line, rgb(0 0 0 / 10%));
  --hc-surface: var(--nordic-surface, #fff);
  --hc-muted: rgb(0 0 0 / 55%);
  margin: 0 20px 20px;
  padding: 20px 24px 24px;
}

.hc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding-right: 40px; }
.hc-head h2 { margin: 2px 0 0; font-size: 17px; }
.hc-lede { margin: 4px 0 12px; font-size: 12px; max-width: 70ch; }

/* Team setting as a switch, in the language of the Settings panel's .nets-switch.
   The native checkbox stays in the DOM (keyboard, screen readers, form state). */
.hc-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 6px 12px 6px 8px;
  border: 1px solid var(--hc-line); border-radius: 999px; background: var(--hc-surface); cursor: pointer; user-select: none;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.hc-switch:hover { border-color: rgb(0 0 0 / 22%); }
.hc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hc-switch-track { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: rgb(0 0 0 / 15%);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.hc-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 18%); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.hc-switch input:checked + .hc-switch-track { background: var(--glass-ink, #000); }
.hc-switch input:checked + .hc-switch-track::after { transform: translateX(12px); }
.hc-switch input:focus-visible + .hc-switch-track { outline: 2px solid var(--glass-ink, #000); outline-offset: 2px; }
.hc-switch:active .hc-switch-track::after { transform: scale(0.88); }
.hc-switch:active input:checked + .hc-switch-track::after { transform: translateX(12px) scale(0.88); }
.hc-switch-label { font-size: 12.5px; line-height: 1.3; color: var(--glass-ink, #000); white-space: nowrap; }

.hc-stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.hc-stepper li { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hc-line); color: var(--hc-muted); }
.hc-stepper li.is-done { color: #000; }
.hc-stepper li.is-active { background: #000; color: #fff; border-color: #000; }

.hc-step-heading { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.hc-step-heading:focus { outline: none; box-shadow: 0 0 0 3px rgb(0 0 0 / 8%); border-radius: 6px; }
.hc-subhead { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hc-muted); }

.hc-source { display: flex; flex-direction: column; gap: 10px; }
.hc-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hc-tabs button { min-height: 30px; padding: 0 12px; font-size: 12px; }
.hc-field { display: flex; flex-direction: column; gap: 4px; }
.hc-field input, .hc-field select { min-height: 34px; border-radius: 8px; border: 1px solid var(--hc-line); padding: 0 10px; background: var(--hc-surface); font: inherit; }
.hc-textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-surface); font-family: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical; }
.hc-textarea[readonly] { background: rgb(0 0 0 / 2%); }
.hc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-actions button { min-height: 34px; padding: 0 14px; font-size: 12.5px; }
.hc-hint, .hc-fact { font-size: 12px; margin: 2px 0; }
.hc-status { font-size: 12px; }
.hc-status::after { content: ""; display: inline-block; width: 0.8em; animation: hc-dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
.hc-stale { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; }

.hc-result { margin-top: 18px; transition: opacity 0.2s; }
.hc-result.is-stale > :not(.hc-stale) { opacity: 0.45; }

.hc-verdict { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--hc-line); border-radius: 14px; background: var(--hc-surface); }
.hc-verdict h3 { margin: 0 0 6px; font-size: 16px; }
.hc-delta { font-size: 12.5px; font-weight: 600; color: var(--hd-hit); }
.hc-caveat { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; }
.hc-gauge { position: relative; width: 160px; height: 90px; }
.hc-gauge svg { width: 160px; height: 90px; }
.hc-gauge-track, .hc-gauge-arc { fill: none; stroke-width: 12; stroke-linecap: round; }
.hc-gauge-track { stroke: var(--hd-band); }
.hc-gauge-arc { stroke: var(--hd-hit); transition: stroke-dashoffset 0.9s ease; }
.hc-gauge-num { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }

.hc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }

.hc-advice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hc-advice-list li { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-surface); }
.hc-advice-list strong { font-size: 13px; }
.hc-advice-list p { margin: 3px 0; font-size: 13px; line-height: 1.45; }
.hc-dir { font-weight: 700; }
.hc-dir.is-up { color: var(--hd-hit); }
.hc-dir.is-down { color: var(--hd-miss); }
.hc-tier { font-weight: 400; font-size: 11.5px; color: var(--hc-muted); }
.hc-evidence summary { cursor: pointer; font-size: 11.5px; color: var(--hc-muted); }
.hc-evidence p { font-size: 11.5px; font-variant-numeric: tabular-nums; }

.hc-section-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hc-section { padding: 12px 14px; border: 1px solid var(--hc-line); border-radius: 12px; background: var(--hc-surface); }
.hc-section.is-weak { border-color: rgb(235 104 52 / 55%); }
.hc-section.is-accepted { border-color: rgb(42 120 214 / 60%); box-shadow: 0 0 0 3px rgb(42 120 214 / 10%); }
.hc-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hc-section-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hc-muted); }
.hc-repeats { font-size: 11.5px; }
.hc-lens { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 170px; font-size: 12px; }
.hc-lens .hd-meter-track { flex: 0 0 96px; }
.hc-lens-word { min-width: 9em; }
.hd-meter-fill.is-miss { background: var(--hd-miss); }
.hc-section-text { margin: 8px 0 6px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.hc-weak-badge { margin: 0 0 6px; font-size: 12px; color: #b0451b; }
.hc-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-section-actions button { min-height: 30px; padding: 0 12px; font-size: 12px; }
.hc-accepted { font-size: 12px; font-weight: 600; color: #1c5cab; }
.hc-undo { min-height: 26px; font-size: 11.5px; }

.hc-rewrite { margin-top: 10px; padding: 12px; border: 1px solid rgb(42 120 214 / 35%); border-radius: 12px; }
.hc-phases { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 12px; color: var(--hc-muted); }
.hc-phases .is-done { color: #000; }
.hc-phases .is-run { color: #000; font-weight: 600; }
.hc-phases .is-run::after { content: ""; display: inline-block; width: 0.8em; animation: hc-dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
.hc-no-gain { margin: 0 0 8px; font-size: 12.5px; }
.hc-variants { display: flex; flex-direction: column; gap: 8px; }
.hc-variant { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; align-items: start; width: 100%; padding: 10px 12px; border: 1px solid var(--hc-line); border-radius: 10px; background: var(--hc-surface); text-align: left; font: inherit; cursor: pointer; }
.hc-variant.is-best { border-color: rgb(42 120 214 / 60%); }
.hc-variant.is-picked { box-shadow: 0 0 0 3px rgb(42 120 214 / 18%); }
.hc-variant-text { font-size: 13px; line-height: 1.5; white-space: pre-line; }
.hc-variant-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.hc-chip { align-self: flex-start; padding: 1px 8px; border: 1px solid var(--hc-line); border-radius: 999px; font-size: 11px; }
.hc-chip.is-kept, .hc-chip.is-best { border-color: rgb(42 120 214 / 40%); color: #1c5cab; }
.hc-chip.is-changed { border-color: rgb(235 104 52 / 45%); color: #b0451b; }
.hc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.hc-compare > div { padding: 10px 12px; border: 1px solid var(--hc-line); border-radius: 10px; }
.hc-compare h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hc-muted); }
.hc-compare p { margin: 0; font-size: 12.5px; line-height: 1.5; white-space: pre-line; }

.hc-next { display: flex; justify-content: flex-end; margin-top: 14px; }
.hc-next button { min-height: 38px; padding: 0 18px; font-weight: 600; }

.hc-final { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--hc-line); border-radius: 14px; background: var(--hc-surface); }
.hc-final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 260px; gap: 14px; align-items: start; }
.hc-preview { padding: 12px 14px; border: 1px solid var(--hc-line); border-radius: 12px; font-size: 13px; line-height: 1.55; max-height: 460px; overflow: auto; }
.hc-preview h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hc-muted); }
.hc-preview mark { background: rgb(42 120 214 / 12%); border-left: 3px solid var(--hd-hit); padding: 0 6px; }
.hc-final-side { display: flex; flex-direction: column; gap: 10px; }
.hc-final-side button { width: 100%; min-height: 40px; font-weight: 600; }
.hc-kv { padding: 10px 12px; border: 1px solid var(--hc-line); border-radius: 10px; font-size: 12.5px; }
.hc-kv-row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.hc-saved { margin: 0; font-size: 12.5px; color: #1a7f37; }

/* Step 5 gate inside the existing song review (app.js). */
.sound-recipe-confirm { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid rgb(42 120 214 / 45%); border-radius: 10px; background: rgb(42 120 214 / 5%); }
.sound-recipe-confirm h5 { margin: 0 0 4px; font-size: 12.5px; }
.sound-recipe-confirm p { margin: 0 0 8px; font-size: 12px; }

@keyframes hc-dots { from { width: 0; } to { width: 0.8em; } }

@media (prefers-reduced-motion: reduce) {
  .hc-gauge-arc, .hc-result, .hc-switch, .hc-switch-track, .hc-switch-track::after { transition: none; }
  .hc-status::after, .hc-phases .is-run::after { animation: none; content: "…"; width: auto; }
}

@media (max-width: 900px) {
  .hit-coach-panel { margin: 0 12px 16px; padding: 16px; }
  .hc-head { flex-wrap: wrap; }
  .hc-switch { width: 100%; box-sizing: border-box; border-radius: 12px; }
  .hc-switch-label { white-space: normal; }
  .hc-verdict, .hc-grid, .hc-final-grid, .hc-variant, .hc-compare { grid-template-columns: minmax(0, 1fr); }
  .hc-gauge { margin: 0 auto; }
  .hc-lens { margin-left: 0; min-width: 0; width: 100%; }
}

@media (forced-colors: active) {
  .hd-meter-fill, .hc-gauge-arc { forced-color-adjust: none; }
  .hc-switch-track { border: 1px solid CanvasText; }
  .hc-switch input:checked + .hc-switch-track { background: Highlight; }
}