/* Voice practice page */

/* Each target range has its own color: lighter = pink, in-between = lavender, deeper = teal. */
:root, :root[data-tone="lighter"] {
  --tone: var(--secondary); --tone-dark: var(--secondary-dark);
  --tone-light: var(--secondary-light); --tone-band: var(--band-pink); --on-tone: var(--on-secondary);
}
:root[data-tone="between"] {
  --tone: var(--lav); --tone-dark: var(--lav-dark);
  --tone-light: var(--lav-light); --tone-band: var(--band-lav); --on-tone: var(--on-accent);
}
:root[data-tone="deeper"] {
  --tone: var(--primary); --tone-dark: var(--primary-dark);
  --tone-light: var(--primary-light); --tone-band: var(--band); --on-tone: var(--on-primary);
}

.voice { padding-block: 28px 0; display: grid; gap: 24px; }

.intro { display: grid; gap: 10px; max-width: 62ch; }
.lede { color: var(--muted); font-size: 1.05rem; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.side { display: grid; gap: 20px; }

/* Readout */
.monitor { display: grid; gap: 16px; }
/* Fixed-size readout so nothing shifts while the numbers and status change. */
.readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.readout-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.hz {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 10vw, 4.4rem);
  line-height: 1;
  color: var(--deep);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  width: 3.3ch;
  text-align: right;
}
.unit { font-family: var(--font-mono); color: var(--muted); font-size: 1rem; }
.note {
  font-family: var(--font-mono);
  font-size: 1rem;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
}
.note { min-width: 3.4em; text-align: center; flex: none; }
.note:empty { visibility: hidden; }
.note:empty::before { content: "\00a0"; }

.status {
  width: 8.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}
.status[data-state="in"] { background: var(--tone); color: var(--on-tone); }
.status[data-state="low"],
.status[data-state="high"] { background: var(--tone-light); color: var(--ink); }

.graph-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.graph-title { font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
.timer { margin-left: auto; font-family: var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }

.graph-box {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
#graph { display: block; width: 100%; height: clamp(200px, 34vw, 280px); }

.legend { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
.sw { display: inline-block; width: 18px; height: 4px; border-radius: 4px; margin-right: -8px; vertical-align: middle; }
.sw-in { background: var(--tone); }
.sw-out { background: var(--tone); opacity: 0.35; }
.sw-band { background: var(--tone-band); height: 12px; border: 1px solid var(--line); }

.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 4px; }


#file:focus-visible + label, .controls label:focus-within { outline: 3px solid var(--secondary); outline-offset: 3px; }

.notice {
  background: var(--secondary-light);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 0.92rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats div { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 14px; }
.stats dt { font-size: 0.75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stats dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* Target */
.side .panel { display: grid; gap: 12px; }
.small { font-size: 0.86rem; }
.muted { color: var(--muted); }

.segmented {
  display: flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.segmented button {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  padding: 8px 6px;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}
.segmented button[data-preset="lighter"] { --b: var(--secondary); --bd: var(--secondary-dark); --bo: var(--on-secondary); }
.segmented button[data-preset="between"] { --b: var(--lav); --bd: var(--lav-dark); --bo: var(--on-accent); }
.segmented button[data-preset="deeper"] { --b: var(--primary); --bd: var(--primary-dark); --bo: var(--on-primary); }
.segmented button[aria-pressed="true"] { background: var(--b); color: var(--bo); box-shadow: 0 3px 0 var(--bd); }

.custom { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 0.9rem; }
.custom input {
  width: 5.2em;
  font: inherit;
  font-family: var(--font-mono);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.custom input:focus { border-color: var(--primary); outline: none; }

/* Prompt */
.prompt-head, .prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--deep);
  min-height: 3.6em;
}

/* Care note */
.care {
  border: 2px dashed var(--accent-dark);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

/* History */
.history { display: grid; gap: 14px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; font-weight: 700; }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h-open {
  width: 100%;
  appearance: none;
  border: 2px solid transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.h-open:hover { border-color: var(--tone); }
.h-open[aria-current="true"] { border-color: var(--tone); background: var(--tone-light); }
.h-open.no-trace .h-go { opacity: 0.3; }
.h-go { color: var(--muted); }
.session-range { margin-top: -6px; }
@media (max-width: 420px) { .h-open { gap: 12px; } }
.h-when { display: grid; min-width: 0; }
.h-when span { font-size: 0.82rem; color: var(--muted); }
.h-num { display: grid; text-align: right; }
.h-val { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.h-lab { font-size: 0.72rem; color: var(--muted); }

/* Playback */
.player { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.player audio { width: 100%; height: 40px; min-width: 0; }
.player #player-none { margin: 0; }
.keep-audio { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; cursor: pointer; }
.keep-audio input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.btn.danger { background: var(--secondary-light); }
@media (max-width: 520px) {
  .player { grid-template-columns: minmax(0, 1fr); }
  .player #delete-session { justify-self: start; }
}

/* ---------- Read-along ---------- */
.reader {
  display: grid;
  gap: 8px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 10px 12px 12px;
}
.reader-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.reader-select { width: auto; max-width: 100%; padding: 6px 10px; font-size: 0.9rem; font-weight: 700; background: var(--surface); }
.reader-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.reader-tools .icon-btn { width: 34px; height: 34px; font-size: 0.85rem; font-weight: 800; background: var(--surface); }
.reader-tools .btn[aria-pressed="true"] { background: var(--tone); color: var(--on-tone); }
.reader-text {
  --reader-scale: 1;
  max-height: 9.5em;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(1.2rem * var(--reader-scale));
  line-height: 1.45;
  color: var(--deep);
  padding: 4px 4px 4px 2px;
  display: grid;
  gap: 0.7em;
  align-content: start;
  -webkit-mask-image: linear-gradient(transparent 0, #000 0.6em, #000 calc(100% - 1.2em), transparent);
          mask-image: linear-gradient(transparent 0, #000 0.6em, #000 calc(100% - 1.2em), transparent);
}
.reader-text p { margin: 0; }
.reader-text:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; border-radius: 8px; }
.reader-text.is-prompt { max-height: none; -webkit-mask-image: none; mask-image: none; font-size: calc(1.35rem * var(--reader-scale)); }
.reader-kind { font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.reader-empty { color: var(--muted); font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; }
.reader-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.reader-edit-wrap { display: grid; gap: 8px; }
.reader-edit { min-height: 9em; resize: vertical; font-size: 1rem; line-height: 1.5; }
.focus-exit { display: none; }

/* ---------- Focus view: text, number and graph on one screen ---------- */
.voice-focus body { overflow: hidden; }
.voice-focus .monitor {
  position: fixed;
  inset: 0;
  z-index: 60;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  overflow: hidden;
}
.voice-focus .monitor > .readout { flex: none; }
.voice-focus .reader { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.voice-focus .reader-text { max-height: none; min-height: 0; }
.voice-focus .graph-head { flex: none; }
.voice-focus .graph-box { flex: none; }
.voice-focus #graph { height: clamp(150px, 30dvh, 260px); }
.voice-focus .controls { flex: none; padding-top: 0; }
.voice-focus .focus-exit { display: inline-flex; }
.voice-focus #focus-btn,
.voice-focus .legend,
.voice-focus .keep-audio,
.voice-focus .stats,
.voice-focus .session-range,
.voice-focus .player,
.voice-focus #example-chip,
.voice-focus .controls label[for="file"],
.voice-focus .notice:empty { display: none !important; }
.voice-focus .hz { font-size: clamp(2.2rem, 8vw, 3rem); }
.voice-focus .site-header, .voice-focus body::before { visibility: hidden; }