/*
 * Mobile Responsiveness — Shared across all pages
 * Breakpoints: 640px (phone), 768px (tablet), 1024px (desktop)
 *
 * CRITICAL: Do NOT modify chart heights or overflow properties.
 * Sparklines: max-height 44px, charts: 180px/220px tall.
 * See dashboard integrity guard for details.
 */

/* ═══════════════════════════════════════════════════════
   TABLET (641px – 1024px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Nav */
    .topnav {
        padding: 14px 16px;
    }

    /* Dashboard header */
    .dash-header {
        padding: 24px 16px 0;
    }

    /* Compact overview */
    .compact-ov {
        padding: 0 16px;
    }

    .cov-details-wrap {
        padding: 8px 16px 0;
    }

    /* Charts area */
    .charts-area {
        padding: 0 16px;
    }

    /* Tab bar horizontal scroll */
    .tab-bar {
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tab-bar::-webkit-scrollbar {
        display: none;
    }

    /* Stats row: 2-col on tablet */
    .stats-row {
        padding: 0 16px;
    }

    /* Footer */
    .dash-footer {
        padding: 24px 16px;
    }

    /* Detail pages */
    .page-hero {
        padding: 60px 16px 20px;
    }

    /* Pulse card */
    .pulse-card {
        padding: 24px 20px;
    }

    /* Premium sections */
    .premium-upgrade,
    .premium-comment-section {
        padding: 16px 18px;
    }
}

