/**
 * ============================================================================
 * 高雄市長新聞聚合分析系統 - 直式／行動版專用樣式表 (mobile.css)
 * ============================================================================
 * 架構規範：
 * 1. 統一斷點：<= 768px (平板/手機直式) 與 <= 480px (精巧型手機 375/390/414px)
 * 2. 元件層採用 Container Queries (@container) 自動適應卡片與抽屜內部寬度
 * 3. 流體間距與字級採用 clamp()，直式版面給予充足呼吸空間，杜絕擠壓
 * 4. 嚴格遵守 WCAG AA/AAA 深色沉浸主題對比度、Zero-Clipping 與防寡字孤立字詞規範
 * 5. 全檔禁止濫用 !important，採用語意化優先權進行覆蓋
 * ============================================================================
 */

/* ==========================================================================
   1. 元件層 Container Queries 宣告 (Component Container Queries)
   ========================================================================== */
.overview-panel {
    container-type: inline-size;
    container-name: overview;
}

.candidate-card {
    container-type: inline-size;
    container-name: card;
}

.anomaly-card {
    container-type: inline-size;
    container-name: anomaly;
}

.event-watchlist-row {
    container-type: inline-size;
    container-name: watchlist;
}

.media-card-item {
    container-type: inline-size;
    container-name: media-card;
}

.drawer {
    container-type: inline-size;
    container-name: drawer;
}

