/* ═══════════════════════════════════════════════════════════════════
   GEO MARQUE v4 — onglet Sources (callbacks_brand_sources.py), 2026-10-01.
   Retour à la mise en page v2 : une carte par marque, même forme
   (SPEC_V4 §4.5). Classes `brand-src-*` seulement ; chargé après
   z_compass.css et z_compass_brand_ui.css (ordre alphabétique des assets).
   Couleurs = jetons existants (--c-line, --c-muted, --c-pale, --c-soft,
   --c-cyan-ink, --yellow, --navy, --white). Aucune largeur fixe, aucun
   blanc insécable sur du contenu variable.
   ═══════════════════════════════════════════════════════════════════ */

/* Export (une ligne, à droite) */
.brand-src-tools { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.brand-src-export {
    border: 1px solid var(--c-line); border-radius: 999px; background: var(--white); color: var(--navy);
    padding: 5px 14px; font: inherit; font-size: 12px; cursor: pointer;
}
.brand-src-export:hover, .brand-src-export:focus-visible { border-color: var(--c-cyan-ink); }

/* ── Cartes : deux par ligne, une seule sous 1100 px ── */
.brand-src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.brand-src-grid > .brand-src-card { margin-bottom: 0; min-width: 0; }
.brand-src-card.is-client > .chart-card-title { box-shadow: inset 0 -0.55em 0 var(--yellow); display: inline-block; }
.brand-src-stat { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: var(--navy); overflow-wrap: anywhere; }
.brand-src-stat strong { font-weight: 600; }

/* Boutons de la carte : d'aspect lien */
.brand-src-act {
    border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--navy);
    cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.brand-src-act:hover, .brand-src-act:focus-visible { color: var(--c-cyan-ink); }
.brand-src-competitor { font-weight: 600; color: var(--c-cyan-ink); }
.brand-src-competitor:hover, .brand-src-competitor:focus-visible { text-decoration: underline; }
.brand-src-more { display: block; margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--c-cyan-ink); }

/* ── Classement des sites, pages d'un site ── */
.brand-src-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; color: var(--navy); }
.brand-src-table th {
    text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--c-muted); padding: 6px 8px; border-bottom: 1px solid var(--c-line);
    overflow-wrap: normal; word-break: normal;
}
.brand-src-table td { padding: 7px 8px; border-bottom: 1px solid var(--c-line); vertical-align: top; overflow-wrap: anywhere; }
.brand-src-rank { width: 28px; color: var(--c-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.brand-src-share { width: 46%; }
.brand-src-site-row.is-own .brand-src-site-btn { font-weight: 600; }
.brand-src-site-row.is-open > td { background: var(--c-pale); }
.brand-src-detail-row > td { padding: 0 0 10px 14px; background: var(--c-pale); }
.brand-src-pages { padding: 4px 8px; min-width: 0; }
.brand-src-pages .brand-src-table td { background: var(--white); }
.brand-src-table.is-pages th:nth-child(n+2) { text-align: right; width: 84px; }
.brand-src-num { text-align: right; font-variant-numeric: tabular-nums; }
.brand-src-page-row.is-open > td { background: var(--c-soft) !important; }
.brand-src-page-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.brand-src-out { flex: 0 0 auto; color: var(--c-cyan-ink); text-decoration: none; font-weight: 600; }
.brand-src-out:hover { text-decoration: underline; }
.brand-src-path { font-size: 11.5px; color: var(--c-muted); overflow-wrap: anywhere; }
.brand-src-from-title { font-size: 11px; color: var(--c-muted); font-style: italic; }
.brand-src-pages .brand-src-detail-row > td { padding: 4px 0 8px 14px; background: var(--c-soft); }
/* Questions d'une page (table partagée brand_ui_answers) : `Open answer` sur une ligne. */
.brand-src-pages .brand-qa { margin: 0; }
.brand-src-pages .brand-qa-open { width: 96px; }

@media (max-width: 1100px) {
    .brand-src-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .brand-src-tools { justify-content: flex-start; }
    .brand-src-table th { letter-spacing: 0.04em; padding: 6px 4px; }
    .brand-src-table td { padding: 7px 4px; }
    .brand-src-share { width: 40%; }
    .brand-src-detail-row > td { padding-left: 6px; }
}