/* ============================================================
   Detail
   ============================================================ */
.back {
  display: inline-flex; align-items: center; gap: var(--sp-40); margin-bottom: var(--sp-150);
  font-size: var(--fs-76); font-weight: 600; letter-spacing: 0.1em;
  color: var(--text-dim); transition: color 0.2s ease;
}
.back:hover { color: var(--violet); }
.detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-150); align-items: start; }
.card { padding: 1.4rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); }
.card + .card { margin-top: var(--sp-100); }
.card-title { font-size: var(--fs-66); letter-spacing: 0.15em; color: var(--text-faint); margin-bottom: var(--sp-100); }

.caller {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance;
}
.caller-num { font-size: 0.92rem; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-top: var(--sp-50); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-125); flex-wrap: wrap; margin-bottom: var(--sp-150); }
.detail-when { text-align: right; font-size: var(--fs-78); color: var(--text-faint); font-variant-numeric: tabular-nums; line-height: 1.6; }

.answer { font-size: var(--fs-100); line-height: 1.65; }
.byline { display: flex; align-items: center; gap: var(--sp-50); margin-top: var(--sp-100); font-size: var(--fs-78); color: var(--text-dim); }
.byline .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lilac); flex: none; }

.wave-wrap { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--bg-1); }
canvas.wave { display: block; width: 100%; height: 84px; }
.transport { display: flex; align-items: center; gap: var(--sp-90); margin-top: var(--sp-100); }
.play {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--violet); color: #fff; display: grid; place-items: center;
  transition: background 0.2s ease, box-shadow 0.25s ease;
}
.play:hover { background: var(--violet-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); }
.time { font-size: var(--fs-84); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.time b { color: var(--text); font-weight: 600; }
.speed { margin-left: auto; display: flex; gap: var(--sp-25); }
.speed button { font-size: var(--fs-74); font-weight: 600; color: var(--text-faint); padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid transparent; }
.speed button[aria-pressed="true"] { color: var(--text); border-color: var(--line); }

.turns { display: grid; gap: var(--sp-10); max-height: 26rem; overflow-y: auto; padding-right: var(--sp-40); }
.turn { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-85); width: 100%; text-align: left; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); transition: background 0.15s ease; }
.turn:hover { background: var(--panel); }
.turn.is-now { background: var(--panel-2); }
.turn-t { font-size: var(--fs-72); color: var(--text-faint); font-variant-numeric: tabular-nums; padding-top: var(--sp-15); }
.turn.is-now .turn-t { color: var(--violet); font-weight: 600; }
.turn-who { font-size: 0.64rem; letter-spacing: 0.13em; margin-bottom: var(--sp-10); color: var(--text-faint); }
.turn-x { font-size: var(--fs-90); color: var(--text-dim); line-height: 1.55; }
.turn.is-now .turn-x { color: var(--text); }
.turn-x .unheard { color: var(--text-faint); font-style: italic; border-bottom: 1px dotted var(--line); }
.note { margin-top: var(--sp-100); padding-top: var(--sp-85); border-top: 1px solid var(--line-soft); font-size: var(--fs-76); color: var(--text-faint); }

