/* ============================================================
   workspace-panels.css — supporting panels under the exam stage
   (Patient & case · Instrument settings · Learning & assistance · References)

   One system, loaded LAST (after workspace-details.css):
   • Spacing scale   4 · 8 · 12 · 16 · 24 (--pp-1 … --pp-5). Nothing else.
   • Section colour  names the PANEL (teal / blue / gold / violet).
   • Control colour  names a CONTROL inside a panel via --c / --c-ink.
     Colours here only ever mean "which control" — never a clinical result;
     reflex with/against/neutral stay owned by the feedback layer.
   • Every tint is color-mix() on --surface, every label/value text uses an
     -ink variant that is >= 4.5:1 on its own tint.
   • Logical properties only, so Arabic (RTL) mirrors for free.
   ============================================================ */

.ret-secondary {
  --pp-1: 4px; --pp-2: 8px; --pp-3: 12px; --pp-4: 16px; --pp-5: 24px;
  --pp-radius: 12px;      /* panel */
  --pp-radius-sm: 10px;   /* control card */
  --pp-radius-xs: 8px;    /* inner control */
  gap: var(--pp-3);
}

/* ── Section identity ───────────────────────────────────────── */
.ret-secondary > .ret-disclosure {
  --section-color: #34777a;
  --section-ink: #1f5a5d;
  --section-tint: color-mix(in srgb, var(--section-color) 9%, var(--surface));
}
#retDetails_scope      { --section-color: #547da6; --section-ink: #2f5275; }
#retDetails_assist     { --section-color: #a3813a; --section-ink: #6a5019; }
#retDetails_references { --section-color: #77718b; --section-ink: #4f4a66; }

/* ── Panel shell ────────────────────────────────────────────── */
.ret-secondary > .ret-disclosure {
  border: 1px solid color-mix(in srgb, var(--section-color) 24%, var(--border-soft));
  border-radius: var(--pp-radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(18 32 30 / 4%);
  overflow: clip;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ret-secondary > .ret-disclosure[open] {
  border-color: color-mix(in srgb, var(--section-color) 38%, var(--border-soft));
  box-shadow: 0 1px 2px rgb(18 32 30 / 4%), 0 8px 24px rgb(18 32 30 / 5%);
}

/* ── Summary: icon tile · title · chevron ───────────────────── */
.ret-secondary > .ret-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--pp-3);
  min-height: 56px;
  padding: var(--pp-2) var(--pp-4);
  border: 0;
  border-radius: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--section-color) 10%, var(--surface)), color-mix(in srgb, var(--section-color) 5%, var(--surface)));
  color: var(--section-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .005em;
  user-select: none;
  transition: background-color .15s ease;
}
@media (hover: hover) {
  .ret-secondary > .ret-disclosure > summary:hover {
    background: color-mix(in srgb, var(--section-color) 14%, var(--surface));
  }
}
.ret-secondary > .ret-disclosure[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--section-color) 22%, var(--border-soft));
}

/* icon tile (stroke colour is baked into each data-URI = the section ink) */
.ret-secondary > .ret-disclosure > summary::before {
  content: '';
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--pp-radius-xs);
  background-color: color-mix(in srgb, var(--section-color) 16%, var(--surface));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-color) 28%, transparent);
}
#retDetails_case > summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5a5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8.5 18c.6-1.7 2-2.5 3.5-2.5s2.9.8 3.5 2.5'/%3E%3C/svg%3E");
}
#retDetails_scope > summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E");
}
#retDetails_assist > summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
#retDetails_references > summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f4a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 2-2h12v16H7a2 2 0 0 0-2 2z'/%3E%3Cpath d='M5 21V5M10 8h5'/%3E%3C/svg%3E");
}

