/* ============================================================
   EnergyExperts — Account-Tab "Finanzen" (P37)

   Uses the design tokens of the account dashboard
   (assets/css/ee-create-account.css :root) and its existing classes
   (.btn, .card for the price curves). Everything below is layout — no new
   token set, no colour invented, no framework.

   THE SHAPE OF THIS PAGE
   ----------------------
   Grouped cards in ONE column of ONE measure, the way a system settings
   panel is built. The page has exactly one content width
   (--ee-fs-page-width): heading, lead paragraph, search line and every
   group card end on the SAME right edge. The previous round had two —
   the lead ran the full window while the rows stopped 420 pixels short of
   the container edge, which is what made the page look cut off rather than
   composed.

   Each group is its own rounded body with air around it; its heading sits
   ABOVE the card in sentence case. One setting is one ROW inside a card:
   label left, value right on a fixed value column, so the value edge is a
   single vertical line down the whole page. The explanation sits behind an
   (i) in the LAST lane of the row -- one x for all rows -- and opens a
   popover with three sections (meaning, application, example).

   NO WHITE STRIPS ON A GREY PAGE
   ------------------------------
   The account page is grey (--surface); its cards are white. Nothing that
   is not a card may paint white: the sticky search line used to, and the
   sticky section headings used to, and both showed up as white bars
   sliding over the rows while scrolling ("Speicher" over "Gruener
   Speicher"). The headings do not stick any more -- there is nothing they
   have to clear -- and the search line sticks on a translucent page-colour
   blur, so it never reads as a strip.

   WHAT IS ALLOWED TO BE LOUD
   --------------------------
   Exactly one thing: the dot that marks a value deviating from the
   standard (var(--warning)). That is the promise of the page. Everything
   else is greyscale, fields are tinted rather than white-on-white, and
   borders only appear under the pointer or the focus.

   THE hidden RULES AT THE TOP ARE NOT COSMETICS
   ---------------------------------------------
   `[hidden] { display: none }` lives in the USER AGENT stylesheet, and an
   AUTHOR rule beats the user agent whatever its specificity. The portal
   ships an HTML5 reset with

       article, aside, footer, header, hgroup, nav, section { display: block }

   and this page lays its groups out as <section>. Without the rules below
   a filtered-away section stays on screen and the search looks broken --
   which is exactly the bug this file had.
   ============================================================ */

.ee-fs-page {
    /* ONE measure for the whole page. 52rem = 832 px of reading width: a
       label plus its value, and a lead paragraph that stays under ~90
       characters per line. */
    --ee-fs-page-width: 52rem;

    /* Height of the sticky search line -- one number, used as scroll margin
       of the deep link targets. */
    --ee-fs-toolbar-height: 3.25rem;

    /* The value column, measured on the NUMBER: 6rem of field plus its unit
       column. Every control ends on this column's right edge -- that edge is
       the only vertical line the eye needs down the whole page. */
    --ee-fs-value-width: 10.5rem;
    /* A choice text is a sentence, a number is two digits. The select keeps
       the same right edge and reaches further LEFT instead of forcing every
       number into a 290 pixel box. */
    --ee-fs-select-width: 18rem;
    /* A two digit number needs no more room than this. 6rem = 96 px. */
    --ee-fs-number-width: 6rem;
    /* The unit sits in its own column, so the units align as well. */
    --ee-fs-unit-width: 4rem;
    /* Same height for number field, select field and switch. */
    --ee-fs-control-height: 1.875rem;
    /* Reserved lane for the reset button. Reserved even when empty: a
       button appearing on hover must not move the value. */
    --ee-fs-action-width: 2.5rem;
    /* The (i) lane at the right edge -- the last column of every row. */
    --ee-fs-info-width: 1.75rem;
    /* Lane at the left edge for the deviation marker, reserved for the same
       reason -- every label starts on the same x, marked or not. */
    --ee-fs-marker-width: 0.875rem;
    /* Inner padding of a group card and the air between two cards. */
    --ee-fs-card-padding: 1rem;
    --ee-fs-card-gap: 1.75rem;

    max-width: var(--ee-fs-page-width);
}

/* THE data series palette of the plugin, defined ONCE, read by every chart
   through getComputedStyle (ee-finance-price-curves.js on the account page,
   eeFinanceUi.chart()/sparkline() in the project view). Quiet,
   distinguishable, no signal colours. The seven ROLES are the same
   everywhere (W3-B, Till 19.09.2026 -- the reader's expectation decides):
     1 solar / generation / feed-in  (yellow)   2 battery              (blue)
     3 self-consumption / load       (green)    4 curtailment, grid     (grey, HATCHED)
     5 curtailment, negative hours   (grey)     6 neutral / price / reference
     7 grid import / loss / outflow  (warm)
   The names live in eeFinanceUi.seriesOf() (widget-finance-ui.js); a widget
   names the role, never the number. Nothing else in this file names a colour.

   The values come in two tones because the palette sits on two very
   different surfaces: the light account page (.ee-fs-page) and the dark graphite
   glass of the project view (.ee-widget card, .ee-fullscreen-overlay). A
   graphite line on graphite glass is invisible, so the second block lifts
   the SAME six hues for the dark surface. Both tones live here, next to each
   other -- a widget never names a series colour itself. */