/* ==========================================================================
   2. 直式版面主規則 (Portrait / Mobile @ <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 2.1 全域排版容器與流體內距 */
    .app-container {
        padding: clamp(10px, 3vw, 16px) clamp(8px, 2.5vw, 12px);
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* 2.2 最低字級守衛（確保直式下所有文字 >= 12px，杜絕難讀小字） */
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }

    /* 全域文字下限保底：所有標籤、輔助文字、指標值、圖例、按鈕均不小於 12px */
    .stat-label,
    .stat-helper,
    .stat-rule,
    .brief-timestamp,
    .brief-meta,
    .brief-time-window,
    .area-badge,
    .area-badge-leaf,
    .area-badge-sub,
    .nav-code,
    .section-nav-pill,
    .section-nav-pill .nav-code,
    .section-nav-pill.active .nav-code,
    .news-breakdown-label,
    .news-breakdown-item,
    .news-latest-sync-copy,
    .news-latest-sync-title,
    .news-latest-sync-row,
    .news-latest-sync-row span,
    .sync-time-date,
    .sync-time-clock,
    .event-watchlist-status,
    .event-watchlist-status.is-active,
    .event-watchlist-status.is-cooled,
    .event-watchlist-meta,
    .event-watchlist-meta span,
    .event-watchlist-ranking-meta,
    .event-watchlist-ranking-days,
    .event-watchlist-metric,
    .event-watchlist-duration-value,
    .event-watchlist-summary-metrics,
    .event-watchlist-summary-metrics span,
    .event-watchlist-candidate-summary-metrics,
    .event-watchlist-candidate-summary-metrics span,
    .event-watchlist-candidate-summary-metrics strong,
    .event-watchlist-threshold-link,
    .event-watchlist-threshold-count,
    .event-watchlist-candidate-event-count,
    .event-watchlist-term,
    .event-watchlist-note,
    .event-watchlist-history-note,
    .event-watchlist-retention-label,
    .event-watchlist-retention-arrow,
    .event-watchlist-retention-hint,
    .anomaly-media-source,
    .anomaly-keep-together,
    .anomaly-event-metric,
    .anomaly-event-total,
    .anomaly-event-status,
    .anomaly-event-daily,
    .anomaly-event-daily span,
    .anomaly-event-precedent,
    .anomaly-share-label,
    .anomaly-share-label span,
    .anomaly-background-note,
    .anomaly-date-divider,
    .anomaly-date-divider span,
    .anomaly-event-arrow,
    .anomaly-range,
    .formula-line,
    .formula-standard-row,
    .formula-condition,
    .formula-standards-block span,
    .formula-toggle-text,
    .formula-toggle-icon,
    .bias-explain-item,
    .media-spread-axis-labels,
    .media-spread-axis-labels span,
    .media-card-total-row,
    .media-card-total-pill,
    .media-card-total-pill strong,
    .media-spread-meta,
    .media-spread-meta span,
    .media-spread-meta strong,
    .media-rank-num,
    .media-bias-badge,
    .spread-side,
    .spread-side strong,
    .spread-indicator-badge,
    .badge-candidate-kmt,
    .badge-candidate-dpp,
    .num-highlight,
    .maintenance-status-metric,
    .card-metric-title,
    .card-metric-sub,
    .event-calendar-source,
    .sentiment-summary-pills,
    .sentiment-summary-pills span,
    .pill-stat,
    .pill-candidate-name,
    .legend-chip,
    .legend-candidate-title,
    .hint-text,
    .anomaly-filter-control,
    .anomaly-filter-control span,
    .btn-media-range,
    .btn-chart-scroll,
    .metric span.label,
    .party-tag,
    .readonly-mode-pill,
    .readonly-helper-banner,
    .readonly-helper-banner span,
    .risk-ratio,
    .risk-chip,
    .event-chip,
    .candidate-event-title,
    .candidate-event-chip,
    .eyebrow,
    .toggle-icon,
    [id^="btnMediaBodyToggle-"] span,
    #lastSyncTimeText,
    #briefTimeWindow,
    #briefTimestamp,
    #metricSovVal span,
    #metricSovSub,
    #metricNeiVal span,
    #metricNeiSub,
    #metricMaVal span,
    #metricMaSub,
    #metricAsrVal span,
    #metricAsrSub,
    #metricOdrVal span,
    #metricOdrSub,
    #overviewAttentionRule,
    #dpp-news-label,
    #kmt-news-label,
    #anomalyDateRange,
    #anomalyBaselineWindow,
    #anomaly-heading button.panel-action,
    #eventWatchlistHistoryToggle,
    #event-watchlist-active-title span,
    #event-watchlist-cooled-title span,
    #mediaTotalCountBadge,
    #newsTrendInsightBadge,
    #latestJobBadge {
        font-size: 12px;
        line-height: 1.4;
    }

    /* 2.3 觸控熱區守衛（按鈕、選單與互動標籤 >= 36px ~ 40px，易於點擊） */
    button,
    select,
    .btn-primary,
    .btn-secondary,
    .btn-media-range,
    .btn-chart-scroll,
    .panel-action,
    .event-calendar-source,
    .legend-chip,
    .social-nav-link,
    #anomalyWindowSelect {
        min-height: 38px;
        box-sizing: border-box;
    }

    /* 數字穿透稽核標籤 (Clickable Numbers) 轉為舒適點擊膠囊 */
    a.clickable-number,
    .clickable-number,
    .anomaly-all-news-link,
    .anomaly-background-note a.clickable-number,
    .anomaly-background-note .anomaly-all-news-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        min-width: 36px;
        padding: 4px 10px;
        border-radius: 6px;
        background: rgba(253, 186, 116, 0.1);
        border: 1px solid rgba(253, 186, 116, 0.25);
        color: #FDBA74;
        font-weight: 700;
        box-sizing: border-box;
        text-decoration: none;
        vertical-align: middle;
    }

    a.clickable-number:active,
    .clickable-number:active,
    .anomaly-all-news-link:active,
    .anomaly-background-note a.clickable-number:active,
    .anomaly-background-note .anomaly-all-news-link:active {
        background: rgba(253, 186, 116, 0.25);
    }

    /* 門檻與外部對照連結觸控熱區保底 */
    .event-watchlist-threshold-link,
    .btn-trends-link {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        box-sizing: border-box;
        text-decoration: none;
    }

    /* 集中報導事件風險標籤 (Risk Chips) */
    .risk-chip {
        min-height: 36px;
        min-width: 48px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: 6px;
    }

    /* 媒體分析詳細開合按鈕與公式按鈕 */
    [id^="btnMediaBodyToggle-"],
    #btnToggleFormula {
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* 2.4 防寡字與標題斷行優化 (Anti-Orphan & Balanced Headings) */
    h1, h2, h3, h4, h5,
    .section-title,
    .chart-header h3,
    .anomaly-list-heading,
    .event-watchlist-title,
    .event-watchlist-active-title,
    .event-watchlist-cooled-title {
        text-wrap: balance;
        word-break: keep-all;
    }

    /* 標題與清單可點擊連結觸控保護與平衡分行 */
    .event-watchlist-title-action,
    .event-watchlist-ranking-title {
        display: block;
        min-height: 36px;
        line-height: 1.5;
        padding: 6px 0;
        box-sizing: border-box;
        text-wrap: balance;
        word-break: keep-all;
    }

    /* 詞彙標籤維持不可分割行內單元 */
    .event-watchlist-term {
        white-space: nowrap;
        word-break: keep-all;
        flex-shrink: 0;
    }

    /* 區域徽章維持不可分割行內單元 */
    .area-badge,
    .area-badge-lg,
    .area-badge-sub,
    .area-badge-leaf,
    .event-watchlist-count-badge {
        white-space: nowrap;
        word-break: keep-all;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }

    /* 2.5 頂部控制列與導覽 (Header & Section Nav) */
    .glass-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .control-actions-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .control-actions-group .btn-primary,
    .control-actions-group .btn-secondary,
    .control-actions-group .social-nav-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* 2.6 A-1 區 今日戰情總覽 (Overview Panel & Morning Brief) */
    .brief-core-metrics-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .overview-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .overview-stat.attention {
        grid-column: 1 / -1;
    }

    .overview-stat strong {
        min-height: 32px;
        display: flex;
        align-items: center;
    }

    /* 2.7 A-2 區 候選人對決看板 (Candidate PK Grid) - 改採上下排列，不再橫向硬塞 */
    .pk-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .vs-badge-container {
        margin: 4px auto;
    }

    .vs-badge {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .candidate-card {
        width: 100%;
        box-sizing: border-box;
    }

    .candidate-card .metrics-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .news-breakdown-row-top,
    .news-breakdown-row-bottom {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }

    .news-breakdown-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .candidate-event-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .candidate-event-chip {
        min-height: 32px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 2.8 B-1 區 事件持續關注 (Event Watchlist) */
    .event-watchlist-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .event-watchlist-main {
        width: 100%;
        min-width: 0;
    }

    .event-watchlist-metrics {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        justify-content: flex-start;
    }

    .event-watchlist-analysis-heading,
    .event-watchlist-ranking-heading {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    .event-watchlist-active-title,
    .event-watchlist-cooled-title,
    #event-watchlist-active-title,
    #event-watchlist-cooled-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        line-height: 1.5;
    }

    /* 2.9 B-2 區 突發事件異常診斷列表 (Anomaly Cards) - 解決文字重疊與過窄擠壓 */
    .anomaly-list-heading,
    #anomaly-list-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .anomaly-card {
        padding: 14px 14px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 關鍵修復：異常主題行改為垂直流向，徹底杜絕標籤與標題重疊 */
    .anomaly-topic-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }

    .anomaly-topic-label {
        display: inline-block;
        font-weight: 700;
        color: var(--text-secondary);
        font-size: 13px;
    }

    .anomaly-topic-link {
        display: block;
        width: 100%;
        line-height: 1.5;
        min-height: 36px;
        padding: 6px 0;
        box-sizing: border-box;
        text-wrap: balance;
        line-break: strict;
        word-break: normal;
        font-size: 14px;
    }

    .anomaly-media-source {
        display: inline-flex;
        align-items: center;
        margin-left: 0;
        margin-top: 2px;
        font-size: 12px;
        color: var(--text-muted);
    }

    .anomaly-event-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        align-items: center;
    }

    /* 2.10 C 區 重大事件日曆 (Event Calendar) */
    .event-calendar-controls {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .event-calendar-source-tabs,
    .event-calendar-quick-ranges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .event-calendar-risk-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .event-calendar-risk-filters label {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* 2.11 D 區 & E 區 圖表容器與滑動導引 (Scrollable Charts) */
    .chart-scroll-hint {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .btn-chart-scroll {
        min-height: 36px;
        padding: 6px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sentiment-legend-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .legend-chips-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
        width: 100%;
    }

    .legend-chip {
        min-height: 36px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 2.12 F 區 各家媒體立場與情緒分析 (Media Sentiment & Spread) */
    .media-sentiment-time-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .formula-standards-block {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .formula-standard-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .formula-standards-line {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .media-spread-wrap {
        width: 100%;
        box-sizing: border-box;
    }

    .media-spread-axis-labels {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;
        margin-top: 6px;
    }

    .media-spread-axis-labels span {
        white-space: nowrap;
        font-size: 12px;
    }

    .media-candidate-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .media-stats-wrap {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .media-stat-cell {
        white-space: nowrap;
        font-size: 12px;
    }

    /* 2.13 側邊/底部抽屜 (Bottom-Sheet Drawers @ <= 768px) */
    .drawer {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .drawer-content {
        padding: 14px 12px;
    }

    .drawer-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* ==========================================================================
   3. 精巧型手機進階適配 (Compact Mobile @ <= 480px: 375px / 390px / 414px)
   ========================================================================== */
@media (max-width: 480px) {
    .overview-stats {
        grid-template-columns: 1fr;
    }

    .candidate-card .metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .candidate-card .metric {
        padding: 10px 8px;
    }

    .media-spread-axis-labels {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}