/* chevron replaces the old + / − glyph */
.ret-secondary > .ret-disclosure > summary::after,
.ret-secondary > .ret-disclosure[open] > summary::after {
  content: '';
  flex: none;
  margin-inline-start: auto;
  inline-size: 8px;
  block-size: 8px;
  font-size: 0;
  border-inline-end: 2px solid currentcolor;
  border-block-end: 2px solid currentcolor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.ret-secondary > .ret-disclosure[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

/* ── Body ───────────────────────────────────────────────────── */
.ret-secondary .ret-disclosure-body {
  display: grid;
  gap: var(--pp-4);
  margin: 0;
  padding: var(--pp-4);
  background: color-mix(in srgb, var(--section-color) 2.5%, var(--surface));
}
.ret-secondary .ret-disclosure-body > .ret-card { gap: var(--pp-3); }

/* panel heading row inside a card (e.g. "INSTRUMENT ····· PLANE") */
.ret-disclosure-body .ret-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-3);
  margin: 0;
  padding: 0 0 var(--pp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--section-color) 18%, var(--border-soft));
  color: var(--section-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ret-disclosure-body .ret-card-title .ret-badge {
  padding: 2px var(--pp-2);
  border: 1px solid color-mix(in srgb, var(--section-color) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-color) 12%, var(--surface));
  color: var(--section-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
html[dir='rtl'] .ret-disclosure-body .ret-card-title,
html[lang='ar'] .ret-disclosure-body .ret-card-title { letter-spacing: 0; text-transform: none; }

/* ── Control card (shared) ──────────────────────────────────── */
.ret-disclosure-body .ret-card > .ret-field,
.ret-disclosure-body .ret-posture-selects {
  --c: #547da6;
  --c-ink: #2f5275;
  display: flex;
  flex-direction: column;
  gap: var(--pp-2);
  min-width: 0;
  margin: 0;
  padding: var(--pp-4);
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--border-soft));
  border-inline-start: 3px solid var(--c);
  border-radius: var(--pp-radius-sm);
  background: color-mix(in srgb, var(--c) 5%, var(--surface));
}
.ret-disclosure-body .ret-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-2);
  margin: 0;
}
.ret-disclosure-body .ret-field-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.ret-disclosure-body .ret-field-note { margin: 0; font-size: 12px; line-height: 1.5; }
.ret-disclosure-body .ret-explain-btn { flex: none; }
.ret-disclosure-body .ret-explain-pop { grid-column: 1 / -1; }

/* value readout under a slider: a tinted mono pill */
.ret-disclosure-body .ret-card > .ret-field > input.ret-slider + .ret-field-note,
.ret-disclosure-body .ret-card > .ret-field > .ret-field-note:last-child:not(.ret-range-label) {
  align-self: flex-start;
  padding: 2px var(--pp-2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c) 13%, var(--surface));
  color: var(--c-ink);
  font: 700 12px/1.5 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

/* sliders take the control's colour */
.ret-disclosure-body .ret-slider {
  block-size: 6px;
  margin-block: var(--pp-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 20%, var(--border));
}
.ret-disclosure-body .ret-slider::-webkit-slider-thumb {
  inline-size: 22px;
  block-size: 22px;
  border: 3px solid #fff;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--c), 0 2px 5px rgb(18 32 30 / 25%);
}
.ret-disclosure-body .ret-slider::-moz-range-thumb {
  inline-size: 16px;
  block-size: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--c), 0 2px 5px rgb(18 32 30 / 25%);
}
.ret-disclosure-body .ret-slider:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }

/* selects */
.ret-disclosure-body .ret-select {
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 40px;
  border-color: color-mix(in srgb, var(--c) 30%, var(--border));
  border-radius: var(--pp-radius-xs);
  background-color: var(--surface);
  font-weight: 600;
}
.ret-disclosure-body .ret-select:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* outlined action buttons inside a control card */
.ret-disclosure-body .ret-field .ret-snap-btn {
  min-block-size: 40px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--border));
  border-radius: var(--pp-radius-xs);
  background: var(--surface);
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 650;
}
@media (hover: hover) {
  .ret-disclosure-body .ret-field .ret-snap-btn:hover { background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
}

/* ============================================================
   INSTRUMENT SETTINGS — named grid, equal-height rows
   ┌───────────────────────────────────────┐
   │ title                                  │
   ├────────────┬────────────┬──────────────┤
   │ instrument │            │ rheostat     │
   ├────────────┤   sleeve   ├──────────────┤
   │ examiner   │            │ vergence     │
   ├────────────┴────────────┴──────────────┤
   │ overlays                                │
   └───────────────────────────────────────┘
   ============================================================ */
#retDetails_scope .ret-hardware-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    'title title  title'
    'inst  sleeve rheo'
    'exam  sleeve verg'
    'over  over   over';
  gap: var(--pp-3);
  align-items: stretch;
}
#retDetails_scope .ret-card-title                                   { grid-area: title; }
#retDetails_scope .ret-field:has(select[data-retinoscope='device-model']) { grid-area: inst; --c: #547da6; --c-ink: #2f5275; }
#retDetails_scope [data-explain='sleeve']                           { grid-area: sleeve; --c: #34777a; --c-ink: #1f5a5d; }
#retDetails_scope [data-explain='rheostat']                         { grid-area: rheo; --c: #b38b3a; --c-ink: #6e4c10; }
#retDetails_scope [data-explain='vergence']                         { grid-area: verg; --c: #86689a; --c-ink: #5d3f73; }
#retDetails_scope [data-explain='overlays']                         { grid-area: over; --c: #3f8a68; --c-ink: #22603f; }
#retDetails_scope .ret-posture-selects                              { grid-area: exam; --c: #6b7f8e; --c-ink: #3d505d; }

/* instrument select: label above, control fills the card */
#retDetails_scope .ret-field:has(select[data-retinoscope='device-model']) label { display: flex; flex-direction: column; gap: var(--pp-2); }
#retDetails_scope .ret-field:has(select[data-retinoscope='device-model']) label > .sr-only { color: var(--text); }

/* sleeve: readout leads, slider, then the toggle pinned to the bottom */
#retDetails_scope .ret-sleeve-box { justify-content: flex-start; }
#retDetails_scope .ret-sleeve-box .ret-sleeve-readout {
  margin: 0;
  color: var(--c-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
#retDetails_scope .ret-sleeve-box .ret-range-label {
  margin: 0;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[dir='rtl'] #retDetails_scope .ret-sleeve-box .ret-range-label { letter-spacing: 0; text-transform: none; }
#retDetails_scope .ret-sleeve-box .ret-snap-btn { margin-block-start: auto; inline-size: 100%; }

/* examiner: two labelled selects side by side */
#retDetails_scope .ret-posture-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--pp-3);
  justify-content: stretch;
}
#retDetails_scope .ret-posture-selects .ret-mini-field {
  display: flex;
  flex-direction: column;
  gap: var(--pp-2);
  min-width: 0;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
}
#retDetails_scope .ret-posture-selects .ret-select { min-block-size: 40px; }

/* overlays: four toggle pills on one row */
#retDetails_scope .ret-overlay-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--pp-2) var(--pp-3);
}
#retDetails_scope .ret-overlay-group .ret-field-head { grid-column: 1 / -1; }
#retDetails_scope .ret-overlay-group .ret-checkbox {
  display: flex;
  align-items: center;
  gap: var(--pp-2);
  min-block-size: 40px;
  margin: 0;
  padding: var(--pp-1) var(--pp-3);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--border));
  border-radius: var(--pp-radius-xs);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
#retDetails_scope .ret-overlay-group .ret-checkbox:has(input:checked) {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
  color: var(--c-ink);
}
#retDetails_scope .ret-overlay-group .ret-checkbox input { inline-size: 16px; block-size: 16px; accent-color: var(--c); }

/* ============================================================
   PATIENT & CASE
   ============================================================ */