/* ---- working controls ---- */
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-35); }
.seg button {
  padding: 0.38rem 0.7rem; border-radius: var(--radius); font-size: var(--fs-78); font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--line-soft); background: var(--bg-0);
  transition: all 0.18s ease;
}
.seg button:hover { color: var(--text); border-color: var(--line); }
/* selected states climb one ladder: quiet -> soft purple -> solid purple, red only for lost */
.seg button[aria-pressed="true"] { color: #fff; background: var(--violet); border-color: var(--violet); }
.seg button[aria-pressed="true"][data-tone="soft"] { color: var(--violet); background: var(--panel-2); border-color: var(--violet); }
.seg button[aria-pressed="true"][data-tone="quiet"] { color: var(--text-dim); background: var(--panel-2); border-color: var(--line); }
.seg button[aria-pressed="true"][data-tone="crit"] { color: #fff; background: var(--crit); border-color: var(--crit); }

.tagrow { display: flex; gap: var(--sp-40); flex-wrap: wrap; align-items: center; }
.tagchip {
  display: inline-flex; align-items: center; gap: var(--sp-35);
  font-size: var(--fs-72); font-weight: 500; color: var(--text-dim);
  padding: 0.2rem 0.4rem 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-soft);
}
.tagchip button { color: var(--text-faint); line-height: 1; padding: 0 0.15rem; border-radius: 50%; }
.tagchip button:hover { color: var(--crit); }
.tag-add { font-size: var(--fs-72); font-weight: 600; color: var(--violet); padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px dashed var(--line); }
.tag-add:hover { background: var(--panel); }

.picker { margin-top: var(--sp-80); padding: var(--sp-80); border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-0); }
.picker-title { font-size: var(--fs-66); letter-spacing: 0.13em; color: var(--text-faint); margin-bottom: var(--sp-60); }
.picker .tagrow { margin-bottom: var(--sp-70); }
.picker-opt { font-size: var(--fs-74); font-weight: 500; color: var(--text-dim); padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid var(--line-soft); }
.picker-opt:hover { color: var(--text); border-color: var(--violet); }
.picker-opt[disabled] { opacity: 0.35; cursor: default; }
.newtag { display: flex; gap: var(--sp-40); }
.newtag input { flex: 1; min-width: 0; padding: 0.4rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel); font-size: var(--fs-80); }
.newtag input:focus { outline: none; border-color: var(--violet); }

.btn {
  padding: 0.4rem 0.85rem; border-radius: var(--radius); font-size: var(--fs-78); font-weight: 600;
  background: var(--violet); color: #fff; transition: background 0.2s ease;
}
.btn:hover { background: var(--violet-deep); }

.notes { display: grid; gap: var(--sp-70); margin-bottom: var(--sp-90); }
.note-item { padding: 0.7rem 0.85rem; border-radius: var(--radius); background: var(--bg-0); border: 1px solid var(--line-soft); }
.note-body { font-size: var(--fs-86); line-height: 1.55; }
.note-by { font-size: var(--fs-70); color: var(--text-faint); margin-top: var(--sp-35); }
.note-form { display: grid; gap: var(--sp-50); }
.note-form textarea {
  width: 100%; min-height: 4.5rem; resize: vertical; padding: 0.6rem 0.75rem;
  border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel);
  font-size: var(--fs-86); line-height: 1.5;
}
.note-form textarea:focus { outline: none; border-color: var(--violet); }
.note-form .row-end { display: flex; justify-content: flex-end; gap: var(--sp-40); }
.none { font-size: var(--fs-82); color: var(--text-faint); font-style: italic; }

.log { display: grid; gap: var(--sp-55); margin-top: var(--sp-100); padding-top: var(--sp-85); border-top: 1px solid var(--line-soft); }
.log-item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-60); align-items: baseline; font-size: var(--fs-78); }
.log-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lilac); margin-top: var(--sp-35); }
.log-x { color: var(--text-dim); }
.log-w { color: var(--text-faint); font-size: var(--fs-72); }

details.meta { margin-top: var(--sp-100); border-top: 1px solid var(--line-soft); padding-top: var(--sp-85); }
details.meta > summary { cursor: pointer; list-style: none; font-size: var(--fs-66); letter-spacing: 0.15em; color: var(--text-faint); }
details.meta > summary::-webkit-details-marker { display: none; }
details.meta > summary::after { content: " +"; }
details.meta[open] > summary::after { content: " −"; }
.facts { display: grid; gap: var(--sp-55); margin-top: var(--sp-90); }
.fact { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-75); font-size: var(--fs-82); }
.fact dt { font-size: var(--fs-68); letter-spacing: 0.1em; color: var(--text-faint); }
.fact dd { color: var(--text-dim); font-variant-numeric: tabular-nums; word-break: break-word; }

.empty { padding: 3rem 1rem; text-align: center; color: var(--text-faint); }
.empty b { display: block; color: var(--text-dim); font-size: var(--fs-100); margin-bottom: var(--sp-30); }
.proto { font-size: var(--fs-70); color: var(--text-faint); text-align: center; padding: 1.5rem 1rem 0; border-top: 1px solid var(--line-soft); margin-top: 3rem; }

@media (max-width: 68rem) { .detail { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 30rem) {
  .fact { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
}