/**
 * Project settings fullscreen after Stefan's mockup
 * (einstellungen-widget-mockup.html, released by Till 23.10.2026).
 * Prefix .ee-sx-, colours from the --ee-fw tokens (mockup values as fallback).
 *
 * Rules the 2.25.713 build broke and this sheet guards:
 *  - no word wraps on its own: labels, values, units and segment buttons
 *    are nowrap; only hints wrap, under their label;
 *  - units sit NEXT to the number (static, never absolute);
 *  - date fields sit right of their label, never above it;
 *  - nothing overlaps: badges are replaced by the inline ƒ sign.
 */

.ee-sx {
    --sx-bg: var(--ee-fw-tile-bg, var(--ee-bg-elevated));
    --sx-card: var(--ee-fw-wash, var(--ee-bg-elevated));
    --sx-field: var(--ee-bg-primary);
    --sx-line: var(--ee-fw-line, var(--ee-border-light));
    --sx-text: var(--ee-fw-ink-1, var(--ee-text-primary));
    --sx-muted: var(--ee-fw-ink-3, var(--ee-text-tertiary));
    --sx-faint: var(--ee-fw-ink-4, #5d6574);
    --sx-blue: #3d8bff;
    --sx-blue-soft: rgba(61, 139, 255, 0.14);
    --sx-green: #32c46b;
    --sx-green-soft: rgba(50, 196, 107, 0.14);
    --sx-amber: #ffae3d;
    --sx-amber-soft: rgba(255, 174, 61, 0.12);
    --sx-r: 14px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 4px 24px;
    color: var(--sx-text);
    font-size: 14px;
    line-height: 1.45;
    min-width: 0;
    /* tiles and panes follow the width of the settings view itself, so a
       narrow fullscreen (side rail open, small window) gets one column */
    container-type: inline-size;
    container-name: ee-sx;
}

.ee-sx [hidden] { display: none !important; }
.ee-sx *, .ee-sx *::before, .ee-sx *::after { box-sizing: border-box; }

/* ---------- head ---------- */
.ee-sx-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ee-sx-sub { color: var(--sx-muted); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-sx-saved { color: var(--sx-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ee-sx-saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--sx-green); display: inline-block; flex: none; }

/* ---------- central bar ---------- */
.ee-sx-central {
    display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
    background: var(--sx-bg); border: 1px solid var(--sx-line); border-radius: var(--sx-r);
    padding: 14px 18px; margin: 0;
}
.ee-sx-cgrp { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; }
.ee-sx-lbl { font-size: 12px; color: var(--sx-muted); white-space: nowrap; margin: 0; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ee-sx-faint { color: var(--sx-faint); }

/* segment switch (own buttons and kit chips in segment look) */
.ee-sx-seg {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%;
    background: var(--sx-field); border: 1px solid var(--sx-line); border-radius: 10px;
}
.ee-sx-seg-btn,
.ee-sx-seg .ee-fw-chip {
    border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer;
    color: var(--sx-muted); font: inherit; font-size: 13px; line-height: 1.3; white-space: nowrap;
    min-height: 0; height: auto; box-shadow: none; position: relative;
}
.ee-sx-seg-btn:hover:not(:disabled),
.ee-sx-seg .ee-fw-chip:hover:not(:disabled) { color: var(--sx-text); background: transparent; }
.ee-sx-seg-btn.is-on,
.ee-sx-seg .ee-fw-chip.is-active { background: var(--ee-bg-elevated-2); color: var(--sx-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); border: 0; }
.ee-sx-seg-btn:disabled { cursor: not-allowed; }
.ee-sx-seg .ee-fw-chip--compute:not(.is-active) { color: var(--sx-faint); font-style: italic; }
.ee-sx-seg .ee-fw-chip--blocked:not(.is-active) { color: var(--sx-faint); }
.ee-sx-seg .ee-fw-chip-flag { font-size: 0; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sx-amber); margin-left: 6px; vertical-align: middle; }
.ee-sx-seg .ee-fw-chip:focus-visible,
.ee-sx-seg-btn:focus-visible { outline: 2px solid var(--sx-blue); outline-offset: 1px; }
/* year picker inside the segment: chips in one strip, its notes under it */
.ee-sx-seg--chips { flex-direction: row; }
.ee-sx-seg--chips .ee-fw-yearpicker,
.ee-sx-seg--chips .ee-fw-chips { display: contents; }
.ee-sx-seg--chips .ee-fw-yearpicker-legend,
.ee-sx-seg--chips .ee-fw-hint,
.ee-sx-seg--chips .ee-fw-yearpicker-note { flex: 1 0 100%; margin: 4px 6px 2px; font-size: 12px; color: var(--sx-faint); white-space: normal; }

/* ---------- notes ---------- */
.ee-sx-notes { border: 1px solid rgba(255, 174, 61, 0.35); background: var(--sx-amber-soft); border-radius: var(--sx-r); padding: 4px 0; }
.ee-sx-note { display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.ee-sx-note + .ee-sx-note { border-top: 1px solid rgba(255, 174, 61, 0.18); }
.ee-sx-note-ic { width: 20px; height: 20px; border-radius: 50%; background: var(--sx-amber); color: #1a1205; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: none; }
.ee-sx-note-t { flex: 1; min-width: 0; }
.ee-sx-note-t b { font-weight: 600; }
.ee-sx-note-t span { color: var(--sx-muted); }
.ee-sx-act { border: 1px solid var(--sx-line); background: var(--ee-bg-elevated-2); color: var(--sx-text); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; flex: none; }
.ee-sx-act:hover { border-color: var(--sx-blue); }
.ee-sx-act.is-primary { background: var(--sx-blue); border-color: var(--sx-blue); color: var(--ee-text-on-accent); }
.ee-sx-act:disabled { opacity: 0.6; cursor: progress; }

/* ---------- tiles ---------- */
.ee-sx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ee-sx-tile { background: var(--sx-card); border: 1px solid var(--sx-line); border-radius: var(--sx-r); padding: 16px 18px; min-width: 0; }
.ee-sx-tile.is-hero { background: linear-gradient(180deg, rgba(61, 139, 255, 0.13), rgba(61, 139, 255, 0.04)); border-color: rgba(61, 139, 255, 0.4); }
.ee-sx-k { color: var(--sx-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.ee-sx-v { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ee-sx-v small { font-size: 14px; color: var(--sx-muted); font-weight: 500; margin-left: 4px; }
.ee-sx-d { color: var(--sx-muted); font-size: 12.5px; margin-top: 4px; min-height: 18px; }
.ee-sx-amber { color: var(--sx-amber); }

/* ---------- tabs ---------- */
.ee-sx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sx-line); flex-wrap: wrap; }
.ee-sx-tab { border: 0; background: transparent; padding: 10px 16px 12px; cursor: pointer; color: var(--sx-muted); font: inherit; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: 0; }
.ee-sx-tab:hover { color: var(--sx-text); }
.ee-sx-tab.is-on { color: var(--sx-text); border-bottom-color: var(--sx-blue); }
.ee-sx-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--sx-amber); color: #1a1205; font-size: 10.5px; font-weight: 700; text-align: center; margin-left: 6px; padding: 0 4px; }

.ee-sx-pane { display: none; }
.ee-sx-pane.is-on { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ee-sx-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; transition: opacity 0.15s; }
.ee-sx-col.is-dimmed { opacity: 0.55; }

/* ---------- groups and list cards ---------- */
.ee-sx-group { min-width: 0; margin: 0; }
.ee-sx-group.is-off .ee-sx-list > .ee-sx-slot { opacity: 0.45; }
.ee-sx-h3 { font-size: 12px; font-weight: 600; color: var(--sx-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px 4px; padding: 0; border: 0; line-height: 1.3; }
.ee-sx-list { background: var(--sx-card); border: 1px solid var(--sx-line); border-radius: var(--sx-r); overflow: hidden; padding: 0; }
.ee-sx-slot:empty,
.ee-sx-list > div:empty { display: none; }

/* Every line of a card: border at the bottom, pulled up by its own width, so
   the last line's border falls outside the card and is clipped. */
.ee-sx-row,
.ee-sx-list .ee-fs-row,
.ee-sx-list .ee-fw-field,
.ee-sx-list .ee-settings-row,
.ee-sx-list > .ee-sx-paths,
.ee-sx-list > .ee-sx-fn,
.ee-sx-list > .ee-sx-scale,
.ee-sx-list > .ee-sx-agri-note,
.ee-sx-list .ee-sx-more {
    border: 0;
    border-bottom: 1px solid var(--sx-line);
    margin: 0 0 -1px;
}
.ee-sx-list > .ee-sx-row:has(+ .ee-sx-scale) { border-bottom-color: transparent; }

/* static row */
.ee-sx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; min-height: 52px; }
.ee-sx-row.is-wide { grid-template-columns: minmax(0, 1fr); }
.ee-sx-name { min-width: 0; }
.ee-sx-n { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ee-sx-h { color: var(--sx-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; white-space: normal; }
.ee-sx-ctl { display: flex; align-items: center; gap: 10px; justify-content: flex-end; white-space: nowrap; min-width: 0; }
.ee-sx-wide { min-width: 0; }
.ee-sx-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ee-sx-val--big { font-size: 20px; font-weight: 600; }
.ee-sx-val--big + .ee-sx-muted { margin-left: 4px; }
.ee-sx-muted { color: var(--sx-muted); }
.ee-sx-loading { margin: 0; padding: 14px 16px; color: var(--sx-muted); font-size: 13px; }

/* the ƒ sign of derived values */
.ee-sx-auto {
    display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--sx-faint); color: var(--sx-faint); font-size: 10px; font-style: italic;
    font-family: Georgia, "Times New Roman", serif; cursor: help; flex: none; line-height: 1;
}

/* ---------- marketing row: kit chips as segment, boxes under it ---------- */
.ee-sx-row--marketing .ee-fw-control { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.ee-sx-row--marketing .ee-fw-control-label,
.ee-sx-more-body .ee-fw-control-label { font-size: 12px; color: var(--sx-muted); white-space: nowrap; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ee-sx-row--marketing .ee-fw-chips,
.ee-sx-more-body .ee-fw-chips {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; max-width: 100%;
    background: var(--sx-field); border: 1px solid var(--sx-line); border-radius: 10px;
}
.ee-sx-row--marketing .ee-fw-chip,
.ee-sx-more-body .ee-fw-chip {
    border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; color: var(--sx-muted);
    font-size: 13px; white-space: nowrap; height: auto; min-height: 0; box-shadow: none;
}
.ee-sx-row--marketing .ee-fw-chip.is-active,
.ee-sx-more-body .ee-fw-chip.is-active { background: var(--ee-bg-elevated-2); color: var(--sx-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.ee-sx-row--marketing .ee-settings-split,
.ee-sx-row--marketing .ee-settings-ppa { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sx-line); }
.ee-sx-row--marketing .ee-fw-field { border: 0; margin: 0; padding: 0; }
.ee-sx-row--marketing .ee-settings-tariff-result .ee-fw-hint,
.ee-sx .ee-settings-eeg-result .ee-fw-hint { margin: 8px 0 0; color: var(--sx-muted); font-size: 12.5px; white-space: normal; }

/* ---------- size scale, funding path cards ---------- */
.ee-sx-scale { padding: 0 16px 14px; }
.ee-sx-scale:empty { display: none; }
.ee-sx-bar { position: relative; height: 6px; border-radius: 3px; background: var(--ee-bg-elevated-2); margin: 8px 0 8px; }
.ee-sx-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--sx-blue); }
.ee-sx-tick { position: absolute; top: -5px; width: 2px; height: 16px; margin-left: -1px; background: var(--sx-text); border-radius: 1px; }
.ee-sx-lab { position: relative; height: 16px; color: var(--sx-faint); font-size: 11.5px; white-space: nowrap; }
.ee-sx-lab span { position: absolute; top: 0; }
.ee-sx-lab span.is-end { right: 0; }

.ee-sx-paths { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
.ee-sx-path { border: 1px solid var(--sx-line); border-radius: 12px; padding: 14px 16px; background: var(--ee-bg-elevated); min-width: 0; }
.ee-sx-pt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ee-sx-pt b { font-size: 15px; white-space: nowrap; }
.ee-sx-path p { margin: 6px 0 0; color: var(--sx-muted); font-size: 12.5px; }
.ee-sx-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; display: none; }
.ee-sx-path.is-active { border-color: rgba(50, 196, 107, 0.6); background: linear-gradient(180deg, var(--sx-green-soft), transparent); }
.ee-sx-path.is-active .ee-sx-chip { display: inline-block; background: var(--sx-green-soft); color: var(--sx-green); }

.ee-sx-fn { color: var(--sx-faint); font-size: 12px; padding: 10px 16px 12px; }
.ee-sx-fn .ee-sx-slot { margin: 8px -16px -12px; border-top: 1px solid var(--sx-line); }
.ee-sx-link { color: var(--sx-blue); background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.ee-sx-link:hover { text-decoration: underline; }

/* ---------- folded sections ---------- */
.ee-sx-more > summary { cursor: pointer; color: var(--sx-muted); font-size: 13px; padding: 12px 16px; list-style: none; white-space: nowrap; }
.ee-sx-more > summary::-webkit-details-marker { display: none; }
.ee-sx-more > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform 0.15s; }
.ee-sx-more[open] > summary::before { transform: rotate(90deg); }
.ee-sx-more-body { border-top: 1px solid var(--sx-line); }
.ee-sx-more-body > .ee-fw-control,
.ee-sx-more-body > .ee-settings-eeg-result { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--sx-line); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ee-sx-more-body > .ee-settings-eeg-result { display: block; }
.ee-sx-more-body > .ee-settings-eeg-result .ee-fw-hint:first-child { margin-top: 0; }
.ee-sx-more-body > :last-child,
.ee-sx-more-body .ee-settings-feedin > .ee-fw-field { border-bottom: 0; }

.ee-sx-agri-note { padding: 12px 16px; color: var(--sx-muted); font-size: 12.5px; }
.ee-sx-more-notes:empty { display: none; }
.ee-sx-more-note { margin: 0; padding: 10px 16px; color: var(--sx-amber); font-size: 12.5px; border-top: 1px solid var(--sx-line); }

/* ---------- kit field (ui.form.field) as a row: label left, input right ---------- */
.ee-sx-list .ee-fw-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head control" "hint control" "error error";
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    padding: 12px 16px;
    min-height: 52px;
}
.ee-sx-list .ee-fw-field-head { grid-area: head; justify-content: flex-start; min-height: 0; gap: 8px; }
.ee-sx-list .ee-fw-field-label { font-weight: 400; font-size: 14px; color: var(--sx-text); white-space: nowrap; }
.ee-sx-list .ee-fw-field-control {
    grid-area: control; justify-self: end; display: inline-flex; align-items: center; gap: 6px;
    background: var(--sx-field); border: 1px solid var(--sx-line); border-radius: 8px; height: 34px; padding: 0 10px;
}
.ee-sx-list .ee-fw-field-control:focus-within { border-color: var(--sx-blue); }
.ee-sx-list .ee-fw-field .ee-fw-input {
    width: 72px; min-width: 0; height: 32px; padding: 0; border: 0; background: transparent;
    color: var(--sx-text); text-align: right; outline: none;
}
.ee-sx-list .ee-fw-field .ee-fw-input:hover { background: transparent; }
.ee-sx-list .ee-fw-field .ee-fw-input:focus-visible { outline: none; }
.ee-sx-list .ee-fw-field.has-unit .ee-fw-input { padding-right: 0; }
.ee-sx-list .ee-fw-field-unit { position: static; transform: none; color: var(--sx-muted); font-size: 12.5px; letter-spacing: 0; white-space: nowrap; }
.ee-sx-list .ee-fw-field-hint { grid-area: hint; margin: 0; color: var(--sx-muted); font-size: 12.5px; line-height: 1.4; white-space: normal; }
.ee-sx-list .ee-fw-field-error { grid-area: error; margin: 4px 0 0; }
.ee-sx-list .ee-fw-field .ee-fw-input:disabled { border: 0; background: transparent; }
/* manual value: blue dot before the label, reset as the word "zurücksetzen" */
.ee-sx-list .ee-fw-field.has-override .ee-fw-field-head::before,
.ee-sx-list .ee-fw-field.is-override .ee-fw-field-head::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-blue); flex: none; order: -1;
}
.ee-sx-list .ee-fw-field-reset { width: auto; height: auto; border: 0; padding: 0; color: var(--sx-blue); font-size: 0; }
.ee-sx-list .ee-fw-field-reset svg { display: none; }
.ee-sx-list .ee-fw-field-reset::after { content: "zurücksetzen"; font-size: 12.5px; }
.ee-sx-list .ee-fw-field [data-settings-feedin-badge] { display: none; }

/* ---------- field component rows (eeFinanceSettingField) ---------- */
.ee-sx-list .ee-fs-row {
    grid-template-columns: minmax(0, 1fr) auto auto 0;
    column-gap: 12px;
    padding: 12px 16px;
    min-height: 52px;
}
.ee-sx-list .ee-fs-head { padding-left: 0; gap: 8px; margin: 0; }
.ee-sx-list .ee-fs-label { font-size: 14px; color: var(--sx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ee-sx-list .ee-fs-head .ee-sx-h { flex: 1 0 100%; margin-top: 2px; }
.ee-sx-list .ee-fs-scope-hint { font-size: 12.5px; color: var(--sx-muted); }
.ee-sx-list .ee-fs-origin,
.ee-sx-list .ee-fs-page-hint { display: none; }
.ee-sx-list .ee-fs-info { display: none; }
/* own value: blue dot inline before the label; derived: the ƒ sign */
.ee-sx-list .ee-fs-mark {
    position: static; order: -1; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--sx-blue); font-size: 0;
}
.ee-sx-list .ee-fs-mark--legacy { background: var(--sx-blue); }
.ee-sx-list .ee-fs-mark--derived {
    order: 2; width: 16px; height: 16px; background: transparent; border: 1px solid var(--sx-faint);
    display: inline-grid; place-items: center; line-height: 1;
}
.ee-sx-list .ee-fs-mark--derived::after { content: "f"; font-size: 10px; font-style: italic; font-family: Georgia, serif; color: var(--sx-faint); }
.ee-sx-list .ee-fs-mark--derived[hidden] { display: none; }
.ee-sx-list .ee-fs-row-value { justify-content: flex-end; }
.ee-sx-list .ee-fs-control-wrap { flex: 0 0 auto; }
.ee-sx-list .ee-fs-control-wrap.is-numeric,
.ee-sx-list .ee-fs-control-wrap.is-select { flex: 0 0 auto; width: auto; margin-left: 0; }
.ee-sx-list .ee-fs-control {
    height: 34px; background: var(--sx-field); border: 1px solid var(--sx-line); border-radius: 8px;
    color: var(--sx-text); font-size: 14px; color-scheme: dark;
}
.ee-sx-list .ee-fs-control:focus { border-color: var(--sx-blue); }
.ee-sx-list .ee-fs-control-wrap.is-numeric .ee-fs-control { flex: 0 0 88px; width: 88px; }
.ee-sx-list .ee-fs-control[type="date"] { width: 148px; text-align: left; }
.ee-sx-list .ee-fs-control--select { min-width: 180px; max-width: 260px; }
.ee-sx-list .ee-fs-control-wrap.is-numeric .ee-fs-unit { flex: 0 0 auto; width: auto; white-space: nowrap; }
.ee-sx-list .ee-fs-unit { color: var(--sx-muted); font-size: 12.5px; white-space: nowrap; }
.ee-sx-list .ee-fs-reset {
    width: auto; height: auto; opacity: 1; color: var(--sx-blue); font-size: 0; padding: 0; white-space: nowrap;
}
.ee-sx-list .ee-fs-reset::after { content: "zurücksetzen"; font-size: 12.5px; }
.ee-sx-list .ee-fs-notice,
.ee-sx-list .ee-fs-invalid,
.ee-sx-list .ee-fs-save-notice,
.ee-sx-list .ee-fs-row-status { grid-column: 1 / -1; }
.ee-sx-list input[type="checkbox"].ee-fs-switch:checked { background: var(--sx-green); }

/* ---------- computed rows (Betriebsjahr 1, Preiskurve) ---------- */
.ee-sx-list .ee-settings-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
    padding: 12px 16px; min-height: 52px;
}
.ee-sx-list .ee-settings-row-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.ee-sx-list .ee-settings-row-value { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.ee-sx-list .ee-settings-row .ee-settings-note,
.ee-sx-list .ee-settings-row .ee-settings-pop { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--sx-muted); white-space: normal; }
.ee-sx-list .ee-settings-row .ee-settings-note.is-warn { color: var(--sx-amber); }
.ee-sx-list .ee-settings-value { font-variant-numeric: tabular-nums; }
.ee-sx-list .is-computed-badge {
    font-size: 0; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0;
    border-radius: 50%; border: 1px solid var(--sx-faint); background: transparent;
}
.ee-sx-list .is-computed-badge::after { content: "f"; font-size: 10px; font-style: italic; font-family: Georgia, serif; color: var(--sx-faint); }
.ee-sx-list .ee-settings-link { color: var(--sx-blue); text-decoration: none; font-size: 13px; }
.ee-sx-list .ee-settings-info {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--sx-line); background: transparent;
    color: var(--sx-muted); font-size: 11px; cursor: pointer; padding: 0; flex: none;
}
.ee-sx-list .ee-settings-yearone-input:not([hidden]),
.ee-sx-list .ee-settings-yearone,
.ee-sx-list .ee-settings-electricity,
.ee-sx-list .ee-sx-kit,
.ee-sx-list .ee-settings-feedin { display: block; }

/* ---------- flash / jump target ---------- */
.ee-sx .is-flash,
.ee-sx .is-targeted { animation: ee-sx-flash 1.2s; }
@keyframes ee-sx-flash {
    0% { box-shadow: inset 0 0 0 2px rgba(61, 139, 255, 0.9); }
    100% { box-shadow: inset 0 0 0 2px rgba(61, 139, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ee-sx .is-flash, .ee-sx .is-targeted { animation: none; box-shadow: inset 0 0 0 2px var(--sx-blue); }
}

/* ---------- container widths ---------- */
@container ee-sx (max-width: 1000px) {
    .ee-sx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ee-sx (max-width: 820px) {
    .ee-sx-pane.is-on { grid-template-columns: minmax(0, 1fr); }
}
@container ee-sx (max-width: 820px) {
    .ee-sx-paths { grid-template-columns: minmax(0, 1fr); }
}
@container ee-sx (max-width: 560px) {
    .ee-sx-tiles { grid-template-columns: minmax(0, 1fr); }
    .ee-sx-note { flex-wrap: wrap; }
}