body[data-app="checklist"] .checklist-reference-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  max-width: none;
  object-fit: contain;
  vertical-align: middle;
}

body[data-app="checklist"] :is(.catalog-icon, .continue-icon, .result-icon, .topic, .related-link, .flow-demo, .demo-glyph) .checklist-reference-icon {
  width: 24px;
  height: 24px;
}

body[data-app="checklist"] :is(.page-icon, #pageIcon) .checklist-reference-icon {
  width: 56px;
  height: 56px;
}

[data-theme="dark"] body[data-app="checklist"] .checklist-reference-icon {
  filter: invert(1);
}

@media print {
  body[data-app="checklist"] .checklist-reference-icon {
    filter: none;
  }
}

body[data-app="checklist"] .reference-figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--ck-border); border-radius: 14px; background: #fff; }
body[data-app="checklist"] .reference-image-button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: #fff; color: #211e1a; text-align: left; cursor: zoom-in; }
body[data-app="checklist"] .reference-image { display: block; width: 100%; height: auto; max-height: 500px; object-fit: contain; background: #fff; opacity: 1; }
.reference-open { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid #e6e4df; color: #35312b; font-size: 12px; line-height: 1.5; }
.reference-figure figcaption { padding: 8px 14px; background: var(--detail-panel, var(--ck-panel)); color: var(--ck-muted); border-top: 1px solid var(--ck-border); font-size: 11px; line-height: 1.5; }
.reference-image-button:hover .reference-open { background: #f5f4ef; }
.reference-image-button:focus-visible { outline: 3px solid var(--ck-accent); outline-offset: -3px; }
.variant-card > .reference-figure { margin: 0; }
.flow-card-visual { min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.flow-card-visual .flow-card-demo { border-width: 0; border-radius: 14px; }
body[data-app="checklist"] .reference-lightbox { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; overscroll-behavior: contain; border-radius: 16px; }
body[data-app="checklist"] .reference-lightbox::backdrop { background: rgb(0 0 0 / 72%); }
body[data-app="checklist"] .reference-lightbox[open] { opacity: 1; animation-name: reference-image-in; }
@keyframes reference-image-in { from { transform: translateY(8px); } to { transform: translateY(0); } }
.reference-lightbox-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--ck-panel); border-bottom: 1px solid var(--ck-border); }
.reference-lightbox-header h2 { min-width: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.reference-lightbox-header button { flex: 0 0 auto; }
.reference-lightbox-image { display: block; width: 100%; height: auto; background: #fff; }
@media (max-width: 600px) {
  .reference-image { max-height: 420px; }
  body[data-app="checklist"] .reference-lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .reference-lightbox-header { padding: 12px; gap: 10px; }
}
@media print {
  .reference-open, .reference-lightbox { display: none !important; }
  .reference-figure { break-inside: avoid; }
  body[data-app="checklist"] .reference-image { max-height: 350px; }
}