/* ════════════════════════════════════════════════════════════
   TRENDS DASHBOARD — PREMIUM v4 (Magazine Edition)
   Ikhayalami · ikhayalami.co.za
   ──────────────────────────────────────────────────────────
   Light theme · brand: orange #F58220 · cyan #56C4F8
   charcoal #0E0E11 · cloud #F7F8FA
   Display:  Playfair Display (already loaded)
   Body:     Outfit (already loaded)
   Mono:     JetBrains Mono (graceful fallback to monospace)
   ──────────────────────────────────────────────────────────
   Loaded AFTER /css/trends.css. v4 selectors only — no
   override of existing v3 styles unless needed.
   ════════════════════════════════════════════════════════════ */

:root {
    --td-orange: #F58220;
    --td-orange-soft: #F89622;
    --td-orange-tint: rgba(245, 130, 32, 0.10);
    --td-orange-tint-2: rgba(245, 130, 32, 0.20);
    --td-cyan: #56C4F8;
    --td-cyan-dark: #3FA9D9;
    --td-cyan-tint: rgba(86, 196, 248, 0.10);
    --td-charcoal: #0E0E11;
    --td-charcoal-soft: #1A1A1F;
    --td-paper: #FDFCF8;
    --td-cloud: #F7F8FA;
    --td-cloud-dark: #EDEEF1;
    --td-border: rgba(14, 14, 17, 0.08);
    --td-border-strong: rgba(14, 14, 17, 0.14);
    --td-rule: rgba(14, 14, 17, 0.06);
    --td-muted: #6C757D;
    --td-muted-soft: #9CA3AF;
    --td-text: #2A3140;
    --td-text-strong: #0E0E11;
    --td-success: #16a34a;
    --td-danger: #dc2626;
    --td-info: #0284c7;
    --td-shadow-sm: 0 1px 2px rgba(14, 14, 17, 0.04), 0 0 0 1px rgba(14, 14, 17, 0.04);
    --td-shadow-md: 0 4px 12px rgba(14, 14, 17, 0.06), 0 0 0 1px rgba(14, 14, 17, 0.04);
    --td-shadow-lg: 0 16px 40px rgba(14, 14, 17, 0.10), 0 0 0 1px rgba(14, 14, 17, 0.04);
    --td-font-display: 'Playfair Display', Georgia, serif;
    --td-font-body: 'Outfit', system-ui, -apple-system, sans-serif;
    --td-font-mono: 'JetBrains Mono', 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ════════════════════════════════════════════════════════════
   v4 BASE — Dashboard panel
   ════════════════════════════════════════════════════════════ */
.trends-dashboard.trends-dashboard--v4 {
    background: #fff;
    color: var(--td-text);
    font-family: var(--td-font-body);
}

.trends-dashboard--v4 .td-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

/* ════════════════════════════════════════════════════════════
   HEADER — properly aligned, search + buttons same height
   ════════════════════════════════════════════════════════════ */
.td-header.td-header--v4 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 16px;
    background: var(--td-paper);
    border-bottom: 1px solid var(--td-border);
    flex-shrink: 0;
    position: relative;
}

.td-header--v4::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--td-orange) 0%, var(--td-cyan) 100%);
    opacity: 0.6;
}

.td-header--v4 .td-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.td-header--v4 .td-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.td-header--v4 .td-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--td-orange);
    box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.18);
    flex-shrink: 0;
    animation: tdPulse 2s ease-in-out infinite;
}

@keyframes tdPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.18);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(245, 130, 32, 0.06);
    }
}

.td-header--v4 .td-title {
    font-family: var(--td-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--td-text-strong);
    line-height: 1.1;
}

.td-header--v4 .td-subtitle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--td-muted);
}

.td-header--v4 .td-subtitle {
    font-weight: 600;
    color: var(--td-text);
}

    .td-header--v4 .td-subtitle.td-loading-pulse {
        color: var(--td-muted);
        animation: tdSubPulse 1.4s ease-in-out infinite;
    }

@keyframes tdSubPulse {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.td-header--v4 .td-as-of {
    font-family: var(--td-font-mono);
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--td-cloud);
    color: var(--td-muted);
    border: 1px solid var(--td-border);
}

/* Filter row — search + province on same line, fully aligned */
.td-filter-row.td-filter-row--v4 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.td-filter-row--v4 .td-loc-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 10px;
    padding: 0 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .td-filter-row--v4 .td-loc-search-wrap:focus-within {
        border-color: var(--td-orange);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
    }

.td-filter-row--v4 .td-loc-icon {
    color: var(--td-muted);
    display: flex;
    flex-shrink: 0;
}

    .td-filter-row--v4 .td-loc-icon svg {
        width: 16px;
        height: 16px;
    }

.td-filter-row--v4 .td-loc-input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 8px;
    font-family: var(--td-font-body);
    font-size: 0.85rem;
    color: var(--td-text-strong);
    min-width: 0;
}

    .td-filter-row--v4 .td-loc-input::placeholder {
        color: var(--td-muted-soft);
    }

.td-filter-row--v4 .td-loc-go {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--td-orange);
    color: #fff;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

    .td-filter-row--v4 .td-loc-go svg {
        width: 14px;
        height: 14px;
    }

    .td-filter-row--v4 .td-loc-go:hover {
        background: var(--td-orange-soft);
    }

    .td-filter-row--v4 .td-loc-go:active {
        transform: scale(0.95);
    }

.td-filter-row--v4 .td-loc-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
}

.td-filter-row--v4 .td-province-dropdown-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 10px;
    padding: 0 10px 0 12px;
}

.td-filter-row--v4 .td-prov-icon {
    color: var(--td-cyan-dark);
    display: flex;
    flex-shrink: 0;
}

    .td-filter-row--v4 .td-prov-icon svg {
        width: 16px;
        height: 16px;
    }

.td-filter-row--v4 .td-province-select {
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--td-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--td-text-strong);
    cursor: pointer;
    padding: 0 4px 0 0;
    height: 100%;
}

/* Right side — Export + Close, vertically aligned with search row */
.td-header-right.td-header-right--v4 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Align with the filter row visually — push down a bit */
    margin-top: 36px;
}

