/* =========================================================================
   MOBILE PREMIUM HOME — compact, single-glance dashboard for phones.

   Loaded LAST in index.html so it wins the cascade without needing !important
   on every rule. Only the two overrides that fight an existing !important
   (grid-column spans set in premium-ui.css) carry one.

   Goal: the whole home screen reads like one dense, deliberate surface —
   hero, three stats, AI teacher, then a 2-column tile board — instead of a
   tall stack of full-width blocks that takes three screens to scroll.
   ========================================================================= */

/* Desktop keeps its original rhythm; the inline margin was moved here so the
   mobile block below can compress it. */
.ai-teacher-card {
    margin-bottom: 20px;
}

/* The Custom Test action bar is fixed at the bottom and ~63px tall, so the
   last row of chapters used to sit underneath it at the end of the scroll. */
body[data-view="custom-test"] .scroll-content {
    padding-bottom: 88px;
}

@media (max-width: 900px) {

    .scroll-content {
        padding: var(--sp-3) var(--sp-3) var(--sp-6);
    }

    /* ── HERO ─────────────────────────────────────────────────────────── */

    .dash-hero.hero-panel {
        display: grid;
        gap: var(--sp-3);
        align-items: stretch;
        padding: var(--sp-4);
        margin-bottom: var(--sp-3);
        border-radius: 20px;
    }

    .dash-hero.hero-panel .eyebrow {
        margin-bottom: 4px;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .dash-hero.hero-panel h2 {
        margin: 0 0 4px;
        font-size: 1.36rem;
        line-height: 1.18;
    }

    .dash-hero.hero-panel p {
        font-size: 0.74rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Countdown becomes a single compact row: target + days on the left,
       the update pill parked on the right. */
    .exam-card {
        min-width: 0;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label action"
            "value action";
        column-gap: var(--sp-3);
        row-gap: 1px;
        align-items: center;
        padding: var(--sp-3);
        border-radius: 15px;
        box-shadow: none;
    }

    .exam-card span {
        grid-area: label;
        font-size: 0.63rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .exam-card strong {
        grid-area: value;
        font-size: 1.05rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .exam-card button {
        grid-area: action;
        align-self: center;
        padding: 7px 12px;
        font-size: 0.68rem;
    }

    /* ── STAT CARDS ───────────────────────────────────────────────────── */

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
        margin-bottom: var(--sp-3);
    }

    .stat-card {
        height: auto;
        min-height: 78px;
        padding: var(--sp-3);
        border-radius: 16px;
        justify-content: center;
    }

    /* Weakest Link carries a full sentence — give it the whole row. */
    .stat-card.stat-card-wide {
        grid-column: span 2 !important;
        min-height: 68px;
    }

    .stat-card .icon-box {
        top: 9px;
        right: 11px;
        font-size: 1.1rem;
        opacity: 0.3;
    }

    .stat-card .stat-info {
        min-width: 0;
        padding-right: 24px;
    }

    .stat-label {
        font-size: 0.58rem;
        letter-spacing: 0.07em;
    }

    .stat-value {
        margin: 3px 0 0;
        font-size: 1.3rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mini-progress {
        height: 3px;
        margin-top: 8px;
    }

    /* ── AI TEACHER ───────────────────────────────────────────────────── */

    .ai-teacher-card {
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-3);
        border-radius: 18px;
    }

    .ai-teacher-content {
        gap: var(--sp-3);
    }

    .ai-teacher-icon {
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.05rem;
        box-shadow: none;
    }

    .ai-teacher-text {
        min-width: 0;
    }

    .ai-teacher-text h3 {
        margin: 0 0 2px;
        font-size: 0.92rem;
    }

    .ai-teacher-text p {
        font-size: 0.68rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ai-teacher-arrow {
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    /* ── ACTION TILE BOARD ────────────────────────────────────────────── */

    .action-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
        margin-bottom: var(--sp-3);
    }

    .big-btn {
        grid-column: span 1 !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--sp-2);
        min-height: 104px;
        padding: var(--sp-3);
        border-radius: 18px;
    }

    .big-btn i {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .big-btn > div {
        width: 100%;
        min-width: 0;
    }

    /* Two lines are always reserved so every tile in the board lands on the
       same height, whether its label is "Saved Hub" or "Revision Through
       Mind Map". */
    .big-btn h4 {
        margin: 0 0 3px;
        font-size: 0.8rem;
        line-height: 1.2;
        min-height: 2.4em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .big-btn p {
        margin: 0;
        font-size: 0.655rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── SMART REVISION BANNER ────────────────────────────────────────── */

    .smart-revision-home-card {
        grid-column: span 2 !important;
        min-height: 0;
        padding: var(--sp-3) var(--sp-4);
        border-radius: 18px;
    }

    .srh-header {
        flex-wrap: nowrap;
        gap: var(--sp-3);
        margin-bottom: 10px;
    }

    .srh-title-group {
        gap: var(--sp-3);
        min-width: 0;
    }

    .srh-icon-box {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .srh-title-group h3 {
        font-size: 0.86rem;
    }

    .srh-title-group p {
        margin-top: 2px;
        font-size: 0.66rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .srh-badge-launch {
        flex-shrink: 0;
        padding: 5px 9px;
        font-size: 0.62rem;
        gap: 4px;
    }

    .srh-badges-row {
        gap: var(--sp-2);
    }

    .rev-pill {
        padding: 4px 8px;
        font-size: 0.6rem;
        border-radius: 12px;
        white-space: nowrap;
    }

    /* ── RESULT PAGE ──────────────────────────────────────────────────────
       The result markup is inline-styled, so the overrides below need
       !important to land. Layout only — colours stay with the theme. */

    #result-view {
        padding: 12px !important;
    }

    .result-header-panel {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
        padding: 14px !important;
        border-radius: 16px;
    }

    #full-res-title {
        font-size: 1.05rem !important;
    }

    #full-res-date {
        font-size: 0.72rem !important;
    }

    /* Four wrapping full-width buttons became three rows of chrome; a
       2x2 grid of compact chips keeps the whole header under 130px. */
    .result-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }

    .result-actions .mock-btn {
        padding: 9px 8px !important;
        font-size: 0.72rem !important;
        border-radius: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* KPI board: hero score full width, the three gauges 3-up beneath it. */
    .result-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-3);
        align-items: stretch;
    }

    #result-view .stat-card {
        min-height: 0 !important;
        padding: 11px 6px !important;
        border-radius: 14px;
        gap: var(--sp-2);
    }

    /* Beats the `grid-column: span 1 !important` the dashboard cards above
       need — the hero score always takes the whole first row. */
    #result-view .stat-card.hero-score-card {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 16px;
        padding: 12px 14px !important;
        min-height: 0 !important;
    }

    .res-hero-label {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }

    #result-view .stat-card.hero-score-card .stat-label {
        font-size: 0.72rem !important;
        letter-spacing: 0.06em !important;
    }

    .res-kpi-ring {
        width: 58px !important;
        height: 58px !important;
        margin: 0 auto !important;
    }

    .res-kpi-ring-hero {
        width: 84px !important;
        height: 84px !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    #result-view .stat-card .stat-label {
        font-size: 0.6rem !important;
        margin-bottom: 0;
    }

    .res-kpi-sub {
        font-size: 0.58rem !important;
        line-height: 1.2;
    }

    #full-res-accuracy,
    #full-res-attempt-rate {
        font-size: 0.82rem !important;
    }

    #full-res-time-taken {
        font-size: 0.66rem !important;
    }

    #full-res-score {
        font-size: 1.1rem !important;
    }

    #lbl-res-score-status {
        font-size: 0.66rem !important;
        padding: 4px 10px !important;
    }

    .res-charts-row {
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    .res-chart-panel {
        padding: 13px !important;
        border-radius: 14px;
    }

    .res-chart-panel h4 {
        font-size: 0.86rem !important;
    }

    .res-main-donut {
        width: 118px !important;
        height: 118px !important;
    }

    #lbl-res-donut-acc {
        font-size: 1.1rem !important;
    }

    .res-chart-panel > div[style*="height: 150px"] {
        height: 120px !important;
    }

    .res-segments-card-container {
        padding: 13px !important;
        border-radius: 14px;
        margin-bottom: 16px !important;
    }

    .res-segments-card-container > h3 {
        font-size: 0.95rem !important;
        margin-bottom: 11px !important;
    }

    .segment-card {
        min-height: 96px;
        padding: 11px 8px;
        border-radius: 12px;
    }

    .res-q-summary {
        padding: 12px;
        gap: var(--sp-3);
    }

    .res-q-text {
        font-size: 0.82rem;
    }

    .res-q-detail {
        padding: 13px;
    }

    .res-opt-btn {
        padding: 10px 12px;
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    /* ── SMART REVISION HUB ──────────────────────────────────────────── */

    .rev-hub-header {
        gap: var(--sp-2);
    }

    .rev-hub-intro {
        font-size: 0.74rem;
        line-height: 1.4;
        min-width: 0 !important;
    }

    .rev-dashboard-card {
        padding: var(--sp-3) var(--sp-4);
        border-radius: 16px;
        margin-bottom: var(--sp-3);
    }

    /* Three stacked full-width metric boxes → one compact 3-up strip. */
    .rev-metrics-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-2);
    }

    .metric-box {
        padding: 10px 8px;
        border-radius: 12px;
        min-height: 0;
    }

    .metric-val {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .metric-val span {
        font-size: 0.62rem !important;
    }

    .metric-label {
        font-size: 0.56rem;
        line-height: 1.25;
        gap: 3px;
    }

    .metric-box .fa-chevron-right {
        display: none;
    }

    .chart-container-box {
        margin-top: 12px !important;
    }

    .chart-container-box h5 {
        font-size: 0.78rem !important;
    }

    #chart-sub-period {
        font-size: 0.62rem !important;
    }

    .chart-container-box > div[style*="height: 200px"] {
        height: 150px !important;
    }

    .drill-header-row {
        gap: var(--sp-2);
    }

    .drill-title {
        font-size: 0.86rem;
        line-height: 1.25;
    }

    .drill-sub {
        font-size: 0.66rem;
        line-height: 1.35;
    }

    .drill-progress-badge,
    .spaced-due-tag-pill {
        font-size: 0.62rem;
        padding: 4px 9px;
    }

    .drill-ratio-pills {
        gap: var(--sp-2);
    }

    .ratio-pill {
        font-size: 0.58rem;
        padding: 4px 8px;
    }

    .drill-actions-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }

    /* The desktop rule pins these at min-width:210px. Two of them plus the gap
       needs ~432px, so on a phone the second button was pushed straight out of
       the card and its label ran off the screen edge. */
    .btn-drill-practice,
    .btn-drill-test {
        min-width: 0;
        padding: 10px 8px;
        font-size: 0.68rem;
        border-radius: 11px;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .drill-actions-row > * {
        min-width: 0;
    }

    /* Seven stacked vault cards were over 1100px on their own. */
    .rev-vaults-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
    }

    .vault-card {
        padding: 12px;
        border-radius: 14px;
        min-height: 0;
    }

    .vault-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }

    .vault-badge {
        font-size: 0.6rem;
        padding: 3px 8px;
    }

    .rev-vaults-grid > *,
    .vault-body {
        min-width: 0;
    }

    .vault-body h4 {
        font-size: 0.78rem;
        line-height: 1.2;
        margin: 8px 0 3px;
        overflow-wrap: anywhere;
    }

    .vault-body p {
        font-size: 0.63rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
}

