dialog.clinical-figure {
  width: min(1600px, calc(100vw - 40px));
  height: calc(100dvh - 40px);
  max-width: none;
  max-height: none;
  margin: auto;
  border: 1px solid #ccd7da;
  border-radius: 8px;
  padding: 0;
  color: #202e35;
  background: var(--color-surface, #FAFBF8);
  font-family: 'General Sans', 'Atkinson Hyperlegible Next', sans-serif;
  transition-property: none;
}
dialog.clinical-figure[open] { display: flex; flex-direction: column; }
dialog.clinical-figure::backdrop { background: rgba(32, 46, 53, .7); }
.clinical-figure__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #dce4e6; }
.clinical-figure__toolbar h2 { margin: 0 auto 0 0; font: 650 17px/1.3 'General Sans', sans-serif; }
.clinical-figure__controls { display: flex; flex-wrap: wrap; gap: 6px; }
.clinical-figure__controls :is(button, a) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: 1px solid #ccd7da; border-radius: 5px; padding: 8px 12px; color: #202e35; background: var(--color-surface, #FAFBF8); font: 600 14px/1.3 'General Sans', sans-serif; text-decoration: none; cursor: pointer; }
.clinical-figure__controls [aria-pressed='true'] { border-color: #bc4028; color: #a13320; background: #fff2ee; }
.clinical-figure__controls .clinical-figure__close { color: #fff; background: #bc4028; border-color: #bc4028; }
.clinical-figure__stage { display: block; flex: 1; min-height: 0; padding: 16px; overflow: auto; background: var(--color-bg-subtle, #E2E9E5); }
.clinical-figure__stage img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transition-property: none; }
.clinical-figure.is-actual-size .clinical-figure__stage { display: block; }
.clinical-figure.is-actual-size img { width: var(--figure-width, auto); height: auto; max-width: none; max-height: none; margin: 0 auto; }
.clinical-figure__status { flex: none; margin: 0; padding: 8px 16px; color: #566570; font-size: 13px; line-height: 1.4; }
.clinical-figure :focus-visible { outline: 3px solid #bc4028; outline-offset: 2px; }
@media (max-width: 640px) {
  dialog.clinical-figure { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .clinical-figure__toolbar { gap: 8px; padding: 10px 12px; }
  .clinical-figure__toolbar h2 { width: 100%; }
  .clinical-figure__controls { width: 100%; }
  .clinical-figure__controls :is(button, a) { flex: 1; padding-inline: 7px; font-size: 13px; }
  .clinical-figure__stage { padding: 8px; }
  .clinical-figure__status { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}