.td-export-btn.td-export-btn--v4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px 0 14px;
    background: linear-gradient(135deg, #F58220 0%, #ff9f4a 100%);
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font-family: var(--td-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(245,130,32,0.28), inset 0 1px 0 rgba(255,255,255,0.20);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.td-export-btn--v4:hover {
    background: linear-gradient(135deg, #F58220 0%, #ff9f4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(245,130,32,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
    filter: brightness(1.04);
}

.td-export-btn--v4:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(245,130,32,0.25), inset 0 1px 2px rgba(0,0,0,0.08);
}

.td-export-btn--v4:focus-visible {
    outline: 2px solid var(--td-blue, #56C4F8);
    outline-offset: 3px;
}

.td-export-btn--v4 svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.td-export-btn--v4:hover svg {
    transform: translateY(2px);
}

.td-export-btn--v4.td-exporting {
    background: linear-gradient(135deg, #F58220 0%, #ff9f4a 100%);
    pointer-events: none;
    opacity: 0.85;
    cursor: wait;
}

    .td-export-btn--v4.td-exporting svg {
        animation: tdExportSpin 0.7s linear infinite;
    }

@keyframes tdExportSpin {
    to {
        transform: rotate(360deg);
    }
}

.td-header-right--v4 .td-close-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--td-border);
    background: #fff;
    color: var(--td-text);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .td-header-right--v4 .td-close-btn:hover {
        background: var(--td-cloud);
        color: var(--td-text-strong);
        border-color: var(--td-border-strong);
    }

    .td-header-right--v4 .td-close-btn svg {
        width: 16px;
        height: 16px;
    }

/* ════════════════════════════════════════════════════════════
   BODY — scrollable editorial content
   ════════════════════════════════════════════════════════════ */
.td-body.td-body--v4 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.td-body--v4::-webkit-scrollbar {
    width: 10px;
}

.td-body--v4::-webkit-scrollbar-track {
    background: var(--td-cloud);
}

.td-body--v4::-webkit-scrollbar-thumb {
    background: var(--td-border-strong);
    border-radius: 5px;
    border: 2px solid var(--td-cloud);
}

    .td-body--v4::-webkit-scrollbar-thumb:hover {
        background: var(--td-muted);
    }

/* ════════════════════════════════════════════════════════════
   EDITORIAL HERO — magazine masthead with digital silhouette
   ════════════════════════════════════════════════════════════ */
.td-editorial-hero {
    position: relative;
    margin: 0;
    padding: 20px;
    background: linear-gradient(180deg, var(--td-paper) 0%, #fff 100%);
    border-bottom: 1px solid var(--td-border);
    overflow: hidden;
}

    .td-editorial-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 24px;
        right: 24px;
        height: 1px;
        background: var(--td-charcoal);
        opacity: 0.85;
    }

.td-eh-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 24px;
    align-items: center;
}

.td-eh-meta {
    min-width: 0;
}

.td-eh-issue {
    font-family: var(--td-font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--td-muted);
    letter-spacing: 0.18em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.td-eh-mast {
    font-family: var(--td-font-display);
    font-weight: 900;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--td-text-strong);
    margin: 0 0 10px;
}

    /* Single-line variant — "The Property Intelligence Edition" inline.
   Sized to ALWAYS fit on one line at any viewport ≥ 380px. */
    .td-eh-mast.td-eh-mast--inline {
        display: block;
        line-height: 1.1;
        font-size: clamp(1.25rem, 2.4vw, 1.85rem);
        margin: 0 0 8px;
        white-space: nowrap;
        letter-spacing: -0.025em;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 4px;
    }

.td-eh-mast--inline .td-eh-mast-word {
    display: inline;
    white-space: nowrap;
}

    .td-eh-mast--inline .td-eh-mast-word + .td-eh-mast-word {
        margin-left: 0.35em;
    }

.td-eh-mast-line {
    display: block;
}

.td-eh-mast-italic {
    font-style: italic;
    color: var(--td-orange);
}

.td-eh-strap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 12px;
    background: var(--td-charcoal);
    color: #fff;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.td-eh-strap-icon {
    display: flex;
}

    .td-eh-strap-icon svg {
        width: 12px;
        height: 12px;
        stroke: #fff;
    }

.td-eh-strap-text {
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-eh-stats {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 10px;
    box-shadow: var(--td-shadow-sm);
    border-left: 3px solid var(--td-orange);
}

.td-eh-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.td-eh-stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--td-muted);
}

.td-eh-stat-value {
    font-family: var(--td-font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--td-text-strong);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.td-eh-stat-value--small {
    font-size: 0.85rem;
}

.td-eh-stat-divider {
    width: 1px;
    background: var(--td-border);
}

.td-eh-conf-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--td-success);
    margin-right: 5px;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
    vertical-align: middle;
}

.td-eh-art {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
}

.td-eh-silhouette {
    width: 100%;
    max-width: 220px;
    height: auto;
}

/* ════════════════════════════════════════════════════════════
   AI STRIP
   ════════════════════════════════════════════════════════════ */
.td-ai-strip.td-ai-strip--v4 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    background: var(--td-cloud);
    border-bottom: 1px solid var(--td-border);
    font-size: 0.7rem;
    color: var(--td-muted);
    line-height: 1.4;
}

.td-ai-strip--v4 strong {
    color: var(--td-orange);
    font-weight: 700;
}

.td-ai-strip--v4 .td-svg-icon {
    color: var(--td-orange);
    display: flex;
}

/* ════════════════════════════════════════════════════════════
   SECTION — eyebrow with number, label, rule
   ════════════════════════════════════════════════════════════ */
.td-section {
    padding: 12px;
    border-bottom: 1px solid var(--td-rule);
}

    .td-section.td-section--last {
        border-bottom: 0;
        padding-bottom: 32px;
    }

.td-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.td-section-num {
    font-family: var(--td-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--td-orange);
    letter-spacing: 0.05em;
}

.td-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--td-text-strong);
    flex-shrink: 0;
}

.td-section-rule {
    flex: 1;
    height: 1px;
    background: var(--td-charcoal);
    opacity: 0.15;
}

/* ════════════════════════════════════════════════════════════
   KPI ROW — three monospace stat cards
   ════════════════════════════════════════════════════════════ */
.td-kpi-row.td-kpi-row--v4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.td-kpi-row--v4 .td-kpi-card {
    position: relative;
    /*    padding: 18px 16px 16px;*/
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 12px;
    box-shadow: var(--td-shadow-sm);
    text-align: center;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .td-kpi-row--v4 .td-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--td-shadow-md);
    }

    .td-kpi-row--v4 .td-kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

.td-kpi-row--v4 .td-kpi-card--prime::before {
    background: var(--td-orange);
}

.td-kpi-row--v4 .td-kpi-card--lending::before {
    background: var(--td-cyan-dark);
}

.td-kpi-row--v4 .td-kpi-card--median::before {
    background: var(--td-charcoal);
}

.td-kpi-row--v4 .td-kpi-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    margin-bottom: 8px;
}

.td-kpi-row--v4 .td-kpi-card--prime .td-kpi-icon-wrap {
    background: var(--td-orange-tint);
    color: var(--td-orange);
}

.td-kpi-row--v4 .td-kpi-card--lending .td-kpi-icon-wrap {
    background: var(--td-cyan-tint);
    color: var(--td-cyan-dark);
}

.td-kpi-row--v4 .td-kpi-card--median .td-kpi-icon-wrap {
    background: rgba(14, 14, 17, 0.06);
    color: var(--td-charcoal);
}

.td-kpi-row--v4 .td-kpi-icon-wrap svg {
    width: 18px;
    height: 18px;
}

.td-kpi-row--v4 .td-kpi-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--td-muted);
    margin-bottom: 6px;
}

.td-kpi-row--v4 .td-kpi-value {
    font-family: var(--td-font-mono);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--td-text-strong);
    margin-bottom: 4px;
}

.td-kpi-row--v4 .td-kpi-card--prime .td-kpi-value {
    color: var(--td-orange);
}

