/* Screen typography: readable body copy, usable controls, and room for wrapping. */
@media screen {
    body { line-height: 1.6; }
    .app-shell { max-width: 1280px; }
    .school-ribbon { height: 34px; letter-spacing: .7px; }
    .school-ribbon svg { width: 19px; height: 19px; }
    .header { height: 96px; gap: 16px; }
    .nav a { padding: 11px 10px; gap: 7px; }
    .nav svg { width: 23px; height: 23px; }
    .header-actions .button { padding: 12px 16px; min-height: 46px; }
    .button { min-height: 46px; line-height: 1.4; }
    .hero.school-hero { height: 380px; }
    .school-hero .eyebrow { letter-spacing: .8px; line-height: 1.5; }
    .school-hero h1 { line-height: 1.16; margin-bottom: 16px; }
    .school-hero p { line-height: 1.6; margin-bottom: 22px; }
    .hero-cta.button { min-height: 51px; padding: 12px 19px; }
    .school-hero .hero-note { line-height: 1.5; }
    .hero-steps { width: 178px; top: 49px; gap: 20px; }
    .hero-step { padding: 13px 9px; gap: 8px; }
    .hero-step strong { line-height: 1.3; }
    .hero-step small { line-height: 1.5; }
    .step-number { width: 27px; height: 27px; }
    .search-box { height: 60px; }
    .search-box input { line-height: 1.5; }
    .search-submit { width: 46px; height: 46px; }
    .category { min-height: 46px; padding: 10px 15px; gap: 9px; }
    .category svg { width: 23px; height: 23px; }
    .categories { padding-top: 16px; padding-bottom: 17px; }
    .section-eyebrow,.eyebrow { line-height: 1.5; letter-spacing: .8px; }
    .catalog-heading h2 { line-height: 1.25; }
    .catalog-heading p { line-height: 1.6; color: #526d83; }
    .count-badge { display: inline-flex; align-items: center; line-height: 1.4; padding: 4px 8px; }
    .resource-heading { min-height: 106px; padding-top: 20px; padding-bottom: 20px; }
    .resource-heading>div { min-width: 0; }
    .resource-heading h2 { line-height: 1.25; margin-bottom: 6px; }
    .resource-heading p { line-height: 1.55; color: #526f82; }
    .resource-heading-icon { width: 48px; height: 48px; }
    .resource-heading-icon svg { width: 33px; height: 33px; }
    .section-plane { flex-shrink: 0; }
    .card-icon { width: 42px; height: 42px; }
    .card-icon svg { width: 27px; height: 27px; }
    .card-content { padding-top: 27px; padding-bottom: 11px; }
    .card-category { line-height: 1.45; margin-bottom: 7px; }
    .card-content h3 { line-height: 1.35; min-height: 0; margin-bottom: 11px; }
    .card-content p { line-height: 1.6; min-height: 0; margin-bottom: 20px; color: #526b80; }
    .card-button { height: auto; min-height: 44px; padding: 9px 10px; line-height: 1.4; }
    .card-button svg { width: 18px; height: 18px; }
    .tag { line-height: 1.3; padding: 5px 8px; max-width: calc(100% - 14px); white-space: normal; }
    .resource-footer { gap: 13px; padding: 13px 15px; flex-wrap: wrap; }
    .resource-footer>span { line-height: 1.5; max-width: none; flex: 1 1 280px; }
    .resource-footer>a { min-height: 44px; line-height: 1.4; padding: 11px 15px; white-space: normal; }
    .resource-footer>a svg { width: 19px; height: 19px; flex-shrink: 0; }
    .sidebar { gap: 20px; }
    .welcome h3 { line-height: 1.3; }
    .welcome p { line-height: 1.5; color: #59788d; }
    .stat { padding-top: 14px; padding-bottom: 14px; }
    .stat small { line-height: 1.5; color: #567287; }
    .aside-heading { flex-wrap: wrap; row-gap: 8px; }
    .aside-heading h3 { line-height: 1.4; }
    .aside-heading a { line-height: 1.5; }
    .recent-empty h4 { line-height: 1.4; }
    .recent-empty p { line-height: 1.6; max-width: none; color: #617b8d; }
    .recent-empty .button { min-height: 44px; padding: 11px 14px; }
    .recent-item strong { line-height: 1.4; }
    .recent-item small { line-height: 1.5; }
    .inspiration h3 { line-height: 1.25; }
    .inspiration p { line-height: 1.6; color: #836d4c; }
    .inspiration>a { line-height: 1.5; }
    .footer { gap: 25px; padding-top: 33px; padding-bottom: 33px; }
    .footer-brand p { line-height: 1.6; color: #617b8f; }
    .footer nav { line-height: 1.6; gap: 10px; }
    .footer>span { line-height: 1.7; color: #617b8f; }
    .back-link { line-height: 1.5; }
    .tool-heading h1,.library-heading h1 { line-height: 1.25; }
    .tool-heading p,.library-heading p { line-height: 1.6; }
    .mode-badge { line-height: 1.5; padding: 9px 13px; }
    .studio-layout { grid-template-columns: 380px minmax(0,1fr); }
    .settings-panel h2,.result-toolbar h2 { line-height: 1.4; }
    .settings-panel label,.auth-form label { line-height: 1.5; margin-bottom: 20px; }
    .settings-panel input,.settings-panel select,.settings-panel textarea,.auth-form input { line-height: 1.5; min-height: 49px; padding: 12px; }
    .optional { line-height: 1.5; color: #657d8f; }
    .info-note { line-height: 1.65; padding: 15px; }
    .generate-button { min-height: 50px; }
    .form-caption,.result-footnote { line-height: 1.6; color: #62798c; }
    .result-toolbar { flex-wrap: wrap; row-gap: 10px; }
    .preview-label { line-height: 1.5; }
    .preview-empty h3 { line-height: 1.35; }
    .preview-empty p,.generation-loading p { line-height: 1.7; color: #617b8e; }
    .result-panel { min-width: 0; }
    .paper-wrap { min-width: 0; }
    #result-content,#result-editor { line-height: 1.8; }
    #studio[data-tool="sopas"] #result-content,
    #studio[data-tool="laberintos"] #result-content { white-space: pre; overflow-x: auto; }
    .result-actions .button { min-height: 45px; padding: 11px 14px; }
    .error-message,#generation-error,.flash { line-height: 1.6; }
    .auth-form { max-width: 440px; }
    .auth-form h1 { line-height: 1.25; }
    .auth-form>p { line-height: 1.6; }
    .auth-form .button { min-height: 51px; }
    .auth-art h2 { line-height: 1.3; }
    .auth-art p { line-height: 1.7; }
    .library-tabs { line-height: 1.5; flex-wrap: wrap; align-items: center; gap: 18px; }
    .resource-type { line-height: 1.5; }
    .library-card h2 { line-height: 1.35; }
    .library-card p { line-height: 1.6; }
    .material-actions .button,.material-actions .text-link,.delete-link { line-height: 1.5; min-height: 42px; }
    .empty-state h2,.empty-state h3 { line-height: 1.35; }
    .empty-state p { line-height: 1.65; }
    .plans-page h1 { line-height: 1.25; }
    .plans-page>p { line-height: 1.65; }
    .plan-grid h2 { line-height: 1.3; }
    .plan-grid p { line-height: 1.6; }
    .plan-grid ul { line-height: 1.7; }
    .plan-grid li { margin-bottom: 10px; }
    .quiz-preview h3 { line-height: 1.3; }
    .quiz-preview legend { line-height: 1.5; }
    .quiz-preview label { line-height: 1.5; min-height: 44px; }
    .answer-feedback { line-height: 1.6; }
    .quiz-score { line-height: 1.5; }
    .slide-canvas h3 { line-height: 1.25; }
    .slide-canvas p { line-height: 1.7; }
    .slide-controls { flex-wrap: wrap; }
    .slide-controls button { min-height: 44px; }
    .toast { line-height: 1.5; }
}

@media screen and (max-width:1250px) {
    .header { height: auto; min-height: 138px; flex-wrap: wrap; padding: 9px 0 14px; column-gap: 15px; row-gap: 8px; }
    .header .brand { order: 1; }
    .header-actions { order: 2; margin-left: auto; }
    .header .nav { order: 3; flex-basis: 100%; justify-content: center; gap: 14px; }
    .nav a svg { display: block; }
    .school-hero .hero-copy { margin-left: 29%; width: 51%; }
    .hero-steps { width: 160px; }
    .hero-step>svg { width: 27px; height: 27px; }
    .sidebar { grid-template-columns: 1fr 1fr; }
    .inspiration { display: none; }
}
@media screen and (max-width:1050px) {
    .studio-layout { grid-template-columns: minmax(0,1fr); }
    .auth-layout { gap: 30px; padding-inline: 1%; }
    .school-hero .hero-copy { margin-left: 32%; width: 68%; padding-right: 20px; }
    .hero-character { width: 34%; }
    .hero-steps { display: none; }
    .generator-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}
@media screen and (max-width:850px) {
    .header { height: 88px; min-height: 88px; flex-wrap: nowrap; padding: 0; }
    .header .nav { display: none; position: absolute; top: 82px; left: 0; right: 0; padding: 13px; justify-content: flex-start; }
    .header .nav.open { display: flex; }
    .nav a { padding: 12px; }
    .school-hero .hero-copy { margin-left: 31%; width: 69%; }
    .resource-footer>span { flex-basis: 200px; }
    .sidebar { grid-template-columns: 1fr; }
    .teacher-space { width: 100%; }
    .footer { grid-template-columns: 1.3fr 1fr; }
    .footer>span { grid-column: 1/-1; text-align: left; }
}
@media screen and (max-width:650px) {
    .school-ribbon { height: 32px; letter-spacing: .3px; }
    .school-ribbon svg { width: 16px; height: 16px; }
    .header { height: 82px; min-height: 82px; }
    .header-actions .account { min-height: 44px; padding: 10px 13px; }
    .menu-button { width: 40px; min-height: 44px; padding: 8px; }
    .header .nav { top: 77px; }
    .hero.school-hero { height: 460px; }
    .school-hero .hero-copy { width: 100%; margin: 0; padding: 24px 17px; }
    .school-hero .eyebrow { line-height: 1.5; letter-spacing: .5px; }
    .school-hero h1 { max-width: none; line-height: 1.15; }
    .school-hero p { max-width: none; line-height: 1.6; margin-bottom: 23px; }
    .hero-cta.button { min-height: 48px; padding: 11px 13px; gap: 7px; }
    .hero-cta svg { width: 18px; height: 18px; }
    .school-hero .hero-note { max-width: 150px; line-height: 1.5; }
    .hero-character { width: 165px; height: 165px; bottom: 4px; right: -18px; }
    .search-box { height: 58px; }
    .search-submit { width: 43px; height: 43px; }
    .category { min-height: 44px; padding: 10px 13px; }
    .category svg { width: 22px; height: 22px; }
    .section-heading.catalog-heading { flex-wrap: wrap; row-gap: 12px; padding-top: 20px; padding-bottom: 22px; }
    .catalog-heading>div { width: 100%; }
    .catalog-heading h2 { line-height: 1.3; }
    .catalog-heading p { max-width: none; line-height: 1.6; }
    .catalog-heading>.text-link { margin: 0; }
    .resource-heading { min-height: 0; padding-top: 20px; padding-bottom: 20px; align-items: flex-start; gap: 10px; }
    .resource-heading-icon { width: 35px; height: 39px; }
    .resource-heading-icon svg { width: 27px; height: 27px; }
    .resource-heading h2 { max-width: none; line-height: 1.25; }
    .resource-heading p { max-width: none; line-height: 1.6; }
    .generator-grid { gap: 10px; }
    .card-content { padding: 24px 6px 9px; }
    .card-category { line-height: 1.4; }
    .card-content h3 { min-height: 0; line-height: 1.35; }
    .card-content p { min-height: 0; line-height: 1.55; margin-bottom: 15px; }
    .card-icon { width: 35px; height: 35px; }
    .card-icon svg { width: 22px; height: 22px; }
    .card-button { min-height: 44px; padding: 9px 6px; gap: 4px; }
    .card-button svg { width: 15px; height: 15px; }
    .tag { line-height: 1.3; padding: 4px 6px; }
    .resource-footer { padding: 13px 11px; gap: 10px; }
    .resource-footer>span { line-height: 1.5; max-width: none; flex-basis: calc(100% - 40px); }
    .resource-footer>a { margin-left: 0; width: 100%; min-height: 45px; justify-content: center; padding: 10px; }
    .sidebar { padding: 15px; gap: 20px; }
    .stats { gap: 8px; }
    .footer { gap: 22px; padding: 25px 18px; grid-template-columns: 1fr; }
    .footer nav { gap: 11px; }
    .tool-heading { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: start; gap: 12px; }
    .tool-heading>div { grid-column: 2; }
    .tool-heading .tool-symbol { grid-column: 1; grid-row: 1; }
    .tool-heading .mode-badge { grid-column: 1/-1; justify-self: start; max-width: 100%; }
    .tool-heading .mode-badge { margin-left: 0; }
    .settings-panel { padding: 20px 17px; }
    .result-toolbar { padding: 18px 16px; }
    .result-actions { gap: 9px; }
    .result-actions .button { padding: 10px 12px; }
    #result-content { padding: 20px 12px; }
    .library-heading { flex-wrap: wrap; row-gap: 14px; }
    .library-heading .button { margin-top: 0; }
    .library-tabs { gap: 14px; }
}
@media screen and (max-width:365px) {
    .brand { width: 150px; }
    .header-actions .account { padding: 10px 11px; }
    .hero.school-hero { height: 505px; }
    .hero-character { width: 145px; height: 145px; right: -14px; }
    .generator-grid { gap: 8px; }
    .field-pair { grid-template-columns: 1fr; gap: 0; }
}

/* One scale for every screen: text 16, supporting text 14, component titles 18. */
@media screen {
    :root {
        --type-body: 1rem;
        --type-caption: .875rem;
        --type-component: 1.125rem;
        --type-section: 1.625rem;
        --type-page: 2rem;
        --type-hero: clamp(2rem, 3vw, 2.5rem);
        --text-line: 1.6;
        --heading-line: 1.3;
    }
    html { font-size: 16px; }
    body { font-size: var(--type-body); font-weight: 500; line-height: var(--text-line); }
    h1 { font-size: var(--type-page); font-weight: 900; line-height: var(--heading-line); }
    h2 { font-size: var(--type-section); font-weight: 900; line-height: var(--heading-line); }
    h3,h4 { font-size: var(--type-component); font-weight: 900; line-height: var(--heading-line); }

    /* Paragraphs and descriptions carry equal visual weight across components. */
    .school-hero p,
    .catalog-heading p,
    .resource-heading p,
    .card-content p,
    .resource-footer>span,
    .welcome p,
    .recent-empty p,
    .inspiration p,
    .footer-brand p,
    .footer>span,
    .tool-heading p,
    .library-heading p,
    .preview-empty p,
    .generation-loading p,
    .auth-form>p,
    .auth-art p,
    .library-card p,
    .empty-state p,
    .library-empty p,
    .plans-page>p,
    .plan-grid p,
    .plan-grid ul,
    .slide-canvas p,
    .info-note,
    .error-message,
    #generation-error,
    .flash,
    .toast {
        font-size: var(--type-body);
        font-weight: 500;
        line-height: var(--text-line);
    }
    .catalog-heading p,.resource-heading p,.card-content p,
    .recent-empty p,.tool-heading p,.library-heading p,
    .preview-empty p,.auth-form>p,.footer-brand p,.footer>span {
        color: #526b80;
    }

    /* Navigation, actions and form values use the same size on mobile and desktop. */
    .nav a,.header .nav a,
    .header-actions .button,.header-actions .account,
    .button,.hero-cta.button,.generate-button,
    .text-link,.catalog-heading>.text-link,
    .category,.card-button,.resource-footer>a,
    .aside-heading a,.recent-empty .button,.inspiration>a,
    .footer nav,.back-link,.result-toolbar .text-link,
    .result-actions .button,.auth-form .button,.auth-switch a,
    .library-heading .button,.library-tabs,.library-tabs form button,
    .material-actions .button,.material-actions .text-link,.delete-link,
    .slide-controls button,.slide-controls span,.quiz-score {
        font-size: var(--type-body);
        font-weight: 800;
        line-height: 1.4;
    }
    .nav a,.header .nav a,.footer nav,.back-link { font-weight: 700; }
    .search-box input,
    .settings-panel input,.settings-panel select,.settings-panel textarea,
    .auth-form input,.quiz-preview label {
        font-size: var(--type-body);
        font-weight: 500;
        line-height: var(--text-line);
    }
    .settings-panel label,.auth-form label,.quiz-preview legend {
        font-size: var(--type-body);
        font-weight: 800;
        line-height: 1.5;
    }
    #result-content,#result-editor { font-size: var(--type-body); line-height: 1.8; }

    /* Supporting labels remain readable and share one size. */
    .school-ribbon,.eyebrow,.section-eyebrow,
    .school-hero .eyebrow,.plans-page .eyebrow,
    .card-category,.resource-type,.tag,.count-badge,
    .stat small,.recent-item small,
    .mode-badge,.tool-heading .mode-badge,
    .optional,.preview-label,.form-caption,.result-footnote,
    .hero-step small,.school-hero .hero-note,.answer-feedback {
        font-size: var(--type-caption);
        line-height: 1.5;
        letter-spacing: 0;
    }
    .school-ribbon,.eyebrow,.section-eyebrow,.card-category,
    .resource-type,.tag,.count-badge { font-weight: 800; }
    .optional,.form-caption,.result-footnote,.hero-step small,
    .school-hero .hero-note,.answer-feedback { font-weight: 500; }

    /* Hierarchy comes from the role, not a different size in each component. */
    .school-hero h1 { font-size: var(--type-hero); line-height: 1.15; }
    .tool-heading h1,.library-heading h1,.auth-form h1,.plans-page h1,
    .slide-canvas h3 {
        font-size: var(--type-page);
        font-weight: 900;
        line-height: var(--heading-line);
    }
    .catalog-heading h2,.resource-heading h2,.auth-art h2 {
        font-size: var(--type-section);
        font-weight: 900;
        line-height: var(--heading-line);
    }
    .card-content h3,.welcome h3,.aside-heading h3,.recent-empty h4,
    .inspiration h3,.settings-panel h2,.result-toolbar h2,
    .preview-empty h3,.library-card h2,
    .empty-state h2,.empty-state h3,.library-empty h2,
    .plan-grid h2,.quiz-preview h3 {
        font-size: var(--type-component);
        font-weight: 900;
        line-height: var(--heading-line);
    }
    .hero-step strong,.recent-item strong {
        font-size: var(--type-body);
        font-weight: 800;
        line-height: 1.4;
    }
    .stat strong { font-size: var(--type-section); font-weight: 900; }
    .step-number { font-size: var(--type-caption); }
    .card-content h3,.card-content p { overflow-wrap: anywhere; }
    .category { min-height: 46px; }
    .tag { max-width: calc(100% - 14px); }
    .school-hero .hero-note { max-width: 180px; }
    .footer nav { font-weight: 700; }
}
@media screen and (max-width:650px) {
    :root { --type-page: 1.875rem; --type-section: 1.5rem; }
    .resource-footer>a { font-size: var(--type-body); }
    .hero.school-hero { height: 490px; }
    .school-hero .hero-note { max-width: 160px; }
    .school-hero .eyebrow { max-width: 100%; }
    .school-ribbon { height: auto; min-height: 37px; padding: 5px 8px; text-align: center; }
    .school-ribbon svg { flex-shrink: 0; }
    .resource-heading { align-items: flex-start; }
    .hero-cta.button { padding-inline: 10px; }
}
@media screen and (max-width:380px) {
    .generator-grid { grid-template-columns: minmax(0,1fr); }
    .hero.school-hero { height: 545px; }
    .card-content { padding-left: 11px; padding-right: 11px; }
    .school-hero .hero-note { max-width: 150px; }
}