/* Approval by group (us_site/subgroups.py, us/assets/subgroups.js).
   Rows reuse the approval page's .ap-row split bars (approval.css) on the same
   0-100 scale, grouped by dimension; the trend chart reuses .ap-chart.
   Tokens only (--pc-*); --sg-cat-* is the series set for non-party groups. */
.sg {
    --sg-cat-1: #0E7490;
    --sg-cat-2: #C2410C;
    --sg-cat-3: #7E22CE;
    --sg-dem: var(--pc-party-dem);
}
body.dark-mode .sg {
    --sg-cat-1: #22D3EE;
    --sg-cat-2: #FB923C;
    --sg-cat-3: #C084FC;
    --sg-dem: #8B9CFF;   /* the party blue is too dark for a line on slate */
}

/* overview: one block per dimension */
.sg-dim { margin-top: 14px; }
.sg-dim:first-child { margin-top: 0; }
.sg-dim-h {
    font-family: var(--pc-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pc-text-meta);
    padding-bottom: 2px;
}
.sg .sg-row { padding: 6px 0; }
.sg .sg-row .ap-row-lbl { font-weight: 500; }
.sg .sg-row.is-total .ap-row-lbl { font-weight: 700; }
.sg .sg-row .ap-row-lbl span { margin-left: 4px; }
.sg .sg-row .ap-row-nums { font-size: 14px; }
/* net in ink: it is a level, not a change (the pc-change direction colour is for changes only) */
.sg .ap-row-net { color: var(--pc-text); }
.sg .ap-row-net.is-nc { color: var(--pc-text-meta); }

/* trend */
.sg-trend { margin-top: 32px; }
.sg-h3 { font-family: var(--pc-serif); font-size: 18px; font-weight: 700; color: var(--pc-text); margin: 0; }
.sg-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
/* tap targets: 40px tall group tabs */
.sg-pills .pc-pill { min-height: 40px; justify-content: center; }
.sg-pills .pc-pill-label { font-size: 12px; }
.sg-trend .pc-mode-btn, .sg-trend .pc-btn { min-height: 40px; }
.gbp-chart-container.sg-chart { height: 380px; }

/* polls in the average */
.sg-polls .pc-table-wrap { margin-top: 8px; max-width: 640px; }
.sg-table { min-width: 0; }
.sg-table td, .sg-table th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-table.sg-table thead th:first-child, .pc-table.sg-table tbody td:first-child { text-align: left; }
.sg-table abbr { text-decoration: none; }
.sg-src a { color: var(--pc-text-secondary); }
.sg-credits { font-family: var(--pc-sans); font-size: 11px; line-height: 1.5; color: var(--pc-text-meta); margin: 8px 0 0; }
.sg-credits span { margin-right: 8px; }
.sg-credits a { color: var(--pc-text-meta); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 768px) {
    .gbp-chart-container.sg-chart { height: 320px; }
}
@media (max-width: 600px) {
    .sg .sg-row .ap-row-nums { font-size: 13px; }
    .sg-table thead th, .sg-table tbody td { padding-left: 4px; padding-right: 4px; }
    .sg-table thead th:first-child, .sg-table tbody td:first-child { padding-left: 0; }
}