/* CO₂ az akváriumban: a két legacy-alapú kalkulátor (co2khph, co2tarolt) és az oktatóábrák (co2abra). */

:root { --co2-c: #2F6F92; --co2-h: #3E8A58; --co2-k: #A45F42; }
/* Sötét mód: a szénformák színei sötét háttéren is olvashatók (alap.css „Téma”). */
html[data-tema="sotet"] { --co2-c: #62A9D2; --co2-h: #66BB84; --co2-k: #D6926F; }

/* ---------- Kalkulátorok ---------- */
.co2k-mezo { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 4px 12px; align-items: center; margin-bottom: 14px; }
.co2k-mezo:last-child { margin-bottom: 0; }
.co2k-mezo .mk-mezo__cimke { grid-column: 1 / -1; }
.co2k-mezo__egyseg { font-weight: 600; color: var(--td-halk, var(--aq-muted)); }
.co2k-mezo .mk-csuszka { grid-column: 1; grid-row: 2; min-height: 44px; }
.co2k-mezo__szam { grid-column: 2; grid-row: 2; padding-right: 12px !important; text-align: right; font-variant-numeric: tabular-nums; }
.co2k-ph { display: flex; flex-direction: column; gap: 2px; }
.co2k-ph__cimke { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-halk, var(--aq-muted)); }
.co2k-ph__szam { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--co2-c); font-variant-numeric: tabular-nums; }
.co2k-hiba { font-weight: 700; color: var(--td-hiba-szoveg, #86301F); }
.co2k-kartyak { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.co2k-kartya { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--td-hatter, var(--aq-paper)); border-left: 5px solid var(--c); }
.co2k-kartya--co2 { --c: var(--co2-c); } .co2k-kartya--hco3 { --c: var(--co2-h); } .co2k-kartya--co3 { --c: var(--co2-k); }
.co2k-kartya__nev { grid-column: 1 / -1; font-size: .8125rem; font-weight: 800; color: var(--td-halk, var(--aq-muted)); }
.co2k-kartya__mg { font-weight: 800; font-variant-numeric: tabular-nums; }
.co2k-kartya__szaz { font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.co2k-sav { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: var(--td-felulet-2, var(--aq-surface)); }
.co2k-sav__resz--co2 { fill: var(--co2-c); } .co2k-sav__resz--hco3 { fill: var(--co2-h); } .co2k-sav__resz--co3 { fill: var(--co2-k); }
.co2k-reszlet { display: grid; gap: 6px; margin: 0; font-size: .875rem; }
.co2k-reszlet div { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--td-keret, var(--aq-line)); }
.co2k-reszlet dt { color: var(--td-halk, var(--aq-muted)); }
.co2k-reszlet dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.co2k-grafikon { margin: 0 clamp(14px, 2.2vw, 24px); padding: 14px; border-radius: var(--radius-lg); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.co2k-grafikon svg { display: block; width: 100%; height: auto; }
.co2k-grafikon__racs line { stroke: var(--td-grafikon-racs, #E3E8E2); stroke-width: 1; }
.co2k-grafikon__racs text, .co2k-grafikon__tengely { font-size: 16px; fill: var(--td-halk, var(--aq-muted)); text-anchor: middle; }
@media (max-width: 600px) { .co2k-grafikon__racs text, .co2k-grafikon__tengely { font-size: 24px; } }
.co2k-grafikon__y { text-anchor: end !important; }
.co2k-grafikon__gorbe { fill: none; stroke-width: 3.5; stroke-linejoin: round; }
.co2k-grafikon__gorbe--co2 { stroke: var(--co2-c); } .co2k-grafikon__gorbe--hco3 { stroke: var(--co2-h); } .co2k-grafikon__gorbe--co3 { stroke: var(--co2-k); }
.co2k-grafikon__jel { stroke: var(--td-szoveg, #1C2823); stroke-width: 2; stroke-dasharray: 6 5; }
.co2k-grafikon figcaption, .co2t-sav-magy { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: .8125rem; font-weight: 700; }
.co2k-jelmagy { display: inline-flex; align-items: center; gap: 6px; }
.co2k-jelmagy::before { content: ""; width: 14px; height: 4px; border-radius: 2px; background: var(--c, #1C2823); }
.co2k-jelmagy--co2 { --c: var(--co2-c); } .co2k-jelmagy--hco3 { --c: var(--co2-h); } .co2k-jelmagy--co3 { --c: var(--co2-k); }
.co2k-jelmagy--ph::before { background: repeating-linear-gradient(90deg, #1C2823 0 4px, transparent 4px 7px); }
.co2t-mondat { font-weight: 700; }
.co2k-figyelmeztetes { display: flex; gap: 10px; margin: 16px clamp(14px, 2.2vw, 24px) 0 !important; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); font-size: .875rem; line-height: 1.5; color: var(--td-szoveg-2, #34423C); }
.co2k-figyelmeztetes .ikon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--td-teal-szoveg, var(--aq-accent-sotet)); }
.co2k > .co2k-figyelmeztetes { margin-bottom: clamp(14px, 2.2vw, 22px) !important; }

/* ---------- Ábrák ---------- */
.co2a svg { display: block; width: 100%; height: auto; }
.co2a text { font-family: inherit; font-size: 20px; font-weight: 700; fill: var(--td-szoveg, #1C2823); text-anchor: middle; }
.co2a .co2a-kicsi { font-size: 15px; font-weight: 600; fill: var(--td-halk, #4B5A53); }
.co2a .co2a-bal { text-anchor: start; }
.co2a .co2a-vilagos { fill: var(--td-felulet, #fff); }
.co2a-par { display: grid; gap: 14px; }
@media (min-width: 700px) { .co2a-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.co2a-par svg { border-radius: var(--radius-md); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); }
.co2a-uveg { fill: none; stroke: var(--td-halk, #7E9A92); stroke-width: 3; }
.co2a-viz { fill: var(--td-grafikon-racs, #DCEDEE); }
.co2a-levego { fill: var(--td-grafikon-racs, #F4F6F1); }
.co2a-talaj { fill: var(--td-figyelem-szoveg, #8B6B4E); }
.co2a-felszin { fill: none; stroke: var(--co2-c); stroke-width: 3; }
.co2a-fedel { fill: var(--td-halk, #51605A); }
.co2a-eszkoz { fill: var(--td-halk, #51605A); }
.co2a-eszkoz--diff { fill: #C9D4CF; stroke: var(--td-halk, #51605A); stroke-width: 2; }
.co2a-dc { fill: #BFE0C9; stroke: var(--td-siker-szoveg, #3E8A58); stroke-width: 2.5; }
.co2a-buborek { fill: var(--td-felulet, #fff); stroke: var(--co2-c); stroke-width: 1.5; }
.co2a-aramlas { fill: none; stroke: var(--co2-c); stroke-width: 3; stroke-dasharray: 8 6; }
.co2a-nyil { stroke: var(--td-szoveg, #1C2823); stroke-width: 3; }
.co2a-nyil--aram { stroke: var(--co2-c); }
.co2a-nyil--ki { stroke: var(--co2-k); } .co2a-nyil--be { stroke: var(--co2-h); } .co2a-nyil--ph { stroke: var(--td-halk, #6B7A73); }
.co2a-hegy { fill: var(--td-szoveg, #1C2823); fill: context-stroke; }
.co2a .co2a-jo { fill: var(--td-siker-szoveg, #2E7045); font-size: 17px; } .co2a .co2a-rossz { fill: var(--td-hiba-szoveg, #A8432E); font-size: 17px; }
.co2a-forma rect { stroke-width: 3; } .co2a-forma text { font-size: 30px; } .co2a-forma .co2a-kicsi { font-size: 16px; }
.co2a-forma--co2 rect { fill: var(--td-grafikon-racs, #E3EEF4); stroke: var(--co2-c); } .co2a-forma--hco3 rect { fill: var(--td-grafikon-racs, #E4F0E7); stroke: var(--co2-h); } .co2a-forma--co3 rect { fill: var(--td-grafikon-racs, #F4E7E1); stroke: var(--co2-k); }
.co2a .co2a-egyensuly { font-size: 34px; fill: var(--td-halk, #6B7A73); }
.co2a .co2a-cimke { font-size: 17px; }
.co2a-racs { stroke: var(--td-grafikon-racs, #E3E8E2); stroke-width: 1.5; }
.co2a .co2a-tengely { font-size: 15px; font-weight: 600; fill: var(--td-halk, #6B7A73); }
.co2a .co2a-sorcimke { text-anchor: start; font-size: 19px; }
.co2a-sav { stroke: #C9D4CF; stroke-width: 8; stroke-linecap: round; }
.co2a-pont--alacsony { fill: var(--td-felulet, #fff); stroke: var(--co2-c); stroke-width: 4; } .co2a-pont--magas { fill: var(--co2-c); }
.co2a .co2a-ertek { font-size: 16px; }
.co2a-jelmagy { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; font-size: .875rem; font-weight: 700; }
.co2a-jel { display: inline-flex; align-items: center; gap: 8px; }
.co2a-jel::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.co2a-jel--alacsony::before { border: 3px solid var(--co2-c); background: var(--td-felulet, #fff); } .co2a-jel--magas::before { background: var(--co2-c); }
.co2a-feny { fill: #F2D06B; } .co2a-folyamatos { fill: var(--co2-c); } .co2a-idozitett { fill: var(--co2-h); }
.co2a-szamlalo { stroke: var(--td-halk, #51605A); }
.co2a-spektrum { padding: 4px 0; }
.co2a-spektrum__sav { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 999px; background: linear-gradient(90deg, var(--td-teal-halvany, #DCEDEE), #3E8A58); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--td-szoveg, #1C2823); }
.co2a-spektrum__sav span:last-child { color: #fff; }
.co2a-spektrum__pontok { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.co2a-spektrum__pontok li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--td-felulet, #fff); box-shadow: var(--shadow-soft); font-size: .875rem; color: var(--td-halk, var(--aq-muted)); border-top: 4px solid #9FC7B4; }
.co2a-spektrum__pontok strong { font-size: 1rem; color: var(--td-szoveg, #1C2823); }
.co2a-spektrum__pontok .co2a-spektrum__kiemelt { border-top-color: var(--co2-h); }
@media (min-width: 760px) { .co2a-spektrum__pontok { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* A 720 széles ábrák mobilon kb. felére zsugorodnak: a feliratok ott nagyobbak. */
@media (max-width: 600px) {
  .co2a--kh .co2a-sorcimke { font-size: 30px; }
  .co2a--kh .co2a-ertek { font-size: 26px; }
  .co2a--kh .co2a-tengely, .co2a--adagolas .co2a-tengely { font-size: 26px; }
  .co2a--adagolas .co2a-cimke, .co2a--gazcsere .co2a-cimke, .co2a--karbonat .co2a-cimke { font-size: 26px; }
  .co2a--adagolas .co2a-kicsi, .co2a--gazcsere .co2a-kicsi { font-size: 22px; }
}