/* A holanap.hu és a holatarolo.hu közös stílusa — a holaszel.hu nyelvtana, meleg alapon. A tokenek
   a spec „Arculat" táblázatából. Kontraszt: az --ink-3 a --bg-n 5,6:1, a --surface-2-n 5,0:1. */
html{scroll-padding-top:60px;-webkit-text-size-adjust:100%}
:root{
  color-scheme:dark;
  --bg:#0c0d12; --surface:#11131a; --surface-2:#171a23; --line:#232735; --line-2:#323849;
  --ink:#f4f1ea; --ink-2:#b4ae9f; --ink-3:#8f897c;
  --nap:#c98500; --hmke:#ffcf5c; --scte:#8a6414; --nap-feny:#ffc53d;
  --szel:#1f9ec7; --atom:#9085e9; --fosszilis:#d95926; --megujulo:#199e70; --egyeb:#4a5866;
  --tolt:#c98500; --kisut:#9b6cf0; --tarolo-feny:#b98cff;
  --jo:#2fbf5a; --figyelem:#fab219; --kritikus:#d03b3b;
  --kiemel:var(--nap-feny);
  --fenyero:0;                 /* 0–1: a fejléc napfénye, a mostani napáramból (most.js) */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",system-ui,sans-serif;
}
body.tarolo{--kiemel:var(--tarolo-feny)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 .9em}
a{color:var(--kiemel)}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
@media(max-width:640px){.wrap{padding-inline:16px}}
.ugro{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface-2);color:var(--ink);padding:8px 12px;border-radius:7px}
.ugro:focus{left:12px}
.rejtett{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cimke{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.forras b{color:var(--ink-2);font-weight:700}
.jegyzet{font-size:13.5px;color:var(--ink-2);line-height:1.62;max-width:74ch}
.jegyzet b,.jegyzet strong{color:var(--ink);font-weight:620}
.apro{font-size:12px;color:var(--ink-3);line-height:1.6}

/* ── fejléc ── */
header{border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(900px 380px at 16% -30%, rgba(255,197,61,calc(.06 + .26 * var(--fenyero))) 0%, transparent 64%), var(--surface)}
body.tarolo header{background:radial-gradient(900px 380px at 16% -30%, rgba(185,140,255,.14) 0%, transparent 64%), var(--surface)}
.fej{padding-block:26px 22px;display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between}
.logo{font-size:clamp(34px,6.4vw,58px);font-weight:760;letter-spacing:-.045em;line-height:.94}
.logo em{font-style:normal;color:var(--kiemel)}
.kerdo{display:inline-block;height:.74em;width:auto;margin-left:.03em;vertical-align:-.005em;overflow:visible}
.kerdo path{fill:none;stroke:var(--kiemel);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round}
.kerdo .napkorong{fill:var(--nap-feny);filter:drop-shadow(0 0 calc(2px + 9px * var(--fenyero)) rgba(255,197,61,.9))}
.motto{color:var(--ink-2);font-size:14px;margin-top:9px;max-width:46ch}
.testver{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.testver a{font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none;border:1px solid var(--line-2);
  border-radius:7px;padding:5px 10px;background:var(--surface-2)}
.testver a:hover,.testver a:focus-visible{color:var(--kiemel);border-color:var(--nap)}
.testver a.tarolo-link{border-color:rgba(155,108,240,.55)}
.testver a.tarolo-link:hover,.testver a.tarolo-link:focus-visible{color:var(--tarolo-feny);border-color:var(--kisut)}
.ora{text-align:right;font-family:var(--mono);flex-shrink:0}
.ora .t{font-size:27px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ora .d{font-size:12px;color:var(--ink-3);margin-top:2px}
.allapot{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:8px 0 3px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.allapot i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:block}
.allapot.friss i{background:var(--jo);box-shadow:0 0 6px rgba(47,191,90,.55)}
.allapot.kesik i{background:var(--figyelem)} .allapot.kesik span{color:var(--figyelem)}
.allapot.elakadt i{background:var(--kritikus)} .allapot.elakadt span{color:#f3a08a}
.frissult{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.frissult b{color:var(--kiemel);font-weight:640}
.kesesi-sav{height:4px;border-radius:2px;background:var(--line);overflow:hidden;width:min(100%,250px);margin:9px 0 3px auto}
.kesesi-sav i{display:block;height:100%;background:var(--nap);width:0}
.kesesi-cimke{display:flex;justify-content:space-between;width:min(100%,250px);margin-left:auto;font-size:10.5px;color:var(--ink-3)}
@media(max-width:620px){.fej{gap:14px}.ora{text-align:left;width:100%}.ora .t{font-size:22px}.logo{font-size:40px}
  .allapot{justify-content:flex-start}.kesesi-sav,.kesesi-cimke{margin-left:0}}

nav{border-bottom:1px solid var(--line);background:rgba(12,13,18,.9);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);position:sticky;top:0;z-index:40}
nav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav .wrap::-webkit-scrollbar{display:none}
nav a{padding:13px;font-size:12.5px;font-weight:560;color:var(--ink-3);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)}
nav a.aktiv{color:var(--kiemel);border-bottom-color:var(--nap)}

/* ── szakaszok ── */
section{padding-block:44px;border-bottom:1px solid var(--line)}
section>.wrap>h2{font-size:clamp(20px,3.1vw,27px);margin-bottom:8px}
.fejlec-sor{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;margin-bottom:15px}
h3.alcim{font-size:17px;margin:30px 0 8px}
section.erv{background:linear-gradient(180deg,#15130f 0%,#111117 100%);border-top:1px solid rgba(255,197,61,.28)}
section.erv .jegyzet{font-size:16px;line-height:1.66;color:var(--ink);max-width:66ch}

/* ── rácsok, csempék ── */
.racs{display:grid;gap:12px}
.r2{grid-template-columns:repeat(2,1fr)} .r3{grid-template-columns:repeat(3,1fr)} .r4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.r4,.r3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.r4,.r3,.r2{grid-template-columns:1fr}}
.csempe{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 17px;min-width:0}
.csempe .cimke{display:block;margin-bottom:9px}
.csempe .ertek{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.csempe .ertek small{font-size:15px;font-weight:600;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.csempe .alá{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.5}
.csempe .alá b{color:var(--ink-2)}

/* ── hero ── */
.hero{background:linear-gradient(168deg,#221a0b 0%,var(--surface) 58%);border:1px solid var(--line-2);border-radius:14px;
  padding:20px 24px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:30px;align-items:center;margin-bottom:12px}
@media(max-width:820px){.hero{grid-template-columns:1fr;gap:22px}}
.hero .szam{font-size:clamp(52px,10.5vw,92px);font-weight:780;letter-spacing:-.05em;line-height:.9;color:var(--nap-feny);
  font-variant-numeric:tabular-nums;text-shadow:0 0 44px rgba(255,197,61,.28);margin-top:10px}
.hero .szam small{font-size:.31em;font-weight:620;color:var(--ink-2);margin-left:8px;letter-spacing:-.01em;text-shadow:none}
.mondat{font-size:14.5px;color:var(--ink-2);margin-top:13px;line-height:1.55}
.mondat b{color:var(--ink);font-weight:640}
.harmas{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--line);margin-top:16px}
.harmas i{display:block;height:100%;width:0;transition:width .6s cubic-bezier(.22,1,.36,1)}
.ipari{background:var(--nap)} .hmke{background:var(--hmke)} .scte{background:var(--scte)}
.harmas-jm{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-2)}
.harmas-jm li{display:inline-flex;align-items:center;gap:6px}
.harmas-jm i{width:10px;height:10px;border-radius:3px;display:block}
.harmas-jm b{color:var(--ink);font-variant-numeric:tabular-nums}
.ejjel-cim{font-size:clamp(22px,3.6vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:10px 0 0;color:var(--ink)}

/* ── kiemelés, átadás ── */
.kiemelo{border-left:3px solid var(--nap);background:linear-gradient(90deg,rgba(201,133,0,.10),transparent 72%);
  padding:15px 18px;border-radius:0 9px 9px 0;margin-block:18px}
.kiemelo .fej{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--kiemel);font-weight:700;padding:0;display:block;margin-bottom:5px}
.kiemelo p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6}
.kiemelo p b{color:var(--ink)}
.atado{display:grid;gap:4px;text-decoration:none;color:var(--ink-2);margin-top:26px;padding:18px 20px;border-radius:12px;
  border:1px solid var(--line-2);border-left:3px solid var(--kisut);
  background:linear-gradient(90deg,rgba(201,133,0,.10),rgba(155,108,240,.12) 70%,transparent)}
.atado b{color:var(--ink);font-size:19px;letter-spacing:-.01em}
.atado span:last-child{color:var(--tarolo-feny);font-weight:600;font-size:13.5px}
.atado:hover,.atado:focus-visible{border-color:var(--kisut)}
body.tarolo .atado{border-left-color:var(--nap)}
body.tarolo .atado span:last-child{color:var(--nap-feny)}

/* ── diagramok ── */
figure{margin:0}
figcaption{font-size:12.5px;color:var(--ink-3);margin-top:9px;line-height:1.55}
.diagram{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:16px 17px 12px;position:relative;min-width:0}
svg{display:block;overflow:visible}
svg.abra{width:100%;height:auto}
svg.abra .fedo{touch-action:pan-y}
.tengely{font-size:10.5px;fill:var(--ink-3);font-family:var(--mono)}
.racsvonal{stroke:var(--line);stroke-width:1}
.nullvonal{stroke:var(--line-2);stroke-width:1.2}
.segedvonal{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.ejjel-sav{fill:rgba(0,0,0,.3)}
.halo{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.jelmagy{display:flex;flex-wrap:wrap;gap:6px 17px;margin-bottom:13px;align-items:center}
.jm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.jm i{width:11px;height:11px;border-radius:3px;display:block;flex-shrink:0}
.jm.vonal i{height:3px;border-radius:2px;width:15px}
.kettos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
@media(max-width:820px){.kettos{grid-template-columns:1fr}}

/* ── buborék ── */
.buborek{position:fixed;z-index:90;pointer-events:none;opacity:0;transition:opacity .09s;background:#0d0e14;
  border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;font-size:12.5px;line-height:1.5;
  box-shadow:0 10px 34px rgba(0,0,0,.66);max-width:290px}
.buborek.lat{opacity:1}
.buborek .cim{font-weight:680;margin-bottom:5px;font-size:13px}
.buborek .sor{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2)}
.buborek .sor b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:620}
.buborek .lab{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}

/* ── gombok, űrlapelemek ── */
.vezerlo{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.gomb{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);border-radius:7px;padding:6px 12px;
  font-size:12.5px;font-weight:560;cursor:pointer;font-family:inherit}
.gomb:hover{border-color:var(--line-2);color:var(--ink)}
.gomb.aktiv,.gomb[aria-selected="true"]{background:#2a2110;border-color:var(--nap);color:var(--nap-feny)}
.gomb:disabled{opacity:.45;cursor:default}
.gomb:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--nap-feny);outline-offset:2px}
select{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);border-radius:7px;padding:6px 10px;
  font:inherit;font-size:13px;max-width:100%}

/* ── térkép ── */
.terkep-doboz{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;position:relative}
@media(max-width:640px){.terkep-doboz{margin-inline:-16px;border-radius:0;border-left:none;border-right:none;padding:10px 8px}}
.terkep-belso{position:relative;width:100%}
.terkep-belso canvas,.terkep-belso>svg{position:absolute;inset:0;width:100%;height:100%}
#mezo{z-index:0} #felho{z-index:1;pointer-events:none;opacity:.92} #terkep-svg{z-index:2;overflow:hidden}
.megye{fill:none;stroke:rgba(222,210,185,.26);stroke-width:.9;vector-effect:non-scaling-stroke;stroke-dasharray:5 4}
.orszag{fill:none;stroke:rgba(244,232,206,.62);stroke-width:1.7;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.terminator{fill:none;stroke:rgba(255,233,168,.85);stroke-width:1.6;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.terminator-cimke{fill:#ffe9a8;font-size:13px;font-weight:620;paint-order:stroke;stroke:rgba(8,9,13,.85);stroke-width:3.5px}
.park-folt{fill:rgba(255,197,61,.9);stroke:rgba(255,233,168,.9);stroke-width:.6;vector-effect:non-scaling-stroke}
.park-pont{fill:rgba(255,197,61,.92)}
.park.kiv .park-folt,.park.kiv .park-pont{fill:#fff;stroke:#fff}
.jelolo{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.skala{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}
.skala .sav{display:flex;height:9px;border-radius:5px;overflow:hidden;width:190px;flex-shrink:0}
.skala .sav i{flex:1}
/* Megyénként (modell): a kitöltés a megye path-jára kerül (JS), a határ a „Megyék” kapcsolóé */
.megye-g.nincs-vonal .megye{stroke:none}
.megye.tolt{fill-opacity:.9;stroke:rgba(244,232,206,.5);stroke-dasharray:none}
#terkep-svg.modellben .park-pont{stroke:#08090d;stroke-width:.7px}
#terkep-svg.modellben .park-folt{stroke:#08090d}
.megye-skala{gap:4px 14px}
.megye-skala .lepcso{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.megye-skala .lepcso i{width:14px;height:14px;border-radius:3px;border:1px solid var(--line-2);flex-shrink:0}
.megye-modell{margin-top:18px}
.megye-fej{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.megye-fej h3{margin:0;font-size:17px}
.megye-top{list-style:none;margin:12px 0 14px;padding:0;display:grid;gap:11px;max-width:560px}
.megye-top li{display:flex;justify-content:space-between;gap:12px;position:relative;padding-bottom:7px;font-size:14px;color:var(--ink-2);
  background:linear-gradient(var(--line),var(--line)) left bottom/100% 4px no-repeat}
.megye-top li::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:var(--w);border-radius:2px;background:var(--c)}
.megye-top b{color:var(--ink);font-weight:660;font-variant-numeric:tabular-nums;white-space:nowrap}
.megye-modell .mondat{margin:12px 0}
.megye-skala-jegyzet{flex-basis:100%}
#megye-osszeg{margin:8px 0 0}
.megye-reszletek{margin:0 0 10px;max-width:560px}
.megye-reszletek summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);padding:6px 0}
.megye-reszletek summary:hover{color:var(--ink)}
.megye-reszletek summary:focus-visible{outline:2px solid var(--nap-feny);outline-offset:2px}
.megye-tabla{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.megye-tabla th,.megye-tabla td{padding:7px 10px 7px 0;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.megye-tabla thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.megye-tabla tbody th{font-weight:560;color:var(--ink-2)}
.megye-tabla td{white-space:nowrap}
@media(max-width:520px){.megye-tabla{font-size:12.5px}.megye-tabla th,.megye-tabla td{padding-right:6px}.megye-tabla thead th{letter-spacing:.03em;font-size:10.5px}}
.nezd-meg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.nezd-meg .gomb{padding:4px 10px;font-size:12px}
.park-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:15px 16px;margin-top:12px;min-height:118px}
.park-panel .nev{font-size:19px;font-weight:700;letter-spacing:-.02em}
.park-test{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:start;margin-top:12px}
@media(max-width:640px){.park-test{grid-template-columns:1fr}}
.park-adatok{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.park-adatok .cimke{display:block;margin-bottom:3px}
.park-adatok .v{font-size:17px;font-weight:680;font-variant-numeric:tabular-nums}
.park-kozel svg{width:100%;height:auto;background:var(--surface);border-radius:8px;border:1px solid var(--line)}
.park-kozel-folt{fill:rgba(255,197,61,.85);stroke:#ffe9a8;stroke-width:1}
.leptek{stroke:var(--ink-2);stroke-width:2}

/* ── az én tetőm ── */
.tetom-racs{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:820px){.tetom-racs{grid-template-columns:1fr}}
.tetom-be label{display:block;font-size:13px;color:var(--ink-2);margin:14px 0 6px}
.tetom-be label:first-child{margin-top:0}
.tetom-be label b{color:var(--nap-feny);font-variant-numeric:tabular-nums}
.tetom-be input[type=range]{width:100%;accent-color:var(--nap)}
.tetom-terkep{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px}
.tetom-terkep svg{width:100%;height:auto;cursor:crosshair}
.tetom-jelolo{fill:var(--nap-feny);stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* ── egy év a tetőddel ── */
#tetom input[type=number]{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);border-radius:7px;padding:6px 10px;
  font:inherit;font-size:13px;width:100%;max-width:170px;font-variant-numeric:tabular-nums}
@media(pointer:coarse){#tetom input[type=number]{font-size:16px}}
#tetom [aria-invalid="true"]{border-color:#f3a08a!important;box-shadow:0 0 0 1px rgba(243,160,138,.45)}
.szam-sor{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.tetom-be .apro{margin:7px 0 0}
#tetom-arak{margin-top:16px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--surface)}
#tetom-arak summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
#tetom-arak[open] summary{margin-bottom:2px;color:var(--ink)}
#tetom-arak label{margin-top:12px}
#tetom-arak select{width:100%}
#d-tetom-ev{min-height:190px}
#d-tetom-ev.hiba{min-height:0}
#ev-frissul{color:var(--nap-feny)}
#tetom-ev.frissul>div:last-child,#oetp.frissul #oetp-megterul{opacity:.45}
#tetom-ev.frissul figure{pointer-events:none}
#d-tetom-ev.hiba .gomb{margin-left:8px;vertical-align:baseline}
#ev-penz{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px;font-variant-numeric:tabular-nums}
#ev-penz th,#ev-penz td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
#ev-penz thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
#ev-penz tbody th{font-weight:560;color:var(--ink-2)}
#ev-penz td{color:var(--ink)}
@media(max-width:520px){#ev-penz{font-size:12.5px}#ev-penz th,#ev-penz td{padding:7px 5px}#ev-penz thead th{letter-spacing:.04em;font-size:10.5px}}
#ev-akku{margin:12px 0 0}
#oetp .oetp-sor{margin-top:12px}
#oetp label{font-size:13px;color:var(--ink-2);margin-right:6px}
#oetp #oetp-megterul{margin-top:10px;color:var(--ink)}
#oetp #oetp-megterul:empty{margin:0}
#oetp .apro{display:block;margin-top:10px}

/* ── jól termel ma a tetőm? ── */
.jol-termel .jol-sor{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:13.5px;color:var(--ink-2)}
.jol-termel #tetom-mert{width:100%;max-width:120px}
.jol-termel #tetom-jol{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
.jol-termel #tetom-jol:empty{margin:0}
.jol-termel .apro{margin:8px 0 0}

/* ── szaldó vagy bruttó? a kérdéssor ── */
.kerdes{border:0;margin:16px 0 0;padding:0;min-width:0}
.kerdes legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.kerdes .valasz{display:flex;flex-wrap:wrap;gap:8px}
.kerdes .valasz label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font-size:14px;line-height:1.3;cursor:pointer}
.kerdes .valasz label:hover{border-color:var(--nap)}
.kerdes .valasz label:has(input:checked){border-color:var(--nap);background:rgba(201,133,0,.16);color:var(--ink)}
.kerdes input[type=radio]{accent-color:var(--nap);margin:0;width:16px;height:16px;flex-shrink:0}
/* a fókuszgyűrű csak billentyűzettel (nem egérkattintás után), egyszer: ahol van `:has`, a pirula kapja, máshol a rádiógomb saját gyűrűje marad */
@supports selector(:has(*)){
  .kerdes input[type=radio]:focus-visible{outline:none}
  .kerdes .valasz label:has(input:focus-visible){outline:2px solid var(--nap-feny);outline-offset:2px}
}
.kerdes select{font-size:14px;padding:8px 12px;min-width:170px}
@media(pointer:coarse){.kerdes select{font-size:16px}}
#elsz-eredmeny:not(:empty){margin-top:16px;padding:12px 15px;background:var(--surface);border:1px solid var(--line-2);border-radius:9px}
#elsz-eredmeny p+p{margin-top:8px}
#elszamolas p.apro{font-size:12px;color:var(--ink-3);margin-top:12px}
#elszamolas p.apro+p.apro{margin-top:6px}
#elszamolas .elsz-tovabb{margin-top:12px}
.sajat-jel{display:none}
#ev-penz tr.sajat>*{background:rgba(201,133,0,.14)}

/* ── mikor kapcsold be? ── */
#tetom-mikor .kesz-sor{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin:0 0 14px}
#tetom-mikor .kesz-mezo label{display:block;font-size:13px;color:var(--ink-2);margin:0 0 6px}
#tetom-mikor .kesz-mezo:first-child{flex:0 1 340px;min-width:min(100%,220px)}
#tetom-mikor .kesz-mezo:first-child select{width:100%;font-size:13.5px;padding:7px 10px}
@media(pointer:coarse){#tetom-mikor .kesz-mezo select{font-size:16px}}
#tetom .kesz-sor input[type=number]{max-width:88px}
#kesz-eredmeny{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink)}
#kesz-eredmeny:not(:empty){padding:12px 15px;background:var(--surface);border:1px solid var(--line-2);border-left:3px solid var(--nap);border-radius:9px}
#kesz-frissul{color:var(--nap-feny)}
#d-tetom-mikor{min-height:190px}
#d-tetom-mikor.hiba{min-height:0}
#d-tetom-mikor.hiba .gomb{margin-left:8px;vertical-align:baseline}
#tetom-mikor.frissul #kesz-eredmeny,#tetom-mikor.frissul figure{opacity:.45}
#tetom-mikor.frissul figure{pointer-events:none}
#tetom-mikor>.apro{margin:10px 0 0}
#ev-penz tr.sajat>th{color:var(--ink);box-shadow:inset 3px 0 0 var(--nap)}
#ev-penz tr.sajat .sajat-jel{display:inline;color:var(--nap-feny);font-weight:600}
@media(max-width:520px){#ev-penz tr.sajat .sajat-jel{display:block;font-size:11.5px;line-height:1.35;margin-top:2px}}

/* ── idővonal ── */
.idovonal{position:relative;padding-left:26px;margin-top:22px}
.idovonal::before{content:"";position:absolute;left:6px;top:7px;bottom:7px;width:2px;background:linear-gradient(180deg,var(--line-2),var(--line))}
.esemeny{position:relative;padding-bottom:22px}
.esemeny::before{content:"";position:absolute;left:-24px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.esemeny.kiemelt::before{background:var(--nap);border-color:var(--nap);box-shadow:0 0 0 4px rgba(201,133,0,.2)}
.esemeny .ev{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.esemeny .cim{font-weight:660;font-size:15.5px;margin-top:1px}
.esemeny .le{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.56;max-width:64ch}
.esemeny .forrasok{font-size:12px;color:var(--ink-3);margin-top:3px}

/* ── források, lábléc, állapotok ── */
.forraslista{padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.7;max-width:90ch}
.forraslista b{color:var(--ink)}
footer{padding-block:34px 46px;color:var(--ink-3);font-size:12.5px;line-height:1.7}
footer b{color:var(--ink-2);font-weight:620}
/* a „betöltés…" helykitöltő — csak div: a fejléc <p class="allapot tolt"> állapotát nem érintheti */
div.tolt{color:var(--ink-3);font-size:13px;padding:22px 0;text-align:center}
.hiba{color:#f3a08a;font-size:13px;padding:14px;background:rgba(208,59,59,.09);border:1px solid rgba(208,59,59,.28);border-radius:9px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.ar-negativ{stroke:#ff8a5c;stroke-width:1}
.most-vonal{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.cimke .kor{letter-spacing:.06em;text-transform:none;color:var(--ink-3)}
a.letolt{font-size:12px;color:var(--ink-3)}
a.letolt:hover{color:var(--kiemel)}
/* Most — rekordjelvény, kép a mostani állapotról, „Ma történt", a hálózat zöldsége */
.rekord-jelveny{display:block;width:fit-content;max-width:100%;margin:0 0 12px;padding:6px 13px;font-size:12.5px;line-height:1.5;
  color:var(--ink);background:rgba(255,197,61,.08);border:1px solid rgba(255,197,61,.62);border-radius:8px}
.rekord-jelveny b{color:var(--nap-feny);font-weight:700}
.gomb.kicsi{padding:4px 10px;font-size:12px}
@media(pointer:coarse){.gomb.kicsi{min-height:40px}a.letolt{display:inline-block;min-height:40px;line-height:40px}}
.kep-sor{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:14px}
.ma-tortent-cim{display:block;margin:12px 0 5px}
.ma-tortent{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ma-tortent li{padding-left:10px;border-left:2px solid rgba(154,163,181,.55);margin-bottom:4px}
.ma-tortent b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.zold-sor{margin:14px 0 0;padding-left:12px;border-left:2px solid var(--jo)}
.zuhanas-sav,.zuhanas-cimke{pointer-events:none}
.zuhanas-cimke{font-size:10.5px;font-weight:620;font-family:var(--mono)}
/* Rekordok — a csempék sorai, a „ma" jelzés, a legutóbbi rekordok listája */
#rekordok .racs+.racs{margin-top:12px}
/* a kétsoros felirat mellett a számok egy vonalban maradnak; csak a holanap csempéin (a holatarolo.hu-nak is van #rekordok-ja) */
@media(min-width:861px){#rk-csucs .cimke,#rk-nap .cimke,#rk-arany .cimke{min-height:3.1em}}
@media(max-width:860px){#rk-arany{grid-column:1/-1}}                 /* kétoszlopos rácson a harmadik csempe ne álljon egyedül */
#rk-bev{margin-top:16px}
.rk-sor{display:block}
.rk-sor+.rk-sor{margin-top:3px}
.rk-jel{display:inline-block;margin-left:10px;padding:1px 8px;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.6;
  color:var(--nap-feny);background:rgba(255,197,61,.08);border:1px solid rgba(255,197,61,.62);border-radius:6px;vertical-align:.5em}
.rk-lista-cim{display:block;margin:18px 0 6px}
.rk-lista{list-style:none;margin:0 0 6px;padding:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:74ch}
.rk-lista li{padding-left:10px;border-left:2px solid rgba(255,197,61,.45);margin-bottom:5px;font-variant-numeric:tabular-nums}
/* Mikor használjam az áramot? — az órás sávok, a kiemelő sorai */
.mikor-nap-cim{display:block;margin:0 0 7px}
#mikor .jelmagy{margin-bottom:16px}
#mikor-ma+.mikor-nap-cim{margin-top:20px}
.jm.ures i{background:transparent;border:1px dashed #5a5d6e}
svg.mikor-sav .cella{touch-action:pan-y}
svg.mikor-sav .cella:not(.ures):hover{stroke:var(--ink);stroke-width:1.5px}
svg.mikor-sav .cella.ures{stroke:#5a5d6e;stroke-dasharray:2 3}
svg.mikor-sav .cella.most{stroke:var(--ink);stroke-width:1.5px}
/* a mai elmúlt órák: szürkítve, de olvashatóan (rámutatásra a buborék az elmúlt óra adatát mutatja) */
svg.mikor-sav .cella.elmult{filter:grayscale(1);opacity:.3}
svg.mikor-sav text.elmult{opacity:.45}
.mikor-sor{display:block}
.mikor-sor+.mikor-sor{margin-top:6px}
#mikor .kiemelo{margin-top:16px}
.mikor-keret{font-size:14.5px;line-height:1.65;color:var(--ink)}
.mikor-naptar{margin-bottom:0}
/* A déli áram ára — a negatív árak naptára: a rács, a jelmagyarázat nulla színe, a havi összegek */
#negnaptar-jm .jm:first-child i{box-shadow:inset 0 0 0 1px var(--line-2)}
svg.neg-naptar{touch-action:pan-y}
svg.neg-naptar .neg-honap-szuk{font-size:9.5px}          /* keskeny rácson a „szept" is elfér az „okt" előtt (négy hét = 32 px) */
svg.neg-naptar .neg-kiemel{fill:none;stroke:var(--ink);stroke-width:1.5px;pointer-events:none}
.neg-honapok-cim{display:block;margin:18px 0 7px}
.neg-honapok{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.neg-honapok li{padding:6px 9px;font-size:12.5px;line-height:1.4;color:var(--ink-2);background:var(--surface-2);border-radius:7px;min-width:0}
.neg-honapok .honap{display:block;font-size:11px;color:var(--ink-3)}
.neg-honapok b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
.neg-honapok .nincs{color:var(--ink-3)}
@media(min-width:380px){.neg-honapok{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:560px){.neg-honapok{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1000px){.neg-honapok{grid-template-columns:repeat(12,minmax(0,1fr))}}
/* A szomszédok — vízszintes sávok: W/fő (most) és a napáram részesedése a termelésből (évente). A sor rácsa: név | sáv | a sor vége,
   a sáv hossza a --h (0–1) a leghosszabbhoz; a sor vége a sáv végén áll. Telefonon a három egymás alá kerül (évente a név és az érték egy sorba). */
.sz-mondat{font-size:16px;line-height:1.6;color:var(--ink);max-width:66ch;margin:0 0 14px}
.sz-mondat.hiba{font-size:13px;line-height:1.5;color:#f3a08a}
.sz-sorok{--nev:clamp(150px,22%,230px);list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sz-sor{--h:0;display:grid;align-items:center;row-gap:4px;
  grid-template-columns:var(--nev) calc((100% - var(--nev)) * var(--h) * .52) minmax(0,1fr)}
.sz-nev{font-size:13.5px;color:var(--ink);min-width:0;padding-right:10px;line-height:1.35}
.sz-hely{display:inline-block;min-width:2.1em;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.sz-ido{margin-left:2px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.sz-sav{display:block;height:16px;border-radius:0 5px 5px 0;background:var(--nap)}
.sz-ertek{font-size:13px;line-height:1.4;color:var(--ink-2);padding-left:10px;font-variant-numeric:tabular-nums;min-width:0}
.sz-sor.hu .sz-nev{color:var(--nap-feny);font-weight:700}
.sz-sor.hu .sz-sav{background:var(--nap-feny)}
.sz-sor.hu .sz-ertek{color:var(--ink)}
/* az elavult (4 óránál régebbi) adat: halványabb sáv és szöveg, mellette a mondat, mióta nincs új adat */
.sz-sor.regi .sz-sav{opacity:.65}
.sz-sor.regi .sz-nev{color:var(--ink-2)}
.sz-sor.regi .sz-ertek{color:var(--ink-3)}
.sz-resz{white-space:nowrap}
.sz-regi{color:var(--ink-3)}
.sz-tores{margin:-4px 0;line-height:1;padding-left:2px}
.sz-nincs{margin:12px 0 0}
#sz-evek{margin-bottom:10px}
#sz-most[hidden]+figcaption{margin-top:0}                      /* éjjel a sorok rejtve: a felirat a kártya tetején áll */
@media(max-width:699px){
  .sz-sorok{gap:12px}
  .sz-sor{grid-template-columns:minmax(0,1fr);padding-bottom:12px;border-bottom:1px solid var(--line)}
  .sz-sor:last-child{padding-bottom:0;border-bottom:0}
  .sz-sav{width:calc(var(--h) * 100%);height:12px;border-radius:0 4px 4px 0}
  .sz-sor.nulla .sz-sav{display:none}                   /* ahol nincs napáram, nincs sáv sem (a hiány rés, nem nulla hosszú sáv) */
  .sz-nev{padding-right:0}
  .sz-ertek{padding-left:0}
  .sz-sorok.eves .sz-sor{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .sz-sorok.eves .sz-sav{grid-column:1/-1;grid-row:2}
  .sz-sorok.eves .sz-ertek{grid-column:2;grid-row:1}
}
/* Nézz vissza — a hónap és a nap csempéi, a napválasztó, az ábra */
.vissza-sor{display:block}
.vissza-sor+.vissza-sor{margin-top:3px}
.vissza-valaszto{gap:10px;margin-bottom:14px}
.vissza-valaszto label{font-size:13px;color:var(--ink-2)}
#vissza input[type=date]{background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2);border-radius:7px;padding:6px 10px;
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;min-height:34px;max-width:100%}
@media(pointer:coarse){#vissza input[type=date]{font-size:16px;min-height:44px}}
#vissza-ures{margin:0}
svg.vissza-abra:focus-visible{outline:2px solid var(--nap-feny);outline-offset:6px;border-radius:3px}
svg.vissza-abra .fedo{cursor:pointer}
svg.vissza-abra .ev-hatar{stroke:var(--ink-3);stroke-width:1}                 /* az évforduló jelölése a tengelyen */
svg.vissza-abra .tengely.ev{fill:var(--ink-2);font-weight:700}