#retDetails_case [data-panel='case'] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pp-3);
  align-items: stretch;
}
#retDetails_case .ret-card-title,
#retDetails_case .ret-case-block,
#retDetails_case #rayDiagramContainer,
#retDetails_case .ret-disclosure { grid-column: 1 / -1; }

#retDetails_case #kcControls        { --c: #86689a; --c-ink: #5d3f73; }
#retDetails_case #cataractControls  { --c: #547da6; --c-ink: #2f5275; }
#retDetails_case #rayDiagramContainer { --c: #34777a; --c-ink: #1f5a5d; }

#retDetails_case .ret-case-block {
  padding: var(--pp-4);
  gap: var(--pp-3);
  border: 1px solid color-mix(in srgb, #34777a 24%, var(--border-soft));
  border-inline-start: 3px solid #34777a;
  border-radius: var(--pp-radius-sm);
  background: color-mix(in srgb, #34777a 4%, var(--surface));
}
/* reveal button and its "?" share one row; history / notes take full width */
#retDetails_case .ret-case-block { display: flex; flex-flow: row wrap; align-items: center; }
#retDetails_case .ret-case-block > :is(.ret-case-history, .ret-explain-pop, .ret-case-reveal) { flex: 1 1 100%; min-width: 0; }
#retDetails_case .ret-case-block > .ret-explain-btn { margin: 0; }
#retDetails_case .ret-case-history { gap: var(--pp-3) var(--pp-4); }
#retDetails_case .ret-case-row { padding: var(--pp-3); gap: var(--pp-1); border-radius: var(--pp-radius-xs); }
#retDetails_case .ret-case-row-label {
  color: #1f5a5d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
html[dir='rtl'] #retDetails_case .ret-case-row-label { letter-spacing: 0; }

/* the nested "Optical power cross" disclosure becomes a quiet sub-panel */
#retDetails_case .ret-disclosure {
  border: 1px solid var(--border-soft);
  border-radius: var(--pp-radius-sm);
  background: var(--surface);
  overflow: clip;
}
#retDetails_case .ret-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: var(--pp-2) var(--pp-4);
  background: var(--surface-sunken);
  color: #1f5a5d;
  font-size: 13px;
  font-weight: 700;
}
#retDetails_case .ret-disclosure > summary::after { content: '+'; font-size: 18px; font-weight: 400; }
#retDetails_case .ret-disclosure[open] > summary::after { content: '\2212'; }
#retDetails_case .ret-disclosure > .ret-disclosure-body,
#retDetails_case .ret-disclosure > :not(summary) { margin: 0; padding: var(--pp-4); background: none; }

/* ============================================================
   LEARNING & ASSISTANCE
   ┌──────────────┬────────────────────────┐
   │ assistance    │ guided tours            │
   ├──────────────┼────────────────────────┤
   │ residual      │        [explain] [learn]│
   └──────────────┴────────────────────────┘
   ============================================================ */
#retDetails_assist > .ret-disclosure-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--pp-3) var(--pp-4);
  align-items: stretch;
}
#retDetails_assist .ret-disclosure-body > .ret-verdict { grid-column: 1 / -1; }

