/**
 * compare.css — the ad scan report page.
 *
 * The report is a client-facing artefact, so this page is deliberately plain: a
 * filter column and a preview column, using the shared design tokens
 * (`design-system.css`) rather than introducing a second palette. Only layout
 * and the few components this page owns live here.
 *
 * Print: the page itself is not the deliverable (the workbook is), so the
 * filters are hidden on paper and the coverage line stays.
 */

.compare-app {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--ds-space-2xl) var(--ds-space-xl) var(--ds-space-3xl);
}

.compare-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-lg);
    margin-bottom: var(--ds-space-2xl);
}

.compare-title {
    margin: 0;
    font-size: var(--ds-font-size-2xl);
    font-weight: 600;
    color: var(--ds-text);
}

.compare-subtitle {
    margin: var(--ds-space-sm) 0 0;
    max-width: 62ch;
    font-size: var(--ds-font-size-base);
    color: var(--ds-text-muted);
    line-height: 1.5;
}

.compare-grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: var(--ds-space-xl);
    align-items: start;
}

@media (max-width: 900px) {
    .compare-grid { grid-template-columns: 1fr; }
}

/* The reader's guide: collapsed by default, so the controls stay above the fold, but
   present on the page rather than in a document nobody opens. */
/* The sign-in card is a gate, not a panel: it appears only when the API refuses. */
.compare-auth-card { border-left: 3px solid var(--ds-accent); }
.compare-auth-card .compare-actions { margin-top: var(--ds-space-sm); }

.compare-guide { margin-bottom: var(--ds-space-lg); }
.compare-guide > summary { cursor: pointer; list-style-position: inside; }
.compare-guide[open] > summary { margin-bottom: var(--ds-space-sm); }
.compare-guide-body { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.compare-guide-terms { margin: 0; }
.compare-guide-terms dt { font-weight: 600; color: var(--ds-text); margin-top: var(--ds-space-sm); }
.compare-guide-terms dd { margin: 0 0 0 var(--ds-space-md); color: var(--ds-text-muted); }

.compare-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-xl);
}

.compare-card-title {
    margin: 0 0 var(--ds-space-lg);
    font-size: var(--ds-font-size-md);
    font-weight: 600;
    color: var(--ds-text);
    text-transform: none;
    letter-spacing: 0;
}

/* ── filters ─────────────────────────────────────────────────────────────── */

.compare-filters { display: flex; flex-direction: column; gap: var(--ds-space-md); }

.compare-field-row { display: flex; gap: var(--ds-space-md); }
.compare-field-row .compare-field { flex: 1 1 0; }

.compare-field { display: flex; flex-direction: column; gap: var(--ds-space-xs); }

.compare-label {
    font-size: var(--ds-font-size-sm);
    font-weight: 600;
    color: var(--ds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.compare-fieldset {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-md);
    margin: 0;
}

.compare-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--ds-space-sm);
    margin-top: var(--ds-space-sm);
}

.compare-check {
    display: flex;
    align-items: center;
    gap: var(--ds-space-sm);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text);
    cursor: pointer;
}

.compare-detail { margin-top: var(--ds-space-sm); }

.compare-multi { min-height: 160px; }

.compare-hint {
    margin: 0;
    font-size: var(--ds-font-size-xs);
    line-height: 1.5;
    color: var(--ds-text-dim);
}

.compare-actions {
    display: flex;
    gap: var(--ds-space-sm);
    align-items: center;
    margin-top: var(--ds-space-sm);
}

.compare-status,
.compare-error {
    margin: 0;
    font-size: var(--ds-font-size-sm);
    line-height: 1.5;
}

.compare-status { color: var(--ds-text-muted); }
.compare-status[data-kind="ok"] { color: var(--ds-success); }
.compare-status[data-kind="busy"] { color: var(--ds-info); }
.compare-status[data-kind="warn"] { color: var(--ds-warning); }
.compare-error { color: var(--ds-danger); }

/* ── preview ─────────────────────────────────────────────────────────────── */

.compare-preview { position: sticky; top: var(--ds-space-lg); }

.compare-coverage {
    margin: 0 0 var(--ds-space-lg);
    font-size: var(--ds-font-size-base);
    color: var(--ds-text);
    line-height: 1.6;
}

.compare-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ds-space-md);
    margin-bottom: var(--ds-space-lg);
}

.compare-kpi {
    background: var(--ds-elevated);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-md);
}

.compare-kpi-value {
    font-size: var(--ds-font-size-xl);
    font-weight: 600;
    color: var(--ds-text);
}

.compare-kpi-label {
    margin-top: var(--ds-space-xs);
    font-size: var(--ds-font-size-xs);
    color: var(--ds-text-muted);
}

.compare-warnings { margin-bottom: var(--ds-space-lg); }

.compare-warning {
    border-left: 3px solid var(--ds-warning);
    background: rgba(232, 188, 106, 0.08);
    padding: var(--ds-space-sm) var(--ds-space-md);
    margin-bottom: var(--ds-space-sm);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text);
    line-height: 1.5;
}

.compare-findings {
    list-style: none;
    margin: 0 0 var(--ds-space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-sm);
}

.compare-findings li {
    border-left: 3px solid var(--ds-accent);
    padding: var(--ds-space-sm) var(--ds-space-md);
    background: var(--ds-accent-subtle);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text);
    line-height: 1.5;
}

.compare-finding-evidence {
    display: block;
    margin-top: var(--ds-space-xs);
    font-size: var(--ds-font-size-xs);
    font-style: italic;
    color: var(--ds-text-muted);
}

.compare-footnote { margin-top: var(--ds-space-lg); }

/* ── print ───────────────────────────────────────────────────────────────── */

@media print {
    .compare-filters,
    .app-nav { display: none; }
    .compare-app { padding: 0; max-width: none; }
    .compare-grid { grid-template-columns: 1fr; }
    .compare-card { border: none; background: none; }
}