/**
 * 星忆伴 · 全端自适应壳层
 * 覆盖：手机 / iPad / Windows / Mac（含横竖屏与安全区）
 * 由 jyb-mobile-shell.css、teacher-shell.css 引入；也可单独挂载。
 */

:root {
    --jyb-r-phone: 28rem;      /* ~max-w-md */
    --jyb-r-tablet: 42rem;     /* iPad 竖屏舒适栏 */
    --jyb-r-desktop: 52rem;    /* 笔记本 / 桌面 */
    --jyb-r-wide: 64rem;       /* 大屏 */
    --jyb-r-gutter: 1rem;
    --jyb-r-gutter-md: 1.5rem;
    --jyb-r-gutter-lg: 2rem;
}

/* —— 基础防溢出与视口 —— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    width: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    min-height: 100vh;
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 媒体默认不撑破布局；固定尺寸图标不受影响 */
img,
video,
canvas {
    max-width: 100%;
}

svg.icon,
svg[class*="icon"],
img.icon,
img[class*="w-"],
img[class*="h-"],
img[class*="size-"] {
    max-width: none;
}

/* —— iPad / 平板（竖屏与横屏） —— */
@media (min-width: 768px) {
    :root {
        --jyb-r-gutter: var(--jyb-r-gutter-md);
    }

    /* 常见内容栏：手机 max-w-md → 平板加宽 */
    .max-w-md {
        max-width: var(--jyb-r-tablet) !important;
    }
    .max-w-lg {
        max-width: 48rem !important;
    }
    .max-w-2xl {
        max-width: 56rem !important;
    }

    /* 无 max-w 的主内容区：居中 + 限宽，避免桌面拉成细长条 */
    main.app-main:not([class*="max-w-"]),
    .app-main.app-main--home:not([class*="max-w-"]) {
        max-width: var(--jyb-r-tablet);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* 底栏内导航居中对齐内容栏 */
    .app-footer .bottom-nav,
    footer.app-footer > nav.bottom-nav,
    footer.app-footer > .bottom-nav {
        max-width: var(--jyb-r-tablet);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* sticky / fixed 顶栏若自带 max-w-md，同步加宽 */
    header.max-w-md,
    .app-header.max-w-md,
    header[class*="max-w-md"] {
        max-width: var(--jyb-r-tablet) !important;
    }

    header.app-header.fixed,
    .app-header.fixed.top-0,
    header.app-header[class*="fixed"] {
        padding-left: max(1.5rem, calc(50% - 21rem), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.5rem, calc(50% - 21rem), env(safe-area-inset-right, 0px)) !important;
    }

    /* 表格 / 卡片网格在平板更疏一些 */
    .sto-stat-grid,
    .pto-stat-grid {
        gap: 0.75rem;
    }
}

/* —— 桌面 Windows / Mac（≥1024） —— */
@media (min-width: 1024px) {
    :root {
        --jyb-r-gutter: var(--jyb-r-gutter-lg);
    }

    .max-w-md {
        max-width: 48rem !important;
    }
    .max-w-lg {
        max-width: 56rem !important;
    }
    .max-w-2xl {
        max-width: var(--jyb-r-wide) !important;
    }

    main.app-main:not([class*="max-w-"]),
    .app-main.app-main--home:not([class*="max-w-"]) {
        max-width: 48rem;
    }

    .app-footer .bottom-nav,
    footer.app-footer > nav.bottom-nav,
    footer.app-footer > .bottom-nav {
        max-width: 48rem;
    }

    header.max-w-md,
    .app-header.max-w-md,
    header[class*="max-w-md"] {
        max-width: 48rem !important;
    }

    /* 固定顶栏：背景全宽，内容居中到与主栏同宽 */
    header.app-header.fixed,
    .app-header.fixed.top-0,
    header.app-header[class*="fixed"] {
        padding-left: max(2rem, calc(50% - 24rem), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(2rem, calc(50% - 24rem), env(safe-area-inset-right, 0px)) !important;
    }

    /* 桌面鼠标：可点区域略放大，避免细小触控按钮 */
    .bottom-nav a,
    .bottom-nav button,
    .nav-tab {
        min-height: 2.75rem;
    }
}

/* —— 大屏（≥1280） —— */
@media (min-width: 1280px) {
    .max-w-md {
        max-width: var(--jyb-r-desktop) !important;
    }
    .max-w-lg {
        max-width: 60rem !important;
    }
    .max-w-2xl {
        max-width: 72rem !important;
    }

    main.app-main:not([class*="max-w-"]),
    .app-main.app-main--home:not([class*="max-w-"]) {
        max-width: var(--jyb-r-desktop);
    }

    .app-footer .bottom-nav,
    footer.app-footer > nav.bottom-nav,
    footer.app-footer > .bottom-nav {
        max-width: var(--jyb-r-desktop);
    }

    header.max-w-md,
    .app-header.max-w-md,
    header[class*="max-w-md"] {
        max-width: var(--jyb-r-desktop) !important;
    }

    header.app-header.fixed,
    .app-header.fixed.top-0,
    header.app-header[class*="fixed"] {
        padding-left: max(2rem, calc(50% - 26rem), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(2rem, calc(50% - 26rem), env(safe-area-inset-right, 0px)) !important;
    }
}

/* —— 教师端 page-gutter 内容栏在宽屏居中 —— */
@media (min-width: 768px) {
    .app-header-bar,
    .app-bottom-nav-inner {
        max-width: 72rem;
    }
}

@media (min-width: 1024px) {
    .app-main > .page-gutter,
    .app-main .page-gutter:first-child {
        max-width: 72rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* —— 登录 / 注册 / 入口页：宽屏居中卡片 —— */
@media (min-width: 768px) {
    body.jyb-auth-page,
    body.login-page,
    html:has(main.max-w-md) body {
        /* 保持背景铺满 */
    }

    main.max-w-md {
        width: 100%;
    }
}

/* 习作标准：子页内容铺满（用户说「和习作一样」时套 body.jyb-xizuo-layout） */
@media (min-width: 600px) {
    body.jyb-xizuo-layout header.app-header,
    body.jyb-xizuo-layout header.bind-page-header,
    body.jyb-xizuo-layout header.settings-header,
    body.jyb-xizuo-layout header.fav-header,
    body.jyb-xizuo-layout .app-header.fixed,
    body.jyb-xizuo-layout .app-header.sticky {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        box-sizing: border-box;
    }

    body.jyb-xizuo-layout header .max-w-lg,
    body.jyb-xizuo-layout header .max-w-md {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.jyb-xizuo-layout main,
    body.jyb-xizuo-layout .bind-main,
    body.jyb-xizuo-layout .settings-main,
    body.jyb-xizuo-layout .fav-main,
    body.jyb-xizuo-layout .app-main {
        max-width: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        padding-left: calc(1rem + 1em) !important;
        padding-right: calc(1rem + 1em) !important;
        padding-top: calc(var(--jyb-header-total, 3.25rem) + 0.75rem) !important;
        box-sizing: border-box;
    }

    body.jyb-xizuo-layout main#parent-today-overview {
        padding-top: calc(var(--jyb-header-total, 3.5rem) + 0.875rem) !important;
    }

    body.jyb-xizuo-layout:not(.jyb-xizuo-layout--sticky-footer) main,
    body.jyb-xizuo-layout:not(.jyb-xizuo-layout--sticky-footer) .bind-main,
    body.jyb-xizuo-layout:not(.jyb-xizuo-layout--sticky-footer) .settings-main,
    body.jyb-xizuo-layout:not(.jyb-xizuo-layout--sticky-footer) .fav-main {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.jyb-xizuo-layout--sticky-footer .bind-main {
        padding-bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.jyb-xizuo-layout .sx-footer {
        padding-left: calc(1rem + 1em) !important;
        padding-right: calc(1rem + 1em) !important;
    }

    body.jyb-xizuo-layout .sx-footer-inner {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 学情研判 / 情绪 / 优势科目：全屏弹层同样铺满 */
    .emotion-modal-header,
    .weak-modal-header,
    .good-subject-modal-header,
    .heat-detail-modal-header {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        box-sizing: border-box;
    }

    .emotion-modal-body,
    .weak-modal-body,
    .good-subject-modal-body,
    .heat-detail-modal-body {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: calc(1rem + 1em) !important;
        padding-right: calc(1rem + 1em) !important;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
    }

    body:has(.app-footer) .emotion-modal-body,
    body:has(.app-footer) .weak-modal-body,
    body:has(.app-footer) .good-subject-modal-body,
    body:has(.app-footer) .heat-detail-modal-body {
        padding-bottom: var(--jyb-body-pad-bottom, calc(5.25rem + 1.25rem + env(safe-area-inset-bottom, 0px))) !important;
    }
}

/* 家长端习作 / 我的：中间内容跟随成长页铺满，不锁 max-w-md；顶栏不改 */
@media (min-width: 600px) {
    body.parent-zhijia-page header.app-header {
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    body.parent-zhijia-page .app-header-bar {
        width: 100%;
        max-width: min(56rem, calc(100vw - 2rem));
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem;
        min-width: 0;
    }

    /* 顶栏保持原 px-container-padding，不被平板通用 inset 改掉 */
    body.parent-school-xl header.app-header.fixed,
    body.parent-school-xl .app-header.fixed.top-0,
    body.parent-profile-page header.app-header.fixed,
    body.parent-profile-page .app-header.fixed.top-0 {
        padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important;
        overflow: visible !important;
    }

    body.parent-school-xl header.app-header.fixed a[aria-label="消息"],
    body.parent-school-xl header.app-header.fixed a[aria-label="档案"],
    body.parent-school-xl header.app-header.fixed a[aria-label="关联"] {
        flex-shrink: 0 !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* 与成长页一致：中间内容铺满，不锁 42/56rem 窄栏 */
    body.parent-school-xl main.app-main,
    body.parent-profile-page main.app-main {
        max-width: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        padding-left: calc(1rem + 1em) !important;
        padding-right: calc(1rem + 1em) !important;
        box-sizing: border-box;
    }

    body.parent-zhijia-page main.zhijia-main {
        left: 50% !important;
        right: auto !important;
        width: min(56rem, calc(100vw - 2rem)) !important;
        max-width: min(56rem, calc(100vw - 2rem)) !important;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box;
    }
}

@media (min-width: 1024px) {
    body.parent-zhijia-page .app-header-bar,
    body.parent-zhijia-page main.zhijia-main {
        width: min(64rem, calc(100vw - 2.5rem)) !important;
        max-width: min(64rem, calc(100vw - 2.5rem)) !important;
    }
}

/* 学生端 · 成长 / 习作 / 我的 / 概况 / 档案：对齐家长端习作标准，平板铺满勿锁窄栏 */
@media (min-width: 600px) {
    body.student-home-page header.app-header.fixed,
    body.student-home-page .app-header.fixed.top-0,
    body.student-school-xl header.app-header.fixed,
    body.student-school-xl .app-header.fixed.top-0,
    body.student-profile-page header.app-header.fixed,
    body.student-profile-page .app-header.fixed.top-0,
    body.student-archive-page header.app-header.fixed,
    body.student-archive-page .app-header.fixed.top-0 {
        padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important;
        overflow: visible !important;
    }

    body.student-home-page .app-header-bar,
    body.student-school-xl .app-header-bar,
    body.student-profile-page .app-header-bar,
    body.student-archive-page .app-header-bar {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    body.student-home-page main.app-main,
    body.student-home-page main.app-main.max-w-md,
    body.student-school-xl main.app-main,
    body.student-school-xl main.app-main.max-w-md,
    body.student-profile-page main.app-main,
    body.student-profile-page main.app-main.max-w-md,
    body.student-archive-page main.app-main,
    body.student-archive-page main.app-main.max-w-md {
        max-width: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        padding-left: calc(1rem + 1em) !important;
        padding-right: calc(1rem + 1em) !important;
        box-sizing: border-box;
    }

    /* 今日概况：铺满，勿 32/56rem 居中柱 */
    body.student-overview-page .jyb-page-header {
        padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important;
    }

    body.student-overview-page .jyb-page-header-inner,
    body.student-overview-page .jyb-page-main {
        max-width: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: calc(1rem + 1em) !important;
        padding-right: calc(1rem + 1em) !important;
        box-sizing: border-box;
    }

    /* 星忆智家：与家长端一致 56rem 居中柱 */
    body.student-zhijia-page header.app-header {
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    body.student-zhijia-page .app-header-bar,
    body.student-zhijia-page header.app-header > .max-w-lg,
    body.student-zhijia-page header.app-header > div {
        width: 100%;
        max-width: min(56rem, calc(100vw - 2rem)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    body.student-zhijia-page main.zhijia-main {
        max-width: min(56rem, calc(100vw - 2rem)) !important;
        width: min(56rem, calc(100vw - 2rem)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box;
    }
}

@media (min-width: 1024px) {
    body.student-zhijia-page .app-header-bar,
    body.student-zhijia-page header.app-header > .max-w-lg,
    body.student-zhijia-page header.app-header > div,
    body.student-zhijia-page main.zhijia-main {
        width: min(64rem, calc(100vw - 2.5rem)) !important;
        max-width: min(64rem, calc(100vw - 2.5rem)) !important;
    }
}

@media (orientation: landscape) and (min-width: 700px) {
    body.parent-school-xl .practice-usage-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.85rem 1.5rem;
        align-items: stretch;
    }

    body.parent-school-xl .practice-usage-grid > section {
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    body.parent-school-xl .practice-usage-grid .practice-usage-card {
        flex: 1 1 auto;
        box-sizing: border-box;
    }
}

/* —— 手机横屏：顶栏必须躲开状态栏；底栏留白略减 —— */
@media (orientation: landscape) and (max-height: 560px) {
    :root {
        --jyb-header-pad-top: calc(var(--jyb-safe-top, 0px) + var(--jyb-safe-shift, 0px) + 0.35rem);
        --jyb-header-total: calc(var(--jyb-safe-top, 0px) + var(--jyb-safe-shift, 0px) + 3.75rem);
        --jyb-footer-pad-bottom: calc(var(--jyb-safe-bottom) + 0.12rem);
        --jyb-bottom-nav-bar: 3.15rem;
    }

    .app-header,
    header.app-header {
        padding-bottom: 0.25rem;
    }

    .bottom-nav {
        padding-top: 0.25rem;
        padding-bottom: 0.15rem;
    }
}

/* —— 指针设备（鼠标 / 触控板）：悬停反馈，不影响触屏 —— */
@media (hover: hover) and (pointer: fine) {
    a.zhijia-entry:hover,
    .soft-card:hover,
    .device-card:hover {
        filter: brightness(0.985);
    }

    button:not(:disabled):hover,
    a.nav-tab:hover,
    .bottom-nav a:hover {
        opacity: 0.92;
    }
}

/* —— 减少动效（系统无障碍偏好） —— */
@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;
    }
}

/* —— 打印：去掉固定底栏遮挡 —— */
@media print {
    .app-footer,
    .app-bottom-nav,
    .bottom-nav,
    footer.fixed,
    .fixed.bottom-0 {
        display: none !important;
    }

    body {
        padding: 0 !important;
    }

    main,
    .app-main {
        max-width: none !important;
        padding: 0 !important;
    }
}