.recorded-branch-study {
  margin: 22px 0 28px;
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid #a7aaa0;
  border-radius: 20px;
  background: #f4f0e6;
  color: #263532;
  box-shadow: 0 16px 32px rgba(29, 40, 36, .12);
}

.recorded-branch-eyebrow {
  margin: 0;
  color: #265d57;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.recorded-branch-study h3 {
  margin: 5px 0 9px;
  color: #1b3735;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
}

.recorded-branch-intro {
  max-width: 78ch;
  margin: 0 0 18px;
  line-height: 1.55;
}

.recorded-branch-controls {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) minmax(130px, 1fr) minmax(190px, 2fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.recorded-branch-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #304c48;
  font-size: .85rem;
  font-weight: 700;
}

.recorded-branch-controls select {
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid #778d87;
  border-radius: 8px;
  background: #fffdf9;
  color: #1c3531;
}

.recorded-branch-time input {
  width: 100%;
  margin: 7px 0 6px;
  accent-color: #196f65;
}

.recorded-branch-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.recorded-branch-panel {
  min-width: 0;
  margin: 0;
  padding: 9px;
  border: 1px solid #a2aaa3;
  border-radius: 11px;
  background: #e3e5df;
  box-shadow: 0 7px 17px rgba(34, 49, 46, .12);
}
.recorded-branch-panel[data-focused="true"] { border-color: #176f61; box-shadow: 0 0 0 2px rgba(23, 111, 97, .18), 0 7px 17px rgba(34, 49, 46, .12); }

.recorded-branch-panel figcaption {
  padding: 2px 3px 8px;
  color: #24433e;
  font: 800 .82rem ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em;
}

.recorded-branch-paper {
  overflow: hidden;
  border: 1px solid #b37772;
  border-radius: 3px;
  background: #fffdf8;
}

.recorded-branch-paper canvas {
  display: block;
  width: 100%;
  height: 220px;
}

.recorded-branch-panel > a {
  display: inline-block;
  margin: 9px 3px 2px;
  color: #075f55;
  font-size: .8rem;
  font-weight: 700;
}

.recorded-branch-dataset-label {
  margin: 7px 3px 1px;
  color: #17483e;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.4;
}

.recorded-branch-scale,
.recorded-branch-boundary {
  max-width: 84ch;
  color: #3e514d;
  font-size: .8rem;
  line-height: 1.55;
}

.recorded-branch-scale { margin: 11px 0 16px; }
.recorded-branch-boundary { margin: 16px 0 6px; }
.recorded-branch-study > a { color: #075f55; font-size: .82rem; font-weight: 700; }

.recorded-branch-markers { display: grid; gap: 10px; min-width: 0; margin: 13px 0 0; padding: 13px; border: 1px solid #a8b8ab; border-radius: 11px; background: #e8eee7; }
.recorded-branch-markers h4 { margin: 0; color: #193d38; font-size: 1rem; }
.recorded-branch-markers p { max-width: 82ch; margin: 0; color: #334d47; font-size: .79rem; line-height: 1.5; }
.recorded-branch-focus,
.recorded-branch-mark-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.recorded-branch-focus button,
.recorded-branch-mark-actions button { min-height: 40px; padding: 8px 11px; border: 1px solid #2b746a; border-radius: 7px; color: #174c43; background: #fffdfa; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.recorded-branch-focus button[aria-pressed="true"] { color: #fff; background: #176f61; }
.recorded-branch-mark-actions button:disabled { border-color: #9daaa2; color: #677971; background: #f0f1ed; cursor: default; }
.recorded-branch-cursor { display: grid; gap: 5px; min-width: 0; color: #214c44; font-size: .82rem; font-weight: 750; }
.recorded-branch-cursor input { width: 100%; min-width: 0; accent-color: #b33f1e; }
.recorded-branch-markers .recorded-branch-mark-status { padding: 9px 11px; border-left: 3px solid #176f61; border-radius: 5px; background: #f9fbf5; font-size: .77rem; }

.recorded-branch-question {
  padding: 14px;
  border: 1px solid #c4c6b9;
  border-radius: 11px;
  background: #fffdf7;
}

.recorded-branch-question fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.recorded-branch-question legend {
  max-width: 80ch;
  padding: 0 0 12px;
  font-weight: 750;
  line-height: 1.5;
}

.recorded-branch-question fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #29443f;
  font-size: .88rem;
}

.recorded-branch-question input[type="radio"] { accent-color: #196f65; }

.recorded-branch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.recorded-branch-actions button {
  min-height: 41px;
  padding: 8px 13px;
  border: 1px solid #15594f;
  border-radius: 8px;
  background: #176f61;
  color: #fff;
  font: inherit;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
}

.recorded-branch-actions button[type="button"] {
  background: #fffdf7;
  color: #175b51;
}

.recorded-branch-feedback {
  margin: 10px 0 0;
  line-height: 1.5;
  font-size: .85rem;
}

.recorded-branch-feedback:empty { display: none; }
.recorded-branch-study [hidden] { display: none !important; }
.recorded-branch-study :is(select, input, button, a):focus-visible { outline: 3px solid #d77835; outline-offset: 2px; }

@media (max-width: 720px) {
  .recorded-branch-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .recorded-branch-study { padding: 14px; margin: 16px 0 22px; }
  .recorded-branch-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recorded-branch-time { grid-column: 1 / -1; }
  .recorded-branch-question { padding: 12px; }
}