/* shared look for the two big cards */
#retDetails_assist #assistPanelRoot,
#retDetails_assist .ret-tour-card {
  display: flex;
  flex-direction: column;
  gap: var(--pp-3);
  min-width: 0;
  margin: 0;
  padding: var(--pp-4);
  border-radius: var(--pp-radius-sm);
}
#retDetails_assist #assistPanelRoot {
  grid-column: 1;
  border: 1px solid color-mix(in srgb, #a3813a 28%, var(--border-soft));
  border-inline-start: 3px solid #a3813a;
  background: color-mix(in srgb, #a3813a 6%, var(--surface));
}
#retDetails_assist .ret-assist {
  inline-size: auto;
  padding: 0;
  gap: var(--pp-3);
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
}
#retDetails_assist .ret-tour-card {
  grid-column: 2;
  --c: #34777a;
  --c-ink: #1f5a5d;
  border: 1px solid color-mix(in srgb, #34777a 26%, var(--border-soft));
  border-inline-start: 3px solid #34777a;
  background: color-mix(in srgb, #34777a 5%, var(--surface));
}

/* assistance head: title · count · switch */
#retDetails_assist .ret-assist-head { gap: var(--pp-2); padding-block-end: var(--pp-2); border-bottom: 1px solid color-mix(in srgb, #a3813a 22%, var(--border-soft)); }
#retDetails_assist .ret-assist-title,
#retDetails_assist .ret-tour-card .ret-field-label {
  color: #6a5019;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#retDetails_assist .ret-tour-card .ret-field-label { color: #1f5a5d; }
html[dir='rtl'] #retDetails_assist :is(.ret-assist-title, .ret-tour-card .ret-field-label) { letter-spacing: 0; text-transform: none; }
#retDetails_assist .ret-assist-count { background: color-mix(in srgb, #a3813a 14%, var(--surface)); border-color: color-mix(in srgb, #a3813a 35%, transparent); color: #6a5019; }
#retDetails_assist .ret-assist-power {
  min-block-size: 32px;
  padding-block: var(--pp-1);
  border-color: color-mix(in srgb, #a3813a 40%, var(--border));
  background: var(--surface);
  color: #6a5019;
}
#retDetails_assist .ret-assist-power.is-on { background: color-mix(in srgb, #a3813a 16%, var(--surface)); border-color: #a3813a; color: #6a5019; }
#retDetails_assist .ret-assist-power.is-on .ret-assist-power-track { background: #a3813a; }

/* level selector = one segmented control */
#retDetails_assist .ret-assist-levels {
  gap: 0;
  padding: var(--pp-1);
  border: 1px solid color-mix(in srgb, #a3813a 30%, var(--border));
  border-radius: var(--pp-radius-sm);
  background: color-mix(in srgb, #a3813a 8%, var(--surface));
}
#retDetails_assist .ret-assist-level {
  min-block-size: 52px;
  padding: var(--pp-2) var(--pp-1);
  border: 0;
  border-radius: var(--pp-radius-xs);
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
}
#retDetails_assist .ret-assist-level-num { font-size: 11px; opacity: .7; }
@media (hover: hover) {
  #retDetails_assist .ret-assist-level:not(.is-active):hover { background: color-mix(in srgb, #a3813a 14%, var(--surface)); }
}
#retDetails_assist .ret-assist-level.is-active,
#retDetails_assist .ret-card > .ret-assist .ret-assist-level.is-active {
  background: #6a5019;
  color: #fff;
  box-shadow: 0 1px 3px rgb(18 32 30 / 25%);
}
#retDetails_assist .ret-assist-level[data-level='0'].is-active {
  background: var(--surface);
  color: #6a5019;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #a3813a 55%, transparent), 0 1px 2px rgb(18 32 30 / 10%);
}
#retDetails_assist .ret-assist-caption { color: var(--text-faint); font-size: 12px; }

/* tours */
#retDetails_assist .ret-tour-card .ret-field-head { margin: 0; }
#retDetails_assist .ret-tour-list { gap: var(--pp-2); margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#retDetails_assist .ret-tour-item {
  min-block-size: 60px;
  padding: var(--pp-3);
  gap: var(--pp-3);
  border-color: color-mix(in srgb, #34777a 22%, var(--border-soft));
  border-radius: var(--pp-radius-xs);
  background: var(--surface);
}
@media (hover: hover) {
  #retDetails_assist .ret-tour-item:hover { background: color-mix(in srgb, #34777a 9%, var(--surface)); border-color: #34777a; }
}
#retDetails_assist .ret-tour-item__icon {
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, #34777a 14%, var(--surface));
  color: #1f5a5d;
  font-size: 13px;
  font-weight: 700;
}
#retDetails_assist .ret-tour-item--intro { grid-column: 1 / -1; border-style: dashed; background: color-mix(in srgb, #34777a 4%, var(--surface)); }
#retDetails_assist .ret-tour-item.is-done .ret-tour-item__mark { background: #34777a; color: #fff; }

