/*
 * TOE Energy Dashboard — public styles
 * All values use theme CSS variables where possible.
 * Fonts (Manrope, Orbitron) are enqueued by the Spiel theme; do not re-declare.
 *
 * Grid markup uses wp-block-post-template / is-layout-grid / columns-N classes so
 * WordPress's own layout CSS applies. Plugin CSS here is the authoritative fallback
 * and for plugin-specific overrides only.
 */

/* ── Dashboard wrapper ───────────────────────────────────────── */

.toe-energy-dashboard {
    --toe-accent: var(--wp--preset--color--gold, #f0a500);

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    margin-inline: auto;
    padding-inline: var(--wp--preset--spacing--60);
    padding-block: var(--wp--preset--spacing--60);
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--medium);
    letter-spacing: -0.005em;
    line-height: 1.4;
    color: var(--wp--preset--color--contrast);
}

/* ── Header ─────────────────────────────────────────────────── */

.toe-energy-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-block-end: var(--wp--preset--spacing--20);
}

/* ── Header icon actions (matches fullscreen header style) ── */

.toe-energy-dashboard__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toe-energy-dashboard__header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.toe-energy-dashboard__header-action:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.toe-energy-dashboard__header-action svg {
    display: block;
    fill: currentColor;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__header-action {
    color: #64748b;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__header-action:hover {
    color: #1a1a1a;
    background: rgba(0, 0, 0, 0.06);
}

/* ── Sticky section tab navigation ─────────────────────────── */

.toe-energy-dashboard__section-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-inline: calc(-1 * var(--wp--preset--spacing--60));
    padding-inline: var(--wp--preset--spacing--60);
}

.toe-energy-dashboard__section-nav-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
    padding-block: 6px;
}

/* Mobile: hamburger toggle for section tabs */
.toe-energy-dashboard__section-nav-toggle {
    display: none;
}

.toe-energy-dashboard__section-tab {
    padding: 5px 12px;
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.6);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.toe-energy-dashboard__section-tab:hover {
    color: var(--toe-accent);
}

.toe-energy-dashboard__section-tab--active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Light theme overrides for section nav ─────────────────── */

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-nav {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: #e2e8f0;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-tab {
    color: #64748b;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-tab:hover {
    color: var(--toe-accent);
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-tab--active {
    color: #1a1a1a;
    background: #f1f5f9;
}

/* Admin bar offset for sticky nav */

.admin-bar .toe-energy-dashboard__section-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .toe-energy-dashboard__section-nav {
        top: 46px;
    }
}

/* ── Mobile: collapsible section tabs ─────────────────────── */

@media (max-width: 768px) {
    .toe-energy-dashboard__section-nav {
        padding-inline: var(--wp--preset--spacing--30);
    }

    .toe-energy-dashboard__section-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 4px;
        background: none;
        border: none;
        color: #fff;
        font-family: Manrope, sans-serif;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        cursor: pointer;
    }

    .toe-energy-dashboard__section-nav-toggle__label {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .toe-energy-dashboard__section-nav-toggle__icon {
        display: flex;
        transition: transform 0.2s ease;
    }

    .toe-energy-dashboard__section-nav-toggle[aria-expanded="true"] .toe-energy-dashboard__section-nav-toggle__icon {
        transform: rotate(180deg);
    }

    .toe-energy-dashboard__section-nav-scroll {
        display: none;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 8px;
    }

    .toe-energy-dashboard__section-nav-scroll--open {
        display: flex;
    }

    .toe-energy-dashboard__section-tab {
        font-size: 11px;
        padding: 8px 12px;
        text-align: left;
        border-radius: 4px;
    }

    .toe-energy-dashboard__section-tab--active {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Light theme */
    .toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-nav-toggle {
        color: #1a1a1a;
    }
}

/* ── Gated content placeholder ──────────────────────────────── */

.toe-energy-dashboard__gated {
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 32px 20px;
    margin-bottom: 1rem;
}

.toe-energy-dashboard__gated-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 400px;
}

.toe-energy-dashboard__gated-icon {
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.2);
}

.toe-energy-dashboard__gated-title {
    font-family: Manrope, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.toe-energy-dashboard__gated-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
}

.toe-energy-dashboard__gated-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #ffffff;
    background: var(--toe-accent, #f0a500);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.toe-energy-dashboard__gated-btn:hover {
    opacity: 0.85;
    color: #ffffff;
}

/* Light theme */
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__gated {
    border-color: #e2e8f0;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__gated-icon {
    color: #cbd5e1;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__gated-title {
    color: #64748b;
}

.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__gated-text {
    color: #94a3b8;
}

/* ── Sections container ──────────────────────────────────────── */

.toe-energy-dashboard__sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Sections vertical scroller ─────────────────────────────── */

/* Viewport is a plain wrapper — no height/overflow constraints.
   JS auto-scrolls the page to bring sections under the sticky ticker. */

/* ── Section (category group) ────────────────────────────────── */

.toe-energy-dashboard__section {
    display: flex;
    flex-direction: column;
}

.toe-energy-dashboard__section-header {
    border-bottom: 3px solid var(--wp--preset--color--contrast);
    margin-block-end: var(--wp--preset--spacing--30);
    padding-block-end: var(--wp--preset--spacing--20);
}

.toe-energy-dashboard__section-label {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 !important;
}

/* Override theme heading margins — WP generates high-specificity rules
   from theme.json core/post-content elements.heading */
.toe-energy-dashboard h2,
.toe-energy-dashboard h3,
.toe-energy-dashboard h4,
.toe-energy-dashboard :where(h2),
.toe-energy-dashboard :where(h3),
.toe-energy-dashboard :where(h4),
.entry-content .toe-energy-dashboard h2,
.entry-content .toe-energy-dashboard h3,
.entry-content .toe-energy-dashboard h4,
.wp-block-post-content .toe-energy-dashboard h2,
.wp-block-post-content .toe-energy-dashboard h3,
.wp-block-post-content .toe-energy-dashboard h4 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* ── 4-column post grid ──────────────────────────────────────── */

.toe-energy-dashboard__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: var(--wp--preset--spacing--30);
    align-items: stretch;
}

@media (max-width: 1024px) {
    .toe-energy-dashboard__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .toe-energy-dashboard__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Card (list item) ────────────────────────────────────────── */

.toe-energy-dashboard__card {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    border: 1px solid var(--wp--preset--color--secondary);
    padding: 0.4rem 1rem 0.5rem !important;
    word-break: normal;
    overflow-wrap: anywhere;
    height: 100%;
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Reset any inherited margins/padding on card children */
.toe-energy-dashboard__card > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-width: 0;
}

.toe-energy-dashboard__card--span-2 {
    grid-column: span 2;
}

.toe-energy-dashboard__card--span-4 {
    grid-column: 1 / -1;
}

.toe-energy-dashboard__card--error {
    border-style: dashed;
}

.toe-energy-dashboard__card--unavailable {
    border-style: dashed;
    opacity: 0.55;
}

.toe-energy-dashboard__card--stale {
    border-style: dashed;
    border-color: #f0a500;
    opacity: 0.8;
}

.toe-energy-dashboard__stale-badge {
    display: inline-block;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: #f0a500;
    letter-spacing: 0.02em;
}

.toe-energy-dashboard__unavailable-msg {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--tertiary);
    font-style: italic;
    margin: 0.25rem 0;
}

.toe-energy-dashboard__card-source {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toe-energy-dashboard__card-title {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 !important;
    flex-grow: 1;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
}

.toe-energy-dashboard__card-title a {
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}

.toe-energy-dashboard__card-title a:hover,
.toe-energy-dashboard__card-title a:focus-visible {
    color: var(--wp--preset--color--primary);
}

.toe-energy-dashboard__card-byline {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--tertiary);
    margin: 0;
    margin-block-start: auto;
}

/* ── Meta / muted text ──────────────────────────────────────── */

.toe-energy-dashboard__meta {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--tertiary);
    margin: 0;
}

/* ── Buttons ────────────────────────────────────────────────── */

.toe-energy-dashboard__btn {
    display: inline-block;
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.0625rem 2.125rem;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

.toe-energy-dashboard__btn:hover,
.toe-energy-dashboard__btn:focus-visible {
    background-color: var(--wp--preset--color--primary);
    outline: 1px dotted var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* ── Live Ticker ───────────────────────────────────────────── */

.toe-energy-dashboard__ticker-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--wp--preset--color--base, #ffffff);
    margin-block-end: 0;
}

.toe-energy-dashboard__ticker-section--top {
    position: relative;
    top: auto;
    z-index: 1;
    padding-block-end: 0.5rem;
}

.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__ticker-section {
    background: #111318;
}

@media (prefers-color-scheme: dark) {
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__ticker-section {
        background: #111318;
    }
}

.toe-energy-dashboard__ticker {
    background: #0a0e17;
    border: 1px solid #1e2330;
    border-radius: 2px;
    margin-block-start: var(--wp--preset--spacing--30);
    font-family: Manrope, sans-serif;
    max-width: 100%;
}

.toe-energy-dashboard__ticker--error {
    padding: 0.625rem 1rem;
}

/* Each layer is a horizontal row: pinned label + scrolling track */
.toe-energy-dashboard__ticker-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #1e2330;
}

.toe-energy-dashboard__ticker-row:last-child {
    border-bottom: none;
}

/* Pinned category label on the left */
/* Ticker text is fixed at 13px: the theme's "small" size is larger and wraps the row labels. */
.toe-energy-dashboard__ticker-label {
    flex-shrink: 0;
    width: 9rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    background: #0d1119;
    border-right: 1px solid #1e2330;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

.toe-energy-dashboard__ticker-header {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--40);
}

.toe-energy-dashboard__ticker-attr {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--wp--preset--color--tertiary, #757575);
    margin-left: auto;
}

