/* 2026-09-03 上线前视觉精修：学习轨道舱、Pad 同屏学习、紧凑声音设置。 */
.rail-brand,
.rail-track-label,
.rail-note { display: none; }

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.settings-compact-group {
    display: grid;
    margin: 4px 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    overflow: clip;
}

.settings-compact-group .settings-row {
    min-height: 44px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
}

.settings-compact-group .settings-row:last-child { border-bottom: 0; }
.settings-compact-group .switch-label { min-width: 0; gap: 12px; }
.settings-compact-group .switch-label span { min-width: 0; }
.settings-compact-group .switch-label input { flex: 0 0 auto; }

/* Pad：学习主任务同屏，只有右侧扩展资料承担独立纵向滚动。 */
@media (min-width: 768px) and (max-width: 1194px) and (min-height: 700px) {
    html,
    body {
        height: 100%;
        min-height: 0;
    }

    body {
        height: 100dvh;
        overflow: hidden;
    }

    .app {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    #panels {
        display: flex;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #panel-learn.panel.mode-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-bottom: 10px;
    }

    #panel-learn .filter-bar,
    #panel-learn .learn-progress { flex: 0 0 auto; }

    #panel-learn .btn-arrow {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
    }

    #learn-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        flex: 1 1 0;
        min-height: 0;
        gap: 8px;
        padding: 12px;
        overflow: hidden;
    }

    #learn-card .mode-status-bar { grid-row: 1; }
    #learn-card .card-top.learn-top { grid-row: 2; }
    #learn-card .kb-area { grid-row: 3; }

    #learn-card .card-top.learn-top {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        align-items: stretch;
        overflow: hidden;
        padding-block: 10px;
    }

    #learn-card .learn-core {
        align-self: center;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    #learn-card .learn-word-row,
    #learn-card .learn-head { min-width: 0; max-width: 100%; overflow: hidden; }

    #learn-card .learn-word-row.word-overflow .big-word { overflow-x: hidden; }
    #learn-card #learn-word-display .letter-map { padding-inline: 3px; margin-inline: 0; }

    #learn-card .learn-details-scroll {
        align-self: stretch;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    #learn-card .kb-area {
        flex: 0 0 auto;
        margin-top: 0;
    }
}