.td-kpi-row--v4 .td-kpi-card--lending .td-kpi-value {
    color: var(--td-cyan-dark);
}

.td-kpi-row--v4 .td-kpi-hint {
    font-size: 0.65rem;
    color: var(--td-muted);
    line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════
   PULL-QUOTE — magazine headline
   ════════════════════════════════════════════════════════════ */
.td-pullquote {
    font-family: var(--td-font-display);
    font-style: italic;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--td-text-strong);
    padding: 4px 0 16px 24px;
    margin: 0 0 12px;
    border-left: 3px solid var(--td-orange);
    position: relative;
}

    .td-pullquote::before {
        content: '\201C';
        position: absolute;
        top: -8px;
        left: 8px;
        font-size: 2.5rem;
        color: var(--td-orange);
        opacity: 0.35;
        font-family: var(--td-font-display);
        line-height: 1;
    }

    .td-pullquote:empty {
        display: none;
    }

/* ════════════════════════════════════════════════════════════
   BUZZWORD — keyword spotlight
   ════════════════════════════════════════════════════════════ */
.td-buzzword.td-buzzword--v4 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--td-orange-tint);
    border: 1px solid var(--td-orange-tint-2);
    border-radius: 10px;
}

.td-buzzword--v4 .td-buzz-pill {
    flex-shrink: 0;
    display: inline-block;
    padding: 4px 10px;
    background: var(--td-orange);
    color: #fff;
    border-radius: 99px;
    font-family: var(--td-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.td-buzzword--v4 .td-buzz-text {
    flex: 1;
    font-size: 0.82rem;
    color: var(--td-text);
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   INSIGHTS GRID — three editorial cards
   ════════════════════════════════════════════════════════════ */
.td-insights-grid.td-insights-grid--v4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.td-insights-grid--v4 .td-insight-card {
    --insight-color: var(--td-orange);
    --insight-bg: var(--td-orange-tint);
    background: #fff;
    border: 1px solid var(--td-border);
    border-left: 3px solid var(--insight-color);
    border-radius: 10px;
    padding: 14px 14px;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .td-insights-grid--v4 .td-insight-card:hover {
        transform: translateY(-1px);
        box-shadow: var(--td-shadow-md);
    }

.td-insights-grid--v4 .td-insight-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.td-insights-grid--v4 .td-insight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--insight-bg);
    color: var(--insight-color);
    flex-shrink: 0;
}

    .td-insights-grid--v4 .td-insight-icon svg {
        width: 16px;
        height: 16px;
    }

.td-insights-grid--v4 .td-insight-title {
    font-family: var(--td-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--td-text-strong);
    line-height: 1.2;
}

.td-insights-grid--v4 .td-insight-text {
    font-size: 0.78rem;
    color: var(--td-text);
    line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   BENTO — magazine bento-box layout
   ════════════════════════════════════════════════════════════ */
.td-bento {
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--td-shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.td-bento--full {
    width: 100%;
}

.td-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.td-bento--wide {
    grid-column: span 2;
}

.td-bento-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--td-rule);
}

.td-bento-head-l {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--td-text-strong);
    letter-spacing: -0.01em;
}

.td-bento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--td-orange-tint);
    color: var(--td-orange);
    flex-shrink: 0;
}

    .td-bento-icon svg {
        width: 14px;
        height: 14px;
    }

.td-bento-meta {
    font-family: var(--td-font-mono);
    font-size: 0.62rem;
    color: var(--td-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.td-badge-count {
    font-family: var(--td-font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--td-orange);
    background: var(--td-orange-tint);
    padding: 1px 7px;
    border-radius: 99px;
    margin-left: 4px;
}

.td-synthesis {
    font-family: var(--td-font-body);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--td-text);
    margin: 0 0 12px;
    padding: 8px 12px;
    background: var(--td-cloud);
    border-radius: 8px;
    border-left: 2px solid var(--td-orange);
}

    .td-synthesis:empty {
        display: none;
    }

.td-chart-wrap {
    position: relative;
    width: 100%;
    flex: 1;
}

.td-chart-wrap-md {
    height: 220px;
}

.td-chart-wrap-sm {
    height: 180px;
}

/* ════════════════════════════════════════════════════════════
   HOT AREAS — editorial article-style listing
   ════════════════════════════════════════════════════════════ */
.td-area-list {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.td-area-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--td-rule);
    cursor: default;
    transition: background 0.15s;
    border-radius: 6px;
    padding-left: 4px;
    padding-right: 4px;
}

    .td-area-row:last-child {
        border-bottom: 0;
    }

    .td-area-row:hover {
        background: var(--td-cloud);
    }

.td-area-rank {
    font-family: var(--td-font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--td-orange);
    text-align: center;
}

.td-area-meta {
    min-width: 0;
}

.td-area-name {
    font-family: var(--td-font-body);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--td-text-strong);
    line-height: 1.2;
}

.td-area-insight {
    font-size: 0.72rem;
    color: var(--td-muted);
    margin-top: 2px;
    line-height: 1.4;
    font-style: italic;
}

.td-area-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.td-area-pct {
    font-family: var(--td-font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

    .td-area-pct.td-signal-rising {
        color: var(--td-success);
    }

    .td-area-pct.td-signal-cooling {
        color: var(--td-danger);
    }

    .td-area-pct.td-signal-stable {
        color: var(--td-info);
    }

    .td-area-pct.td-signal-undervalued {
        color: #9333ea;
    }

.td-area-signal-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.td-signal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .td-signal-dot.rising {
        background: var(--td-success);
        box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
    }

    .td-signal-dot.cooling {
        background: var(--td-danger);
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
    }

    .td-signal-dot.stable {
        background: var(--td-info);
        box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
    }

    .td-signal-dot.undervalued {
        background: #9333ea;
        box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.15);
    }

.td-area-signal-lbl {
    font-family: var(--td-font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--td-muted);
}

/* ════════════════════════════════════════════════════════════
   SECTORS — confidence cards
   ════════════════════════════════════════════════════════════ */
.td-sectors.td-sectors--v4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.td-sectors--v4 .td-sector-card {
    --sector-color: var(--td-orange);
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: var(--td-shadow-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}

    .td-sectors--v4 .td-sector-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--td-shadow-md);
    }

.td-sectors--v4 .td-sc-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

    .td-sectors--v4 .td-sc-icon svg {
        width: 100%;
        height: 100%;
    }

.td-sectors--v4 .td-sc-body {
    flex: 1;
    min-width: 0;
}

.td-sectors--v4 .td-sc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.td-sectors--v4 .td-sc-name {
    font-family: var(--td-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--td-text-strong);
}

