/* Crimson Moon checker — implementation additions layered on the sealed
   design system (design-system-v0.10.css, byte-identical to design/final-v0.10).
   Only production-only behaviors live here: hidden toggling, the collapsible
   platform/patch context panel, and programmatic-focus rings for the step
   region and result heading. No design tokens or layout rules are changed. */

[hidden] { display: none !important; }

.context-panel {
  margin: 0 0 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.context-panel > summary {
  display: flex; align-items: center;
  min-height: 44px; padding: 10px 16px;
  cursor: pointer; font-weight: 600; color: var(--text);
}
.context-panel[open] > summary { border-bottom: 1px solid var(--border); }
.context-panel > .field-grid { padding: 16px; }
.context-panel fieldset { margin-bottom: 0; }

#result { margin-bottom: 24px; scroll-margin-top: 120px; }

/* Result scenario placeholder: the approved v0.10 result contract renders the
   packaged item placeholder at 88x88 on desktop (design/final-v0.10 result
   route: w-[88px] h-[88px] tile). The sealed design CSS pins
   .placeholder-figure img to 44px, so the approved size is restored here in
   the implementation layer. It shrinks only when the figure is genuinely
   constrained (narrowest contracted viewport 320px still fits 88px). */
.placeholder-figure img { width: 88px; height: 88px; max-width: 100%; object-fit: contain; }

@media (max-width: 767px) {
  .context-panel > summary { padding: 10px 12px; }
  .context-panel > .field-grid { padding: 12px; }
}

/* Keep the complete hero promise and primary action in the initial 320x700
   viewport without changing the frozen copy, artwork, or wider breakpoints. */
@media (max-width: 359px) {
  .hero-media { height: 176px; }
}