/* ─────────────────────────────────────────────────────────────────────
   Components — story cards, sentiment chips, bias chips, filters, etc.
   Editorial feel: serif headlines, mono metadata, restrained color.
   Cocina de Noche: sienna accent, square dots/chips, no rounding.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Kicker — the small label that sits above a headline.
       Used for section ("politics"), topic, or sentiment context.
       `display: flex` (not inline-flex) so a sibling headline always
       drops to its own line; inside a flex parent the kicker just
       becomes a flex item regardless. ─── */
.kicker {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
    width: fit-content;
}

.kicker-muted { color: var(--ink-faint); }

.kicker-sep::before {
    content: "·";
    color: var(--ink-faint);
    margin: 0 var(--sp-1);
}

/* ─── Byline — outlet name, timestamp. Mono, small. ─── */
.byline {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.byline .outlet {
    color: var(--accent);
    font-weight: 400;
}

/* ─── Story card variants ─── */

/* Generic — used as a list item in the latest feed. */
.story {
    display: block;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--surface-rule);
    transition: background var(--t-fast);
}

.story:hover {
    background: linear-gradient(
        90deg,
        rgba(201, 123, 94, 0.03) 0%,
        transparent 100%);
}

.story-head {
    display: block;
    font-family: var(--serif);
    font-size: var(--fs-h4);
    color: var(--ink-headline);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-2);
    transition: color var(--t-fast);
}

.story:hover .story-head { color: var(--accent); }

.story-lead {
    color: var(--ink-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--sp-2);
}

.story-foot {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
}

/* Hero variant — the front-page lead story. */
.story-hero .story-head {
    font-size: var(--fs-h1);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: var(--lh-tight);
    margin: var(--sp-2) 0 var(--sp-3);
}

.story-hero .story-lead {
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--fs-lead);
    color: var(--ink-body);
    -webkit-line-clamp: 3;
}

/* Column item — three-column "top of the news". */
.story-col {
    display: block;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--surface-rule);
}
.story-col:last-child { border-bottom: 0; }

.story-col .story-head {
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    color: var(--ink-headline);
}

.story-col:hover .story-head { color: var(--accent); }

.story-col .byline {
    margin-top: var(--sp-2);
}

/* ─── Cluster card — a cross-outlet story group ─── */
.cluster {
    display: block;
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--surface-rule);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
    transition: border-color var(--t-fast), transform var(--t-fast);
}

.cluster:hover {
    border-color: var(--surface-rule-strong);
}

.cluster-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cluster-count {
    color: var(--accent);
    font-weight: 500;
}

.cluster-title {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    color: var(--ink-headline);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-3);
}

.cluster:hover .cluster-title { color: var(--accent); }

.cluster-outlets {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-left: var(--sp-3);
    border-left: 2px solid var(--surface-rule-strong);
}

.outlet-row {
    display: grid;
    grid-template-columns: 130px 16px 1fr;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-meta);
}

.outlet-row .outlet {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outlet-row .headline {
    color: var(--ink-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outlet-row:hover .headline { color: var(--ink-headline); }

/* ─── Sentiment / bias / topic chips ─── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}

.chip-pos  { background: var(--pos-soft);  color: var(--pos);  }
.chip-neu  { background: var(--neu-soft);  color: var(--neu);  }
.chip-neg  { background: var(--neg-soft);  color: var(--neg);  }

/* Square pixel dots. */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}
.dot-pos { background: var(--pos); }
.dot-neu { background: var(--neu); }
.dot-neg { background: var(--neg); }
.dot-unknown { background: var(--surface-rule-strong); }

.bias-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 7px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
}
.bias-chip::before {
    content: "";
    width: 6px; height: 6px;
    background: currentColor;
}

.bias-statehood    { color: var(--bias-statehood); }
.bias-independence { color: var(--bias-independence); }
.bias-commonwealth { color: var(--bias-commonwealth); }
.bias-neutral      { color: var(--bias-neutral); }
.bias-unknown      { color: var(--bias-unknown); }

.topic-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    border: 1px solid var(--surface-rule);
    border-radius: var(--radius-sm);
}

/* ─── Filter list (sidebar) ─── */
.filter-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.filter-list button,
.filter-list a {
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-family: var(--sans);
    font-size: var(--fs-meta);
    color: var(--ink-muted);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    transition: background var(--t-fast), color var(--t-fast);
}

.filter-list button:hover,
.filter-list a:hover {
    background: var(--surface-raised);
    color: var(--ink-headline);
}

.filter-list .is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

.filter-count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-faint);
}
.is-active .filter-count { color: var(--accent-strong); }

/* Segmented toggle — used for view switching. */
.segment {
    display: inline-flex;
    padding: 2px;
    background: var(--surface-raised);
    border: 1px solid var(--surface-rule);
    border-radius: var(--radius-md);
}
.segment button {
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-radius: var(--radius-sm);
    transition: all var(--t-fast);
}
.segment button:hover { color: var(--ink-headline); }
.segment button.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ─── State views ─── */
.loading {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.loading::after {
    content: "";
    animation: dots 1.4s infinite;
}

@keyframes dots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}

.empty {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--fs-lead);
}

.error {
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    color: var(--neg);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    border: 1px solid var(--surface-rule);
    border-radius: var(--radius-md);
    background: var(--neg-soft);
}

/* ─── Analytics chart container ─── */
.card {
    padding: var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--surface-rule);
    border-radius: var(--radius-lg);
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--surface-rule);
    gap: var(--sp-3);
}

.card-title {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    color: var(--ink-headline);
    font-weight: 600;
}

.card-meta {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Inline metric row — used in card heads or summaries. */
.metric-row {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
}
.metric {
    display: flex;
    flex-direction: column;
}
.metric-value {
    font-family: var(--serif);
    font-size: var(--fs-h3);
    color: var(--ink-headline);
    font-weight: 600;
    line-height: 1;
}
.metric-label {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: var(--sp-1);
}

/* ─── Sentiment bar (article detail) ─── */
.sentiment-bar {
    display: flex;
    height: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-rule);
    margin: var(--sp-2) 0;
}
.sentiment-bar > span { display: block; height: 100%; }
.sentiment-bar .seg-pos { background: var(--pos); }
.sentiment-bar .seg-neu { background: var(--neu); }
.sentiment-bar .seg-neg { background: var(--neg); }

.sentiment-legend {
    display: flex;
    gap: var(--sp-4);
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Data table (sources, source comparison) ─── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-meta);
}
.data-table th,
.data-table td {
    padding: var(--sp-3) var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--surface-rule);
}
.data-table th {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}
.data-table td {
    color: var(--ink-body);
}
.data-table tr:hover td { background: var(--surface-raised); }
.data-table .num {
    font-family: var(--mono);
    text-align: right;
    color: var(--ink-headline);
}

/* ─── Fade-in animation (reused across cards) ─── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.story, .cluster, .card {
    animation: fadeUp 0.35s ease both;
}