/**
 * shadowing-mobile.css — mobile (<640px) overrides for all shadowing pages.
 * Loaded after the inline <style> block in each PHP page (index, video, drill, history, print).
 *
 * Rules:
 *  - Touch target ≥ 44×44px
 *  - Body/input font ≥ 14px (≥ 16px for inputs to suppress iOS auto-zoom)
 *  - Bottom-sheet pattern for fullscreen modals
 *  - No horizontal overflow at 320px viewport
 *  - Safe-area-inset-bottom for sticky elements on iPhone with notch
 *  - Brand tokens only — no hardcoded colors
 */

/* ============================================================================
   GLOBAL — apply everywhere shadowing
   ============================================================================ */
@media (max-width: 640px) {
    /* Prevent iOS auto-zoom on any input/select/textarea < 16px font */
    input[type="text"], input[type="email"], input[type="url"],
    input[type="search"], input[type="number"], input[type="tel"],
    select, textarea {
        font-size: 16px !important;
    }
}

/* ============================================================================
   /shadowing — Library Hub (index.php)
   ============================================================================ */
@media (max-width: 540px) {
    .sl-hero { padding: 28px 20px 26px !important; border-radius: 16px }
    .sl-hero h1 { font-size: 28px !important; letter-spacing: -.015em }
    .sl-hero p { font-size: 14.5px }
    .sl-hero__stats { gap: 14px 18px; margin-top: 20px; padding-top: 18px }
    .sl-hero__stat strong { font-size: 18px }
    .sl-hero__stat span { font-size: 11.5px }

    /* Paste-to-learn block: stack body + form */
    .sl-paste { padding: 14px; gap: 10px }
    .sl-paste__body, .sl-paste__form { min-width: 100% }
    .sl-paste__form { flex-direction: column }
    .sl-paste__input, .sl-paste__btn { width: 100%; min-height: 46px }
    .sl-paste__btn { justify-content: center }
}

@media (max-width: 640px) {
    /* Hide busy hero decoration on phone — reclaim space */
    .sl-hero__deco { display: none !important }

    /* Filter row — 2-col selects + full-width check + apply */
    .sl-filter { padding: 12px; gap: 8px }
    .sl-filter label { flex: 1 1 calc(50% - 4px); min-width: 0 }
    .sl-filter select { min-width: 0 !important; width: 100%; font-size: 16px; padding: 10px 12px; min-height: 44px }
    .sl-filter .check, .sl-filter__apply { flex: 1 1 100%; justify-content: center; min-height: 44px }

    /* Scope chips — bigger tap target */
    .sl-scope { gap: 6px }
    .sl-scope__chip { padding: 10px 14px !important; font-size: 13px; min-height: 44px; align-items: center }
}

@media (max-width: 480px) {
    /* Force 1-col library grid (default minmax(280px,1fr) overflows at 320px) */
    .sl-grid { grid-template-columns: 1fr !important; gap: 14px }

    /* Card legibility */
    .sl-card__title { font-size: 15px !important; -webkit-line-clamp: 3 }
    .sl-card__channel { font-size: 13px }
    .sl-card__meta span { font-size: 11.5px; padding: 4px 9px }
    .sl-card__meta { gap: 5px }

    /* Coach grid 1-col */
    .sl-coach__grid { grid-template-columns: 1fr !important }
    .sl-value__grid { grid-template-columns: 1fr !important }
}

