/* Quantum-Like Lab's action-first guide, created under Ethan Dickey's guidance.
 * The same live guide sits directly below the shared bar at every Beginner viewport size.
 */
.tutorial-card:not([hidden]) {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
}
.tutorial-card h2 { font-size: 1rem; margin: 0 0 5px; }
.tutorial-card p { font-size: .82rem; line-height: 1.45; max-width: 78ch; margin: 0 0 5px; }
.tutorial-card .tutorial-identity { display:flex; align-items:center; flex-wrap:wrap; gap:5px 9px; margin:0 0 6px; font-size:.69rem; line-height:1.2; }
.tutorial-identity strong { background:#a5eed8; color:#102b2b; border-radius:4px; padding:3px 6px; }
.tutorial-identity span { color:#c6e3e3; }
.top-actions .tutorial-start { white-space:nowrap; }
.top-actions .tutorial-start span { font-weight:400; }
.tutorial-progress { padding-top: 0; }
.tutorial-effect { color: #abeede; font-size: .74rem !important; }
.tutorial-outcome > strong { color: #a5eed8; font-size: .73rem; }
.tutorial-outcome > p { margin-top: 3px; }
.tutorial-measures { display: flex; flex-wrap: wrap; gap: 6px 15px; }
.tutorial-measures > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.tutorial-measures small { color: #b9d8dc; font-size: .71rem; }
.tutorial-measures b { font-size: .78rem; font-variant-numeric: tabular-nums; }
.tutorial-card .tutorial-small-note,
.tutorial-card .tutorial-action-detail { color: #bdd4d9; font-size: .74rem; margin-top: 6px; }
.tutorial-local-error { border-left: 3px solid #ffacba; padding: 6px 9px; color: #ffdae1; background: #3b2431; }
.tutorial-actions { gap: 5px; }
.tutorial-actions button { min-height: 38px; max-width: 175px; font-size: .8rem; }
.tutorial-actions button.quiet { min-height: 30px; padding: 4px 10px; }
.tutorial-actions button:focus-visible { outline: 3px solid #d5fff5; outline-offset: 3px; }
/* Preserve the existing play-control grid outside the guide. */
.play-side { display: contents; }
#beginner-tutorial-slot:empty,
#beginner-tutorial-slot:has(> [hidden]) { display: none; }
#beginner-tutorial-slot .tutorial-card { margin: 0 0 10px; }
@media (max-width: 760px) {
  .tutorial-card:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 12px;
    padding: 11px 12px;
  }
  .tutorial-progress { grid-column: 1 / -1; width: auto; align-items: center; padding: 0; margin: 0; }
  .tutorial-progress span { width: auto; margin: 0 0 0 8px; }
  .tutorial-actions { margin: 0; flex-direction: column; align-items: stretch; }
  .tutorial-actions button { max-width: 140px; }
}
@media (max-width: 450px) {
  .tutorial-card:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .tutorial-card p { font-size: .81rem; }
  .tutorial-actions { flex-direction: row; gap: 8px; }
  .tutorial-actions button { max-width: none; flex: 1 1 130px; }
  .tutorial-actions button.quiet { flex: 0 1 auto; }
}
/* v1.10: the guide points to one live area without dimming or blocking play.
 * Developed under Ethan Dickey's guidance and feedback. */
.tutorial-highlight { outline: 3px solid #66d9c2; outline-offset: 5px; scroll-margin-block: 18px; }
.tutorial-card { scroll-margin-block: 18px; }
.tutorial-card:not([hidden]) { align-items: start; }
.tutorial-card[data-tutorial-overview] { grid-template-columns: minmax(0,1fr) auto; }
.tutorial-card p { font-size: 1rem; line-height: 1.5; max-width: 64ch; }
.tutorial-card h2 { font-size: 1.1rem; }
.tutorial-card .tutorial-identity { font-size: .85rem; }
.tutorial-card .tutorial-effect, .tutorial-card .tutorial-small-note { font-size: .9rem !important; }
.tutorial-actions button { font-size: .95rem; min-height: 42px; max-width: 220px; }
.tutorial-measures small, .tutorial-measures b { font-size: .95rem; }
.tutorial-prediction, .tutorial-discoveries, .tutorial-example-return { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tutorial-prediction { margin-top:8px; }
.tutorial-prediction button { min-height:42px; font-size:.95rem; }
.tutorial-prediction [aria-pressed="true"] { background:#d4f7ee; color:#17392f; border-color:#66d9c2; }
.tutorial-discoveries, .tutorial-example-return { grid-column:2 / -1; }
.tutorial-discoveries details { font-size:.95rem; }
.tutorial-discoveries summary { cursor:pointer; padding:9px; }
.tutorial-discoveries p { max-width:50ch; }
.tutorial-card .tutorial-prediction-outcome { margin-top:8px; border-left:3px solid #66d9c2; padding-left:10px; }
.tutorial-actions .quiet { font-size:.9rem; }
@media(max-width:760px) {
  .tutorial-card:not([hidden]), .tutorial-card[data-tutorial-overview] { grid-template-columns:minmax(0,1fr); }
  .tutorial-progress, .tutorial-discoveries, .tutorial-example-return { grid-column:1; }
  .tutorial-actions { flex-direction:row; flex-wrap:wrap; }
  .tutorial-actions button { max-width:none; }
  .tutorial-card p { font-size:1rem; }
}
@media(prefers-reduced-motion:reduce) { .tutorial-highlight { scroll-behavior:auto; } }