/*
 * Mobile layout layer
 * Loaded after the feature stylesheets.  The rules here intentionally avoid
 * changing the desktop layout and concentrate all small-screen behaviour in
 * one place.
 */

@media (max-width: 768px) {
    :root {
        --mobile-gutter: clamp(10px, 3.8vw, 20px);
        --mobile-radius: 18px;
        --mobile-header-height: 64px;
    }

    html {
        width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: calc(var(--mobile-header-height) + 12px);
    }

    body,
    body.learner-mode {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        background-size: 18px 18px;
        font-size: 16px;
    }

    img,
    svg,
    video,
    iframe,
    canvas,
    audio {
        max-width: 100%;
    }

    img,
    svg,
    video,
    iframe,
    canvas {
        height: auto;
    }

    p,
    h1,
    h2,
    h3,
    strong,
    small,
    label,
    legend,
    a,
    button,
    td,
    th {
        overflow-wrap: anywhere;
    }

    button,
    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }

    button,
    select,
    input:not([type="checkbox"]):not([type="radio"]),
    .primary,
    .secondary {
        min-height: 44px;
    }

    .admin-tabs::-webkit-scrollbar,
    .report-tabs::-webkit-scrollbar,
    .track-tabs::-webkit-scrollbar,
    .writing-modes::-webkit-scrollbar,
    .vocabulary-grade-tabs::-webkit-scrollbar {
        display: none;
    }

    main,
    .learner-mode main {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 20px var(--mobile-gutter) max(58px, calc(38px + env(safe-area-inset-bottom)));
    }

    footer,
    .learner-mode footer {
        padding: 20px var(--mobile-gutter) max(20px, env(safe-area-inset-bottom));
        font-size: 14px;
    }

    body.is-fullscreen main,
    body.learner-mode.is-fullscreen main {
        min-height: calc(100dvh - var(--mobile-header-height));
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }

    /* Shared headings and actions. */
    .back {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        margin: 0 0 14px;
        padding: 7px 2px;
    }

    .page-heading {
        width: 100%;
        margin: 5px auto 24px;
        padding-inline: 2px;
    }

    .page-heading h1,
    .section-title h2,
    .admin-head h1 {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.08;
    }

    .page-heading p,
    .section-title p {
        margin: 7px 0;
        line-height: 1.5;
    }

    .section-title {
        width: 100%;
        align-items: flex-start;
        gap: 10px;
        margin: 30px 0 14px;
    }

    .section-title > * {
        min-width: 0;
    }

    .streak {
        flex: 0 0 auto;
        padding: 9px 11px;
        font-size: 13px;
    }

    .notice {
        width: 100%;
        padding: 13px 14px;
        border-radius: 12px;
        line-height: 1.45;
    }

    .actions {
        width: 100%;
        gap: 10px;
    }

    .actions > *,
    .actions form,
    .actions form button {
        width: 100%;
    }

    /* Home, library, grades and subjects. */
    .hero,
    .learner-mode .metro-welcome {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(72px, 25%);
        gap: 12px;
        align-items: center;
        padding: 25px 20px;
        border-radius: var(--mobile-radius);
    }

    .hero > div:first-child {
        min-width: 0;
        position: relative;
        z-index: 2;
    }

    .hero h1,
    .learner-mode .metro-welcome h1 {
        margin: 8px 0;
        font-size: clamp(29px, 8.7vw, 39px);
        line-height: 1.02;
    }

    .hero p {
        margin: 8px 0 0;
        font-size: 15px;
        line-height: 1.4;
    }

    .hero .mascot,
    .learner-mode .hero .mascot {
        width: 100%;
        height: auto;
        min-width: 0;
        align-self: center;
        font-size: clamp(58px, 18vw, 95px);
    }

    .hero .mascot-sticker,
    .learner-mode .hero .mascot-sticker {
        width: min(100%, 125px);
        aspect-ratio: 1;
    }

    .hero .mascot-sticker img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .hero::after {
        width: 180px;
        height: 180px;
        right: -70px;
        top: -55px;
        border-width: 32px;
    }

    .library-grid,
    .library-grade-grid,
    .subject-grid,
    .learner-mode .metro-subject-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .library-grid .library-card:first-child,
    .learner-mode .metro-subject-tile.metro-tile-wide {
        grid-column: auto;
    }

    .library-card {
        min-height: 205px;
        padding: 24px 21px;
        border-radius: var(--mobile-radius);
    }

    .library-card strong {
        max-width: 82%;
        font-size: 25px;
    }

    .library-art {
        top: 18px;
        right: 20px;
        font-size: 48px;
    }

    .learner-mode .metro-grade-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 160px;
        gap: 10px;
    }

    .learner-mode .metro-grade-grid .grade-card,
    .learner-mode .metro-grade-grid .metro-tile-wide {
        min-width: 0;
        grid-column: auto;
        padding: 16px !important;
    }

    .learner-mode .metro-grade-grid .grade-icon {
        top: 12px;
        right: 12px;
        font-size: 35px;
    }

    .learner-mode .metro-grade-grid .grade-icon img {
        width: 65px;
        height: 65px;
    }

    .learner-mode .metro-grade-grid strong,
    .learner-mode .metro-grade-grid .metro-tile-wide strong {
        font-size: clamp(34px, 10vw, 43px) !important;
    }

    .grade-card {
        min-width: 0;
    }

    .learner-mode .metro-language-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .learner-mode .metro-language-grid a,
    .learner-mode .metro-language-grid .metro-tile-wide {
        min-width: 0;
        min-height: 125px !important;
        grid-column: auto;
        padding: 15px !important;
    }

    .learner-mode .metro-language-grid b {
        max-width: 85%;
        font-size: 20px;
        line-height: 1.05;
    }

    .learner-mode .metro-language-grid i {
        top: 10px;
        right: 12px;
        font-size: 31px;
    }

    .subject-card,
    .learner-mode .metro-subject-tile {
        width: 100%;
        min-height: 145px !important;
        padding: 19px !important;
        border-radius: var(--mobile-radius) !important;
    }

    .learner-mode .metro-subject-tile h2 {
        max-width: calc(100% - 35px);
        font-size: 25px;
    }

    .learner-mode .metro-subject-tile i {
        width: 52px;
        height: 52px;
        font-size: 29px;
    }

    .course-level {
        margin: 22px 0 32px;
    }

    .course-level-title {
        align-items: flex-start;
        gap: 10px;
    }

    .course-level-title > span {
        font-size: 34px;
    }

    .locked-book,
    .handwriting-promo {
        align-items: flex-start;
        gap: 13px;
        padding: 17px;
        border-radius: var(--mobile-radius);
    }

    .locked-book > span,
    .handwriting-promo > span {
        flex: 0 0 auto;
        font-size: 35px;
    }

    .handwriting-promo > b {
        width: 100%;
    }

    /* Chapters and lesson lists. */
    .chapter-block {
        width: 100%;
        min-width: 0;
        margin: 22px 0 36px;
    }

    .chapter-head,
    .learner-mode .chapter-head {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-left: 13px !important;
        margin-bottom: 13px;
    }

    .chapter-head h2 {
        margin: 2px 0;
        font-size: clamp(24px, 7vw, 30px);
        line-height: 1.12;
    }

    .mode-actions,
    .learner-mode .mode-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 0;
    }

    .mode-actions a,
    .mode-actions .mode-locked,
    .learner-mode .mode-actions a,
    .learner-mode .mode-actions .mode-locked {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 8px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 12px;
        line-height: 1.15;
        white-space: normal;
    }

    .lesson-list,
    .learner-mode .lesson-list {
        width: 100%;
        max-width: none;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .lesson-row,
    .learner-mode .lesson-row {
        width: 100%;
        min-width: 0;
        min-height: 0;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 11px;
        align-items: start;
        padding: 15px 13px;
        border-radius: 16px;
    }

    .lesson-row > div:nth-child(2) {
        min-width: 0;
    }

    .lesson-number {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 22px;
    }

    .lesson-row h2 {
        margin: 2px 0 4px;
        font-size: clamp(19px, 5.7vw, 23px);
        line-height: 1.17;
    }

    .lesson-row p {
        font-size: 14px;
        line-height: 1.4;
    }

    .lesson-state {
        grid-column: 2;
        justify-self: start;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 5px 0;
        font-size: 14px;
    }

    .lesson-stars {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 6px;
    }

    .lesson-stars span {
        font-size: 20px;
    }

    .lesson-page,
    .quiz,
    .sticker-page,
    .reward-shop,
    .handwriting-page {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .lesson-head h1 {
        margin: 6px 0;
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.1;
    }

    .lesson-head p {
        line-height: 1.45;
    }

    .video {
        width: 100%;
        margin: 18px 0;
        border-radius: 16px;
    }

    .video iframe {
        width: 100%;
        height: 100%;
    }

    .lesson-content {
        width: 100%;
        padding: 18px 16px;
        border-radius: var(--mobile-radius);
        font-size: 17px;
        line-height: 1.62;
    }

    .lesson-content h2 {
        font-size: 25px;
        line-height: 1.16;
    }

    .lesson-content pre,
    .lesson-content code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .lesson-content table,
    main table {
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lesson-reading {
        width: 100%;
        margin: 17px 0;
        border-radius: var(--mobile-radius);
    }

    .lesson-reading summary {
        min-height: 52px;
        padding: 14px 15px;
        display: flex;
        align-items: center;
        font-size: 17px;
    }

    .lesson-page form .primary {
        width: 100%;
    }

    .saved-audio {
        width: 100%;
        padding: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        border-radius: 14px;
    }

    .saved-audio audio,
    .audio-question {
        width: 100%;
        min-width: 0;
    }

    /* Visual lesson and picture-first questions. */
    .visual-lesson {
        width: 100%;
        min-width: 0;
        margin: 17px 0;
        padding: 16px 12px;
        border-radius: var(--mobile-radius);
    }

    .visual-title {
        margin-bottom: 16px;
    }

    .visual-title h2 {
        font-size: clamp(24px, 7vw, 31px);
        line-height: 1.12;
    }

    .picture-equation,
    .word-builder,
    .place-value,
    .story-strip,
    .speech-scene,
    .object-math,
    .edu-visual {
        width: 100%;
        min-width: 0;
        gap: 8px;
        padding: 12px 8px;
    }

    .object-group,
    .picture-equation .object-group {
        max-width: 100%;
        min-width: 0;
        gap: 3px;
        padding: 8px;
    }

    .object-token,
    .object-group span {
        width: auto;
        min-width: 31px;
        height: auto;
        font-size: clamp(28px, 9vw, 39px);
    }

    .object-sign,
    .picture-equation strong {
        flex: 0 0 auto;
        font-size: clamp(27px, 8vw, 39px);
    }

    .shape-board,
    .life-board,
    .picture-words {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .shape-board > div,
    .life-board > div,
    .picture-words > div {
        min-width: 0;
        min-height: 112px;
        padding: 9px;
        border-radius: 15px;
    }

    .life-board span,
    .picture-words span,
    .story-strip span,
    .speech-scene > span {
        font-size: 41px;
    }

    .number-track {
        width: 100%;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
    }

    .number-track span {
        min-width: 0;
        border-radius: 9px;
        font-size: 17px;
    }

    .ten-frame {
        width: min(100%, 270px);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
    }

    .ten-frame span {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        font-size: 29px;
    }

    .place-value > div,
    .edu-place > div {
        flex: 1 1 88px;
        min-width: 0;
        padding: 12px 7px;
        border-radius: 14px;
    }

    .place-value strong,
    .edu-place strong {
        font-size: 36px;
    }

    .letter-card,
    .syllable-card {
        min-width: 64px;
        padding: 12px;
        border-radius: 14px;
        font-size: 37px;
    }

    .sentence-puzzle span,
    .sentence-puzzle strong {
        padding: 9px 11px;
        font-size: 18px;
    }

    .edu-object-group {
        max-width: 100%;
        flex-wrap: wrap;
        padding: 6px;
    }

    .edu-object-group span {
        font-size: 25px;
    }

    .edu-clock {
        width: min(58vw, 180px);
        height: auto;
        aspect-ratio: 1;
    }

    .edu-grid {
        width: min(100%, calc(var(--cols) * 42px));
        max-width: 100%;
        grid-template-columns: repeat(var(--cols), minmax(10px, 42px));
    }

    .edu-grid i {
        width: auto;
        height: auto;
        aspect-ratio: 1;
    }

    .edu-shape {
        max-width: 45vw;
    }

    .edu-bar {
        width: 100%;
    }

    .edu-bar > * {
        min-width: 0;
        padding: 14px 7px;
        font-size: 20px;
    }

    /* Quizzes, exams and interactive controls. */
    .quiz-head {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px 12px;
        margin-bottom: 8px;
    }

    .quiz-head .back {
        margin: 0;
    }

    .quiz-head > span {
        margin-left: auto;
        font-size: 12px;
        text-align: right;
    }

    .quiz > h1 {
        margin: 12px 0 20px;
        font-size: clamp(29px, 8vw, 38px);
        line-height: 1.08;
    }

    .quiz-timer {
        top: calc(var(--mobile-header-height) + env(safe-area-inset-top));
        width: 100%;
        max-width: none;
        margin: 7px auto 15px;
        padding: 10px 13px;
        border-radius: 11px;
    }

    .quiz-timer span {
        min-width: 0;
        font-size: 13px;
    }

    .quiz-timer b {
        flex: 0 0 auto;
        font-size: 23px;
    }

    fieldset,
    .quiz fieldset {
        width: 100%;
        min-width: 0;
        margin: 18px 0;
        padding: 12px 11px 13px;
        border-radius: var(--mobile-radius);
    }

    legend,
    .quiz legend {
        width: auto;
        max-width: 100%;
        padding: 0 4px;
        font-size: clamp(19px, 5.8vw, 23px);
        line-height: 1.22;
        white-space: normal;
    }

    legend small {
        margin-bottom: 3px;
        font-size: 10px;
        line-height: 1.25;
    }

    .question-topic {
        width: fit-content;
        max-width: 100%;
        margin-bottom: 5px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .question-main {
        font-size: clamp(19px, 5.8vw, 23px);
        line-height: 1.22;
    }

    fieldset label,
    .quiz fieldset label {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        align-items: center;
        gap: 9px;
        margin: 8px 0;
        padding: 11px 10px;
        border-radius: 13px;
        line-height: 1.3;
    }

    fieldset label > span,
    .quiz fieldset label > span {
        flex: 0 0 34px;
    }

    .answer-input input {
        min-width: 0;
        width: 100% !important;
        font-size: 17px !important;
    }

    .task-hint {
        margin: 10px 2px;
        font-size: 14px;
    }

    body .sort-zone {
        width: 100%;
        min-width: 0;
        gap: 7px;
        padding: 10px;
    }

    body .sort-card {
        max-width: 100%;
        min-height: 45px;
        padding: 9px 12px;
        white-space: normal;
        font-size: 16px;
        touch-action: manipulation;
    }

    body .match-row {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    .match-row > strong,
    .match-row > select {
        min-width: 0;
    }

    .match-row select {
        width: 100%;
        padding: 9px 7px;
    }

    .quiz > .primary {
        width: 100%;
        position: sticky;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 4;
        margin-top: 12px;
    }

    .difficulty-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .difficulty-card {
        min-height: 132px;
        padding: 15px;
        border-radius: var(--mobile-radius);
        gap: 5px;
    }

    .difficulty-card i {
        font-size: 42px;
    }

    .difficulty-card strong {
        font-size: 25px;
    }

    .result {
        width: 100%;
        max-width: none;
        margin: 15px auto;
        padding: 25px 16px;
        border-radius: 22px;
    }

    .result-icon {
        font-size: 55px;
    }

    .result h1 {
        margin: 5px;
        font-size: clamp(40px, 13vw, 55px);
    }

    .scorebar {
        margin: 20px 5px;
    }

    .result-stars span {
        font-size: 36px;
    }

    /* Login and role selection. */
    .role-landing {
        width: 100%;
        padding: 10px 0 20px !important;
    }

    .role-landing h1 {
        margin: 7px 0 !important;
        font-size: clamp(31px, 9vw, 40px) !important;
        line-height: 1.08 !important;
    }

    .role-grid {
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 13px !important;
        margin: 23px auto !important;
    }

    .role-grid a {
        min-height: 0;
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }

    .role-grid i {
        font-size: 52px !important;
    }

    .role-grid h2 {
        margin: 6px !important;
        font-size: 27px !important;
    }

    .login-wrap {
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        margin: 5px auto 20px;
    }

    .login-mascot {
        font-size: 60px;
        line-height: 1;
    }

    .login-card {
        width: 100%;
    }

    /* Parent/admin navigation, lists, filters, reports and forms. */
    .admin-head {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }

    .admin-head > * {
        min-width: 0;
    }

    .admin-head h1 {
        margin: 4px 0;
    }

    .admin-head > .primary {
        width: 100%;
        text-align: center;
    }

    .admin-tabs,
    .report-tabs,
    .track-tabs,
    .writing-modes,
    .vocabulary-grade-tabs {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .admin-tabs {
        margin: 18px 0;
    }

    .admin-tabs a,
    .report-tabs a,
    .track-tabs a,
    .writing-modes button,
    .vocabulary-grade-tabs a {
        flex: 0 0 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 13px;
        white-space: nowrap;
    }

    .editor,
    .reward-editor {
        width: 100%;
        max-width: none;
        padding: 18px 15px;
        border-radius: var(--mobile-radius);
    }

    .editor h1 {
        font-size: 29px;
        line-height: 1.12;
    }

    .editor label,
    .reward-editor label {
        min-width: 0;
    }

    .editor input,
    .editor textarea,
    .editor select,
    .reward-editor input,
    .parent-reward-card input {
        width: 100%;
        min-width: 0;
        padding: 12px;
    }

    .two {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .learner-grade-picker {
        width: 100%;
        min-width: 0;
        padding: 12px;
    }

    .learner-grade-picker > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .curriculum-filter {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 15px !important;
    }

    .curriculum-filter .primary,
    .curriculum-filter .clear-filter {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .table {
        width: 100%;
        min-width: 0;
        display: grid;
        gap: 9px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .table > div {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 7px 9px;
        align-items: center;
        padding: 14px 12px;
        border: 2px solid #eee9ff;
        border-radius: 14px;
        background: #fff;
    }

    .table > div > strong {
        min-width: 0;
        line-height: 1.3;
    }

    .table > div > small {
        min-width: 0;
        grid-column: 2 / -1;
        line-height: 1.35;
    }

    .table > div > a,
    .table > div button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    .table > .empty-row {
        display: block;
        padding: 24px 14px;
    }

    .learner-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .learner-card {
        width: 100%;
        min-width: 0;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 12px;
        padding: 15px;
        border-radius: var(--mobile-radius);
    }

    .learner-card > div:nth-child(2) {
        min-width: 0;
    }

    .learner-card h2 {
        margin: 2px 0;
        font-size: 22px;
        line-height: 1.15;
    }

    .learner-card p {
        line-height: 1.4;
    }

    .learner-avatar-image {
        width: 56px;
        height: 56px;
    }

    .learner-card > a {
        grid-column: 2;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .learner-mini-stats {
        gap: 5px;
    }

    .learner-mini-stats span {
        padding: 5px 7px;
        font-size: 11px;
    }

    .learner-report-head {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .learner-report-head h1 {
        font-size: clamp(31px, 9vw, 41px);
        line-height: 1.08;
    }

    .current-sticker {
        width: 100%;
        min-width: 0;
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .current-sticker img {
        width: 64px;
        height: 64px;
    }

    .report-tabs {
        margin: 16px 0 20px;
    }

    .report-stat-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .report-stat-grid > div {
        min-width: 0;
        padding: 13px 6px;
        border-radius: 14px;
    }

    .report-stat-grid b {
        font-size: 29px;
    }

    .star-breakdown {
        justify-content: flex-start;
        gap: 7px;
        margin: 13px 0 20px;
    }

    .star-breakdown span {
        padding: 7px 10px;
        font-size: 13px;
    }

    .report-panel {
        width: 100%;
        min-width: 0;
        padding: 15px 12px;
        border-radius: var(--mobile-radius);
    }

    .report-panel-title,
    .sticker-summary {
        width: 100%;
        min-width: 0;
        align-items: flex-start;
        gap: 10px;
    }

    .report-panel-title h2,
    .sticker-summary h2 {
        font-size: 24px;
        line-height: 1.15;
    }

    .chapter-filters {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .chapter-filters > span,
    .chapter-filters button {
        min-width: 0;
        text-align: center;
        white-space: normal;
    }

    .chapter-report {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .chapter-report article {
        min-width: 0;
        padding: 13px;
    }

    .chapter-report-top {
        gap: 8px;
    }

    .chapter-report-top > div {
        min-width: 0;
    }

    .chapter-facts {
        display: flex;
        gap: 6px;
    }

    .vocab-report > div {
        min-width: 0;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        padding: 11px;
    }

    .vocab-report > div > strong {
        grid-column: 2;
    }

    .sticker-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sticker-summary img {
        width: 78px;
        height: 78px;
    }

    .learning-history article {
        width: 100%;
        min-width: 0;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    .history-score {
        grid-column: 2;
        text-align: left;
    }

    .profile-editor .editor {
        margin: 8px 0 0;
    }

    /* Reward shop and sticker collection. */
    .reward-hero {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 23px 18px;
        border-radius: var(--mobile-radius);
    }

    .reward-hero h1 {
        margin: 3px 0;
        font-size: clamp(33px, 10vw, 44px);
        line-height: 1.06;
    }

    .point-wallet {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 14px;
    }

    .point-wallet b {
        font-size: 44px;
    }

    .reward-shop > h2 {
        margin: 27px 0 12px;
        font-size: 27px;
    }

    .reward-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .reward-card {
        min-width: 0;
        padding: 19px;
        border-radius: var(--mobile-radius);
    }

    .reward-card p {
        min-height: 0;
    }

    .reward-card form,
    .reward-card form button {
        width: 100%;
    }

    .reward-fields,
    .parent-reward-card .reward-fields {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .reward-fields label:last-child {
        grid-column: auto;
    }

    .parent-reward-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .parent-reward-card {
        min-width: 0;
        padding: 14px;
    }

    .redemption-list > div {
        min-width: 0;
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
    }

    .redemption-list form,
    .redemption-list button {
        width: 100%;
    }

    .sticker-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: 18px;
    }

    .sticker-card {
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
    }

    .sticker-card h2 {
        margin: 3px;
        font-size: 17px;
        line-height: 1.15;
    }

    .sticker-card .primary,
    .sticker-card .secondary {
        width: 100%;
        padding: 9px 6px;
        font-size: 13px;
    }

    /* Daily vocabulary.  Extra body specificity overrides its view-local CSS. */
    body .vocabulary-grade-tabs {
        justify-content: flex-start !important;
        margin: 0 auto 14px !important;
    }

    body .vocabulary-grade-tabs a {
        padding: 9px 14px !important;
    }

    body .vocab-stack {
        width: 100%;
        max-width: none;
        gap: 11px;
    }

    body .vocab-card {
        width: 100%;
        min-width: 0;
        padding: 20px 13px;
        border-radius: var(--mobile-radius);
    }

    body .vocab-card h2 {
        margin: 6px;
        font-size: clamp(38px, 13vw, 48px);
        line-height: 1.2;
    }

    body .vocab-card .pinyin {
        font-size: 20px;
    }

    body .vocab-card .meaning {
        margin: 9px 4px;
        font-size: 19px;
    }

    body .vocab-card > button,
    body .handwriting-inline {
        min-height: 44px;
        margin: 7px 3px;
        padding: 9px 12px;
    }

    body .vocab-card > div:last-child {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 7px;
    }

    body .vocab-card .mark {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 11px 6px;
    }

    /* Handwriting on a touch phone/tablet. */
    .handwriting-heading {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 11px;
        margin: 9px 0 15px;
    }

    .handwriting-heading h1 {
        margin: 4px 0;
        font-size: clamp(27px, 8vw, 36px);
        line-height: 1.1;
    }

    .writing-progress {
        width: 100%;
        padding: 10px 14px;
        border-radius: 14px;
    }

    .writing-progress b {
        display: inline;
        margin-right: 5px;
        font-size: 24px;
    }

    .track-tabs,
    .writing-modes {
        margin: 10px 0;
    }

    .writing-workspace {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .writing-model,
    .writing-practice {
        width: 100%;
        min-width: 0;
        padding: 14px;
        border-radius: var(--mobile-radius);
    }

    .writing-model {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(92px, .7fr);
        align-items: center;
        gap: 3px 10px;
        text-align: left;
    }

    .writing-model > small,
    .writing-model > .model-style-note,
    .writing-model > b,
    .writing-model > p,
    .writing-model > .speak-button {
        grid-column: 1;
        margin-inline: 0;
    }

    .writing-model > .model-glyph {
        grid-column: 2;
        grid-row: 1 / span 5;
        min-height: 128px;
        font-size: 88px;
    }

    .vietnamese-writing .writing-model > .model-glyph {
        min-height: 135px;
        font-size: 76px;
    }

    .writing-model p {
        margin: 4px 0;
        font-size: 16px;
    }

    .speak-button {
        width: fit-content;
        min-height: 44px;
        padding: 9px 12px;
    }

    .writing-board {
        width: 100%;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 9 / 5;
        border-width: 2px;
        border-radius: 16px;
    }

    .writing-board canvas {
        width: 100%;
        height: 100%;
    }

    .pen-hint {
        max-width: 80%;
        padding: 8px 10px;
        text-align: center;
        font-size: 13px;
    }

    .writing-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 10px;
    }

    .writing-actions > * {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        padding: 9px 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .glyph-library {
        width: 100%;
        margin: 18px 0;
        padding: 14px;
        border-radius: var(--mobile-radius);
    }

    .glyph-library > div {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        max-height: 350px;
    }

    .glyph-library a {
        width: 100%;
        min-width: 0;
        min-height: 64px;
        padding: 4px;
        border-radius: 11px;
    }

    /* Batch audio controls and pagination. */
    body .batch-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body .batch-actions button {
        width: 100%;
    }

    .batch-progress {
        min-width: 0;
        padding: 14px;
    }

    nav[role="navigation"] {
        width: 100%;
        overflow-x: auto;
    }

    nav[role="navigation"] svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 520px) {
    body .match-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    body .match-row > span {
        display: none !important;
    }
}

@media (max-width: 480px) {
    :root {
        --mobile-gutter: 10px;
    }

    main,
    .learner-mode main {
        padding-top: 15px;
    }

    .hero,
    .learner-mode .metro-welcome {
        grid-template-columns: minmax(0, 1fr);
        padding: 21px 15px;
        text-align: center;
    }

    .hero .mascot,
    .learner-mode .hero .mascot,
    .hero .mascot-sticker,
    .learner-mode .hero .mascot-sticker {
        width: 88px;
        justify-self: center;
        grid-row: 1;
    }

    .hero .eyebrow {
        font-size: 10px;
        letter-spacing: 1.1px;
    }

    .hero h1,
    .learner-mode .metro-welcome h1 {
        font-size: clamp(27px, 8.8vw, 33px);
    }

    .hero p {
        font-size: 13px;
    }

    .section-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .streak {
        width: fit-content;
    }

    .learner-mode .metro-grade-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 138px;
        gap: 7px;
    }

    .learner-mode .metro-grade-grid .grade-card {
        padding: 12px !important;
    }

    .learner-mode .metro-grade-grid .grade-icon {
        font-size: 30px;
    }

    .learner-mode .metro-grade-grid .grade-card > span {
        font-size: 12px;
        padding-top: 8px;
    }

    .learner-mode .metro-language-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .learner-mode .metro-language-grid a {
        min-height: 104px !important;
    }

    .mode-actions,
    .learner-mode .mode-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .mode-actions a,
    .mode-actions .mode-locked,
    .learner-mode .mode-actions a,
    .learner-mode .mode-actions .mode-locked {
        min-height: 44px;
        padding: 9px;
        font-size: 13px;
    }

    .quiz-head > span {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    body .match-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    .match-row > span {
        display: none !important;
    }

    fieldset label > span,
    .quiz fieldset label > span {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }

    .chapter-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-panel-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .sticker-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .sticker-summary img {
        justify-self: center;
    }

    .writing-model {
        grid-template-columns: minmax(0, 1fr) 92px;
        padding: 12px;
    }

    .writing-model > .model-glyph,
    .vietnamese-writing .writing-model > .model-glyph {
        min-height: 112px;
        font-size: 64px;
    }

    .writing-modes button,
    .track-tabs a {
        padding: 9px 11px;
        font-size: 13px;
    }

    .glyph-library > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .glyph-library a {
        min-height: 62px;
    }

    body .batch-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact phone landscape: use the available width for learning content. */
@media (max-width: 920px) and (max-height: 560px) and (orientation: landscape) {
    main,
    .learner-mode main {
        padding-top: 13px;
    }

    .quiz-timer {
        top: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    }

    .difficulty-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .difficulty-card {
        min-height: 120px;
    }

    .handwriting-heading {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .writing-workspace {
        grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr);
    }

    .writing-model {
        display: block;
        text-align: center;
    }

    .writing-model > .model-glyph,
    .vietnamese-writing .writing-model > .model-glyph {
        min-height: 100px;
        font-size: 70px;
    }

}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}