/* Shared layout for the in-app tutorials (2026-10-18).
   Load it AFTER the tutorial's own stylesheet. It gives every guide the layout
   of the Survey Flow Editor guide: slim title header, contents docked on the
   left on wide screens, annotated screenshots with button legends, and a phone
   layout without horizontal page scrolling. Static tutorials run under the
   strict CSP, so everything here is class-based (no inline styles). */

/* === Title page: slim header, not a full-screen cover === */
.title-page {
    min-height: 0;
    display: block;
    text-align: center;
    padding: 18pt 0 12pt;
}
.title-page .series-label { font-size: 9.5pt; margin-bottom: 6pt; }
.title-page h1 { font-size: 19pt; margin-bottom: 5pt; }
.title-page .subtitle { font-size: 11pt; max-width: 620px; margin: 0 auto 8pt; }
.title-page .meta { font-size: 9pt; }

/* One continuous chapter count across all parts of the contents. */
.toc { counter-reset: toc; }
.toc ol { counter-reset: none; }

.part-divider { padding: 18pt 0 14pt; }

/* === Desktop: contents docked left, text shifts right === */
@media screen and (min-width: 1280px) {
    body {
        margin-left: 280px;
        margin-right: 24px;
        max-width: 960px;
        padding-left: 0;
        padding-right: 0;
    }
    .toc {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        overflow-y: auto;
        margin: 0;
        padding: 24pt 18pt;
        border-radius: 0;
        border: none;
        border-right: 1px solid #e2e8f0;
        background: #f8fafc;
        font-size: 9pt;
        z-index: 50;
    }
    .toc h2 { font-size: 11pt; }
    .toc > ol > li { font-size: 9pt; }
    .toc .sub-items li { font-size: 8pt; }
    .toc + .page-break { display: none; }
}

/* === Print: contents back in the text flow === */
@media print {
    .toc {
        position: static;
        width: auto;
        height: auto;
        border-right: none;
        background: #f8fafc;
        padding: 16pt 20pt;
        border-radius: 8pt;
        margin: 20pt 0;
    }
    body { margin-left: 0; margin-right: 0; }
}

/* === Screenshots === */
figure.figure-narrow img { max-width: min(320px, 100%); }
figure.figure-medium img { max-width: min(560px, 100%); }
figure.figure-phone img { max-width: min(300px, 100%); }

/* Annotated screenshot + button legend side by side. */
.editor-tour {
    display: grid;
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin: 16pt 0;
}
/* Landscape screenshots: picture above, legend below. */
.editor-tour.stacked { grid-template-columns: minmax(0, 1fr); }
.editor-tour figure { margin: 0; }
.editor-tour figure a { display: block; cursor: zoom-in; }
.editor-tour table { margin-top: 0; }
.btn-legend td { vertical-align: top; }
.btn-legend.numbered td:first-child { width: 34px; text-align: center; }
.btn-legend .bi { color: #475569; margin-right: 4px; }
.mk {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8590c;
    color: #fff;
    font-weight: 700;
    font-size: 9pt;
    line-height: 22px;
    text-align: center;
}
.fig-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.fig-pair figure { margin: 16pt 0 0; }

@media (max-width: 820px) {
    .editor-tour, .fig-pair { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
    body { padding: 24px 16px; }
    table { display: block; overflow-x: auto; }
    .formula, .calculation, pre { overflow-x: auto; }
    code { overflow-wrap: anywhere; }
}
@media print {
    .editor-tour { grid-template-columns: 45% 55%; }
    .editor-tour.stacked { grid-template-columns: 100%; }
}