@media (max-width: 540px) {
    /* Quota banner — stack */
    .sl-quota { padding: 12px; gap: 10px }
    .sl-quota__main { flex-wrap: wrap }
    .sl-quota__bar { max-width: 100% }
    .sl-quota__side { width: 100%; justify-content: space-between }
    .sl-quota__upgrade { flex: 1; justify-content: center; min-height: 44px }

    /* Activate modal — bottom sheet */
    .sl-activate-modal { padding: 0 !important; align-items: flex-end !important }
    .sl-activate-panel {
        padding: 20px !important;
        max-height: 90vh; overflow-y: auto;
        border-radius: 16px 16px 0 0 !important;
        width: 100%; max-width: 100% !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .sl-activate-panel__actions { flex-direction: column-reverse !important; gap: 8px }
    .sl-activate-panel__actions > button,
    .sl-activate-panel__actions > a { width: 100%; flex: 1; justify-content: center; min-height: 48px; font-size: 14px; padding: 14px 18px !important }

    /* Sticky CTA — smaller + safe area */
    .sl-sticky {
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        right: 16px !important;
        padding: 11px 18px !important;
        font-size: 13px !important;
    }
}

/* ============================================================================
   /shadowing/video — Player (video.php)
   ============================================================================ */
/* Fix overflow ngang trong "Đoạn hiện tại" — text/audio không tràn khỏi card mobile */
@media (max-width: 640px) {
    .sh-card, .sh-card__head, .sh-card__body { min-width: 0; max-width: 100%; }
    .sh-seg, .sh-seg__text, .sh-seg__vi {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    .sh-seg__text { font-size: 16px !important; letter-spacing: 0 !important }
    .sh-seg__vi { font-size: 13.5px !important; padding: 8px 11px !important }
    .sh-seg__meta { flex-wrap: wrap; gap: 5px 8px }
    .sh-rec { padding: 10px !important; gap: 8px !important }
    .sh-rec__main { min-width: 0 }
    .sh-rec__status, .sh-rec__hint { word-break: break-word; overflow-wrap: anywhere }
    /* Audio playback: full width, không tràn */
    .sh-playback { padding: 6px 8px !important; gap: 6px !important }
    .sh-playback audio { width: 100% !important; max-width: 100% !important; height: 32px }
    /* Buttons inline mobile — wrap chứ không scroll horizontal trong card */
    .sh-playback__btn { flex-shrink: 0 }
}

@media (max-width: 540px) {
    /* Hero block: stack title + action buttons */
    .sh-hero { padding: 14px !important; gap: 10px !important }
    .sh-hero__h, .sh-hero h2 { font-size: 16px; line-height: 1.25 }

    /* 3 action buttons: chia đều 1 hàng, cùng cao, text nowrap không xuống dòng */
    .sh-hero > div:last-child {
        width: 100%;
        display: flex !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
    }
    .sh-hero__shortcuts {
        flex: 1 1 0; min-width: 0;          /* chia đều, cho phép co lại nếu chật */
        min-height: 42px;
        padding: 8px 8px !important;
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        justify-content: center !important;
        display: inline-flex; align-items: center; gap: 5px;
    }
    /* Ẩn <kbd>?</kbd> trong nút "Phím tắt" mobile — không cần thiết khi tap */
    .sh-hero__shortcuts kbd { display: none }
    .sh-hero__badge { padding: 4px 10px; font-size: 11px }
}

@media (max-width: 380px) {
    /* Cực hẹp (Galaxy Fold / iPhone SE 1st gen): font + padding compact */
    .sh-hero__shortcuts { font-size: 11px !important; padding: 8px 6px !important; gap: 4px }
}

@media (max-width: 640px) {
    /* Sticky band — progress full row + 4 stats 2x2 */
    .sh-band {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .sh-band__progress { grid-column: 1 / -1 !important }
    .sh-band__stat { padding: 6px 4px }
    .sh-band__stat b { font-size: 18px }

    /* Player masks smaller on phone */
    .sh-player::before { height: 32px !important }
    .sh-player::after { height: 24px !important }

    /* Controls bar — bigger touch */
    .sh-controls { gap: 8px !important; padding: 8px 10px !important; flex-wrap: wrap }
    .sh-controls button {
        padding: 9px 12px !important; min-height: 40px !important;
        font-size: 12.5px !important;
    }
    .sh-controls__lbl { display: none } /* free up space */
    .sh-controls__sep { display: none }

    /* Segment list — readable + tappable */
    .sh-list { column-count: 1 !important }
    .sh-list__item {
        padding: 11px 12px !important;
        font-size: 13.5px !important;
        min-height: 48px;
        align-items: center;
    }
    .sh-list__text { line-height: 1.45 }

    /* Jump row — primary "Kết thúc" full-width */
    .sh-jump-row { gap: 6px !important; flex-wrap: wrap }
    .sh-jump-btn {
        padding: 10px 14px !important;
        font-size: 12.5px !important;
        min-height: 42px;
    }
    .sh-jump-btn--end { margin-left: 0 !important; flex: 1 1 100% !important; justify-content: center }

    /* Filter pills + search */
    .sh-filter-row { gap: 6px !important; flex-wrap: wrap }
    .sh-filter-btn { padding: 9px 14px !important; font-size: 12.5px !important; min-height: 40px }
    .sh-seg-search {
        font-size: 16px !important;
        padding: 10px 12px 10px 32px !important;
        min-height: 42px;
        max-width: 100% !important;
    }

    /* Resume banner */
    .sh-resume { padding: 10px 12px !important }
    .sh-resume__btn { width: 100%; justify-content: center; padding: 11px !important; min-height: 44px }

    /* Recording UI */
    .sh-rec { padding: 10px !important; gap: 8px !important }
    .sh-rec__status { font-size: 13.5px }
    .sh-rec__hint { font-size: 11px; line-height: 1.55 }

    /* Dictation textarea — taller so soft keyboard doesn't eat it */
    #dictInput {
        min-height: 110px !important;
        font-size: 16px !important;
        padding: 12px !important;
        line-height: 1.5 !important;
    }
    #dictSubmit { padding: 11px 18px !important; font-size: 14px; min-height: 44px; flex: 1 }
    #dictSlowBtn, #dictHintBtn, #dictRevealBtn {
        padding: 10px 12px !important; min-height: 44px !important;
    }
}

@media (max-width: 540px) {
    /* All modals → bottom sheet */
    .sh-modal__overlay,
    .sh-setup__overlay,
    .sh-tour__overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .sh-modal, .sh-setup, .sh-tour {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 94vh !important;
        border-radius: 14px 14px 0 0 !important;
    }
    .sh-modal__head, .sh-setup__hero, .sh-tour__hero {
        position: sticky; top: 0; z-index: 2;
        background: var(--color-surface, #fff);
    }
    .sh-modal__foot, .sh-setup__foot, .sh-tour__foot {
        position: sticky; bottom: 0; z-index: 2;
        background: var(--color-surface, #fff);
        padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }

    /* Summary modal compact */
    .sh-sum__hero { padding: 16px !important; gap: 12px !important }
    .sh-sum__big { font-size: 48px !important }
    .sh-sum__stats { padding: 14px 16px !important }
    .sh-modal__foot { flex-direction: column-reverse !important }
    .sh-modal__btn { width: 100%; justify-content: center; min-height: 48px; padding: 13px !important }

    /* Setup modal */
    .sh-setup__hero { padding: 18px 18px !important; text-align: left }
    .sh-setup__hero h2 { font-size: 17px !important }
    .sh-setup__body { padding: 18px !important }
    .sh-setup__sec { margin-bottom: 16px; padding-top: 14px }
    .sh-setup__chip { padding: 11px 16px !important; min-height: 44px !important }
    .sh-setup__foot {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 16px !important;
    }
    .sh-setup__foot > div { display: flex; gap: 8px }
    .sh-setup__btn { flex: 1; justify-content: center; min-height: 48px }
    .sh-setup__foot-info {
        text-align: center; order: -1;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--color-line, #f1f5f9);
    }

    /* Tour modal */
    .sh-tour__hero { padding: 22px 20px 18px !important }
    .sh-tour__body { padding: 18px 20px !important }
    .sh-tour__foot { padding: 14px 20px 18px !important; flex-direction: column-reverse !important }
    .sh-tour__btn, .sh-tour__btn--ghost {
        width: 100%; justify-content: center; min-height: 46px;
    }
}

@media (max-width: 480px) {
    .sh-sum__stats { grid-template-columns: repeat(2, 1fr) !important }
}

/* ============================================================================
   /shadowing/drill — Pattern drill (drill.php)
   ============================================================================ */
@media (max-width: 540px) {
    .dr-hero { padding: 14px 16px !important }
    .dr-hero h1 { font-size: 17px !important }
    .dr-focus__text { font-size: 16px !important }
    .dr-back { padding: 8px 0; font-size: 14px; min-height: 36px; display: inline-flex; align-items: center }
}

@media (max-width: 640px) {
    .dr-list__item {
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        min-height: 54px !important;
    }
    .dr-list { max-height: 380px !important }
}

@media (max-width: 980px) {
    /* Disable sticky sidebar on tablet+mobile (sidebar already drops below) */
    .dr-layout > div[style*="position:sticky"],
    .dr-layout > div[style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }
}

/* ============================================================================
   /shadowing/history — Lịch sử (history.php)
   ============================================================================ */
@media (max-width: 540px) {
    .hs-hero { padding: 14px 16px !important }
    .hs-hero h1 { font-size: 17px !important }
    .hs-back { padding: 8px 0 !important; font-size: 14px !important; min-height: 36px }
    .hs-pat-row {
        grid-template-columns: 90px 1fr 40px !important;
        gap: 8px !important;
        font-size: 12.5px;
    }
    .hs-pat-row a { font-size: 13px }
}

@media (max-width: 480px) {
    /* Stats: 7→2 cột mobile (override @780 rule that gives 3) */
    .hs-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important }
    .hs-stat { padding: 12px 8px !important }
    .hs-stat__num { font-size: 22px !important }
    .hs-stat__lbl { font-size: 10.5px !important }
}

@media (max-width: 640px) {
    /* P0: attempts table → stack card (was overflow-x at 290px+gaps) */
    .hs-att {
        grid-template-columns: 60px 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 8px 10px !important;
        padding: 10px !important;
        align-items: center !important;
    }
    .hs-att__thumb { grid-row: 1 / 3 !important; width: 60px !important; height: 34px !important }
    .hs-att__info  { grid-column: 2; grid-row: 1 }
    .hs-att__progress {
        grid-column: 2; grid-row: 2;
        font-size: 11px !important;
        display: flex !important;
        justify-content: space-between;
        color: var(--color-muted, #64748b);
    }
    .hs-att__score { grid-column: 3; grid-row: 1 / 3; font-size: 18px !important; min-width: 44px; text-align: center }
    .hs-att > div:last-child:not(.hs-att__score):not(.hs-att__progress):not(.hs-att__info):not(.hs-att__thumb) {
        display: none;
    }
}

/* ============================================================================
   /shadowing/print — Bản in (print.php) — chỉ screen, không touch @print
   ============================================================================ */
@media screen and (max-width: 640px) {
    .pr-page { margin: 12px auto !important; max-width: 100% !important }
    .pr-cover { padding: 20px !important }
    .pr-cover__grid { grid-template-columns: 1fr !important; gap: 16px !important }
    .pr-qr { max-width: 160px; margin: 0 auto }
    .pr-bilingual { grid-template-columns: 1fr !important }
    .pr-bilingual > div + div {
        border-top: 1px solid var(--p-border, var(--color-border));
        padding-top: 8px; margin-top: 8px;
    }
}

@media screen and (max-width: 540px) {
    .pr-cover__title { font-size: 20px !important }
    .pr-guide { grid-template-columns: repeat(2, 1fr) !important }
}