.td-sectors--v4 .td-sc-badge {
    font-family: var(--td-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 99px;
}

    .td-sectors--v4 .td-sc-badge.rising {
        background: rgba(22, 163, 74, 0.12);
        color: var(--td-success);
    }

    .td-sectors--v4 .td-sc-badge.cooling {
        background: rgba(220, 38, 38, 0.12);
        color: var(--td-danger);
    }

    .td-sectors--v4 .td-sc-badge.stable {
        background: rgba(2, 132, 199, 0.12);
        color: var(--td-info);
    }

.td-sectors--v4 .td-sc-outlook {
    font-size: 0.78rem;
    color: var(--td-text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.td-sectors--v4 .td-sc-bar-wrap {
    height: 4px;
    background: var(--td-cloud);
    border-radius: 4px;
    overflow: hidden;
}

.td-sectors--v4 .td-sc-bar {
    height: 100%;
    background: var(--sector-color);
    border-radius: 4px;
    transition: width 0.6s ease-out;
}

/* ════════════════════════════════════════════════════════════
   SOURCES & DISCLAIMER
   ════════════════════════════════════════════════════════════ */
.td-sources.td-sources--v4 {
    margin-bottom: 16px;
}

.td-sources--v4 .td-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.td-sources--v4 .td-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--td-cloud);
    border: 1px solid var(--td-border);
    border-radius: 99px;
    font-size: 0.7rem;
    color: var(--td-text);
    font-weight: 500;
}

    .td-sources--v4 .td-source-chip sup {
        font-family: var(--td-font-mono);
        font-size: 0.6rem;
        font-weight: 700;
        color: var(--td-orange);
        margin-right: 2px;
    }

.td-disclaimer.td-disclaimer--v4 {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--td-orange-tint);
    border-left: 3px solid var(--td-orange);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--td-text);
    line-height: 1.55;
}

.td-disclaimer--v4:empty {
    display: none;
}

/* ════════════════════════════════════════════════════════════
   PDF EXPORT OVERLAY — premium UX
   ════════════════════════════════════════════════════════════ */
.td-pdf-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 14, 17, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: tdOverlayFadeIn 0.25s ease-out;
}

@keyframes tdOverlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.td-pdf-modal {
    background: #fff;
    border-radius: 16px;
    padding: 32px 36px;
    width: min(440px, calc(100vw - 32px));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    text-align: center;
    animation: tdModalUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes tdModalUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.td-pdf-modal-head {
    margin-bottom: 22px;
}

.td-pdf-modal-eyebrow {
    font-family: var(--td-font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--td-orange);
    margin-bottom: 8px;
}

.td-pdf-modal-title {
    font-family: var(--td-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--td-text-strong);
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.td-pdf-modal-sub {
    font-size: 0.82rem;
    color: var(--td-muted);
    margin: 0;
    line-height: 1.45;
}

.td-pdf-progress {
    margin-bottom: 18px;
}

.td-pdf-progress-track {
    height: 4px;
    background: var(--td-cloud);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

#tdPriceChart {
    height: 222px !important;
}

.td-pdf-progress-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--td-orange) 0%, var(--td-cyan) 100%);
    background-size: 200% 100%;
    animation: tdProgressShimmer 1.6s linear infinite;
}

@keyframes tdProgressShimmer {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -200% 0;
    }
}

.td-pdf-progress-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

    .td-pdf-progress-steps li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.82rem;
        color: var(--td-muted);
        transition: color 0.2s;
    }

.td-pdf-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--td-cloud);
    border: 2px solid var(--td-border-strong);
    flex-shrink: 0;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.td-pdf-progress-steps li.active {
    color: var(--td-text-strong);
    font-weight: 600;
}

    .td-pdf-progress-steps li.active .td-pdf-step-dot {
        background: var(--td-orange);
        border-color: var(--td-orange);
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.18);
        animation: tdDotPulse 1.2s ease-in-out infinite;
    }

.td-pdf-progress-steps li.done .td-pdf-step-dot {
    background: var(--td-success);
    border-color: var(--td-success);
    box-shadow: none;
    animation: none;
}

@keyframes tdDotPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.18);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(245, 130, 32, 0.06);
    }
}

