/**
 * Responsive layout — mobile-first, aligned with common breakpoints (Bootstrap / MUI).
 * Mobile: ~360–430px logical width, single column, compact type.
 * Desktop (≥1024px, typical 15–17" @ 1366–1920): centered column, stable max widths.
 */

:root {
    --layout-gutter: 12px;
    --layout-gutter-safe: max(12px, env(safe-area-inset-left, 0px));
    --layout-font-base: 15px;
    --layout-line-height: 1.55;

    /* Home / portal reading column */
    --layout-content-max: min(100% - 2 * var(--layout-gutter), 30rem); /* ~480px phone */

    /* Chart / tool pages (slightly wider for canvas) */
    --layout-chart-max: min(100% - 2 * var(--layout-gutter), 30rem);

    --layout-shell-pad-y: 10px;
    --layout-shell-pad-x: var(--layout-gutter);

    /* Aliases used by theme-warm.css */
    --w-content-max: var(--layout-content-max);
}

/* Tablet: 768px+ (iPad portrait, small laptop) */
@media (min-width: 768px) {
    :root {
        --layout-gutter: 16px;
        --layout-font-base: 15px;
        --layout-content-max: min(100% - 32px, 40rem);   /* 640px */
        --layout-chart-max: min(100% - 32px, 50rem);     /* 800px */
        --layout-shell-pad-y: 14px;
    }
}

/* Desktop: 1024px+ (15–17" @ 1366×768 / 1920×1080 typical browser chrome) */
@media (min-width: 1024px) {
    :root {
        --layout-gutter: 20px;
        --layout-font-base: 16px;
        --layout-line-height: 1.6;
        --layout-content-max: 52rem;   /* 832px — desktop home/portal */
        --layout-chart-max: 64rem;   /* 1024px — chart tables & dual canvas */
        --layout-shell-pad-y: 18px;
    }
}

/* Large desktop: optional slight bump for chart readability */
@media (min-width: 1440px) {
    :root {
        --layout-content-max: 56rem; /* 896px */
        --layout-chart-max: 72rem; /* 1152px */
    }
}

/* ——— Global shell ——— */
html.warm-site {
    font-size: var(--layout-font-base);
    line-height: var(--layout-line-height);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.warm-site body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ——— Home (index.html) ——— */
body.warm-home {
    padding: var(--layout-shell-pad-y) var(--layout-shell-pad-x);
    font-size: var(--layout-font-base);
    line-height: var(--layout-line-height);
}

body.warm-home .shell {
    width: 100%;
    max-width: var(--layout-content-max);
    margin-inline: auto;
}

/* ——— Chart tool pages (iframe + standalone) ——— */
html.warm-site .content-wrap {
    width: 100% !important;
    max-width: var(--layout-chart-max) !important;
    margin-inline: auto !important;
    padding: clamp(10px, 2.5vw, 18px) !important;
    box-sizing: border-box !important;
}

html.warm-site .content-wrap canvas,
html.warm-site #captureArea canvas,
html.warm-site #gifCaptureArea canvas {
    max-width: 100%;
    height: auto;
}

/* 勿对 table 使用 display:block，否则 width:100% 失效（历史重码表等会缩成半宽） */
html.warm-site .content-wrap table {
    max-width: 100%;
}

html.warm-site #tableContainer,
html.warm-site #captureArea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html.warm-site table.history-table,
html.warm-site #captureArea > table,
html.warm-site #captureArea table {
    width: 100% !important;
    min-width: 100%;
    display: table !important;
    table-layout: fixed;
}

/* ——— Portal hub (ssq/index) ——— */
html.warm-site body.warm-portal .page-container,
html.warm-site body.warm-portal nav.portal-nav {
    width: 100% !important;
    max-width: var(--layout-content-max) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

html.warm-site body.warm-portal nav.portal-nav {
    padding: 8px var(--layout-gutter) 0 !important;
}

html.warm-site body.warm-portal .page-container {
    padding: clamp(10px, 2.5vw, 16px) !important;
}

/* ——— Mobile-only layout tweaks (<768px) ——— */
@media (max-width: 767.98px) {
    body.warm-home .hero-card-header {
        flex-wrap: wrap;
    }

    body.warm-home .hero-card-actions {
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        align-self: auto;
        min-height: 0;
        padding: 6px 0 0;
    }

    body.warm-home .tools-grid {
        grid-template-columns: 1fr;
    }

    html.warm-site body.warm-portal .daily-header {
        flex-direction: column;
    }

    html.warm-site body.warm-portal .daily-header-right {
        margin-left: 0;
        margin-top: 12px;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    html.warm-site body.warm-portal .daily-header-right img {
        max-width: min(100%, 280px);
        width: 100%;
    }
}

/* ——— Desktop layout refinements (≥1024px) ——— */
@media (min-width: 1024px) {
    body.warm-home .hero-section-title {
        font-size: 1.5rem;
        letter-spacing: 0.14em;
    }

    body.warm-home .ball {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    body.warm-home .hero-card-actions {
        max-width: 38%;
    }

    body.warm-home .tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.warm-home .cold-hot-table {
        flex-wrap: nowrap;
    }

    body.warm-home .cold-hot-col {
        flex: 1 1 0;
    }

    html.warm-site body.warm-portal .tools-grid,
    html.warm-site body.warm-portal .tool-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1280px) {
    body.warm-home .tools-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Touch targets on narrow screens */
@media (max-width: 767.98px) and (pointer: coarse) {
    body.warm-home .hero-more-btn,
    body.warm-home .hero-card-actions .share-btn,
    body.warm-home .hero-card-actions .bookmark-btn,
    html.warm-site body.warm-portal .share-btn,
    html.warm-site body.warm-portal .bookmark-btn {
        min-height: 40px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}