/* Sentiment trends — small multiples.
   Colours come from the validated palette: series #2a78d6 light / #3987e5 dark
   (both pass lightness, chroma, and >=3:1 contrast on their surface). Text and
   gridlines wear ink tokens, never the series colour. */

.viz-root {
    color-scheme: light;
    --surface-1: #fcfcfb;
    --surface-2: #ffffff;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #8a8880;
    --grid: #e7e6e1;
    --series-1: #2a78d6;
    --reference: #b9b7ae;
    /* Active control: measured, not guessed — 6.35:1 text on fill,
       6.19:1 fill against the light surface. */
    --active-fill: #1f5fae;
    --active-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .viz-root {
        color-scheme: dark;
        --surface-1: #1a1a19;
        --surface-2: #232322;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --text-muted: #8e8d84;
        --grid: #333331;
        --series-1: #3987e5;
        --reference: #5a5953;
        /* 7.18:1 text on fill, 6.36:1 fill against the dark surface. */
        --active-fill: #5b9ff0;
        --active-ink: #0b0b0b;
    }
}

:root[data-theme="dark"] .viz-root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8e8d84;
    --grid: #333331;
    --series-1: #3987e5;
    --reference: #5a5953;
    /* 7.18:1 text on fill, 6.36:1 fill against the dark surface. */
    --active-fill: #5b9ff0;
    --active-ink: #0b0b0b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--surface-1);
    color: var(--text-primary);
}

.viz-root { min-height: 100vh; padding: 0 0 48px; }

.trends-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 28px 0;
    max-width: 1320px;
    margin: 0 auto;
}

.trends-head h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.trends-head .back {
    margin-left: auto;
    font-size: .82rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.trends-head .back:hover { color: var(--text-primary); }

.trends-sub {
    max-width: 1320px;
    margin: 6px auto 0;
    padding: 0 28px;
    color: var(--text-secondary);
    font-size: .85rem;
    line-height: 1.5;
}

/* Filters sit in one row above the charts. */
.trends-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 18px auto 0;
    padding: 0 28px;
}

.trends-controls button {
    border: 1px solid var(--grid);
    background: var(--surface-2);
    color: var(--text-secondary);
    border-radius: 7px;
    padding: 6px 13px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.trends-controls button:hover { color: var(--text-primary); }
/* The inverted ink/surface pair was too easy to lose against the page.
   A filled pill in a measured blue reads as active in either mode. */
.trends-controls button[aria-pressed="true"] {
    background: var(--active-fill);
    color: var(--active-ink);
    border-color: var(--active-fill);
}
.trends-controls .spacer { flex: 1; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
    max-width: 1320px;
    margin: 18px auto 0;
    padding: 0 28px;
}

.panel {
    background: var(--surface-2);
    border: 1px solid var(--grid);
    border-radius: 11px;
    padding: 13px 15px 9px;
}

.panel-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.panel-name {
    font-size: .88rem;
    font-weight: 650;
    color: var(--text-primary);
}

.panel-value {
    margin-left: auto;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}

.panel-meta {
    font-size: .7rem;
    color: var(--text-muted);
    margin-bottom: 7px;
}

.panel svg { display: block; width: 100%; height: 108px; overflow: visible; }

.axis-label { font-size: 9px; fill: var(--text-muted); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.series-line { fill: none; stroke: var(--series-1); stroke-width: 2;
               stroke-linejoin: round; stroke-linecap: round; }
.reference-line { fill: none; stroke: var(--reference); stroke-width: 1;
                  stroke-dasharray: 0; opacity: .8; }
.point { fill: var(--series-1); stroke: var(--surface-2); stroke-width: 2; }
.point-hit { fill: transparent; cursor: pointer; }
.end-label { font-size: 10px; font-weight: 650; fill: var(--text-secondary); }

.empty {
    color: var(--text-muted);
    font-size: .78rem;
    padding: 26px 0;
    text-align: center;
}

/* Tooltip */
#tip {
    position: fixed;
    pointer-events: none;
    background: var(--surface-2);
    border: 1px solid var(--grid);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: .75rem;
    color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
    opacity: 0;
    transition: opacity .1s;
    z-index: 50;
    line-height: 1.45;
}
#tip .t-date { color: var(--text-muted); font-size: .68rem; }
#tip .t-val { font-weight: 700; }

/* Table view — identity and values never gated behind colour */
.table-wrap { max-width: 1320px; margin: 18px auto 0; padding: 0 28px; }
table { border-collapse: collapse; width: 100%; font-size: .8rem; }
caption { text-align: left; color: var(--text-secondary); font-size: .8rem;
          padding-bottom: 8px; }
th, td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-secondary); font-weight: 600; }
td { font-variant-numeric: tabular-nums; }

.note {
    max-width: 1320px;
    margin: 22px auto 0;
    padding: 0 28px;
    color: var(--text-muted);
    font-size: .74rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .trends-head, .trends-sub, .trends-controls, .grid, .table-wrap, .note {
        padding-left: 16px;
        padding-right: 16px;
    }
    .grid { grid-template-columns: 1fr; }
}