.td-pdf-cancel {
    margin-top: 4px;
    background: transparent;
    color: var(--td-muted);
    border: 1px solid var(--td-border);
    padding: 8px 18px;
    border-radius: 8px;
    font-family: var(--td-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .td-pdf-cancel:hover {
        background: var(--td-cloud);
        color: var(--td-text);
        border-color: var(--td-border-strong);
    }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first refinements
   ════════════════════════════════════════════════════════════ */

/* Tablet & small desktop */
@media (max-width: 992px) {
    .td-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .td-bento--wide {
        grid-column: span 2;
    }

    .td-insights-grid.td-insights-grid--v4 {
        grid-template-columns: 1fr 1fr;
    }

    .td-insights-grid--v4 .td-insight-card:nth-child(3) {
        grid-column: span 2;
    }

    .td-sectors.td-sectors--v4 {
        grid-template-columns: 1fr;
    }
}

/* Mobile — full mobile-app experience */
@media (max-width: 768px) {
    .td-header.td-header--v4 {
        padding: 14px 16px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .td-header-right.td-header-right--v4 {
        margin-top: 0;
        justify-content: space-between;
        width: 100%;
    }

    .td-export-btn.td-export-btn--v4 {
        flex: 1;
        justify-content: center;
        height: 42px;
    }

    .td-header-right--v4 .td-close-btn {
        width: 42px;
        height: 42px;
    }

    .td-filter-row.td-filter-row--v4 {
        gap: 8px;
    }

    .td-filter-row--v4 .td-loc-search-wrap {
        flex: 1 1 100%;
        max-width: none;
        height: 42px;
    }

    .td-filter-row--v4 .td-province-dropdown-wrap {
        flex: 1 1 100%;
        height: 42px;
    }

    /* Editorial hero — stack vertically */
    .td-editorial-hero {
        padding: 22px 16px 18px;
    }

    .td-eh-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .td-eh-mast {
        font-size: 1.85rem;
    }

    .td-eh-stats {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }

    .td-eh-stat-divider {
        display: none;
    }

    .td-eh-stat {
        flex: 1 1 calc(50% - 5px);
        padding: 4px 0;
    }

    .td-eh-art {
        order: -1;
        max-width: 200px;
        margin: 0 auto;
    }

    .td-ai-strip.td-ai-strip--v4 {
        padding: 8px 16px;
    }

    .td-section {
        padding: 22px 16px 8px;
    }

    .td-kpi-row.td-kpi-row--v4 {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .td-kpi-row--v4 .td-kpi-card {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        gap: 12px;
        text-align: left;
        padding: 14px;
        align-items: center;
    }

    .td-kpi-row--v4 .td-kpi-icon-wrap {
        margin-bottom: 0;
        width: 44px;
        height: 44px;
    }

        .td-kpi-row--v4 .td-kpi-icon-wrap svg {
            width: 20px;
            height: 20px;
        }

    .td-kpi-row--v4 .td-kpi-label {
        margin-bottom: 2px;
        font-size: 0.6rem;
    }

    .td-kpi-row--v4 .td-kpi-value {
        font-size: 1.4rem;
        margin-bottom: 0;
    }

    .td-kpi-row--v4 .td-kpi-hint {
        grid-column: 2 / -1;
        font-size: 0.62rem;
    }

    .td-pullquote {
        font-size: 1rem;
        padding-left: 16px;
    }

        .td-pullquote::before {
            font-size: 2rem;
            left: 4px;
        }

    .td-insights-grid.td-insights-grid--v4 {
        grid-template-columns: 1fr;
    }

    .td-insights-grid--v4 .td-insight-card:nth-child(3) {
        grid-column: auto;
    }

    .td-bento-grid {
        grid-template-columns: 1fr;
    }

    .td-bento--wide {
        grid-column: auto;
    }

    .td-bento {
        padding: 14px;
    }

    .td-chart-wrap-md {
        height: 200px;
    }

    .td-chart-wrap-sm {
        height: 170px;
    }

    .td-area-row {
        grid-template-columns: 26px 1fr auto;
        gap: 10px;
        padding: 10px 4px;
    }

    .td-area-rank {
        font-size: 0.85rem;
    }

    .td-area-name {
        font-size: 0.84rem;
    }

    .td-area-insight {
        font-size: 0.7rem;
    }

    .td-pdf-modal {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .td-pdf-modal-title {
        font-size: 1.15rem;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .td-header--v4 .td-title {
        font-size: 1.1rem;
    }

    .td-eh-mast {
        font-size: 1.55rem;
    }

    .td-eh-stat {
        flex: 1 1 100%;
    }

    .td-export-btn--v4 span {
        display: none;
    }

    .td-kpi-row--v4 .td-kpi-value {
        font-size: 1.25rem;
    }
}

/* ════════════════════════════════════════════════════════════
   v5 ENHANCEMENTS — Single-row header + always-fullscreen modal
   ────────────────────────────────────────────────────────────
   Behaviour: when .td-open is added, JS portals the dashboard
   to <body> so it sits above the entire site. These rules are
   intentionally heavy-handed (!important + high specificity)
   to defeat the v3 trends.css which sets backdrop + max-width.
   ════════════════════════════════════════════════════════════ */

/* Lock background scroll while Trends is open */
body.td-body-locked {
    overflow: hidden !important;
    position: relative !important;
}

/* ── FULLSCREEN MODAL — overrides v3 trends.css completely ── */
/* The outer wrapper (.trends-dashboard) gets fixed to viewport with NO backdrop */
html body .trends-dashboard.td-open,
html body .trends-dashboard.trends-dashboard--v4.td-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    animation: tdMaxIn 0.28s cubic-bezier(0.2, 0.85, 0.3, 1.05) !important;
}

    /* The inner card fills the whole viewport — kills v3's max-width:1280px and margin:32px auto */
    html body .trends-dashboard.td-open .td-inner,
    html body .trends-dashboard.trends-dashboard--v4.td-open .td-inner {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }

@keyframes tdMaxIn {
    from {
        opacity: 0;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── SINGLE-ROW HEADER (v5) ── */
.td-header.td-header--v5 {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 18px !important;
    background: var(--td-paper) !important;
    border-bottom: 1px solid var(--td-border);
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-wrap: nowrap;
    min-height: 60px;
    width: 100% !important;
    max-width: none !important;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

.td-header--v5::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--td-orange) 0%, var(--td-cyan) 100%);
    opacity: 0.55;
}

/* Live status indicator (left-most) */
.td-header--v5 .td-h-status {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    min-width: 0;
    max-width: 220px;
}

.td-header--v5 .td-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--td-orange);
    box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.18);
    flex-shrink: 0;
    animation: tdPulse 2s ease-in-out infinite;
}

.td-header--v5 .td-h-status-text {
    min-width: 0;
    overflow: hidden;
}

.td-header--v5 .td-subtitle {
    display: block;
    font-family: var(--td-font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--td-text-strong);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .td-header--v5 .td-subtitle.td-loading-pulse {
        color: var(--td-muted);
        animation: tdSubPulse 1.4s ease-in-out infinite;
    }

/* Period chip */
.td-header--v5 .td-h-period {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .td-header--v5 .td-h-period:empty {
        display: none;
    }

.td-header--v5 .td-as-of {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 99px;
    background: var(--td-cloud);
    border: 1px solid var(--td-border);
    font-family: var(--td-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--td-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Search input — single row variant */
.td-header--v5 .td-loc-search-wrap--v5 {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 180px;
    max-width: 400px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 10px;
    /* Icon padding fix — comfortable space between icon, text, and submit */
    padding: 0 6px 0 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .td-header--v5 .td-loc-search-wrap--v5:focus-within {
        border-color: var(--td-orange);
        box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
    }

.td-header--v5 .td-loc-icon {
    color: var(--td-muted);
    display: flex;
    flex-shrink: 0;
}

    .td-header--v5 .td-loc-icon svg {
        width: 15px;
        height: 15px;
    }

.td-header--v5 .td-loc-search-wrap--v5 .td-loc-input {
    flex: 1;
    height: 100%;
    border: 0 !important;
    outline: 0;
    background: transparent;
    box-shadow: none !important;
    /* Icon padding fix — separation from icon AND from go-button */
    padding: 0 8px 0 12px;
    font-family: var(--td-font-body);
    font-size: 0.85rem;
    color: var(--td-text-strong);
    min-width: 0;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .td-header--v5 .td-loc-search-wrap--v5 .td-loc-input:focus {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

.td-header--v5 .td-loc-input::placeholder {
    color: var(--td-muted-soft);
}

.td-header--v5 .td-loc-go {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--td-orange);
    color: #fff;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

    .td-header--v5 .td-loc-go svg {
        width: 13px;
        height: 13px;
    }

    .td-header--v5 .td-loc-go:hover {
        background: var(--td-orange-soft);
    }

    .td-header--v5 .td-loc-go:active {
        transform: scale(0.95);
    }

.td-header--v5 .td-loc-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
}

/* Province selector — single row variant */
.td-header--v5 .td-province-dropdown-wrap--v5 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--td-border);
    border-radius: 10px;
    padding: 0 8px 0 12px;
    flex-shrink: 0;
    max-width: 180px;
}

.td-header--v5 .td-prov-icon {
    color: var(--td-cyan-dark);
    display: flex;
    flex-shrink: 0;
}

    .td-header--v5 .td-prov-icon svg {
        width: 15px;
        height: 15px;
    }

.td-header--v5 .td-province-select {
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--td-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--td-text-strong);
    cursor: pointer;
    padding: 0 4px 0 0;
    height: 100%;
    min-width: 0;
    max-width: 130px;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236C757D' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 16px;
}

/* Spacer */
.td-header--v5 .td-h-spacer {
    flex: 1;
    min-width: 0;
}

/* Action group */
.td-header--v5 .td-h-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Export button (v5 sizing — keep premium pill shape from v4) */
.td-header--v5 .td-export-btn--v4 {
    height: 38px;
    padding: 0 16px 0 13px;
    font-size: 0.78rem;
    border-radius: 999px;
}

/* Icon-only buttons (maximize / close) */
.td-header--v5 .td-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--td-border);
    background: #fff;
    color: var(--td-text);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
}

    .td-header--v5 .td-icon-btn:hover {
        background: var(--td-cloud);
        color: var(--td-text-strong);
        border-color: var(--td-border-strong);
    }

    .td-header--v5 .td-icon-btn:active {
        transform: scale(0.95);
    }

    .td-header--v5 .td-icon-btn svg {
        width: 16px;
        height: 16px;
    }

/* Maximise / Restore toggle — REMOVED in v5.1 (always fullscreen) */

/* ── Responsive collapse for the single-row header ── */

/* Tablet: hide period chip when horizontal space tightens */
@media (max-width: 1080px) {
    .td-header--v5 .td-h-period {
        display: none;
    }

    .td-header--v5 .td-h-status {
        max-width: 180px;
    }
}

/* Smaller tablets / large phones — wrap to 2 rows */
@media (max-width: 880px) {
    .td-header.td-header--v5 {
        flex-wrap: wrap;
        padding: 10px 14px;
        gap: 8px;
        min-height: 0;
    }

    .td-header--v5 .td-h-status {
        order: 1;
        flex: 1 1 auto;
        max-width: none;
    }

    .td-header--v5 .td-h-actions {
        order: 2;
    }

    .td-header--v5 .td-loc-search-wrap--v5 {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }

    .td-header--v5 .td-province-dropdown-wrap--v5 {
        order: 4;
        flex: 0 0 auto;
        max-width: 180px;
    }

    .td-header--v5 .td-h-spacer {
        display: none;
    }
}

/* Mobile phones */
@media (max-width: 540px) {
    .td-header.td-header--v5 {
        padding: 10px 12px;
    }

    .td-header--v5 .td-export-btn--v4 span {
        display: none; /* icon-only on mobile */
    }

    .td-header--v5 .td-export-btn--v4 {
        width: 38px;
        padding: 0;
        justify-content: center;
    }

    .td-header--v5 .td-province-dropdown-wrap--v5 {
        flex: 1 1 calc(50% - 4px);
        max-width: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   v6 · TRENDS-ONLY AUTOCOMPLETE DROPDOWN
   ════════════════════════════════════════════════════════════════
   Renders search suggestions for the in-trends location search.
   Isolated from places.js — never mutates window.ikhSelectedLocations.
   Keyboard-navigable, mouse-friendly, mobile-as-app on small screens.
   ════════════════════════════════════════════════════════════════ */

#tdSearchDropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1100;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 18px -8px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
}

.td-ac-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    color: #1A1D20;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
}

    .td-ac-item:hover,
    .td-ac-item.td-ac-item--active {
        background: linear-gradient(135deg, rgba(245, 130, 32, 0.08), rgba(86, 196, 248, 0.04));
    }

    .td-ac-item:active {
        transform: translateY(1px);
    }

.td-ac-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(245, 130, 32, 0.08);
    color: #F58220;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .td-ac-icon svg {
        width: 16px;
        height: 16px;
    }

.td-ac-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.td-ac-main {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1A1D20;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-ac-sec {
    font-size: 0.72rem;
    color: #6B7280;
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The wrap needs position:relative so the dropdown anchors correctly */
.td-loc-search-wrap--v5,
#tdSearchWrap {
    position: relative;
}

/* ════════════════════════════════════════════════════════════════
   v6 · PLACE BRIEF — paragraph + suburbs table + strategic facts
   ════════════════════════════════════════════════════════════════ */

.td-section--brief .td-section-eyebrow {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.td-brief-source-pill {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    padding: 4px 10px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    white-space: nowrap;
}

.td-place-brief {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}

/* Skeleton */
.td-brief-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 26px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.td-skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: tdSkelShimmer 1.4s ease-in-out infinite;
}

.td-skel-w-95 {
    width: 95%;
}

.td-skel-w-90 {
    width: 90%;
}

.td-skel-w-85 {
    width: 85%;
}

.td-skel-w-70 {
    width: 70%;
}

@keyframes tdSkelShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.td-place-brief.td-brief--ready .td-brief-skeleton {
    display: none;
}

.td-place-brief.td-brief--loading {
    opacity: 0.85;
}

/* Paragraph card */
.td-brief-para {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf5 100%);
    border: 1px solid rgba(245, 130, 32, 0.18);
    border-left: 4px solid #F58220;
    border-radius: 18px;
    padding: 24px 28px 24px 56px;
    box-shadow: 0 4px 14px -6px rgba(245, 130, 32, 0.10);
}

.td-brief-quote-mark {
    position: absolute;
    top: 12px;
    left: 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.2rem;
    line-height: 1;
    color: #F58220;
    font-weight: 900;
    pointer-events: none;
}

.td-brief-para p {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.65;
    color: #374151;
    letter-spacing: -0.005em;
}

/* Table card */
.td-brief-table-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.08);
}

