/* 清爽原版 (Classic) and 流光玻璃 (Liquid Glass) on the shared desktop workspace layout.
   warm-paper.css places everything (body.layout-warm-paper); this file only paints the pieces that the layout
   adds or reshapes, in each theme's own colours. Controls that already exist in the classic page keep their own
   classes, emoji and app.css / Liquid Glass styling, so most of the look comes for free.
   Selectors:  body.layout-warm-paper:not(.skin-warm-paper)   both themes
               …style-default:not(.skin-warm-paper)            Classic only (Warm Paper also carries style-default)
               body.layout-warm-paper.style-liquid-glass       Liquid Glass only
   Load after app.css and warm-paper.css. Phones always use Warm Paper, so everything here is desktop-only. */
@media (min-width: 768px) {
    /* ---------- Top bar ---------- */
    /* app.css paints the dark classic header as "main > header"; the layout moves it out of <main>. */
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) > #appTopHeader {
        background-color: var(--dark-app-bg) !important;
        border-color: var(--dark-border-soft) !important;
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-brand-caption { color: #94a3b8; }
    /* Warm Paper hides the 安装为 App button; the other two keep it, sized like the round buttons beside it. */
    body.layout-warm-paper:not(.skin-warm-paper) #pwaInstallEntry:not(.hidden) { width: 38px; height: 38px; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-brand-caption { color: var(--dark-muted, #9a9a9a); }

    /* Tabs keep their classic folder shape and sit on the top bar's bottom edge, packed from the left
       (the spread-out row suits Warm Paper's underline tabs, not folder tabs). */
    body.layout-warm-paper:not(.skin-warm-paper) #mainTabs { align-items: flex-end; justify-content: flex-start !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #mainTabs > button { gap: 8px; }

    /* The account card sits in the top bar without its card chrome: avatar, name and plan behind a divider. */
    body.layout-warm-paper:not(.skin-warm-paper) #appTopHeader .user-info-card {
        border: 0 !important;
        border-left: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        transform: none !important;
    }
    body.layout-warm-paper:not(.skin-warm-paper) #appTopHeader .user-info-card:hover #sidebar_username { color: #ff4b4b !important; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) #appTopHeader .user-info-card { border-left-color: var(--dark-border, #3a3a3a) !important; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) #appTopHeader .user-info-card:hover #sidebar_username { color: #ff6b6b !important; }
    body.layout-warm-paper.style-liquid-glass #appTopHeader .user-info-card { border-left-color: rgb(15 23 42 / 10%) !important; }
    body.layout-warm-paper.style-liquid-glass.theme-dark #appTopHeader .user-info-card { border-left-color: rgb(255 255 255 / 12%) !important; }

    /* ---------- Basket panel ---------- */
    /* Room for the red drawer handle's glow, which the layout's clip would cut off in a straight line. */
    body.layout-warm-paper:not(.skin-warm-paper) #appSidebar { clip-path: inset(0 -30px 0 0); }
    /* Preview and clear become icon buttons in the basket header, drawn with their own emoji. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-relabel[data-warm-glyph]:before {
        content: attr(data-warm-glyph);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        line-height: 1;
    }
    /* The hidden words still take a flex slot, so drop the gap to keep the emoji centred; boxed buttons need air and stay inside the column. */
    body.layout-warm-paper:not(.skin-warm-paper) #cartDropZone > div:first-child { padding: 0 8px 0 4px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #cartDropZone > div:first-child > div { gap: 6px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #cartDropZone > div:first-child > div > button.warm-relabel { gap: 0; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-basket-count { color: #64748b; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-basket-count { color: var(--dark-muted, #9a9a9a); }

    /* Basket rows keep the classic white row card; the number square takes the place of the drag grip. */
    body.layout-warm-paper:not(.skin-warm-paper) #cartList { gap: 6px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #cartList > .cart-item { padding: 8px 6px 8px 8px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #cartList > .cart-item > div:first-child > div {
        border-radius: 7px;
        background: #f1f5f9;
    }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) #cartList > .cart-item > div:first-child > div { background: var(--dark-surface-2, #262626); }
    body.layout-warm-paper.style-liquid-glass #cartList > .cart-item > div:first-child > div { background: rgb(15 23 42 / 5%); }
    body.layout-warm-paper.style-liquid-glass.theme-dark #cartList > .cart-item > div:first-child > div { background: rgb(255 255 255 / 8%); }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-cart-meta { color: #64748b; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-cart-meta { color: var(--dark-muted, #9a9a9a); }
    body.layout-warm-paper:not(.skin-warm-paper) #cartList > .cart-item > .cart-part-selection {
        border: 1px solid #fecdd3;
        border-radius: 6px;
        background: #fff1f2;
        color: #be123c;
    }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) #cartList > .cart-item > .cart-part-selection {
        border-color: #5a3b40;
        background: #3a2d2f;
        color: #f0c9cf;
    }
    body.layout-warm-paper:not(.skin-warm-paper) #cartList > .cart-item > button[onclick^="removeFromCart"] { border-radius: 7px; }
    /* The classic footer panel (now just the export button) spans the panel width. */
    body.layout-warm-paper:not(.skin-warm-paper) #sidebarContent > .p-5:last-child { margin: 0; padding: 14px 16px 16px !important; }

    /* ---------- Hall: search, filters, summary row ---------- */
    /* The sticky strip under the filter panel matches the page (classic dark paints bg-slate-50 as a surface). */
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) #hallPanel > .sticky { background-color: var(--dark-bg, #151515) !important; }
    /* The filter card used to hang from the folder tabs; here it stands on its own, so it gets its top edge and corners back.
       Glass: the strip above it is transparent, so it scrolls away and the card docks under the top bar. */
    body.layout-warm-paper:not(.skin-warm-paper) #hallPanel > .sticky { padding-top: 16px !important; }
    body.layout-warm-paper.style-liquid-glass #hallPanel > .sticky { top: -16px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) #hallPanel > .sticky > .glass-surface {
        border-top-width: 1px !important;
        border-top-style: solid;
        border-radius: 12px !important;
    }
    body.layout-warm-paper:not(.skin-warm-paper) #hallPanel .glass-surface { padding: 16px 20px 12px !important; gap: 12px !important; }
    /* Cards scrolling under the stuck filter card fade out instead of being cut (the glass card blurs them instead). */
    body.layout-warm-paper.style-default:not(.skin-warm-paper) #hallPanel > .sticky:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 14px;
        background: linear-gradient(#f8fafc, rgb(248 250 252 / 0));
        pointer-events: none;
    }
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) #hallPanel > .sticky:after { background: linear-gradient(#151515, rgb(21 21 21 / 0)); }
    /* Filter triggers show the filter's own emoji where Warm Paper draws a line icon. */
    body.layout-warm-paper:not(.skin-warm-paper) #filterBar > div > div[role=button][data-warm-glyph]:before {
        content: attr(data-warm-glyph);
        flex-shrink: 0;
        font-size: 14px;
        line-height: 1;
    }
    /* 📖 subject and 💯 marks: their label emoji sits inside the control (room for it only from 1100px). */
    body.layout-warm-paper:not(.skin-warm-paper) #filterBar > div[data-warm-glyph]:before {
        content: attr(data-warm-glyph);
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        font-size: 14px;
        line-height: 1;
        pointer-events: none;
    }
    body.layout-warm-paper:not(.skin-warm-paper) #filterBar > div[data-warm-glyph] > :is(select, input) { padding-left: 34px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-filter-count { color: #94a3b8; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-filter-count { color: var(--dark-muted, #9a9a9a); }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-chip {
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        background: #f1f5f9;
        color: #475569;
        cursor: pointer;
        transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-chip:hover {
        border-color: #fecdd3;
        background: #fff1f2;
        color: #e11d48;
    }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-chip { color: var(--dark-text-2, #d4d4d4); }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-chip:hover { color: #ff8f85; }
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-chip {
        border-color: var(--dark-border, #3a3a3a);
        background: var(--dark-surface-2, #262626);
    }
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-chip:hover {
        border-color: rgb(255 107 107 / 45%);
        background: rgb(255 107 107 / 14%);
    }
    body.layout-warm-paper.style-liquid-glass .warm-chip {
        border-color: var(--glass-border);
        background-color: var(--glass-fill-strong);
        background-image: var(--glass-sheen);
        box-shadow: var(--glass-highlight);
    }
    body.layout-warm-paper.style-liquid-glass.theme-dark .warm-chip { border-color: rgb(255 255 255 / 16%); }
    body.layout-warm-paper.style-liquid-glass .warm-chip:hover {
        border-color: rgb(255 75 75 / 35%);
        background-color: rgb(255 75 75 / 12%);
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-filter-reset {
        border: 0;
        background: none;
        color: #64748b;
        cursor: pointer;
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-filter-reset:hover { color: #ff4b4b; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-filter-reset:before { display: none; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-filter-reset { color: var(--dark-muted, #9a9a9a); }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-filter-reset:hover { color: #ff6b6b; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-result-count { color: #64748b; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-result-count b { font-weight: 700; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-result-count { color: var(--dark-muted, #9a9a9a); }

    /* ---------- Question cards ---------- */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-header { border-bottom: 1px solid #f1f5f9; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-card-header { border-bottom-color: var(--dark-border, #3a3a3a); }
    body.layout-warm-paper.style-liquid-glass .warm-card-header { border-bottom-color: rgb(255 255 255 / 55%); }
    body.layout-warm-paper.style-liquid-glass.theme-dark .warm-card-header { border-bottom-color: rgb(255 255 255 / 10%); }
    /* The facts line: the classic values in their own colours, separated by dots (the marks badge comes last). */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-info {
        display: flex;
        align-items: center;
    }
    /* One row: a long chapter list wraps inside itself instead of leaving a dot and the marks badge on a second line. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-info > * { flex-shrink: 0; white-space: nowrap; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-info > .text-emerald-800 { flex-shrink: 1; min-width: 0; white-space: normal; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-info > :not(:last-child):after {
        content: "·";
        margin: 0 8px;
        color: #cbd5e1;
        font-weight: 400;
    }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-card-info > :not(:last-child):after { color: #5a5a5a; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-info > .question-mark-badge { padding: 0 8px; line-height: 1.6; }
    /* Header controls: the amber 问小巴拉 pill and the classic save button, sized for the header row. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-controls > button { gap: 6px; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-controls > [id^="btn_fav_"] { padding: 6px 14px !important; }
    /* The question body sits flat on the card, like the card header and footer. */
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-question-body { background: transparent !important; }
    /* Dark: the inverted question image (screen-blended) needs an opaque surface under it instead of a grey plate that stops
       short of the card edge. Classic's card is opaque, so the image blends straight onto it; the frosted Glass card is an
       isolated layer, so Glass gets one full-width band of the old question-column grey. */
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-question-body .answer-anchor-wrapper { background: transparent !important; }
    body.layout-warm-paper.theme-dark:not(.skin-warm-paper) .warm-question-body .answer-anchor-wrapper img { background-color: transparent !important; }
    body.layout-warm-paper.style-liquid-glass.theme-dark .warm-question-body { background: #202020 !important; }

    /* Footer: the card's own buttons in one wrapping row, closed on the right by add/remove. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 12px 23px 18px;
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details[open] > div,
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > [id^="var_drawer_"] { flex: 0 0 100%; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details > summary,
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > button { padding: 0 14px !important; }
    /* Add/remove ends the row at the card's right edge, in Warm Paper's size (min-width and centring come from
       warm-paper.css; this only adds the wider inner padding and pushes it away from the buttons before it). */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > [id^="btn_cart_"] {
        margin-left: auto !important;
        padding: 0 17px !important;
    }
    /* app.css shrinks the examiner report for the old narrow side column on tablets (768–1279px);
       in the footer row it is a normal-sized button and a full-width box. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > .question-card-er > summary { min-height: 42px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > .question-card-er > summary [data-er-title] { font-size: 14px !important; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > .question-card-er > div {
        padding: 18px !important;
        font-size: 16px !important;
        line-height: 1.625 !important;
    }
    /* Mark scheme and examiner report summaries become buttons in the row: slate for the answers, blue for the report. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details > summary {
        border: 1px solid #e2e8f0;
        border-radius: 8px !important;
        background: #f8fafc;
        box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details > summary:hover { background: #f1f5f9; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > .question-card-er > summary {
        border-color: #dbeafe;
        background: rgb(239 246 255 / 60%);
    }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > .question-card-er > summary:hover { background: #eff6ff; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details[open] > summary { background: #e2e8f0; border-color: #cbd5e1; }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details:not(.question-card-er)[open] > summary > span:last-child { display: inline-block; transform: rotate(180deg); }
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > .question-card-er[open] > summary { background: #dbeafe; border-color: #bfdbfe; }
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-card-footer > details > summary {
        border-color: var(--dark-border, #3a3a3a);
        background: var(--dark-surface-2, #262626);
        box-shadow: none;
    }
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-card-footer > details > summary:hover,
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-card-footer > details[open] > summary { background: var(--dark-hover, #303030) !important; }
    body.layout-warm-paper.style-default.theme-dark:not(.skin-warm-paper) .warm-card-footer > details[open] > summary { border-color: #5a5a5a; }
    /* Opened answers and reports: a full box under the row, in the colours of the summary that opened it. */
    body.layout-warm-paper:not(.skin-warm-paper) .warm-card-footer > details[open] > div {
        border-width: 1px;
        border-style: solid;
        border-radius: 12px;
    }
    /* Liquid Glass: the summaries match the frosted secondary buttons; opened content gets the light frosted box. */
    body.layout-warm-paper.style-liquid-glass .warm-card-footer > details > summary,
    body.layout-warm-paper.style-liquid-glass .warm-card-footer > .question-card-er > summary {
        border: 1px solid rgb(255 255 255 / 70%);
        background-color: var(--glass-fill) !important;
        background-image: var(--glass-sheen) !important;
        box-shadow: 0 4px 12px rgb(31 38 135 / 10%), var(--glass-highlight);
    }
    body.layout-warm-paper.style-liquid-glass.theme-dark .warm-card-footer > details > summary { border-color: rgb(255 255 255 / 16%); }
    body.layout-warm-paper.style-liquid-glass .warm-card-footer > details > summary:hover { border-color: rgb(255 255 255 / 85%); }
    /* Open state: a tinted edge (red for the answers, blue for the report) marks which button opened the box below. */
    body.layout-warm-paper.style-liquid-glass .warm-card-footer > details[open] > summary {
        background-color: var(--glass-fill-strong) !important;
        border-color: rgb(255 75 75 / 40%);
    }
    body.layout-warm-paper.style-liquid-glass .warm-card-footer > .question-card-er[open] > summary { border-color: rgb(59 130 246 / 40%); }
    body.layout-warm-paper.style-liquid-glass.theme-light .warm-card-footer > details[open] > div {
        background-color: rgb(255 255 255 / 18%) !important;
        border-color: rgb(255 255 255 / 45%) !important;
    }
    body.layout-warm-paper.style-liquid-glass.theme-dark .warm-card-footer > details[open] > div {
        background-color: rgb(255 255 255 / 5%) !important;
        border-color: rgb(255 255 255 / 9%) !important;
    }
}
/* Classic / Liquid Glass tab row, one-row header (≥1280px). These tabs carry their own emoji and the
   English names are long, so the natural px-6 folder tabs run ~100px wider than the top bar's middle
   column can spare: at 1280–1400px the row squeezed the account card to nothing and painted over the
   language switch. Match Warm Paper's 14px tab padding — one rhythm across the three themes, and the row
   hands those ~100px back to the account card. Below 1280px app.css packs the tabs tighter still
   (7px 10px), so this starts at 1280px. */
@media (min-width: 1280px) {
    body.layout-warm-paper:not(.skin-warm-paper) #mainTabs > button { padding-left: 14px !important; padding-right: 14px !important; }
}
/* Narrow desktops (768–1099px). */
@media (min-width: 768px) and (max-width: 1099px) {
    /* Glass selects are padded wider than Warm Paper's; a slimmer card keeps the subject name readable. */
    body.layout-warm-paper:not(.skin-warm-paper) #hallPanel .glass-surface { padding-left: 12px !important; padding-right: 12px !important; }
    /* The emoji inside the subject/marks controls needs room it doesn't have here. */
    body.layout-warm-paper:not(.skin-warm-paper) #filterBar > div[data-warm-glyph]:before { display: none; }
    body.layout-warm-paper:not(.skin-warm-paper) #filterBar > div[data-warm-glyph] > :is(select, input) { padding-left: 11px !important; }
}
@media (min-width: 768px) and (max-width: 939px) {
    /* Keep the filter names; the picked values are listed in the chips row anyway. */
    body.layout-warm-paper:not(.skin-warm-paper) #filterBar .warm-filter-count { display: none !important; }
}
/* Landscape phones: as in the classic layout, drop the top bar and let the filters scroll away. */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
    body.layout-warm-paper:not(.skin-warm-paper) > #appTopHeader { display: none !important; }
    body.layout-warm-paper:not(.skin-warm-paper) :is(#hallPanel, #variantsPanel, #pastPapersPanel) > .sticky { position: static !important; }
}