/* ============================================================
   TUTORIAL LEVELS — coordinate strips + per-step explanation box.

   Loaded ONLY when puzzle_data["tutorial"] is true (see index.html), so no
   generated level ever fetches this file. Every rule is additionally scoped
   under .tutorial-level, so even if it were loaded it could not reach a
   normal board.

   Deliberately self-contained: housegame.css is not modified at all. The
   --cell-size formulas below are re-declarations (higher specificity) of the
   three in housegame.css, each minus the label gutter. If those originals ever
   change, these three must be updated to match.
   ============================================================ */

.tutorial-level {
    --grid-label-size: 1.4rem;
}

/* === COORDINATE STRIPS ===
   Absolutely positioned children of .puzzle-grid (already position: relative),
   so they sit outside its border box without joining the 4x5 grid flow. The
   +3px clears the board's 3px border. They are NOT .grid-cell — housegame.js
   measures and iterates those to derive cell size. */
.tutorial-level .grid-axis {
    position: absolute;
    display: grid;
    pointer-events: none;
}

.tutorial-level .grid-axis span {
    display: grid;
    place-items: center;
    font-size: clamp(10px, calc(var(--cell-size) * 0.18), 16px);
    font-weight: bold;
    color: var(--color-text);
    opacity: 0.75;
    line-height: 1;
}

.tutorial-level .grid-axis--cols {
    bottom: calc(100% + 3px);
    left: 0;
    right: 0;
    height: var(--grid-label-size);
    grid-template-columns: repeat(var(--grid-cols, 4), var(--cell-size));
}

.tutorial-level .grid-axis--rows {
    right: calc(100% + 3px);
    top: 0;
    bottom: 0;
    width: var(--grid-label-size);
    grid-template-rows: repeat(var(--grid-rows, 5), var(--cell-size));
}

/* === BOARD SIZING ===
   Reserve the gutter by shrinking the cell, rather than by padding the
   container — the board is deliberately sized to fill the viewport, so an
   unaccounted gutter overflows on phones. Mirrors housegame.css:38. */
.game-wrapper.tutorial-level .game-layout {
    --cell-size: clamp(
        60px,
        calc((100dvh - 7rem - var(--grid-label-size)) / (var(--grid-rows, 5) + 0.5)),
        150px
    );
}

/* Mirrors housegame.css:992 (portrait phone/tablet). */
@media (max-width: 1024px) {
    .game-wrapper.tutorial-level .game-layout {
        --cell-size: min(
            calc((min(100vw, 640px) - 1.5rem - 6px - var(--grid-label-size)) / var(--grid-cols, 4)),
            calc((100dvh - 21.25rem - var(--grid-label-size)) / var(--grid-rows, 5))
        );
    }
}

/* Mirrors housegame.css:1170 (landscape). */
@media (max-width: 1024px) and (orientation: landscape) {
    .game-wrapper.tutorial-level .game-layout {
        --cell-size: min(
            calc((100dvh - 6.5rem - var(--grid-label-size)) / var(--grid-rows, 5)),
            calc((100vw - 18rem - var(--grid-label-size)) / var(--grid-cols, 4))
        );
    }
}

/* The row strip eats into the gap the reset button sits in (left: -3.5rem
   inside .puzzle-grid). Push it clear of the labels. */
.tutorial-level .reset-btn {
    left: calc(-3.5rem - var(--grid-label-size));
}

/* === PER-STEP EXPLANATION ===
   A <details>, not a <div>, for three reasons: native collapse + keyboard +
   ARIA for free; it is not caught by the .step-clue cross-out handler; and it
   does not become the group's last <div>, which would steal the elbow marker
   from .step-clue:last-of-type. */
.tutorial-level .step-explanation {
    margin: 0.35rem 0 0 1.25rem;
    border: 2px solid color-mix(in srgb, var(--color-text) 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    font-size: 13px;
}

.tutorial-level .step-explanation > summary {
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-weight: bold;
    color: var(--color-text);
    user-select: none;
    list-style: none;
}

/* Hide the default disclosure triangle; the arrow below is the affordance. */
.tutorial-level .step-explanation > summary::-webkit-details-marker { display: none; }
.tutorial-level .step-explanation > summary::marker { content: ''; }

.tutorial-level .step-explanation > summary::after {
    content: ' \25B8';
    opacity: 0.6;
}
.tutorial-level .step-explanation[open] > summary::after {
    content: ' \25BE';
}

.tutorial-level .step-explanation-body {
    padding: 0 0.5rem 0.45rem;
    color: var(--color-text);
    line-height: 1.45;
}

.tutorial-level .step-explanation-para {
    margin: 0;
}

/* One numbered item per clue, so a dense paragraph becomes a walkthrough.
   Padding (not margin) keeps the markers inside the box on narrow screens. */
.tutorial-level .step-explanation-list {
    margin: 0;
    padding-left: 1.4rem;
    list-style: decimal;
}

.tutorial-level .step-explanation-list li {
    margin: 0 0 0.35rem;
    padding-left: 0.15rem;
}

.tutorial-level .step-explanation-list li:last-child {
    margin-bottom: 0;
}

.tutorial-level .step-explanation-list li::marker {
    font-weight: bold;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* A collapsed step hides its clues; the explanation goes with them. */
.tutorial-level .step-group.collapsed .step-explanation {
    display: none;
}