.td-brief-table-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #0F172A 0%, #1a2235 100%);
    color: #fff;
}

.td-brief-table-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(245, 130, 32, 0.18);
    color: #ffb877;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .td-brief-table-icon svg {
        width: 16px;
        height: 16px;
    }

.td-brief-table-title {
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.td-brief-table-wrap {
    overflow-x: auto;
}

.td-brief-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

    .td-brief-table thead th {
        text-align: left;
        padding: 12px 22px;
        font-size: 0.66rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #6B7280;
        background: #fafbfc;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .td-brief-table tbody td {
        padding: 14px 22px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.04);
        color: #374151;
        line-height: 1.4;
        vertical-align: top;
    }

    .td-brief-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .td-brief-table tbody tr:hover {
        background: rgba(245, 130, 32, 0.03);
    }

.td-brief-tier {
    font-weight: 700;
    color: #1A1D20;
    display: inline-block;
    padding: 3px 10px;
    background: rgba(245, 130, 32, 0.10);
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.td-brief-price {
    font-weight: 700;
    color: #F58220;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Facts card */
.td-brief-facts-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(86, 196, 248, 0.22);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 4px 14px -8px rgba(86, 196, 248, 0.12);
}

.td-brief-facts-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(86, 196, 248, 0.18);
}

.td-brief-facts-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(86, 196, 248, 0.14);
    color: #0891b2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .td-brief-facts-icon svg {
        width: 16px;
        height: 16px;
    }

.td-brief-facts-title {
    font-weight: 800;
    color: #1A1D20;
    font-size: 0.95rem;
}

.td-brief-facts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .td-brief-facts-list li {
        position: relative;
        padding: 10px 12px 10px 38px;
        font-size: 0.88rem;
        line-height: 1.55;
        color: #374151;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10px;
        border: 1px solid rgba(15, 23, 42, 0.04);
    }

        .td-brief-facts-list li::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 14px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: linear-gradient(135deg, #F58220, #ff9f4a);
            box-shadow: 0 2px 6px rgba(245, 130, 32, 0.35);
        }

        .td-brief-facts-list li::after {
            content: '\2713';
            position: absolute;
            top: 11px;
            left: 16px;
            color: #fff;
            font-size: 0.66rem;
            font-weight: 900;
        }

/* ════════════════════════════════════════════════════════════════
   v6 · COMPACT CHARTS ROW — 4-up grid (replaces large bento)
   ════════════════════════════════════════════════════════════════
   All four key charts share a single tight grid so the dashboard
   reads like an editorial spread. Collapses to 2x2 on tablet and
   1-up on mobile (each tile becomes a full-width app card).
   ════════════════════════════════════════════════════════════════ */

.td-charts-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.td-chart-tile {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    padding: 14px 14px 10px;
    box-shadow: 0 3px 10px -6px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .td-chart-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.14);
    }

