:root[data-theme="light"] {
    color-scheme: light;
    --brand-primary: var(--c-primary);
    --brand-secondary: var(--c-secondary);
    --brand-accent: var(--c-accent);
    --accent: var(--c-primary);
    --accent-2: var(--c-secondary);
    --page-bg: var(--c-background-eaf1f6);
    --panel: var(--c-background-fcfdfe);
    --text: var(--c-text);
    --muted: var(--c-muted);







    --border: var(--c-background-c9d8e4);
    --border-strong: var(--c-background-a9c0d2);
}
/* Important overrides supersede the analytics pages' inline brand variables. */
:root[data-theme="light"] {
    --widget-bg: var(--c-background-fcfdfe) !important;
    --widget-text: var(--c-text) !important;
    --widget-muted: var(--c-muted) !important;
    --widget-accent: var(--c-secondary) !important;
    --widget-grid: rgba(var(--c-text-rgb), .14) !important;
    --page-bg-start: var(--c-background-eaf1f6);
    --page-bg-end: var(--c-background-dfe9f1);
    --card: var(--c-background-fcfdfe);
}
:root[data-theme="light"] table { color: var(--text); }
:root[data-theme="light"] thead { background: var(--c-background-dfe9f1); color: var(--c-primary); }
:root[data-theme="light"] tbody tr:hover { background: rgba(var(--c-accent-rgb), .10); }
:root[data-theme="light"] .insights-footer {
    --widget-muted: var(--sidebar-muted, var(--c-sidebar-muted));
    --widget-text: var(--header-fg, #ffffff);
    --widget-grid: rgba(255, 255, 255, .08);
}
:root[data-theme="light"] .widget-card button { color: var(--widget-text); }

:root[data-theme="light"] .widget-card {
    border: 1px solid var(--c-background-c9d8e4);
    box-shadow: 0 3px 12px rgba(var(--c-chrome-rgb), .10);
}
:root[data-theme="light"] table.data-table thead th {
    background: var(--c-background-dfe9f1);
    color: var(--c-text);
    font-weight: 700;
    border-bottom: 1px solid var(--c-background-a9c0d2);
}
:root[data-theme="light"] table.data-table tbody tr:hover { background: var(--c-background-d6e8f3); }
:root[data-theme="light"] table.data-table td { border-bottom-color: var(--c-background-d3e0ea); }
/* Griffin: light mode's --widget-accent is the deep #006FAF ink, so
   accent-filled controls need white text (Headline's dark text on its gold
   accent doesn't carry over - #1E2A33 on #006FAF is only ~2.7:1). */
:root[data-theme="light"] .chart-view-btn.active,
:root[data-theme="light"] .export-chart-actions button,
:root[data-theme="light"] .mock-badge { color: #ffffff; }
/* Selected toggle buttons on every page (view switchers, chart periods, heatmap
   measures, Summary / Detailed...): a lighter tint of the client's header colour
   (--c-chrome) rather than the secondary ink, so they read as the client's own scheme. */
:root[data-theme="light"] .chart-view-btn.active {
    background: color-mix(in srgb, var(--c-chrome) 75%, #ffffff);
    border-color: color-mix(in srgb, var(--c-chrome) 75%, #ffffff);
}

/* "Portfolios shown" dropdown - Your portfolios / Resonant Headline
   (public/js/portfolioGroups.js), only on sites approved for the Headline
   models. Sits in the portal sidebar above the navigation tree; a portfolio
   page opened outside the portal gets the same dropdown at the left of its
   tab row. A button plus its own list, so the open list uses the site's
   colours in both modes: --pg-surface is the surface it sits on. */
.portfolio-group-picker { display: flex; flex-direction: column; gap: 5px; }
.portfolio-group-picker[hidden] { display: none; }
.portfolio-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.portfolio-group-select-wrap { position: relative; display: block; }
.portfolio-group-select-wrap::after { content: ""; position: absolute; right: 11px; top: 50%; margin-top: -2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; pointer-events: none; transition: transform .15s ease; }
.portfolio-group-select-wrap:has(.portfolio-group-select[aria-expanded="true"])::after { transform: rotate(180deg); }
.portfolio-group-select { display: block; width: 100%; margin: 0; font: inherit; font-size: 14px; line-height: 1.2; text-align: left; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 8px; padding: 8px 30px 8px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portfolio-group-icon, .portfolio-group-initial { display: none; } /* rail only (portal.css) */
.portfolio-group-select:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.portfolio-group-select:focus-visible { outline: 2px solid var(--brand-accent, currentColor); outline-offset: 1px; }
.portfolio-group-select[aria-expanded="true"] { border-color: var(--brand-accent, currentColor); }
.portfolio-group-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); min-width: max-content; margin: 0; padding: 4px; list-style: none; color: inherit; background: color-mix(in srgb, var(--pg-surface) 90%, currentColor); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); outline: 0; }
.portfolio-group-menu[hidden] { display: none; }
.portfolio-group-option { position: relative; padding: 8px 10px 8px 26px; border-radius: 6px; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.portfolio-group-option.is-focused { background: color-mix(in srgb, currentColor 14%, transparent); }
.portfolio-group-option[aria-selected="true"] { font-weight: 600; }
/* Tick beside the set that is showing. */
.portfolio-group-option[aria-selected="true"]::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 9px; margin-top: -7px; border: solid var(--brand-accent, currentColor); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Lined up with the navigation tree below: label with the section titles, box with the rows. */
.portfolio-group-picker-sidebar { flex: 0 0 auto; padding: 10px 10px 8px; color: var(--sidebar-text, inherit); --pg-surface: var(--sidebar-bg, var(--panel)); }
.portfolio-group-picker-sidebar .portfolio-group-label { padding-left: 10px; color: var(--workspace-text, inherit); }

.portfolio-group-picker-inline { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; margin-right: 14px; padding-right: 14px; border-right: 1px solid var(--widget-grid, rgba(255, 255, 255, .2)); color: var(--widget-text, inherit); --pg-surface: var(--widget-bg, var(--card)); }
.portfolio-group-picker-inline .portfolio-group-label { color: var(--widget-muted, inherit); }
.portfolio-group-picker-inline .portfolio-group-select { font-size: 12px; padding: 5px 28px 5px 9px; }
.portfolio-group-picker-inline .portfolio-group-option { font-size: 12px; }
@media (max-width: 760px) {
    .portfolio-tabs-row:has(.portfolio-group-picker-inline) { flex-wrap: wrap; }
    .portfolio-group-picker-inline { flex: 1 1 100%; margin: 0 0 6px; padding-right: 0; border-right: 0; }
    .portfolio-group-picker-inline .portfolio-group-select-wrap { flex: 1 1 auto; }
    /* A real basis, so the tabs wrap under the dropdown rather than
       squeezing to nothing beside it. */
    .portfolio-tabs-row .portfolio-group-picker-inline ~ .portfolio-tabs { flex: 1 1 60%; }
}