/* Phase 04: interaction fixes, kept separate from the editorial design system. */
body.inspection-open { overflow: hidden; }
.inspection-dialog[open] { display: flex; flex-direction: column; }
.inspection-dialog .inspection-toolbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.inspection-dialog .inspection-toolbar > :first-child { flex: 1 1 160px; }
.inspection-dialog .inspection-toolbar button { min-width: 44px; min-height: 44px; padding: 8px 12px; font: 500 13px/1.3 "Instrument Sans", sans-serif; }
.inspection-dialog .inspection-toolbar button:disabled { opacity: .5; cursor: default; }
.inspection-dialog .inspection-stage { display: block; position: relative; flex: 1 1 auto; min-height: 80px; height: auto; padding: 12px; overflow: auto; overscroll-behavior: contain; }
.inspection-dialog .inspection-stage img { display: block; max-width: none; max-height: none; margin: auto; object-fit: contain; }
.inspection-help { flex: 0 0 auto; margin: 0; padding: 8px 12px; font: 13px/1.5 "Instrument Sans", sans-serif; }
.inspection-dialog .inspection-stage:focus-visible { outline: 3px solid #1855ef; outline-offset: -4px; }
.portfolio-lightbox.inspection-dialog :focus-visible { outline-color: #a9c8ff; }
.portfolio-lightbox .inspection-help { color: #e0e7f2; }
.image-dialog .inspection-help { color: #515d70; }
.inspection-dialog .dialog-caption { max-height: 20vh; overflow: auto; padding-bottom: 8px; }
.portfolio-lightbox-trigger { min-height: 44px; max-width: 100%; white-space: normal; }
.project-suiyu-page .portfolio-lightbox-trigger { color: #fff; }
.portfolio-preview .decision-section figcaption { color: #5e687a !important; }
.portfolio-preview .decision-section { --muted: #5e687a; }
.case-collections-page .evidence-origin { color: #626976; }
.photo-pause { position: absolute; bottom: 12px; right: 12px; z-index: 2; min-height: 44px; padding: 10px 14px; border: 1px solid #667085; border-radius: 6px; background: #fffdfa; color: #17191d; font: 500 14px/1.4 "Instrument Sans", sans-serif; cursor: pointer; }
.photo-pause:focus-visible { outline: 3px solid #1855ef; outline-offset: 3px; }
[role="tabpanel"]:focus-visible { outline: 3px solid #1855ef; outline-offset: 4px; }
/* Preserve the alternating desktop composition, with copy-first mobile DOM. */
@media (min-width: 721px) {
  :is(.turn-card,.hpe-card,.suiyu-card) .featured-card-intro { grid-template-areas: "visual copy"; }
  :is(.turn-card,.hpe-card,.suiyu-card) .featured-card-copy { grid-area: copy; }
  :is(.turn-card,.hpe-card,.suiyu-card) .featured-card-visual { grid-area: visual; }
}
@media (max-width: 880px) {
  body.menu-open .site-header #primary-menu { display: flex !important; }
  .site-header #primary-menu { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 560px) {
  .inspection-dialog .inspection-toolbar > :first-child { flex-basis: 100%; margin: 0; }
  .inspection-dialog .inspection-toolbar { gap: 6px; }
  .inspection-dialog .inspection-toolbar button { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-about-carousel] img { transition: none !important; }
}