.td-chart-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
}

.td-chart-tile-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(245, 130, 32, 0.10);
    color: #F58220;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .td-chart-tile-icon svg {
        width: 14px;
        height: 14px;
    }

.td-chart-tile-title {
    font-weight: 700;
    font-size: 0.78rem;
    color: #1A1D20;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-chart-tile-syn {
    margin: 2px 0 6px;
    font-size: 0.66rem;
    color: #6B7280;
    line-height: 1.35;
    /* Truncate to 2 lines so synthesis text never blows up tile height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.td-chart-tile-body {
    position: relative;
    flex: 1;
    min-height: 0;
    aspect-ratio: 1.05;
    width: 100%;
    /* Fallback for browsers without aspect-ratio */
    height: auto;
}

    .td-chart-tile-body canvas {
        max-width: 100%;
        max-height: 100%;
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

/* Tablet: 2x2 */
@media (max-width: 1024px) {
    .td-charts-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Mobile: stacked */
@media (max-width: 640px) {
    .td-charts-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .td-chart-tile {
        padding: 12px;
        border-radius: 14px;
    }

    .td-chart-tile-body {
        aspect-ratio: 1.5;
    }
}

/* ════════════════════════════════════════════════════════════════
   v6 · MOBILE — native-app feel for the trends dashboard
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Place Brief — tighter padding, shorter quote mark */
    .td-brief-para {
        padding: 18px 18px 18px 44px;
        border-radius: 14px;
    }

    .td-brief-quote-mark {
        font-size: 2.4rem;
        top: 8px;
        left: 14px;
    }

    .td-brief-para p {
        font-size: 0.88rem;
    }

    .td-brief-table-head {
        padding: 14px 16px;
    }

    .td-brief-table thead th {
        padding: 10px 14px;
        font-size: 0.6rem;
    }

    .td-brief-table tbody td {
        padding: 12px 14px;
        font-size: 0.78rem;
    }

    .td-brief-facts-card {
        padding: 16px 16px;
        border-radius: 14px;
    }

    .td-brief-facts-list li {
        padding: 8px 10px 8px 34px;
        font-size: 0.82rem;
    }

    /* Source pill below the section number on mobile (no whitespace squeeze) */
    .td-brief-source-pill {
        margin-left: 0;
        flex-basis: 100%;
        order: 99;
        font-size: 0.58rem;
        padding: 3px 9px;
    }

    /* Autocomplete dropdown — full-width feel on mobile */
    #tdSearchDropdown {
        max-height: 50vh;
    }

    .td-ac-main {
        font-size: 0.84rem;
    }

    .td-ac-sec {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .td-place-brief {
        gap: 14px;
    }

    .td-brief-tier {
        font-size: 0.68rem;
        padding: 2px 8px;
    }

    /* Stack table cells on very small phones — converts each row into a card */
    .td-brief-table thead {
        display: none;
    }

    .td-brief-table tbody tr {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .td-brief-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 4px 0;
        border: 0;
    }

        .td-brief-table tbody td:first-child {
            padding-bottom: 8px;
            border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
            margin-bottom: 6px;
        }
}

/* ── Trends search clear (×) button ─────────────────────────────── */
.td-header--v5 .td-loc-clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border: 0;
    background: transparent;
    color: var(--td-muted);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.12s;
    line-height: 1;
}

    .td-header--v5 .td-loc-clear svg {
        width: 11px;
        height: 11px;
        display: block;
    }

    .td-header--v5 .td-loc-clear:hover {
        background: #f3f4f6;
        color: var(--td-orange);
    }