/* Scrolling area — overflow hidden with fade edges */
.toe-energy-dashboard__ticker-scroll {
    flex: 1;
    overflow: hidden !important;
    position: relative;
    padding-block: 0.15rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.toe-energy-dashboard__ticker-scroll::before,
.toe-energy-dashboard__ticker-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    z-index: 2;
    pointer-events: none;
}
.toe-energy-dashboard__ticker-scroll::before {
    left: 0;
    background: linear-gradient(to right, #0a0e17, transparent);
}
.toe-energy-dashboard__ticker-scroll::after {
    right: 0;
    background: linear-gradient(to left, #0a0e17, transparent);
}

.toe-energy-dashboard__ticker-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2.5rem;
    white-space: nowrap;
    /* Duration is per-row: the inline --toe-ticker-duration custom property
       (set in ticker.php from the admin Ticker panel) overrides this default. */
    -webkit-animation: toe-ticker-scroll var(--toe-ticker-duration, 60s) linear infinite;
    animation: toe-ticker-scroll var(--toe-ticker-duration, 60s) linear infinite;
    width: max-content;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.toe-energy-dashboard__ticker:hover .toe-energy-dashboard__ticker-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/* Chartable ticker items drill to the charts explorer. */
a.toe-energy-dashboard__ticker-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.toe-energy-dashboard__ticker-item--chart:hover .toe-energy-dashboard__ticker-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.toe-energy-dashboard__ticker-item--chart:focus-visible {
    outline: 1px dotted var(--wp--preset--color--primary, #296DEB);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .toe-energy-dashboard__ticker-track {
        animation: none;
        overflow-x: auto;
    }
}

@-webkit-keyframes toe-ticker-scroll {
    0%   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@keyframes toe-ticker-scroll {
    0%   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

.toe-energy-dashboard__ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1;
}

.toe-energy-dashboard__ticker-name {
    color: #f0a500;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.toe-energy-dashboard__ticker-price {
    color: #e2e8f0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.toe-energy-dashboard__ticker-change {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.toe-energy-dashboard__ticker-change--up {
    color: #00c853;
}

.toe-energy-dashboard__ticker-change--down {
    color: #ff1744;
}

.toe-energy-dashboard__ticker-change--flat {
    color: #6b7280;
}

/*
 * Responsive: on narrow screens drop the per-layer category labels and keep
 * each layer as a single compact scrolling row. (Stacking the label above the
 * track turned 3 rows into 6 and ate the viewport.) The section heading still
 * provides context.
 */
@media (max-width: 600px) {
    .toe-energy-dashboard__ticker-label {
        display: none;
    }
    .toe-energy-dashboard__ticker-row {
        flex-direction: row;
        align-items: center;
    }
}

/* ── News Ticker Row ───────────────────────────────────────── */

.toe-energy-dashboard__ticker-news-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    padding-inline: 0.25rem;
    border-right: 1px solid #1e2330;
    padding-right: 2.5rem;
}

.toe-energy-dashboard__ticker-news-item:last-child {
    border-right: none;
}

.toe-energy-dashboard__ticker-news-source {
    color: #f0a500;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--wp--preset--font-size--x-small);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.toe-energy-dashboard__ticker-news-title {
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toe-energy-dashboard__ticker-news-item:hover .toe-energy-dashboard__ticker-news-title,
.toe-energy-dashboard__ticker-news-item:focus .toe-energy-dashboard__ticker-news-title {
    color: var(--wp--preset--color--primary, #296DEB);
}

/* ── Oil Prices ─────────────────────────────────────────────── */

.toe-oil-prices__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-oil-prices__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-oil-prices__currency {
    font-size: 1rem;
    font-weight: 600;
    vertical-align: super;
    margin-inline-end: 0.1em;
    color: var(--wp--preset--color--primary);
}

.toe-energy-dashboard__card-excerpt {
    font-size: var(--wp--preset--font-size--x-small);
    margin: 0;
}

/* ── Spot Prices ───────────────────────────────────────────── */

.toe-spot-prices__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-spot-prices__change {
    font-family: Manrope, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 0;
    line-height: 1;
}

.toe-spot-prices__change--up {
    color: #00c853;
}

.toe-spot-prices__change--down {
    color: #ff1744;
}

.toe-spot-prices__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-spot-prices__sparkline,
.toe-oil-prices__sparkline {
    margin: var(--wp--preset--spacing--20) 0;
    line-height: 0;
}

.toe-sparkline {
    display: block;
    width: 100%;
    height: 32px;
}

/* ── Market Spreads ────────────────────────────────────────── */

.toe-spreads__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-spreads__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-spreads__currency {
    font-size: 1rem;
    font-weight: 600;
    vertical-align: super;
    margin-inline-end: 0.1em;
    color: var(--wp--preset--color--primary);
}

.toe-spreads__na {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--tertiary);
}

.toe-spreads__change--positive .toe-spreads__currency {
    color: #00c853;
}

.toe-spreads__change--negative {
    color: #ff1744;
}

.toe-spreads__change--negative .toe-spreads__currency {
    color: #ff1744;
}

.toe-spreads__change--neutral {
    color: var(--wp--preset--color--tertiary);
}

.toe-spreads__health {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-spreads__health--good {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

.toe-spreads__health--caution {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.toe-spreads__health--warning {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
}

.toe-spreads__health--neutral {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.toe-spreads__sparkline {
    margin: var(--wp--preset--spacing--20) 0;
    line-height: 0;
}

/* ── Spread Tooltips ───────────────────────────────────────── */

.toe-spreads__card {
    position: relative;
}

.toe-spread-info-btn,
.toe-info-btn {
    background: none;
    border: none;
    color: #00b4d8;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
    vertical-align: middle;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.toe-spread-info-btn:hover,
.toe-spread-info-btn:focus-visible,
.toe-info-btn:hover,
.toe-info-btn:focus-visible {
    opacity: 1;
}
.toe-info-btn--inline {
    position: static;
    font-size: 12px;
    padding: 0 0 0 4px;
}

.toe-spread-tooltip {
    position: fixed;
    z-index: 9999;
    width: 300px;
    background: #0d1017;
    border: 1px solid #f0a500;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    color: #c8cdd6;
    line-height: 1.5;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.toe-spread-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.toe-tt-title {
    font-size: 13px;
    font-weight: 700;
    color: #f0a500;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(240,165,0,0.3);
}
.toe-tt-section {
    margin-bottom: 10px;
}
.toe-tt-label {
    font-size: 10px;
    font-weight: 700;
    color: #f0a500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.toe-tt-text {
    color: #c8cdd6;
}
.toe-tt-formula {
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: monospace;
    font-size: 11px;
    color: #00b4d8;
}
.toe-tt-color-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 11px;
}
.toe-tt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}
.toe-tt-dot.green  { background: #22c55e; }
.toe-tt-dot.amber  { background: #f0a500; }
.toe-tt-dot.red    { background: #ef4444; }
.toe-tt-why {
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    color: #a0a8b4;
    font-style: italic;
}

/* Default: tooltip above icon — caret points down from bottom */
.toe-spread-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: #0d1017;
    border-right: 1px solid #f0a500;
    border-bottom: 1px solid #f0a500;
    transform: rotate(45deg);
}
/* Flipped: tooltip below icon — caret points up from top */
.toe-spread-tooltip.flip-up::before {
    bottom: auto;
    top: -6px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid #f0a500;
    border-top: 1px solid #f0a500;
}

.toe-section-hint {
    font-size: 11px;
    color: #5a6272;
    margin-top: -4px;
    margin-bottom: 8px;
}

/* ── Futures Curve ──────────────────────────────────────────── */

.toe-futures__header {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--40);
}

.toe-futures__attr {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--tertiary, #757575);
    margin-left: auto;
}

.toe-futures__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.toe-futures__row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--wp--preset--color--secondary, #2e2e2e);
}

.toe-futures__row:last-child {
    border-bottom: none;
}

.toe-futures__commodity-label {
    flex-shrink: 0;
    width: 11rem;
    padding: 0.6rem 0.75rem;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
}

.toe-futures__scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Right fade edge to signal more content */
.toe-futures__row::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3rem;
    pointer-events: none;
    z-index: 1;
}

.toe-futures__row {
    position: relative;
}

.toe-futures__contracts {
    display: flex;
    gap: 0;
    padding: 0.4rem 0;
    width: max-content;
}

.toe-futures__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.3rem 0.75rem;
    min-width: 4.5rem;
    opacity: 0.7;
    border-left: 2px solid transparent;
}

.toe-futures__cell--front {
    opacity: 1;
}

.toe-futures__month {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.toe-futures__change {
    font-size: 0.65rem;
    margin-left: 0.15em;
}

.toe-futures__change--up {
    color: #00c853;
}

.toe-futures__change--down {
    color: #ff1744;
}

.toe-futures__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-futures__price {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.toe-futures__unit {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--tertiary, #757575);
}

.toe-futures__through {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--tertiary, #757575);
    white-space: nowrap;
    font-style: italic;
}

/* Mobile: narrower label, show front + 2 initially */
@media (max-width: 600px) {
    .toe-futures__commodity-label {
        width: 6rem;
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
    }
    .toe-futures__cell {
        min-width: 4rem;
        padding: 0.3rem 0.5rem;
    }
}

/* ── US Energy Map ─────────────────────────────────────────── */

.toe-map__header {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--40);
}

.toe-map__attr {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--tertiary, #757575);
    margin-left: auto;
}

.toe-map__container {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
}

.toe-map__canvas {
    width: 100%;
    height: 840px;
    border-radius: 4px;
    z-index: 1;
    position: relative;
}

.toe-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--tertiary, #757575);
}

.toe-map__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.toe-map__legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Trade volume callout ───────────────────────────────── */

.toe-map__trade-control {
    pointer-events: auto;
}

.toe-map__trade-callout {
    background: rgba(10, 14, 23, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: 'Manrope', sans-serif;
    min-width: 180px;
}

.toe-map__trade-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f0a500;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toe-map__trade-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.toe-map__trade-row--net {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.toe-map__trade-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.toe-map__trade-value {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #e0e0e0;
}

.toe-map__trade-period {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 6px;
    text-align: right;
}

/* Light theme */
.toe-fullscreen-map[data-scheme="light"] .toe-map__trade-callout,
.toe-energy-dashboard[data-scheme="light"] .toe-map__trade-callout {
    background: rgba(255, 255, 255, 0.92);
    border-color: #cbd5e1;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__trade-title,
.toe-energy-dashboard[data-scheme="light"] .toe-map__trade-title {
    color: #1e40af;
    border-bottom-color: #e2e8f0;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__trade-row--net,
.toe-energy-dashboard[data-scheme="light"] .toe-map__trade-row--net {
    border-top-color: #e2e8f0;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__trade-label,
.toe-energy-dashboard[data-scheme="light"] .toe-map__trade-label {
    color: #64748b;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__trade-value,
.toe-energy-dashboard[data-scheme="light"] .toe-map__trade-value {
    color: #1a1a1a;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__trade-period,
.toe-energy-dashboard[data-scheme="light"] .toe-map__trade-period {
    color: #94a3b8;
}

/* ── Entity detail panel (map click) ───────────────────── */

.toe-map__detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 40%;
    height: 100%;
    z-index: 1100;
    background: rgba(10, 14, 23, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    font-family: 'Manrope', sans-serif;
}

/* Fullscreen map gets a wider panel. */
.toe-fullscreen-map .toe-map__detail-panel {
    width: 360px;
    max-width: 50%;
}

.toe-map__detail-panel--open {
    transform: translateX(0);
}

.toe-map__detail-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.toe-map__detail-header-text {
    flex: 1;
    min-width: 0;
}

.toe-map__detail-title {
    font-size: 14px;
    font-weight: 800;
    color: #f0a500;
    margin: 0 0 2px;
    line-height: 1.3;
}

.toe-map__detail-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.toe-map__detail-close {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.toe-map__detail-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.toe-map__detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.toe-map__detail-loading {
    text-align: center;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* ── Detail panel: info rows ──────────────────────────── */

.toe-map__detail-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin-bottom: 16px;
    font-size: 12px;
}

.toe-map__detail-info-label {
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.toe-map__detail-info-value {
    color: #e0e0e0;
}

/* ── Detail panel: connection groups ──────────────────── */

.toe-map__detail-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.toe-map__detail-group {
    margin-bottom: 12px;
}

.toe-map__detail-group-name {
    font-size: 12px;
    font-weight: 700;
    color: #296DEB;
    margin-bottom: 4px;
}

.toe-map__detail-conn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    margin: 2px 0;
    border-radius: 4px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.1s;
}

.toe-map__detail-conn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.toe-map__detail-conn-name {
    flex: 1;
    min-width: 0;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toe-map__detail-conn-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(41, 109, 235, 0.15);
    color: #296DEB;
}

.toe-map__detail-conn-badge--product {
    background: rgba(240, 165, 0, 0.15);
    color: #f0a500;
}

/* Inferred from inbound supply, not a known product slate — visibly weaker. */
.toe-map__detail-conn-badge--inferred {
    background: transparent;
    border: 1px dashed rgba(240, 165, 0, 0.5);
    color: rgba(240, 165, 0, 0.8);
    font-style: italic;
}

.toe-map__detail-explorer {
    display: block;
    margin-top: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--wp--preset--color--primary, #296DEB);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.toe-map__detail-explorer:hover {
    background: #1d56c4;
}

.toe-map__detail-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    padding: 8px 0;
}

.toe-map__detail-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.toe-map__detail-stat {
    flex: 1;
    text-align: center;
}

.toe-map__detail-stat-value {
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #f0a500;
    display: block;
}

.toe-map__detail-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Light theme ──────────────────────────────────────── */

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-panel,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-panel {
    background: rgba(255, 255, 255, 0.97);
    border-left-color: #e2e8f0;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-header,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-header {
    border-bottom-color: #e2e8f0;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-title,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-title {
    color: #1e40af;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-subtitle,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-subtitle {
    color: #64748b;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-close,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-close {
    background: #f1f5f9;
    color: #64748b;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-close:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-close:hover {
    background: #e2e8f0;
    color: #1a1a1a;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-info-label,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-info-label {
    color: #94a3b8;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-info-value,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-info-value {
    color: #334155;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-section-title,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-section-title {
    color: #94a3b8;
    border-bottom-color: #e2e8f0;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-conn,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-conn {
    background: #f8fafc;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-conn:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-conn:hover {
    background: #f1f5f9;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-conn-name,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-conn-name {
    color: #334155;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-stats,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-stats {
    background: #f8fafc;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-stat-value,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-stat-value {
    color: #1e40af;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-stat-label,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-stat-label {
    color: #64748b;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-loading,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-loading {
    color: #94a3b8;
}

.toe-fullscreen-map[data-scheme="light"] .toe-map__detail-empty,
.toe-energy-dashboard[data-scheme="light"] .toe-map__detail-empty {
    color: #94a3b8;
}

/* ── Below tablet width: panel and footprint card under the map ──
   The map script moves both into .toe-map__dock, which follows the map. */

.toe-map__dock {
    display: none;
}

@media (max-width: 767px) {
    .toe-map__dock--active {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--30, 0.5rem);
    }
    .toe-map__dock .toe-map__detail-panel {
        position: static;
        display: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: none;
        transition: none;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 4px;
    }
    .toe-map__dock .toe-map__detail-panel--open {
        display: flex;
    }
    .toe-map__dock .toe-map__detail-body {
        overflow: visible;
    }
    .toe-map__dock .toe-map__fp-bar {
        position: static;
        max-width: none;
    }
    .toe-map__dock .toe-map__fp-market {
        width: 100%;
    }
    .toe-map__canvas .leaflet-popup-content {
        overflow-wrap: anywhere;
    }
    .toe-map__dock .toe-map__fp-navbtn {
        white-space: normal;
        text-align: left;
    }
    /* The crude trade card gives way to a lit route, and is smaller otherwise. */
    .toe-map--footprint .toe-map__trade-control {
        display: none;
    }
    .toe-map__trade-callout {
        min-width: 0;
        padding: 6px 10px;
    }
    .toe-map__trade-period {
        display: none;
    }
    /* The map page keeps more of a phone's width for the map. */
    .toe-energy-dashboard--map-standalone {
        padding-inline: var(--wp--preset--spacing--30, 0.5rem);
    }
}

/* Leaflet tooltip override */
.toe-map__tooltip {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    background: #1a1d24;
    color: #e2e8f0;
    border: 1px solid #2a2d34;
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.toe-map__tooltip strong {
    color: #f0a500;
}

/* Override Leaflet default tooltip arrow */
.leaflet-tooltip.toe-map__tooltip::before {
    border-top-color: #1a1d24;
}

/* Leaflet popup override — dark theme */
.toe-map__popup .leaflet-popup-content-wrapper {
    background: #1a1d24;
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
}

.toe-map__popup .leaflet-popup-tip {
    background: #1a1d24;
}

.toe-map__popup .leaflet-popup-close-button {
    color: #888;
    font-size: 16px;
}

.toe-map__popup .leaflet-popup-close-button:hover {
    color: #fff;
}

.toe-map__popup-content {
    line-height: 1.5;
}

.toe-map__popup-title {
    display: block;
    color: #f0a500;
    font-weight: 700;
    margin-bottom: 4px;
    font-size: var(--wp--preset--font-size--small);
}

.toe-map__popup-row {
    margin-bottom: 1px;
}

.toe-map__popup-label {
    color: #888;
}

.toe-map__popup-value {
    color: #e0e0e0;
}

.toe-map__popup-value--wrap {
    white-space: normal;
    line-height: 1.4;
    font-size: 11px;
}

/* Pipeline popup: the line(s) under the click. */
.toe-map__popup-lines {
    margin-top: var(--wp--preset--spacing--30);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.toe-map__popup-lines-title {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.toe-map__popup-line {
    margin: 2px 0;
}

.toe-map__popup-line a {
    color: var(--wp--preset--color--primary);
}

.toe-map__popup-line--best a {
    font-weight: 700;
}

.toe-map__popup-dim {
    color: #888;
    font-size: 11px;
}

.toe-map__popup-fp {
    background: none;
    border: 1px dotted #888;
    border-radius: 9999px;
    color: #e0e0e0;
    cursor: pointer;
    font-size: 10px;
    padding: 0 6px;
    margin-left: 4px;
}

.toe-map__popup-fp:hover {
    border-color: var(--wp--preset--color--primary);
    color: #fff;
}

.toe-map__popup-actions {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
}

.toe-map__popup-connections-link {
    color: #296DEB;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.15s;
}

.toe-map__popup-connections-link:hover {
    color: #f0a500;
    text-decoration: underline;
}

/* Override Leaflet layer control for dark theme */
.toe-map__canvas .leaflet-control-layers {
    background: #1a1d24;
    border: 1px solid #2a2d34;
    border-radius: 4px;
    color: #e2e8f0;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
}

.toe-map__canvas .leaflet-control-layers-separator {
    border-top-color: #2a2d34;
}

.toe-map__canvas .leaflet-control-layers label {
    color: #e2e8f0;
}

/* Override Leaflet zoom control for dark theme */
.toe-map__canvas .leaflet-control-zoom a {
    background: #1a1d24;
    color: #e2e8f0;
    border-color: #2a2d34;
}

.toe-map__canvas .leaflet-control-zoom a:hover {
    background: #2a2d34;
}

/* Override Leaflet attribution for dark theme */
.toe-map__canvas .leaflet-control-attribution {
    font-size: 0.6rem;
    background: rgba(10, 14, 23, 0.75);
    color: #6b7280;
}

.toe-map__canvas .leaflet-control-attribution a {
    color: #6b7280;
}

/* Pop-out fullscreen button */
.toe-map-popout__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    background: #1a1d24 !important;
    color: #e2e8f0 !important;
    border-color: #2a2d34 !important;
    line-height: 30px !important;
    text-decoration: none !important;
}

.toe-map-popout__btn:hover {
    background: #2a2d34 !important;
    color: #f0a500 !important;
}

/* Export layer data control */
.toe-map-export__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    background: #1a1d24 !important;
    color: #e2e8f0 !important;
    border-color: #2a2d34 !important;
    line-height: 30px !important;
    text-decoration: none !important;
    cursor: pointer;
}

.toe-map-export__btn:hover {
    background: #2a2d34 !important;
    color: #f0a500 !important;
}

.toe-map-export__menu {
    position: absolute;
    top: 0;
    left: 36px;
    background: #0d1017;
    border: 1px solid #3a3f4b;
    border-radius: 6px;
    min-width: 240px;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
    padding: 4px 0;
}

.toe-map-export__menu::before {
    content: 'Export CSV';
    display: block;
    padding: 6px 12px 4px;
    color: #f0a500;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #2a2d34;
    margin-bottom: 2px;
}

.toe-map-export__item,
.toe-map-export__item:link,
.toe-map-export__item:visited,
.toe-map-export__item:active {
    display: block;
    padding: 7px 12px;
    color: #e2e8f0 !important;
    text-decoration: none !important;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.4;
    background: transparent;
}

.toe-map-export__item:hover {
    background: #1a1d24 !important;
    color: #f0a500 !important;
}

.toe-map-export__heading {
    padding: 8px 12px 2px;
    color: #94a3b8;
    font-family: Manrope, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Short enough on a phone that the card under the map starts in view. */
@media (max-width: 767px) {
    .toe-map__canvas {
        height: min(560px, 65vh);
    }
}

@media (max-width: 600px) {
    .toe-map__legend {
        gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    }
}

/* ── Market Indicators ──────────────────────────────────────── */

.toe-market-indicators__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-market-indicators__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-market-indicators__units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

/* ── Drilling Intelligence ─────────────────────────────────── */

.toe-drilling__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-drilling__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-drilling__units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

/* Change vs the previous published reading (WoW for rig counts, MoM for DPR
   wells/DUCs). Shape and colours per the dashboard card style guide. */
.toe-drilling__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
}

.toe-drilling__change--up { color: #00c853; }
.toe-drilling__change--down { color: #ff1744; }
.toe-drilling__change--flat { color: var(--wp--preset--color--tertiary); }

.toe-drilling__change-icon {
    font-size: 0.65em;
    margin-inline-end: 0.15em;
}

.toe-drilling__change-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-inline-start: 0.3em;
    color: var(--wp--preset--color--tertiary);
}

/* ── Storage ──────────────────────────────────────────────── */

.toe-storage__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-storage__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-storage__units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

/* Change vs the previous published reading (WoW for rig counts, MoM for DPR
   wells/DUCs). Shape and colours per the dashboard card style guide. */
.toe-storage__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
}

.toe-storage__change--up { color: #00c853; }
.toe-storage__change--down { color: #ff1744; }
.toe-storage__change--flat { color: var(--wp--preset--color--tertiary); }

.toe-storage__change-icon {
    font-size: 0.65em;
    margin-inline-end: 0.15em;
}

.toe-storage__change-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-inline-start: 0.3em;
    color: var(--wp--preset--color--tertiary);
}


/* ── SPR Tracker (within Storage section) ───────────────────── */

.toe-spr__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.toe-spr__change--up {
    color: #00c853;
}

.toe-spr__change--down {
    color: #ff1744;
}

.toe-spr__change-icon {
    font-size: 0.6em;
    vertical-align: middle;
    margin-inline-end: 0.2em;
}

.toe-spr__range {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin: var(--wp--preset--spacing--20) 0 0;
}

.toe-spr__health-badge {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-spr__health--normal {
    color: #00c853;
}

.toe-spr__health-badge.toe-spr__health--normal {
    background: rgba(0, 200, 83, 0.15);
}

.toe-spr__health--caution {
    color: #ffab00;
}

.toe-spr__health-badge.toe-spr__health--caution {
    background: rgba(255, 171, 0, 0.15);
}

.toe-spr__health--tight {
    color: #ff1744;
}

.toe-spr__health-badge.toe-spr__health--tight {
    background: rgba(255, 23, 68, 0.15);
}

/* ── Section Explainer ────────────────────────────────────────── */

.toe-energy-dashboard__section-explainer {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--tertiary);
    line-height: 1.5;
    margin: 0 0 var(--wp--preset--spacing--40);
    max-width: 80ch;
}

/* ── SPR Tracker ─────────────────────────────────────────────── */

.toe-spr__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-spr__units {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-left: 0.25em;
}

.toe-spr__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
}

.toe-spr__change--up   { color: #00c853; }
.toe-spr__change--down { color: #ff1744; }
.toe-spr__change--flat { color: var(--wp--preset--color--tertiary); }

.toe-spr__change-icon {
    font-size: 0.65em;
    margin-right: 0.15em;
}

.toe-spr__change-label {
    color: var(--wp--preset--color--tertiary);
    font-weight: 500;
    margin-left: 0.25em;
}

.toe-spr__sparkline {
    margin-top: var(--wp--preset--spacing--20);
}

.toe-spr__sparkline svg {
    width: 100%;
    height: 28px;
}

/* ── LNG & Gas Trade ─────────────────────────────────────────── */

.toe-lng__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-lng__units {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-left: 0.25em;
}

.toe-lng__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
}

.toe-lng__change--up   { color: #00c853; }
.toe-lng__change--down { color: #ff1744; }
.toe-lng__change--flat { color: var(--wp--preset--color--tertiary); }

.toe-lng__change-icon {
    font-size: 0.65em;
    margin-right: 0.15em;
}

.toe-lng__change-label {
    color: var(--wp--preset--color--tertiary);
    font-weight: 500;
    margin-left: 0.25em;
}

/* ── International Energy ─────────────────────────────────────── */

.toe-intl__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-intl__units {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-left: 0.25em;
}

.toe-intl__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
}

.toe-intl__change--up   { color: #00c853; }
.toe-intl__change--down { color: #ff1744; }
.toe-intl__change--flat { color: var(--wp--preset--color--tertiary); }

.toe-intl__change-icon {
    font-size: 0.65em;
    margin-right: 0.15em;
}

.toe-intl__change-label {
    color: var(--wp--preset--color--tertiary);
    font-weight: 500;
    margin-left: 0.25em;
}

/* ── Subsection Title (used in International, LNG, etc.) ─────── */

.toe-energy-dashboard__subsection-title {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--tertiary);
    margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--20);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.toe-energy-dashboard__subsection-title:first-of-type {
    margin-top: 0;
}

/* ── WPSR Inventory ──────────────────────────────────────────── */

.toe-wpsr__row-header {
    margin-block: var(--wp--preset--spacing--30) 0;
}

.toe-wpsr__row-label {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--tertiary);
    margin: 0;
}

.toe-wpsr__schedule {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: auto;
}

.toe-wpsr__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-wpsr__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-wpsr__units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

.toe-wpsr__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.toe-wpsr__change--up {
    color: #00c853;
}

.toe-wpsr__change--down {
    color: #ff1744;
}

.toe-wpsr__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-wpsr__change-icon {
    font-size: 0.6em;
    vertical-align: middle;
    margin-inline-end: 0.2em;
}

.toe-wpsr__change-pct {
    color: var(--wp--preset--color--tertiary);
    font-weight: 500;
    margin-inline-start: 0.3em;
}

.toe-wpsr__avg-badge {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-wpsr__avg--normal {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

.toe-wpsr__avg--surplus {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.toe-wpsr__avg--tight {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
}

.toe-wpsr__sparkline {
    margin: var(--wp--preset--spacing--20) 0;
    line-height: 0;
}

/* ── Days of Supply ─────────────────────────────────────────── */

.toe-dos__schedule {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: auto;
}

.toe-dos__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-dos__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-dos__units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

.toe-dos__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.toe-dos__change--up {
    color: #00c853;
}

.toe-dos__change--down {
    color: #ff1744;
}

.toe-dos__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-dos__change-icon {
    font-size: 0.6em;
    vertical-align: middle;
    margin-inline-end: 0.2em;
}

.toe-dos__range-badge {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-dos__health--normal {
    color: #00c853;
}

.toe-dos__range-badge.toe-dos__health--normal {
    background: rgba(0, 200, 83, 0.15);
}

.toe-dos__health--surplus {
    color: #ffab00;
}

.toe-dos__range-badge.toe-dos__health--surplus {
    background: rgba(255, 171, 0, 0.15);
}

.toe-dos__health--tight {
    color: #ff1744;
}

.toe-dos__range-badge.toe-dos__health--tight {
    background: rgba(255, 23, 68, 0.15);
}

.toe-dos__normal-range {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin: var(--wp--preset--spacing--20) 0 0;
}

.toe-dos__sparkline {
    margin: var(--wp--preset--spacing--20) 0;
    line-height: 0;
}

/* ── Imports & Exports ──────────────────────────────────────── */

.toe-impexp__kpi-card {
    position: relative;
}

.toe-impexp__kpi-card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-impexp__kpi-value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #e2e8f0;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-impexp__kpi-units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

.toe-impexp__net--importer {
    color: #ff6d00;
}

.toe-impexp__net--exporter {
    color: #00c853;
}

.toe-impexp__net-badge {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-impexp__net-badge--importer {
    background: rgba(255, 109, 0, 0.15);
    color: #ff6d00;
}

.toe-impexp__net-badge--exporter {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

.toe-impexp__wow {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.toe-impexp__wow--up {
    color: #00c853;
}

.toe-impexp__wow--down {
    color: #ff1744;
}

.toe-impexp__period-tag {
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: 0.5em;
}

/* Side-by-side columns for imports & exports */
.toe-impexp__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
    margin-block-start: var(--wp--preset--spacing--30);
}

@media (max-width: 768px) {
    .toe-impexp__columns {
        grid-template-columns: 1fr;
    }
}

.toe-impexp__column {
    min-width: 0;
}

.toe-impexp__column-title {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--tertiary);
    margin: 0 0 var(--wp--preset--spacing--20) 0;
}

.toe-impexp__country-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.toe-impexp__country-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr 3.5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.toe-impexp__country-row:last-child {
    border-bottom: none;
}

@media (max-width: 600px) {
    .toe-impexp__country-row {
        grid-template-columns: 5.5rem 1fr 3rem;
    }
}

.toe-impexp__country-name {
    font-family: Manrope, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.toe-impexp__opec-tag {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(240, 165, 0, 0.2);
    color: #f0a500;
    padding: 0.05rem 0.2rem;
    border-radius: 3px;
    margin-inline-start: 0.2em;
    vertical-align: middle;
}

.toe-impexp__country-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.toe-impexp__country-bar {
    height: 100%;
    background: #00b4d8;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.toe-impexp__country-bar--export {
    background: #f0a500;
}

.toe-impexp__country--opec .toe-impexp__country-bar {
    background: #ff6d00;
}

.toe-impexp__country-value {
    font-family: Manrope, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    text-align: right;
    line-height: 1.2;
}

/* ── Refinery Utilization ───────────────────────────────────── */

.toe-refinery__row-header {
    margin-block: var(--wp--preset--spacing--30) 0;
}

.toe-refinery__row-label {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--tertiary);
    margin: 0;
}

.toe-refinery__schedule {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: auto;
}

.toe-refinery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 600px) {
    .toe-refinery__grid {
        grid-template-columns: 1fr !important;
    }
}

.toe-refinery__card {
    position: relative;
}

.toe-refinery__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-refinery__value {
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
    letter-spacing: -0.02em;
    margin: var(--wp--preset--spacing--20) 0;
}

.toe-refinery__units {
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

.toe-refinery__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.toe-refinery__change--up {
    color: #00c853;
}

.toe-refinery__change--down {
    color: #ff1744;
}

.toe-refinery__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-refinery__change-icon {
    font-size: 0.6em;
    vertical-align: middle;
    margin-inline-end: 0.2em;
}

.toe-refinery__change-pct {
    color: var(--wp--preset--color--tertiary);
    font-weight: 500;
    margin-inline-start: 0.3em;
}

.toe-refinery__avg-badge {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-refinery__avg--normal {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

.toe-refinery__avg--surplus {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.toe-refinery__avg--tight {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
}

.toe-refinery__sparkline {
    margin: var(--wp--preset--spacing--20) 0;
    line-height: 0;
}

.toe-refinery__turnaround-badge {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
    margin-inline-start: 0.5em;
    vertical-align: middle;
}

/* PADD utilization bars */
.toe-refinery__padd-bars {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--30);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5rem;
    margin-block-start: var(--wp--preset--spacing--30);
}

.toe-refinery__padd-bar {
    display: grid;
    grid-template-columns: 10rem 1fr 3rem;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
}

@media (max-width: 600px) {
    .toe-refinery__padd-bar {
        grid-template-columns: 7rem 1fr 3rem;
    }
}

.toe-refinery__padd-label {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: var(--wp--preset--color--secondary);
}

.toe-refinery__padd-track {
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

.toe-refinery__padd-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s ease;
}

.toe-refinery__padd-fill--high {
    background: #00c853;
}

.toe-refinery__padd-fill--normal {
    background: var(--wp--preset--color--primary);
}

.toe-refinery__padd-fill--low {
    background: #ff1744;
}

.toe-refinery__padd-value {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-align: right;
}

/* ── STEO Forecasts ─────────────────────────────────────────── */

.toe-steo__schedule {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: auto;
}

.toe-steo__chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
}

@media (max-width: 768px) {
    .toe-steo__chart-grid {
        grid-template-columns: 1fr;
    }
}

.toe-steo__chart-card {
    background: #1a1d24;
    border: 1px solid #2a2d34;
    border-radius: 0.5rem;
    padding: var(--wp--preset--spacing--40);
}

.toe-steo__chart-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--wp--preset--spacing--30);
}

.toe-steo__chart-title {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f7fafc;
    margin: 0;
}

.toe-steo__current-price {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    color: #e2e8f0;
}

.toe-steo__canvas-wrap {
    position: relative;
    height: 160px;
}

/* ── COT Positioning ────────────────────────────────────────── */

.toe-cot__schedule {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: auto;
}

.toe-cot__card .toe-energy-dashboard__card-title {
    flex-grow: 0;
}

.toe-cot__net-label {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--tertiary);
    margin: var(--wp--preset--spacing--20) 0 0;
}

.toe-cot__net-value {
    font-family: Orbitron, sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0.15rem 0 var(--wp--preset--spacing--20);
}

.toe-cot__net-value--long {
    color: #00c853;
}

.toe-cot__net-value--short {
    color: #ff1744;
}

.toe-cot__net-units {
    font-family: Manrope, sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    color: var(--wp--preset--color--tertiary);
}

.toe-cot__change {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--20);
    line-height: 1.3;
}

.toe-cot__change--up {
    color: #00c853;
}

.toe-cot__change--down {
    color: #ff1744;
}

.toe-cot__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-cot__change-icon {
    font-size: 0.6em;
    vertical-align: middle;
    margin-inline-end: 0.2em;
}

.toe-cot__bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.toe-cot__bar-long {
    background: #00c853;
    transition: width 0.3s ease;
}

.toe-cot__bar-short {
    background: #ff1744;
    transition: width 0.3s ease;
}

.toe-cot__bar-legend {
    display: flex;
    justify-content: space-between;
    font-family: Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--20);
}

.toe-cot__bar-legend-long {
    color: #00c853;
}

.toe-cot__bar-legend-short {
    color: #ff1744;
}

.toe-cot__oi {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    color: var(--wp--preset--color--tertiary);
    margin: 0 0 var(--wp--preset--spacing--20);
}

.toe-cot__sentiment {
    display: inline-block;
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.3;
    width: fit-content;
}

.toe-cot__sentiment--bullish {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
}

.toe-cot__sentiment--neutral {
    background: rgba(255, 171, 0, 0.15);
    color: #ffab00;
}

.toe-cot__sentiment--bearish {
    background: rgba(255, 23, 68, 0.15);
    color: #ff1744;
}

.toe-cot__sparkline {
    margin: var(--wp--preset--spacing--20) 0;
    line-height: 0;
}

/* ── News Feed ──────────────────────────────────────────────── */

.toe-news-feed__card .toe-energy-dashboard__card-byline {
    margin-top: auto !important;
}

.toe-news-feed__headline {
    color: inherit;
    text-decoration: none;
    display: inline;
    margin: 0 !important;
    padding: 0 !important;
}

.toe-news-feed__headline:hover,
.toe-news-feed__headline:focus-visible {
    color: var(--wp--preset--color--primary);
}

/* ── Dark theme (Bloomberg terminal) ────────────────────────── */

.toe-energy-dashboard[data-scheme="dark"] {
    background: #111318;
    color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__section-header {
    border-bottom: 2px solid #f0a500;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__section-label {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card {
    background: #1a1d24;
    border: 1px solid #2a2d34;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    border-radius: 4px;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-oil-prices__card {
    border-top: 2px solid #f0a500;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spot-prices__card {
    border-top: 2px solid #00b4d8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spot-prices__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spot-prices__card .toe-oil-prices__currency {
    color: #f0a500;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spot-prices__card .toe-oil-prices__value {
    color: #f0a500;
}
/* Spreads — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__card {
    border-top: 2px solid #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__value {
    color: #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__currency {
    color: #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__change--positive {
    color: #00c853;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__change--positive .toe-spreads__currency {
    color: #00c853;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__change--negative {
    color: #ff1744;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spreads__change--negative .toe-spreads__currency {
    color: #ff1744;
}
/* WPSR — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-wpsr__card {
    border-top: 2px solid #2dd4bf;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-wpsr__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-wpsr__value {
    color: #2dd4bf;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-wpsr__units {
    color: #6b7280;
}
/* SPR — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-spr__card {
    border-top: 2px solid #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spr__value {
    color: #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-spr__units {
    color: #6b7280;
}
/* LNG — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-lng__card {
    border-top: 2px solid #38bdf8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-lng__value {
    color: #38bdf8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-lng__units {
    color: #6b7280;
}
/* International — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-intl__value {
    color: #34d399;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-intl__units {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-wpsr__row-label {
    color: #9ca3af;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-wpsr__schedule {
    color: #6b7280;
}
/* Refinery — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__card {
    border-top: 2px solid #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__value {
    color: #a78bfa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__units {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__row-label {
    color: #9ca3af;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__schedule {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__padd-label {
    color: #9ca3af;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__padd-track {
    background: rgba(255, 255, 255, 0.08);
}
.toe-energy-dashboard[data-scheme="dark"] .toe-refinery__padd-value {
    color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-news-feed__card {
    border-top: 2px solid #00b4d8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card-source {
    color: #00b4d8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-oil-prices__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-news-feed__card .toe-energy-dashboard__card-title {
    color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card-title a {
    color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card-title a:hover,
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card-title a:focus-visible {
    color: #00b4d8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card-byline,
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__meta,
.toe-energy-dashboard[data-scheme="dark"] .toe-energy-dashboard__card-excerpt {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-oil-prices__value {
    color: #f0a500;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-oil-prices__currency {
    color: #f0a500;
    font-size: 1rem;
}
/* Futures — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__commodity-label {
    color: #f0a500;
    background: #0d1119;
    border-right: 1px solid #1e2330;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__row {
    border-bottom-color: #1e2330;
    background: #1a1d24;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__cell--front {
    border-left-color: #f0a500;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__month {
    color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__price {
    color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__cell--front .toe-futures__price {
    color: #f0a500;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__unit {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__through {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__attr {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__row::after {
    background: linear-gradient(to left, #1a1d24, transparent);
}
.toe-energy-dashboard[data-scheme="dark"] .toe-futures__scroll {
    scrollbar-color: #2a2d34 transparent;
}

/* Map — dark */
.toe-energy-dashboard[data-scheme="dark"] .toe-map__canvas {
    border: 1px solid #2a2d34;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-map__attr {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-map__legend {
    color: #6b7280;
}

.toe-energy-dashboard[data-scheme="dark"] .toe-market-indicators__card {
    border-top: 2px solid #34d399;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-market-indicators__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-market-indicators__value {
    color: #34d399;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-market-indicators__value--up {
    color: #34d399;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-market-indicators__value--down {
    color: #f87171;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-market-indicators__units {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-drilling__card {
    border-top: 2px solid #fb923c;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-drilling__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-drilling__value {
    color: #fb923c;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-drilling__units {
    color: #6b7280;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-storage__card {
    border-top: 2px solid #60a5fa;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-storage__card .toe-energy-dashboard__card-title {
    color: #ffffff;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-storage__value {
    color: #60a5fa;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-storage__units {
    color: #6b7280;
}

.toe-energy-dashboard[data-scheme="dark"] .toe-drilling__change--flat,
.toe-energy-dashboard[data-scheme="dark"] .toe-storage__change--flat,
.toe-energy-dashboard[data-scheme="dark"] .toe-drilling__change-label,
.toe-energy-dashboard[data-scheme="dark"] .toe-storage__change-label {
    color: #6b7280;
}

/* ── Light theme ─────────────────────────────────────────────── */

.toe-energy-dashboard[data-scheme="light"] {
    background: var(--wp--preset--color--base, #ffffff);
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-header {
    border-bottom: 2px solid var(--wp--preset--color--primary, #296DEB);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__section-label {
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__subsection-title {
    color: var(--wp--preset--color--secondary, #2e2e2e);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 6px;
}
/* Ticker — light */
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-section {
    background: var(--wp--preset--color--base, #ffffff);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-row {
    border-bottom-color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-label {
    background: #f1f5f9;
    border-right-color: #e2e8f0;
    color: #64748b;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-scroll::before {
    background: linear-gradient(to right, #f8fafc, transparent);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-scroll::after {
    background: linear-gradient(to left, #f8fafc, transparent);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-name {
    color: #1e40af;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-price {
    color: #1a1a1a;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-news-source {
    color: #b45309;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-news-title {
    color: #334155;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__ticker-news-item {
    border-right-color: #e2e8f0;
}
/* Spot Prices — light */
.toe-energy-dashboard[data-scheme="light"] .toe-spot-prices__card {
    border-top: 2px solid #0284c7;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spot-prices__card .toe-oil-prices__value {
    color: #0369a1;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spot-prices__card .toe-oil-prices__currency {
    color: #0369a1;
}
/* Oil Prices — light */
.toe-energy-dashboard[data-scheme="light"] .toe-oil-prices__card {
    border-top: 2px solid #d97706;
}
.toe-energy-dashboard[data-scheme="light"] .toe-oil-prices__value {
    color: #b45309;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="light"] .toe-oil-prices__currency {
    color: #b45309;
    font-size: 1rem;
}
/* Spreads — light */
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__card {
    border-top: 2px solid #7c3aed;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__value {
    color: #6d28d9;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__currency {
    color: #6d28d9;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__change--positive {
    color: #16a34a;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__change--positive .toe-spreads__currency {
    color: #16a34a;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__change--negative {
    color: #dc2626;
}
.toe-energy-dashboard[data-scheme="light"] .toe-spreads__change--negative .toe-spreads__currency {
    color: #dc2626;
}
/* Futures — light */
.toe-energy-dashboard[data-scheme="light"] .toe-futures__commodity-label {
    color: #1e40af;
    background: #f1f5f9;
    border-right: 1px solid #e2e8f0;
}
.toe-energy-dashboard[data-scheme="light"] .toe-futures__row {
    border-bottom-color: #e2e8f0;
    background: #ffffff;
}
.toe-energy-dashboard[data-scheme="light"] .toe-futures__cell--front {
    border-left-color: #1e40af;
}
.toe-energy-dashboard[data-scheme="light"] .toe-futures__cell--front .toe-futures__price {
    color: #1e40af;
}
.toe-energy-dashboard[data-scheme="light"] .toe-futures__row::after {
    background: linear-gradient(to left, #ffffff, transparent);
}
.toe-energy-dashboard[data-scheme="light"] .toe-futures__scroll {
    scrollbar-color: #cbd5e1 transparent;
}
/* Market Indicators — light */
.toe-energy-dashboard[data-scheme="light"] .toe-market-indicators__card {
    border-top: 2px solid #059669;
}
.toe-energy-dashboard[data-scheme="light"] .toe-market-indicators__value {
    color: #047857;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="light"] .toe-market-indicators__value--up {
    color: #16a34a;
}
.toe-energy-dashboard[data-scheme="light"] .toe-market-indicators__value--down {
    color: #dc2626;
}
/* Drilling — light */
.toe-energy-dashboard[data-scheme="light"] .toe-drilling__card {
    border-top: 2px solid #ea580c;
}
.toe-energy-dashboard[data-scheme="light"] .toe-drilling__value {
    color: #c2410c;
    font-size: 1.5rem;
}
/* Storage — light */
.toe-energy-dashboard[data-scheme="light"] .toe-storage__card {
    border-top: 2px solid #2563eb;
}
.toe-energy-dashboard[data-scheme="light"] .toe-storage__value {
    color: #1d4ed8;
    font-size: 1.5rem;
}
/* WPSR — light */
.toe-energy-dashboard[data-scheme="light"] .toe-wpsr__card {
    border-top: 2px solid #0d9488;
}
.toe-energy-dashboard[data-scheme="light"] .toe-wpsr__value {
    color: #0f766e;
    font-size: 1.5rem;
}
/* Refinery — light */
.toe-energy-dashboard[data-scheme="light"] .toe-refinery__card {
    border-top: 2px solid #7c3aed;
}
.toe-energy-dashboard[data-scheme="light"] .toe-refinery__value {
    color: #6d28d9;
    font-size: 1.5rem;
}
.toe-energy-dashboard[data-scheme="light"] .toe-refinery__padd-track {
    background: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="light"] .toe-refinery__padd-bars {
    background: #f8fafc;
}
/* News — light */
.toe-energy-dashboard[data-scheme="light"] .toe-news-feed__card {
    border-top: 2px solid #0284c7;
}
/* Imports/Exports — light */
.toe-energy-dashboard[data-scheme="light"] .toe-impexp__kpi-value {
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
.toe-energy-dashboard[data-scheme="light"] .toe-impexp__country-name {
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
.toe-energy-dashboard[data-scheme="light"] .toe-impexp__country-value {
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
.toe-energy-dashboard[data-scheme="light"] .toe-impexp__country-bar-wrap {
    background: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="light"] .toe-impexp__country-row {
    border-bottom-color: #f1f5f9;
}
.toe-energy-dashboard[data-scheme="light"] .toe-impexp__columns {
    gap: var(--wp--preset--spacing--50);
}
/* Card sources and bylines — light */
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__card-source {
    color: var(--wp--preset--color--primary, #296DEB);
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__card-title a:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__card-title a:focus-visible {
    color: var(--wp--preset--color--primary, #296DEB);
}
/* Map — light */
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas {
    border: 1px solid #cbd5e1;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__tooltip,
.toe-energy-dashboard[data-scheme="light"] .toe-map__tooltip {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__tooltip strong,
.toe-energy-dashboard[data-scheme="light"] .toe-map__tooltip strong {
    color: #1e40af;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-tooltip.toe-map__tooltip::before,
.toe-energy-dashboard[data-scheme="light"] .leaflet-tooltip.toe-map__tooltip::before {
    border-top-color: #ffffff;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup .leaflet-popup-content-wrapper,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup .leaflet-popup-content-wrapper {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup .leaflet-popup-tip,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup .leaflet-popup-tip {
    background: #ffffff;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup .leaflet-popup-close-button,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup .leaflet-popup-close-button {
    color: #64748b;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup .leaflet-popup-close-button:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup .leaflet-popup-close-button:hover {
    color: #1a1a1a;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup-title,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup-title {
    color: #1e40af;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup-label,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup-label {
    color: #64748b;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup-value,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup-value {
    color: #1a1a1a;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__popup-actions,
.toe-energy-dashboard[data-scheme="light"] .toe-map__popup-actions {
    border-top-color: #e2e8f0;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-layers,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-layers {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-layers-separator,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-layers-separator {
    border-top-color: #e2e8f0;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-layers label,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-layers label {
    color: #334155;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-zoom a,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-zoom a {
    background: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-zoom a:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-zoom a:hover {
    background: #f1f5f9;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-attribution,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.85);
    color: #64748b;
}
.toe-fullscreen-map[data-scheme="light"] .leaflet-control-attribution a,
.toe-energy-dashboard[data-scheme="light"] .toe-map__canvas .leaflet-control-attribution a {
    color: #64748b;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-popout__btn,
.toe-energy-dashboard[data-scheme="light"] .toe-map-popout__btn {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-popout__btn:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map-popout__btn:hover {
    background: #f1f5f9 !important;
    color: #1e40af !important;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__btn,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__btn {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__btn:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__btn:hover {
    background: #f1f5f9 !important;
    color: #1e40af !important;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__menu,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__menu {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__heading,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__heading {
    color: #64748b;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__menu::before,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__menu::before {
    color: #1e40af;
    border-bottom-color: #e2e8f0;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__item,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__item,
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__item:link,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__item:link,
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__item:visited,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__item:visited,
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__item:active,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__item:active {
    color: #334155 !important;
}
.toe-fullscreen-map[data-scheme="light"] .toe-map-export__item:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map-export__item:hover {
    background: #f1f5f9 !important;
    color: #1e40af !important;
}
/* STEO charts — light */
.toe-energy-dashboard[data-scheme="light"] .toe-steo__chart-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.toe-energy-dashboard[data-scheme="light"] .toe-steo__chart-title {
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
.toe-energy-dashboard[data-scheme="light"] .toe-steo__current-price {
    color: var(--wp--preset--color--contrast, #1a1a1a);
}
/* Stale/error cards — light */
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__card--stale {
    border-color: #d97706;
}
/* Skeleton loading — light */
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__skeleton-line {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 800px 100%;
}
.toe-energy-dashboard[data-scheme="light"] .toe-energy-dashboard__skeleton-block {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 800px 100%;
}
/* Tooltip — light (appended to body, outside dashboard wrapper) */
.toe-spread-tooltip.toe-tt--light {
    background: #ffffff;
    border-color: #296DEB;
    color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.toe-spread-tooltip.toe-tt--light .toe-tt-title {
    color: #296DEB;
    border-bottom-color: rgba(41, 109, 235, 0.3);
}
.toe-spread-tooltip.toe-tt--light .toe-tt-label {
    color: #296DEB;
}
.toe-spread-tooltip.toe-tt--light .toe-tt-formula {
    background: #f1f5f9;
    color: #1e40af;
}
.toe-spread-tooltip.toe-tt--light .toe-tt-text {
    color: #334155;
}
.toe-spread-tooltip.toe-tt--light .toe-tt-why {
    border-top-color: #e2e8f0;
    color: #64748b;
}
.toe-spread-tooltip.toe-tt--light .toe-tt-color-row {
    color: #334155;
}
.toe-spread-tooltip.toe-tt--light::before {
    background: #ffffff;
    border-right-color: #296DEB;
    border-bottom-color: #296DEB;
}
.toe-spread-tooltip.toe-tt--light.flip-up::before {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #296DEB;
    border-top-color: #296DEB;
}
/* Info button — light */
.toe-energy-dashboard[data-scheme="light"] .toe-spread-info-btn,
.toe-energy-dashboard[data-scheme="light"] .toe-info-btn {
    color: var(--wp--preset--color--primary, #296DEB);
}

/* ── Auto scheme — dark overrides follow OS preference ───────── */

@media (prefers-color-scheme: dark) {
    .toe-energy-dashboard[data-scheme="auto"] { background: #111318; color: #e2e8f0; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__section-header { border-bottom: 2px solid #f0a500; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__section-label { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card { background: #1a1d24; border: 1px solid #2a2d34; box-shadow: 0 2px 12px rgba(0,0,0,0.5); border-radius: 4px; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-oil-prices__card { border-top: 2px solid #f0a500; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-market-indicators__card { border-top: 2px solid #34d399; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spot-prices__card { border-top: 2px solid #00b4d8; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spot-prices__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spot-prices__card .toe-oil-prices__currency { color: #f0a500; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spot-prices__card .toe-oil-prices__value { color: #f0a500; }
    /* Spreads — auto dark */
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__card { border-top: 2px solid #a78bfa; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__value { color: #a78bfa; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__currency { color: #a78bfa; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__change--positive { color: #00c853; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__change--positive .toe-spreads__currency { color: #00c853; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__change--negative { color: #ff1744; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-spreads__change--negative .toe-spreads__currency { color: #ff1744; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-news-feed__card { border-top: 2px solid #00b4d8; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card-source { color: #00b4d8; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-oil-prices__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-market-indicators__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-news-feed__card .toe-energy-dashboard__card-title { color: #e2e8f0; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card-title a { color: #e2e8f0; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card-title a:hover,
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card-title a:focus-visible { color: #00b4d8; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card-byline,
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__meta,
    .toe-energy-dashboard[data-scheme="auto"] .toe-energy-dashboard__card-excerpt { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-oil-prices__value { color: #f0a500; font-size: 1.5rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-oil-prices__currency { color: #f0a500; font-size: 1rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-market-indicators__value { color: #34d399; font-size: 1.5rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-market-indicators__value--up { color: #34d399; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-market-indicators__value--down { color: #f87171; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-market-indicators__units { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-drilling__card { border-top: 2px solid #fb923c; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-drilling__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-drilling__value { color: #fb923c; font-size: 1.5rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-drilling__units { color: #6b7280; }
    /* WPSR — auto dark */
    .toe-energy-dashboard[data-scheme="auto"] .toe-wpsr__card { border-top: 2px solid #2dd4bf; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-wpsr__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-wpsr__value { color: #2dd4bf; font-size: 1.5rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-wpsr__units { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-wpsr__row-label { color: #9ca3af; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-wpsr__schedule { color: #6b7280; }
    /* Refinery — auto dark */
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__card { border-top: 2px solid #a78bfa; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__value { color: #a78bfa; font-size: 1.5rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__units { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__row-label { color: #9ca3af; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__schedule { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__padd-label { color: #9ca3af; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-refinery__padd-value { color: #e2e8f0; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-storage__card { border-top: 2px solid #60a5fa; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-storage__card .toe-energy-dashboard__card-title { color: #ffffff; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-storage__value { color: #60a5fa; font-size: 1.5rem; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-storage__units { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-drilling__change--flat,
    .toe-energy-dashboard[data-scheme="auto"] .toe-storage__change--flat,
    .toe-energy-dashboard[data-scheme="auto"] .toe-drilling__change-label,
    .toe-energy-dashboard[data-scheme="auto"] .toe-storage__change-label { color: #6b7280; }
    /* Map — auto dark */
    .toe-energy-dashboard[data-scheme="auto"] .toe-map__canvas { border: 1px solid #2a2d34; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-map__attr { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-map__legend { color: #6b7280; }
    /* Futures — auto dark */
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__commodity-label { color: #f0a500; background: #0d1119; border-right: 1px solid #1e2330; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__row { border-bottom-color: #1e2330; background: #1a1d24; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__cell--front { border-left-color: #f0a500; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__month { color: #e2e8f0; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__price { color: #e2e8f0; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__cell--front .toe-futures__price { color: #f0a500; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__unit { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__through { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__attr { color: #6b7280; }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__row::after { background: linear-gradient(to left, #1a1d24, transparent); }
    .toe-energy-dashboard[data-scheme="auto"] .toe-futures__scroll { scrollbar-color: #2a2d34 transparent; }
}

/* ── Loading overlay ───────────────────────────────────────────────────── */

.toe-energy-dashboard__loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--contrast, #000000);
    transition: opacity 0.6s ease;
}

.toe-energy-dashboard__loading-overlay--hidden {
    opacity: 0;
    pointer-events: none;
}

.toe-energy-dashboard__loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--40, 1rem);
    text-align: center;
    padding: var(--wp--preset--spacing--40, 1rem);
}

.toe-energy-dashboard__loading-logo {
    font-family: var(--wp--preset--font-family--orbitron, 'Orbitron', sans-serif);
    font-size: var(--wp--preset--font-size--x-large, 1.5rem);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    animation: toe-loading-pulse 2s ease-in-out infinite;
}

@keyframes toe-loading-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.toe-energy-dashboard__loading-message {
    font-family: var(--wp--preset--font-family--manrope, 'Manrope', sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.9rem);
    color: var(--wp--preset--color--tertiary, #757575);
    min-height: 1.4em;
    transition: opacity 0.3s ease;
}

.toe-energy-dashboard__loading-message--fade {
    opacity: 0;
}

.toe-energy-dashboard__loading-bar {
    width: min(280px, 60vw);
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.toe-energy-dashboard__loading-bar-fill {
    width: 40%;
    height: 100%;
    background: var(--wp--preset--color--primary, #296DEB);
    border-radius: 2px;
    animation: toe-loading-slide 1.5s ease-in-out infinite;
}

@keyframes toe-loading-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ── Lazy section skeletons ─────────────────────────────────────────────── */

@keyframes toe-skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.toe-energy-dashboard__section--lazy .toe-energy-dashboard__skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--wp--preset--spacing--40, 1rem);
}

.toe-energy-dashboard__skeleton-line {
    border-radius: 4px;
    background: linear-gradient(90deg, #1a1d24 25%, #2a2d34 50%, #1a1d24 75%);
    background-size: 800px 100%;
    animation: toe-skeleton-shimmer 1.5s ease-in-out infinite;
}

.toe-energy-dashboard__skeleton-line--tag {
    width: 40%;
    height: 0.75rem;
}

.toe-energy-dashboard__skeleton-line--title {
    width: 80%;
    height: 1rem;
}

.toe-energy-dashboard__skeleton-line--value {
    width: 50%;
    height: 1.5rem;
}

.toe-energy-dashboard__skeleton-block {
    height: 400px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1a1d24 25%, #2a2d34 50%, #1a1d24 75%);
    background-size: 800px 100%;
    animation: toe-skeleton-shimmer 1.5s ease-in-out infinite;
}

.toe-energy-dashboard__section--loading {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.toe-energy-dashboard__section--error .toe-energy-dashboard__skeleton-card,
.toe-energy-dashboard__section--error .toe-energy-dashboard__skeleton-block {
    animation: none;
    background: #1a1d24;
    opacity: 0.4;
}

/* ── Sidebar News ─────────────────────────────────────────────── */

.toe-sidebar-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.toe-sidebar-news__item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--wp--preset--spacing--30) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.toe-sidebar-news__item:last-child {
    border-bottom: none;
}

.toe-sidebar-news__source {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--primary);
}

.toe-sidebar-news__title {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    line-height: 1.35;
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.toe-sidebar-news__title:hover {
    color: var(--wp--preset--color--primary);
}

.toe-sidebar-news__date {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--tertiary);
}

/* Sidebar News — dark */
.toe-sidebar-news[data-scheme="dark"] .toe-sidebar-news__item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.toe-sidebar-news[data-scheme="dark"] .toe-sidebar-news__source {
    color: #00b4d8;
}

.toe-sidebar-news[data-scheme="dark"] .toe-sidebar-news__title {
    color: #e2e8f0;
}

.toe-sidebar-news[data-scheme="dark"] .toe-sidebar-news__title:hover {
    color: #00b4d8;
}

/* ── Sidebar Price Charts ─────────────────────────────────────── */

.toe-sidebar-charts__list {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.toe-sidebar-charts__range-selector {
    display: flex;
    gap: 0.25rem;
}

.toe-sidebar-charts__range-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--wp--preset--color--tertiary, #a0aec0);
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toe-sidebar-charts__range-btn:hover {
    border-color: var(--wp--preset--color--primary, #296DEB);
    color: var(--wp--preset--color--primary, #296DEB);
}

/* Fallbacks matter: without the theme's palette variable the fill was dropped
   and the selected range showed as white text on the page background. */
.toe-sidebar-charts__range-btn--active,
.toe-sidebar-charts__range-btn--active:hover {
    background: var(--wp--preset--color--primary, #296DEB);
    border-color: var(--wp--preset--color--primary, #296DEB);
    color: #fff;
}

.toe-sidebar-charts[data-scheme="light"] .toe-sidebar-charts__range-btn {
    border-color: rgba(11, 18, 32, 0.18);
    color: #4a5568;
}

.toe-sidebar-charts[data-scheme="light"] .toe-sidebar-charts__range-btn:hover {
    border-color: var(--wp--preset--color--primary, #296DEB);
    color: var(--wp--preset--color--primary, #296DEB);
}

.toe-sidebar-charts[data-scheme="light"] .toe-sidebar-charts__range-btn--active,
.toe-sidebar-charts[data-scheme="light"] .toe-sidebar-charts__range-btn--active:hover {
    border-color: var(--wp--preset--color--primary, #296DEB);
    color: #fff;
}

.toe-sidebar-charts__change-label {
    font-weight: 400;
    color: var(--wp--preset--color--tertiary);
    margin-inline-start: 0.3em;
}

.toe-sidebar-charts__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toe-sidebar-charts__header {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--30);
    flex-wrap: wrap;
}

.toe-sidebar-charts__name {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--tertiary);
}

.toe-sidebar-charts__price {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 800;
    line-height: 1;
    color: var(--wp--preset--color--contrast);
}

.toe-sidebar-charts__currency {
    font-size: 0.7em;
    font-weight: 600;
    vertical-align: super;
    margin-inline-end: 0.05em;
    color: var(--wp--preset--color--primary);
}

.toe-sidebar-charts__change {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    margin: 0;
}

.toe-sidebar-charts__change--up {
    color: #00c853;
}

.toe-sidebar-charts__change--down {
    color: #ff1744;
}

.toe-sidebar-charts__change--flat {
    color: var(--wp--preset--color--tertiary);
}

.toe-sidebar-charts__chart {
    margin-top: 0.25rem;
}

.toe-sidebar-charts__chart svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Sidebar Charts — dark */
.toe-sidebar-charts[data-scheme="dark"] .toe-sidebar-charts__price {
    color: #f0a500;
}

.toe-sidebar-charts[data-scheme="dark"] .toe-sidebar-charts__currency {
    color: #00b4d8;
}

/* ═══════════════════════════════════════════════════════════════════════
   Energy Charts Page — [toe_energy_charts] shortcode
   ═══════════════════════════════════════════════════════════════════════ */

.toe-charts-page {
    padding: 20px 0;
}

.toe-charts-page__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.5rem 0.95rem;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 3px solid var(--toe-accent);
    border-radius: 8px;
}

.toe-charts-page__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toe-charts-page__title {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
}

.toe-charts-page__back-link {
    color: #aeb4c0;
    font-size: var(--wp--preset--font-size--x-small);
    text-decoration: none;
    transition: color 0.15s;
}

.toe-charts-page__back-link:hover {
    color: #f0a500;
}

/* Tab navigation — inline in the dense header bar */
.toe-chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    margin-inline-start: auto;
}

.toe-chart-tab {
    padding: 0.4rem 0.9rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Manrope', sans-serif;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}

.toe-chart-tab:hover {
    color: #ffffff;
}

.toe-chart-tab.active {
    color: #f0a500;
    border-bottom-color: #f0a500;
}

/* Controls row */
/* Controls = one compact panel holding the series selector + range buttons. */
.toe-charts-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    border-radius: 6px;
}

/* Series selector pills */
.toe-series-pills {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    /* Cap the series selector so a tall list (e.g. the retail tab's price +
       pressure groups) can never push the chart below the fold — it scrolls
       within this panel instead. */
    max-height: 156px;
    overflow-y: auto;
    padding-right: 4px;
}

.toe-series-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    width: 100%;
}

/* Group label is now a click-to-collapse button. */
.toe-series-group__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    color: #aeb4c0;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 auto;
    min-width: 96px;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.toe-series-group__label:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}
.toe-series-group__count {
    opacity: 0.55;
    font-weight: 500;
    margin-left: 2px;
}
.toe-series-group__chevron {
    margin-left: auto;
    transition: transform 0.15s ease;
    opacity: 0.7;
}
.toe-series-group.is-collapsed .toe-series-group__chevron {
    transform: rotate(-90deg);
}

.toe-series-group__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}
.toe-series-group.is-collapsed .toe-series-group__pills {
    display: none;
}

/* Light theme button hover. */
.toe-energy-dashboard[data-scheme="light"] .toe-series-group__label:hover {
    background: #f1f5f9;
    color: #1e40af;
}

.toe-series-pill {
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid #3a3f4a;
    background: #20242d;
    color: #d6dae3;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.toe-series-pill:hover {
    border-color: #f0a500;
    color: #ffffff;
}

.toe-series-pill.active-1 {
    border-color: #f0a500;
    background: rgba(240, 165, 0, 0.12);
    color: #f0a500;
}

.toe-series-pill.active-2 {
    border-color: #00b4d8;
    background: rgba(0, 180, 216, 0.12);
    color: #00b4d8;
}

.toe-series-pill.active-3 {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

/* Range selector */
.toe-range-selector {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.toe-range-btn {
    padding: 3px 8px;
    background: #20242d;
    border: 1px solid #3a3f4a;
    color: #c2c8d2;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.toe-range-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.toe-range-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.toe-range-btn.active {
    background: #f0a500;
    border-color: #f0a500;
    color: #111318;
}

.toe-range-btn:hover:not(.active) {
    border-color: #f0a500;
    color: #f0a500;
}

/* Main chart container */
.toe-main-chart-container {
    background: #1a1d24;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    height: 420px;
}

.toe-main-chart-container canvas {
    transition: opacity 0.2s;
}

.toe-chart-download-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: 1px solid #2a2d35;
    border-radius: 4px;
    color: #5a6272;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
}

.toe-chart-download-btn:hover {
    border-color: #f0a500;
    color: #f0a500;
}

/* Metadata row */
.toe-chart-meta {
    display: flex;
    gap: 24px;
    background: #1a1d24;
    border-radius: 6px;
    padding: 12px 20px;
    margin-bottom: 20px;
    font-size: 13px;
    flex-wrap: wrap;
}

.toe-meta-label {
    color: #5a6272;
    margin-right: 4px;
}

.toe-meta-value {
    color: #c8cdd6;
    font-weight: 600;
}

.toe-meta-value.positive {
    color: #22c55e;
}

.toe-meta-value.negative {
    color: #ef4444;
}

.toe-meta-source {
    margin-left: auto;
    font-size: 11px;
    color: #3a4050;
    font-style: italic;
}

/* Mini chart grid */
.toe-mini-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.toe-mini-chart-card {
    background: #1a1d24;
    border: 1px solid #2a2d35;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.toe-mini-chart-card:hover {
    border-color: #f0a500;
}

.toe-mini-chart-card.active {
    border-color: #f0a500;
}

.toe-mini-chart-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #8a90a0;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.toe-mini-chart-value {
    font-size: 18px;
    font-weight: 700;
    color: #f0a500;
}

.toe-mini-chart-change {
    font-size: 11px;
    margin-bottom: 6px;
}

.toe-mini-chart-change .positive {
    color: #22c55e;
}

.toe-mini-chart-change .negative {
    color: #ef4444;
}

.toe-mini-chart-canvas {
    width: 100%;
    height: 60px;
}

/* Spreads grid (tab 2) */
.toe-spread-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.toe-spread-chart-card {
    background: #1a1d24;
    border: 1px solid #2a2d35;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
    height: 200px;
    position: relative;
}

.toe-spread-chart-card:hover {
    border-color: #f0a500;
}

.toe-spread-chart-card.active {
    border-color: #f0a500;
}

/* Loading state */
.toe-chart-loading {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: #f0a500;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    z-index: 3;
}

.toe-chart-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #2a2d35;
    border-top-color: #f0a500;
    border-radius: 50%;
    animation: toe-chart-spin 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes toe-chart-spin {
    to { transform: rotate(360deg); }
}

/* No data placeholder */
.toe-chart-no-data {
    text-align: center;
    padding: 40px 20px;
    color: #5a6272;
    font-size: 14px;
}

/* ── Charts Page Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .toe-spread-grid {
        grid-template-columns: 1fr;
    }

    .toe-chart-meta {
        gap: 12px;
    }

    .toe-main-chart-container {
        height: 280px;
        padding: 12px;
    }

    .toe-charts-controls {
        flex-direction: column;
    }

    .toe-range-selector {
        width: 100%;
    }

    .toe-range-btn {
        flex: 1;
        text-align: center;
    }

    .toe-chart-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .toe-charts-page__bar {
        align-items: flex-start;
    }
}

/* ── Charts Page — Light Theme ───────────────────────────────────────── */

.toe-energy-dashboard[data-scheme="light"] .toe-charts-page__bar {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: var(--toe-accent);
}

.toe-energy-dashboard[data-scheme="light"] .toe-charts-page__title {
    color: #1a1a1a;
}

.toe-energy-dashboard[data-scheme="light"] .toe-chart-tab {
    color: #475569;
}

.toe-energy-dashboard[data-scheme="light"] .toe-chart-tab.active {
    color: #296DEB;
    border-bottom-color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-series-pill {
    border-color: #e2e8f0;
    background: #ffffff;
    color: #64748b;
}

.toe-energy-dashboard[data-scheme="light"] .toe-series-pill:hover {
    border-color: #296DEB;
    color: #1a1a1a;
}

.toe-energy-dashboard[data-scheme="light"] .toe-series-pill.active-1 {
    border-color: #296DEB;
    background: rgba(41, 109, 235, 0.08);
    color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-series-pill.active-2 {
    border-color: #0891b2;
    background: rgba(8, 145, 178, 0.08);
    color: #0891b2;
}

.toe-energy-dashboard[data-scheme="light"] .toe-series-pill.active-3 {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.toe-energy-dashboard[data-scheme="light"] .toe-series-group__label {
    color: #475569;
}

.toe-energy-dashboard[data-scheme="light"] .toe-range-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

.toe-energy-dashboard[data-scheme="light"] .toe-range-btn.active {
    background: #296DEB;
    border-color: #296DEB;
    color: #ffffff;
}

.toe-energy-dashboard[data-scheme="light"] .toe-range-btn:hover:not(.active) {
    border-color: #296DEB;
    color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-main-chart-container,
.toe-energy-dashboard[data-scheme="light"] .toe-chart-meta,
.toe-energy-dashboard[data-scheme="light"] .toe-mini-chart-card,
.toe-energy-dashboard[data-scheme="light"] .toe-spread-chart-card {
    background: #ffffff;
    border-color: #e2e8f0;
}

.toe-energy-dashboard[data-scheme="light"] .toe-chart-download-btn {
    border-color: #e2e8f0;
    color: #94a3b8;
}

.toe-energy-dashboard[data-scheme="light"] .toe-chart-download-btn:hover {
    border-color: #296DEB;
    color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-meta-label {
    color: #94a3b8;
}

.toe-energy-dashboard[data-scheme="light"] .toe-meta-value {
    color: #1a1a1a;
}

.toe-energy-dashboard[data-scheme="light"] .toe-meta-source {
    color: #94a3b8;
}

.toe-energy-dashboard[data-scheme="light"] .toe-mini-chart-label {
    color: #64748b;
}

.toe-energy-dashboard[data-scheme="light"] .toe-mini-chart-value {
    color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-mini-chart-card:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-spread-chart-card:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-mini-chart-card.active,
.toe-energy-dashboard[data-scheme="light"] .toe-spread-chart-card.active {
    border-color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-chart-loading {
    color: #296DEB;
}

.toe-energy-dashboard[data-scheme="light"] .toe-chart-loading::before {
    border-color: #e2e8f0;
    border-top-color: #296DEB;
}

/* ── Dashboard Customizer Panel ──────────────────────────────────────────── */

.toe-customizer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.toe-customizer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 90vw;
    background: #1a1a2e;
    color: #e0e0e0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
    font-family: 'Manrope', sans-serif;
}

.toe-customizer[data-scheme="light"] {
    background: #fff;
    color: #1d2327;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.toe-customizer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toe-customizer[data-scheme="light"] .toe-customizer__header {
    border-bottom-color: #e2e4e7;
}

.toe-customizer__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.toe-customizer__close {
    background: none;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.toe-customizer__close:hover {
    opacity: 1;
}

.toe-customizer__hint {
    margin: 0;
    padding: 8px 20px 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.toe-customizer[data-scheme="light"] .toe-customizer__hint {
    color: #757575;
}

.toe-customizer__list {
    list-style: none;
    margin: 0;
    padding: 12px;
    flex: 1;
    overflow-y: auto;
}

.toe-customizer__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: grab;
    transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.toe-customizer[data-scheme="light"] .toe-customizer__item {
    background: #f8f9fa;
    border-color: #e2e4e7;
}

.toe-customizer__item:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.toe-customizer[data-scheme="light"] .toe-customizer__item:hover {
    border-color: #c3c4c7;
}

.toe-customizer__item--disabled {
    opacity: 0.4;
}

.toe-customizer__item.ui-sortable-helper {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border-color: #296DEB;
    cursor: grabbing;
}

.toe-customizer__placeholder {
    visibility: visible !important;
    background: rgba(41, 109, 235, 0.1) !important;
    border: 2px dashed #296DEB !important;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 6px;
}

.toe-customizer__handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    cursor: grab;
    flex-shrink: 0;
    padding: 4px;
    min-width: 24px;
    min-height: 24px;
}

.toe-customizer__handle:hover {
    color: rgba(255, 255, 255, 0.8);
}

.toe-customizer[data-scheme="light"] .toe-customizer__handle {
    color: #8c8f94;
}

.toe-customizer[data-scheme="light"] .toe-customizer__handle:hover {
    color: #50575e;
}

.toe-customizer__handle-icon {
    display: block;
}

.toe-customizer__label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.toe-customizer__label input[type="checkbox"] {
    margin: 0;
    accent-color: #296DEB;
}

.toe-customizer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.toe-customizer[data-scheme="light"] .toe-customizer__actions {
    border-top-color: #e2e4e7;
}

.toe-customizer__btn {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toe-customizer__btn--save {
    background: #296DEB;
    color: #fff;
    flex: 1;
}

.toe-customizer__btn--save:hover {
    background: #1d5ad4;
}

.toe-customizer__btn--cancel {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.15);
}

.toe-customizer[data-scheme="light"] .toe-customizer__btn--cancel {
    border-color: #c3c4c7;
}

.toe-customizer__btn--cancel:hover {
    background: rgba(255, 255, 255, 0.08);
}

.toe-customizer__btn--reset {
    background: transparent;
    color: #e67e22;
    border: none;
    font-size: 12px;
    width: 100%;
    margin-top: 4px;
}

.toe-customizer__btn--reset:hover {
    color: #f39c12;
}

.toe-customizer[data-scheme="light"] .toe-customizer__btn--reset {
    color: #d63638;
}

.toe-customizer[data-scheme="light"] .toe-customizer__btn--reset:hover {
    color: #a00;
}

/* ── Customizer: view switching ─────────────────────────────────── */

.toe-customizer__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.toe-customizer__view {
    display: none;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.toe-customizer__view--active {
    display: flex;
}

/* ── Customizer: card drill-down ───────────────────────────────── */

.toe-customizer__drill {
    background: none;
    border: none;
    color: var(--wp--preset--color--primary, #296DEB);
    opacity: 0.8;
    cursor: pointer;
    padding: 4px 6px;
    margin-left: auto;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
    line-height: 1;
}

.toe-customizer__drill:hover {
    opacity: 1;
    transform: translateX(2px);
}

.toe-customizer__chevron {
    display: block;
}

.toe-customizer__back {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--wp--preset--color--primary, #296DEB);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 8px;
    transition: opacity 0.15s;
}

.toe-customizer__back:hover {
    opacity: 0.8;
}

.toe-customizer__card-title {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: inherit;
}

.toe-customizer__card-list .toe-customizer__item {
    font-size: 0.85rem;
}

/* Customize button in dashboard header */
.toe-energy-dashboard__customize-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    opacity: 0.6;
    transition: opacity 0.15s;
    cursor: pointer;
    color: inherit;
}

.toe-energy-dashboard__customize-btn:hover {
    opacity: 1;
    background: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Glossary page — [toe_energy_glossary]
   ────────────────────────────────────────────────────────────────────── */

.toe-glossary-page {
    max-width: var(--wp--style--global--wide-size, 1332px);
    margin: 0 auto;
    padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--50, 1.5rem);
}

.toe-glossary-page__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--40, 1rem);
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

.toe-glossary-page__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.toe-glossary-page__title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: var(--wp--preset--font-size--xx-large, 2.25rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
    line-height: 1.15;
}

.toe-glossary-page__lede {
    font-size: var(--wp--preset--font-size--medium, 1.05rem);
    color: var(--wp--preset--color--tertiary, #757575);
    max-width: 60ch;
    margin: 0;
}

.toe-glossary-page__back-link {
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    flex: 0 0 auto;
}

.toe-glossary-page__back-link:hover {
    opacity: 1;
}

/* ── Inline editor (admin-only) ─────────────────────────────────────────── */

.toe-glossary-page__header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.toe-glossary-page__admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(41, 109, 235, 0.12);
    color: #296DEB;
    border: 1px solid rgba(41, 109, 235, 0.4);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.toe-glossary-page__admin-btn:hover {
    background: #296DEB;
    color: #ffffff;
}

.toe-glossary-page--editable .toe-glossary-page__term-head {
    position: relative;
}

.toe-glossary-page__edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    margin-left: auto;
    flex: 0 0 auto;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.toe-glossary-page__edit-btn:hover {
    background: rgba(41, 109, 235, 0.15);
    color: #296DEB;
    border-color: rgba(41, 109, 235, 0.4);
}
.toe-energy-dashboard[data-scheme="light"] .toe-glossary-page__edit-btn {
    color: #94a3b8;
}
.toe-energy-dashboard[data-scheme="light"] .toe-glossary-page__edit-btn:hover {
    color: #1e40af;
    background: #e0e7ff;
    border-color: #93c5fd;
}

/* Modal */
.toe-glossary-modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.toe-glossary-modal {
    width: min(640px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: #0f1722;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.toe-energy-dashboard[data-scheme="light"] ~ .toe-glossary-modal__overlay .toe-glossary-modal,
body:has(.toe-energy-dashboard[data-scheme="light"]) .toe-glossary-modal {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #e2e8f0;
}
.toe-glossary-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.toe-glossary-modal__title {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}
.toe-glossary-modal__close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.7;
}
.toe-glossary-modal__close:hover { opacity: 1; }
.toe-glossary-modal__body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
}
.toe-glossary-modal__footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.toe-glossary-modal__btn {
    padding: 0.5rem 1rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}
.toe-glossary-modal__btn--primary {
    background: #296DEB;
    color: #ffffff;
}
.toe-glossary-modal__btn--primary:hover { background: #1d4ed8; }
.toe-glossary-modal__btn--secondary {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.2);
}
.toe-glossary-modal__btn--secondary:hover { background: rgba(255, 255, 255, 0.06); }
.toe-glossary-modal__btn--danger {
    background: transparent;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
    margin-right: auto; /* Push to left */
}
.toe-glossary-modal__btn--danger:hover { background: #b91c1c; color: #ffffff; }

.toe-glossary-form { display: flex; flex-direction: column; gap: 0.85rem; }
.toe-glossary-form__row { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; }
.toe-glossary-form__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    opacity: 0.75;
}
.toe-glossary-form input[type="text"],
.toe-glossary-form select,
.toe-glossary-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: inherit;
}
/* Native <option> dropdowns can't inherit the modal's dark theme — the OS
   widget renders with a white background, so force a readable text color. */
.toe-glossary-form select option {
    color: #1a1a1a;
    background: #ffffff;
}
.toe-glossary-form textarea { resize: vertical; min-height: 110px; }
.toe-glossary-form input:focus,
.toe-glossary-form select:focus,
.toe-glossary-form textarea:focus {
    outline: 2px solid rgba(41, 109, 235, 0.5);
    outline-offset: 1px;
    border-color: #296DEB;
}
.toe-glossary-form__status {
    min-height: 1.2em;
    font-size: 0.82rem;
}

/* Categories list inside modal */
.toe-glossary-cats__list { list-style: none; padding: 0; margin: 0 0 1rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.toe-glossary-cats__row { display: flex; gap: 0.4rem; align-items: center; }
.toe-glossary-cats__row input { flex: 1 1 auto; }
.toe-glossary-cats__rename,
.toe-glossary-cats__delete,
.toe-glossary-cats__add-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.toe-glossary-cats__rename:hover { background: rgba(41, 109, 235, 0.15); border-color: #296DEB; color: #296DEB; }
.toe-glossary-cats__delete:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }
.toe-glossary-cats__add { display: flex; gap: 0.4rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.toe-glossary-cats__add input { flex: 1 1 auto; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: inherit; border-radius: 4px; }
.toe-glossary-cats__add-btn:hover { background: #296DEB; border-color: #296DEB; color: #ffffff; }

.toe-glossary-page__empty {
    color: var(--wp--preset--color--tertiary, #757575);
    font-size: var(--wp--preset--font-size--small, 0.95rem);
    padding: var(--wp--preset--spacing--60, 2rem) 0;
    text-align: center;
}

.toe-glossary-page__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40, 1rem);
    align-items: center;
    margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

.toe-glossary-page__search {
    flex: 1 1 280px;
    min-width: 260px;
    display: block;
}

.toe-glossary-page__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small, 0.95rem);
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toe-glossary-page__search-input:focus {
    border-color: var(--wp--preset--color--primary, #296DEB);
    box-shadow: 0 0 0 3px rgba(41, 109, 235, 0.15);
}

.toe-glossary-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.toe-glossary-page__filter {
    font-family: inherit;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 9999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toe-glossary-page__filter:hover {
    border-color: var(--wp--preset--color--primary, #296DEB);
}

.toe-glossary-page__filter.is-active {
    background: var(--wp--preset--color--primary, #296DEB);
    border-color: var(--wp--preset--color--primary, #296DEB);
    color: #ffffff;
}

.toe-glossary-page__jumpbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: var(--wp--preset--spacing--30, 0.5rem) 0 var(--wp--preset--spacing--40, 1rem);
    padding: 0.5rem 0;
    border-top: 1px solid rgba(127, 127, 127, 0.15);
    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
    position: sticky;
    top: 0;
    background: var(--wp--preset--color--base, #ffffff);
    z-index: 5;
}

.toe-energy-dashboard[data-scheme="dark"] .toe-glossary-page__jumpbar {
    background: #0a0a0a;
}

.toe-glossary-page__jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    border-radius: 0.25rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.toe-glossary-page__jump:hover {
    background: var(--wp--preset--color--primary, #296DEB);
    color: #ffffff;
}

.toe-glossary-page__jump.is-disabled {
    opacity: 0.25;
    pointer-events: none;
}

.toe-glossary-page__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    color: var(--wp--preset--color--tertiary, #757575);
    margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

.toe-glossary-page__no-results {
    text-align: center;
    color: var(--wp--preset--color--tertiary, #757575);
    padding: var(--wp--preset--spacing--60, 2rem) 0;
}

.toe-glossary-page__group {
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

.toe-glossary-page__letter {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: var(--wp--preset--font-size--x-large, 1.6rem);
    color: var(--wp--preset--color--primary, #296DEB);
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--wp--preset--color--primary, #296DEB);
    scroll-margin-top: 4rem;
}

.toe-glossary-page__terms {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--wp--preset--spacing--40, 1rem);
}

.toe-glossary-page__term {
    padding: var(--wp--preset--spacing--40, 1rem);
    border: 1px solid rgba(127, 127, 127, 0.18);
    border-radius: 0.6rem;
    background: rgba(127, 127, 127, 0.04);
    transition: background 0.6s ease, border-color 0.6s ease, transform 0.2s ease;
    scroll-margin-top: 5rem;
}

.toe-glossary-page__term.is-highlight {
    background: rgba(41, 109, 235, 0.10);
    border-color: var(--wp--preset--color--primary, #296DEB);
}

.toe-glossary-page__term-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.toe-glossary-page__term-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: var(--wp--preset--font-size--medium, 1.05rem);
    margin: 0;
    line-height: 1.2;
}

.toe-glossary-page__term-abbr {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    color: var(--wp--preset--color--tertiary, #757575);
    margin-left: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.toe-glossary-page__term-category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(41, 109, 235, 0.12);
    color: var(--wp--preset--color--primary, #296DEB);
    white-space: nowrap;
}

.toe-glossary-page__term-def {
    font-size: var(--wp--preset--font-size--small, 0.95rem);
    line-height: 1.5;
    margin: 0 0 0.5rem;
}

.toe-glossary-page__term-aliases,
.toe-glossary-page__term-related {
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    color: var(--wp--preset--color--tertiary, #757575);
    margin: 0.25rem 0 0;
}

.toe-glossary-page__term-meta-label {
    font-weight: 700;
    margin-right: 0.25rem;
}

.toe-glossary-page__related-link {
    color: var(--wp--preset--color--primary, #296DEB);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.toe-glossary-page__related-link:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

/* Inline [toe_glossary_term] usage in articles. */
.toe-glossary-term {
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
    cursor: help;
    color: inherit;
}

.toe-glossary-term:hover {
    border-bottom-style: solid;
}

@media (max-width: 600px) {
    .toe-glossary-page__title {
        font-size: var(--wp--preset--font-size--x-large, 1.6rem);
    }
    .toe-glossary-page__terms {
        grid-template-columns: 1fr;
    }
}

/* ── Retail Pump Prices ───────────────────────────────────────────────── */

.toe-retail__schedule {
    color: var(--wp--preset--color--tertiary, #757575);
    font-size: var(--wp--preset--font-size--x-small, 0.78rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.toe-retail__card { position: relative; }
.toe-retail__value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin: var(--wp--preset--spacing--20, 0.25rem) 0 0.4rem;
    letter-spacing: -0.02em;
}
.toe-retail__units {
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wp--preset--color--tertiary, #757575);
    margin-left: 0.2em;
}
.toe-retail__deltas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0.3rem 0 0.5rem;
    font-size: 0.82rem;
}
.toe-retail__delta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 600;
}
.toe-retail__delta-label {
    color: var(--wp--preset--color--tertiary, #757575);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.toe-retail__change--up   { color: #00c853; }
.toe-retail__change--down { color: #ff1744; }
.toe-retail__change--flat { color: var(--wp--preset--color--tertiary, #757575); }
.toe-retail__change-icon  { font-size: 0.65em; margin-right: 0.15em; }

/* Dark theme accents */
.toe-energy-dashboard[data-scheme="dark"] .toe-retail__card--gas {
    border-top: 2px solid #00b4d8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-retail__card--gas .toe-retail__value {
    color: #00b4d8;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-retail__card--diesel {
    border-top: 2px solid #f0a500;
}
.toe-energy-dashboard[data-scheme="dark"] .toe-retail__card--diesel .toe-retail__value {
    color: #f0a500;
}

/* Light theme accents */
.toe-energy-dashboard[data-scheme="light"] .toe-retail__card--gas {
    border-top: 2px solid #0284c7;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__card--gas .toe-retail__value {
    color: #0369a1;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__card--diesel {
    border-top: 2px solid #d97706;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__card--diesel .toe-retail__value {
    color: #b45309;
}

/* 52-week chart card */
.toe-retail__chart-card { display: flex; flex-direction: column; }
.toe-retail__chart-wrap {
    flex: 1 1 auto;
    min-height: 180px;
    position: relative;
    margin: 0.5rem 0 0.4rem;
}
.toe-retail__chart-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--wp--preset--color--tertiary, #757575);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.toe-retail__chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.toe-retail__chart-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}
.toe-retail__chart-legend-item--gas .toe-retail__chart-swatch    { background: #00b4d8; }
.toe-retail__chart-legend-item--diesel .toe-retail__chart-swatch { background: #f0a500; }

/* PADD comparison grid */
.toe-retail__padd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin: 0.6rem 0 1rem;
}
.toe-retail__padd-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--toe-retail-padd-color, rgba(255, 255, 255, 0.2));
    border-radius: 6px;
    padding: 0.85rem 0.95rem;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__padd-card {
    background: #f8fafc;
    border-color: #e2e8f0;
    border-left-color: var(--toe-retail-padd-color, #cbd5e1);
}

/* PADD accent colors — match the map layer PADD palette. */
.toe-retail__padd-card[data-padd="1"] { --toe-retail-padd-color: #00b4d8; }
.toe-retail__padd-card[data-padd="2"] { --toe-retail-padd-color: #34d399; }
.toe-retail__padd-card[data-padd="3"] { --toe-retail-padd-color: #f0a500; }
.toe-retail__padd-card[data-padd="4"] { --toe-retail-padd-color: #fb923c; }
.toe-retail__padd-card[data-padd="5"] { --toe-retail-padd-color: #a78bfa; }

.toe-retail__padd-card[data-padd] .toe-retail__padd-label {
    color: var(--toe-retail-padd-color);
}

.toe-retail__padd-label {
    margin: 0 0 0.4rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.toe-retail__padd-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.toe-retail__padd-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.toe-retail__padd-row-label {
    font-weight: 600;
    color: var(--wp--preset--color--tertiary, #757575);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.toe-retail__padd-row-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: left;
}
.toe-retail__padd-vs {
    text-align: right;
    font-size: 0.75rem;
    color: var(--wp--preset--color--tertiary, #757575);
    font-weight: 600;
    white-space: nowrap;
}
.toe-retail__vs-label {
    opacity: 0.7;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Spotlight tables */
.toe-retail__spotlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.4rem 0 0.8rem;
}
@media (max-width: 720px) {
    .toe-retail__spotlights { grid-template-columns: 1fr; }
}
.toe-retail__spotlight {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.85rem 0.95rem;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__spotlight {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.toe-retail__spotlight-title {
    margin: 0 0 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.toe-retail__spotlight-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.toe-retail__spotlight-table th {
    text-align: left;
    font-weight: 700;
    color: var(--wp--preset--color--tertiary, #757575);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.toe-retail__spotlight-table td {
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.toe-retail__spotlight-table tbody tr:last-child td {
    border-bottom: none;
}
.toe-retail__spotlight-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__spotlight-table th {
    border-bottom-color: #94a3b8;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__spotlight-table td {
    border-bottom-color: #cbd5e1;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail__spotlight-table tbody tr:hover td {
    background: #f1f5f9;
}
.toe-retail__col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.toe-retail__source {
    font-size: 0.75rem;
    color: var(--wp--preset--color--tertiary, #757575);
    margin-top: 0.6rem;
}

/* ── Glossary: "Did you know?" rotator ─────────────────────────── */

.toe-glossary-didyouknow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
    padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--50, 1.5rem);
    border: 1px solid rgba(127, 127, 127, 0.18);
    border-left: 3px solid var(--toe-accent, #f0a500);
    border-radius: 0.6rem;
    background: linear-gradient(120deg, rgba(240, 165, 0, 0.07), rgba(127, 127, 127, 0.02));
    overflow: hidden;
}

.toe-glossary-didyouknow__eyebrow {
    font-family: Orbitron, Manrope, sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--toe-accent, #f0a500);
}

.toe-glossary-didyouknow__stage {
    min-height: 3.4em;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.toe-glossary-didyouknow__stage.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.toe-glossary-didyouknow__stage.is-entering {
    opacity: 0;
    transform: translateY(8px);
}

.toe-glossary-didyouknow__term {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
}

.toe-glossary-didyouknow__term:hover {
    color: var(--toe-accent, #f0a500);
}

.toe-glossary-didyouknow__def {
    margin: 0;
    font-size: var(--wp--preset--font-size--small, 0.95rem);
    line-height: 1.5;
    opacity: 0.92;
}

.toe-glossary-didyouknow__controls {
    position: absolute;
    top: var(--wp--preset--spacing--40, 1rem);
    right: var(--wp--preset--spacing--40, 1rem);
    display: flex;
    gap: 0.35rem;
}

.toe-glossary-didyouknow__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(127, 127, 127, 0.28);
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.toe-glossary-didyouknow__btn:hover {
    opacity: 1;
    color: var(--toe-accent, #f0a500);
    border-color: var(--toe-accent, #f0a500);
}

.toe-glossary-didyouknow__icon-play { display: none; }
.toe-glossary-didyouknow.is-paused .toe-glossary-didyouknow__icon-pause { display: none; }
.toe-glossary-didyouknow.is-paused .toe-glossary-didyouknow__icon-play { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .toe-glossary-didyouknow__stage { transition: none; }
}

/* ── Retail landing surface ([toe_retail_dashboard]) ───────────── */

/* Tighten the top buffer between the site chrome/ticker and the dashboard bar. */
.toe-retail-landing {
    padding-block-start: var(--wp--preset--spacing--20);
}

/* Dense app-bar: title + ⓘ + inline tabs, all in one row. */
.toe-retail-landing__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-block-end: var(--wp--preset--spacing--40);
}

.toe-retail-landing__bar-brand {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.toe-retail-landing__bar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

.toe-retail-landing__nav-tab {
    padding: 0.3rem 0.7rem;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.toe-retail-landing__nav-tab:hover { color: #fff; }

.toe-retail-landing__nav-tab.is-active {
    color: var(--wp--preset--color--primary, #296DEB);
    border-bottom-color: var(--wp--preset--color--primary, #296DEB);
}

.toe-retail-landing__nav-tab.is-disabled {
    opacity: 0.4;
    cursor: default;
}

/* In-place tab panels */
.toe-retail-panel { display: none; }
.toe-retail-panel.is-active { display: block; }

.toe-retail-landing__title {
    margin: 0;
    font-family: Orbitron, Manrope, sans-serif;
    font-weight: 800;
    line-height: 1.15;
    font-size: var(--wp--preset--font-size--medium);
    white-space: nowrap;
}


.toe-retail-landing__banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(240, 165, 0, 0.12);
    border: 1px solid rgba(240, 165, 0, 0.4);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-block-end: var(--wp--preset--spacing--50);
}

.toe-retail-landing__banner-icon {
    color: var(--toe-accent);
    font-size: 1.2rem;
    line-height: 1.2;
}

.toe-retail-landing__banner strong { display: block; }

.toe-retail-landing__banner p {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--wp--preset--font-size--small);
}

.toe-retail-landing__placeholder { opacity: 0.5; }

.toe-retail-landing__soon {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--toe-accent);
}

/* Compact section header (label + info tooltip + meta) */
.toe-retail-landing__sec-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-block-end: 0.35rem;
}

.toe-retail-landing__sec-label {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--primary, #296DEB);
}

.toe-retail-landing__sec-meta {
    margin-inline-start: auto;
    font-size: var(--wp--preset--font-size--x-small);
    color: rgba(255, 255, 255, 0.4);
}

/* CSS-only info tooltip (ⓘ) — explainer on hover/focus */
.toe-retail__info {
    position: relative;
    display: inline-flex;
    cursor: help;
    color: rgba(255, 255, 255, 0.45);
}
.toe-retail__info-icon { font-size: 0.95rem; line-height: 1; }
.toe-retail__info:hover,
.toe-retail__info:focus { color: var(--wp--preset--color--primary, #296DEB); outline: none; }

.toe-retail__info-bubble {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 50;
    width: max-content;
    max-width: 320px;
    padding: 0.6rem 0.75rem;
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.toe-retail__info:hover .toe-retail__info-bubble,
.toe-retail__info:focus .toe-retail__info-bubble { opacity: 1; visibility: visible; }

/* Compact retail KPI cards — 4 full-width horizontal cards (PADD-card style). */
.toe-retail--compact .toe-energy-dashboard__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* fill the row (was auto-fill → empty tracks) */
}
@media (max-width: 1024px) {
    .toe-retail--compact .toe-energy-dashboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .toe-retail--compact .toe-energy-dashboard__grid { grid-template-columns: 1fr; }
}
/* Left accent stripe echoing the PADD cards (gas = blue, diesel = gold). */
.toe-retail--compact .toe-retail__card {
    border-left: 4px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}
.toe-retail--compact .toe-retail__card--gas    { border-left-color: #00b4d8; }
.toe-retail--compact .toe-retail__card--diesel { border-left-color: #f0a500; }
/* Value must never break mid-number (the card allows overflow-wrap: anywhere). */
.toe-retail--compact .toe-retail__value { font-size: 1.55rem; white-space: nowrap; }
.toe-retail--compact .toe-energy-dashboard__card { padding: 0.6rem 0.95rem !important; }
.toe-retail--compact .toe-energy-dashboard__card-source { font-size: 0.72rem; }
.toe-retail--compact .toe-energy-dashboard__card-title { font-size: var(--wp--preset--font-size--x-small); }
.toe-retail--compact .toe-retail__deltas { gap: 0.7rem; margin: 0.25rem 0 0.35rem; }

/* Orange header stripe — matches the TOE site header styling. */
.toe-retail-landing__bar { border-bottom: 3px solid var(--toe-accent); }

/* Pressure Index summary tiles (RPI-C / WoW / ZSI) */
.toe-retail__pi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--30);
    margin-block-end: var(--wp--preset--spacing--40);
}
@media (max-width: 900px) { .toe-retail__pi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .toe-retail__pi-grid { grid-template-columns: 1fr; } }

.toe-retail__pi-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
a.toe-retail__pi-tile:hover { border-color: rgba(255, 255, 255, 0.25); }

.toe-retail__pi-label {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
}

.toe-retail__pi-value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: Orbitron, Manrope, sans-serif;
    font-weight: 800;
    line-height: 1.1;
    font-size: var(--wp--preset--font-size--x-large);
}
.toe-retail__pi-value strong { color: var(--pi-zone, inherit); font-weight: 800; }
.toe-retail__pi-unit { font-size: var(--wp--preset--font-size--x-small); font-weight: 500; color: rgba(255, 255, 255, 0.45); }

.toe-retail__pi-sub { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.55); }
.toe-retail__pi-tile[class*="--zone-"] .toe-retail__pi-sub::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.35rem;
    border-radius: 50%;
    background: var(--pi-zone);
    vertical-align: middle;
}

.toe-retail__pi-chev {
    position: absolute;
    top: 0.55rem;
    inset-inline-end: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.15rem;
    line-height: 1;
}
.toe-retail__pi-star { color: var(--toe-accent); }

/* Zone palette (ColorBrewer RdYlGn-5 reversed) + WoW direction. */
.toe-retail__pi-tile--zone-very_low { --pi-zone: #1a9850; }
.toe-retail__pi-tile--zone-low      { --pi-zone: #91cf60; }
.toe-retail__pi-tile--zone-moderate { --pi-zone: #f6c343; }
.toe-retail__pi-tile--zone-elevated { --pi-zone: #fc8d59; }
.toe-retail__pi-tile--zone-severe   { --pi-zone: #d73027; }
.toe-retail__pi-tile--down { --pi-zone: #34d399; }
.toe-retail__pi-tile--up   { --pi-zone: #f87171; }

/* ── Retail Pressure surface (Card 19) ─────────────────────────── */
.toe-rpi__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-end: var(--wp--preset--spacing--40); }
.toe-rpi__fuel { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; overflow: hidden; }
.toe-rpi__fuel-btn { padding: 0.4rem 0.95rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.toe-rpi__fuel-btn.is-active { background: var(--wp--preset--color--primary, #296DEB); color: #fff; }
.toe-rpi__geo { display: inline-flex; align-items: center; gap: 0.5rem; }
.toe-rpi__geo-label { font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__geo-select { padding: 0.35rem 0.5rem; background: #11192b; color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; font-family: inherit; }
.toe-rpi__geo-select option { background: #11192b; color: #fff; }

.toe-rpi__hero { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 1.5rem; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 1.25rem 1.5rem; margin-block-end: var(--wp--preset--spacing--40); }
@media (max-width: 780px) { .toe-rpi__hero { grid-template-columns: 1fr; } }
.toe-rpi__hero-source { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__hero-title { margin: 0.25rem 0 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.toe-rpi__hero-value { font-family: Orbitron, Manrope, sans-serif; font-weight: 800; line-height: 1; font-size: clamp(3rem, 8vw, 4.5rem); color: var(--pi-zone, #e2e8f0); margin-top: 0.4rem; }
.toe-rpi__hero-unit { font-size: 1.25rem; font-weight: 500; color: rgba(255, 255, 255, 0.4); margin-inline-start: 0.3rem; }
.toe-rpi__hero-zone { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-weight: 700; }
.toe-rpi__hero-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--pi-zone, #888); }
.toe-rpi__hero-wow { margin-top: 0.4rem; font-size: var(--wp--preset--font-size--small); }
.toe-rpi__hero-wow--down { color: #34d399; }
.toe-rpi__hero-wow--up { color: #f87171; }
.toe-rpi__hero-wow--flat { color: rgba(255, 255, 255, 0.6); }
.toe-rpi__hero-chart { position: relative; min-height: 220px; }

.toe-rpi__components { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--40); }
@media (max-width: 780px) { .toe-rpi__components { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.toe-rpi__comp { display: flex; flex-direction: column; gap: 0.15rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.7rem 0.9rem; }
.toe-rpi__comp-label { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__comp-value { font-family: Orbitron, Manrope, sans-serif; font-weight: 800; font-size: var(--wp--preset--font-size--x-large); }
.toe-rpi__comp-unit { font-size: var(--wp--preset--font-size--x-small); font-weight: 500; color: rgba(255, 255, 255, 0.45); margin-inline-start: 0.2rem; }
.toe-rpi__comp-sub { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.55); }
.toe-rpi__comp-star { color: var(--toe-accent); }

/* Card 20 — Velocity & Acceleration */
.toe-rpi__velocity { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--40); }
@media (max-width: 780px) { .toe-rpi__velocity { grid-template-columns: 1fr; } }
.toe-rpi__vi-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.9rem 1.1rem; }
.toe-rpi__vi-title { margin: 0.15rem 0 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.toe-rpi__vi-value { display: flex; align-items: center; gap: 0.6rem; font-family: Orbitron, Manrope, sans-serif; font-weight: 800; font-size: var(--wp--preset--font-size--xx-large); margin-top: 0.3rem; }
.toe-rpi__vi-card--up .toe-rpi__vi-value { color: #f87171; }
.toe-rpi__vi-card--down .toe-rpi__vi-value { color: #34d399; }
.toe-rpi__vi-pill { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }
.toe-rpi__vi-sentence { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.7); }
.toe-rpi__vi-formula { margin: 0.5rem 0 0; font-family: Consolas, Monaco, monospace; font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.4); }
.toe-rpi__momentum { display: grid; grid-template-rows: repeat(3, 1fr); gap: 0.5rem; }
.toe-rpi__mom { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.5rem 0.8rem; }
.toe-rpi__mom-label { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__mom-value { font-family: Orbitron, Manrope, sans-serif; font-weight: 800; }
.toe-rpi__mom--up .toe-rpi__mom-value { color: #f87171; }
.toe-rpi__mom--down .toe-rpi__mom-value { color: #34d399; }
.toe-rpi__ai { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.9rem 1.1rem; margin-block-end: var(--wp--preset--spacing--40); }
.toe-rpi__ai-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.toe-rpi__ai-sub { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.5); }
.toe-rpi__ai-chart-wrap { position: relative; min-height: 160px; }

.toe-energy-dashboard[data-scheme="light"] .toe-rpi__vi-card,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__mom,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__ai { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__vi-title,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__vi-sentence { color: #475569; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__mom-label,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__ai-sub { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__vi-pill { background: rgba(0, 0, 0, 0.06); color: #475569; }

/* Card 21 — Historical Context */
.toe-rpi__strip-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.9rem 1.1rem; margin-block-end: var(--wp--preset--spacing--30); }
.toe-rpi__strip-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--wp--preset--font-size--x-small); }
.toe-rpi__strip-head > span:first-child { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__strip-current { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.toe-rpi__strip { position: relative; height: 12px; border-radius: 6px; margin: 0.6rem 0 0.35rem; background: linear-gradient(to right, #1a9850, #91cf60, #f6c343, #fc8d59, #d73027); }
.toe-rpi__strip-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); transform: translateX(-50%); }
.toe-rpi__strip-ends { display: flex; justify-content: space-between; font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.5); }

.toe-rpi__hist-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--40); }
@media (max-width: 780px) { .toe-rpi__hist-grid { grid-template-columns: 1fr; } }
.toe-rpi__hist-card, .toe-rpi__anchor, .toe-rpi__delta-tile { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.9rem 1.1rem; }
.toe-rpi__hist-title { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__sw-bars { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.toe-rpi__sw-row { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.6rem; font-size: var(--wp--preset--font-size--x-small); }
.toe-rpi__sw-year { color: rgba(255, 255, 255, 0.5); font-weight: 700; }
.toe-rpi__sw-track { height: 10px; background: rgba(255, 255, 255, 0.08); border-radius: 5px; overflow: hidden; }
.toe-rpi__sw-fill { display: block; height: 100%; background: rgba(255, 255, 255, 0.35); border-radius: 5px; }
.toe-rpi__sw-val { font-family: Orbitron, Manrope, sans-serif; font-weight: 700; }
.toe-rpi__sw-row.is-current .toe-rpi__sw-year { color: var(--wp--preset--color--primary, #296DEB); }
.toe-rpi__sw-row.is-current .toe-rpi__sw-fill { background: var(--wp--preset--color--primary, #296DEB); }
.toe-rpi__sw-mean { margin: 0.6rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.45); }
.toe-rpi__hist-side { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.toe-rpi__delta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.toe-rpi__delta-label { display: block; font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__delta-value { font-family: Orbitron, Manrope, sans-serif; font-weight: 800; font-size: var(--wp--preset--font-size--large); }
.toe-rpi__delta-value--up { color: #34d399; }
.toe-rpi__delta-value--down { color: #f87171; }
.toe-rpi__delta-pct { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.5); margin-inline-start: 0.3rem; }
.toe-rpi__anchor-label { display: block; font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.3rem; }
.toe-rpi__anchor p { margin: 0; font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.7); }

.toe-energy-dashboard[data-scheme="light"] .toe-rpi__strip-card,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__hist-card,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__delta-tile,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__anchor { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__strip-current { color: #1a1a1a; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__anchor p { color: #475569; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__sw-track { background: rgba(0, 0, 0, 0.08); }

/* Card 22 — Breadth & Geography */
.toe-rpi__breadth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--30); }
@media (max-width: 600px) { .toe-rpi__breadth { grid-template-columns: 1fr; } }
.toe-rpi__breadth-tile { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 0.8rem 1rem; }
.toe-rpi__breadth-label { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.toe-rpi__breadth-value { display: block; font-family: Orbitron, Manrope, sans-serif; font-weight: 800; font-size: var(--wp--preset--font-size--x-large); margin: 0.15rem 0; }
.toe-rpi__breadth-unit { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: rgba(255, 255, 255, 0.4); margin-inline-start: 0.2rem; }
.toe-rpi__breadth-sub { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.55); }

.toe-rpi__matrix { width: 100%; border-collapse: collapse; margin-block-end: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--x-small); }
.toe-rpi__matrix th { text-align: left; padding: 0.4rem 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.toe-rpi__matrix th:not(:first-child) { text-align: right; }
.toe-rpi__matrix-padd { padding: 0.5rem 0.6rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.toe-rpi__matrix-cell { padding: 0.5rem 0.6rem; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }
.toe-rpi__matrix-val { font-family: Orbitron, Manrope, sans-serif; font-weight: 700; }
.toe-rpi__matrix-dir { display: inline-block; margin-inline-start: 0.4rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; }
.toe-rpi__matrix-cell--up .toe-rpi__matrix-val { color: #f87171; }
.toe-rpi__matrix-cell--down .toe-rpi__matrix-val { color: #34d399; }
.toe-rpi__matrix-cell--up, .toe-rpi__matrix-cell--down { background: rgba(255, 255, 255, 0.02); }

.toe-energy-dashboard[data-scheme="light"] .toe-rpi__breadth-tile { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__breadth-label { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__breadth-sub { color: #475569; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__matrix th,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__matrix-dir { color: #64748b; }

/* Fuel Surcharge Calculator (R5) */
.toe-fsc__modes { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; overflow: hidden; margin-block-end: var(--wp--preset--spacing--40); }
.toe-fsc__mode { padding: 0.45rem 1rem; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.toe-fsc__mode.is-active { background: var(--wp--preset--color--primary, #296DEB); color: #fff; }
.toe-fsc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); }
@media (max-width: 780px) { .toe-fsc__grid { grid-template-columns: 1fr; } }
.toe-fsc__inputs, .toe-fsc__output { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 1rem 1.2rem; }
.toe-fsc__field { display: block; margin-block-end: 0.8rem; }
.toe-fsc__field--inline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.6rem; }
.toe-fsc__label { display: block; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.3rem; }
.toe-fsc__field--inline .toe-fsc__label { margin-bottom: 0; }
.toe-fsc__input { box-sizing: border-box; width: 100%; max-width: 130px; padding: 0.4rem 0.6rem; background: rgba(255, 255, 255, 0.05); color: inherit; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; font-family: inherit; font-size: var(--wp--preset--font-size--small); }
.toe-fsc__field:not(.toe-fsc__field--inline) .toe-fsc__input { max-width: none; }
.toe-fsc__ref-toggle, .toe-fsc__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 0.3rem; }
.toe-fsc__ref, .toe-fsc__chip { padding: 0.35rem 0.7rem; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; font-family: inherit; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; cursor: pointer; }
.toe-fsc__ref.is-active { background: var(--wp--preset--color--primary, #296DEB); color: #fff; border-color: var(--wp--preset--color--primary, #296DEB); }
.toe-fsc__ref:disabled { opacity: 0.4; cursor: not-allowed; }
.toe-fsc__chip:hover { border-color: var(--toe-accent); }
.toe-fsc__current { font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.7); margin: 0 0 0.8rem; }
.toe-fsc__window { color: rgba(255, 255, 255, 0.45); font-size: var(--wp--preset--font-size--x-small); }
.toe-fsc__peg { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 0.6rem; padding-top: 0.6rem; }
.toe-fsc__peg-title { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); display: block; margin-bottom: 0.4rem; }
.toe-fsc__note { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.45); margin: 0.6rem 0 0; }
.toe-fsc__result { padding: 0.6rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.toe-fsc__result--primary .toe-fsc__result-value { color: var(--toe-accent); }
.toe-fsc__result-label { display: block; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
.toe-fsc__result-value { font-family: Orbitron, Manrope, sans-serif; font-weight: 800; font-size: var(--wp--preset--font-size--x-large); }
.toe-fsc__result-total { display: inline-block; margin-inline-end: 1rem; font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.6); }
.toe-fsc__premium { font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.7); margin: 0.8rem 0 0; }
.toe-fsc__sentence { font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.85); margin: 0.6rem 0 0; line-height: 1.5; }
.toe-fsc__source { font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, 0.4); margin: 0.6rem 0 0; }

.toe-energy-dashboard[data-scheme="light"] .toe-fsc__inputs,
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__output { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__label,
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__result-label { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__current,
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__sentence,
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__premium { color: #334155; }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__note,
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__source { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__modes { border-color: rgba(0, 0, 0, 0.15); }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__input { background: #fff; border-color: rgba(0, 0, 0, 0.2); }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__ref:not(.is-active),
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__chip { background: #fff; color: #334155; border-color: rgba(0, 0, 0, 0.2); }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__mode { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-fsc__mode.is-active { color: #fff; }

/* Heat Map (R7) */
.toe-rpi-map { position: relative; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.toe-rpi-map__canvas { height: 520px; width: 100%; }
@media (max-width: 780px) { .toe-rpi-map__canvas { height: 380px; } }
.toe-retail-landing__sec-head .toe-rpi-map__fuel { margin-inline-start: auto; display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; overflow: hidden; }
.toe-rpi-map__fuel-btn { padding: 0.3rem 0.8rem; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-family: inherit; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.toe-rpi-map__fuel-btn.is-active { background: var(--wp--preset--color--primary, #296DEB); color: #fff; }
.toe-rpi-map__legend { position: absolute; bottom: 12px; right: 12px; z-index: 500; background: rgba(11, 18, 32, 0.9); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 0.6rem 0.75rem; font-size: var(--wp--preset--font-size--x-small); display: flex; flex-direction: column; gap: 0.25rem; }
.toe-rpi-map__legend-title { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.2rem; }
.toe-rpi-map__legend-item { display: flex; align-items: center; gap: 0.4rem; color: rgba(255, 255, 255, 0.8); }
.toe-rpi-map__legend-swatch { width: 0.8rem; height: 0.8rem; border-radius: 2px; flex: none; }

.toe-energy-dashboard[data-scheme="light"] .toe-rpi-map { border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi-map__legend { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.12); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi-map__legend-title,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi-map__legend-item { color: #334155; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__sec-head .toe-rpi-map__fuel { border-color: rgba(0, 0, 0, 0.15); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi-map__fuel-btn { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi-map__fuel-btn.is-active { color: #fff; }

/* Methodology (R8) */
.toe-method { color: rgba(255, 255, 255, 0.82); max-width: 70ch; }
.toe-method__lede { font-size: var(--wp--preset--font-size--medium); line-height: 1.55; margin: 0 0 0.5rem; }
.toe-method__h { font-family: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--primary, #296DEB); margin: 1.75rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.toe-method__note { font-size: var(--wp--preset--font-size--small); line-height: 1.5; opacity: 0.85; margin: 0 0 0.75rem; }
.toe-method__note--fine { font-size: var(--wp--preset--font-size--x-small); opacity: 0.65; margin-top: 0.6rem; }

.toe-method__dl { margin: 0 0 0.5rem; }
.toe-method__dt { font-weight: 800; font-size: var(--wp--preset--font-size--small); margin-top: 0.6rem; }
.toe-method__dd { margin: 0.1rem 0 0; font-size: var(--wp--preset--font-size--small); opacity: 0.82; line-height: 1.5; }
.toe-method__dl--terms .toe-method__dt { color: var(--wp--preset--color--primary, #296DEB); }

.toe-method__family { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; margin: 0.5rem 0 0.5rem; }
.toe-method__index { border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--wp--preset--color--primary, #296DEB); border-radius: 6px; padding: 0.7rem 0.85rem; background: rgba(255, 255, 255, 0.03); }
.toe-method__index-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.toe-method__index-code { font-weight: 800; font-size: var(--wp--preset--font-size--medium); color: #fff; }
.toe-method__index-name { font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; }
.toe-method__index-range { margin-inline-start: auto; font-size: var(--wp--preset--font-size--x-small); opacity: 0.6; white-space: nowrap; }
.toe-method__index-measures { font-size: var(--wp--preset--font-size--small); line-height: 1.45; margin: 0.4rem 0; opacity: 0.85; }
.toe-method__index-example { font-size: var(--wp--preset--font-size--x-small); line-height: 1.45; margin: 0.4rem 0 0; opacity: 0.7; }
.toe-method__example-tag, .toe-method__worked-tag { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72em; color: var(--wp--preset--color--primary, #296DEB); margin-inline-end: 0.3rem; }

.toe-method__formula { display: block; font-family: Consolas, Monaco, "Courier New", monospace; font-size: var(--wp--preset--font-size--x-small); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 0.45rem 0.6rem; margin: 0.4rem 0; color: #ffd9a8; overflow-x: auto; }
.toe-method__formula--wide { font-size: var(--wp--preset--font-size--small); color: #ffe6c2; }

.toe-method__worked { font-size: var(--wp--preset--font-size--small); line-height: 1.55; background: rgba(41, 109, 235, 0.08); border: 1px solid rgba(41, 109, 235, 0.25); border-radius: 6px; padding: 0.7rem 0.85rem; margin: 0.5rem 0; }

.toe-method__zones { display: flex; flex-wrap: wrap; gap: 2px; margin: 0.75rem 0 0.25rem; border-radius: 4px; overflow: hidden; }
.toe-method__zone { flex: 1 1 0; min-width: 92px; text-align: center; padding: 0.45rem 0.3rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; color: #fff; white-space: nowrap; }

.toe-method__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 0.85rem; font-size: var(--wp--preset--font-size--small); }
.toe-method__verdict-pill { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--wp--preset--font-size--x-small); padding: 0.25rem 0.7rem; border-radius: 9999px; }
.toe-method__verdict-pill--pass { background: #1a9850; color: #fff; }
.toe-method__verdict-pill--fail { background: #d73027; color: #fff; }
.toe-method__verdict-stat { opacity: 0.85; }
.toe-method__verdict-stat strong { color: #fff; }

.toe-method__table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--x-small); margin: 0.25rem 0; }
.toe-method__table th { text-align: left; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.6; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); white-space: nowrap; }
.toe-method__table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: middle; }
.toe-method__table-event { font-weight: 700; }
.toe-method__table-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.toe-method__zone-chip { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.toe-method__zone-swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; flex: none; }
.toe-method__band { font-weight: 800; white-space: nowrap; }
.toe-method__band--ok { color: #5dd07f; }
.toe-method__band--off { color: #fc8d59; }
.toe-method__band--na { opacity: 0.5; }

/* Methodology — light overrides */
.toe-energy-dashboard[data-scheme="light"] .toe-method { color: #334155; }
.toe-energy-dashboard[data-scheme="light"] .toe-method__h { border-bottom-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-method__index { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-method__index-code { color: #0f172a; }
.toe-energy-dashboard[data-scheme="light"] .toe-method__formula { background: #0f172a; border-color: rgba(0, 0, 0, 0.2); }
.toe-energy-dashboard[data-scheme="light"] .toe-method__verdict-stat strong { color: #0f172a; }
.toe-energy-dashboard[data-scheme="light"] .toe-method__table th { border-bottom-color: rgba(0, 0, 0, 0.2); }
.toe-energy-dashboard[data-scheme="light"] .toe-method__table td { border-bottom-color: rgba(0, 0, 0, 0.08); }
.toe-energy-dashboard[data-scheme="light"] .toe-method__band--ok { color: #1a9850; }

/* Light theme */
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__hero,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__comp { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__hero-value { color: var(--pi-zone, #1a1a1a); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__hero-source,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__comp-label,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__geo-label { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__geo-select,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__geo-select option { background: #fff; color: #0f172a; border-color: rgba(0, 0, 0, 0.15); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__comp-sub,
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__hero-title { color: #475569; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__fuel { border-color: rgba(0, 0, 0, 0.15); }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__fuel-btn { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-rpi__fuel-btn.is-active { color: #fff; }

/* Light theme overrides */
.toe-energy-dashboard[data-scheme="light"] .toe-retail__pi-tile { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-retail__pi-label { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail__pi-sub { color: #475569; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail__pi-unit { color: #94a3b8; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__sec-head { border-bottom-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__sec-meta { color: #94a3b8; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail__info { color: #94a3b8; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail__info-bubble {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__nav { border-bottom-color: rgba(0, 0, 0, 0.1); }
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__nav-tab { color: #64748b; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__nav-tab:hover { color: #1a1a1a; }
.toe-energy-dashboard[data-scheme="light"] .toe-retail-landing__banner p { color: #475569; }

/* ═══════════════════════════════════════════════════════════════════════════
   MCP guide — public developer page ([toe_mcp_guide])
   Inherits theme tokens; no hardcoded values where a variable exists.
   ═══════════════════════════════════════════════════════════════════════════ */

.toe-mcp-guide {
    max-width: var(--wp--style--global--wide-size, 1332px);
    margin-inline: auto;
    font-family: Manrope, sans-serif;
}

.toe-mcp-guide__section {
    margin-block: var(--wp--preset--spacing--70, 3rem);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.toe-mcp-guide__hero {
    padding-block: var(--wp--preset--spacing--60, 2rem);
    border-bottom: 1px solid rgba(117, 117, 117, 0.25);
}

.toe-mcp-guide__eyebrow {
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary, #296DEB);
    margin: 0 0 var(--wp--preset--spacing--20, 0.25rem);
}

.toe-mcp-guide__title {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--xx-large, 2.592rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
}

.toe-mcp-guide__lede {
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    line-height: 1.4;
    max-width: 60ch;
    margin: 0;
}

.toe-mcp-guide__h3 {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--x-large, 1.8rem);
    font-weight: 800;
    margin: 0 0 var(--wp--preset--spacing--40, 1rem);
}

.toe-mcp-guide__body {
    font-size: var(--wp--preset--font-size--medium, 1.25rem);
    line-height: 1.5;
    max-width: 68ch;
    margin: 0 0 var(--wp--preset--spacing--40, 1rem);
}

.toe-mcp-guide__body--muted {
    font-size: var(--wp--preset--font-size--small, 1.042rem);
    color: var(--wp--preset--color--tertiary, #757575);
}

.toe-mcp-guide__notice {
    padding: var(--wp--preset--spacing--40, 1rem);
    border-radius: 6px;
    font-size: var(--wp--preset--font-size--small, 1.042rem);
    margin-block: var(--wp--preset--spacing--40, 1rem);
}

.toe-mcp-guide__notice--warn {
    background: rgba(251, 146, 60, 0.12);
    border-left: 3px solid #fb923c;
}

/* ── Stat tiles ───────────────────────────────────────────────────────────── */

.toe-mcp-guide__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--wp--preset--spacing--40, 1rem);
    list-style: none;
    margin: 0 0 var(--wp--preset--spacing--50, 2rem);
    padding: 0;
}

.toe-mcp-guide__stat {
    padding: var(--wp--preset--spacing--40, 1rem);
    border-top: 2px solid var(--wp--preset--color--primary, #296DEB);
    background: rgba(41, 109, 235, 0.04);
}

.toe-mcp-guide__stat-value {
    display: block;
    font-family: Orbitron, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.toe-mcp-guide__stat-label {
    display: block;
    margin-top: var(--wp--preset--spacing--20, 0.25rem);
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--tertiary, #757575);
}

/* ── Architecture diagram ─────────────────────────────────────────────────── */

.toe-mcp-guide__figure {
    margin: 0;
}

.toe-mcp-guide__diagram {
    width: 100%;
    height: auto;
    overflow: visible;
}

.toe-mcp-guide__diagram text {
    font-family: Manrope, sans-serif;
    font-size: 11px;
    fill: var(--wp--preset--color--secondary, #2e2e2e);
}

.toe-mcp-guide__diagram-strong {
    font-weight: 800;
    font-size: 12px;
}

.toe-mcp-guide__diagram-sources rect {
    fill: rgba(117, 117, 117, 0.1);
    stroke: rgba(117, 117, 117, 0.4);
}

.toe-mcp-guide__diagram-core rect {
    fill: rgba(41, 109, 235, 0.08);
    stroke: var(--wp--preset--color--primary, #296DEB);
    stroke-width: 1.5;
}

.toe-mcp-guide__diagram-agent rect {
    fill: rgba(0, 200, 83, 0.08);
    stroke: #00c853;
    stroke-width: 1.5;
}

.toe-mcp-guide__diagram-flow path {
    fill: none;
    stroke: rgba(117, 117, 117, 0.5);
    stroke-width: 1.2;
}

.toe-mcp-guide__caption {
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    color: var(--wp--preset--color--tertiary, #757575);
    margin-top: var(--wp--preset--spacing--30, 0.5rem);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.toe-mcp-guide__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30, 0.5rem);
    margin-block: var(--wp--preset--spacing--40, 1rem);
}

.toe-mcp-guide__button {
    display: inline-block;
    padding: 1.0625rem 2.125rem;
    background: var(--wp--preset--color--contrast, #000000);
    color: var(--wp--preset--color--base, #ffffff);
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.1s ease;
}

.toe-mcp-guide__button:hover,
.toe-mcp-guide__button:focus {
    background: var(--wp--preset--color--primary, #296DEB);
    outline: 1px dotted var(--wp--preset--color--primary, #296DEB);
    outline-offset: 2px;
    color: var(--wp--preset--color--base, #ffffff);
}

.toe-mcp-guide__button--ghost {
    background: transparent;
    color: var(--wp--preset--color--contrast, #000000);
    border: 1px solid var(--wp--preset--color--contrast, #000000);
}

/* ── Code blocks ──────────────────────────────────────────────────────────── */

.toe-mcp-guide__code {
    position: relative;
    background: #1e1e1e;
    border-radius: 6px;
    padding: var(--wp--preset--spacing--40, 1rem);
    padding-inline-end: 5.5rem;
    margin-block: var(--wp--preset--spacing--30, 0.5rem) var(--wp--preset--spacing--40, 1rem);
    overflow-x: auto;
}

.toe-mcp-guide__code code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #e6e6e6;
    white-space: pre-wrap;
    word-break: break-word;
    background: none;
    padding: 0;
}

.toe-mcp-guide__code--key code {
    color: #00e676;
}

.toe-mcp-guide__copy {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    padding: 0.3rem 0.7rem;
    font-family: Manrope, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #e6e6e6;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
}

.toe-mcp-guide__copy:hover {
    background: rgba(255, 255, 255, 0.2);
}

.toe-mcp-guide__copy.is-copied {
    color: #00e676;
    border-color: #00e676;
}

/* ── Use cases ────────────────────────────────────────────────────────────── */

.toe-mcp-guide__case {
    padding: var(--wp--preset--spacing--40, 1rem);
    border-inline-start: 3px solid var(--wp--preset--color--primary, #296DEB);
    background: rgba(41, 109, 235, 0.04);
    margin-block: var(--wp--preset--spacing--40, 1rem);
}

.toe-mcp-guide__case-title {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--medium, 1.25rem);
    font-weight: 800;
    margin: 0 0 var(--wp--preset--spacing--20, 0.25rem);
}

.toe-mcp-guide__case-prompt {
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
    padding: 0;
    border: 0;
    font-size: var(--wp--preset--font-size--medium, 1.25rem);
    font-style: italic;
    line-height: 1.45;
}

.toe-mcp-guide__case-note {
    font-size: var(--wp--preset--font-size--small, 1.042rem);
    color: var(--wp--preset--color--tertiary, #757575);
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
}

.toe-mcp-guide__case-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.toe-mcp-guide__chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: rgba(41, 109, 235, 0.12);
    color: var(--wp--preset--color--primary, #296DEB);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
}

/* ── Tool catalogue ───────────────────────────────────────────────────────── */

.toe-mcp-guide__group {
    font-family: Orbitron, sans-serif;
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    font-weight: 800;
    margin: var(--wp--preset--spacing--60, 2rem) 0 var(--wp--preset--spacing--30, 0.5rem);
}

.toe-mcp-guide__tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--wp--preset--spacing--40, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.toe-mcp-guide__tool {
    padding: var(--wp--preset--spacing--40, 1rem);
    border: 1px solid rgba(117, 117, 117, 0.25);
    border-radius: 6px;
}

.toe-mcp-guide__tool-name {
    margin: 0 0 var(--wp--preset--spacing--20, 0.25rem);
    font-size: var(--wp--preset--font-size--small, 1.042rem);
}

.toe-mcp-guide__tool-name code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--wp--preset--color--primary, #296DEB);
    background: none;
    padding: 0;
}

.toe-mcp-guide__tool-title {
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
    font-weight: 800;
    font-size: var(--wp--preset--font-size--small, 1.042rem);
}

.toe-mcp-guide__tool-desc {
    margin: 0 0 var(--wp--preset--spacing--30, 0.5rem);
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    line-height: 1.5;
    color: var(--wp--preset--color--tertiary, #757575);
}

.toe-mcp-guide__args {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
}

.toe-mcp-guide__args dt {
    margin-top: var(--wp--preset--spacing--20, 0.25rem);
}

.toe-mcp-guide__args dt code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    background: none;
    padding: 0;
}

.toe-mcp-guide__args dd {
    margin: 0 0 var(--wp--preset--spacing--20, 0.25rem);
    color: var(--wp--preset--color--tertiary, #757575);
}

.toe-mcp-guide__arg-type,
.toe-mcp-guide__arg-req {
    display: inline-block;
    margin-inline-start: 0.35em;
    padding: 0.05rem 0.4rem;
    border-radius: 9999px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.toe-mcp-guide__arg-type {
    background: rgba(117, 117, 117, 0.15);
    color: var(--wp--preset--color--tertiary, #757575);
}

.toe-mcp-guide__arg-req {
    background: rgba(255, 23, 68, 0.12);
    color: #ff1744;
}

.toe-mcp-guide__args-none {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    color: var(--wp--preset--color--tertiary, #757575);
}

/* ── Ground rules ─────────────────────────────────────────────────────────── */

.toe-mcp-guide__notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--wp--preset--spacing--30, 0.5rem);
    max-width: 72ch;
}

.toe-mcp-guide__notes li {
    font-size: var(--wp--preset--font-size--small, 1.042rem);
    line-height: 1.5;
    padding-inline-start: var(--wp--preset--spacing--30, 0.5rem);
    border-inline-start: 2px solid rgba(117, 117, 117, 0.3);
}

/* ── Dark scheme ──────────────────────────────────────────────────────────── */

.toe-mcp-guide[data-scheme="dark"] {
    color: #e6e6e6;
}

.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__title,
.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__h3,
.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__group,
.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__stat-value,
.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__case-title,
.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__tool-title {
    color: #ffffff;
}

.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__diagram text {
    fill: #cbd5e1;
}

.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__tool {
    border-color: rgba(203, 213, 225, 0.2);
}

.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__button {
    background: var(--wp--preset--color--primary, #296DEB);
    color: #ffffff;
}

.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__button--ghost {
    background: transparent;
    border-color: rgba(203, 213, 225, 0.4);
    color: #e6e6e6;
}

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .toe-mcp-guide__tools {
        grid-template-columns: 1fr;
    }

    .toe-mcp-guide__code {
        padding-inline-end: var(--wp--preset--spacing--40, 1rem);
    }

    .toe-mcp-guide__copy {
        position: static;
        margin-top: var(--wp--preset--spacing--30, 0.5rem);
    }
}

.toe-mcp-guide__subhead {
    font-family: Manrope, sans-serif;
    font-size: var(--wp--preset--font-size--medium, 1.25rem);
    font-weight: 800;
    margin: var(--wp--preset--spacing--50, 2rem) 0 var(--wp--preset--spacing--20, 0.25rem);
}

.toe-mcp-guide[data-scheme="dark"] .toe-mcp-guide__subhead {
    color: #ffffff;
}

/* ── Supply footprint (click a refinery / terminal / market) ──────────── */
.toe-map--footprint .leaflet-overlay-pane,
.toe-map--footprint .leaflet-toePadd-pane,
.toe-map--footprint .leaflet-toeMarine-pane,
.toe-map--footprint .leaflet-toeEthanol-pane,
.toe-map--footprint .leaflet-toeRefineries-pane { opacity: 0.18; transition: opacity 0.6s ease; }
.toe-map__fp-bar {
    position: absolute;
    left: 12px;
    bottom: 28px;
    z-index: 800;
    max-width: min(560px, calc(100% - 24px));
    background: rgba(10, 14, 23, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Manrope', sans-serif;
    color: #e8edf6;
    font-size: var(--wp--preset--font-size--x-small, 0.868rem);
    line-height: 1.4;
}
.toe-map__fp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.toe-map__fp-dir { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #8a94a8; }
.toe-map__fp-name { font-weight: 800; }
.toe-map__fp-link { color: #7fa8f5; text-decoration: none; font-weight: 700; }
.toe-map__fp-link:hover { text-decoration: underline; }
.toe-map__fp-clear {
    margin-left: auto; background: none; border: 0; color: #b6c0d4; font-size: 20px; line-height: 1;
    cursor: pointer; padding: 0 2px;
}
.toe-map__fp-clear:hover { color: #ffffff; }
.toe-map__fp-counts { margin-top: 2px; color: #b6c0d4; font-weight: 600; }
.toe-map__fp-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.toe-map__fp-key { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.toe-map__fp-key i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.toe-map__fp-note { margin-top: 6px; font-size: 11px; color: #8a94a8; }
.toe-map__fp-loading { color: #b6c0d4; font-weight: 700; }
@keyframes toe-fp-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.35; } }
@media (prefers-reduced-motion: no-preference) { .toe-map__fp-focus { animation: toe-fp-pulse 1.6s ease-in-out infinite; } }

/* Footprint navigation: Back to map / Back to <previous entity>. */
.toe-map__fp-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.toe-map__fp-navbtn {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 6px 12px; border-radius: 9999px; cursor: pointer;
    background: rgba(91, 143, 240, 0.14); border: 1px solid rgba(91, 143, 240, 0.45); color: #cfe0ff;
    font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toe-map__fp-navbtn--page { text-decoration: none; background: rgba(240, 165, 0, 0.14); border-color: rgba(240, 165, 0, 0.5); color: #ffd98a; }
.toe-map__fp-navbtn:hover,
.toe-map__fp-navbtn:focus-visible { background: var(--wp--preset--color--primary, #296DEB); border-color: var(--wp--preset--color--primary, #296DEB); color: #ffffff; outline: none; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-navbtn,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-navbtn { background: rgba(41, 109, 235, 0.08); border-color: rgba(41, 109, 235, 0.4); color: #1f4fb0; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-navbtn:hover,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-navbtn:hover { color: #ffffff; background: var(--wp--preset--color--primary, #296DEB); }

.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-bar,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-bar { background: rgba(255, 255, 255, 0.94); border-color: #cbd5e1; color: #0b1220; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-counts,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-counts,
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-clear,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-clear { color: #3a4456; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-link,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-link { color: #296DEB; }

/* Footprint build: lines draw along their length, points pop, dashed legs fade.
   Per-element delays/durations are set by the map script. */
@media (prefers-reduced-motion: no-preference) {
    .toe-map__fp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: toe-fp-draw 1s ease-out both; }
    .toe-map__fp-pop { transform-box: fill-box; transform-origin: center; animation: toe-fp-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
    .toe-map__fp-fade { animation: toe-fp-in 0.8s ease-out both; }
}
@keyframes toe-fp-draw { to { stroke-dashoffset: 0; } }
@keyframes toe-fp-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toe-fp-in { from { opacity: 0; } to { opacity: 1; } }
/* Keep the summary bar clear of the side panel when it's open. */
.toe-map__detail-panel--open ~ .toe-map__fp-bar { max-width: min(560px, calc(100% - 340px)); }

/* The fullscreen map keeps its PADD key in the same corner: sit above it. */
.toe-fullscreen-map .toe-map__fp-bar { bottom: 74px; }

/* Rack market card: the market's figures roll through one at a time, over a
   key to the trade-area shading. */
.toe-map__fp-market { width: 300px; max-width: 100%; margin: 6px 0 8px; }
.toe-map__fp-roll { position: relative; height: 68px; overflow: hidden; }
.toe-map__fp-stat {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    opacity: 0; transform: translateY(100%); transition: transform 0.45s ease, opacity 0.45s ease;
}
.toe-map__fp-stat.is-on { opacity: 1; transform: none; }
.toe-map__fp-stat.is-out { opacity: 0; transform: translateY(-100%); }
.toe-map__fp-stat-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #8a94a8; }
.toe-map__fp-stat-value { font-size: 22px; font-weight: 800; line-height: 1.2; color: #ffffff; }
.toe-map__fp-stat-note { font-size: 11px; color: #b6c0d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toe-map__fp-roll-nav { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: #8a94a8; }
.toe-map__fp-roll-nav button {
    width: 22px; height: 22px; padding: 0; border-radius: 9999px; cursor: pointer;
    background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: inherit; font-size: 14px; line-height: 1;
}
.toe-map__fp-roll-nav button:hover,
.toe-map__fp-roll-nav button:focus-visible { background: var(--wp--preset--color--primary, #296DEB); border-color: var(--wp--preset--color--primary, #296DEB); color: #ffffff; outline: none; }
.toe-map__fp-area-key { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 11px; color: #b6c0d4; }
.toe-map__fp-area-key i { flex-shrink: 0; width: 12px; height: 10px; border: 1px solid rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.14); }
.toe-map__fp-area-key i:nth-child(2) { background: rgba(59, 130, 246, 0.32); }
.toe-map__fp-area-key i:nth-child(3) { background: rgba(59, 130, 246, 0.5); }
.toe-map__fp-area-key span { margin-left: 5px; }
.toe-map__fp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
    .toe-map__fp-stat,
    .toe-map__fp-stat.is-out { transform: none; transition: opacity 0.45s ease; }
}
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-stat-value,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-stat-value { color: #0b1220; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-stat-label,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-stat-label,
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-roll-nav,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-roll-nav { color: #6b7385; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-stat-note,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-stat-note,
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-area-key,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-area-key { color: #3a4456; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-roll-nav button,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-roll-nav button { border-color: #cbd5e1; }

/* Footprint section in the side panel. */
.toe-map__fp-panel-counts { font-size: 12px; font-weight: 700; color: #e0e0e0; margin: -2px 0 10px; }
.toe-map__fp-swatch { flex-shrink: 0; width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.toe-map__fp-sys .toe-map__detail-conn-name small,
.toe-map__fp-row .toe-map__detail-conn-name small { display: block; color: rgba(255, 255, 255, 0.45); font-weight: 500; white-space: normal; }
.toe-map__fp-row { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.toe-map__fp-row .toe-map__detail-conn-name { white-space: normal; }
.toe-map__fp-more { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin: 4px 0 0 8px; }
.toe-map__fp-panel-note { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin: 12px 0 8px; line-height: 1.4; }
/* NGL / LPG-only movements (propane, butane): dashed lilac, kept out of fuel counts. */
.toe-map__fp-key--ngl i,
.toe-map__fp-ngl-swatch { background: repeating-linear-gradient(90deg, #c4b5fd 0 4px, transparent 4px 8px); }
.toe-map__fp-ngl-swatch { flex-shrink: 0; width: 18px; height: 4px; border-radius: 2px; display: inline-block; margin-top: 6px; }
.toe-map__fp-ngl-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed rgba(196, 181, 253, 0.45); border-radius: 6px; font-size: 11px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.toe-map__fp-ngl-note strong { color: #c4b5fd; }
.toe-map__fp-panel-link { font-size: 12px; font-weight: 700; color: #7fa8f5; text-decoration: none; }
.toe-map__fp-panel-link:hover { text-decoration: underline; }
.toe-map__detail-body--footprint .toe-map__detail-empty { display: none; }
.toe-map__detail-body--footprint #toe-detail-footprint .toe-map__detail-empty { display: block; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-panel-counts,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-panel-counts { color: #0b1220; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-sys .toe-map__detail-conn-name small,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-sys .toe-map__detail-conn-name small,
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-row .toe-map__detail-conn-name small,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-row .toe-map__detail-conn-name small,
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-panel-note,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-panel-note { color: #6b7385; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-ngl-note,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-ngl-note { color: #475569; border-color: #a78bfa; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-ngl-note strong,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-ngl-note strong { color: #6d28d9; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-panel-link,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-panel-link { color: #296DEB; }

/* Consistent drill-down in the side panel: every facility row is a button with a chevron. */
.toe-map__drill,
.toe-map__fp-row { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; position: relative; padding-right: 22px; }
.toe-map__drill::after,
.toe-map__fp-row::after { content: '\203A'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.35); font-size: 16px; }
.toe-map__drill:hover::after,
.toe-map__fp-row:hover::after { color: #7fa8f5; }
.toe-map__drill:focus-visible,
.toe-map__fp-row:focus-visible,
.toe-map__fp-sys:focus-visible { outline: 2px solid #7fa8f5; outline-offset: 1px; }
.toe-map__fp-sys { cursor: pointer; }
.toe-map__fp-sys.is-isolated { background: rgba(127, 168, 245, 0.14); }
.toe-map__fp-sys.is-dimmed { opacity: 0.45; }
.toe-map__fp-page { margin-left: auto; color: #7fa8f5; text-decoration: none; font-size: 14px; padding: 0 2px; }
.toe-map__fp-page:hover { color: #ffffff; }
.toe-map__fp-hint { font-weight: 500; opacity: 0.6; font-size: 11px; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__drill::after,
.toe-energy-dashboard[data-scheme="light"] .toe-map__drill::after,
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-row::after,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-row::after { color: #6b7385; }
.toe-fullscreen-map[data-scheme="light"] .toe-map__fp-page,
.toe-energy-dashboard[data-scheme="light"] .toe-map__fp-page { color: #296DEB; }