/* footer strip: residual (left) · actions (right) */
#retDetails_assist .ret-disclosure-body > .ret-field:not(.ret-tour-card) {
  --c: #6b7f8e;
  --c-ink: #3d505d;
  grid-column: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-block-size: 48px;
  padding: var(--pp-2) var(--pp-4);
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--border-soft));
  border-inline-start: 3px solid var(--c);
  border-radius: var(--pp-radius-sm);
  background: color-mix(in srgb, var(--c) 6%, var(--surface));
}
#retDetails_assist #deltaDBadge {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: 700 13px/1.4 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
#retDetails_assist .ret-details-actions {
  grid-column: 2;
  justify-content: flex-end;
  gap: var(--pp-3);
  align-self: center;
}
#retDetails_assist .ret-explain-master {
  min-block-size: 44px;
  padding: var(--pp-2) var(--pp-3);
  border: 1px dashed color-mix(in srgb, #a3813a 55%, var(--border));
  border-radius: var(--pp-radius-xs);
  background: var(--surface);
  color: #6a5019;
  font-size: 13px;
  font-weight: 650;
}
#retDetails_assist .ret-explain-master input { accent-color: #a3813a; }
#retDetails_assist .ret-learn-btn {
  min-block-size: 44px;
  padding: var(--pp-2) var(--pp-4);
  border: 1px solid #1f5a5d;
  border-radius: var(--pp-radius-xs);
  background: #1f5a5d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgb(31 90 93 / 25%);
}
@media (hover: hover) {
  #retDetails_assist .ret-learn-btn:hover { background: #164547; border-color: #164547; }
}

/* ============================================================
   REFERENCES
   ============================================================ */
#retDetails_references > .ret-disclosure-body { justify-items: start; }
#retDetails_references #btnScientificEvidence {
  min-block-size: 44px;
  padding: var(--pp-2) var(--pp-4);
  border: 1px solid color-mix(in srgb, #77718b 45%, var(--border));
  border-radius: var(--pp-radius-xs);
  background: var(--surface);
  color: #4f4a66;
  font-weight: 650;
}
@media (hover: hover) {
  #retDetails_references #btnScientificEvidence:hover { background: color-mix(in srgb, #77718b 12%, var(--surface)); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  #retDetails_scope .ret-hardware-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'title  title'
      'inst   exam'
      'sleeve sleeve'
      'rheo   verg'
      'over   over';
  }
  #retDetails_scope .ret-overlay-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #retDetails_assist > .ret-disclosure-body { grid-template-columns: minmax(0, 1fr); }
  #retDetails_assist #assistPanelRoot,
  #retDetails_assist .ret-tour-card,
  #retDetails_assist .ret-disclosure-body > .ret-field:not(.ret-tour-card),
  #retDetails_assist .ret-details-actions { grid-column: 1; }
  #retDetails_assist .ret-details-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .ret-secondary .ret-disclosure-body { padding: var(--pp-3); gap: var(--pp-3); }
  .ret-secondary > .ret-disclosure > summary { min-height: 52px; padding-inline: var(--pp-3); font-size: 14px; }
  .ret-disclosure-body .ret-card > .ret-field,
  .ret-disclosure-body .ret-posture-selects { padding: var(--pp-3); }
  #retDetails_scope .ret-hardware-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'inst' 'sleeve' 'rheo' 'verg' 'exam' 'over';
  }
  #retDetails_scope .ret-overlay-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #retDetails_case [data-panel='case'] { grid-template-columns: minmax(0, 1fr); }
  #retDetails_assist .ret-tour-list { grid-template-columns: minmax(0, 1fr); }
  #retDetails_assist .ret-assist-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #retDetails_assist .ret-details-actions > * { flex: 1 1 100%; justify-content: center; }
}