/* ═══════════════════════════════════════════════════════
   PHONE (≤ 640px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Navigation ── */
    .topnav {
        padding: 12px 14px;
        gap: 8px;
    }

    .topnav .logo {
        font-size: 17px;
    }

    .topnav .back-link {
        font-size: 12px;
        padding: 5px 10px;
    }

    .topnav .back-link span {
        display: none;
    }

    /* Admin nav tabs — stack on mobile */
    .topnav-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-tabs {
        display: flex !important;
        gap: 4px;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tab {
        font-size: 12px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    /* ── Dashboard Header ── */
    .dash-header {
        padding: 16px 14px 0;
    }

    .dash-header h1 {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .dash-header .subtitle {
        font-size: 13px;
        margin-bottom: 16px;
    }

    /* ── Tab Bar ── */
    .tab-bar {
        padding: 0 14px;
        gap: 0;
        margin-bottom: 16px;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* ── Compact Overview Metrics ── */
    .compact-ov {
        padding: 0 14px;
    }

    .cov-details-wrap {
        padding: 8px 14px 0;
    }

    .cov-row {
        grid-template-columns: 1fr 120px 16px;
        gap: 10px;
        padding: 8px 12px;
        min-height: 50px;
    }

    .cov-metric-label {
        font-size: 10px;
    }

    .cov-metric-value {
        font-size: 18px;
    }

    .cov-metric-change {
        font-size: 11px;
    }

    .cov-spark-wrap {
        width: 120px;
    }

    .cov-category-hdr {
        padding: 4px 12px;
        font-size: 8px;
    }

    /* ── Stats Grid ── */
    .stats-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 14px;
    }

    .stat-card {
        padding: 14px 16px;
    }

    .stat-card .stat-label {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .stat-card .stat-value {
        font-size: 22px;
    }

    .stat-card .stat-change {
        font-size: 12px;
    }

    /* ── Charts ── */
    .charts-area {
        padding: 0 14px;
        margin-bottom: 20px;
    }

    .chart-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    .chart-card {
        padding: 16px 14px;
        border-radius: 10px;
    }

    .chart-card h3 {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .chart-card .chart-sub {
        font-size: 12px;
        margin-bottom: 12px;
    }

    /*
     * CRITICAL: chart-wrap heights stay at 180px / 220px (tall).
     * overflow: hidden MUST remain.
     * Sparkline canvases capped at 44px.
     * DO NOT MODIFY — see bug history #826714 through #1050690.
     */

    /* ── Data Tables ── */
    .table-card {
        padding: 14px;
        border-radius: 10px;
    }

    .table-card h3 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .data-table {
        font-size: 12px;
    }

    .data-table th {
        padding: 8px 8px;
        font-size: 10px;
    }

    .data-table td {
        padding: 8px 8px;
    }

    /* ── Share Buttons ── */
    .share-row {
        padding: 6px 0 2px;
    }

    .share-btn {
        padding: 6px 10px;
        font-size: 11px;
        /* Min touch target 44x44 via padding */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ── Footer ── */
    .dash-footer {
        padding: 20px 14px;
    }

    .dash-footer p {
        font-size: 12px;
    }

    /* ── Pulse / Resident Poll Section ── */
    .pulse-card {
        padding: 18px 14px;
    }

    .pulse-card .pulse-question {
        font-size: 17px;
    }

    .pulse-card .pulse-meta {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .pulse-option-btn {
        padding: 12px 14px;
        font-size: 14px;
    }

    .pulse-result-item {
        padding: 12px 14px;
    }

    .pulse-result-item .result-label {
        font-size: 13px;
    }

    .pulse-result-item .result-stats {
        font-size: 13px;
    }

    .pulse-result-item .result-stats .result-count {
        font-size: 11px;
    }

    .pulse-chart-wrap {
        height: 200px;
    }

    /* ── Historical Polls ── */
    .history-poll {
        padding: 14px;
    }

    .history-poll .history-question {
        font-size: 14px;
    }

    .history-bar-row {
        gap: 8px;
        font-size: 12px;
    }

    .history-bar-label {
        width: 100px;
        font-size: 11px;
    }

    .history-bar-pct {
        width: 36px;
        font-size: 12px;
    }

    /* ── Premium Upgrade CTA ── */
    .premium-upgrade {
        padding: 14px 16px;
    }

    .premium-upgrade h4 {
        font-size: 14px;
    }

    .premium-upgrade > p {
        font-size: 12px;
    }

    .premium-verify-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .premium-email-input {
        width: 100%;
        min-width: 0;
    }

    .btn-verify,
    .btn-premium {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ── Premium Comment ── */
    .premium-comment-section {
        padding: 14px 16px;
    }

    /* ── Newsletter Widget (inline) ── */
    #nl-widget {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        margin: 16px 0 6px;
    }

    #nl-widget .nl-text strong {
        font-size: 14px;
    }

    #nl-widget .nl-text span {
        font-size: 12px;
    }

    #nl-widget .nl-form {
        flex: 1 1 auto;
    }

    /* ── Newsletter Bar (floating) ── */
    .nl-bar {
        padding: 14px 14px 16px;
    }

    .nl-content {
        gap: 10px;
    }

    .nl-left {
        min-width: 100%;
    }

    .nl-form {
        width: 100%;
    }

    .nl-input {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    .nl-sub {
        display: none;
    }

    .nl-btn {
        flex-shrink: 0;
        min-height: 44px;
    }

    /* ── Source Tag ── */
    .source-tag {
        font-size: 11px;
    }

    /* ── Toast ── */
    .share-toast {
        font-size: 12px;
        padding: 8px 16px;
    }

    /* ═══ Detail Pages ═══ */
    .page-hero {
        padding: 50px 14px 16px;
    }

    .page-hero h1 {
        font-size: 24px;
    }

    .page-hero p {
        font-size: 13px;
    }

    /* Page header (used in detail + share pages) */
    .page-header h1 {
        font-size: 24px;
    }

    .page-header .tag {
        font-size: 10px;
    }

    .page-header .lead {
        font-size: 14px;
    }

    /* Page wrap padding */
    .page-wrap {
        padding: 24px 14px 40px;
    }

    /* Score banner (health-score page) */
    .score-banner {
        flex-direction: column;
        gap: 16px;
    }

    .score-circle .score-num {
        font-size: 48px;
    }

    /* Trend explainer grid */
    .trend-explainer {
        grid-template-columns: 1fr;
    }

    /* Weight labels */
    .weight-label {
        width: 100px;
        font-size: 12px;
    }

    /* Rank banner (county-rank page) */
    .rank-banner {
        flex-direction: column;
    }

    /* Attribution breakdown */
    .attr-body {
        flex: 0 0 100px;
    }

    .attr-why {
        display: none;
    }

    .attr-pct {
        flex: 0 0 36px;
        font-size: 13px;
    }

    .attr-two-col {
        grid-template-columns: 1fr;
    }

    /* Page footer */
    .page-footer {
        margin-top: 40px;
        padding-top: 20px;
    }

    /* ═══ Admin Analytics ═══ */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .row-2 {
        grid-template-columns: 1fr;
    }

    /* ═══ Index / Landing Page ═══ */

    /* Hero section */
    .hero {
        padding: 80px 16px 60px;
        min-height: auto;
    }

    .hero h1 {
        letter-spacing: -1px;
    }

    .hero-sub {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 4px 12px;
        margin-bottom: 20px;
    }

    /* Newsletter on landing */
    .newsletter-signup {
        padding: 18px;
        max-width: 100%;
    }

    .newsletter-form input {
        min-width: 160px;
    }

    .newsletter-form button {
        min-height: 44px;
        width: 100%;
    }

    /* Dashboard container on index page */
    .dashboard-container {
        padding: 16px 14px 40px;
    }

    .metric-stat-card {
        padding: 14px;
    }

    .metric-stat-card .stat-label {
        font-size: 10px;
    }

    .metric-stat-card .stat-value {
        font-size: 20px;
    }

    /* Ranking banner on index */
    .ranking-banner {
        padding: 8px 14px 0;
    }

    .ranking-banner-inner {
        padding: 14px 16px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .ranking-badge .rank-num {
        font-size: 24px;
    }

    .ranking-text h3 {
        font-size: 14px;
    }

    .sub-rank-item {
        font-size: 11px;
    }

    /* Unified chart cards on index */
    .chart-card-unified {
        padding: 14px;
    }

    .chart-wrap-unified {
        height: 140px;
    }

    /* Meta items row */
    .meta-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .meta-item .meta-label {
        font-size: 10px;
    }

    .meta-item .meta-value {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════
   SMALL PHONE (≤ 375px) — iPhone SE and smaller
   ═══════════════════════════════════════════════════════ */
@media (max-width: 375px) {
    .topnav .logo {
        font-size: 15px;
    }

    .dash-header h1 {
        font-size: 20px;
    }

    .cov-row {
        grid-template-columns: 1fr 90px 14px;
        gap: 6px;
        padding: 6px 10px;
    }

    .cov-spark-wrap {
        width: 90px;
    }

    .cov-metric-value {
        font-size: 16px;
    }

    .cov-row-arrow {
        font-size: 14px;
    }

    .stat-card .stat-value {
        font-size: 20px;
    }

    .chart-card {
        padding: 12px 10px;
    }

    .chart-card h3 {
        font-size: 13px;
    }

    .chart-card .chart-sub {
        font-size: 11px;
    }

    .tab-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .hero h1 {
        letter-spacing: -0.5px;
    }

    .hero-sub {
        font-size: 15px;
    }

    /* History poll bars */
    .history-bar-label {
        width: 80px;
        font-size: 10px;
    }

    /* Stats grid on admin — single column at very small */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Metric stat cards */
    .metric-stat-card .stat-value {
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════════
   TOUCH TARGETS — ensure all interactive elements
   meet 44x44px minimum for accessibility
   ═══════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    .tab-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .cov-row {
        min-height: 52px;
    }

    .share-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .retry-btn {
        min-height: 44px;
        padding: 10px 20px;
    }

    .hero-methodology-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .cov-details-btn {
        min-height: 48px;
    }

    .btn-premium,
    .btn-verify,
    .btn-submit-comment,
    .pulse-option-btn {
        min-height: 48px;
    }

    .nl-btn {
        min-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════
   LANDSCAPE PHONE — ensure content doesn't overflow
   ═══════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 40px 16px 30px;
    }
}