/* ═══════════════════════════════════════════════════════════
   墨泓斋 · 移动端公共层（261025-05）
   ───────────────────────────────────────────────────────────
   挂载点：由各站 core.js / app.js 自动引入，manage 与独立页直接
   <link> 引入；必须排在站内样式之后，靠同权重后到取胜。

   只做「窄屏才需要」的四件事：
   1. 不横向溢出；2. 长串文字省略后可点开看全文 + 复制；
   3. 宽表在 ≤720 转「一行一卡」；4. 触控与吸底条够得着。

   令牌一律带兜底色，管理端的 cc-* 版面里也能直接用。
   ═══════════════════════════════════════════════════════════ */

/* ---------- 一、不横向溢出 ---------- */

@media (max-width: 720px) {
    html,
    body {
        /* clip 不建滚动容器，页头吸顶仍然有效 */
        overflow-x: clip;
    }

    /* 长串与不可断词的内容不撑破容器 */
    .mz-prose,
    .doc,
    .cc-main,
    .cc-panel,
    .mz-card,
    .card,
    .panel {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* ---------- 二、省略 → 气泡看全文 + 复制 ---------- */

.mz-clip {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 行内用（键值对的值、表格单元格里的长串） */
.mz-clip--inline {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}

button.mz-clip,
a.mz-clip {
    padding: 2px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mz-clip:focus-visible,
[data-mz-clip]:focus-visible {
    outline: 2px solid var(--mz-accent, #0a6f7b);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 只有被截断时才给手型与下划虚线提示，不截断就看不出差别 */
[data-mz-clip] {
    cursor: pointer;
}

@media (hover: hover) {
    [data-mz-clip]:hover {
        color: var(--mz-accent, #0a6f7b);
    }
}

.mz-clip-pop {
    position: fixed;
    z-index: 65;
    width: min(330px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid var(--mz-line-strong, rgba(8, 25, 32, .22));
    border-radius: 12px;
    /* 261101：贴在正文上的小气泡，同样取浮层档，不露底字 */
    background: var(--mz-surface-float, var(--mz-flat, #fff));
    -webkit-backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    backdrop-filter: blur(var(--mz-blur-float, 48px)) saturate(var(--mz-blur-float-sat, 180%));
    box-shadow: 0 18px 40px -22px rgba(8, 34, 42, .55);
    text-align: left;
    white-space: normal;
}

.mz-clip-pop[hidden] { display: none; }

.mz-clip-pop__full {
    max-height: 40vh;
    overflow: auto;
    font-family: var(--mz-mono, inherit);
    font-size: .8rem;
    line-height: 1.7;
    color: var(--mz-ink, #08131a);
    word-break: break-all;
}

.mz-clip-pop__acts {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 9px;
}

.mz-clip-pop__acts button {
    min-height: 34px;
    padding: 5px 13px;
    border: 1px solid var(--mz-line, rgba(8, 25, 32, .12));
    border-radius: 999px;
    background: var(--mz-surface-comp);
    color: var(--mz-ink-2, #34454e);
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.mz-clip-pop__copy {
    border-color: var(--mz-accent-line, rgba(10, 111, 123, .4)) !important;
    background: var(--mz-accent-wash, rgba(10, 111, 123, .12)) !important;
    color: var(--mz-accent, #0a6f7b) !important;
}

.mz-clip-pop__copy.is-done { font-weight: 700; }

/* ---------- 三、宽表 → 一行一卡（≤720） ---------- */

@media (max-width: 720px) {
    table.mz-stack,
    table.mz-stack thead,
    table.mz-stack tbody,
    table.mz-stack tr,
    table.mz-stack td {
        display: block;
        width: auto;
    }

    table.mz-stack thead { display: none; }

    table.mz-stack tr {
        margin: 0 0 8px;
        padding: 10px 12px;
        border: 1px solid var(--mz-line, rgba(8, 25, 32, .12));
        border-radius: var(--mz-radius, 12px);
        background: var(--mz-surface-comp);
    }

    table.mz-stack tr:last-child { margin-bottom: 0; }

    table.mz-stack td {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: .86rem;
        line-height: 1.7;
        white-space: normal;
        word-break: break-word;
    }

    table.mz-stack td + td { margin-top: 6px; }

    table.mz-stack td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        font-family: var(--mz-mono, inherit);
        font-size: .62rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--mz-ink-4, #8497a0);
    }

    table.mz-stack td[data-label=""]::before,
    table.mz-stack td[data-label]:empty::before { display: none; }

    table.mz-stack td:empty { display: none; }

    /* 表里的小按钮整宽，别再挤成一条 */
    table.mz-stack td .cc-btn,
    table.mz-stack td .btn,
    table.mz-stack td .mz-btn {
        min-height: 36px;
    }
}

/* ---------- 四、键值对与信息行：标签在上 ---------- */

@media (max-width: 720px) {
    .mz-kv {
        display: block !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mz-kv dt {
        margin-top: 10px;
        margin-bottom: 2px;
    }

    .mz-kv dt:first-child { margin-top: 0; }

    .mz-kv dd { margin: 0; }
}

/* ---------- 五、触控区与吸底操作条 ---------- */

@media (max-width: 720px) {
    /* 页头三件套与面包屑：36 的小圆钮给到 40 的点击区 */
    .mz-theme-btn,
    .mz-burger,
    .mz-iconbtn,
    .ibtn,
    .drawer-btn,
    .cc-theme-btn,
    .cc-burger {
        min-width: 40px;
        min-height: 40px;
    }

    /* 吸底操作条：屏幕底部常驻，避开安全区。
       全站透明 —— 底色与模糊（--mz-glass + backdrop-filter）一律由主题层
       .hw__bar / .ex__foot 决定，这里只管位置、内边距、安全区，
       并把圆角与侧/下边框收平，让底边贴着屏幕是一条通栏。 */
    .hw__bar,
    .ex__foot,
    [data-mz-bar] {
        position: sticky;
        bottom: 0;
        z-index: 22;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
        border-inline: 0 !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
    }

    .hw__bar .btn,
    .ex__foot .btn,
    [data-mz-bar] .btn,
    [data-mz-bar] .mz-btn {
        min-height: 44px;
    }

    /* 表单控件：≥16px 才不会在 iOS 上被放大 */
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---------- 六、图片与长文 ---------- */

@media (max-width: 720px) {
    .mz-prose img,
    .doc img,
    .prose img {
        max-width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: contain;
    }

    .mz-prose table,
    .doc table,
    .prose table {
        font-size: .84rem;
    }
}

/* ---------- 七、弹窗：≤720 一律改底部 sheet ---------- */

@media (max-width: 720px) {
    /* 总站 MZ.dialog（.mz-dialog / .mz-dialog__panel）：底部弹出，卡片四角全圆 */
    .mz-dialog {
        place-items: end center;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .mz-dialog__panel,
    .mz-dialog__panel--wide,
    .mz-dialog__panel--read {
        width: 100%;
        max-width: 560px;
        max-height: 86vh;
        max-height: 86dvh;
        border-radius: 18px;
        border-bottom: 1px solid var(--mz-line);
    }

    .mz-dialog__head { padding: 15px 18px; }

    .mz-dialog__body { padding: 15px 18px; }

    .mz-dialog__foot {
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .mz-dialog__foot .btn,
    .mz-dialog__foot .mz-btn {
        flex: 1 1 auto;
        min-height: 44px;
    }

    /* 英语教研 MZUI.alert / confirm / prompt：底部弹出，四角全圆 */
    .mzui-mask {
        align-items: flex-end !important;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .mzui-box {
        width: 100% !important;
        max-width: 480px !important;
        max-height: 86vh;
        max-height: 86dvh;
        overflow: auto;
        border-radius: 18px !important;
    }

    .mzui-bar {
        gap: 10px !important;
        margin-top: 14px !important;
    }

    .mzui-btn {
        flex: 1 1 auto;
        min-height: 44px !important;
    }
}

/* 栅格与弹性子项一律允许收缩：长标题、长编号、长按钮都不许把列撑出屏幕。
   只在窄屏生效，桌面版式不受影响。 */
@media (max-width: 900px) {
    main,
    main *,
    .wrap,
    .wrap *,
    .tz-page,
    .tz-page *,
    .wb-main,
    .wb-main *,
    .cc-main,
    .cc-main *,
    .inv,
    .inv * {
        min-width: 0;
    }

    /* 长串（编号、路径、邮箱、无空格混排）优先换行，不优先溢出 */
    main p,
    main li,
    main dd,
    main h1,
    main h2,
    main h3,
    .wrap p,
    .wrap li,
    .tz-page p,
    .tz-page li {
        overflow-wrap: break-word;
    }
}

/* 窄屏下两列以上的栅格统一收成一列，且列宽可被内容压到 0 */
@media (max-width: 720px) {
    .entry,
    .sites,
    .tz-grid,
    .tz-grid--2,
    .quick-grid,
    .quick-grid--3,
    .mz-social-grid,
    .course-hero,
    .audience,
    .split {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 纵向堆叠的卡片之间留出间距（只对块级堆叠生效，
   栅格里的卡片由各自容器的 gap 负责，不能在这里加外边距） */
.mz-side__block + .mz-side__block {
    margin-top: 18px;
}

.course-panel + .sec,
.course-hero + .sec,
main > .course-panel + section {
    margin-top: 20px;
}

/* 页头圆形按钮：窄屏统一尺寸（40×40 正圆），头像、搜索、外观、汉堡一个规格 */
@media (max-width: 760px) {
    .uchip > span:not(.uchip__ph),
    .mz-user__name,
    .mz-user__caret,
    .mz-user > span:not(.mz-avatar):not(.mz-avatar-fallback),
    .wb-mine .mine-txt {
        display: none !important;
    }

    .mz-theme-btn,
    .mz-iconbtn,
    .mz-burger,
    .mz-search,
    .mz-search__icon,
    .ibtn,
    .drawer-btn,
    .uchip,
    .mz-user,
    .mz-user__btn,
    .wb-mine .mine {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        gap: 0;
        max-width: none;
        border-radius: 50%;
    }

    .uchip img,
    .uchip .uchip__ph,
    .mz-user .mz-user__avatar,
    .mz-user .mz-avatar,
    .mz-user img,
    .mz-user__big-img,
    .wb-mine .mine-avatar,
    .wb-mine .mine-seal {
        display: block;
        width: 30px;
        height: 30px;
        margin: 0;
        border-radius: 50%;
        object-fit: cover;
    }

    /* 搜索圆钮里的放大镜与其余按钮图标同一尺寸 */
    .mz-search .mz-i,
    .mz-search__glass svg,
    .mz-search__icon svg {
        width: 17px;
        height: 17px;
    }

    /* 汉堡三条 span 竖排：别跟着上面那组把 gap 归零，否则三条线会贴成一根粗条 */
    .mz-burger {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    /* 面包屑返回：窄屏也做成正圆，与上面四枚同一语言 */
    .mz-crumb__back {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 0;
        border-radius: 50%;
    }
}

/* ---------- 八、横屏与投影 ---------- */

@media (max-width: 900px) and (orientation: landscape) {
    .hw__bar,
    .ex__foot,
    [data-mz-bar] {
        padding-bottom: 8px;
    }
}