/* Narrow phones: the launch pill is the first thing to go, then the
   countdown label tightens. Everything stays 2-up. */
@media (max-width: 400px) {

    .dash-hero.hero-panel h2 {
        font-size: 1.26rem;
    }

    .big-btn {
        min-height: 100px;
        padding: 12px 11px;
    }

    .big-btn h4 {
        font-size: 0.76rem;
    }

    .big-btn p {
        font-size: 0.63rem;
    }

    .srh-badge-launch {
        display: none;
    }

    .rev-pill {
        font-size: 0.575rem;
        padding: 4px 7px;
    }
}

/* Touch feedback — premium-ui.css strips :hover lift on touch devices and
   narrows the transition list, so re-add transform here for :active only. */
@media (hover: none),
(max-width: 900px) {

    .big-btn,
    .stat-card,
    .ai-teacher-card,
    .smart-revision-home-card {
        transition: transform 0.14s ease, border-color 0.16s ease, background-color 0.16s ease !important;
        -webkit-tap-highlight-color: transparent;
    }

    .big-btn:active,
    .stat-card:active,
    .ai-teacher-card:active,
    .smart-revision-home-card:active {
        transform: scale(0.975);
    }

    .vault-card:active,
    .segment-card:active,
    .tm-card:active,
    .ct-card:active,
    .metric-box:active,
    .portal-exit-btn:active,
    .chapter-card-container:active {
        transform: scale(0.985);
    }
}

