/* ============================================================
   Breakpoints. Mobile first is the default; these narrow the desktop shell.
   ============================================================ */

@media (max-width: 1180px) {
    .si { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
    .reader-wrap { grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-5); }
}

@media (max-width: 1024px) {
    .adm { grid-template-columns: 1fr; }
    .adm-side {
        position: fixed;
        inset: 0 auto 0 0;
        width: 282px;
        transform: translateX(-102%);
        transition: transform .24s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .adm-side.is-open { transform: none; }
    .adm-side__backdrop {
        position: fixed;
        inset: 0;
        background: var(--overlay);
        z-index: 95;
        display: none;
    }
    .adm-side__backdrop.is-open { display: block; }
    .adm-menu-btn { display: inline-grid !important; }

    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .test-shell { grid-template-columns: minmax(0, 1fr); }
    .test-side { position: static; }

    /* admin toolbars wrap instead of pushing the page sideways */
    .adm-bar     { padding: 0 var(--sp-4); gap: var(--sp-2); }
    .adm-bar h1  { font-size: var(--fs-md); }
    .adm-toolbar { flex-wrap: wrap; }
    .adm-toolbar > form.searchbox { width: 100%; }
    .adm-toolbar > form.row-gap   { width: 100%; flex-wrap: wrap; }
    .adm-toolbar > form.row-gap .select { flex: 1 1 140px; width: auto; }
}

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }

    .si {
        grid-template-columns: 1fr;
        height: auto;
    }
    .si__left { border-right: 0; border-bottom: 1px solid var(--border); }
    .si__meta { max-height: none; }
    .si__paste textarea { min-height: 260px; }
    .si__scroll { max-height: none; overflow: visible; }
}

@media (max-width: 980px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "copy" "art" "stats";
        padding: var(--sp-7);
    }
    .hero__art { max-width: 460px; margin: 0 auto; width: 100%; }
    .hero h1 { max-width: none; }
}

@media (max-width: 860px) {
    :root { --header-h: 58px; }

    .appnav { display: none; }
    .brand-name small { display: none; }
    .brand { font-size: 15px; }
    .bottomnav { display: block; }
    .page { padding: var(--sp-5) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-7)); }
    .appfoot { display: none; }

    .reader-wrap {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--sp-5) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-8));
    }
    .toc {
        position: fixed;
        inset: 0 auto 0 0;
        width: 284px;
        max-height: none;
        background: var(--surface-2);
        border-right: 1px solid var(--border);
        padding: var(--sp-5) var(--sp-4);
        z-index: 200;
        transform: translateX(-102%);
        transition: transform .24s var(--ease);
        overflow-y: auto;
    }
    .toc.is-open { transform: none; }
    .toc-toggle { display: inline-grid !important; }

    .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .searchbox { display: none; }
    .searchbox--page { display: block; width: 100%; }

    .page-head { align-items: flex-start; }
    .page-title { font-size: var(--fs-xl); }

    .modal { padding: 0; align-items: flex-end; }
    .modal-panel {
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: sheetIn .22s var(--ease);
    }
    .modal-foot { border-radius: 0; }
    @keyframes sheetIn { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }

    .toasts { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--bottomnav-h) + var(--sp-4)); }
    .toast { max-width: none; }

    .structure__row { grid-template-columns: 28px 1fr; row-gap: 4px; }
    .structure__text { grid-column: 1 / -1; white-space: normal; }
}

@media (max-width: 640px) {
    :root { --sp-5: 16px; --sp-6: 20px; --sp-7: 26px; --sp-8: 30px; }

    .hero { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); }
    .hero h1 { font-size: clamp(24px, 7vw, 31px); margin: 12px 0 10px; }
    .hero p { font-size: var(--fs-base); }
    .hero__actions .btn { flex: 1 1 100%; }

    /* four stats stay two-up rather than becoming a tall column */
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-auto { grid-template-columns: minmax(0, 1fr); }
    .reader-nav { grid-template-columns: 1fr; }
    .adm-body { padding: var(--sp-4); }
    .adm-bar { padding: 0 var(--sp-4); }
    .card--pad, .card-body { padding: var(--sp-4); }
    .block { padding: var(--sp-4); }
    .result-score { font-size: 44px; }
    .stat { padding: var(--sp-3) var(--sp-4); }
    .stat-num { font-size: var(--fs-lg); }
    .lines-row { grid-template-columns: 1fr; }
    .lines-no { width: 38px; }
}

@media (min-width: 861px) {
    .toc-toggle, .adm-menu-btn { display: none !important; }
    .mobile-only { display: none !important; }
}

@media print {
    .appbar, .bottomnav, .toc, .block__tools, .reader-nav, .appfoot,
    .adm-side, .adm-bar, .btn, .iconbtn, .sheet { display: none !important; }
    body { background: #fff; }
    .block { break-inside: avoid; border-color: #ddd; }
    .reader-wrap { display: block; padding: 0; }
}