/* Recording analysis views share the app's warm paper palette. */
.recording-map-view,
.recording-insights-list { min-inline-size: 0; max-inline-size: 100%; margin-block: 12px 18px; }
.recording-map-view { --map-tone: #557763; --map-wash: #eef4ee; }
.recording-map-body { min-inline-size: 0; }
.recording-map-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-block-end: 8px;
}
.recording-map-toolbar .recording-map-control {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0 10px;
  background: var(--card, #fffdf8);
  color: var(--ink, #1c1b1a);
  border: 1px solid var(--border, #e4dccc);
  border-radius: 10px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
}
.recording-map-toolbar .recording-map-expand { margin-inline-start: 4px; font-size: 14px; white-space: nowrap; }
.recording-map-toolbar .recording-map-control:disabled { opacity: .42; }
.recording-map-toolbar .recording-map-control:focus-visible,
.recording-map-viewport:focus-visible { outline: 2px solid var(--accent, #b5541c); outline-offset: 2px; }
.recording-map-percentage {
  min-inline-size: 5ch;
  color: var(--ink-soft, #5a544c);
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.recording-map-viewport {
  box-sizing: border-box;
  block-size: min(48vh, 480px);
  min-block-size: 160px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border, #e4dccc);
  border-radius: 15px;
  background-color: var(--card, #fffdf8);
  background-image: radial-gradient(var(--border, #e4dccc) 0.75px, transparent 0.75px);
  background-size: 16px 16px;
}
.recording-map-canvas {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  inline-size: max-content;
  min-block-size: 100%;
  padding: 18px;
}
.recording-map-view .recording-map-root {
  box-sizing: border-box;
  inline-size: min(36vw, 155px);
  flex: none;
  margin: 0;
  padding: 12px 10px;
  border: 1px solid #8b441e;
  border-radius: 11px;
  background: #964a21;
  color: #fffdf8;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.recording-map-view .recording-map-branches,
#recording-analysis-view .recording-map-view .recording-map-branches {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
}
.recording-map-branches::before {
  position: absolute;
  inset: 50% auto auto 0;
  inline-size: 10px;
  border-top: 1px solid #ab9c88;
  content: '';
}
.recording-map-branch {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding-block: 5px;
}
.recording-map-branch[data-tone="1"] { --map-tone: #996837; --map-wash: #f8efe1; }
.recording-map-branch[data-tone="2"] { --map-tone: #846578; --map-wash: #f7edf2; }
.recording-map-branch[data-tone="3"] { --map-tone: #607780; --map-wash: #eaf2f3; }
.recording-map-branch::before,
.recording-map-branch::after {
  position: absolute;
  inset-inline-start: -16px;
  pointer-events: none;
  content: '';
}
.recording-map-branch::before { inset-block: 0; border-inline-start: 1px solid #ab9c88; }
.recording-map-branch:first-child::before { inset-block-start: 50%; }
.recording-map-branch:last-child::before { inset-block-end: 50%; }
.recording-map-branch::after { inset-block-start: 50%; inline-size: 16px; border-top: 1px solid var(--map-tone); }
.recording-map-node {
  box-sizing: border-box;
  display: block;
  inline-size: max-content;
  max-inline-size: min(62vw, 248px);
  padding: 8px 10px;
  border: 1px solid var(--border, #e4dccc);
  border-inline-start: 3px solid var(--map-tone);
  border-radius: 8px;
  background: var(--map-wash);
  color: #26221d;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.recording-map-canvas > .recording-map-branches > .recording-map-branch > .recording-map-node { font-weight: 650; }
.recording-map-dialog {
  box-sizing: border-box;
  inline-size: min(96vw, 1100px);
  max-inline-size: none;
  max-block-size: min(94vh, 900px);
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--border, #e4dccc);
  border-radius: 16px;
  background: var(--bg, #f7f3ec);
  color: var(--ink, #1c1b1a);
}
.recording-map-dialog::backdrop { background: rgba(32, 27, 20, .53); }
.recording-map-dialog .recording-map-viewport { block-size: min(calc(94vh - 80px), 800px); min-block-size: 72px; }
.recording-insights-list { display: grid; gap: 12px; }
.recording-insight {
  box-sizing: border-box;
  min-inline-size: 0;
  padding: 14px 16px;
  border: 1px solid var(--border, #e4dccc);
  border-radius: 14px;
  background: var(--card, #fffdf8);
}
.recording-insight .recording-insight-title {
  margin: 0 0 4px;
  color: var(--ink, #1c1b1a);
  font-size: 19px;
  font-weight: 680;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.recording-insight-fields { margin: 0; }
.recording-insight-field { padding-block: 10px; border-top: 1px solid var(--border, #e4dccc); }
.recording-insight-field:last-child { padding-block-end: 0; }
.recording-insight-field dt { margin: 0 0 3px; color: var(--accent-dark, #8f3f12); font-size: 13px; font-weight: 650; }
.recording-insight-field dd {
  margin: 0;
  color: var(--ink, #1c1b1a);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}