/* ════════════════════════════════════════════════════════════
   v6 FIX — BUZZWORD wrap on narrow viewports
   ────────────────────────────────────────────────────────────
   Problem: when the AI-generated buzzword phrase is long
   (e.g. "Affordable Housing Solutions"), the pill kept
   `white-space: nowrap` + `flex-shrink: 0` and sat side-by-side
   with the description text. On phone-width trends panels the
   pill ate most of the row, forcing the paragraph into a
   ~6-char column where every word wrapped onto its own line.

   Fix: at ≤520px the pill stacks ABOVE the description and
   stays inline-sized (so it still reads as a tag, not a banner).
   The description then claims the full width and wraps cleanly.

   Belt-and-suspenders: also allow the pill to wrap internally
   if a *single* word is longer than the panel — overflow-wrap
   prevents the pill from punching through the card edge.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
    .td-buzzword,
    .td-buzzword.td-buzzword--v4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .td-buzz-pill,
    .td-buzzword--v4 .td-buzz-pill {
        /* Keep the pill inline-sized so it still looks like a
           tag rather than a full-width header band. */
        align-self: flex-start;
        max-width: 100%;
        /* If the buzzword is a single very long word, allow the
           pill to wrap internally instead of overflowing the card. */
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.3;
    }

    .td-buzz-text,
    .td-buzzword--v4 .td-buzz-text {
        /* Now occupies the full width below the pill — words wrap
           naturally instead of one-per-line. */
        width: 100%;
        flex: 1 1 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MULTI-LOCATION TABS (v10) — #tdLocTabs
   ───────────────────────────────────────────────────────────────
   Renders between the AI Disclaimer and the "01 AI MARKET
   SYNTHESIS" section when the user has 2+ chips in "Searching In".
   Hidden by inline style when 0–1 chips; JS flips display when
   showing. The container is a horizontally-scrolling flex row on
   wide viewports and wraps to multiple rows on narrow ones, so
   adding many locations never breaks layout.
   ═══════════════════════════════════════════════════════════════ */

.td-loc-tabs {
    /* Layout: flex row that wraps on overflow. Each tab is a pill
       that grows with its label — short names like "Sandton" stay
       compact, long ones like "Nelson Mandela Bay" don't force the
       row to overflow. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    margin: 16px 0 22px;
    padding: 10px 12px;
    /* Subtle masthead-matching surface so the strip reads as a
       page-control rather than content. */
    background: linear-gradient(180deg, rgba(255, 246, 232, 0.72) 0%, rgba(255, 250, 244, 0.42) 100%);
    border: 1px solid rgba(247, 128, 24, 0.18);
    border-radius: 14px;
    /* Slight inset shadow to anchor the strip visually */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(60, 30, 0, 0.04);
}

    /* The strip's accessible label — visually hidden but read by AT */
    .td-loc-tabs::before {
        content: 'Locations:';
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(60, 30, 0, 0.58);
        /* Acts as a leading caption, not a tab — pushed against the
       left edge with a small gap before the first pill. */
        margin-right: 4px;
        white-space: nowrap;
        /* Hide on very narrow screens to save horizontal room */
    }

/* Individual tab — pill button. Padding scales with label so a
   single-word "Sandton" pill and a 4-word municipal name both
   look proportionate. */
.td-loc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Generous vertical padding for tap targets; horizontal grows
       with label naturally (no fixed width). */
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(60, 30, 0, 0.14);
    border-radius: 999px;
    color: rgba(60, 30, 0, 0.78);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    /* min-height keeps short labels from looking squashed when
       longer labels in the same row stretch their pills */
    min-height: 32px;
    /* Don't let an extremely long label balloon out of the row */
    max-width: 260px;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

    .td-loc-tab:hover {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(247, 128, 24, 0.40);
        color: rgba(60, 30, 0, 0.92);
    }

    .td-loc-tab:active {
        transform: translateY(1px);
    }

    .td-loc-tab:focus-visible {
        outline: 2px solid rgba(247, 128, 24, 0.55);
        outline-offset: 2px;
    }

/* Active tab — orange brand fill, white label */
.td-loc-tab--active,
.td-loc-tab--active:hover {
    background: linear-gradient(180deg, #F78018 0%, #E96C0A 100%);
    border-color: #C25908;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(247, 128, 24, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* The status dot — solid grey for inactive, white-with-pulse-glow
   for the active one. Pure CSS, no JS animation needed. */
.td-loc-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(60, 30, 0, 0.32);
    flex-shrink: 0;
}

.td-loc-tab--active .td-loc-tab-dot {
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* The label — ellipsises if it would overflow max-width */
.td-loc-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Allow the label to grow to fill the pill but cap at max-width
       of the pill itself (260px above) */
    max-width: 220px;
}

/* ── Narrow viewports: tighter spacing, drop the caption ─────── */
@media (max-width: 640px) {
    .td-loc-tabs {
        padding: 8px 10px;
        gap: 6px 8px;
        margin: 12px 0 16px;
        /* Allow horizontal scroll as an alternative to wrap so the
           strip stays one row on mobile if the user prefers; wrap
           still kicks in if scrolling is disabled by the OS. */
        overflow-x: auto;
        flex-wrap: wrap; /* keep wrap behaviour */
        scrollbar-width: none;
    }

        .td-loc-tabs::-webkit-scrollbar {
            display: none;
        }
        /* Hide the "Locations:" caption on phones — pill labels speak
       for themselves and we want every pixel for tap targets. */
        .td-loc-tabs::before {
            display: none;
        }

    .td-loc-tab {
        padding: 6px 12px;
        font-size: 12.5px;
        min-height: 30px;
        max-width: 200px;
    }

    .td-loc-tab-label {
        max-width: 160px;
    }
}

/* ── Very narrow (tiny phones, embedded chat) ────────────────── */
@media (max-width: 380px) {
    .td-loc-tab {
        padding: 5px 10px;
        max-width: 150px;
    }

    .td-loc-tab-label {
        max-width: 110px;
    }
}

/* ── Lots of locations (5+) — switch to vertical-rhythm-friendly
      density so a 6-chip row doesn't crowd the page ──────────── */
.td-loc-tabs[aria-label*="("][aria-label*="5"],
.td-loc-tabs[aria-label*="("][aria-label*="6"],
.td-loc-tabs[aria-label*="("][aria-label*="7"],
.td-loc-tabs[aria-label*="("][aria-label*="8"],
.td-loc-tabs[aria-label*="("][aria-label*="9"] {
    /* Slightly looser line-height between wrapped rows */
    gap: 10px 10px;
}


/* ═══════════════════════════════════════════════════════════════
   PLACE IDENTITY STRIP (v11) — #tdPlaceIdentity
   ───────────────────────────────────────────────────────────────
   Three single-sentence facts about the selected location, rendered
   between the LOCATIONS tabs and "01 AI MARKET SYNTHESIS":
       • History (amber tint)
       • Cool fact (orange tint, brand-aligned)
       • Weather (blue tint)
   JS shows/hides the container; CSS handles all visual treatment.
   ═══════════════════════════════════════════════════════════════ */

.td-place-identity {
    /* Container — a single card with three horizontal rows. We pad
       generously vertically so each row has breathing room without
       feeling like a giant box; the strip should read as "ambient
       page context" not "headline content". */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 24px;
    padding: 16px 18px;
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.86) 0%, rgba(255, 246, 238, 0.62) 100%);
    border: 1px solid rgba(247, 128, 24, 0.16);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 3px rgba(60, 30, 0, 0.04);
}

/* Each row — icon + label + text. CSS Grid keeps the label column
   a fixed width so the body text aligns down the strip even when
   labels in different languages have different widths. */
.td-pi-row {
    display: grid;
    grid-template-columns: 22px 96px 1fr;
    align-items: start;
    gap: 10px 12px;
    line-height: 1.5;
    /* Row-local accent — overridden by the modifier classes below.
       Falls back to brand orange if no modifier is matched. */
    --pi-accent: #F58220;
}

/* Per-row accents — used by both icon colour and label colour */
.td-pi-row--history {
    --pi-accent: #C26B00;
}
/* amber */
.td-pi-row--cool {
    --pi-accent: #F58220;
}
/* brand orange */
.td-pi-row--weather {
    --pi-accent: #3FA9D9;
}
/* sky blue */

.td-pi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--pi-accent);
    background: color-mix(in srgb, var(--pi-accent) 12%, transparent);
    /* Sits a hair below text baseline — small visual tweak so the
       icon looks centred on the FIRST line of body text rather than
       on the row centroid (matters when the text wraps to 2 lines). */
    margin-top: 1px;
    flex-shrink: 0;
}

.td-pi-label {
    /* Caption-style — short, uppercase, accent-coloured. The 96px
       fixed column above keeps these visually aligned. */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pi-accent);
    /* Match the icon's optical baseline */
    margin-top: 3px;
    white-space: nowrap;
    /* Truncate gracefully if a translation balloons (Setswana labels
       can run long). Better to ellipsis than to break the grid. */
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-pi-text {
    /* Body — reads as a magazine pull-fact. Slightly heavier than
       body copy so it doesn't recede into the page background. */
    font-size: 14px;
    color: rgba(30, 18, 0, 0.86);
    line-height: 1.5;
    /* No max-width — let the sentence breathe to the full strip width.
       For very wide viewports (1400px+) the section container itself
       caps at a comfortable reading column. */
}

/* ── Tablet (≤900px): drop the label column to its own line so the
      body text gets full width. The label becomes a small ribbon
      above its sentence. ───────────────────────────────────────── */
@media (max-width: 900px) {
    .td-pi-row {
        grid-template-columns: 22px 1fr;
        grid-template-rows: auto auto;
        row-gap: 4px;
    }

    .td-pi-label {
        grid-column: 2;
        grid-row: 1;
        margin-top: 4px;
    }

    .td-pi-text {
        grid-column: 2;
        grid-row: 2;
        font-size: 13.5px;
    }

    .td-pi-icon {
        grid-row: 1 / span 2;
        align-self: start;
        margin-top: 2px;
    }
}

/* ── Phone (≤480px): tighter padding, smaller font ─────────────── */
@media (max-width: 480px) {
    .td-place-identity {
        padding: 12px 14px;
        margin: 14px 0 18px;
        gap: 12px;
    }

    .td-pi-text {
        font-size: 13px;
    }

    .td-pi-label {
        font-size: 10.5px;
    }
}

/* ── Dark-mode safe — if a dark-mode pass ever ships, these tokens
      take over without needing a separate selector for this strip
      since we use the same brand orange that already works on both. */