/*
 * Matador - Macro Update Dashboard
 * Clean minimal light theme
 * Three-column table layout: Signal | Fact | Explanation
 */

:root {
    /* Core palette — clean light theme */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: rgba(59, 130, 246, 0.08);

    /* Legacy aliases — keep code references working */
    --burgundy: var(--accent);
    --burgundy-dark: var(--accent-hover);
    --burgundy-light: var(--accent);
    --crimson: var(--accent);
    --crimson-dark: var(--accent-hover);
    --crimson-light: var(--accent);
    --gold: var(--accent);
    --gold-light: #93c5fd;
    --gold-muted: #6b7280;

    /* Neutrals — light theme */
    --black: #ffffff;
    --charcoal: #f9fafb;
    --graphite: #f9fafb;
    --slate: #e5e7eb;
    --steel: #d1d5db;
    --silver: #6b7280;
    --pearl: #374151;
    --white: #111827;
    --cream: #111827;

    /* Functional aliases */
    --border: #e5e7eb;
    --border-subtle: #f3f4f6;
    --surface: #f9fafb;
    --muted: #6b7280;

    /* Traffic Light Signals */
    --signal-green: #22C55E;
    --signal-orange: #F59E0B;
    --signal-red: #EF4444;

    /* Typography — Inter only */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Spacing — generous, editorial */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Radii — modern rounded */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background: #ffffff;
    color: #374151;
    line-height: 1.65;
    min-height: 100vh;
    letter-spacing: 0.01em;
}

/* Dashboard Container */
.dashboard {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl) 0 var(--space-lg);
    gap: var(--space-lg);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

a.header-brand {
    text-decoration: none;
    color: inherit;
}

