/* A light control strip above the preview; the investigation happens in the app. */
.case-guide { scroll-margin-top: 0; }
.case-guide [hidden] { display: none !important; }
.case-guide button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: 500 13px/1.35 var(--sans); cursor: pointer; }
.case-guide button[aria-busy="true"] { cursor: progress; }
.case-intro { display: flex; align-items: center; gap: 18px; }
.case-guide .case-start { padding-left: 0; color: var(--accent-ink); }
.case-start .case-arrow { transition: transform 150ms var(--ease); }
.case-badge { font: 400 11px/1.5 var(--mono); color: var(--text-3); }
.case-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; row-gap: 8px; }
.case-steps { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0 56px 0 0; }
.case-steps > li { display: flex; align-items: center; gap: 18px; }
.case-steps > li + li::before { content: '›'; color: var(--text-3); font: 400 16px/1 var(--mono); }
.case-steps button { padding-inline: 0; border-radius: 0; border-bottom: 2px solid transparent; color: var(--text-3); }
.case-number { font: 400 10px/1 var(--mono); opacity: .8; }
.case-steps button[aria-current="step"] { border-bottom-color: var(--accent-ink); color: var(--accent-ink); }
.case-guide .case-close { grid-column: 2; grid-row: 1; justify-self: end; min-width: 44px; color: var(--text-3); }
.case-cue { grid-column: 1; grid-row: 2; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.case-action { grid-column: 2; grid-row: 2; justify-self: end; }
.case-guide .case-next { padding-inline: 15px; background: var(--accent-fill); color: var(--on-accent); white-space: nowrap; }
@media (hover: hover) {
  .case-start:hover .case-arrow { transform: translateX(4px); }
  .case-steps button:hover, .case-guide .case-close:hover { color: var(--text); }
  .case-guide .case-next:hover { filter: brightness(1.1); }
}
@media (prefers-reduced-motion: reduce) { .case-start .case-arrow { transition: none; } }
@media (max-width: 600px) {
  .case-strip { column-gap: 8px; row-gap: 6px; }
  .case-steps { gap: 0; justify-content: space-between; }
  .case-steps > li { flex: 1; min-width: 0; }
  .case-steps > li + li::before, .case-number { display: none; }
  .case-steps button { width: 100%; padding: 8px 3px; font-size: 12px; }
  .case-guide .case-close { padding-inline: 8px; font-size: 12px; }
  .case-cue { font-size: 12px; max-width: 24ch; }
  .case-guide .case-next { padding-inline: 10px; font-size: 12px; }
}