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

:root {
    --bg: #f5f6f8;
    --sidebar-bg: #1a1a2e;
    --sidebar-text: #e0e0e0;
    --sidebar-active: #16213e;
    --card-bg: #fff;
    --text: #1a1a2e;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --green: #22c55e;
    --green-bg: #dcfce7;
    --red: #ef4444;
    --red-bg: #fee2e2;
    --blue: #3b82f6;
    --blue-bg: #dbeafe;
    --orange: #f59e0b;
    --orange-bg: #fef3c7;
    --brand-hl: #fbbf24;
    --competitor-hl: #f87171;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sidebar */
.sidebar {
    width: 220px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 0;
    position: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.sidebar-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.sidebar-current-brand {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
}
.sidebar-current-brand:hover { background: rgba(255,255,255,0.18); }

.sidebar-admin-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    letter-spacing: 0.2px;
}
.sidebar-admin-link:hover { color: #fff; text-decoration: none; }

.sidebar .subtitle {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: block;
}
.sidebar .subtitle:hover { color: rgba(255,255,255,0.8); }

.nav-links {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    margin-top: 16px;
}

.nav-links li a {
    display: block;
    padding: 10px 20px;
    color: var(--sidebar-text);
    font-size: 14px;
    transition: background 0.2s;
}

.nav-links li a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.nav-links li.active a { background: var(--sidebar-active); color: #fff; font-weight: 600; }

.nav-divider { border-top: 1px solid rgba(255,255,255,0.1); margin: 8px 0; }
.nav-sub a { font-size: 13px; color: var(--sidebar-text) !important; opacity: 0.7; padding-left: 24px !important; }
.nav-sub a:hover { opacity: 1; }

/* Agency home: the client list. Selectors are li-qualified because
   `.nav-links li a` (0,1,2) outranks a bare `.nav-agency a` (0,1,1) and would
   put the padding and display back. */
.nav-links li.nav-agency { margin: 0 12px 14px; }
.nav-links li.nav-agency a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.nav-links li.nav-agency a:hover { background: rgba(255,255,255,0.16); }
.nav-links li.nav-agency a.active {
    background: rgba(59,130,246,0.28);
    border-color: rgba(59,130,246,0.55);
}
.nav-agency-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}
.nav-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.badge-zadoosh {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 10px;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 8px;
}
.nav-import { padding-top: 4px; }
.nav-import a { color: var(--blue) !important; }

/* Sidebar user */
.sidebar-user {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.user-avatar { width: 24px; height: 24px; border-radius: 50%; }
.user-name { font-size: 12px; color: var(--sidebar-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-logout { font-size: 11px; color: var(--text-muted); }

/* Login page */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px 32px;
    text-align: center;
}
.login-card h1 { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
.login-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
.login-footer { font-size: 12px; color: var(--text-muted); margin-top: 24px; }

.btn-google, .btn-microsoft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 24px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.btn-google:hover, .btn-microsoft:hover { background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn-google:disabled, .btn-microsoft:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-microsoft { margin-top: 10px; }

/* Main Content */
.content {
    margin-left: 220px;
    padding: 32px 40px;
    flex: 1;
    max-width: 100%;
    overflow-x: auto;
}

/* Flash Messages */
.flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}
.flash-success { background: var(--green-bg); color: #166534; }
.flash-error { background: var(--red-bg); color: #991b1b; }

/* Page Header */
.page-header { margin-bottom: 24px; }
/* Title left, one link right. Scoped to the gap page rather than changed on
   .page-header, which every page in the app uses. */
.gp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.gp-head .gp-back { white-space: nowrap; }
.page-header h2 { font-size: 22px; font-weight: 600; }
.page-meta { display: flex; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
/* Each stat is one unit. Adding ", 2 paused" made the labels long enough that
   the help dot wrapped to its own line underneath, which read as a stray
   button. The stat wraps as a whole now, or not at all. */
.page-meta > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
/* A DOT BETWEEN THE STATS. On a plain gap the help dot of one stat sat right
   beside the opening number of the next, and the eye grouped them wrongly -
   "? 4 countries" reads as one thing. The separator is a pseudo-element so it
   never appears before a stat that has wrapped to the start of a new line. */
.page-meta > span + span::before {
    content: '·';
    margin-right: 10px;
    color: var(--border);
}
.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.breadcrumb a { color: var(--text-muted); }

/* Import Form */
.import-form-container { max-width: 480px; }
.import-form { background: var(--card-bg); padding: 28px; border-radius: 8px; border: 1px solid var(--border); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group .hint { font-weight: 400; color: var(--text-muted); }
/* File list (import page) */
.file-list {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
}
.file-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9fafb;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
}
.btn-clear { background: none; border: none; color: var(--red); font-size: 12px; cursor: pointer; }
.btn-clear:hover { text-decoration: underline; }
.file-list ul { list-style: none; max-height: 300px; overflow-y: auto; }
.file-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.file-item:last-child { border-bottom: none; }
.file-name { flex: 1; }
.file-size { color: var(--text-muted); font-size: 12px; }

/* File summary (confirm page) */
.file-summary {
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
}
.file-summary-item {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.file-summary-item:last-child { border-bottom: none; }

.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--card-bg);
}

.form-group input[type="text"],
.form-group input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}

/* Brand select list (confirmation page) */
.brand-select-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.brand-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}
.brand-option:last-child { border-bottom: none; }
.brand-option:hover { background: var(--bg); }
.brand-option input[type="radio"] { margin: 0; }
.brand-option-name { font-weight: 500; flex: 1; }
.brand-option-count { font-size: 12px; color: var(--text-muted); }

/* Brand locked (existing brand on re-import) */
.brand-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.brand-locked-name { font-size: 16px; font-weight: 600; }

/* Competitor select list */
.competitor-select-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.competitor-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}
.competitor-option:last-child { border-bottom: none; }
.competitor-option:hover { background: var(--bg); }
.competitor-option input[type="checkbox"] { margin: 0; }
.competitor-option-name { font-weight: 500; flex: 1; }
.competitor-option-count { font-size: 12px; color: var(--text-muted); }

.competitor-new { background: var(--blue-bg); }
.competitor-new:hover { background: #c7d9f5; }

.badge-new {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

/* Buttons */
.btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-sm { padding: 4px 12px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); margin-bottom: 8px; }
.btn-sm:hover { background: var(--border); }

/* Citation Seeds */
.seed-add-form { margin-bottom: 20px; }
.seed-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.seed-url-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}
.seed-type-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--card-bg);
}

.seeds-table-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
}
.seeds-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}
.seeds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.seeds-table th, .seeds-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.seeds-table thead th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.seeds-table tbody tr:hover { background: #f9fafb; }
.seeds-table tbody tr:last-child td { border-bottom: none; }

.seed-domain { font-weight: 600; white-space: nowrap; }
.seed-title { max-width: 300px; }
.seed-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.seed-num { font-weight: 700; text-align: center; }
.seed-num-active { color: #166534; }
.seed-engines, .seed-geos { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* AEO Impact on dashboard */
.aeo-impact { margin-top: 24px; }
.aeo-impact h3 { font-size: 16px; margin-bottom: 4px; }
.aeo-impact-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.impact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.impact-table th, .impact-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.impact-table thead th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.impact-table tbody tr:hover { background: #f9fafb; }
.impact-table tbody tr:last-child td { border-bottom: none; }

.seed-type-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.seed-type-authority_piece { background: #dbeafe; color: #1e40af; }
.seed-type-authority_piece_ugc { background: #cffafe; color: #155e75; }
.seed-type-listicle_insertion { background: #fae8ff; color: #86198f; }
.seed-type-brand_mention { background: #fef3c7; color: #92400e; }
.seed-type-reddit_seed { background: #fee2e2; color: #991b1b; }
.seed-type-forum_seed { background: #e0e7ff; color: #3730a3; }
.seed-type-youtube_video { background: #fee2e2; color: #b91c1c; }
.seed-type-pr_news { background: #d1fae5; color: #065f46; }
.seed-type-on_page_optimization { background: #ecfeff; color: #0e7490; }
.seed-type-new_owned_content { background: #f0fdf4; color: #166534; }

.btn-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.btn-delete:hover { color: var(--red); }

.btn-shared-toggle {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    color: var(--text-muted);
}
.btn-shared-toggle.shared-on {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* A seed whose publisher has deleted the live page: greyed + struck through,
   with a Removed badge. Used on the Citation Seeds, Seed Performance and
   Earned Citations pages (seeds-table and citations-overview-table). */
tr.seed-removed { background: #fafafa; color: var(--text-muted); }
tr.seed-removed:hover { background: #f3f4f6 !important; }
.seed-removed .seed-title a,
.seed-removed .perf-url,
.seed-removed .cite-url-small { text-decoration: line-through; color: var(--text-muted); }
.seed-removed-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b91c1c;
    background: #fee2e2;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
}
.seed-inassets-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #4338ca;
    background: #eef2ff;
    padding: 1px 8px;
    border-radius: 10px;
    white-space: nowrap;
    vertical-align: middle;
}
.btn-removed-toggle {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    color: var(--text-muted);
}
.btn-removed-toggle.removed-on {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Sidebar section label */
.nav-section-label {
    padding: 8px 20px 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
}
.nav-section-period {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.7;
    margin-left: 4px;
}

/* Period filter */
.period-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.period-btn {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
}
.period-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.period-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}
/* Month scope picked from the trend chart — shown as an active pill alongside
   the rolling-period buttons, with an inline clear (×). */
.period-btn-month {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}
.period-btn-month .period-month-x {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}
.period-btn-month .period-month-x:hover { color: #fff; }

.engine-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.engine-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 2px;
}
.engine-btn {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
}
.engine-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.engine-btn.active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}
.engine-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.engine-check input {
    margin: 0;
    cursor: pointer;
}

/* Admin-only prompt-level filter (collapsed by default) */
.prompt-filter { margin: -4px 0 16px; }
.prompt-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px dashed var(--border);
    cursor: pointer;
}
.prompt-filter-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.prompt-filter-toggle .pf-caret { font-size: 10px; }
.pf-badge {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--blue);
}
.pf-admin-tag {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
}
.prompt-filter-panel {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    max-width: 640px;
}
.pf-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pf-search {
    flex: 1;
    min-width: 0;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.pf-search:focus { outline: none; border-color: var(--blue); }
.pf-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pf-link { font-size: 12px; font-weight: 500; white-space: nowrap; }
.pf-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
}
.pf-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.pf-item:hover { background: var(--bg); }
.pf-item input { margin: 2px 0 0; cursor: pointer; }
.pf-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pf-apply {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    cursor: pointer;
}
.pf-apply:hover { filter: brightness(0.95); }
.pf-reset { font-size: 12px; color: var(--text-muted); }

/* Citations pages */
.section-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

/* Capture review tabs */
.capture-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.capture-tab {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.capture-tab:hover { color: var(--text); text-decoration: none; }

.capture-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}

.tab-badge {
    background: #e5e7eb;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.capture-tab.active .tab-badge { background: var(--blue); color: #fff; }
.citations-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
}
.citations-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.citations-overview-table th, .citations-overview-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.citations-overview-table thead th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}
.citations-overview-table tbody tr:hover { background: #f9fafb; }
.citations-overview-table tbody tr:last-child td { border-bottom: none; }
.cite-page { max-width: 400px; }
.cite-url-small { font-size: 12px; color: var(--text-muted); }

/* Brand cards (dashboard index) */
.brand-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.brand-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    width: 240px;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.brand-card:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; }
.brand-card-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); padding-right: 52px; padding-left: 28px; }
.brand-card-meta { font-size: 12px; color: var(--text-muted); }
/* The customer's own picker. The number is the reason to open a card, so it is
   the biggest thing on it; the counts underneath say what produced it. Indented
   to the 28px the name already carries for the admin status dot, scoped to this
   page so the admin roster's cards are untouched. */
.brand-cards-picker .brand-card-vis {
    padding-left: 28px;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.brand-cards-picker .bcv-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.brand-cards-picker .bcv-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.brand-cards-picker .brand-card-vis-none .bcv-lbl {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
}
.brand-cards-picker .brand-card-meta { padding-left: 28px; }
.brand-cards-picker .brand-card-answers {
    padding-left: 28px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Brand search + section headings */
.brand-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brand-search {
    width: 100%;
    max-width: 360px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--card-bg);
}
.brand-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.brand-search-empty { font-size: 13px; color: var(--text-muted); }
.brand-section + .brand-section { margin-top: 28px; }
.brand-section-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* Pin toggle on each card */
.brand-pin-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
    opacity: 0.25;
    filter: grayscale(100%);
    transition: opacity 0.15s, filter 0.15s, transform 0.15s;
}
.brand-pin-toggle:hover { opacity: 0.85; filter: grayscale(0%); }
.brand-pin-toggle.pinned { opacity: 1; filter: none; transform: rotate(-20deg); }
.brand-paused .brand-pin-toggle { pointer-events: all; }

/* Expandable citation rows */
.domain-row { cursor: pointer; }
.domain-row:hover { background: #f3f4f6 !important; }
.expand-link {
    font-size: 12px;
    color: var(--blue);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}
.expand-link:hover { color: #1d4ed8; }
.url-row { background: #fafbfc; }
.cite-url-row {
    padding-left: 32px !important;
    font-size: 12px;
    word-break: break-all;
}
.cite-url-row a { color: var(--text-muted); }
.cite-url-row a:hover { color: var(--blue); }
.cite-url-title { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Engine filter tabs */
.engine-filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; }

/* Citation filters */
.citation-filters { display: flex; gap: 6px; margin-bottom: 16px; }
.filter-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}
.filter-btn:hover { background: var(--bg); }
.filter-btn.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

/* Citation type labels */
.cite-type-label {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.cite-type-owned { background: #dbeafe; color: #1e40af; }
.cite-type-earned { background: #dcfce7; color: #166534; }
.cite-type-organic { background: #f3f4f6; color: #6b7280; }

/* Admin page */
.admin-sections { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.admin-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
}
.admin-card h3 { font-size: 16px; margin-bottom: 6px; }
.admin-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.admin-brand-list { display: flex; flex-direction: column; gap: 4px; }
.admin-brand-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s;
}
.admin-brand-link:hover { background: var(--bg); text-decoration: none; }
.admin-brand-meta { font-size: 12px; color: var(--text-muted); font-weight: 400; text-align: right; margin-left: 16px; }

/* Sidebar bottom (admin + user) */
.sidebar-bottom {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
/* Reddit citations */
.subreddit-filter { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.subreddit-filter-label { font-size: 13px; color: var(--text-muted); }
.sub-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--card-bg);
    min-width: 200px;
}
.reddit-sub { font-weight: 600; white-space: nowrap; color: #ff4500; font-size: 12px; }
.reddit-thread { width: 250px; max-width: 250px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reddit-brands { font-size: 12px; color: var(--text-muted); min-width: 150px; }
/* "Influencer Hero (2)" breaking across two lines was half the row height. */
.reddit-brand-tag { font-size: 12px; white-space: nowrap; }
/* The overflow marker is a continuation of the list, not a badge on it - a
   filled grey blob out-shouted the brand names it was summarising. Reads as
   text, with a dotted underline as the only hint that it does something.
   Qualified with .help-dot so it beats the circle styles further down the
   file, which win on equal specificity and did exactly that before. */
.help-dot.brand-more {
    width: auto;
    height: auto;
    padding: 0;
    margin-left: 1px;
    border-radius: 0;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px dotted #9ca3af;
    vertical-align: baseline;
}
.help-dot.brand-more:hover, .help-dot.brand-more:focus {
    background: none;
    color: var(--text);
    border-bottom-color: var(--text);
}
.help-dot.brand-more .help-tip { font-weight: 400; text-align: left; }
.reddit-brand-tag:not(:last-child)::after { content: ', '; }
.reddit-brand-tag.mention-brand { font-weight: 700; color: #92400e; }

.reddit-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}
/* Two buckets, not eight colours. Green = she can reply, grey = she cannot.
   Error keeps its own colour: that is a failed scan, not a shut thread. */
.reddit-status-active { background: var(--green-bg); color: #166534; }
.reddit-status-closed { background: #f3f4f6; color: #6b7280; }
.reddit-status-error { background: var(--orange-bg); color: #92400e; }

/* Unanswerable threads recede. Beats .cite-seed-row on specificity on purpose:
   if a thread is shut, that matters more than where it came from. */
tr.closed-thread-row { background: #f8f9fa !important; }
tr.closed-thread-row .reddit-thread a,
tr.closed-thread-row .reddit-sub { color: var(--text-muted); }

/* Open and closed are two lists read for different reasons, so they are two
   tables with real headings and air between them, not one table with a rule
   through the middle. */
.thread-section + .thread-section { margin-top: 34px; }
.thread-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.thread-section-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: #f3f4f6;
    border-radius: 10px;
    padding: 1px 9px;
}
.thread-section-note { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.empty-row td { text-align: center; color: var(--text-muted); padding: 24px 12px; }

.meta-closed { color: var(--text-muted); }

/* "Show N more", from templates/_row_paging.html. Lived inline in that partial
   until it had to appear twice on one page. */
.row-paging { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.row-paging-btn {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    color: var(--text, #374151);
    cursor: pointer;
    font-family: inherit;
}
.row-paging-btn:hover { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
.row-paging-note { font-size: 12px; color: var(--text-muted, #9ca3af); }
/* Beats the inline display the filters set, so paging and filtering compose
   instead of overwriting each other. */
tr.paged-out { display: none !important; }

/* The "?" next to a label or a control. She had to guess what Cited meant. Same
   hover-reveal as the dashboard's .cell-ratio, because a native title=
   tooltip is slow, unstyleable and was showing nothing here. */
.help-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}
/* The stacked-chart card heading is 12px uppercase; the default dot dwarfs it. */
.sc-hd h3 .help-dot { width: 12px; height: 12px; font-size: 9px; }
/* In a page title the dot must not scale with the heading. */
h2 .help-dot { width: 17px; height: 17px; font-size: 11px; margin-left: 9px; vertical-align: 3px; }
h2 .help-dot .help-tip { font-size: 12px; width: 300px; }
.help-dot:hover, .help-dot:focus { background: var(--text-muted); color: #fff; outline: none; }
/* The period row is a flex container - without this the circle stretches. */
.period-filter .help-dot, .reddit-extra-filters .help-dot { flex: 0 0 auto; align-self: center; }
.help-tip {
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    padding: 7px 10px;
    border-radius: 4px;
    /* thead sets uppercase and the pill sets 10px bold - neither belongs here */
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    z-index: 20;
    pointer-events: none;
}
.help-dot:hover .help-tip, .help-dot:focus .help-tip { display: block; }
/* A centred box overhangs its dot by half its width, which an overflow-x:auto
   container clips at either edge. Anchor to the near side instead: 'start' for
   the first column, 'end' for the last. */
.help-dot-start .help-tip { left: 0; right: auto; transform: none; }
.help-dot-end .help-tip { left: auto; right: 0; transform: none; }

.reddit-engines { font-size: 12px; color: var(--text-muted); }
.reddit-checked-at { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.btn-check-now {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 4px;
    cursor: pointer;
    color: var(--blue);
}
.btn-check-now:hover { background: var(--bg); }
.btn-check-now:disabled { opacity: 0.5; cursor: not-allowed; }

.reddit-extra-filters { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filter-label { font-size: 13px; color: var(--text-muted); }
.rf-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
}
.rf-btn:hover { background: var(--bg); }
.rf-btn.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

.reddit-check-bar { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auto-check-label { font-size: 13px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.check-status { font-size: 13px; color: var(--text-muted); }

/* YouTube */
.yt-video { max-width: 460px; font-size: 13px; }
/* The channel under the title. A video id says nothing; "Grin" or a review
   channel says who is being cited. */
/* What kind of YouTube URL a row is. Every row carries one, so it has to stay
   quiet: a plain "Video" tag on 140 rows must not out-shout the titles. */
.yt-kind {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f3f4f6;
    color: #6b7280;
}
.yt-kind-short    { background: #fee2e2; color: #991b1b; }
.yt-kind-post     { background: #ede9fe; color: #5b21b6; }
.yt-kind-channel  { background: #dbeafe; color: #1e40af; }
.yt-kind-playlist { background: #fef3c7; color: #92400e; }

.yt-video .yt-channel { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

/* Settings page */
.settings-brand {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.settings-brand h3 { font-size: 18px; margin-bottom: 4px; }
.settings-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; display: flex; gap: 16px; }
/* --- ONE BLOCK PER THING, WITH A LINE BETWEEN ----------------------------
   Four sections with only a 16px gap read as one continuous wall: prompts ran
   into Add prompts, which ran into engines, which ran into countries. The
   headings are small uppercase grey, so they mark a block without separating
   it from the one above.

   A rule and more room instead. `:not(:first-child)` so the top of the card
   does not open with a line, and the action rows opt out with
   .settings-section-action - a button belongs to the block above it, and a
   rule there would cut it loose from the list it acts on. */
.settings-sections { display: flex; flex-direction: column; gap: 0; }
.settings-section { padding: 18px 0 0; }
.settings-section:first-child { padding-top: 0; }
.settings-section:not(:first-child):not(.settings-section-action):not(.settings-section-cont) {
    border-top: 1px solid var(--border);
    margin-top: 18px;
}
/* A section that CONTINUES the one above it: engines and countries are one
   block, because one Change coverage button governs both. A rule between them
   would claim two concerns with two actions. Kept as its own class rather than
   reusing -action, so the two reasons for skipping a rule stay legible. */
.settings-section.settings-section-cont { padding-top: 14px; }
/* The button row sits under its list, inside the same block. */
.settings-section.settings-section-action { padding-top: 12px; }
.settings-section h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.settings-list { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-tag {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.settings-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

.settings-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 16px;
}
.settings-section-divider::before,
.settings-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.settings-section-divider span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    white-space: nowrap;
}
.settings-brand-paused { opacity: 0.5; }
.settings-prompts {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.settings-prompt-item {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.settings-prompt-item:last-child { border-bottom: none; }
/* --- PAUSED, ON THE ROW IT DESCRIBES -------------------------------------
   Settings used to list engines, countries and prompts with no state on them
   at all, because it built the lists from result keys and a result key cannot
   tell you whether collection has stopped. Now the state rides on each item,
   the same way Coverage and the dashboard filters show it.

   Dimmed, not struck through or greyed to unreadable: the data behind a paused
   item is real and still in every report. It has only stopped growing. */
.settings-prompt-item.is-paused { color: var(--text-muted); }
.settings-paused-tag,
.settings-tag.is-paused i {
    margin-left: 7px;
    font-size: 9.5px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: 1px;
}
.settings-tag.is-paused {
    color: var(--text-muted);
    background: transparent;
    border-style: dashed;
}
.settings-tag.is-paused i { background: transparent; border: none; padding: 0 0 0 1px; }
.settings-topic-group { margin-bottom: 12px; }
.settings-topic-label {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 0;
    color: var(--text);
}

.sidebar-bottom-link {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--sidebar-text) !important;
    opacity: 0.7;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-bottom-link:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,0.08); }
/* These links carry no active state of their own, so the one you are on reads
   as any other. */
.sidebar-bottom-link.active { opacity: 1; background: rgba(255,255,255,0.08); font-weight: 600; }

/* Admin sub-links (Import Data, Review Captures) — same look as the links
   above, indented to read as part of Admin */
.sidebar-bottom-sub { padding-left: 32px; }

/* Citation performance dashboard */
.perf-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.perf-muted { color: var(--text-muted); font-size: 12px; }
.perf-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.perf-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.perf-controls select {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card, #fff);
}
.perf-search {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card, #fff);
    width: 180px;
}
.perf-clear { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.fanout-prompt-chip {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #6b7280;
    white-space: nowrap;
}
.perf-brand {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 16px;
    margin-bottom: 12px;
}
.perf-brand summary {
    cursor: pointer;
    padding: 10px 4px;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.perf-brand summary::-webkit-details-marker { margin-right: 4px; }
.perf-brand-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.perf-brand .seeds-table { margin: 4px 0 12px; }
.perf-dtype {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4338ca;
    white-space: nowrap;
}
.perf-url {
    display: inline-block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-size: 13px;
}


/* View toggle */
.view-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
}
.view-toggle-label { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.view-btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}
.view-btn:hover { background: var(--bg); }
.view-btn.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

.btn-tip-wrap { position: relative; }
.btn-tip {
    display: none;
    position: absolute;
    bottom: -40px;
    left: 0;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 4px;
    width: 220px;
    line-height: 1.4;
    z-index: 10;
    pointer-events: none;
}
.btn-tip-wrap:hover .btn-tip { display: block; }

/* Rank filter */

/* Category filter */
.category-filter { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.category-filter-label { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.cat-btn {
    padding: 5px 12px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}
.cat-btn:hover { background: var(--bg); }
.cat-btn.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

/* Matrix context */
.matrix-question { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.matrix-hint { font-size: 12px; color: var(--border); font-style: italic; }

/* Trend chart */
.trend-chart-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px 12px;
    margin-bottom: 16px;
    overflow: visible;
}

.trend-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.trend-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-filter-select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.trend-bars-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.trend-bars {
    /* NOT flex. Periods are positioned absolutely at their point's x, because a
       line chart's end points belong on the axis ends. As flex columns the
       points sat at column centres, so the first and last were inset by half a
       column - and a column is 1/3 of the plot with three months against 1/8
       with eight weeks, which made the plot narrow visibly on switching to
       Monthly. renderTrendChart sets left/width on each period. */
    position: relative;
    flex: 1;
    /* Taller since the chart went multi-series. At 150px, six lines inside a
       0-100 scale sat on top of each other and the whole card read as busy. */
    height: 232px;
    /* Gutters the plot does not draw into. Right: the direct end labels, drawn
       in the SVG past the last point. Left: the 0/50/100 axis labels, which
       now need real room because the first point sits hard on the axis start
       rather than half a column in. */
    padding-right: 96px;
    padding-left: 30px;
    box-sizing: border-box;
    overflow: visible;
}


/* The chart and the Standings panel sit side by side inside one card. The
   filters in the card header scope BOTH, which is the point: rank changes
   completely per engine, so the panel must move with the same controls. */
.trend-body {
    display: flex;
    align-items: stretch;
    gap: 18px;
}
.trend-plot-col { flex: 1 1 auto; min-width: 0; }

/* The SVG line layer sits over the columns, not instead of them. */
.trend-plot { position: relative; flex: 1; min-width: 0; }
.trend-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* the columns underneath keep the hover and click */
    /* hidden, not visible: the end labels are drawn inside the right gutter, so
       they belong in this box. Anything reaching past it was escaping over the
       standings panel. */
    overflow: hidden;
    z-index: 1;
}

.trend-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card-bg);
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.trend-scroll-btn:hover { background: #f3f4f6; color: var(--text); }
/* The dashboard no longer scrolls its chart - its window is bounded, so every
   bucket fits - but the citation charts and the owned-citations chart still do,
   and they borrow these classes. Do not remove with the dashboard's copy. */
.trend-scroll-left { left: -14px; }
.trend-scroll-right { right: -14px; }

.trend-col {
    /* left and width are set per render, from the computed x of its point. */
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* The plot-height hit zone. Transparent: the lines are painted above it. Its
   measured box is what the SVG uses for x centres and the y scale, so the two
   layers cannot drift apart if this padding ever changes. */
.trend-col-hit {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
.trend-col:hover .trend-col-hit { background: rgba(15, 23, 42, 0.035); }
.trend-col.active .trend-col-hit { background: rgba(37, 99, 235, 0.07); }

/* SVG marks. Lines 2px, grid a solid hairline one shade off the surface. */
.tg-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* The tracked brand is the only solid line. Rivals are dashed, which is a
   SECOND encoding channel rather than styling: six lines made colour the sole
   carrier of identity, and three palette slots fall under 3:1 on white. Dash
   also survives greyscale and colour-blindness. */
.tg-line-own { stroke-width: 2.75; }
.tg-line-rival { stroke-dasharray: 5 4; stroke-linecap: butt; }
/* In a competitor view the plot is two lines and both of them are the point,
   so the compared rival is solid at the same weight as the tracked brand.
   Dashing it there would rank it below the brand and stop the chart being a
   comparison; the dash was only ever buying identity among six lines. Which
   one is yours is still said twice - the area fill under your line, and both
   names at their own endpoints. */
.tg-line-vs { stroke-width: 2.75; }
/* Faint ground under your own line. Painted before the lines, so a rival
   below you still reads through it. */
.tg-area { opacity: .07; stroke: none; }
.tg-dot-own { stroke-width: 2.5; }
.tg-grid { stroke: #eef0f3; stroke-width: 1; }
.tg-gridlabel { font-size: 9px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.tg-crosshair { stroke: #cbd5e1; stroke-width: 1; }
/* A 2px surface ring keeps overlapping series separable where they cross. */
.tg-dot { stroke: var(--card-bg); stroke-width: 2; }
.tg-orphan { stroke: var(--card-bg); stroke-width: 2; }
/* Direct labels are load-bearing, not decoration: three palette slots sit
   under 3:1 on white, and visible labels are the relief for that. */
.tg-endlabel { font-size: 10px; font-weight: 600; }
.tg-endlabel-own { font-size: 10.5px; font-weight: 700; }

.trend-col-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
}

/* Hover tooltip */
.trend-col-tip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: #1a1a2e;
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    pointer-events: none;
}

.trend-col-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a2e;
}

.trend-col:hover .trend-col-tip { display: block; }
/* At the ends, the tooltip hangs off the inner edge instead of centring, or it
   runs off the card - the first period's ran under the sidebar. */
.trend-col.tip-left .trend-col-tip { left: 0; transform: none; }
.trend-col.tip-left .trend-col-tip::after { left: 22px; transform: none; }
.trend-col.tip-right .trend-col-tip { left: auto; right: 0; transform: none; }
.trend-col.tip-right .trend-col-tip::after { left: auto; right: 22px; transform: none; }


/* One row per charted series in the tooltip, in this period's standings order. */
.trend-col-tip .tt-row { display: flex; align-items: center; gap: 6px; }
.trend-col-tip .tt-row b { margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; }
.trend-col-tip .tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.trend-col-tip .tt-meta,
.trend-col-tip .tt-none { display: block; margin-top: 5px; font-size: 11px; color: #a5b4c8; }

/* --- Standings panel ----------------------------------------------------- */
/* Deliberately NOT called "rank": the grid below already has a "rank in the
   answer" filter meaning position inside one answer, and two meanings of that
   word on one screen is how people misread both. */
.trend-standings {
    flex: 0 0 208px;
    border-left: 1px solid var(--border);
    min-width: 0;
    /* THE CHART SETS THE HEIGHT, NOT THE LIST. cubeapm tracks 35 competitors,
       so 36 rows made this card twice as tall as the 232px chart beside it and
       pushed the tracked brand's own row off the bottom of the screen. The
       inner box is absolute, so the panel contributes no height of its own and
       stretches to whatever the chart column is. */
    position: relative;
}
.ts-inner {
    position: absolute;
    inset: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Where the middle of the list was cut out, so #12 does not sit directly above
   #17 as though nothing were missing. */
.ts-gap {
    font-size: 10.5px;
    color: var(--text-muted);
    text-align: center;
    padding: 3px 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    margin: 3px 0;
}
.ts-listnote { display: block; margin-top: 4px; }
.ts-listtoggle {
    font-family: inherit;
    font-size: 10px;
    border: 0;
    background: none;
    color: var(--blue);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.ts-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .01em;
}
/* The panel's help dot. Its tip opens to the LEFT: the panel is the rightmost
   thing on the card, and the default centred tip ran off the edge - where the
   card's own overflow would clip it, the way the Visibility tooltip was
   clipped before it moved to the body. */
.ts-help { vertical-align: 1px; }
.ts-help .help-tip { left: auto; right: 0; transform: none; width: 260px; }
/* The list fills the space beside the chart and sits in the MIDDLE of it.
   Spacing the ROWS apart to fill instead was the other option and is worse: a
   ranked list is read by adjacency, so large gaps between 1 and 2 make the
   order harder to scan, and with three brands the gaps look broken.
   .ts-mid's auto margins centre the block when there is room and collapse to
   nothing when there is not, so fourteen brands still scroll from the top
   rather than being clipped - which plain justify-content:center would do. */
.ts-list {
    display: flex;
    flex-direction: column;
    margin: 9px 0 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.ts-mid { margin: auto 0; width: 100%; }
.ts-rows { list-style: none; margin: 0; padding: 0; }
.ts-row { min-width: 0; }
/* A rival's row TOGGLES its line, so it is a real button: keyboard reachable,
   with aria-pressed carrying the state. The brand's own row and any rival past
   the palette are static text instead - see renderStandings for why. */
.ts-btn,
.ts-static {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 3px 2px;
    min-width: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 4px;
}
.ts-btn { cursor: pointer; }
/* Slightly more generous now the block is centred: seven rows read as composed
   rather than crammed against the top. Capped, not stretched - see .ts-list. */
.ts-btn, .ts-static { padding-top: 4px; padding-bottom: 4px; }
.ts-btn:hover { background: var(--rule-soft, #f3f4f6); }
.ts-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ts-row-own .ts-static { font-weight: 700; }
/* A rival the user has switched off, or one the auto-pick left out. Legible,
   clearly not on the chart, and clearly still clickable. */
.ts-row-off .ts-name,
.ts-row-off .ts-pct { color: var(--text-muted); }
.ts-pos {
    flex: 0 0 13px;
    color: var(--text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* Swatches mirror the marks: solid bar for your line, dashed bar for a rival's,
   faded dash for a tracked brand with no line at all. */
.ts-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.ts-swatch-own,
.ts-swatch-rival {
    width: 13px;
    height: 3px;
    border-radius: 1px;
    align-self: center;
}
/* A tracked rival with no line still has a number, and needs a marker that
   says "no line on the chart". This was a hollow 9px square, which read as an
   UNCHECKED CHECKBOX and invited a click that does nothing - Mayank hit exactly
   that. A dash cannot be mistaken for a control. */
/* A rival YOU switched off: its own colour, faded, so it never reads as one
   we simply did not pick. That distinction was invisible and it made an edited
   chart look like our editorial choice. */
.ts-swatch-hid { opacity: .3; }
/* .ts-aheadnote, .ts-nolinenote and .ts-showahead were here: a count of the
   rivals beating you that had no line, with a button to draw them. Removed on
   Mayank's call - the footer had reached three lines carrying two different
   truncations and two buttons both labelled Show. The panel still ranks every
   rival and every row is still clickable, so a rival ahead of you is on screen
   with its number whether or not it has a line. */
.ts-hidnote { display: block; margin-top: 4px; }
.ts-showall {
    font-family: inherit;
    font-size: 10px;
    border: 0;
    background: none;
    color: var(--blue);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.ts-swatch-off {
    background: var(--text-muted);
    opacity: .35;
    height: 2px;
    align-self: center;
    border-radius: 1px;
}
.ts-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.ts-you {
    font-size: 9px;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    padding: 0 5px;
    border-radius: 999px;
    margin-left: 5px;
}
.ts-pct { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text); }
.ts-foot {
    font-size: 10px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 7px;
    line-height: 1.4;
}
.ts-empty { font-size: 11px; color: var(--text-muted); margin-top: 10px; }

@media (max-width: 1100px) {
    /* Below this the chart is too narrow to read eight periods beside a
       208px panel, so the panel drops underneath at full width. */
    .trend-body { flex-direction: column; gap: 14px; }
    .trend-standings {
        flex: 1 1 auto;
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 12px;
    }
    .ts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 18px; }
}

/* Week selector */
/* Weekly / Monthly granularity toggle */
.gran-toggle {
    display: inline-flex;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.gran-btn {
    padding: 5px 14px;
    border: none;
    background: var(--card-bg);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
}
.gran-btn + .gran-btn { border-left: 1px solid var(--border); }
.gran-btn:hover { background: var(--bg); }
.gran-btn.active { background: var(--sidebar-bg); color: #fff; }

.week-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.week-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
}
.week-btn:hover { background: var(--bg); }
.week-btn.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

/* Matrix Table */
.matrix-container {
    overflow-x: auto;
    overflow-y: visible;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 24px;
    position: relative;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.matrix-table th, .matrix-table td {
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: center;
}

.matrix-table thead th {
    background: #f9fafb;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.engine-header { background: var(--sidebar-bg) !important; color: #fff !important; }
/* The dot's default grey vanishes on the dark engine header. */
.engine-header .help-dot { background: rgba(255,255,255,.22); color: #fff; }
.engine-header .help-dot:hover, .engine-header .help-dot:focus { background: #fff; color: var(--sidebar-bg); }
.geo-header { background: #f3f4f6 !important; font-size: 11px; text-transform: uppercase; }

.col-prompt {
    text-align: left !important;
    font-weight: 500;
}
/* Truncation is for the BODY cells, where prompts run long. On the header it
   was clipping the column's own tooltip to the height of the word "Prompt". */
td.col-prompt {
    /* No cap: the column is elastic and these prompts are long sentences, so a
       cap only bought truncation. The full text is on hover either way - and
       only when it is genuinely cut, which the tooltip now checks by asking
       .mx-name whether its own text overflowed. On the <td> that measurement
       would be about the cell, which also holds the chevron and the paused
       tag. */
    overflow: hidden;
}
/* Every header here is sticky, so each one opens a stacking context and the
   later ones paint over the earlier ones - a tooltip in the first column went
   under the engine header beside it. Lift whichever is being read. */
.matrix-table thead th:hover,
.matrix-table thead th:focus-within { z-index: 30; }

.col-volume { font-size: 12px; color: var(--text-muted); }

/* Full-prompt hover tooltip (Prompt column is truncated) */
#promptTip {
    position: fixed;
    z-index: 60;
    max-width: 440px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 13px;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    white-space: normal;
}
#promptTip.on { opacity: 1; }

/* Cells */
.cell { font-weight: 600; font-size: 12px; cursor: pointer; }
.cell a { display: block; width: 100%; }
.cell-yes { background: var(--green-bg); color: #166534; }
.cell-yes a { color: #166534; }
.cell-no { background: var(--red-bg); color: #991b1b; }
.cell-no a { color: #991b1b; }
.cell { position: relative; }
/* .cell-ratio was here: a tooltip positioned absolutely INSIDE its cell. It
   worked while the grid was wide and the hovered cell was somewhere in the
   middle. With two columns the only one carrying it is the last, and the card
   scrolls horizontally - a scroll container clips on both axes once either is
   not visible - so the tooltip ran off the card's right edge and was cut in
   half. Its text moved to data-tip and the floating #promptTip, which sits on
   <body> and clamps to the viewport. Nothing else used the class. */
.cell-partial { background: var(--orange-bg); color: #92400e; }
.cell-partial a { color: #92400e; }
.cell-nodata { color: var(--text-muted); background: #f9fafb; }

/* ---- The grid, collapsed: one row per prompt ------------------------------
   It was prompts x (engine x market) - 528 cells on cubeapm, on a table that
   already scrolled sideways, with the prompt column the first thing to leave
   the screen. Now the row carries the pooled percentage and a bar per pair,
   and the pairs themselves live in the row you open. */
/* TWO COLUMNS, AND THE PROMPT TAKES THE WIDTH. Sizing the card to its content
   was the wrong cure: it closed the slack inside the row by leaving half the
   page empty beside the card, which reads worse and breaks step with the
   full-width chart above. The prompt column is elastic again - these are long
   questions and they use the room, so the truncation a capped table forced is
   gone - and the Visibility cell is colour-filled at a fixed position, which
   is what anchors the eye at the end of a wide row. */
.matrix-table { table-layout: fixed; }
.matrix-table .col-prompt { width: auto; }
.mx-h-vis { width: 90px; }

/* THE PROMPT NAME IS TEXT, NOT A LINK. It used to navigate, which put two
   different actions in one row: click the words and you left the page, click a
   few pixels either side and the row opened - and the words looked like the
   primary action while being the one people did not want. The row owns the
   click now; reading the answers is its own button at the end of the row.

   The clipping lives here rather than on the <td>, so the tooltip can ask this
   element whether ITS text overflowed. On the cell that measurement is about
   the cell, which also holds the chevron and the paused tag. */
.mx-name {
    color: var(--text);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.mx-row-open .mx-name { font-weight: 600; }

/* The all-engines tile is gone: each market group now has its own "Read
   answers" link in its header, which is the same job done where the market is
   already named. */


/* The chevron. Kept as a real button even though the whole row now toggles,
   because a <tr> is not focusable and the keyboard must have a way in. */
/* THE ROW IS THE CONTROL. An 18px borderless arrow reads as decoration, and
   people do not expect a table cell to be clickable - which is why nobody was
   finding the split. So the row carries the pointer and a hover tint, the
   chevron is drawn as a control rather than a glyph, and the hover state moves
   both at once so the arrow is visibly part of what you are about to click. */
tr.mx-row { cursor: pointer; }
tr.mx-row:hover > td { background: #f1f6fd; }
tr.mx-row:hover > td.cell { background-image: linear-gradient(rgba(42,120,214,.07), rgba(42,120,214,.07)); }
.mx-twist {
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    width: 20px;
    height: 20px;
    margin-right: 7px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
tr.mx-row:hover .mx-twist {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}
.mx-twist:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.mx-twist[aria-expanded="true"] {
    transform: rotate(90deg);
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}
.mx-row-open > .col-prompt { font-weight: 600; }

/* The strip: one bar per engine and market pair, taller for more visible.
   BARS RATHER THAN SHADES, deliberately. A 4px sliver of green beside one of
   red is the one encoding a colour-blind reader cannot take apart, and this
   strip exists to be read at a glance. Height needs no hue to work, so the
   bars are all one colour - the same blue the chart draws this brand's own
   line in, because it is the same measure. */
/* The shade block beside a tile's label. There was a strip of these in a
   column of its own, one per engine and market, as a preview of the open row.
   Removed on Mayank's call, and he is right: unlabelled, nobody can tell which
   block is which engine, so it was decoration that cost a column. */
.mx-seg {
    display: block;
    width: 8px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 2px;
    background: var(--border);
}
/* A SEQUENTIAL RAMP: one hue, light to dark. Bars by height came first and
   were unreadable - 9% of an 18px track is a 1.6px hairline, so a column of
   them read as grey boxes with a blue underline and you could not tell 9% from
   40%. One ordered hue keeps every block visible at every value and keeps the
   encoding out of red/green territory. */
/* Zero is its OWN state, not the palest blue: "we asked and the brand never
   appeared" is a different fact from "it appeared rarely", and stepping them
   as neighbours on one ramp put them 1.19x apart, which is not a difference
   anyone sees. Grey, outlined, no hue. The blue then carries 1-100% with every
   adjacent pair at least 1.43x apart in luminance, so the column reads as
   ordered rather than as six similar tints. */
.mx-s0 { background: #f1f5f9; box-shadow: inset 0 0 0 1px #dbe3ec; }
.mx-s1 { background: #bcd7f5; }
.mx-s2 { background: #8ab6e9; }
.mx-s3 { background: #5a93da; }
.mx-s4 { background: #3070c4; }
.mx-s5 { background: #14508f; }
/* Nothing collected, and switched on with nothing yet. Both keep their slot so
   the blocks line up down the column and a hole reads as a hole, not a zero. */
.mx-seg-none {
    background: repeating-linear-gradient(135deg, #e2e8f0 0 2px, transparent 2px 4px);
    box-shadow: inset 0 0 0 1px #eef2f7;
}
.mx-seg-pending { background: #eef2f7; opacity: .6; }

/* The open row: one horizontal band of tiles, flowing left to right and
   wrapping when there are many. It was a table with engines down and markets
   across - a good shape for a grid, a bad one for a disclosure: a four-engine
   brand opened a block five rows tall that used only the left of the width and
   left a tall empty rectangle in the middle of the table, which is the thing
   collapsing the grid was meant to remove. */
tr.mx-detail > td { padding: 0 !important; border-top: 0 !important; background: #f8fafc; }
.mx-inner-wrap { padding: 8px 10px 10px 34px; }
.mx-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 104px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    text-decoration: none;
    color: inherit;
    line-height: 1.25;
}
/* A TILE IS A LINK AND SAYS SO IN WORDS. They read as stat cards - a number in
   a box, nothing suggesting a destination - and an arrow alone did not fix it.
   The bottom line swaps from the number to "Read answers" on hover while the
   top line keeps naming the engine and market, so the two lines together are
   the sentence: "Copilot UK / Read answers".

   The swap is ABSOLUTE. A longer phrase in the normal flow would widen the
   tile, and widening a tile mid-band reflows every tile after it, under the
   pointer that is hovering one of them. */
a.mx-tile { position: relative; }
a.mx-tile:hover,
a.mx-tile:focus-visible {
    border-color: var(--blue);
    background: #f5f9ff;
}
a.mx-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
a.mx-tile:hover .mx-tile-k { color: var(--blue); }
.mx-tile-go {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s ease;
}
/* Every tile in the band now carries a number, so every one of them swaps.
   The :not() that used to be here protected the all-engines tile, whose only
   text WAS the phrase - hovering it made it blank. That tile is gone; each
   market group has its own Read answers link in its header instead. */
a.mx-tile:hover .mx-tile-v,
a.mx-tile:focus-visible .mx-tile-v { opacity: 0; }
a.mx-tile:hover .mx-tile-go,
a.mx-tile:focus-visible .mx-tile-go { opacity: 1; }
.mx-tile-v { transition: opacity .12s ease; }

/* Visually hidden, still read aloud: the tile's face is abbreviated, so the
   full sentence lives here for a screen reader. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.mx-tile-k {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
/* The shade sits BESIDE the text, never behind it, so the number and the label
   wear normal ink and nothing has to stay legible on a dark blue ground. */
.mx-tile-geo {
    margin-left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--border);
    font-size: 9.5px;
    letter-spacing: .02em;
}
.mx-tile-v {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mx-tile-n { margin-left: 5px; font-size: 10px; font-weight: 500; color: var(--text-muted); }
.mx-tile-off { opacity: .65; }
.mx-tile-off .mx-tile-v { font-weight: 600; color: var(--text-muted); }

/* Summary Stats */
.summary-stats { margin-top: 24px; }
.summary-stats h3 { font-size: 16px; margin-bottom: 12px; }

.stats-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 24px;
    min-width: 120px;
    text-align: center;
}

.stat-value { font-size: 22px; font-weight: 700; color: var(--text); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Prompt Detail */
.prompt-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.engine-tabs, .geo-tabs {
    display: flex;
    gap: 4px;
}

.tab-btn {
    padding: 6px 16px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}
.tab-btn:hover { background: var(--bg); }
.tab-btn.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

/* Mini matrix */
.prompt-matrix {
    margin-bottom: 20px;
}

.mini-matrix {
    border-collapse: collapse;
    font-size: 13px;
}

.mini-matrix th, .mini-matrix td {
    padding: 6px 14px;
    border: 1px solid var(--border);
    text-align: center;
}

.mini-matrix th { background: #f9fafb; font-size: 11px; text-transform: uppercase; }
.engine-label { text-align: left !important; font-weight: 600; background: #f9fafb; }

.mini-cell { cursor: pointer; transition: outline 0.15s; }
.mini-cell.selected { outline: 3px solid var(--blue); outline-offset: -1px; }


/* Detail Panel */
.detail-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    min-height: 200px;
}

.detail-placeholder { color: var(--text-muted); font-style: italic; }
.detail-loading { color: var(--text-muted); }

.entry-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.entry-date { font-size: 13px; color: var(--text-muted); }
.entry-engine, .entry-geo {
    font-size: 12px;
    padding: 2px 8px;
    background: var(--bg);
    border-radius: 4px;
    font-weight: 600;
}

.badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}
.badge-yes { background: var(--green-bg); color: #166534; }
.badge-no { background: var(--red-bg); color: #991b1b; }

/* Sections */
.section { margin-bottom: 24px; }
.section h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }

/* Competitor ranking */
.rank-summary { font-size: 14px; margin-bottom: 10px; }
.ranked-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ranked-item {
    font-size: 13px;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ranked-brand {
    background: var(--orange-bg);
    border-color: var(--orange);
    font-weight: 700;
}
.ranked-pos {
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 2px;
}
.ranked-brand .ranked-pos { color: #92400e; }

/* Mentions */
.mentions-list { display: flex; gap: 6px; flex-wrap: wrap; }
.mention-tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
}
.mention-brand { background: var(--orange-bg); border-color: var(--orange); font-weight: 600; }
.mention-competitor { background: var(--red-bg); border-color: var(--red); }

/* Response */
.response-text {
    font-size: 14px;
    line-height: 1.7;
    max-height: 500px;
    overflow-y: auto;
    padding: 16px;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.response-text p { margin-bottom: 8px; }

mark.hl-brand { background: var(--orange-bg); padding: 1px 3px; border-radius: 2px; }
mark.hl-competitor { background: var(--red-bg); padding: 1px 3px; border-radius: 2px; }

/* Citations table */
.citations-table-wrap { overflow-x: auto; }
.citations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.citations-table th, .citations-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.citations-table thead th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.citations-table tbody tr:hover { background: #f9fafb; }

.cite-domain { font-weight: 600; white-space: nowrap; }
.cite-title { max-width: 300px; }
.cite-url { font-size: 12px; word-break: break-all; color: var(--text-muted); }
.cite-url a { color: var(--text-muted); }
.cite-url a:hover { color: var(--blue); }

.cite-seed-row { background: #f0fdf4 !important; }
.cite-seed-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #22c55e;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
}
.cite-shared-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 2px;
}
.cite-not-shared-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 2px;
}
.cite-owned-row { background: #eff6ff !important; }
.cite-owned-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
}

.cite-mention-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
}
.cite-mention-badge.mention-checking { background: #f3f4f6; color: #6b7280; }
.cite-mention-badge.mention-yes { background: #16a34a; color: #fff; }
.cite-mention-badge.mention-no { background: #f3f4f6; color: #6b7280; }
.cite-mention-badge.mention-error { background: #fef3c7; color: #92400e; }
/* source marker (Diffbot / Reddit) rendered as a real superscript at the top */
.cite-mention-badge sup.cite-src-mark {
    font-size: 7px;
    font-weight: 700;
    margin-left: 2px;
    opacity: 0.85;
    vertical-align: super;
    line-height: 0;
}

/* Client-side table search (publishers / platforms / pages / URLs) */
/* sits inline on the engine-filter row, pushed to the right */
.filters-with-search { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.filters-with-search .engine-filter,
.filters-with-search .period-filter { margin-bottom: 0; }
.table-search-wrap { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
.table-search {
    width: 240px;
    max-width: 100%;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.table-search:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.table-search-count { font-size: 12px; color: #6b7280; white-space: nowrap; }
/* composes with the engine filter (both can hide a row) */
.citations-overview-table tr.search-hidden { display: none !important; }

/* Citations toolbar: Download CSV (left) + check button (right) */
.cite-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.btn-check {
    padding: 4px 12px;
    font-size: 12px;
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    border-radius: 6px;
    margin-bottom: 8px;
    font-weight: 500;
    cursor: pointer;
    white-space: normal;
    max-width: 170px;
    line-height: 1.25;
    text-align: center;
}
.btn-check:hover { background: #2563eb; }
.btn-check:disabled { opacity: 0.6; cursor: not-allowed; }
/* secondary "Recheck" state once a run has happened */
.btn-recheck {
    padding: 4px 12px;
    font-size: 12px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    margin-bottom: 8px;
    font-weight: 500;
    cursor: pointer;
    white-space: normal;
    max-width: 170px;
    line-height: 1.25;
    text-align: center;
}
.btn-recheck:hover { background: #dbeafe; }
.btn-recheck:disabled { opacity: 0.6; cursor: not-allowed; }

/* "Is <brand> present on the page?" column — hidden until a check has run */
.citations-table th.cite-present-head { white-space: normal; min-width: 130px; }
.citations-table th.cite-present-head,
.citations-table td.cite-present { display: none; }
.citations-table.show-present-col th.cite-present-head,
.citations-table.show-present-col td.cite-present { display: table-cell; }
.citations-table td.cite-present { text-align: center; font-size: 13px; white-space: nowrap; }
.present-val { font-weight: 700; }
.present-val.present-yes { color: #16a34a; }
.present-val.present-no { color: #6b7280; }
.present-val.present-unknown { color: #b45309; }
.present-flip {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 1px 5px;
    margin-left: 4px;
    color: #374151;
}
.present-flip:hover { background: #f3f4f6; }
.present-flip:disabled { opacity: 0.5; cursor: not-allowed; }
.present-override-note { font-size: 10px; color: #9ca3af; margin-top: 3px; white-space: normal; }
.present-reset { color: #6b7280; text-decoration: underline; }
/* subtle row tint once a check has run (seed/owned rows keep their colour via !important) */
.citations-table tbody tr.mention-row-yes { background: #f0fdf4; }
.citations-table tbody tr.mention-row-no { background: #fafafa; }

.cite-new-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #22c55e;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
}
.cite-dropped-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
}
.cite-change { font-size: 11px; font-weight: 600; margin-left: 4px; }
.cite-change-up { color: #166534; }
.cite-change-down { color: #991b1b; }
.domain-row.dropped-row { opacity: 0.55; }
.url-row.dropped-row { opacity: 0.55; }
.section-header-row td {
    background: var(--bg-secondary, #f3f4f6);
    padding: 10px 14px;
    font-size: 13px;
    border-top: 2px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.section-header-row.section-toggle:hover td { background: #e5e7eb; }
.section-arrow { display: inline-block; font-size: 10px; width: 14px; color: var(--text-muted); }
.sub-section-header td { background: var(--bg, #fff) !important; border-top: 1px solid var(--border); }
.sub-section-header:hover td { background: #f9fafb !important; }
.weekly-summary {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Sortable headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--border); }
th.sortable::after { content: ' \2195'; font-size: 10px; color: var(--text-muted); }
th.sort-asc::after { content: ' \2191'; color: var(--text); }
th.sort-desc::after { content: ' \2193'; color: var(--text); }

/* Type tags */
.type-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.type-listicle { background: #dbeafe; color: #1e40af; }
.type-comparison { background: #fae8ff; color: #86198f; }
.type-guide { background: #d1fae5; color: #065f46; }
.type-review { background: #fef3c7; color: #92400e; }
.type-blog { background: #e0e7ff; color: #3730a3; }
.type-reddit { background: #fee2e2; color: #991b1b; }
.type-youtube { background: #fee2e2; color: #dc2626; }
.type-linkedin { background: #dbeafe; color: #1d4ed8; }
.type-github { background: #f3f4f6; color: #1f2937; }
.type-wiki { background: #f3f4f6; color: #4b5563; }
.type-news { background: #fef3c7; color: #78350f; }
.type-docs { background: #d1fae5; color: #047857; }
.type-website { background: #f3f4f6; color: #6b7280; }

/* Fanout */
.fanout-list { list-style: disc; padding-left: 20px; }
.fanout-list li { padding: 3px 0; font-size: 13px; }

/* Date selector */
.date-selector {
    margin-bottom: 16px;
}
.date-selector label { font-size: 13px; font-weight: 600; margin-right: 8px; }
.date-selector select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
}

/* Brand status toggle */
.brand-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}
.brand-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 4px;
}
.brand-card-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    pointer-events: all;
}
.status-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.status-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    width: 36px;
    height: 20px;
    background: #d1d5db;
    border-radius: 20px;
    transition: background 0.2s;
    position: relative;
    flex-shrink: 0;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.status-toggle input:checked + .toggle-slider { background: var(--green); }
.status-toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-label { font-size: 12px; color: var(--text-muted); }

/* Paused brand styles */
.brand-paused .brand-card {
    opacity: 0.45;
    filter: grayscale(40%);
    pointer-events: none;
}
.brand-paused .brand-card-toggle { pointer-events: all; opacity: 1; filter: none; }
.brand-paused .brand-card:hover { border-color: var(--border); box-shadow: none; }
.brand-nav-paused a { opacity: 0.45; }

/* Calendly nudge */
.calendly-nudge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blue);
    background: var(--blue-bg);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 8px 14px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 0.15s, border-color 0.15s;
}
.calendly-nudge:hover { background: #c7d9f5; border-color: #93c5fd; text-decoration: none; }

/* View-as-competitor banner */
.view-as-banner {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 16px;
}
.view-as-banner a {
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
}

/* UGC Sidebar */
.ugc-section-link {
    color: rgba(255,255,255,0.4) !important;
    text-decoration: none !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.ugc-section-link:hover { color: rgba(255,255,255,0.7) !important; text-decoration: none !important; }
.ugc-nav-sub a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.ugc-nav-sub a.ugc-section-link-inline {
    display: block !important;
}
.ugc-nav-count {
    font-size: 10px;
    opacity: 0.5;
    font-weight: 400;
}
.ugc-section-link-inline {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.4) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    padding-left: 24px !important;
    display: block !important;
}
.ugc-section-link-inline:hover { color: rgba(255,255,255,0.7) !important; }
.nav-section-stat {
    display: block;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.5;
    font-weight: 400;
    margin-top: 1px;
}
.nav-domain-hint {
    display: block;
    font-size: 10px;
    opacity: 0.4;
    font-weight: 400;
    margin-top: 1px;
}
.nav-section-title {
    display: block;
}

/* UGC Overview */
.ugc-cat-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.ugc-cat-badge:hover { background: var(--blue-bg); border-color: var(--blue); color: var(--blue) !important; }

.ugc-discover-section { margin-bottom: 24px; }
.ugc-discover-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}
.ugc-discover-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--orange-bg);
    border-radius: 6px;
    color: #92400e;
}

/* UGC Category page */
.ugc-tab-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.ugc-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.ugc-tab:hover { background: var(--bg); }
.ugc-tab.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }

.ugc-plat-cell { font-weight: 500; }
.ugc-plat-cell a { color: var(--blue) !important; }
.ugc-domain-hint { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }

.ugc-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.ugc-discover-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
}
.ugc-discover-name { font-size: 14px; font-weight: 600; }
.ugc-discover-domain { font-size: 12px; color: var(--text-muted); }

/* UGC Platform detail */
.ugc-url-cell { max-width: 500px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* UGC domain tags */
.ugc-domain-tag { display: inline-flex; align-items: center; gap: 4px; background: #f0fdf4; border: 1px solid #86efac; color: #166534; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-family: monospace; }

/* URL classify override button */
.btn-classify-override { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; padding: 2px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.btn-classify-override:hover { border-color: var(--blue); color: var(--blue); }
.btn-classify-override:disabled { opacity: 0.5; cursor: default; }

/* Owned domain highlight row */
.owned-domain-row { background: #eff6ff; border-bottom: 2px solid #3b82f6; }
.owned-domain-row td { font-weight: 600; }
.owned-domain-badge { display: inline-block; font-size: 10px; font-weight: 600; background: #3b82f6; color: #fff; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.3px; }

/* Citation URL filter mode */
.cite-url-banner { background: #fffbeb; border: 1px solid #fbbf24; color: #92400e; padding: 8px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
.cite-url-banner a { color: var(--blue); }
.cite-url-banner strong { word-break: break-all; }
.cite-count { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.cite-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cite-item { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cite-item:hover { border-color: var(--blue); }
.cite-item-active { border-color: var(--blue); background: #eff6ff; }
.cite-item-engine { font-weight: 600; }
.cite-item-geo { background: var(--border); padding: 1px 5px; border-radius: 3px; font-size: 11px; text-transform: uppercase; }
.cite-item-date { color: var(--text-muted); font-size: 12px; }
.cite-filtered-row { background: #fefce8 !important; }
.cite-filtered-row td { font-weight: 600; }

/* Cite occurrences: engine tabs + date timeline */
.cite-engine-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.cite-eng-tabs { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.cite-eng { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; color: var(--text); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.cite-eng:hover { background: var(--border); }
.cite-eng-active, .cite-eng-active:hover { background: var(--blue); color: #fff; }
.cite-eng-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,0.08); font-size: 11px; font-weight: 700; }
.cite-eng-active .cite-eng-count { background: rgba(255,255,255,0.28); }
.cite-geo-tabs { display: inline-flex; gap: 4px; }
.cite-geo { border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.cite-geo-active { border-color: var(--blue); color: var(--blue); background: #eff6ff; }
.cite-geo-label { font-size: 12px; color: var(--text-muted); }
.cite-date-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 16px; }
.cite-date-caption { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.cite-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.cite-date { border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.cite-date:hover { border-color: var(--blue); }
.cite-date-active { border-color: var(--blue); background: #eff6ff; color: var(--blue); font-weight: 600; }

/* Engine pills */
.engine-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.engine-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; padding: 2px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.engine-pill:hover { border-color: var(--blue); color: var(--blue); }
.engine-pill-active { border-color: var(--blue); color: var(--blue); background: #eff6ff; }
.engine-prompt-count { font-size: 10px; background: var(--border); color: var(--text-muted); padding: 0 4px; border-radius: 3px; min-width: 14px; text-align: center; }
.engine-pill:hover .engine-prompt-count, .engine-pill-active .engine-prompt-count { background: #dbeafe; color: var(--blue); }
.engine-prompts-row td { padding: 0 !important; border-top: none !important; }
.engine-prompts-detail { padding: 8px 16px 12px; background: #f8fafc; border-top: 1px dashed var(--border); }
.engine-prompt-group { margin-bottom: 4px; }
.engine-prompt-header { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.engine-prompt-link { display: block; font-size: 13px; color: var(--blue); padding: 3px 0; text-decoration: none; }
.engine-prompt-link:hover { text-decoration: underline; }

/* Breadcrumbs */
.breadcrumb-link { color: var(--text-muted) !important; font-weight: 400; }
.breadcrumb-link:hover { color: var(--blue) !important; }
.breadcrumb-sep { color: var(--text-muted); margin: 0 4px; font-weight: 300; }

/* Insights — Reddit (and future platforms) */
.reddit-action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.reddit-action-bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.btn-ghost {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--card-bg); }
.btn-insights {
    padding: 7px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    color: #5b21b6;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.btn-insights:hover { border-color: #a78bfa; box-shadow: 0 1px 3px rgba(124, 58, 237, 0.15); }
.insights-generated-at { color: var(--text-muted); font-size: 12px; }

.insights-actions { display: flex; align-items: center; gap: 12px; margin: 16px 0 24px; }
.insights-status { font-size: 13px; color: var(--text-muted); }
.insights-status-running { color: var(--blue); }
.insights-status-ok { color: var(--green); }
.insights-status-error { color: #b91c1c; }

.insights-empty {
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 24px;
    color: var(--text-muted);
    margin-top: 16px;
}
.insights-empty h3 { margin-top: 0; color: var(--text); }

.insights-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.insights-block h3 { margin-top: 0; margin-bottom: 12px; font-size: 16px; }
.insights-block-desc { color: var(--text-muted); font-size: 13px; margin: -4px 0 16px; }
.insights-summary { font-size: 15px; line-height: 1.55; margin: 0; }
.insights-muted { color: var(--text-muted); }
.insights-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }

.insights-list { margin: 0; padding-left: 20px; }
.insights-list li { margin-bottom: 8px; line-height: 1.5; }

.insights-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.insights-table th, .insights-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.insights-table thead th { background: #f9fafb; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.insights-table tbody tr:last-child td { border-bottom: none; }

.insights-strategy-list { list-style: none; padding: 0; margin: 0; counter-reset: strategy; }
.insights-strategy-item {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fff;
    counter-increment: strategy;
    position: relative;
}
.insights-strategy-item::before {
    content: counter(strategy);
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 22px;
    font-weight: 700;
    color: #e5e7eb;
}
.insights-priority-high { border-left-color: #dc2626; }
.insights-priority-medium { border-left-color: #f59e0b; }
.insights-priority-low { border-left-color: #9ca3af; }
.insights-strategy-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.insights-strategy-head strong { font-size: 15px; }
.insights-priority-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f3f4f6;
    color: var(--text-muted);
}
.insights-priority-high .insights-priority-pill { background: #fee2e2; color: #b91c1c; }
.insights-priority-medium .insights-priority-pill { background: #fef3c7; color: #92400e; }
.insights-format-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
}
.insights-format-comment_reply { background: #f0fdf4; color: #15803d; }
.insights-format-answer_in_thread { background: #faf5ff; color: #7e22ce; }
.insights-pattern-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f3f4f6;
    color: var(--text-muted);
}
/* Curious-persona post types */
.insights-pattern-alternative-search { background: #ecfeff; color: #0e7490; }
.insights-pattern-direct-comparison  { background: #eff6ff; color: #1d4ed8; }
.insights-pattern-brand-question     { background: #fef3c7; color: #92400e; }
.insights-pattern-generic-category   { background: #f3f4f6; color: #374151; }
/* Customer-persona post types */
.insights-pattern-migration-story    { background: #ecfdf5; color: #047857; }
.insights-pattern-scale-review       { background: #f0fdf4; color: #15803d; }
.insights-pattern-anyone-else-here   { background: #f7fee7; color: #4d7c0f; }
.insights-pattern-side-by-side       { background: #ecfdf5; color: #047857; }
.insights-pattern-honest-pain-point  { background: #fef2f2; color: #b91c1c; }
/* Brand-persona post types */
.insights-pattern-open-community-question { background: #f5f3ff; color: #6d28d9; }
.insights-pattern-transparent-update      { background: #faf5ff; color: #7e22ce; }
.insights-pattern-founder-intro           { background: #fdf4ff; color: #a21caf; }
.insights-pattern-behind-the-scenes       { background: #fae8ff; color: #86198f; }
.insights-pattern-blog-syndication        { background: #fdf4ff; color: #a21caf; }
.insights-pattern-category-pov            { background: #f5f3ff; color: #6d28d9; }
.insights-pattern-tool-stack-writeup      { background: #ecfdf5; color: #047857; }
.insights-pattern-ranked-listicle         { background: #eff6ff; color: #1d4ed8; }
.insights-pattern-category-explainer      { background: #ecfeff; color: #0e7490; }
/* Venue pill */
.insights-venue-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed #d1d5db;
    background: #fafafa;
    color: #6b7280;
}
.insights-venue-self { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.insights-section-empty { padding: 12px 4px; }

/* Persona section header accents */
.insights-persona { border-left: 4px solid transparent; }
.insights-persona-brand    { border-left-color: #a21caf; }
.insights-persona-customer { border-left-color: #047857; }
.insights-persona-curious  { border-left-color: #1d4ed8; }
.insights-persona h3 { display: flex; align-items: center; gap: 8px; }

/* Tabs on insights page */
.insights-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin: 20px 0;
    flex-wrap: wrap;
}
.insights-tab {
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.insights-tab:hover { color: var(--text); }
.insights-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.insights-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #f3f4f6;
    color: var(--text-muted);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.insights-tab.active .insights-tab-count { background: #dbeafe; color: #1d4ed8; }
.insights-tabs-group {
    display: flex;
    flex-direction: column;
    margin-left: 24px;
    padding-left: 24px;
    border-left: 1px solid var(--border);
    align-self: stretch;
    justify-content: flex-end;
}
.insights-tabs-group-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 0 6px;
    text-align: center;
    align-self: stretch;
}
.insights-tabs-group-row { display: flex; gap: 4px; justify-content: center; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Insights header actions row */
.insights-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* "Generate +5 more ideas" footer per playbook tab */
.insights-generate-more {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

/* Page-level breadcrumb (drafts pages) */
.page-breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.page-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.page-breadcrumb-sep { color: #d1d5db; font-weight: 300; }
.page-breadcrumb-current { color: var(--text); font-weight: 600; }

/* Drafts list table */
.drafts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.drafts-table th, .drafts-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.drafts-table thead th { background: #f9fafb; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.drafts-table tbody tr:last-child td { border-bottom: none; }
.drafts-table tbody tr:hover { background: #f9fafb; }
.drafts-title-link { color: var(--text); font-weight: 500; }
.drafts-title-link:hover { color: var(--blue); }
.drafts-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.drafts-comments-cell { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.drafts-row { cursor: pointer; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* Status pills (drafts) */
.draft-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f3f4f6;
    color: var(--text-muted);
}
.draft-status-draft { background: #eff6ff; color: #1d4ed8; }
.draft-status-approved { background: #ecfdf5; color: #047857; }
.draft-status-approved-with-edits { background: #f0fdfa; color: #0f766e; }
.draft-status-skipped { background: #f3f4f6; color: #6b7280; }

/* Persona tags (reused on list + detail) */
.insights-persona-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}
.insights-persona-tag-brand    { background: #fae8ff; color: #86198f; }
.insights-persona-tag-customer { background: #ecfdf5; color: #047857; }
.insights-persona-tag-curious  { background: #dbeafe; color: #1d4ed8; }

/* Draft detail form */
.draft-form section.insights-block { margin-bottom: 16px; }
.draft-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.draft-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.draft-title-input { font-weight: 600; font-size: 15px; }
.draft-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.55;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
    resize: vertical;
}
.draft-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.draft-field-block { margin-bottom: 12px; }
.draft-field-block:last-child { margin-bottom: 0; }
.draft-field-label {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.draft-edited-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.draft-comment-block {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fafbfc;
}
.draft-comment-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px;
}
.draft-comment-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.draft-comment-text { background: #fff; }
.draft-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

/* Source-idea collapsible panel on detail page */
.insights-source-idea summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.insights-source-idea-body { margin-top: 12px; }
.insights-source-idea-body p { margin: 6px 0; font-size: 13px; line-height: 1.5; }

/* Per-idea draft block */
.insights-draft-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.insights-draft-status { font-size: 12px; color: var(--text-muted); }

.insights-draft {
    margin-top: 14px;
    padding: 14px;
    background: #f9fafb;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.insights-draft-block { margin-bottom: 12px; }
.insights-draft-block:last-child { margin-bottom: 0; }
.insights-draft-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.insights-draft-text {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.insights-draft-title-text { font-weight: 600; font-size: 15px; }
.insights-draft-body-text { font-size: 14px; }

.insights-draft-comments { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.insights-draft-comments h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 10px; font-weight: 700; }
.insights-draft-comment { margin-bottom: 10px; }
.insights-draft-comment:last-child { margin-bottom: 0; }

.insights-copy-btn {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.insights-copy-btn:hover { border-color: var(--blue); color: var(--blue); }

.insights-mention-pill {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 3px;
}
.insights-mention-yes { background: #ecfdf5; color: #047857; }
.insights-mention-no  { background: #f3f4f6; color: #6b7280; }

.insights-draft-footer { margin-top: 10px; font-size: 11px; color: var(--text-muted); text-align: right; }
.insights-target { font-size: 12px; color: var(--text-muted); }
.insights-suggested-title { font-size: 15px; font-style: italic; color: var(--text); margin: 6px 0 10px; line-height: 1.45; }
.insights-target-url { margin: 6px 0; font-size: 13px; word-break: break-all; }
.insights-meta-line { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.insights-rationale { margin: 6px 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.insights-angle { margin: 6px 0; font-size: 14px; color: var(--text); background: #f9fafb; padding: 10px 12px; border-radius: 4px; line-height: 1.5; }

.insights-url-list { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.insights-url-list li { margin-bottom: 4px; }
.insights-url-list a { word-break: break-all; }
.insights-url-list-compact { font-size: 12px; max-height: 80px; overflow: hidden; }

/* Third-party publishers — Classify button + Type / Pages-cited columns */
.thirdparty-classify-bar { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; flex-wrap: wrap; }
.thirdparty-classify-status { font-size: 13px; color: var(--text-muted); }
.thirdparty-classify-running { color: var(--blue); }
.thirdparty-classify-ok      { color: var(--green); }
.thirdparty-classify-error   { color: #b91c1c; }

.domain-type-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f3f4f6;
    color: var(--text-muted);
    white-space: nowrap;
}
.domain-type-competitor-product    { background: #fee2e2; color: #b91c1c; }
.domain-type-news-media            { background: #eff6ff; color: #1d4ed8; }
.domain-type-industry-blog         { background: #ecfeff; color: #0e7490; }
.domain-type-directory-aggregator  { background: #fef3c7; color: #92400e; }
.domain-type-affiliate-comparison  { background: #fdf4ff; color: #a21caf; }
.domain-type-official-vendor       { background: #ecfdf5; color: #047857; }
.domain-type-other                 { background: #f3f4f6; color: #4b5563; }
.domain-type-you                   { background: #dbeafe; color: #1d4ed8; }
.domain-type-pending {
    background: transparent;
    color: var(--text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
}

.page-types-cell  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.page-type-stat   { white-space: nowrap; }
.page-types-empty { color: var(--text-muted); }

/* Per-URL page-type pill (used on the third-party domain drill-down) */
.page-type-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #f3f4f6;
    color: #4b5563;
    white-space: nowrap;
}
.page-type-listicle           { background: #fef3c7; color: #92400e; }
.page-type-comparison         { background: #dbeafe; color: #1d4ed8; }
.page-type-alternatives-list  { background: #fee2e2; color: #b91c1c; }
.page-type-review             { background: #ecfdf5; color: #047857; }
.page-type-guide              { background: #eef2ff; color: #4338ca; }
.page-type-case-study         { background: #fff7ed; color: #c2410c; }
.page-type-research-report    { background: #fef2f2; color: #9f1239; }
.page-type-pricing            { background: #f0fdfa; color: #0f766e; }
.page-type-landing            { background: #f5f3ff; color: #6d28d9; }
.page-type-blog-post          { background: #ecfeff; color: #0e7490; }
.page-type-news-article       { background: #eff6ff; color: #1d4ed8; }
.page-type-press-release      { background: #fdf4ff; color: #a21caf; }
.page-type-docs               { background: #f0fdf4; color: #15803d; }
.page-type-other              { background: #f3f4f6; color: #4b5563; }

/* ===== Citation Seed Pipeline (admin global page) ===== */
.pipeline-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.pipeline-filters { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pl-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.pl-filter select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; background: #fff; }
.pl-status-toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.pl-status {
    padding: 6px 12px; font-size: 13px; color: var(--text-muted);
    text-decoration: none; border-right: 1px solid #e5e7eb; background: #fff;
}
.pl-status:last-child { border-right: none; }
.pl-status.active { background: var(--accent, #2563eb); color: #fff; }
.pl-status .pl-count { opacity: 0.75; font-size: 11px; margin-left: 2px; }

.pipeline-table td { vertical-align: top; }
.pl-brand { font-weight: 600; white-space: nowrap; }
.pl-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pl-partner-name { font-weight: 500; }
.pl-contact { font-family: ui-monospace, monospace; }
.pl-muted { color: var(--text-muted); }
.pl-comments { font-size: 12px; color: #374151; max-width: 240px; white-space: pre-wrap; }
.pl-row-live { background: #f9fafb; }
.pl-row-live .seed-title a { color: #166534; }
.pl-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.pl-badge-pipeline { background: #fef3c7; color: #92400e; }
.pl-badge-live { background: #dcfce7; color: #166534; }
.pl-actions { white-space: nowrap; }
.pl-actions .btn { margin-right: 4px; }

.btn-small { font-size: 12px; padding: 3px 9px; }

/* Modal */
.pl-modal-overlay {
    position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45);
    display: flex; align-items: flex-start; justify-content: center;
    z-index: 1000; padding: 40px 16px; overflow-y: auto;
}
.pl-modal {
    background: #fff; border-radius: 10px; width: 100%; max-width: 620px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column;
}
.pl-modal-sm { max-width: 460px; }
.pl-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.pl-modal-head h3 { margin: 0; font-size: 16px; }
.pl-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.pl-modal-body { padding: 16px 20px; }
.pl-modal-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.pl-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px; border-top: 1px solid #e5e7eb;
}
.pl-field { margin-bottom: 12px; }
.pl-field label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.pl-field input, .pl-field select, .pl-field textarea {
    width: 100%; padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px; box-sizing: border-box; font-family: inherit;
}
.pl-field-row { display: flex; gap: 12px; }
.pl-field-row .pl-field { flex: 1; }
.pl-req { color: var(--red, #dc2626); }
.pl-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 16px 0 8px; }
.pl-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; }
.pl-deal { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.pl-deal-paid { background: #fee2e2; color: #991b1b; }
.pl-deal-exchange { background: #dbeafe; color: #1e40af; }
.pl-opt { color: var(--text-muted); font-weight: 400; font-size: 11px; }

/* ============================================================
   Entitlement locks (gated brands)
   ============================================================ */

/* Sidebar: locked links stay visible, dimmed, with a lock glyph. */
.nav-locked { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-locked, .nav-sub a.nav-locked { color: #6f7686; }
.nav-locked:hover { color: #9ca3af; }
.nav-lock-icon { flex-shrink: 0; opacity: .75; }

/* Teaser KPIs on the locked dashboard. */
.lock-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: 8px 8px 0 0; overflow: hidden; margin-top: 20px;
}
.lock-kpi { background: var(--card-bg); padding: 18px 20px; }
.lock-kpi-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
}
.lock-kpi-val {
    font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px;
    font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 9px;
}
.lock-kpi-of { font-size: 18px; font-weight: 600; color: var(--text-muted); }
.lock-kpi-delta { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lock-kpi-delta.is-down { color: var(--red); }
.lock-kpi-delta.is-up { color: var(--green); }
.lock-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* The lock card sits over an empty placeholder table - no real data is sent.
   The two are STACKED IN ONE GRID CELL rather than absolutely positioned: the
   row then grows to whichever is taller, so a long lock message can never
   overflow the zone and cover the KPI tiles above it. */
.locked-zone {
    display: grid; background: var(--card-bg);
    border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.locked-placeholder, .lock-card { grid-area: 1 / 1; }
.locked-placeholder {
    filter: blur(5px); opacity: .45; pointer-events: none; user-select: none;
    padding: 6px 0 12px; overflow: hidden;
}
.locked-placeholder td { height: 30px; }
.lock-card {
    align-self: center; justify-self: center; margin: 28px 0;
    width: min(430px, 86%); background: var(--sidebar-bg); color: #fff;
    border-radius: 12px; padding: 26px 28px 24px; text-align: center;
    box-shadow: 0 18px 44px -12px rgba(26, 26, 46, .55);
}
.lock-badge {
    width: 38px; height: 38px; border-radius: 10px; margin: 0 auto 13px;
    background: rgba(255, 255, 255, .1);
    display: flex; align-items: center; justify-content: center;
}
.lock-badge-light { background: #eef0f4; }
.lock-card-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.lock-card-body { font-size: 13.5px; color: #b8bdc9; margin-top: 8px; line-height: 1.55; }

/* Shared CTA row (_lock_cta.html). */
.lock-cta { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.lock-btn {
    text-decoration: none; font-size: 13px; font-weight: 600;
    padding: 9px 20px; border-radius: 6px; display: inline-block;
}
.lock-btn-primary { background: var(--blue); color: #fff; }
.lock-btn-primary:hover { background: #2563eb; }
.lock-btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.lock-btn-ghost-dark { color: #d5d9e2; border-color: rgba(255, 255, 255, .22); }
.lock-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lock-foot { font-size: 11.5px; color: #9ca3af; margin-top: 14px; }
.lock-foot-dark { color: #767d8c; }

/* Full-stop lock page (locked.html). */
.full-lock {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 62px 24px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 8px; margin-top: 20px;
}
.full-lock-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.full-lock-body {
    font-size: 14px; color: var(--text-muted); max-width: 46ch;
    margin: 10px auto 0; line-height: 1.6;
}
.full-lock-back { font-size: 13px; color: var(--text-muted); margin-top: 20px; }

/* The lock explanation on the teaser dashboard (_lock_reason.html). Ranged left
   with a rule against it: it is the answer to "why did this change?", read
   before the numbers underneath, not a centred headline. */
.lock-reason {
    font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
    background: var(--card-bg); border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: 0 8px 8px 0;
    padding: 12px 15px; margin: 16px 0 0; max-width: 78ch;
}

/* Banners: admin lock preview + trial countdown. */
.lock-banner {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 18px;
}
.lock-banner svg { flex-shrink: 0; }
.lock-banner b { font-weight: 700; }
.lock-banner-admin { background: var(--sidebar-bg); color: #e5e7eb; }
.lock-banner-admin a { color: #93c5fd; }
.lock-banner-trial { background: var(--orange-bg); border: 1px solid #fcd34d; color: #78350f; }
.lock-banner-trial a { color: #78350f; font-weight: 700; }
/* Demo view. Quieter than the admin banner on purpose - it is on screen in
   front of a customer, so it should read as a thin status strip, not a warning. */
.lock-banner-demo { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.lock-banner-demo a { color: #3730a3; font-weight: 700; }

@media (max-width: 720px) {
    .lock-kpis { grid-template-columns: 1fr; }
}

/* Team & seats (Brand Settings) */
.team-section { max-width: 640px; }
.team-list { display: flex; flex-direction: column; gap: 6px; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.team-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.team-email { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.team-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; flex-shrink: 0; }
.team-owner { background: #e0e7ff; color: #3730a3; }
.team-active { background: #dcfce7; color: #15803d; }
.team-pending { background: #fef3c7; color: #92400e; }
.team-remove { background: none; border: 0; color: #dc2626; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.team-remove:hover { text-decoration: underline; }

/* Invite-your-team dashboard nudge */
.invite-nudge { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 18px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.invite-nudge svg { flex-shrink: 0; }
.invite-nudge a { color: #4f46e5; font-weight: 700; text-decoration: none; }
.invite-nudge .nudge-x { margin-left: auto; background: none; border: 0; color: #6366f1; font-size: 17px; cursor: pointer; line-height: 1; padding: 0 4px; }

/* In-app upgrade / plans page */
.upg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0 8px; max-width: 900px; }
.upg-card { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; }
.upg-popular { border-color: var(--blue); box-shadow: 0 8px 30px -12px rgba(59,130,246,.35); }
.upg-badge { position: absolute; top: -10px; left: 22px; background: var(--blue); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.upg-name { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.upg-price { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.upg-price span { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.upg-feats { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.upg-feats li { padding-left: 22px; position: relative; }
.upg-feats li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 700; }
/* The run budget, spelled out under its own bullet. It is the number that
   actually decides whether a plan fits, and it needs one line of arithmetic to
   land - "100 runs" means nothing until you see it as prompts x engines x
   markets. Muted and small so it explains the bullet above without competing
   with the prompt and engine counts people scan for. */
.upg-feats .upg-sub { display: block; margin-top: 2px; font-size: 11.5px;
                      line-height: 1.5; color: var(--text-muted); }
.upg-cta { margin-top: auto; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.upg-note { color: var(--text-muted); font-size: 13px; margin-top: 16px; max-width: 900px; }

/* Live-fill: a cell whose data is still being pulled */
.cell-loading { text-align: center; }
.cell-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: cellspin .7s linear infinite; vertical-align: middle; }
@keyframes cellspin { to { transform: rotate(360deg); } }

/* Coverage switched on, no data yet. The matrix is built from results, so a new
   market or engine is absent from it until the first run lands - which reads as
   a switch that did nothing. Deliberately quieter than a warning: nothing is
   wrong, something is on its way. */
.pending-cov { display: flex; gap: 11px; padding: 12px 16px; border-radius: 8px; font-size: 13.5px;
               margin: 0 0 14px; background: #f0f9ff; border: 1px solid #bae6fd; color: #075985; }
.pending-cov p { margin: 0 0 5px; line-height: 1.55; }
.pending-cov p:last-child { margin-bottom: 0; }
.pending-cov strong { font-weight: 700; }
.pending-cov .pc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
                       background: #0ea5e9; animation: pc-pulse 2s ease-in-out infinite; }
.pending-cov .pc-foot { font-size: 12.5px; }
.pending-cov a { color: #0369a1; font-weight: 700; text-decoration: underline; }
@keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pending-cov .pc-dot { animation: none; } }

/* Coverage switched on with nothing collected yet. The column exists from the
   moment the switch flips, so the grid answers "where will this show up"
   itself; the stripes say it is waiting, not empty. */
.matrix-table th.pending-head {
    background: repeating-linear-gradient(45deg, #fffbeb, #fffbeb 6px, #fef3c7 6px, #fef3c7 12px);
    color: #92400e;
}
.matrix-table th.pending-head .soon-tag {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #b45309;
    margin-top: 2px;
}
.matrix-table td.cell-pending {
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f3f4f6 6px, #f3f4f6 12px);
    cursor: default;
}

/* A PAUSED PROMPT STAYS ON THE DASHBOARD. Hiding it would look exactly like
   deletion, which we promise on three screens never happens. But it must not
   look like a live row either: its numbers stopped moving the day it was
   paused, and without a marker that reads as a bug in the product. */
.matrix-table tr.row-paused { background: var(--bg); }
.matrix-table tr.row-paused td { opacity: .55; }
.matrix-table tr.row-paused .col-prompt { opacity: 1; }
.matrix-table tr.row-paused .col-prompt a { color: var(--text-muted); }
.paused-tag { display: inline-block; margin-left: 8px; padding: 1px 7px;
              border-radius: 5px; background: #e5e7eb; color: #4b5563;
              font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
              text-transform: uppercase; vertical-align: middle; }

/* A PAUSED MARKET OR ENGINE, which is a COLUMN, not a row. Deliberately
   lighter than the paused row above: a market repeats under every engine, so
   fading the cells would fade a vertical stripe of real, collected numbers and
   read as broken rather than paused. Only the header says it, and the tag sits
   on its own line - the same trick .soon-tag uses - so tagging a market does
   not widen its column. */
/* NEITHER BACKGROUND MOVES. The engine header is dark navy with white text, the
   market header under it is light grey, so "dimmed" means two opposite things
   and one shared background rule cannot say both. An earlier version forced a
   light background on both; .engine-header's `color:#fff !important` outlived
   it and left the engine name white on near-white. Only the emphasis changes
   now, and the tag takes its colour from whichever header it sits in. */
.matrix-table th.paused-head.engine-header { opacity: .62; }
.matrix-table th.paused-head.engine-header .paused-col-tag { color: rgba(255,255,255,.78); }
.matrix-table th.paused-head.geo-header { color: var(--text-muted); }
.matrix-table th.paused-head.geo-header .paused-col-tag { color: #9ca3af; }
.paused-col-tag {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}

/* BACK FROM A SUCCESSFUL CHECKOUT. Paying used to drop someone on an ordinary
   dashboard: the paywall lifted and a plan pill appeared, but nothing said the
   payment had landed. Green because it is good news, and stated once - it is a
   receipt, not a sales page. */
.paid-banner { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 12px;
               padding: 16px 18px; margin: 0 0 22px; max-width: 720px; }
.paid-banner .pb-main strong { display: block; font-size: 15.5px; color: #111827; }
.paid-banner .pb-main span { font-size: 13px; color: #4b5563; }

/* COVERAGE BIGGER THAN THE PLAN THEY BOUGHT. Stays until it fits: not
   dismissible, every visit, everyone on the team. Amber, not red - nothing is
   broken and nothing has stopped, they are simply running more than they pay
   for, and a red alarm on a dashboard someone just paid for reads as a fault. */
.fit-bar { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
           border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px;
           padding: 15px 18px; margin: 0 0 22px; max-width: 900px; }
.fit-bar .fb-body { flex: 1; min-width: 260px; }
.fit-bar .fb-body > strong { display: block; font-size: 14.5px; color: #78350f; }
.fit-bar .fb-over { margin: 7px 0 0; padding-left: 20px; font-size: 13.5px;
                    line-height: 1.7; color: #92400e;
                    font-variant-numeric: tabular-nums; }
.fit-bar .fb-safe { margin: 9px 0 0; font-size: 12.5px; line-height: 1.6;
                    color: #a16207; }
.fit-bar .fb-go { background: #16a34a; border: 1px solid #16a34a; color: #fff;
                  font-weight: 700; font-size: 13.5px; padding: 9px 18px;
                  border-radius: 8px; white-space: nowrap; text-decoration: none; }
.fit-bar .fb-go:hover { background: #15803d; border-color: #15803d; }
/* Not everyone is asked to act. Pausing prompts is the owner's call, so a
   colleague gets the same facts and a name rather than a button. */
.fit-bar .fb-who { margin: 0; font-size: 13px; line-height: 1.6; color: #92400e;
                   max-width: 230px; }
.fit-bar .fb-who strong { color: #78350f; }

/* What is not in the grid, said above it. A column that vanishes silently reads
   as deleted data, and we promise on four screens that nothing is. */
.matrix-hidden { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.matrix-hidden a { font-weight: 600; }


/* ===== FILTER BAR: the page tier ==========================================
   One bar, above everything it governs, and now the ONLY place that filters.
   It was designed as two tiers - page-wide up here, table-only attached to the
   grid - but the rank filter was the single member of that second tier and has
   been retired, so the distinction has nothing left to express. Bring the tier
   styles back from git if a genuinely table-local control ever appears.

   Replaced: a Weekly/Monthly row, a row of one pill per period that reached 104
   buttons on a two-year brand, three dropdowns inside the chart's own header,
   and a prompt-category pill row that was a second control for the same state
   as one of those dropdowns. */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
}
.fb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fb-seg .gran-btn {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border: 0;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
}
.fb-seg .gran-btn.active { background: var(--blue); color: #fff; }
/* Label sits INSIDE the control's own box, so the bar reads as a row of
   labelled fields rather than a row of anonymous dropdowns. That was one of the
   three label idioms the app had; this is the only one now. */
.fb-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 8px 0 10px;
    background: var(--card-bg);
    min-width: 0;
}
.fb-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.fb-select {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 4px 6px 0;
    border: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
    max-width: 190px;
}
.fb-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fb-clear {
    margin-left: auto;
    font-family: inherit;
    font-size: 12.5px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.fb-clear:hover { color: var(--text); }
.fb-clear[hidden] { display: none !important; }

/* The state line: what is on, and what is left. */
.filter-state {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 3px 14px;
    font-size: 12.5px;
    color: var(--text-muted);
    min-height: 22px;
}
.fb-tags { display: inline-flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fb-none { color: var(--text-muted); }
.fb-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 3px 2px 10px;
    color: var(--text);
}
.fb-tag button {
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 5px;
    border-radius: 50%;
}
.fb-tag button:hover { color: var(--red); }
.fb-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.fb-count b { color: var(--text); }
/* A filter combination with nothing behind it. Without this, an engine and a
   market that never ran together drew a chart of zeroes that looked exactly
   like a real collapse in visibility. */
.fb-warn { color: var(--red); font-weight: 600; }


/* ---- window controls in the filter bar ---------------------------------- */
.fb-seg .gran-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}
/* ---- custom range: a calendar popover -----------------------------------
   Two date inputs and an Apply button used to sit in the bar. Three controls
   for one job, and the bar jumped wider the moment you chose Custom. */
/* The calendar positions against this, not against the <label>: a label
   forwards clicks to its control, so a calendar inside one would reopen the
   select on every day you clicked. */
.fb-anchor { position: relative; display: inline-flex; }
.cal-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: -10px;
    z-index: 40;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
    padding: 10px 12px 8px;
    cursor: default;
}
.cal-pop[hidden] { display: none !important; }
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cal-nav {
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
}
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-months { display: flex; gap: 18px; }
.cal-month { width: 182px; }
.cal-mlabel {
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
    color: var(--text);
}
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-dow span {
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
    color: var(--text-muted);
    padding-bottom: 3px;
}
.cal-day {
    font-family: inherit;
    font-size: 11.5px;
    height: 25px;
    border: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
}
.cal-day:hover:not([disabled]) { background: var(--bg); }
/* A day with nothing collected can only produce an empty chart. */
.cal-day[disabled] { opacity: .25; cursor: not-allowed; }
.cal-day.in-range { background: #eff6ff; border-radius: 0; }
.cal-day.is-from, .cal-day.is-to { background: var(--blue); color: #fff; font-weight: 700; }
.cal-day.is-from { border-radius: 5px 0 0 5px; }
.cal-day.is-to { border-radius: 0 5px 5px 0; }
.cal-pad { height: 25px; }
.cal-foot {
    display: flex;
    align-items: center;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--border);
}
.cal-hint { flex: 1 1 auto; font-size: 11px; color: var(--text-muted); }
.cal-cancel {
    font-family: inherit;
    font-size: 12px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.cal-cancel:hover { color: var(--text); }
@media (max-width: 620px) {
    .cal-months { flex-direction: column; gap: 10px; }
}

/* ---- drill-down trail ---------------------------------------------------
   Clicking a bucket on the chart narrows the window to it and steps the bucket
   size one finer. Without a visible way back, that would be a one-way door:
   the window would look like a custom range someone had chosen on purpose. */
.drill-trail {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 3px 9px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.drill-trail[hidden] { display: none !important; }
.dt-up {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
}
.dt-up:hover { border-color: var(--text-muted); }
.dt-crumb { color: var(--text-muted); }
.dt-here { color: var(--text); font-weight: 600; }
.dt-sep { color: var(--border); }
.dt-gran {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
}

/* ===== multi-select page filter ==========================================
   One control, used three times (market, engine, prompts). Replaced three
   hand-written single-selects. A panel rather than a bare checkbox list
   because "Active only" and "Paused only" are not conveniences: they keep the
   chart's periods counting the same set, so they stay one click away. */
.fb-multi { position: relative; }
.fb-mbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.fb-mbtn:hover { border-color: var(--text-muted); }
.fb-mbtn[aria-expanded="true"] { border-color: var(--blue); }
.fb-mbtn.set { border-color: var(--blue); color: var(--blue); }
.fb-mbtn.set .fb-key { color: var(--blue); }
.fb-mval { font-weight: 600; }
.fb-mcaret { font-size: 9px; opacity: .5; }

.fb-mpop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 35;
    min-width: 216px;
    max-width: 300px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    padding: 6px;
}
.fb-mpop[hidden] { display: none !important; }
.fb-mopt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.fb-mopt:hover { background: var(--bg); }
.fb-mmode { font-weight: 600; }
.fb-mmode.on { color: var(--blue); }
.fb-mmode.on::after { content: '✓'; margin-left: auto; font-size: 11px; }
.fb-msep { height: 1px; background: var(--border); margin: 5px 2px; }
.fb-mlist { max-height: 232px; overflow-y: auto; }
.fb-mbox {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: normal;
    color: transparent;
}
.fb-mcheck.on .fb-mbox { background: var(--blue); border-color: var(--blue); color: #fff; }
.fb-mname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A paused option is still selectable: the history behind it is real. */
.fb-mtag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 5px;
    flex: 0 0 auto;
}
/* The bucket size, stated beside the chart title because it describes the
   chart. Not a control: the window decides it. */
.tc-gran {
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .01em;
}

/* ---- Period panel: the window list ---------------------------------------
   Period is a button and a panel like the other three, not a <select>. A
   select could not do this job: once a custom range is chosen its option is
   the selected one, so picking it again fires no change event and the calendar
   could never be reopened. */
.fb-range .fb-mpop { min-width: 210px; }
.fb-ropt { font-weight: 500; }
.fb-ropt.on { color: var(--blue); font-weight: 600; }
.fb-ropt.on::after { content: '✓'; margin-left: auto; font-size: 11px; }
/* Custom carries the dates it is set to, so the row both states the selection
   and is the way to change it. */
.fb-rcustom { justify-content: flex-start; }
.fb-rcustom.on::after { content: none; }
.fb-rcur {
    margin-left: auto;
    padding-left: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.fb-rcustom.on .fb-rcur { color: var(--blue); font-weight: 600; }
/* The calendar shares the panel, so it needs no shadow or border of its own. */
.fb-range .cal-pop { position: static; box-shadow: none; border: 0; padding: 0; }

/* ---- the grid heading's scope label --------------------------------------
   The window used to be folded into the sentence, which ran long at every
   range. The question ends; this states the scope. */
.mq-scope {
    display: inline-block;
    margin-left: 9px;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    vertical-align: 1px;
    white-space: nowrap;
}

/* The panel title is "<Brand> vs competitors". The brand carries the weight;
   "vs competitors" is the quieter half, and it wraps rather than truncating,
   because a clipped brand name in the title of a panel about that brand is
   the one thing this must not do. */
.ts-head { line-height: 1.25; }
.ts-vs { font-weight: 500; color: var(--text-muted); }

/* ---- Gap analysis (/zeo/gaps/<brand>) ------------------------------------
   The four core rows: brand against one rival, as shares of the same answers. */
/* The pair is context; the page's subject is the heading. */
.gp-h-vs { font-weight: 500; color: var(--text-muted); }

.gp-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    max-width: 760px;
    line-height: 1.6;
}

.gp-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.gp-pick { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.gp-pick select {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
}
.gp-back { font-size: 12px; margin-left: auto; }

/* The four core rows: brand against rival, each a share of the same answers.
   Two colours only, validated as a pair (CVD dE 24.7): brand is the dashboard's
   slot-1 blue, the rival the slot-2 orange. Names always sit beside the bars,
   so identity never rests on colour. Values and names wear text ink. */
.gp-score {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    margin-bottom: 18px;
}
.gp-score-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.gp-key { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.gp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.gp-sw-brand, .gp-fill-brand { background: #2a78d6; }
.gp-sw-rival, .gp-fill-rival { background: #eb6834; }
.gp-score-base { margin-left: auto; color: var(--text-muted); }

/* THE SCORECARD, as sections. Visibility is fixed open - it is the one number
   nobody should have to click for - and the three channels below collapse, so
   the page at rest is four lines instead of a wall. Mayank, 2026-09-18. */
.gp-sec { border-bottom: 1px solid var(--border); }
.gp-sec:last-child { border-bottom: 0; }
.gp-sec-h {
    display: grid;
    grid-template-columns: 22px 210px minmax(0, 1fr) 210px;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.gp-sec-h:hover { background: #fafbfc; }
.gp-sec.is-open > .gp-sec-h { background: #fafbfc; }
/* The headline row opens nothing, so it must not look like it could. */
.gp-sec-h.is-fixed { cursor: default; padding: 16px; }
.gp-sec.is-lead, .gp-sec.is-lead .gp-sec-h.is-fixed:hover { background: #f7f9fc; }
/* The caret is the one further down this file, on .gp-type-row: a border
   triangle that was already here, already drawn rather than typed. Reused
   rather than redefined - a second .gp-caret block lower down would win
   anyway, and two rules for one class is how they drift. */
.gp-sec.is-open > .gp-sec-h .gp-caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .gp-caret { transition: none; } }
.gp-sec-l { font-size: 13.5px; font-weight: 600; }
.gp-sec-sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.gp-sec-mid { font-size: 13px; color: var(--text-muted); min-width: 0; }
.gp-sec-v { font-size: 13px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.gp-sec-v b, .gp-sec-mid b { color: var(--text); }
.gp-sec.is-off .gp-sec-l { color: var(--text-muted); }
.gp-sec-b { padding: 2px 16px 18px 52px; }
.gp-sec-act { padding-top: 14px; }
.gp-sec-note { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); max-width: 640px; }

.gp-bars { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gp-bl {
    display: grid;
    /* 280px, not 1fr. Full-width bars in two colours, repeated down the page,
       read as decoration rather than data. */
    grid-template-columns: 104px 280px 52px;
    gap: 10px;
    align-items: center;
    font-size: 12px;
}
.gp-bl-name { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-track {
    position: relative;
    display: block;
    height: 10px;
    background: #f1f2f4;
    border-radius: 0 4px 4px 0;
}
/* Square at the baseline, 4px round at the data end. */
.gp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.gp-track-na { height: auto; background: none; color: var(--text-muted); font-style: italic; }
.gp-bl-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-soon {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
    padding: 2px 8px; border-radius: 10px; background: var(--bg);
    border: 1px solid var(--border); color: var(--text-muted);
}
.gp-group-h {
    padding: 9px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fafbfc;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The collapsed Owned row: the numbers, and a SMALL bar beside them. 150px is
   enough to read 72 against 145 at a glance and not enough to become another
   long line across the screen. */
.gp-sec-nums { display: flex; align-items: center; gap: 14px; }
.gp-nums { white-space: nowrap; }
.gp-nums b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.gp-mini { display: inline-flex; flex-direction: column; gap: 4px; width: 150px; flex: none; }
.gp-mini-t { position: relative; height: 7px; background: #f1f2f4; border-radius: 0 3px 3px 0; }
.gp-mini-f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; }

/* The expansion: facts and the sentence each one earns. No charts - pages
   cited is already the bar in the row above. */
/* The label column is 210px and the gap 14px so that, inside gp-sec-b's 52px
   indent, the VALUES begin at exactly the x where "72 pages vs 145" begins in
   the row above: 16 + 22 + 14 + 210 + 14. One column down the section instead
   of two ragged ones. */
.gp-facts {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: baseline;
    margin: 10px 0 2px;
}
.gp-facts dt {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
}
.gp-facts-sub {
    display: block; font-size: 10.5px; font-weight: 400;
    letter-spacing: 0; text-transform: none; margin-top: 2px;
}
.gp-facts dd { margin: 0; font-size: 13px; color: var(--text-muted); }
.gp-facts dd b { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.gp-facts-pc { font-size: 12px; }
.gp-facts-vs { color: #cbd2da; padding: 0 3px; }
.gp-facts-na { font-style: italic; }
.gp-facts-say { display: block; font-size: 12px; padding-top: 3px; }

/* The way into the owned comparison, inside the Owned section. ALWAYS THERE -
   it was a hover reveal for an hour, which hid the one route into the page the
   scorecard exists to sell.

   The same pill as `.gp-act-b` ("Analyze gaps") on the owned page, one shade
   more pronounced: a tinted ground rather than white, and a firmer border.

   `text-decoration: none` on hover and focus is load-bearing - the global
   `a:hover { text-decoration: underline }` near the top of this file otherwise
   draws a line straight through it.

   THIS BLOCK HAS BEEN DELETED TWICE by careless range edits to the CSS around
   it, and both times the button quietly became a plain blue link that still
   worked, so nothing failed and no test noticed. If it goes missing again,
   that is why. */
.gp-open {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 11px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    /* NOT nowrap. A rival with a long name would run past the card edge; this
       lets it wrap instead, and .gp-nowrap keeps the name itself whole. */
    white-space: normal;
    text-decoration: none;
    color: var(--blue);
    background: #eaf2fd;
    border: 1px solid #9cc3f0;
    border-radius: 99px;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
/* Keeps a rival's name from breaking across the two lines of a wrap. */
.gp-nowrap { white-space: nowrap; }
.gp-open:hover, .gp-open:focus { text-decoration: none; }
.gp-open:hover { background: #d9e8fb; border-color: var(--blue); }
.gp-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gp-open { transition: none; } }

/* A stale block says so BEFORE its numbers. Amber, not red: the analysis is
   sound, it is the data underneath that moved on. */
.gx-stale {
    margin: 0 0 -1px; padding: 9px 16px;
    border: 1px solid #f5e0b8;
    background: #fef6e7; color: #92400e;
    font-size: 12.5px; line-height: 1.45;
    border-radius: 8px 8px 0 0;
}
/* The card tucks under it, so the two read as one thing rather than a notice
   floating above an unrelated block. */
/* .gx is a grid with gap: 14px, which would leave the notice floating above
   an unrelated card. Pulled back by exactly that gap plus the shared border. */
.gx-block.is-stale { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -15px; }
.gx-stale b { color: #7c3407; }
/* OLDER RUNS. Quieter than the live results by design: this section is
   history, not a list of things to do. */
.gx-older { border: 1px solid var(--border); border-radius: 10px;
            background: var(--card-bg); padding: 14px 18px 12px; }
.gx-older > h4 { margin: 0 0 8px; font-size: 14px; }
.gx-older > h4 span { font-weight: 400; font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.gx-older > ol { list-style: none; margin: 0; padding: 0; }
.gx-older > ol > li { border-top: 1px solid var(--border); }
.gx-older > ol > li:first-child { border-top: 0; }
.gx-old > summary {
    display: grid; grid-template-columns: 150px auto minmax(0, 1fr) auto;
    gap: 14px; align-items: baseline;
    padding: 9px 0; cursor: pointer; list-style: none; font-size: 12.5px;
}
.gx-old > summary::-webkit-details-marker { display: none; }
.gx-old > summary:hover { color: var(--text); }
.gx-old-l { font-weight: 600; font-size: 13px; }
.gx-old-n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gx-old-n b { color: var(--text); }
.gx-old-w { color: var(--text-muted); }
.gx-old-b { padding: 2px 0 12px; }
.gx-old-none { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.gx-stale .gx-link { color: #92400e; text-decoration: underline; }

/* The owned page's core numbers, one line - but ON something. Bare on the page
   ground, between the filter bar and the cards, it read as hanging in the air:
   every other block on this page sits in a bordered card. Same card, one line
   tall (40px against the 121px the three-column version took). */
.gp-core {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px;
    margin: 0 0 14px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    font-size: 12.5px; color: var(--text-muted);
}
.gp-core-i b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.gp-core-i i { font-style: italic; }
.gp-core-vs { color: #cbd2da; }
.gp-core-b { margin-left: auto; }
.gp-core-b b { color: var(--text); font-variant-numeric: tabular-nums; }

/* `hidden` is display:none from the UA sheet, which a class setting display
   outranks. Kept for the collapsible section bodies. */
.gp-sec-b[hidden] { display: none !important; }

@media (max-width: 900px) {
    .gp-sec-h { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; }
    .gp-sec-mid, .gp-sec-v { grid-column: 2; text-align: left; }
    .gp-sec-b { padding-left: 16px; }
}

/* The owned page's opening summary: three numbers, rival over brand in each.
   Three because they DISAGREE - fewer pages and fewer citations can still
   reach more answers, and no single number says that.

   NUMBERS, NOT BARS. It was six bars, and the page then carried three separate
   bar regions stacked: this, the twenty-four in the type columns, and the gap
   pills beside them. Length-encoding earns its place in the columns, where
   twelve types are compared; for three figures the figures are enough, and the
   card went from ~400px to ~120px without losing a single number. */
.gp-sum {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    margin-bottom: 18px;
}
.gp-sum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gp-sum-cell { padding: 12px 16px; border-left: 1px solid var(--border); }
.gp-sum-cell:first-child { border-left: 0; }
.gp-sum-l {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 7px;
}
.gp-sum-line {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: baseline;
    padding: 2px 0;
    font-size: 12px;
}
.gp-sum-line .gp-sw { align-self: center; }
.gp-sum-who { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-sum-n { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gp-sum-na { font-size: 12px; font-weight: 400; color: var(--text-muted); font-style: italic; }
.gp-sum-pc { min-width: 34px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* The denominator for the answers cell and nothing else, so it sits under the
   numbers rather than over the whole page. */
.gp-sum-base {
    margin: 0;
    padding: 8px 16px 10px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}
@media (max-width: 760px) {
    .gp-sum-grid { grid-template-columns: minmax(0, 1fr); }
    .gp-sum-cell { border-left: 0; border-top: 1px solid var(--border); }
    .gp-sum-cell:first-child { border-top: 0; }
}

/* /zeo/gaps/<brand>/owned: competitor left, us right, each split by page
   type. Bars share one scale across both columns. */
/* Two cards and, to their right, a column of actions. Its own column so that
   one hover means one thing: over a row it opens that row's URLs, over here it
   is about gaps. */
.gp-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 218px;
    gap: 14px;
    align-items: start;
}
.gp-acts ul { list-style: none; margin: 0; padding: 0; }
.gp-act {
    display: flex; align-items: center; gap: 10px;
    padding: 0 0 0 8px; border-left: 2px solid transparent;
}
.gp-act.is-hot { border-left-color: #dde1e7; }
.gp-act-b {
    display: none;
    font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
    color: var(--blue); background: var(--card-bg);
    border: 1px solid #bcd6f5; border-radius: 99px;
    padding: 4px 9px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
/* An analysed type carries its count as the control itself, always there; a
   type with nothing to report yet offers its button on hover. */
.gp-act-b.is-found { display: inline-block; color: #b91c1c; background: #fdecec; border-color: #f8d7d7; }
/* Short at rest, the whole sentence on hover. */
.gp-act-full { display: none; }
.gp-act:hover .gp-act-short, .gp-act.is-hot .gp-act-short, .gp-act-b:focus-visible .gp-act-short { display: none; }
.gp-act:hover .gp-act-full, .gp-act.is-hot .gp-act-full, .gp-act-b:focus-visible .gp-act-full { display: inline; }
.gp-act-b.is-found:hover { background: #fbdada; border-color: #f0b8b8; }
.gp-act-b.is-found.is-none { color: #15803d; background: #e7f5ed; border-color: #cfe9da; }
.gp-act:hover .gp-act-b, .gp-act.is-hot .gp-act-b, .gp-act-b:focus-visible, .gp-act-b:disabled { display: inline-block; }
.gp-act-b:hover { background: #eef4fd; border-color: var(--blue); text-decoration: none; }
.gp-act-b:disabled { color: var(--text-muted); border-color: var(--border); cursor: progress; }
@media (hover: none) { .gp-act-b { display: inline-block; } }
.gp-col {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    min-width: 0;
}
.gp-col-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.gp-col-domain { font-size: 11.5px; color: var(--text-muted); }
.gp-base { font-size: 12.5px; color: var(--text-muted); }
.gp-base b { color: var(--text); font-variant-numeric: tabular-nums; }
.gp-col-n { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.gp-col-n b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
/* Its own line under the name, so the column header never has to squeeze it. */
.gp-col-cites { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.gp-col-cites b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-col-none { margin: 0; padding: 12px 16px; font-size: 12.5px; color: var(--text-muted); }
.gp-types { list-style: none; margin: 0; padding: 8px 16px 12px; }
.gp-type { padding: 0; }
.gp-type-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 40px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 0;
    font: inherit;
    font-size: 12.5px;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
}
button.gp-type-row { cursor: pointer; border-radius: 4px; }
/* Lit on both columns at once (is-hot is set on the pair by the page script).
   The row reaches 6px past the list's padding so the highlight has room. */
.gp-type-row { margin: 0 -6px; width: calc(100% + 12px); padding-left: 6px; padding-right: 6px; }
.gp-type.is-hot > .gp-type-row { background: #eef2f7; }
.gp-type.is-hot > .gp-type-row .gp-type-l { color: var(--blue); }
button.gp-type-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.gp-caret {
    display: inline-block;
    width: 0; height: 0;
    margin-right: 6px;
    vertical-align: 1px;
    border-left: 4px solid currentColor;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform .12s;
}
button.gp-type-row[aria-expanded="true"] .gp-caret { transform: rotate(90deg); }
.gp-urls {
    list-style: none;
    margin: 2px 0 8px;
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--border);
    font-size: 12px;
}
.gp-urls li { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; min-width: 0; }
/* Wrapped, not ellipsised: the point of the list is the exact URL, and the
   part a narrow column would cut off is the slug that says what the page is. */
.gp-urls a { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.gp-urls li.gp-urls-none { color: var(--text-muted); font-style: italic; }
/* The opened type's total, above its URLs. */
.gp-urls li.gp-urls-sum { display: block; color: var(--text-muted); padding-bottom: 5px; }
.gp-urls li.gp-urls-sum b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* ---- AEO content gaps (/zeo/gaps/<brand>/owned) ----------------------------
   Blocks, not a table: the columns above already compare counts, and the gaps
   are a to-do list of topics. One block per page type, ranked by citations at
   stake; red is reserved for the gap, green for covered. */

.gx { margin-top: 22px; display: grid; gap: 14px; }
.gx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.gx-head h3 { margin: 0; font-size: 17px; }
.gx-vs { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.gx-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.gx-cta { display: grid; justify-items: end; gap: 5px; }
.gx-next { font-size: 11.5px; color: var(--text-muted); }
.gx-split { position: relative; display: inline-flex; }
.gx-split > button {
    font: inherit; font-size: 13px; font-weight: 600; color: #fff;
    background: var(--blue); border: 0; cursor: pointer;
}
.gx-split > button:hover:not(:disabled) { filter: brightness(.95); }
.gx-split > button:disabled { opacity: .6; cursor: default; }
.gx-main { padding: 10px 16px; border-radius: 7px 0 0 7px; }
.gx-caret { padding: 10px 11px; border-radius: 0 7px 7px 0; border-left: 1px solid rgba(255,255,255,.4) !important; }
.gx button:focus-visible, .gx summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gx-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    width: 330px; max-width: 86vw; max-height: 60vh; overflow-y: auto; padding: 6px; text-align: left;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
.gx-menu-hd { padding: 5px 9px 4px; font-size: 11px; color: var(--text-muted); }
.gx-mi {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px;
    width: 100%; padding: 7px 9px; border: 0; border-radius: 6px;
    font: inherit; color: var(--text); background: none; text-align: left; cursor: pointer;
}
.gx-mi:hover { background: #eef4fd; }
.gx-mi-l { grid-column: 1; font-weight: 600; font-size: 12.5px; }
.gx-mi-s { grid-column: 1; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gx-mi-c { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.gx-chip { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px; color: var(--text-muted); background: #f1f2f4; white-space: nowrap; }
.gx-chip-saved { color: #15803d; background: #e7f5ed; }
.gx-err { margin: 0; padding: 8px 12px; font-size: 12.5px; color: #b91c1c; background: #fdecec; border-radius: 6px; }

.gx-block { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; scroll-margin-top: 16px; }
.gx-block:target, .gx-small:target { box-shadow: 0 0 0 3px #fbdada; }
.gx-block-h { display: grid; gap: 10px 20px; padding: 14px 18px 14px; cursor: pointer; list-style: none; border-radius: 10px; }
.gx-block-h::-webkit-details-marker { display: none; }
/* The block header is a summary, but not a small one: full width, text ink. */
.gx .gx-block-h { width: auto; color: var(--text); }
.gx .gx-block-h:hover { color: var(--text); }
.gx-block[open] > .gx-block-h { border-bottom: 1px solid #f0f1f3; border-radius: 10px 10px 0 0; }
.gx-block-h:hover { background: #fafbfc; }
.gx-fold {
    display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: 2px;
    border-left: 5px solid var(--text-muted); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
    transition: transform .12s;
}
.gx-block[open] .gx-fold { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .gx-fold { transition: none; } }

/* Four figures, read in one line: what is missing, what is thin, what share of
   the rival's pull that is, and the size of the type. */
.gx-stats { display: flex; flex-wrap: wrap; gap: 10px 34px; padding-left: 21px; }
.gx-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
.gx-stat b { grid-row: 1 / span 2; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.gx-stat span { font-size: 12.5px; }
.gx-stat em { grid-column: 2; font-size: 11px; font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gx-stat.is-gap b, .gx-stat.is-gap span { color: #b91c1c; }
.gx-stat.is-part b, .gx-stat.is-part span { color: #b45309; }
.gx-stat.is-quiet b { color: var(--text-muted); font-weight: 600; }
.gx-stat.is-quiet span { color: var(--text-muted); }

.gx-gaps { list-style: none; margin: 0; padding: 0 18px; }
.gx-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid #f0f1f3; }
.gx-gap:last-child { border-bottom: 0; }
.gx-gap-t { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 13.5px; }
.gx-gap-c { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-weight: 700; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-gap-c small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); }
/* Two headings inside a block, not two sentences. Sized as labels so the
   topic names under them stay the loudest thing in the list. */
.gx-list-l {
    /* 18px in, the same inset .gx-gaps and the block header use. With no
       horizontal padding it sat 18px LEFT of the topics it introduces and of
       the block heading above it, so it read as hanging off the card. */
    margin: 20px 0 10px;
    padding: 0 18px;
    /* A HEADING, not a label. At 11px uppercase it was smaller than the topic
       names under it, which is the wrong way round: it introduces them. Set in
       sentence case because uppercase at this size shouts. */
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
}
.gx-list-l:first-of-type { margin-top: 14px; }
.gx-list-partial { margin-top: 26px; padding: 16px 18px 0; border-top: 1px solid var(--border); color: #b45309; }
.gx-gap-partial .gx-gap-c { color: #b45309; }
.gx-gap-why b { color: var(--text); font-weight: 600; }
.gx-gap-ours { grid-column: 1; font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
/* NO explicit grid-row. Pinning this to row 2 made it render above
   .gx-gap-ours whatever the markup said, so re-ordering the lines in the
   template silently did nothing. Column-1 items now flow in source
   order, which is the order the row is meant to be read in. */
.gx-gap-why { grid-column: 1; font-size: 12px; color: var(--text-muted); max-width: 80ch; line-height: 1.45; }
.gx-their { grid-column: 1 / -1; font-size: 11.5px; }
/* The topic description, one click away. Same weight as the other
   disclosures on the row so nothing competes with the topic itself. */
.gx-why { grid-column: 1 / -1; font-size: 11.5px; }
.gx-why p { margin: 4px 0 2px; padding: 4px 0 2px 12px; border-left: 2px solid var(--border);
            font-size: 12px; color: var(--text-muted); line-height: 1.45; max-width: 80ch; }
.gx-why p b { color: var(--text); font-weight: 600; }
.gx summary { cursor: pointer; color: var(--text-muted); width: fit-content; }
.gx summary:hover { color: var(--text); }
.gx-their ul { list-style: none; margin: 4px 0 0; padding: 4px 0 2px 12px; border-left: 2px solid #fdeee6; display: grid; gap: 2px; }
.gx-their li { display: flex; gap: 10px; align-items: baseline; }
.gx-their a { min-width: 0; overflow-wrap: anywhere; }
.gx-their li span { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.gx-gap-have {
    grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: #0f766e;
    padding: 6px 9px; margin-top: 2px; border-radius: 6px; background: #f0fdfa;
    overflow-wrap: anywhere;
}
.gx-gap-have b { font-weight: 600; }
.gx-gap-have a { color: inherit; }

/* Pages of OURS on a partly-covered topic that have never been cited. Green
   where "their pages" is warm: this is material we already own, not a hole. */
.gx-mine { grid-column: 1 / -1; font-size: 11.5px; }
.gx-mine > summary { color: #0f766e; }
.gx-mine > summary b { font-variant-numeric: tabular-nums; }
.gx-mine ul { list-style: none; margin: 4px 0 0; padding: 4px 0 2px 12px;
              border-left: 2px solid #ccfbf1; display: grid; gap: 2px; }
.gx-mine a { overflow-wrap: anywhere; }
.gx-mine-more { color: var(--text-muted); }

.gx-more { border-top: 1px solid #f0f1f3; }
.gx-more > summary { padding: 9px 18px; color: var(--blue); font-size: 12px; font-weight: 500; }
.gx-more > summary::-webkit-details-marker { display: none; }
.gx-more > summary { list-style: none; }
.gx-more .gx-hide, .gx-more[open] .gx-show { display: none; }
.gx-more[open] .gx-hide { display: inline; }
.gx-more[open] > summary { order: 2; }
.gx-more[open] { display: flex; flex-direction: column; }
.gx-block-f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding: 10px 18px 12px; border-top: 1px solid #f0f1f3; font-size: 12px; color: var(--text-muted); }
.gx-covered { flex: 1 1 auto; }
.gx-covered ul { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 6px; }
.gx-covered li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
.gx-cov-t { color: var(--text); }
.gx-cov-t::before { content: "\2713"; margin-right: 6px; color: #15803d; font-weight: 700; }
.gx-cov-n { font-variant-numeric: tabular-nums; }
.gx-cov-u { grid-column: 1 / -1; padding-left: 18px; font-size: 11px; overflow-wrap: anywhere; }
.gx-unchecked { font-style: italic; }
.gx-meta { margin-left: auto; font-size: 11px; white-space: nowrap; }
.gx-link { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.gx-link:disabled { color: var(--text-muted); text-decoration: none; cursor: progress; }

.gx-small { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; scroll-margin-top: 16px; }
.gx-small h4 { margin: 0 0 6px; font-size: 13px; }
.gx-small h4 span { font-weight: 400; font-size: 11.5px; color: var(--text-muted); margin-left: 6px; }
/* The rows here are .gx-gap rows now, identical to a block's, and they carry
   their own two-column grid. The old three-column li rule was still matching
   them and squeezing a whole row into its 120px first column. */
.gx-small .gx-gaps { margin: 0; padding: 0; list-style: none; }
.gx-small .gx-gap:last-child { border-bottom: 0; }
.gx-gap-tag {
    display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 10.5px; font-weight: 500; color: var(--text-muted); vertical-align: 1px;
}
.gx-gap-ok .gx-gap-t { font-weight: 400; color: #15803d; }
/* The row's three columns now live on the summary, so the details itself has
   to span the li's grid instead of being squeezed into its first 120px. */


.is-running .gx-next::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px;
    border-radius: 50%; background: var(--blue); animation: gx-pulse 1.1s ease-in-out infinite;
}
@keyframes gx-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .is-running .gx-next::before { animation: none; } }
@media (max-width: 760px) {
    .gx-cta { justify-items: start; }
    .gx-block-h { grid-template-columns: minmax(0, 1fr); }
    .gx-meter { grid-column: 1; grid-row: auto; justify-items: start; }
}
.gp-urls-n { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-type-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-type-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-type-na .gp-type-l, .gp-type-na .gp-type-n { color: var(--text-muted); font-style: italic; font-weight: 400; }
.gp-type-zero .gp-type-l, .gp-type-zero .gp-type-n { color: var(--text-muted); font-weight: 400; }
@media (max-width: 760px) {
    .gp-cols { grid-template-columns: minmax(0, 1fr); }
    .gp-acts ul { margin-top: 0 !important; }
    .gp-act { height: auto !important; flex-direction: row; align-items: baseline; gap: 10px; padding: 3px 0; border-left: 0; }
    .gp-open { margin-left: 0; }
}
@media (max-width: 760px) {
    .gp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .gp-row-gap { text-align: left; }
    .gp-score-base { margin-left: 0; }
    /* One column, so the sentence has to be allowed to wrap. */
    .gp-open { white-space: normal; line-height: 1.35; }
}

/* Out of "who is ahead" and into "why". The panel ranks everyone and stops
   there; the gap page takes one rival and says what the engines were reading. */
.ts-gaps {
    display: block;
    margin-top: 10px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--blue);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.ts-gaps:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.ts-gaps:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* How much a point is built on, relative to the best-collected period in view.
   A chip rather than more prose: it sits at the end of the line that already
   gives the count, so the two read as one fact. */
.tt-conf {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: 1px;
}
/* On the dark tooltip, so these are light-on-dark and carry their own word -
   the three levels are never colour alone. */
.tt-conf-high { background: rgba(27,175,122,.22); color: #6ee7b7; }
.tt-conf-med  { background: rgba(237,161,0,.22);  color: #fcd34d; }
.tt-conf-low  { background: rgba(255,255,255,.14); color: #d1d5db; }

/* ---- The open row, grouped by market -------------------------------------
   It was a flat band of engine x market tiles: sixteen in a line on a
   four-market brand, with no comparison a reader can actually make. The market
   comes first now, with its own figure, and its engines sit under it - so the
   market numbers read down the left and the engines across for whichever one
   is worst.

   A column per market was the other attempt and was worse: four small numbers
   on every row of the table, none of them the answer. */
.mx-grp + .mx-grp { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.mx-grp-h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.mx-grp-geo {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--sidebar-bg);
    color: #fff;
}
.mx-grp-name { font-size: 12px; font-weight: 600; }
/* The market's own figure, shaded the same way the row above it is, because it
   is the same measurement narrowed to one market. */
.mx-grp-pct {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    border-radius: 4px;
}
.mx-grp-none { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.mx-grp-n { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mx-grp-all { font-size: 11px; font-weight: 600; margin-left: auto; white-space: nowrap; }
/* A window wider than the data collected. Four buttons that all show the same
   chart is a control that looks broken, so the ones that cannot be filled say
   how much there actually is. Not disabled: picking one is harmless, and
   greying it out would suggest the data is missing rather than young. */
.fb-rcapped { color: var(--text-muted); }
.fb-rcapped .fb-rcur { font-weight: 500; }
/* .fb-mclear was here. Removed with the button: it duplicated "All" three
   words above it, in all three panels, so the page carried four Clears. The
   bar's own is the one that stays. */

/* --- Add Prompts: the run budget, with its working shown ------------------
   Replaced a 40-word sentence carrying four numbers. The big figure is RUNS
   LEFT because it is what decides everything under it, and the multiplication
   row is the explanation - "Gemini, ChatGPT x UK, US" makes the per-prompt
   cost checkable instead of asking the reader to trust it.

   Measured before sizing this: at most 5 engines and 4 countries across every
   workspace, longest list 57 characters. It wraps rather than truncates, so a
   bigger account stays readable rather than losing a name. */
.sp-budget {
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-width: 640px;
}
.sp-budget-head { display: flex; align-items: center; gap: 12px; }
/* tabular-nums so the figure does not jitter as runs are used up */
.sp-budget-n {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.sp-budget-of { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.sp-budget-of b { color: #111827; font-weight: 700; }
.sp-budget-calc {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}
.sp-budget-calc b { color: #111827; font-weight: 700; }
/* The names sit on their own line under the count they explain. */
.sp-calc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 5px;
    font-size: 12.5px;
    color: #374151;
}
.sp-calc-x { color: var(--text-muted); font-size: 13px; }
/* .sp-calc-part carries no rules of its own - it is a flex child of .sp-calc
   and a stable hook for reading the two lists back out. Deliberately NOT
   nowrap: five engines is 57 characters and forcing one line would overflow a
   narrow screen rather than wrap. */

@media (max-width: 520px) {
    .sp-budget-n { font-size: 27px; }
    .sp-budget-head { gap: 10px; }
}

/* --- The action row under the prompt grid --------------------------------
   Was a lone "+ Add a Prompt" button with no sense of what the plan allows
   and no route to countries or engines. One primary button, then one muted
   line: the capacity (only where a cap exists) and a link to Coverage.

   A link rather than a second button, deliberately. Adding prompts is
   frequent; changing countries and engines is done once at setup. Equal
   buttons would claim they are equally common. */
.mx-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 20px 0;
}
.mx-actions-btn { font-size: 14px; padding: 10px 20px; }
/* TWO LINES BESIDE THE BUTTON, not one run-on row. The capacity and the link
   sat inline separated by a middot nobody saw, so the grey sentence ran into
   the blue link and the link read as prose. Stacked, they are visibly two
   different kinds of thing: a fact, and a destination. */
.mx-actions-note {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}
.mx-actions-room b { color: #b45309; font-weight: 700; }
.mx-actions-link { font-weight: 600; text-decoration: none; }
.mx-actions-link:hover { text-decoration: underline; }

/* ---- Site inventory (/zeo/site-inventory/<brand>) --------------------------
   Four sources, one list. The figures that matter are the disagreements
   between them, so those two carry the warning colour and the rest are plain. */
.si-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.si-domain { font-size: 12.5px; color: var(--text-muted); }
.si-domain b { color: var(--text); }
.si-run {
    font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--blue);
    border: 0; border-radius: 7px; padding: 9px 15px; cursor: pointer;
}
.si-run:hover:not(:disabled) { filter: brightness(.95); }
.si-run:disabled { opacity: .6; cursor: progress; }
.si-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); }
.si-note::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px;
    border-radius: 50%; background: var(--blue); animation: gx-pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .si-note::before { animation: none; } }

.si-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.si-stat {
    flex: 1 1 170px; min-width: 0; padding: 11px 14px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
}
.si-stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.si-stat span { display: block; font-size: 12px; font-weight: 600; margin-top: 1px; }
.si-stat em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.si-stat.is-warn b, .si-stat.is-warn span { color: #b45309; }
.si-caveat {
    margin: 0 0 14px; padding: 9px 12px; font-size: 12px; line-height: 1.6; max-width: 90ch;
    color: #92400e; background: var(--orange-bg); border: 1px solid #fcd34d; border-radius: 8px;
}

/* Page types on the inventory. A band of its own, because classifying is a
   separate job from discovering and costs money when you press it. */
.si-types {
    margin: 0 0 16px; padding: 12px 14px 4px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
}
.si-types .si-bar { margin-bottom: 8px; }
.si-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.si-chip {
    font-size: 12px; padding: 4px 10px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
}
.si-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.si-chip.is-none { border-style: dashed; }

.si-scroll { overflow-x: auto; }
.si-t { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 12.5px;
        background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; }
.si-t thead th {
    text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
    padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.si-t .si-r { text-align: right; }
.si-t tbody th, .si-t tbody td { padding: 9px 14px; border-bottom: 1px solid #f0f1f3; vertical-align: top; }
.si-t tbody tr:last-child th, .si-t tbody tr:last-child td { border-bottom: 0; }
.si-t tbody th { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.si-row.is-out th, .si-row.is-out td { color: var(--text-muted); }
.si-row.is-out th { font-weight: 400; }
.si-dim { color: var(--text-muted); }
.si-num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.si-num .si-dim { display: block; font-weight: 400; font-size: 11px; }
.si-maps summary { cursor: pointer; color: var(--blue); }
.si-maps ul { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 3px; }
.si-maps li { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; }
.si-maps a { overflow-wrap: anywhere; min-width: 0; }
.si-maps li span { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.si-toggle {
    font: inherit; font-size: 11.5px; font-weight: 600; color: #15803d; background: #e7f5ed;
    border: 0; border-radius: 99px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.si-row.is-out .si-toggle { color: var(--text-muted); background: #f1f2f4; }
.si-toggle:disabled { opacity: .6; cursor: progress; }
.si-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--text-muted); max-width: 90ch; line-height: 1.6; }

.si-link { margin: 0 0 16px; font-size: 12.5px; color: var(--text-muted); }
/* On the gap page: whether we know what this brand publishes, or only what
   was cited. A missing inventory is stated, never implied. */
.gp-inv { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }
.gp-inv b { color: var(--text); font-variant-numeric: tabular-nums; }
.gp-inv a { margin-left: 6px; }
.gp-inv.is-missing { color: #92400e; }

/* Whether a gap topic has a page at all. Only shown where a site inventory
   exists: without one the answer is unknown, which is not the same as "no". */
/* No explicit grid-row, for the reason .gx-gap-why lost its own: a pinned
   row ignores markup order, and this macro's body is now also rendered
   outside the .gx-gap grid by the Smaller gaps list. */
.gx-page { grid-column: 1; font-size: 11.5px; margin-top: 3px; }
.gx-page a { overflow-wrap: anywhere; }
.gx-page.is-exists { color: #b45309; font-weight: 600; }
.gx-page.is-exists a { font-weight: 400; }
.gx-page.is-none { color: var(--text-muted); }
.gx-stat.is-exists b, .gx-stat.is-exists span { color: #b45309; }