/* Quiet semantic accents drawn from Pupilla's teal, blue and gold palette.
   Reflex with/against/neutral colors remain owned by the clinical feedback. */
.ret-viewport-card { border-color: color-mix(in srgb, var(--accent) 18%, var(--border-soft)); }
.ret-level-selector { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.ret-level-selector button[aria-pressed='true'] { background: var(--accent-tint); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.ret-eye-btn[aria-pressed='true'] { background: var(--accent-tint); }
/* A visible label and teal frame make changing the patient case discoverable. */
.ret-viewport-header .ret-case-picker {
  background: #185a5c;
  border: 1px solid #185a5c;
  border-radius: 9px;
  padding: 3px;
  gap: 0;
}
.ret-viewport-header .ret-case-picker .ret-field-head {
  display: flex;
  padding-inline: 10px;
  max-width: 140px;
}
.ret-case-picker .ret-field-label { color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; }
.ret-viewport-header .ret-case-picker .ret-select {
  flex: 1;
  width: 0;
  background-color: #e3f1ef;
  border-color: #e3f1ef;
  color: #123f41;
  font-weight: 650;
  border-radius: 6px;
}
.ret-case-picker .ret-select option { background: #fff; color: #123f41; }
.ret-case-picker:focus-within { box-shadow: 0 0 0 3px rgb(24 90 92 / 20%); }
@media (hover: hover) {
  .ret-case-picker .ret-select:hover { background-color: #d1e9e6; }
}
#slotSphere { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-inline-start: 3px solid var(--accent); border-radius: 8px; padding-inline: 10px; }
#slotSphere .ret-lens-badge, #slotSphere .ret-lens-value { color: var(--accent-strong); }
#slotCyl, #slotAxisWd { background: color-mix(in srgb, #557da6 7%, var(--surface)); border-inline-start: 3px solid #557da6; border-radius: 8px; padding-inline: 10px; }
.ret-dock { background: color-mix(in srgb, #557da6 6%, var(--surface)); border-inline-start: 3px solid #557da6; border-radius: 8px; padding-inline: 10px; }
.ret-dock__title { color: var(--accent-strong); }
.ret-working-distance { background: color-mix(in srgb, #b38b3a 8%, var(--surface)); border-inline-start: 3px solid #b38b3a; border-radius: 8px; padding-inline: 10px; }
.ret-working-distance .ret-snap-btn[aria-pressed='true'] { background: color-mix(in srgb, #b38b3a 16%, var(--surface)); border-color: #b38b3a; box-shadow: inset 0 -2px #b38b3a; }
.ret-lens-tools .ret-hero-btn { border-color: color-mix(in srgb, var(--accent) 22%, var(--border-soft)); }
.ret-disclosure > summary { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); border-radius: inherit; }
.ret-step-btn:focus-visible, .ret-chip:focus-visible, .ret-snap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Primary observation action, anchored beside the live streak angle. */
.ret-dock .ret-auto-sweep {
  min-width: 126px;
  background: #185a5c;
  border-color: #185a5c;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 5px rgb(24 90 92 / 15%);
}
.ret-auto-sweep .ret-chip__icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgb(255 255 255 / 15%);
  color: #fff;
}
.ret-dock .ret-auto-sweep[aria-pressed='true'] {
  background: #104749;
  border-color: #b38b3a;
  color: #fff;
  box-shadow: inset 0 0 0 1px #b38b3a;
}
.ret-auto-sweep[aria-pressed='true'] .ret-chip__icon {
  background: #e8c77c;
  color: #183d3e;
}
@media (hover: hover) {
  .ret-dock .ret-auto-sweep:hover { background: #104749; border-color: #104749; }
  .ret-dock .ret-auto-sweep[aria-pressed='true']:hover { border-color: #b38b3a; }
}
.ret-dock .ret-auto-sweep:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / 20%); }
@media (max-width: 760px) {
  #slotSphere, #slotCyl, #slotAxisWd { padding-inline: 0; border-inline-start: 0; }
  #slotSphere { box-shadow: inset 0 2px var(--accent); }
  #slotCyl, #slotAxisWd { box-shadow: inset 0 2px #557da6; }
}