/* =========================================================================
   MOBILE SMOOTHNESS

   The app carries 49 backdrop-filter declarations. Each one forces the
   compositor to re-blur a layer on every frame it moves, which is the single
   biggest cause of scroll and drawer jank on mid-range phones. premium-ui.css
   already disables a handful; this removes the rest. The surfaces underneath
   are near-opaque anyway, so the visual loss on a phone is negligible.
   ========================================================================= */

@media (hover: none),
(max-width: 900px) {

    .modal,
    .modal-overlay,
    .modal-content,
    .ct-float-bar,
    .ct-modal-overlay,
    .ct-modal-box,
    .premium-auth-overlay,
    .auth-card,
    .ai-session-modal-backdrop,
    .question-grid-panel,
    .mobile-palette-drawer,
    .ai-chat-window,
    .global-ai-container,
    .rev-dashboard-card,
    .vault-card,
    .segment-card,
    .flashcard-container,
    .card-face,
    .note-card,
    .test-menu,
    .glass-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Scroll chaining makes an inner list drag the page behind it, which reads
       as stutter at the top and bottom of every drawer and modal. */
    .scroll-content,
    .sets-scroll-area,
    .mock-rp-grid,
    .question-grid-panel,
    .mobile-palette-drawer,
    .chat-body,
    .modal-content {
        overscroll-behavior: contain;
    }

    /* The sidebar animates transform on every open/close; promoting it once
       avoids a full repaint of a 340px-wide panel each time. */
    .sidebar {
        will-change: transform;
    }

    /* Deep, wide shadows are expensive to repaint while scrolling. */
    .big-btn,
    .stat-card,
    .vault-card,
    .segment-card,
    .rev-dashboard-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}