/* `light-dark()` follows `color-scheme`, which tracks the OS until a theme is chosen
   via `data-theme` on <html>. */
:root {
    color-scheme: light dark;

    --color-page: light-dark(#f8f9fa, #2d2d2d);
    --color-card: light-dark(#fff, #1a1a1a);
    --color-inset: light-dark(#f1f3f5, #262626);
    --color-text: light-dark(#2c3e50, #e4e4e7);
    --color-text-muted: light-dark(#495057, #a1a1aa);
    --color-text-subtle: light-dark(#6c757d, #8b8b94);
    --color-border: light-dark(#dee2e6, #404040);
    --color-accent: light-dark(#3b82f6, #60a5fa);
    --color-link: light-dark(#1d4ed8, #93c5fd);
    --color-up: light-dark(#dc2626, #f87171);
    --color-down: light-dark(#15803d, #4ade80);
    --color-flat: light-dark(#6b7280, #9ca3af);
    --color-warning: light-dark(#b45309, #fbbf24);
    --color-warning-bg: light-dark(#fffbeb, #3a2e12);
    --color-error: light-dark(#dc2626, #f87171);
    --color-error-bg: light-dark(#fef2f2, #3f1d1d);
    --shadow-card: 0 4px 6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));

    /* Price bands, matching `PriceBand` */
    --color-band-negative: light-dark(#15803d, #4ade80);
    --color-band-1: light-dark(#00b4a0, #22d3b3);
    --color-band-2: light-dark(#648fff, #7ba3ff);
    --color-band-3: light-dark(#785ef0, #9b7ef5);
    --color-band-4: light-dark(#dc267f, #ff4d9f);
    --color-band-5: light-dark(#fe6100, #ff8033);
    --color-band-6: light-dark(#ffb000, #ffc733);
    --radius: 12px;
    --radius-inner: 8px;
    --gap: clamp(14px, 1vw + 10px, 28px);
    --card-padding: clamp(14px, 1.5vw + 8px, 28px);
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

.band-negative { --band: var(--color-band-negative); }
.band-1 { --band: var(--color-band-1); }
.band-2 { --band: var(--color-band-2); }
.band-3 { --band: var(--color-band-3); }
.band-4 { --band: var(--color-band-4); }
.band-5 { --band: var(--color-band-5); }
.band-6 { --band: var(--color-band-6); }

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-page);
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
    margin: 0;
}

a {
    color: var(--color-link);
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

/* Layout */

.app {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    max-width: 1400px;
    min-height: 100dvh;
    padding: clamp(12px, 2vw, 32px);
    margin: 0 auto;
}

.app-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    justify-content: space-between;
}

.app-header h1 {
    font-size: clamp(1.35rem, 1rem + 1.6vw, 2.5rem);
    line-height: 1.15;
}

.header-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

@media (width <= 600px) {
    .header-controls {
        width: 100%;
    }

    .header-controls .select-wrap {
        flex: 1;
    }

    .header-controls .region-select {
        width: 100%;
        max-width: none;
    }
}

.app-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gap);
}

@media (width >= 1100px) {
    .app-main {
        display: grid;
        grid-template-columns: 2fr 3fr;
        align-content: start;
    }

    .app-main > * {
        grid-column: 1 / -1;
    }

    .app-main > .tracker-card {
        grid-column: 1;
    }

    .app-main > .carbon-card {
        grid-column: 2;
    }
}

.card {
    padding: var(--card-padding);
    background: var(--color-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: background-color 0.2s ease;
}

.card > h2 {
    margin-bottom: 16px;
    font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.6rem);
}

.app-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Controls */

.control {
    min-height: 44px;
    padding: 0 12px;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-inner);
    box-shadow: var(--shadow-card);
}

.control:hover {
    background: var(--color-inset);
}

.icon-button {
    min-width: 44px;
    font-size: 1.2rem;
    line-height: 1;
}

.select-wrap {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.select-wrap::after {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 10px;
    height: 6px;
    pointer-events: none;
    content: "";
    background: var(--color-text-subtle);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    translate: 0 -50%;
}

.region-select {
    max-width: min(70vw, 300px);
    padding-right: 34px;
    text-overflow: ellipsis;
    appearance: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-inner);
    box-shadow: var(--shadow-card);
}

.link-button {
    padding: 0;
    font: inherit;
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
}

/* Loading and status */

.skeleton {
    height: var(--skeleton-height, 120px);
    background: linear-gradient(90deg, var(--color-inset) 30%, var(--color-border) 50%, var(--color-inset) 70%) 0 0 / 300% 100%;
    border-radius: var(--radius-inner);
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

.now-card { --skeleton-height: 120px; }
.agile-card { --skeleton-height: 190px; }
.chart-card { --skeleton-height: 400px; }
.tracker-card { --skeleton-height: 90px; }
.carbon-card { --skeleton-height: 200px; }

.notice {
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--color-inset);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-inner);
}

.notice:last-child {
    margin-bottom: 0;
}

.notice-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.notice-error {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

/* Stats */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 84px), 1fr));
    gap: clamp(8px, 1vw, 12px);
}

.stat {
    padding: 14px clamp(8px, 1.5vw, 16px);
    text-align: center;
    background: var(--color-inset);
    border-radius: var(--radius-inner);
}

.stat dt,
.stat h3 {
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-value {
    font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stat-highlight {
    box-shadow: inset 4px 0 0 var(--color-accent);
}

/* Current price row */

.now-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 12px);
}

@media (width <= 720px) {
    .now-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .now-tiles .stat-now {
        grid-column: 1 / -1;
    }
}

.now-tiles .stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.now-tiles .stat-value {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
    line-height: 1.15;
    white-space: nowrap;
}

@media (width <= 480px) {
    .now-tiles .stat-value {
        font-size: 1.25rem;
    }
}

.stat-now {
    box-shadow: inset 6px 0 0 var(--band, transparent);
}

.window-label {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    justify-content: center;
}

.stepper {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.stepper-value {
    min-width: 4.6em;
    white-space: nowrap;
}

@media (width <= 480px) {
    .stat .window-label {
        letter-spacing: 0.02em;
    }

    .stepper {
        gap: 4px;
    }
}

.stepper-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 50%;
}

/* Enlarges the tap target to 44px without changing the visible size */
.stepper-button::before {
    position: absolute;
    inset: -10px;
    content: "";
}

.stepper-button:hover:not(:disabled) {
    background: var(--color-inset);
    border-color: var(--color-text-subtle);
}

.stepper-button:disabled {
    cursor: default;
    opacity: 0.4;
}

.stat-unit {
    margin-left: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.stat-sub {
    margin-top: 4px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.delta {
    font-size: 0.85em;
    font-weight: 600;
}

.delta-up {
    color: var(--color-up);
}

.delta-down {
    color: var(--color-down);
}

/* Price history */

.history-card {
    --skeleton-height: 80px;

    padding-block: clamp(12px, 1vw + 8px, 20px);
}

.history-trace {
    display: block;
    width: 100%;
    height: 80px;
}

.history-trace path {
    fill: none;
    stroke: var(--color-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}


/* Agile summary */

.day-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--gap);
}

.day-card {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.day-card.highlight {
    border-left: 4px solid var(--color-accent);
}

@media (width <= 480px) {
    .day-card {
        padding: 12px;
    }
}

.day-card h3 {
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.placeholder {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Price chart */

.price-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 1.6em;
    font-variant-numeric: tabular-nums;
}

.swatch {
    display: inline-block;
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--band);
    border-radius: 3px;
}

.chart-body {
    display: grid;
    grid-template-rows: clamp(220px, 30vw, 340px) auto;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
}

.chart-y {
    position: relative;
    min-width: 2.5em;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-subtle);
    text-align: right;
}

.chart-y span {
    position: absolute;
    right: 0;
    translate: 0 -50%;
}

.chart-plot {
    position: relative;
    cursor: crosshair;
    touch-action: pan-y;
    border-radius: 4px;
}

.chart-plot svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-x {
    position: relative;
    grid-column: 2;
    height: 1.6em;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.chart-x span {
    position: absolute;
    top: 0;
    white-space: nowrap;
    translate: -50% 0;
}

.chart-x .day {
    font-weight: 600;
    color: var(--color-text);
}

@media (width <= 600px) {
    .chart-x .minor {
        display: none;
    }
}

.bar {
    fill: var(--band);
}

.bar.past {
    opacity: 0.35;
}

.bar.selected {
    opacity: 1;
    stroke: var(--color-text);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

.hit {
    fill: transparent;
}

.grid {
    stroke: var(--color-border);
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.grid.zero {
    stroke: var(--color-text-subtle);
    stroke-dasharray: none;
}

.day-divider {
    stroke: var(--color-text-subtle);
    vector-effect: non-scaling-stroke;
}


.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    list-style: none;
}

.chart-legend li {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* Carbon intensity */

.carbon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (width <= 720px) {
    .carbon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .carbon-trend {
        grid-column: 1 / -1;
    }
}

.carbon-value {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.carbon-unit {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.carbon-index-badge {
    display: inline-block;
    padding: 6px 14px;
    margin: 10px 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-inner);
}

/* Solid backgrounds that keep white text above 4.5:1 contrast */
.intensity-very-low { background: #047857; }
.intensity-low { background: #15803d; }
.intensity-moderate { background: #b45309; }
.intensity-high { background: #c2410c; }
.intensity-very-high { background: #b91c1c; }

.carbon-time {
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.carbon-trend {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.trend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    font-weight: 600;
}

.trend-icon {
    font-size: 2rem;
    line-height: 1;
}

.trend-up {
    color: var(--color-up);
}

.trend-down {
    color: var(--color-down);
}

.trend-flat {
    color: var(--color-flat);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0s !important;
        animation: none !important;
    }
}