/* 横屏 Pad 与桌面：四站“学习轨道舱”。导航形态由可用空间决定，不依赖指针类型。 */
@media (min-width: 1024px) and (orientation: landscape) {
    .app {
        display: grid;
        grid-template-columns: 184px minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        max-width: 1380px;
        padding-left: 0;
    }

    .topbar,
    .progress-card,
    #panels {
        grid-column: 2;
    }

    .tabbar {
        position: fixed;
        z-index: 50;
        inset: 0 auto 0 max(0px, calc((100% - 1380px) / 2));
        width: 184px;
        max-width: none;
        transform: none;
        flex-direction: column;
        padding: 24px 16px 20px;
        justify-content: flex-start;
        align-items: stretch;
        gap: 9px;
        overflow: hidden;
        background:
            radial-gradient(circle at 14% 6%, rgba(113, 87, 184, .14), transparent 31%),
            linear-gradient(180deg, rgba(247, 251, 250, .98), rgba(234, 242, 239, .98));
        border-right: 1px solid rgba(19, 37, 58, .12);
        box-shadow: 12px 0 36px rgba(25, 62, 72, .08);
        backdrop-filter: blur(18px);
    }

    .rail-brand {
        display: grid;
        gap: 3px;
        min-height: 82px;
        padding: 10px 9px 14px;
        border-bottom: 1px solid rgba(19, 37, 58, .10);
    }

    .rail-brand-mark {
        color: var(--ink);
        font-family: "Trebuchet MS", "Aptos", sans-serif;
        font-size: 19px;
        font-weight: 900;
        letter-spacing: -.03em;
    }

    .rail-brand-copy {
        color: var(--text-2);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.45;
    }

    .rail-track-label {
        display: block;
        margin: 8px 0 1px 12px;
        color: var(--text-3);
        font-family: Bahnschrift, "Segoe UI", sans-serif;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em;
    }

    .tabbar::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 154px;
        bottom: 76px;
        left: 39px;
        width: 2px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(35, 102, 209, .20), rgba(113, 87, 184, .38), rgba(47, 155, 105, .20));
    }

    .tabbar .tab-btn {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
        justify-items: start;
        min-height: 70px;
        flex: 0 0 auto;
        padding: 9px 10px 9px 0;
        gap: 9px;
        border: 1px solid transparent;
        border-radius: 16px;
        color: var(--text-2);
        text-align: left;
        transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .tabbar .tab-icon {
        width: 46px;
        height: 46px;
        border: 1px solid rgba(19, 37, 58, .10);
        border-radius: 15px;
        background: rgba(255, 255, 255, .76);
        box-shadow: 0 5px 14px rgba(25, 62, 72, .06);
        font-size: 21px;
    }

    .tabbar .tab-label {
        display: grid;
        gap: 2px;
        color: inherit;
        font-size: 14px;
        font-weight: 850;
        letter-spacing: .02em;
    }


    .tabbar .tab-btn:focus-visible {
        outline-offset: 2px;
        background: rgba(255, 255, 255, .82);
    }

    .tabbar .tab-btn.active {
        color: #174b9c;
        background: linear-gradient(105deg, #ffffff, #e9f2ff);
        border-color: rgba(35, 102, 209, .26);
        box-shadow: 0 10px 24px rgba(35, 102, 209, .14);
    }

    .tabbar .tab-btn.active .tab-icon {
        color: #fff;
        border-color: #2366d1;
        background: linear-gradient(145deg, #2366d1, #7157b8);
        box-shadow: 0 7px 18px rgba(35, 102, 209, .28);
    }

    .tabbar .tab-btn.active .tab-label::after {
        content: "当前站";
        color: #52667a;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
    }

    .tabbar .tab-btn.active::before {
        top: 50%;
        left: -8px;
        width: 4px;
        height: 34px;
        transform: translateY(-50%);
        background: var(--primary);
    }

    .tabbar .tab-badge {
        position: absolute;
        z-index: 2;
        top: 7px;
        left: 32px;
        margin: 0;
        min-width: 19px;
        height: 19px;
        border: 2px solid var(--card);
        box-shadow: 0 3px 8px rgba(216, 92, 80, .24);
    }

    .rail-note {
        display: block;
        position: relative;
        z-index: 1;
        margin-top: auto;
        padding: 10px 8px 0;
        border-top: 1px solid rgba(19, 37, 58, .10);
        color: var(--text-3);
        font-size: 10px;
        line-height: 1.5;
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) {
    .tabbar .tab-btn:hover {
        transform: translateX(3px);
        color: var(--primary);
        background: rgba(255, 255, 255, .58);
        border-color: rgba(35, 102, 209, .14);
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (prefers-color-scheme: dark) {
    .tabbar {
        background:
            radial-gradient(circle at 14% 6%, rgba(182, 162, 255, .15), transparent 31%),
            linear-gradient(180deg, rgba(22, 40, 38, .99), rgba(16, 32, 30, .99));
        border-right-color: rgba(201, 216, 211, .14);
    }
    .rail-brand { border-bottom-color: rgba(201, 216, 211, .14); }
    .tabbar .tab-icon { background: #203431; border-color: #3a514d; }
    .tabbar .tab-btn.active {
        color: #e5eeff;
        background: linear-gradient(105deg, #26445c, #292f54);
        border-color: #5f79a2;
    }
    .tabbar .tab-btn.active .tab-label::after { color: #c9d8d3; }
    .tabbar .tab-badge { border-color: #1a2b2a; }
    .rail-note { border-top-color: rgba(201, 216, 211, .14); }
}

@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) and (prefers-color-scheme: dark) {
    .tabbar .tab-btn:hover { background: #203431; border-color: #476761; }
}

@media (prefers-reduced-motion: reduce) {
    .tabbar .tab-btn:hover { transform: none; }
}

/* 2026-09-03 v71 本地候选：横屏学习舞台；竖屏与手机保持既有信息流。 */
.learn-task-belt { display: contents; }
.topbar-user-home,
.progress-card-home { display: contents; }
.rail-progress-slot,
.rail-account-slot { display: none; }
.daily-stats {
    appearance: none;
    width: auto;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}
.daily-stats:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* v75：空提示不占布局；未来人工记忆线索未启用时不产生空卡。 */
.attempt-guidance:empty,
.memory-clue-slot:empty,
.memory-clue-slot[hidden] { display: none !important; }

/* 无可靠音频的字母/音素只承担说明语义，不伪装成播放控件。 */
.letter-segment-static,
.letter-segment-static .letter-map,
.phoneme-chip-static {
    cursor: default;
    pointer-events: none;
}
.letter-segment-static .letter-map,
button.letter-segment .letter-map:active,
button.letter-segment .letter-map.active-pop {
    transform: none;
    box-shadow: none;
}
.letter-map-silent { vertical-align: middle; }
.phoneme-chip-static { vertical-align: middle; }

/* Pad 竖屏：任务带与卡片紧邻，学习核心从主行顶部开始。 */
@media (min-width: 768px) and (max-width: 1194px) and (orientation: portrait) and (min-height: 700px) {
    #panel-learn.panel.mode-panel { gap: 8px; }
    #learn-card { margin-top: 0; }
    #learn-card .card-top.learn-top {
        align-items: start;
        padding-block: 8px;
    }
    #learn-card .learn-core,
    #learn-card .learn-details-scroll {
        align-self: start;
        width: 100%;
    }
    #learn-card .learn-details-scroll { max-height: 100%; }
}

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 700px) {
    html.rail-aux-ready,
    html.rail-aux-ready body { height: 100%; min-height: 0; }
    html.rail-aux-ready body { height: 100dvh; overflow: hidden; }

    html.rail-aux-ready .app {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: auto minmax(0, 1fr);
    }

    html.rail-aux-ready .topbar { display: none; }
    html.rail-aux-ready .progress-card-home { display: none; }

    html.rail-aux-ready #family-response-banner {
        grid-column: 2;
        grid-row: 1;
    }

    html.rail-aux-ready #panels {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        height: auto;
        min-height: 0;
        padding-top: 10px;
        overflow: visible;
    }

    .tabbar {
        padding: 18px 16px 14px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    html.rail-aux-ready .rail-progress-slot,
    html.rail-aux-ready .rail-account-slot { display: block; }

    .rail-brand {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 2px;
        min-height: 66px;
        padding: 7px 6px 10px;
        align-items: center;
    }

    .rail-brand-lockup { display: contents; }
    .rail-brand-logo {
        display: block;
        grid-row: 1 / 3;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        box-shadow: 0 5px 13px rgba(35, 102, 209, .20);
    }
    .rail-brand-mark { min-width: 0; font-size: 17px; line-height: 1.1; white-space: nowrap; }
    .rail-brand-copy { display: grid; gap: 1px; font-size: 10px; line-height: 1.35; }
    .rail-brand-copy span { display: block; }

    html.rail-aux-ready .rail-progress-slot { margin-top: 1px; }
    html.rail-aux-ready .progress-card {
        display: grid;
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(35, 102, 209, .14);
        border-radius: 15px;
        background: rgba(255, 255, 255, .74);
        box-shadow: 0 8px 22px rgba(25, 62, 72, .07);
    }
    html.rail-aux-ready .progress-card .progress-stats {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 3px;
    }
    html.rail-aux-ready .progress-card .progress-stats span {
        display: flex;
        grid-column: span 2;
        min-width: 0;
        min-height: 25px;
        padding: 2px;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 8px;
        background: rgba(35, 102, 209, .055);
        font-size: 10px;
        line-height: 1;
        text-align: center;
    }
    html.rail-aux-ready .progress-card .progress-stats span:nth-child(4) { grid-column: 2 / span 2; }
    html.rail-aux-ready .progress-card .progress-stats span:nth-child(5) { grid-column: 4 / span 2; }
    html.rail-aux-ready .progress-card .progress-stats b {
        color: var(--ink);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    html.rail-aux-ready .progress-card .progress-bar-bg { height: 5px; margin: 0; }
    html.rail-aux-ready .progress-card .daily-row { display: grid; gap: 3px; min-width: 0; }
    html.rail-aux-ready .progress-card .daily-stats {
        display: block;
        width: 100%;
        min-height: 44px;
        font-size: 10px;
        line-height: 1.35;
        white-space: normal;
    }
    html.rail-aux-ready .progress-card .daily-actions { min-width: 0; justify-content: flex-start; }
    html.rail-aux-ready .progress-card .sync-status { min-width: 0; font-size: 10px; white-space: normal; }

    .rail-track-label { margin: 3px 0 0 12px; }
    html.rail-aux-ready .tabbar::before,
    html.rail-aux-ready .rail-note { display: none; }

    .tabbar .tab-btn {
        min-height: 58px;
        grid-template-columns: 46px minmax(0, 1fr);
        padding-block: 7px;
    }

    html.rail-aux-ready .rail-account-slot { margin-top: auto; padding-top: 5px; }
    html.rail-aux-ready .topbar-user {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid rgba(19, 37, 58, .10);
    }
    html.rail-aux-ready .topbar-user .user-chip {
        min-width: 0;
        min-height: 44px;
        padding-inline: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html.rail-aux-ready .topbar-user #logout-btn { min-width: 54px; min-height: 44px; padding-inline: 8px; }

    #panel-learn.panel.mode-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-top: 0;
        padding-bottom: 10px;
        gap: 8px;
    }

    .learn-task-belt {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 8px;
        min-height: 56px;
        margin-inline: 0;
        padding: 5px 8px 5px 10px;
        overflow: hidden;
        border: 1px solid rgba(35, 102, 209, .15);
        border-left: 4px solid var(--primary);
        border-radius: 14px;
        background: linear-gradient(90deg, rgba(35, 102, 209, .07), transparent 38%), var(--card);
        box-shadow: 0 5px 16px rgba(25, 62, 72, .045);
    }
    .learn-task-belt .filter-bar,
    .learn-task-belt .learn-progress {
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .learn-task-belt .filter-bar { flex-wrap: nowrap; gap: 8px; }
    .learn-task-belt .filter-bar label { min-width: 0; gap: 4px; font-size: 12px; white-space: nowrap; }
    .learn-task-belt .filter-select { min-height: 44px; max-width: 150px; }
    .learn-task-belt #learn-group-select { max-width: 112px; }
    .learn-task-belt .learn-progress { gap: 7px; }
    .learn-task-belt .learn-progress-left { min-width: 0; gap: 4px; white-space: nowrap; }
    .learn-task-belt .tag { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .learn-task-belt .arrow-group { flex: 0 0 auto; gap: 4px; }
    .learn-task-belt .btn-arrow { min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 0; }
    .learn-task-belt .attempt-guidance { grid-column: 1 / -1; }
    .learn-task-belt .attempt-guidance:empty { display: none; }
    #panel-learn #learn-skip-btn { display: none !important; }

    #learn-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        flex: 1 1 0;
        min-height: 0;
        gap: 8px;
        margin-top: 0;
        margin-bottom: 10px;
        padding: 12px;
        overflow: hidden;
    }
    #learn-card .mode-status-bar { grid-row: 1; }
    #learn-card .card-top.learn-top {
        grid-row: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1 1 0;
        justify-self: center;
        width: min(100%, 1064px);
        min-height: 0;
        max-height: none;
        align-items: center;
        gap: clamp(20px, 2vw, 24px);
        overflow: hidden;
        padding: 10px clamp(10px, 1.5vw, 18px);
        box-sizing: border-box;
    }
    #learn-card .kb-area { grid-row: 3; flex: 0 0 auto; margin-top: 0; }
    #learn-card .learn-core {
        align-self: center;
        justify-self: center;
        width: min(100%, 500px);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    #learn-card .learn-word-row,
    #learn-card .learn-head { min-width: 0; max-width: 100%; overflow: hidden; }
    #learn-card .learn-word-row.word-overflow .big-word { overflow-x: hidden; }
    #learn-card #learn-word-display .letter-map { padding-inline: 3px; margin-inline: 0; }
    #learn-card .learn-details-scroll {
        align-self: center;
        justify-self: center;
        width: min(100%, 500px);
        min-height: 0;
        max-height: min(100%, 360px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}

@media (prefers-reduced-motion: reduce) {
    .letter-segment,
    .letter-map,
    .phoneme-chip,
    .phoneme-chip.phoneme-highlight {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 700px) and (prefers-color-scheme: dark) {
    html.rail-aux-ready .progress-card,
    .learn-task-belt {
        border-color: rgba(132, 174, 238, .24);
        background: linear-gradient(90deg, rgba(132, 174, 238, .11), transparent 38%), #1b302d;
    }
    html.rail-aux-ready .progress-card .progress-stats span { background: rgba(132, 174, 238, .10); }
    html.rail-aux-ready .topbar-user { border-top-color: rgba(201, 216, 211, .14); }
}

/* 音素映射使用固定的浅色底块；映射字母（含静音段）始终用黑色，
   普通未映射字母继续由 .letter-map-static 随主题取色。 */
.letter-map:not(.letter-map-static),
.letter-map.letter-map-silent {
    color: #000;
}

/* 轨道舱锁定应用壳高度时，资料型页面在自身面板滚动。
   学习页保持固定舞台与右侧资料独立滚动，不纳入此规则。 */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 700px) {
    html.rail-aux-ready .panel:not(#panel-learn) {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}