.ee-fs-page,
.ee-widget,
.ee-fullscreen-overlay {
    /* Light tone: yellow on white is weak, so solar is ochre here. */
    --ee-series-1: #a67c00;
    --ee-series-2: var(--primary-color, #1f4566);
    --ee-series-3: #4f7f5a;
    --ee-series-4: #9aa3ad;
    --ee-series-5: #5b6470;
    --ee-series-6: var(--text-primary, #1a1a1a);
    --ee-series-7: #b3703b;
    --ee-series-count: 7;
}

.ee-widget,
.ee-fullscreen-overlay {
    --ee-series-1: #f3c84a;
    --ee-series-2: #86b6e3;
    --ee-series-3: #8fd1a4;
    --ee-series-4: rgba(255, 255, 255, 0.55);
    --ee-series-5: rgba(255, 255, 255, 0.38);
    --ee-series-6: rgba(255, 255, 255, 0.92);
    --ee-series-7: var(--ee-fw-negative, #eba08d);
}

/* The kit tokens eeFinanceUi.chart() reads (--ee-fw-*), in the LIGHT tone of
   the account page. The dark tone lives in ee-widget-styles.css on .ee-widget
   / .ee-fullscreen-overlay; the kit falls back to that tone's whites when a
   surface defines nothing -- invisible on a light page. Same names, same
   meaning, the page's own colours; no third theme (E-M0, capture chart). */
.ee-fs-page {
    --ee-fw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --ee-fw-chart-grid: var(--border-light, #e5e7eb);
    --ee-fw-chart-tick: var(--text-secondary, #6b7280);
    --ee-fw-chart-tip-bg: var(--text-primary, #1a1a1a);
    --ee-fw-chart-tip-ink: var(--background, #ffffff);
    --ee-fw-spark-fill: 0.14;
    --ee-fw-accent: var(--primary-color, #1f4566);
    --ee-fw-ink-1: var(--text-primary, #1a1a1a);
    --ee-fw-ink-3: var(--text-secondary, #6b7280);
    --ee-fw-line: var(--border-light, #e5e7eb);
    --ee-fw-line-strong: var(--border-medium, #d1d5db);
    --ee-fw-wash: var(--surface, #f9f9f9);
    --ee-fw-ink-2: var(--text-primary, #1a1a1a);
    --ee-fw-ink-4: var(--text-secondary, #6b7280);
    --ee-fw-size-body: 0.75rem;
    --ee-fw-size-label: 0.6875rem;
    --ee-fw-weight-label: 600;
    --ee-fw-tracking-label: 0.02em;
    --ee-fw-space-1: 0.25rem;
    --ee-fw-space-2: 0.5rem;
    --ee-fw-space-3: 0.75rem;
    --ee-fw-space-4: 1rem;
    --ee-fw-radius: 8px;
    --ee-fw-radius-pill: 999px;

    /* Capture chart (E-M0): the bars stand BEHIND the lines, so they take the
       series colour at a low alpha; the future region is the hairline colour
       as a wash. Alphas, not colours. */
    --ee-pc-bar-alpha: 0.28;
    --ee-pc-future-wash-alpha: 0.4;
    /* The compact curve row: the three figure columns and the chevron lane. */
    --ee-pc-figure-width: 4.5rem;
    --ee-pc-chevron-width: 1.25rem;
    --ee-pc-row-height: 2.75rem;
}

.ee-fs [hidden],
.ee-fs-section[hidden],
.ee-fs-section.is-hidden,
.ee-fs-row[hidden],
.ee-fs-row.is-hidden,
.ee-fs-wrap[hidden],
.ee-fs-empty[hidden],
.ee-fs-loading[hidden] {
    display: none;
}

/* ---------- Head: title, one sentence, the search line ---------- */

.ee-fs-head { margin-bottom: 0.25rem; }

.ee-fs-title {
    margin: 0 0 0.375rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary, #1a1a1a);
}

.ee-fs-lede {
    /* Same measure as everything else on the page -- the lead is not allowed
       to be the one element that runs wider than the cards. */
    margin: 0 0 0.25rem;
    max-width: var(--ee-fs-page-width);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
}

/* ---------- Search line: part of the head, not a box of its own ---------- */

.ee-fs-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--ee-fs-toolbar-height);
    box-sizing: border-box;
    margin: 0 0 0.25rem;
    padding: 0;
    /* NOT white. The page behind the rows is --surface; the line takes that
       colour at three quarters and blurs what scrolls underneath, so it stays
       legible without ever becoming a strip that cuts the page. */
    background: color-mix(in srgb, var(--surface, #f9f9f9) 78%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.ee-fs-search {
    position: relative;
    flex: 1 1 14rem;
    max-width: 20rem;
    min-width: 8rem;
}

.ee-fs-search-input {
    width: 100%;
    height: var(--ee-fs-control-height);
    padding: 0 1.75rem 0 0.625rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius, 12px) / 2);
    background: var(--surface, #f9f9f9);
    color: var(--text-primary, #1a1a1a);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ee-fs-search-input::placeholder { color: var(--text-secondary, #6b7280); }
.ee-fs-search-input:hover { border-color: var(--border-light, #e5e7eb); }
.ee-fs-search-input:focus { border-color: var(--border-medium, #d1d5db); outline: none; }

.ee-fs-search-input:focus-visible,
.ee-fs-control:focus-visible,
.ee-fs-switch:focus-visible,
.ee-fs-reset:focus-visible,
.ee-fs-search-clear:focus-visible {
    outline: 2px solid var(--primary-color, #1f4566);
    outline-offset: 1px;
}

.ee-fs-search-clear {
    position: absolute;
    top: 50%;
    right: 0.125rem;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0 0.375rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
}

.ee-fs-search-clear[hidden] { display: none; }

.ee-fs-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    cursor: pointer;
}

/* The switch IS the checkbox (appearance: none), not a decoration next to a
   hidden one: the focus ring then lands on the element one actually sees,
   and a screen reader still gets a plain checkbox.

   The selector carries the element and the attribute on purpose: the account
   stylesheet sets `input[type="checkbox"] { width: 18px; height: 18px }`,
   which outranks a single class and squashed the switch into a circle. */
input[type="checkbox"].ee-fs-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.125rem;
    height: 1.25rem;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface, #f9f9f9);
    box-shadow: inset 0 0 0 1px var(--border-medium, #d1d5db);
    cursor: pointer;
}

input[type="checkbox"].ee-fs-switch::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--background, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    /* Movement as the answer to a click, nothing else on this page. */
    transition: transform 0.15s ease;
}

input[type="checkbox"].ee-fs-switch:checked {
    background: var(--text-primary, #1a1a1a);
    box-shadow: inset 0 0 0 1px var(--text-primary, #1a1a1a);
}
input[type="checkbox"].ee-fs-switch:checked::after { transform: translateX(0.875rem); }

.ee-fs-count,
.ee-fs-msg {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.ee-fs-msg.is-success { color: var(--success, #10b981); }
.ee-fs-msg.is-error   { color: var(--error, #ef4444); }

.ee-fs-loading {
    padding: 2rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

/* ---------- Groups: one card each, heading above it ---------- */

.ee-fs-section { margin-bottom: var(--ee-fs-card-gap); }

.ee-fs-section-title {
    /* Not sticky and without a background: a heading that sticks needs an
       opaque box, and that box was the white bar sliding over the rows. */
    position: static;
    margin: 0;
    padding: 0.5rem 0 0.375rem;
    background: none;
    color: var(--text-primary, #1a1a1a);
    /* Sentence case, not small caps in grey: the group name is a name, not a
       label for a label. */
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.4;
}

/* The card body of a group. */
.ee-fs-rows {
    padding: 0 0.5rem 0 var(--ee-fs-card-padding);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius, 12px);
    background: var(--background, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    scroll-margin-top: calc(var(--ee-fs-toolbar-height) + 3rem);
}

/* A deep link (#finanzen-tax) scrolls here and says so once. */
.ee-fs-section.is-targeted .ee-fs-rows {
    border-color: var(--border-medium, #d1d5db);
    box-shadow: 0 0 0 2px var(--border-medium, #d1d5db);
    animation: ee-fs-target 1.6s ease-out;
}

@keyframes ee-fs-target {
    from { background: var(--surface, #f9f9f9); }
    to   { background: var(--background, #ffffff); }
}

@media (prefers-reduced-motion: reduce) {
    .ee-fs-section.is-targeted .ee-fs-rows { animation: none; }
    input[type="checkbox"].ee-fs-switch::after,
    .ee-fs-info,
    .ee-fs-reset,
    .ee-fs-control { transition: none; }
}

/* ---------- One setting = one row ---------- */

.ee-fs-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) var(--ee-fs-value-width) var(--ee-fs-action-width) var(--ee-fs-info-width);
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.25rem 0;
    min-height: 2.375rem;
    border-top: 1px solid var(--border-light, #e5e7eb);
    /* Positioning context of the marker lane. */
    position: relative;
}

.ee-fs-row:first-child { border-top: none; }

/* Every lane is addressed EXPLICITLY. The reset button is display:none while
   a row sits on its standard; with auto placement the (i) would then slide
   into the reset lane and the last column would stand empty -- and the (i)
   of a deviating row would sit 36 pixels further right than its neighbours. */
.ee-fs-head      { grid-column: 1; grid-row: 1; }
.ee-fs-row-value { grid-column: 2; grid-row: 1; }
.ee-fs-reset     { grid-column: 3; grid-row: 1; }
.ee-fs-info      { grid-column: 4; grid-row: 1; }

.ee-fs-row.is-busy { opacity: 0.55; }

.ee-fs-row.is-error .ee-fs-control { border-color: var(--error, #ef4444); }

/* The one confirmation this page animates: the row that was just written. */
.ee-fs-row.is-saved { background: var(--surface, #f9f9f9); }

/* ---------- Left: marker lane, label, lock reason ---------- */

.ee-fs-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    /* The marker lane. Reserved whether or not this row deviates, so every
       label in the card starts on the same x. */
    padding: 0.125rem 0 0.125rem var(--ee-fs-marker-width);
    /* Only the scope hint ever wraps: it takes the full width and so lands
       on its own line under the label; the column gap stays for the label. */
    flex-wrap: wrap;
    row-gap: 0;
}

/* Why a row is locked on this level ("Wird im Projekt festgelegt"). Same
   voice as the provenance line of the popover, but visible without opening
   the row -- a lock without a reason looks like a defect. */
.ee-fs-scope-hint {
    flex: 1 0 100%;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-secondary, #6b7280);
}

/* Where a derived value comes from ("aus Anlage (999,4 kWp DC)"): same lane
   and voice as the scope hint, in the calm derived tone of its marker. */
.ee-fs-origin {
    color: var(--primary-color, #2563eb);
}

.ee-fs-origin[hidden] { display: none; }

.ee-fs-label {
    margin: 0;
    min-width: 0;
    flex: 0 1 auto;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--text-primary, #1a1a1a);
}

/* The (i) sits in the LAST lane of the row, so all of them stand on ONE
   vertical line down the page. Faint in rest, present under the pointer: a
   sign one cannot see is not a sign, and seventy-eight of them on the same x
   read as a rhythm, not as flicker. */
.ee-fs-info {
    width: var(--ee-fs-info-width);
    height: var(--ee-fs-info-width);
    padding: 0;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.ee-fs-info-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.ee-fs-row:hover .ee-fs-info,
.ee-fs-row:focus-within .ee-fs-info,
.ee-fs-info:hover,
.ee-fs-info[aria-expanded="true"] {
    opacity: 1;
    color: var(--text-primary, #1a1a1a);
}

.ee-fs-info:focus-visible {
    outline: 2px solid var(--primary-color, #1f4566);
    outline-offset: 1px;
}

/* ---------- The popover: one element on <body>, three sections ---------- */

.ee-fs-popover {
    position: fixed;
    /* ABOVE THE FULLSCREEN OVERLAY, ON PURPOSE.
       The popover lives on <body>, the fullscreen view is
       .ee-fullscreen-overlay with z-index 99999 (ee-widget-styles.css:702).
       With the former 1000 the popover opened correctly -- aria-expanded
       true, text rendered, display block -- and was painted BEHIND the
       overlay, so every explanation button in a fullscreen widget looked
       dead. Measured 23.09.2026 on staging, all eight buttons of the grid
       widget at once. Keep this above 99999. */
    z-index: 100010;
    /* Lives on <body>, outside .ee-fs-page, so its measure is written here:
       26rem = the width of a readable explanation, never wider than the
       window minus its margins. */
    --ee-fs-popover-width: 26rem;
    width: min(var(--ee-fs-popover-width), calc(100vw - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
    box-sizing: border-box;
    padding: 0.875rem 1rem 1rem;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius, 12px);
    background: var(--background, #ffffff);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
    color: var(--text-primary, #1a1a1a);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.ee-fs-popover[hidden] { display: none; }

.ee-fs-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.ee-fs-popover-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #1a1a1a);
}

.ee-fs-popover-close {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.125rem -0.25rem 0 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-secondary, #6b7280);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.ee-fs-popover-close:hover { color: var(--text-primary, #1a1a1a); }

.ee-fs-popover-close:focus-visible {
    outline: 2px solid var(--primary-color, #1f4566);
    outline-offset: 1px;
}

.ee-fs-popover-section + .ee-fs-popover-section { margin-top: 0.625rem; }

.ee-fs-popover-heading {
    margin: 0 0 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
}

.ee-fs-popover-text {
    margin: 0;
    color: var(--text-primary, #1a1a1a);
}

/* The example is set apart as the thing one can recalculate. */
.ee-fs-popover-section:last-of-type .ee-fs-popover-text {
    padding: 0.5rem 0.625rem;
    border-radius: calc(var(--radius, 12px) / 2);
    background: var(--surface, #f9f9f9);
    font-variant-numeric: tabular-nums;
}

.ee-fs-popover-foot {
    margin: 0.625rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light, #e5e7eb);
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* ---------- Deviation marker: the one loud element ---------- */

.ee-fs-mark {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    /* The only accent on the page. "Markiert ist nur, was vom Standard
       abweicht" is the sentence this dot has to carry. */
    background: var(--warning, #f59e0b);
    /* The readable wording stays in the title attribute and in the detail
       text; a word in the label line is what chopped the row up before. */
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.ee-fs-mark[hidden] { display: none; }

/* A value derived from the project's own calculation ("aus Projekt"): the
   calm tone, not the warning accent -- nobody typed it, the project said it. */
.ee-fs-mark--derived {
    background: var(--primary-color, #2563eb);
}

/* ---------- Right: the value ---------- */

.ee-fs-row-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.ee-fs-control-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--ee-fs-control-height);
    min-width: 0;
    flex: 1 1 auto;
}

.ee-fs-control {
    width: 100%;
    min-width: 0;
    height: var(--ee-fs-control-height);
    padding: 0 0.5rem;
    /* Tinted, not white on white: twenty white boxes under each other shout
       louder than any label on the page. */
    border: 1px solid transparent;
    /* Half the card radius: the token of the page, at the scale of a 30 pixel
       field. The full radius turns a one line field into a pill. */
    border-radius: calc(var(--radius, 12px) / 2);
    background: var(--surface, #f9f9f9);
    color: var(--text-primary, #1a1a1a);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.5;
    transition: border-color 0.15s ease;
}

/* The frame is the answer to a pointer or a focus, never a permanent state. */
.ee-fs-control:hover:not(:disabled) { border-color: var(--border-light, #e5e7eb); }
.ee-fs-control:focus { border-color: var(--border-medium, #d1d5db); outline: none; }

.ee-fs-control:disabled {
    background: transparent;
    color: var(--text-secondary, #6b7280);
}

/* The chevron belongs to a field one can open. A disabled select keeps the
   surface and loses the arrow. */
.ee-fs-select:has(:disabled)::after { display: none; }

/* Twenty pairs of spin buttons are twenty pairs of arrows nobody aimed at.
   The keyboard still steps the value. */
.ee-fs-control--number {
    -moz-appearance: textfield;
    appearance: textfield;
}

.ee-fs-control--number::-webkit-outer-spin-button,
.ee-fs-control--number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A number does not fill the value column: it keeps its own small width and
   right aligns inside it, so a two digit number is not a 290 pixel box. */
.ee-fs-control-wrap.is-numeric,
.ee-fs-control-wrap.is-switch {
    flex: 0 1 auto;
}

/* The select is wider than the column and hangs into the slack of the label
   side. Its right edge is the value edge like everyone else's -- the negative
   margin is what keeps it there without a second column width on the page. */
.ee-fs-control-wrap.is-select {
    flex: 0 0 auto;
    width: var(--ee-fs-select-width);
    margin-left: calc(var(--ee-fs-value-width) - var(--ee-fs-select-width));
}

/* A number is read from the right: the digits line up with the digits of
   the row above, and the unit sits where the eye leaves the number. The
   FIXED width is what makes that alignment hold -- a field that grows with
   its unit puts every right edge in a different place. */
.ee-fs-control-wrap.is-numeric .ee-fs-control {
    flex: 0 0 var(--ee-fs-number-width);
    width: var(--ee-fs-number-width);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ee-fs-control-wrap.is-numeric .ee-fs-unit {
    flex: 0 0 var(--ee-fs-unit-width);
    width: var(--ee-fs-unit-width);
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
}

/* The select carries the same surface, radius and height as the number field
   and draws its OWN chevron -- the system arrow is the one control on the
   page that would not belong to the portal. */
.ee-fs-select {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.ee-fs-select::after {
    content: '';
    position: absolute;
    right: 0.625rem;
    width: 0.375rem;
    height: 0.375rem;
    border-right: 1.5px solid var(--text-secondary, #6b7280);
    border-bottom: 1.5px solid var(--text-secondary, #6b7280);
    transform: translateY(-0.125rem) rotate(45deg);
    pointer-events: none;
}

.ee-fs-control--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.5rem;
    cursor: pointer;
}

.ee-fs-control--json {
    resize: vertical;
    height: auto;
    min-height: var(--ee-fs-control-height);
    padding: 0.25rem 0.5rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.ee-fs-unit {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}

/* ---------- The way back, in the lane at the right edge ---------- */

.ee-fs-reset {
    width: var(--ee-fs-action-width);
    height: var(--ee-fs-action-width);
    padding: 0;
    justify-self: end;
    border: none;
    border-radius: calc(var(--radius, 12px) / 2);
    background: none;
    color: var(--text-secondary, #6b7280);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    /* Present only while the row is touched or holds the focus. It keeps its
       lane either way, so nothing moves when it appears. */
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ee-fs-row:hover .ee-fs-reset,
.ee-fs-row:focus-within .ee-fs-reset { opacity: 1; }

.ee-fs-reset:hover { color: var(--text-primary, #1a1a1a); }
.ee-fs-reset[hidden] { display: none; }

.ee-fs-row-status {
    grid-column: 1 / -1;
    padding-left: var(--ee-fs-marker-width);
    font-size: 0.75rem;
    color: var(--error, #ef4444);
}

.ee-fs-row-status:empty { display: none; }

/* ---------- Mandatory legal notice of a chosen model (concept E) ---------- */

.ee-fs-notice {
    grid-column: 1 / -1;
    margin: 0.375rem 0;
    padding: 0.375rem 0.625rem;
    border-left: 3px solid var(--error, #ef4444);
    border-radius: 0 calc(var(--radius, 12px) / 2) calc(var(--radius, 12px) / 2) 0;
    background: var(--surface, #f9f9f9);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-primary, #1a1a1a);
}

.ee-fs-notice[hidden] { display: none; }

/* ---------- Nothing found ---------- */

.ee-fs-empty {
    margin: 1.5rem 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
}

/* ---------- Narrow screens: the value moves under its label ---------- */

@media (max-width: 700px) {
    .ee-fs-page {
        --ee-fs-value-width: auto;
        --ee-fs-action-width: 1.25rem;
    }

    .ee-fs-control-wrap.is-select {
        width: 100%;
        margin-left: 0;
    }

    .ee-fs-toolbar {
        height: auto;
        min-height: var(--ee-fs-toolbar-height);
        flex-wrap: wrap;
        padding: 0.5rem 0;
    }

    .ee-fs-row {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
        padding: 0.5rem 0;
    }

    /* One column: label above value; the two buttons leave the grid and sit
       in the top right corner of the row (absolute, below). */
    .ee-fs-head,
    .ee-fs-row-value { grid-column: 1; grid-row: auto; }
    .ee-fs-reset,
    .ee-fs-info { grid-column: auto; grid-row: auto; }

    .ee-fs-row-value { justify-content: flex-start; }

    .ee-fs-control-wrap { flex: 0 1 auto; }

    .ee-fs-control-wrap.is-numeric .ee-fs-control { text-align: left; }

    /* No pointer to hover with: the way back is simply there -- and it sits
       in the corner of the row instead of claiming a line of its own. */
    .ee-fs-reset {
        position: absolute;
        top: 0.375rem;
        right: var(--ee-fs-info-width);
        opacity: 1;
    }

    /* Only the (i) of a ROW leaves the grid; the (i) behind a curve's role
       badge stays inline where it stands. */
    .ee-fs-row > .ee-fs-info { opacity: 1; position: absolute; top: 0.375rem; right: 0; }

    /* Nothing to align with on one column: the unit follows its number. */
    .ee-fs-control-wrap.is-numeric .ee-fs-unit {
        flex: 0 0 auto;
        width: auto;
    }
}

/* ============================================================
   Preiskurven (P27) — same card, same tokens, same rhythm as the
   settings above. Nothing here invents a colour: the table borders
   and the badge reuse the variables of the account dashboard.
   ============================================================ */

/* Same body as a group card above: one page, one kind of container. The
   section no longer carries .card, whose 2rem padding and large radius were a
   second visual language on the same screen. */
.ee-pc {
    margin-top: 0.5rem;
    padding: 1.25rem;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius, 12px);
    background: var(--background, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.ee-pc .card-header { margin-bottom: 1rem; }

.ee-pc .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ee-pc .card-subtitle { font-size: 0.8125rem; line-height: 1.55; }

/* ---------- Toolbar: ONE quiet line ---------- */

/* The price curve card shares the toolbar class but not its job: nothing
   here filters a long list, so the bar neither sticks nor spans the card.
   Two buttons, the year and the scope segment stand on ONE line that does
   not wrap at 1200 px (the card is 832 px wide); the status message has a
   line of its own underneath, so a long sentence never pushes a button. */
.ee-pc .ee-pc-toolbar {
    position: static;
    flex-wrap: nowrap;
    gap: 0.625rem;
    margin: 0 0 0.25rem;
    padding: 0;
    height: auto;
    min-height: var(--ee-fs-control-height);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
}

.ee-pc .ee-pc-toolbar .btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.ee-pc-msg {
    min-height: 1.25rem;
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.ee-pc-msg:empty { margin-bottom: 0.5rem; }

/* E-M0: the backtest year, next to "Backtest bilden". */
.ee-pc-year {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-year[hidden] { display: none; }

.ee-pc-year-select {
    width: auto;
    min-width: 5.5rem;
}

/* The admin's choice for NEW curves (D.2): a two-way segment, pressed option
   = value. Hidden (attribute) for everybody who is not an EnergyExperts
   admin. Sits at the right end of the line. */
.ee-pc-scope {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    margin: 0 0 0 auto;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-scope[hidden] { display: none; }

.ee-pc-segment {
    display: inline-flex;
    height: var(--ee-fs-control-height);
    padding: 2px;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--ee-fw-radius-pill);
    background: var(--surface, #f9f9f9);
}

.ee-pc-segment-option {
    padding: 0 0.75rem;
    border: none;
    border-radius: var(--ee-fw-radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
}

.ee-pc-segment-option.is-on {
    background: var(--background, #ffffff);
    color: var(--text-primary, #1a1a1a);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}

.ee-pc-segment-option:focus-visible {
    outline: 2px solid var(--primary-color, #1f4566);
    outline-offset: 1px;
}

/* ---------- The chart above the list: every curve as one line ---------- */

.ee-pc-chart {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem 0.75rem;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius, 12px);
    background: var(--surface, #f9f9f9);
    /* Nothing inside a figure may run past its border -- the last line of
       defence behind the tables' own scroll wrappers. */
    overflow: hidden;
}

.ee-pc-chart[hidden] { display: none; }

.ee-pc-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.ee-pc-chart-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.ee-pc-chart-sub {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

/* Fixed height: a canvas without one grows with every resize event. */
.ee-pc-chart-canvas {
    position: relative;
    height: 15rem;
}

.ee-pc-chart-canvas canvas { max-height: 100%; }

/* The legend is our own list, not Chart.js's: it carries the origin word
   ("synthetisch", "SMARD", "Upload") behind every name, and the two line
   styles that the chart uses -- data years solid, continued years dashed. */
.ee-pc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-legend[hidden] { display: none; }

.ee-pc-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ee-pc-legend-swatch {
    display: inline-block;
    width: 1.125rem;
    height: 0;
    border-top: 2px solid currentColor;
}

.ee-pc-legend-swatch.is-dashed { border-top-style: dashed; }

/* Capture chart swatches: a diamond for the published value, a bar for the
   negative hours (the series colour at the bar alpha). */
.ee-pc-legend-swatch.is-diamond {
    width: 0.5rem;
    height: 0.5rem;
    border: none;
    background: currentColor;
    transform: rotate(45deg);
}

.ee-pc-legend-swatch.is-bar {
    width: 0.625rem;
    height: 0.75rem;
    border: none;
    border-radius: 1px;
    background: color-mix(in srgb, currentColor calc(var(--ee-pc-bar-alpha) * 100%), transparent);
}

.ee-pc-legend-name { color: var(--text-primary, #1a1a1a); }

/* A legend item wears the colour of its series; the chart reads it back from
   here, so the palette is spelled out exactly once (the tokens above). */
.ee-pc-legend-item.is-series-1 { color: var(--ee-series-1); }
.ee-pc-legend-item.is-series-2 { color: var(--ee-series-2); }
.ee-pc-legend-item.is-series-3 { color: var(--ee-series-3); }
.ee-pc-legend-item.is-series-4 { color: var(--ee-series-4); }
.ee-pc-legend-item.is-series-5 { color: var(--ee-series-5); }
.ee-pc-legend-item.is-series-6 { color: var(--ee-series-6); }
.ee-pc-legend-item.is-series-7 { color: var(--ee-series-7); }

.ee-pc-chart-empty {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
}

/* ---------- The capture chart (E-M0): what solar power is worth ---------- */

.ee-pc-capture-heading { min-width: 0; }

.ee-pc-capture-actions {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

/* The kit's CSV control on the light page: pill, hairline, page colours. */
.ee-pc-capture-actions .ee-fw-csv {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--ee-fw-line);
    border-radius: var(--ee-fw-radius-pill);
    background: transparent;
    font-size: var(--ee-fw-size-body);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ee-fw-ink-3);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
}

.ee-pc-capture-actions .ee-fw-csv:hover {
    border-color: var(--ee-fw-line-strong);
    color: var(--ee-fw-ink-1);
    background: var(--ee-fw-wash);
}

.ee-pc-capture-actions .ee-fw-csv:focus-visible {
    outline: 2px solid var(--ee-fw-accent);
    outline-offset: 2px;
}

.ee-pc-capture-actions .ee-fw-csv svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

/* ONE line above the chart, compact, never wrapping: six short words. */
.ee-pc-capture-legend {
    flex-wrap: nowrap;
    gap: 0 0.875rem;
    margin: 0.25rem 0 0.5rem;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
}

.ee-pc-capture-legend li { flex-shrink: 0; }

/* Taller than the price chart: three lines, bars and a second axis, plus the
   note inside the future region. */
.ee-pc-capture-canvas { height: 19rem; }

.ee-pc-capture-canvas[hidden] { display: none; }

/* The projection note again as text (the canvas is a picture). */
.ee-pc-capture-note {
    margin: 0.5rem 0 0;
    padding-left: 0.625rem;
    border-left: 2px dashed var(--border-medium, #d1d5db);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-capture-note[hidden] { display: none; }

/* ---------- Fold: a head line that opens a block underneath ---------- */

.ee-pc-fold {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-light, #e5e7eb);
}

.ee-pc-fold[hidden] { display: none; }

.ee-pc-fold-toggle,
.ee-pc-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    color: var(--text-primary, #1a1a1a);
    cursor: pointer;
}

.ee-pc-fold-toggle:hover,
.ee-pc-group-toggle:hover { color: var(--primary-color, #1f4566); }

.ee-pc-fold-toggle:focus-visible,
.ee-pc-group-toggle:focus-visible,
.ee-pc-row:focus-visible {
    outline: 2px solid var(--primary-color, #1f4566);
    outline-offset: -2px;
    border-radius: 6px;
}

/* The chevron: a rotated corner, turns on open. Motion only as the answer to
   the click; none at all under prefers-reduced-motion (below). */
.ee-pc-chevron {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.25rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    color: var(--text-secondary, #6b7280);
}

[aria-expanded="true"] > .ee-pc-chevron { transform: rotate(45deg); }

.ee-pc-capture-table { margin: 0 0 0.5rem; }

.ee-pc-capture-table[hidden] { display: none; }

/* The kit table (eeFinanceUi.table) in the LIGHT tone of the account page.
   ee-widget-styles.css -- the dark tone -- is not loaded here, so the page
   spells the table out with its own tokens: hairlines, tabular figures,
   numbers right, first column left. The wrapper scrolls INSIDE the card;
   nothing runs past the card edge. */
.ee-pc .ee-fw-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.ee-pc .ee-fw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ee-fw-size-body);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1.35;
    color: var(--text-secondary, #6b7280);
}

.ee-pc .ee-fw-table th,
.ee-pc .ee-fw-table td {
    padding: 0.3125rem 0.5rem;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    text-align: right;
    white-space: nowrap;
    vertical-align: bottom;
}

.ee-pc .ee-fw-table thead th {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary, #1a1a1a);
}

.ee-pc .ee-fw-table th:first-child,
.ee-pc .ee-fw-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

.ee-pc .ee-fw-table tbody tr:last-child th,
.ee-pc .ee-fw-table tbody tr:last-child td { border-bottom: none; }

.ee-pc .ee-fw-table-unit {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--text-secondary, #6b7280);
}

/* The one loud thing in the table: a deviation outside the tolerance. */
.ee-pc .ee-fw-table td.is-off {
    color: var(--warning, #f59e0b);
    font-weight: 600;
}

.ee-pc .ee-fw-table tr.is-without-shape td,
.ee-pc .ee-fw-table tr.is-without-shape th {
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}

/* The projected years (projection.scenarios[0]) below the measured ones:
   damped and italic like the dashed lines of the chart, opened by a spanning
   divider row that names the first projected year. */
.ee-pc .ee-fw-table tr.ee-fw-table-divider td {
    padding-top: 0.625rem;
    text-align: left;
    font-size: var(--ee-fw-size-body);
    font-style: normal;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    border-bottom: 1px dashed var(--border-medium, #d1d5db);
}

.ee-pc .ee-fw-table tr.is-projected td,
.ee-pc .ee-fw-table tr.is-projected th {
    /* One step quieter than the measured rows (which already use the
       secondary ink): the same ink at reduced opacity, no new colour. */
    color: color-mix(in srgb, var(--text-secondary, #6b7280) 72%, transparent);
    font-style: italic;
    font-weight: 400;
}

/* "nur gemessen": a quiet checkbox line above the table, present only when
   the answer carries projected years. */
.ee-pc-table-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.375rem;
    font-size: var(--ee-fw-size-label);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    user-select: none;
}

.ee-pc-table-filter-input {
    width: 0.8125rem;
    height: 0.8125rem;
    margin: 0;
    accent-color: var(--primary-color, #1f4566);
}

.ee-pc-table-filter:hover { color: var(--text-primary, #1a1a1a); }

/* The kit's zoom reset (eeFinanceUi.chart {zoom: true}) on the light page:
   top right inside the positioned canvas box, only while zoomed. */
.ee-pc-chart-canvas .ee-fw-chart-reset {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 1;
    padding: 0.1875rem 0.625rem;
    border: 1px solid var(--ee-fw-line);
    border-radius: var(--ee-fw-radius-pill);
    background: var(--background, #ffffff);
    font-family: inherit;
    font-size: var(--ee-fw-size-label);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ee-fw-ink-3);
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.ee-pc-chart-canvas .ee-fw-chart-reset:hover {
    border-color: var(--ee-fw-line-strong);
    color: var(--ee-fw-ink-1);
}

.ee-pc-chart-canvas .ee-fw-chart-reset:focus-visible {
    outline: 2px solid var(--ee-fw-accent);
    outline-offset: 2px;
}

.ee-pc-chart-canvas .ee-fw-chart-reset[hidden] { display: none; }

/* Two or three sentences for a reader who is not an energy economist. */
.ee-pc-capture-explain {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light, #e5e7eb);
}

.ee-pc-capture-explain:empty { display: none; }

.ee-pc-capture-sentence {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-capture-sentence:last-child { margin-bottom: 0; }

.ee-pc-capture-sentence.is-hint {
    color: var(--warning, #f59e0b);
}

/* ---------- The curve list: one row per curve, details on click ---------- */

.ee-pc-curve {
    border-top: 1px solid var(--border-light, #e5e7eb);
}

.ee-pc-group-body > .ee-pc-curve:first-child { border-top: none; }

/* The row is a button: name and badges left, three figures on fixed
   columns, the chevron in its own lane. Everything in one line of
   --ee-pc-row-height; the name gives way (ellipsis), never the figures. */
.ee-pc-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        repeat(3, var(--ee-pc-figure-width))
        var(--ee-pc-chevron-width);
    align-items: center;
    column-gap: 0.375rem;
    width: 100%;
    min-height: var(--ee-pc-row-height);
    padding: 0.375rem 0;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.ee-pc-row:hover .ee-pc-name { color: var(--primary-color, #1f4566); }

.ee-pc-row-ident {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ee-pc-row-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ee-pc-row-badges .ee-pc-badge {
    padding: 1px 6px;
    letter-spacing: 0;
    font-weight: 500;
}

.ee-pc-name {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary, #1a1a1a);
}

/* The three figures: value over caption, right aligned on their column. */
.ee-pc-row-figures { display: contents; }

.ee-pc-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.ee-pc-figure-value {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--text-primary, #1a1a1a);
}

.ee-pc-figure-label {
    font-size: 0.625rem;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-row > .ee-pc-chevron { justify-self: center; }

/* The details: a tinted block under the row, closed by default. */
.ee-pc-curve-body {
    padding: 0.25rem 0 1rem;
}

.ee-pc-curve-body[hidden] { display: none; }

.ee-pc-curve-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-curve-meta .ee-fs-info { justify-self: auto; }

.ee-pc-years-wrap { margin-top: 0.75rem; }

.ee-pc-years-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.ee-pc-years-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.ee-pc-years-bar .ee-fs-info { justify-self: auto; }

/* The status pill: the active curve is the one the comparison runs. */
.ee-pc-status-badge--active {
    border-color: color-mix(in srgb, var(--secondary-color, #3fa14d) 45%, transparent);
    background: color-mix(in srgb, var(--secondary-color, #3fa14d) 10%, var(--background, #ffffff));
    color: var(--text-primary, #1a1a1a);
}

/* The origin is never decoration: a synthetic curve must be recognisable
   at a glance, so that nobody reads it as a supplier forecast. */
.ee-pc-origin--synthetic {
    border-style: dashed;
    border-color: var(--border-medium, #d1d5db);
}

/* Reach of a curve (D.2). A standard curve of EnergyExperts, effective for
   every organization, wears the brand tint; an organization's own curve wears
   the plain badge. Same size and weight as its neighbours -- it is a fact,
   not an alert. */
.ee-pc-scope-badge--global {
    border-color: color-mix(in srgb, var(--primary-color, #1f4566) 35%, transparent);
    background: color-mix(in srgb, var(--primary-color, #1f4566) 8%, var(--background, #ffffff));
    color: var(--primary-color, #1f4566);
}

/* The folded group of historical backtests under the active curves. */
.ee-pc-group {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-light, #e5e7eb);
}

.ee-pc-group-toggle { padding: 0.625rem 0; }

.ee-pc-group-hint {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-group-body[hidden] { display: none; }

.ee-pc-group .ee-pc-group-body {
    padding-left: 1.25rem;
    border-left: 2px solid var(--border-light, #e5e7eb);
}

/* A global curve a customer may not change: the details stay readable, the
   fields are locked rows with their reason, and there are no actions. */
.ee-pc-curve.is-locked .ee-pc-fields {
    opacity: 0.85;
}

/* A global curve an own curve replaces for this organization: still listed
   (the reader should know it exists), visibly stepped back. */
.ee-pc-curve.is-shadowed > .ee-pc-row { opacity: 0.6; }

.ee-pc-curve.is-shadowed [data-pc-shadowed] {
    border-left-color: var(--border-medium, #d1d5db);
}

/* The curve rows end on the SAME edge as the settings rows above: the curve
   card has 1.25rem of padding where a group card has 0.5rem, so the rows reach
   0.75rem into the padding -- one value edge and one (i) column for the whole
   page, not two. The method select is wider here: its empty choice reads
   "Standard: Letztes Kurvenjahr × Strompreis-Inflation", and a curve row has
   the room the settings rows do not. */
.ee-pc-fields {
    --ee-fs-select-width: 24rem;
    margin: 0.25rem calc(0.5rem - 1.25rem) 0.5rem 0;
}

.ee-pc-group .ee-pc-fields { margin-right: 0; }

/* Badge, hint and delete button of the curve list. */
.ee-pc-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-light, #e5e7eb);
    background: var(--background, #ffffff);
    color: var(--text-secondary, #6b7280);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ee-pc-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #6b7280);
}

.ee-pc-remove {
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    text-decoration: underline;
    cursor: pointer;
}

.ee-pc-remove:hover { color: var(--text-primary, #1a1a1a); }

.ee-pc-remove:focus-visible {
    outline: 2px solid var(--primary-color, #1f4566);
    outline-offset: 1px;
}

/* Fallback table (without the kit): same rhythm, scrolls inside the card. */
.ee-pc-years {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    font-variant-numeric: tabular-nums;
}

.ee-pc-years th,
.ee-pc-years td {
    padding: 0.375rem 0.625rem;
    text-align: right;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    white-space: nowrap;
}

.ee-pc-years th:first-child,
.ee-pc-years td:first-child { text-align: left; }

.ee-pc-years th {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.ee-pc-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Motion only as the answer to a click, none under reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .ee-pc-chevron,
    .ee-pc-capture-actions .ee-fw-csv { transition: none; }
}

/* Narrow screens: the figures leave the row, the toolbar may wrap. */
@media (max-width: 700px) {
    .ee-pc .ee-pc-toolbar { flex-wrap: wrap; }
    .ee-pc-scope { margin-left: 0; }
    .ee-pc-row { grid-template-columns: minmax(0, 1fr) var(--ee-pc-chevron-width); }
    .ee-pc-row-figures { display: none; }
    .ee-pc-row-ident { flex-wrap: wrap; }
}