/* ══════════════════════════════════════════════════════════════════════════
   analysis-review.css — normative owner of where the game review sits on
   #screen-analysis, from ≥701px up.

   Until 2026-08-12 #analysis-result lived inside the 348px control card. That
   was the right shape while the result was a best move and four short folds;
   it stopped being right when the whole review became visible. Measured on a
   1440px desktop: the panel grew 260 → 1484px (2055px with the move-quality
   fold open) beside a 916×561 board, so the review was read through a narrow
   slot while the space under the board stayed empty.

   The review is now a row of its own under both columns. The markup owns the
   position (it is a direct child of .tp-analysis-layout); this sheet owns the
   division of that row into columns. Below 701px nothing here applies: the
   layout is already one column there and the compact rules in phase-one.css
   keep the stack they were written for.

   Loaded last on purpose. phase-one.css ends with a minified block whose
   `#analysis-result.tp-analysis-results > *{grid-column:1}` would otherwise
   stack every card in the first column; the selectors below add the layout
   class to clear it (1,2,0 beats 1,1,0) rather than reaching for !important.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 701px) {
    .tp-analysis-layout > #analysis-result.tp-analysis-results {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    /* Undo the single-column stack the compact rules impose on every child. */
    .tp-analysis-layout > #analysis-result.tp-analysis-results > * {
        grid-column: auto;
    }

    /* The title and the review headline describe the whole game, so they take
       the whole row; the rest are cards about one aspect each. */
    .tp-analysis-layout > #analysis-result.tp-analysis-results > .tp-analysis-section-heading,
    .tp-analysis-layout > #analysis-result.tp-analysis-results > #analysis-headline {
        grid-column: 1 / -1;
    }

    /* The advantage graph is a sparkline: x is the ply index, y is the share of
       the advantage, and neither carries a unit that a uniform scale protects.
       Its viewBox is 300×64, so at any wider card the default "meet" fitting
       drew a 300px line marooned in the middle of the card. Stretching is the
       intended reading; the stroke stays one width so the distortion does not
       reach the line itself. */
    .tp-analysis-layout > #analysis-result .tp-review-graph {
        height: 96px;
    }

    .tp-analysis-layout > #analysis-result .tp-review-graph__line,
    .tp-analysis-layout > #analysis-result .tp-review-graph__zero {
        vector-effect: non-scaling-stroke;
    }
}

@media (min-width: 1100px) {
    .tp-analysis-layout > #analysis-result.tp-analysis-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Two blocks inside the headline are read as figures, not as bands: a
       percentage per side and three phase rows. Both were authored for a 300px
       card, and letting them run to 1280px puts the number a screen away from
       its label. The graph and the moments list keep the full width — they are
       the blocks that gain from it. */
    .tp-analysis-layout > #analysis-result .tp-review-accuracy > div {
        flex: 0 1 200px;
    }

    .tp-analysis-layout > #analysis-result .tp-review-phases {
        max-width: 460px;
    }
}

/* The per-ply list needs no rule here: phase-one.css already caps
   `.tp-quality-list` at 320px with its own scroll, which is what keeps this row
   as short as the board beside it. Restating the cap would only fork it. */

/* ── График преимущества как линейка партии ───────────────────────────────── */
/* Ломаная связана с доской: касание переводит её на этот полуход. Курсор и
   вертикальная метка показывают, где мы сейчас, — без них связь между линией и
   позицией существовала только в голове читателя. */
.tp-review-graph.is-interactive { cursor: ew-resize; touch-action: none; }
.tp-review-graph__marker {
    stroke: color-mix(in srgb, var(--tp-color-primary, #c9a227) 70%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.tp-review-graph__cursor {
    fill: var(--tp-color-primary, #c9a227);
    stroke: var(--tp1-surface, #16120d);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* The fold is only a container now, so its "Full details" header goes. */
#analysis-full-details > summary { display: none; }

.tp-analysis-back-review {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 0 14px;
    border: 1px solid var(--tp-color-border-strong, var(--tp-color-border));
    border-radius: 12px;
    background: var(--tp-color-surface);
    color: var(--tp-color-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tp-analysis-back-review[hidden] { display: none; }

.tp-analysis-back-review:hover { border-color: var(--tp-color-primary, currentColor); }
.tp-analysis-back-review:focus-visible {
    outline: 2px solid var(--tp-color-primary, currentColor);
    outline-offset: 2px;
}