.brand-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.brand-name {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.02em;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Report Title Section */
.report-header {
    text-align: center;
    padding: var(--space-lg) 0 var(--space-md);
    margin-bottom: var(--space-sm);
}

.report-title {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.report-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 0.78rem;
    color: #9ca3af;
}

.report-type { color: var(--accent); font-weight: 500; }
.report-date { color: #6b7280; }
.separator { color: #d1d5db; opacity: 0.5; }

.nav { display: flex; gap: 2px; }

.nav-link {
    padding: var(--space-sm) 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--radius-md);
    transition: color 0.2s ease, background 0.2s ease;
    border-bottom: none;
}

.nav-link:hover {
    color: #111827;
    background: #f3f4f6;
}

.nav-link.active {
    color: var(--accent);
    background: var(--accent-light);
}

.refresh-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0;
    transition: all 0.2s ease;
}

.refresh-btn:hover { background: rgba(59, 130, 246, 0.15); border-color: var(--accent); }
.refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Header Accent */
.header-accent {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.accent-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.accent-diamond {
    width: 40px;
    height: 1px;
    background: var(--accent);
    transform: none;
    flex-shrink: 0;
}

/* Main Content */
.main { flex: 1; }

.briefing {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    position: relative;
}

/* ============================================
   ONE STANDOUT - Featured Signal
   ============================================ */

.standout-section {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid #e5e7eb;
}

.standout-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.standout-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.standout-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #6b7280;
    font-style: normal;
}

.standout-content {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: #f9fafb;
    border-radius: var(--radius-lg);
    border-left: 3px solid #d1d5db;
}

.standout-content.signal-green {
    border-left-color: var(--signal-green);
    background: rgba(34, 197, 94, 0.05);
}

.standout-content.signal-orange {
    border-left-color: var(--signal-orange);
    background: rgba(245, 158, 11, 0.05);
}

.standout-content.signal-red {
    border-left-color: var(--signal-red);
    background: rgba(239, 68, 68, 0.05);
}

.standout-content.signal-yellow {
    border-left-color: #f59e0b;
}

.standout-signal {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.standout-signal .signal-dot {
    font-size: 1.5rem;
}

.standout-body {
    flex: 1;
}

.standout-name {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.standout-fact {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.standout-explanation {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.standout-direction {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
}

.standout-direction.direction-bullish {
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
    background: rgba(34, 197, 94, 0.06);
}

.standout-direction.direction-bearish {
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
    background: rgba(239, 68, 68, 0.06);
}

.standout-direction.direction-neutral {
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
    background: rgba(245, 158, 11, 0.06);
}

/* ============================================
   NEWS SECTION - Economic Headlines
   ============================================ */

.news-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid #e5e7eb;
}

.news-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.news-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.news-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #6b7280;
    font-style: normal;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.news-item {
    background: #f9fafb;
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    border-left: 3px solid #d1d5db;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-item:hover {
    border-left-color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.news-item.signal-green { border-left-color: var(--signal-green); }
.news-item.signal-orange { border-left-color: var(--signal-orange); }
.news-item.signal-red { border-left-color: var(--signal-red); }
.news-item.signal-yellow { border-left-color: #f59e0b; }

.news-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.news-item-header .signal-dot {
    font-size: 0.85rem;
}

.news-category {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-title {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.45;
    margin-bottom: var(--space-sm);
}

.news-source {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: var(--space-sm);
}

.news-unpack {
    width: 100%;
    margin-top: var(--space-sm);
}

.news-context {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid #e5e7eb;
}

.news-context-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.news-link:hover {
    background: var(--accent-light);
    border-color: var(--accent);
}

/* Responsive news grid */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BRIEFING TABLE - Three Column Layout
   ============================================ */

.briefing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.briefing-table thead th {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid #e5e7eb;
}

.briefing-table thead th.col-signal { width: 32px; padding-right: 0; }
.briefing-table thead th.col-category { width: 140px; }
.briefing-table thead th.col-fact { width: 35%; }
.briefing-table thead th.col-explanation { width: auto; }

.briefing-table tbody tr {
    transition: background 0.15s ease;
}

.briefing-table tbody tr:hover {
    background: #f9fafb;
}

.briefing-table tbody td {
    padding: var(--space-md);
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

/* Signal Column - Traffic Light */
.col-signal {
    text-align: center;
    padding-right: 0 !important;
}

.signal-dot {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
}

.signal-dot.signal-green { color: var(--signal-green); }
.signal-dot.signal-orange { color: var(--signal-orange); }
.signal-dot.signal-red { color: var(--signal-red); }

/* Row coloring based on signal */
tr.signal-red {
    background: rgba(239, 68, 68, 0.04);
}

tr.signal-orange {
    background: rgba(245, 158, 11, 0.04);
}

/* Category Column */
.col-category {
    font-family: var(--font-body);
    font-weight: 600;
    color: #111827;
    font-size: 0.85rem;
}

/* Fact Column */
.col-fact {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.5;
}

/* Explanation Column */
.col-explanation {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.65;
}

.col-explanation .implication {
    display: block;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid #f3f4f6;
    color: #374151;
    font-size: 0.8rem;
    font-style: italic;
    font-family: var(--font-body);
}

/* ============================================
   ACTIONS SECTION
   ============================================ */

.actions-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid #e5e7eb;
}

.actions-section h3 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.action-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    margin: var(--space-sm) 0;
    background: #f9fafb;
    border-radius: var(--radius-md);
    border-left: 3px solid #d1d5db;
}

.action-item.priority-high { border-left-color: var(--signal-red); }
.action-item.priority-medium { border-left-color: var(--signal-orange); }
.action-item.priority-low { border-left-color: var(--signal-green); }

.action-icon { font-size: 1.1rem; flex-shrink: 0; }
.action-content { flex: 1; }

.action-text {
    font-weight: 600;
    color: #111827;
    margin-bottom: var(--space-xs);
}

.action-reason {
    font-size: 0.85rem;
    color: #6b7280;
}

/* ============================================
   CALENDAR SECTION
   ============================================ */

.calendar-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid #e5e7eb;
}

.calendar-section h3 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.calendar-event {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-xs) 0;
    background: #f9fafb;
    border-radius: var(--radius-md);
}

.event-time {
    color: var(--accent);
    margin-right: var(--space-sm);
}

/* ============================================
   DATES SECTION
   ============================================ */

.dates-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid #e5e7eb;
}

.dates-section h3 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.date-item {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: var(--space-sm) 0;
    color: #374151;
}

.date-label {
    color: #6b7280;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    margin-top: var(--space-3xl);
    padding-top: var(--space-lg);
    border-top: 1px solid #e5e7eb;
}

.footer-accent {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.accent-bull {
    width: 24px;
    height: 24px;
    color: #d1d5db;
}

.accent-bull svg { width: 100%; height: 100%; }

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #6b7280;
}

.footer-left .disclaimer { color: #9ca3af; font-style: italic; }
.footer-center .framework { color: #6b7280; }
.footer-center .framework span { font-family: var(--font-mono); color: var(--accent); }
.footer-right .timestamp { font-family: var(--font-mono); color: #9ca3af; }

/* ============================================
   LOADING OVERLAY
   ============================================ */

.loading {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.loading.hidden { display: none; }
.loading-content { text-align: center; }

.spinner {
    width: 48px;
    height: 48px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-md);
}

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

.loading p { font-size: 0.9rem; color: #6b7280; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .briefing-table thead { display: none; }

    .briefing-table tbody tr {
        display: block;
        margin-bottom: var(--space-md);
        padding: var(--space-md);
        background: #f9fafb;
        border-radius: var(--radius-md);
        border-left: 3px solid #d1d5db;
    }

    .briefing-table tbody tr.signal-green { border-left-color: var(--signal-green); }
    .briefing-table tbody tr.signal-orange { border-left-color: var(--signal-orange); }
    .briefing-table tbody tr.signal-red { border-left-color: var(--signal-red); }

    .briefing-table tbody td {
        display: block;
        padding: var(--space-xs) 0;
        border: none;
    }

    .briefing-table .col-signal { display: none; }

    .briefing-table .col-category {
        font-size: 0.9rem;
        margin-bottom: var(--space-xs);
    }

    .briefing-table .col-fact {
        font-size: 0.85rem;
        margin-bottom: var(--space-sm);
    }

    .briefing-table .col-explanation {
        font-size: 0.85rem;
        padding-top: var(--space-sm);
        border-top: 1px solid #e5e7eb;
    }
}

@media (max-width: 768px) {
    .dashboard { padding: var(--space-md); }

    .header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .header-brand {
        flex-direction: column;
        gap: var(--space-md);
    }

    .brand-logo {
        width: 140px;
        height: 140px;
    }

    .brand-name {
        font-size: 1.5rem;
    }

    .header-nav { justify-content: center; }
    .briefing { padding: var(--space-md); }

    .footer-content {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    body { background: #ffffff; color: #111827; }
    .dashboard { max-width: 100%; padding: 20px; }
    .nav, .refresh-btn, .loading { display: none !important; }

    .briefing {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        padding: 20px;
    }

    .briefing::before { display: none; }

    .briefing-table thead th { color: var(--accent); border-bottom-color: #e5e7eb; }
    .briefing-table tbody td { border-bottom-color: #f3f4f6; }

    .signal-dot.signal-green { color: #16a34a; }
    .signal-dot.signal-orange { color: #d97706; }
    .signal-dot.signal-red { color: #dc2626; }

    tr.signal-red { background: #fef2f2; }
    tr.signal-orange { background: #fffbeb; }

    .col-explanation .implication { color: #92400e; }
}

/* ============================================
   UNPACK / EXPAND FEATURE
   ============================================ */

.briefing-table thead th.col-unpack {
    width: 80px;
    text-align: center;
}

.col-unpack {
    text-align: center;
    vertical-align: middle !important;
}

.unpack-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.unpack-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

.unpack-btn.expanded {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

/* Detail Row - Expanded content */
.detail-row {
    background: #f9fafb !important;
}

.detail-row:hover {
    background: #f9fafb !important;
}

.detail-cell {
    padding: 0 !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.detail-content {
    padding: var(--space-lg) var(--space-xl);
    background: #f9fafb;
    border-left: 3px solid var(--accent);
    margin: 0;
    border-radius: var(--radius-md);
}

.detail-explanation {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.8;
    color: #374151;
    margin-bottom: var(--space-lg);
}

.detail-explanation strong {
    color: #111827;
    font-weight: 600;
}

.detail-explanation ul,
.detail-explanation ol {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.detail-explanation li {
    margin-bottom: var(--space-sm);
}

/* Source Links in Detail */
.detail-sources {
    padding-top: var(--space-md);
    border-top: 1px solid #e5e7eb;
    margin-top: var(--space-lg);
}

.detail-sources strong {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.detail-sources ul {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.detail-sources li {
    margin: 0;
}

.detail-sources a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #6b7280;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.detail-sources a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

.detail-sources a::after {
    content: '\2197';
    font-size: 0.65rem;
    opacity: 0.7;
}

/* Expand/Collapse All Controls */
.expand-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.expand-controls button {
    padding: 4px 12px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.expand-controls button:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-light);
}

/* Custom scrollbar — minimal */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ============================================
   RESPONSIVE - Unpack Feature
   ============================================ */

@media (max-width: 900px) {
    .briefing-table .col-unpack {
        display: block;
        padding-top: var(--space-md);
        border-top: 1px solid #e5e7eb;
        margin-top: var(--space-sm);
    }

    .unpack-btn {
        width: 100%;
        justify-content: center;
    }

    .detail-content {
        padding: var(--space-md);
    }

    .detail-sources ul {
        flex-direction: column;
    }
}

/* ============================================
   PRINT - Hide Unpack
   ============================================ */

@media print {
    .col-unpack, .unpack-btn, .detail-row {
        display: none !important;
    }
}