/* The portal frame: szig palette, light and dark, mobile first. Fonts are
   self-hosted (SIL OFL 1.1, see ../fonts/README.md). */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* A diák- és a szülői portál mindig világos (a user döntése): a sötét rendszertéma nem váltja át. */
:root {
  color-scheme: light;
  --bg: #FDFBF7; --felulet: #FFFFFF; --homok: #F3ECDE; --keret: #E6DCCA; --keret-eros: #CDB98A;
  --szoveg: #3B2A0A; --halvany: #6B5C47; --arany: #FAD058; --arany-vil: #FCE9A8; --okker: #D4A017;
  --link: #8A6D1B; --piros: #A84738; --zold: #557538; --zold-hatter: #E8EFDF;
  --away: #4A6F8C; --away-bg: #E6EEF4;
  --arnyek: 0 1px 2px rgba(59,42,10,.06), 0 8px 24px -12px rgba(59,42,10,.18);
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --torzs: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--szoveg); font: 16px/1.5 var(--torzs); -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.1; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--okker); outline-offset: 2px; border-radius: 8px; }

.keret { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }

/* Header */
.fejlec { display: flex; align-items: center; gap: 12px; padding: 18px 0 14px; }
.fejlec-logo img { height: 40px; width: auto; display: block; }
.fejlec-hely { font-size: 13px; color: var(--halvany); line-height: 1.25; }
.fejlec-hely strong { display: block; color: var(--szoveg); font-family: var(--display); font-size: 16px; font-weight: 700; }
.kilepes { margin-left: auto; border: 1px solid var(--keret); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--halvany); text-decoration: none; }
.kilepes:hover { border-color: var(--keret-eros); color: var(--szoveg); }
/* A horgony célja (pl. a művelet után #contact) ne bújjon a tapadó fejléc alá. */
main [id] { scroll-margin-top: 76px; }
/* A modul lapján a „Kezdőlap” gomb: a Kilépés párja (ugyanaz a pirula-forma és magasság), de hangsúlyosabb
   (homok kitöltés, félkövér, nyíl); görgetéskor a lap tetején lebeg, így a hosszú lapon is kéznél van. */
.home-nav { position: sticky; top: 10px; z-index: 5; width: max-content; margin: 2px 0 6px; }
.home-button { display: inline-flex; align-items: center; gap: 2px; padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 14px; line-height: 1.5;
  background: var(--homok); border: 1px solid var(--keret-eros); color: var(--szoveg); font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px -6px rgba(59,42,10,.35); }
.home-button:hover { background: var(--arany-vil); }
.home-button svg { width: 18px; height: 18px; }

/* Greeting */
.udv { padding: 14px 0 18px; }
.udv h1 { font-size: clamp(30px, 7.5vw, 44px); font-weight: 800; letter-spacing: -.02em; }
.udv-nev { background: linear-gradient(transparent 62%, var(--arany) 62%, var(--arany) 92%, transparent 92%); padding: 0 2px; }
.cimkek { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--halvany); font-variant-numeric: tabular-nums; }
.cimke { border: 1px solid var(--keret); border-radius: 999px; padding: 3px 10px; background: var(--felulet); overflow-wrap: anywhere; }
.cimke-fo { font-weight: 700; color: var(--szoveg); border-color: var(--keret-eros); }


/* Module tiles: compact rows (the whole tile is the link, a chevron marks it). A tile that asks for attention (a task,
   a deadline, a change) comes first with the gold icon and a warm ground; the rest stay quiet. */
.csempek { display: grid; gap: 10px; }
.csempe { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 14px; align-items: center; color: inherit; text-decoration: none;
  background: var(--felulet); border: 1px solid var(--keret); border-radius: 16px; padding: 14px 12px 14px 14px; box-shadow: var(--arnyek);
  transition: border-color .15s ease; }
.csempe:hover { border-color: var(--keret-eros); }
.csempe-ikon { grid-row: 1 / span 3; align-self: start; width: 44px; height: 44px; border-radius: 12px; background: var(--homok); display: grid; place-items: center; color: var(--szoveg); }
.csempe-ikon svg { width: 24px; height: 24px; }
.csempe h2 { grid-column: 2; font-size: 19px; font-weight: 700; }
.csempe-allapot { grid-column: 2; color: var(--halvany); font-size: 14.5px; line-height: 1.4; }
.csempe-nyil { grid-column: 3; grid-row: 1 / span 3; width: 22px; height: 22px; color: var(--keret-eros); }
.csempe--attention { background: #FFFBEE; border-color: var(--keret-eros); }
.csempe--attention .csempe-ikon { background: var(--arany); color: #3B2A0A; }
.csempe--attention .csempe-allapot { color: var(--szoveg); }
.csempe--attention .csempe-nyil { color: var(--link); }
.csempe-badge { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--okker); color: var(--link); font-weight: 700; font-size: 12.5px; }
.csempe-sav { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13.5px; align-items: center; }
.szamok { font-variant-numeric: tabular-nums; font-weight: 600; }
.hatarido { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--piros); }
.hatarido::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pottyok { display: inline-flex; gap: 4px; align-items: center; }
.pottyok i { width: 22px; height: 6px; border-radius: 3px; background: var(--keret); }
.pottyok i.kesz { background: var(--zold); }

/* Empty state */
.ures { border: 1.5px dashed var(--keret-eros); border-radius: 18px; padding: 32px 24px; text-align: center; background: var(--homok); }
.ures svg { width: 56px; height: 56px; color: var(--okker); }
.ures h2 { font-size: 26px; margin: 10px 0 6px; }
.ures p { margin: 0 auto; max-width: 44ch; color: var(--halvany); }

/* Login */
.belepes { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(1200px 500px at 50% -10%, var(--arany-vil), transparent 70%), var(--bg); }
.belepes-doboz { width: 100%; max-width: 400px; text-align: center; display: grid; gap: 0; }
.belepes-logo { height: 88px; width: auto; justify-self: center; }
.belepes h1 { font-size: 44px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 6px; }
.belepes-alcim { color: var(--halvany); margin: 0 0 28px; }
.google-gomb { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 14px;
  border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); font: 600 17px var(--torzs); text-decoration: none;
  box-shadow: var(--arnyek); cursor: pointer; }
.google-gomb:hover { border-color: var(--okker); }
.google-gomb svg { width: 22px; height: 22px; }
.belepes-sugo { font-size: 13px; margin: 18px 0 0; color: var(--halvany); }
.hibauzenet { margin: 0 0 18px; text-align: left; border-radius: 14px; padding: 14px 16px; background: var(--felulet); border: 1px solid var(--piros); font-size: 15px; overflow-wrap: anywhere; }
.hibauzenet strong { display: block; color: var(--piros); margin-bottom: 2px; }

/* Kódos belépés (szülői portál): előbb az e-mail-cím, utána a négyjegyű kód. */
.code-form { display: grid; gap: 10px; text-align: left; }
.code-form label { font-size: 14px; font-weight: 600; }
.code-form input { font: 17px var(--torzs); padding: 13px 14px; border-radius: 12px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); }
.code-boxes { display: flex; gap: 10px; justify-content: center; }
.code-form .code-boxes input { width: 58px; height: 68px; padding: 0; text-align: center; font: 800 32px var(--display); font-variant-numeric: tabular-nums; }
/* A kód lépése lenyílik, amikor a kódkérés után megjelenik (JS-sel újratöltés nélkül). */
.code-step { animation: code-step-reveal .35s ease-out both; }
@keyframes code-step-reveal { from { opacity: 0; transform: translateY(-10px); } }
.code-form .gomb { width: 100%; padding: 13px 18px; font-size: 16px; }
.code-sent { margin: 0 0 18px; text-align: left; overflow-wrap: anywhere; }
.code-links { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.code-links form { margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }

.dev-belepes { display: grid; gap: 10px; text-align: left; }
.dev-belepes label { font-size: 13px; color: var(--halvany); }
.dev-belepes input { font: 16px var(--torzs); padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--piros); background: var(--felulet); color: var(--szoveg); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .uzenet, .code-step { animation: none; } }

/* Module page frame */
/* The result of the last action floats at the bottom, so it stays visible
   after the redirect scrolls to the affected block; it fades after a while. */
.uzenet { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; font-weight: 600; border: 1px solid; box-shadow: var(--arnyek);
  animation: uzenet-eltunik .4s ease 7s forwards; }
.uzenet-ok { background: var(--zold-hatter); color: var(--zold); border-color: var(--zold); }
.uzenet-hiba { background: var(--felulet); color: var(--piros); border-color: var(--piros); }
@keyframes uzenet-eltunik { to { opacity: 0; visibility: hidden; } }
.modulfej { padding: 10px 0 20px; }
.modulfej h1 { font-size: clamp(30px, 7vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.modulfej p { margin: 8px 0 0; color: var(--halvany); }
.modulfej strong { color: var(--szoveg); }
.osszegzo { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; background: var(--homok); border-radius: 14px; padding: 12px 16px; margin-bottom: 26px; font-size: 15px; }
.lablec { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--keret); font-size: 13px; color: var(--halvany); }
.lablec strong { color: var(--szoveg); }

/* Szín: blocks and lectures */
.blokk { margin-bottom: 30px; }
.blokkfej { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.blokkfej .ido { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.blokkfej h2 { font: 700 18px var(--torzs); color: var(--halvany); }
.blokkfej .jel { margin-left: auto; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--homok); color: var(--halvany); }
.blokkfej .jel-kesz { background: var(--zold-hatter); color: var(--zold); }
.eloadasok { display: grid; gap: 10px; }
.eloadas { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 14px 16px; }
.eloadas-fo { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
.eloadas h3 { font: 700 17px/1.3 var(--torzs); }
.eloado { color: var(--halvany); font-size: 14px; }
.meta { display: flex; gap: 2px 14px; font-size: 13px; color: var(--halvany); margin-top: 6px; flex-wrap: wrap; }
.hely { font-weight: 700; font-variant-numeric: tabular-nums; }
.hely.keves { color: var(--piros); }
.ketblokkos { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--link); }
.eloadas form { margin: 0; }
.gomb { border: 0; border-radius: 10px; padding: 9px 14px; font: 700 15px var(--torzs); background: var(--arany); color: #3B2A0A; white-space: nowrap; cursor: pointer; }
.gomb:hover { filter: brightness(.96); }
.gomb-masod { background: transparent; border: 1px solid var(--keret-eros); color: var(--szoveg); }
.gomb[disabled] { background: var(--homok); color: var(--halvany); cursor: not-allowed; filter: none; }
.eloadas details { margin-top: 8px; }
.eloadas-leiras { margin: 8px 0 0; font-size: 15px; }
.eloadas summary { font-size: 14px; color: var(--link); cursor: pointer; font-weight: 600; }
.eloadas details p { font-size: 15px; color: var(--halvany); margin: 8px 0 0; }
.foglalt { border: 2px solid var(--zold); background: var(--zold-hatter); }
.pipa { font-size: 13px; font-weight: 700; color: var(--zold); margin-bottom: 4px; }
.tobbi { margin: 4px 0 0; font-size: 14px; color: var(--halvany); }
@media (max-width: 480px) { .eloadas-fo { grid-template-columns: 1fr; } .eloadas form { justify-self: start; } }

/* Szent Imre-nap: „Nem veszel részt előadáson?” */
.nem-reszt-vesz { margin-top: 36px; padding: 18px 20px; border: 1px solid var(--keret); border-radius: 16px; background: var(--felulet); }
.nem-reszt-vesz h2 { font-size: 22px; margin: 0 0 8px; }
.nem-reszt-vesz p { margin: 0 0 10px; color: var(--halvany); max-width: 62ch; }
.nem-reszt-vesz .figyelmeztetes { font-size: 14px; border-left: 3px solid var(--okker); padding-left: 10px; }
.nem-reszt-vesz__urlap { display: grid; gap: 12px; margin-top: 6px; }
.nem-reszt-vesz .gombsor { display: flex; flex-wrap: wrap; gap: 10px; }
.nem-reszt-vesz .megerosit { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.nem-reszt-vesz.ures { margin-top: 0; text-align: center; background: var(--homok); border-style: dashed; }
.nem-reszt-vesz.ures p { margin: 0 auto 14px; }

/* Szeretetszolgálat: szűrő-linkek (JS nélkül) és a tevékenység jellege */
.filter-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.filter-links a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--keret); color: inherit; text-decoration: none; font-size: 14px; }
.filter-links a[aria-current="page"] { background: var(--okker); border-color: var(--okker); color: #fff; font-weight: 700; }
.eloadas .kind { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.eloadas .kind--regular { background: var(--homok); color: var(--szoveg); border: 1px solid var(--keret-eros); }
.eloadas .kind--occasional { background: var(--okker); color: #fff; }
.eloadas .pipa .final-note { font-weight: 800; }
.eloadas .cancel-rule { margin: 6px 0 0; font-size: 13px; color: var(--halvany); }
.eloadas .cancel-rule strong { color: var(--szoveg); }
/* A végleges jelentkezés: kiemelt sáv, a teendővel (személyes egyeztetés). */
.eloadas .cancel-rule--final { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--arany-vil); color: var(--szoveg); font-size: 14px; }
/* Szeretetszolgálat: a diák elérhetősége (telefonszám) */
/* Szeretetszolgálat: az elérhetőség kártyaként, a tevékenység-kártyákkal egy szélességben. */
.contact { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 14px 16px; }
.contact p { margin: 0; }
.contact-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; }
.contact-form label { flex-basis: 100%; font-weight: 700; }
.phone-field { flex: 1 1 220px; display: flex; border: 1px solid var(--keret-eros); border-radius: 10px; background: var(--felulet); overflow: hidden; }
.phone-field:focus-within { outline: 3px solid var(--okker); outline-offset: 2px; }
.phone-prefix { display: flex; align-items: center; padding: 0 10px 0 12px; background: var(--homok); border-right: 1px solid var(--keret); color: var(--halvany); font-weight: 700; font-variant-numeric: tabular-nums; }
.phone-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--szoveg); padding: 9px 12px; font: 600 17px var(--torzs); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.phone-field input::placeholder { color: var(--halvany); opacity: .6; font-weight: 400; }
.phone-field input:focus-visible { outline: none; }
.contact-hint { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--halvany); }
.contact-hint strong { color: var(--szoveg); }
/* hiányzó telefonszám: az első lépés, kiemelve */
.contact--missing { border-color: var(--okker); background: #FFFBEE; }
.contact--missing .blokkfej h2 { color: var(--szoveg); }
/* megadott telefonszám: egy sor, a módosítás lenyílik */
.contact--saved { padding: 0 16px; margin-bottom: 14px; }
.contact--saved summary { display: flex; align-items: baseline; gap: 4px 12px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 15px; color: var(--halvany); }
.contact--saved summary::-webkit-details-marker { display: none; }
.contact--saved summary strong { color: var(--szoveg); white-space: nowrap; }
.contact__edit { margin-left: auto; color: var(--link); font-weight: 600; font-size: 14px; }
.contact--saved[open] .contact__edit { visibility: hidden; }
.contact--saved .contact-form { margin: 0 0 14px; }
/* „Kérdésed van?”: kihez forduljon (a tevékenységről a mentorhoz, minden másról a szervezőhöz) */
.help-box { margin: 0 0 30px; padding: 14px 16px; border-radius: 14px; background: var(--homok); font-size: 15px; }
.help-box h2 { font: 700 16px var(--torzs); margin: 0 0 6px; }
.help-box p { margin: 4px 0 0; color: var(--halvany); }
.help-box strong { color: var(--szoveg); }
/* a lap szabályai lenyílóban: a bevezető egy-két sor marad */
.how-it-works { margin-top: 10px; font-size: 15px; }
.how-it-works summary { color: var(--link); font-weight: 600; cursor: pointer; width: max-content; }
.how-it-works ul { margin: 8px 0 0; padding-left: 20px; color: var(--halvany); display: grid; gap: 4px; }
.how-it-works strong { color: var(--szoveg); }
/* kereső és szűrők a kínálat fölött */
.offer-tools { display: grid; gap: 10px; margin: 0 0 22px; }
.offer-search { font: 16px var(--torzs); padding: 11px 14px; border-radius: 12px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); width: 100%; }
.offer-filters summary { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--keret); background: var(--felulet); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.offer-filters summary::-webkit-details-marker { display: none; }
.offer-filters summary .jel { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--okker); color: #fff; }
.offer-filters .filter-links { margin: 10px 0 0; }
.offer-search__empty { color: var(--halvany); }
/* lezárt fajta (a rendszeresek a lezárás után): egy összecsukott doboz a lista végén */
.closed-kind { border: 1px dashed var(--keret-eros); border-radius: 14px; padding: 0 14px; margin-bottom: 10px; }
.closed-kind summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; cursor: pointer; font-weight: 700; color: var(--halvany); }
.closed-kind summary .jel { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--homok); }
.closed-kind__note { font-weight: 400; font-size: 14px; }
.closed-kind[open] .eloadasok { padding-bottom: 14px; }
/* A mező állapota: zöld pipa, ha el van mentve; sárga felkiáltójel, ha még hiányzik. */
.phone-status { display: none; align-self: center; margin-right: 10px; width: 22px; height: 22px; flex: none; border-radius: 50%;
  align-items: center; justify-content: center; font: 800 13px/1 var(--torzs); }
.phone-field--saved { border-color: var(--zold); background: var(--zold-hatter); }
.phone-field--saved .phone-prefix { background: transparent; border-right-color: var(--zold); color: var(--zold); }
.phone-field--saved .phone-status { display: flex; background: var(--zold); color: var(--felulet); }
.phone-field--missing { border-color: var(--okker); }
.phone-field--missing .phone-status { display: flex; background: var(--arany); color: #3B2A0A; }
/* Szeretetszolgálat: a diák megjegyzése a saját kártyáján */
.own-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--keret); font-size: 15px; }
.own-note p { margin: 0 0 6px; }
.own-note .note-form { display: grid; gap: 6px; margin: 8px 0; }
.own-note textarea { width: 100%; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--bg); color: var(--szoveg); }
.own-note .note-form .gomb { justify-self: start; }

/* Szülői portál: Adataim (saját adatok űrlapja, gyerekek és a többi intéző szülő). */
.details-form { display: grid; gap: 8px; }
.details-form label, .details-label { font-weight: 700; margin-top: 8px; }
.details-form input[type="text"] { font: 17px var(--torzs); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); }
.details-value { margin: 0; color: var(--halvany); overflow-wrap: anywhere; }
.details-value strong { color: var(--szoveg); }
.details-optional { font-weight: 400; color: var(--halvany); }
.details-form .gomb { justify-self: start; margin-top: 10px; }
.child-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.child-card { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 12px 16px; }
.child-card p { margin: 4px 0 0; color: var(--halvany); font-size: 15px; }
.child-class { margin-left: 6px; font-weight: 700; color: var(--halvany); font-variant-numeric: tabular-nums; }

/* Diákportál → Szülői portál: a szülők kitakart címe, a hiányzó cím megadása. */
.parent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.parent-card { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 12px 16px; }
.parent-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.parent-card__relation { color: var(--halvany); font-size: 14px; }
.parent-card__email { margin: 4px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.parent-card__state { margin: 4px 0 0; color: var(--halvany); font-size: 15px; }
.parent-card__state strong { color: var(--szoveg); overflow-wrap: anywhere; }
.parent-card__state--missing { color: var(--szoveg); }
.list-card { margin-top: 14px; }
.parent-form { display: grid; gap: 6px; margin-top: 10px; }
.parent-form label { font-weight: 700; font-size: 15px; }
.parent-form__row { display: flex; flex-wrap: wrap; gap: 8px; }
.parent-form input[type="email"] { flex: 1 1 16rem; min-width: 0; font: 17px var(--torzs); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); }

/* Szülői portál: a diák által megadott cím megerősítése (belépés nélkül). */
.confirm-email { max-width: 36rem; padding: 10px 0 20px; }
.confirm-email h1 { font-size: clamp(28px, 6vw, 36px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.confirm-email p { margin: 0 0 12px; }
.confirm-email__address { font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.confirm-email__error { color: var(--piros); font-weight: 700; }
.confirm-email a.gomb { display: inline-block; text-decoration: none; }

/* Napon belüli távozás (szülői portál): gyerekenként bejelentések, nyugtázás-pecsét, visszavonás, új bejelentés. */
.leave-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.leave { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 12px 16px; display: grid; gap: 8px; }
.leave p { margin: 4px 0 0; }
.leave-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.leave-who { font-family: var(--display); font-size: 18px; }
.leave-day { font-family: var(--display); font-size: 18px; }
.leave-who + .leave-day { font-family: var(--torzs); font-size: 16px; font-weight: 700; }
.leave-hours { font-weight: 700; color: var(--halvany); }
.leave-meta { font-size: 13px; color: var(--halvany); }
.leave-state { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.leave-glyph { width: 20px; height: 20px; flex: none; color: var(--okker); }
.leave--elfogadva, .leave--nyomtatva { border-color: var(--keret-eros); }
.leave--visszavonva { background: var(--homok); color: var(--halvany); }
/* A folyamatban lévő (ma vagy később, nincs visszavonva): a téma sárgájával keretezve, hogy elsőre látsszon. */
.leave.leave--current { border: 2px solid var(--arany); box-shadow: 0 0 0 3px var(--arany-vil); padding: 11px 15px; }
/* Kész (kinyomtatva, a gyerek megkapta) és még nem múlt el: zöld keret; ha elmúlt, a korábbiak közt semleges. */
.leave.leave--current.leave--nyomtatva { border-color: var(--zold); box-shadow: 0 0 0 3px var(--zold-hatter); }
.leave-history { margin: 0 0 12px; }
.leave-history summary { font-weight: 700; color: var(--halvany); cursor: pointer; margin-bottom: 8px; }
.leave-history .leave-state { color: var(--halvany); }
.leave-history .leave-stamp { color: var(--halvany); background: var(--homok); }
.leave-empty { color: var(--halvany); margin: 0 0 12px; }
.leave--visszavonva .leave-day { text-decoration: line-through; }
/* Pecsét: kettős gyűrű, kissé elforgatva, mint a papír igazolás „P.h.” jele. */
.leave-stamp { width: 26px; height: 26px; flex: none; color: var(--zold); background: var(--zold-hatter); border-radius: 50%; transform: rotate(-10deg); animation: leave-stamp-in .3s ease-out both; }
@keyframes leave-stamp-in { from { opacity: 0; transform: rotate(-10deg) scale(1.6); } }
.leave-state--elfogadva, .leave-state--nyomtatva { color: var(--zold); }
.leave-state--visszavonva { color: var(--halvany); font-weight: 400; }
.leave-child { padding: 1px 8px; border-radius: 999px; background: var(--homok); color: var(--szoveg); font-size: 13px; }
.leave[hidden] { display: none; }
.leave-withdraw__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.leave-withdraw__choices form { margin: 0; }
/* Gyerek-szűrő chipek és a „Kire vonatkozik?” választó (közös részek, több gyereknél). */
.child-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.child-chip { font: 600 14px var(--torzs); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); cursor: pointer; }
.child-chip[aria-pressed="true"] { background: var(--arany); border-color: var(--arany); }
/* Kapcsolható gomb (rejtett jelölőnégyzet / rádió + címke): a gyerekválasztó és a „Mikor?”. */
.toggle-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle-pill { position: relative; margin: 0; font-weight: 600; }
.toggle-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-pill span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--keret-eros); background: var(--felulet); cursor: pointer; }
.toggle-pill span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--keret-eros); background: var(--felulet); }
.toggle-pill small { color: var(--halvany); font-weight: 600; }
.toggle-pill input:checked + span { background: var(--arany); border-color: var(--arany); }
.toggle-pill input:checked + span::before { content: "✓"; display: inline-grid; place-items: center; font-size: 11px; border-color: var(--szoveg); background: var(--szoveg); color: var(--arany); }
.toggle-pill input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.leave-note { margin: 8px 0 0; font-size: 14px; color: var(--halvany); }
.leave-withdraw summary { font-weight: 700; color: var(--link); cursor: pointer; }
.leave-withdraw form { margin-top: 8px; }
.leave-withdraw p { font-size: 14px; color: var(--halvany); }
.leave-confirm { background: transparent; border: 1px solid var(--piros); color: var(--piros); }
.leave-new { margin: 0 0 18px; }
.leave-new > summary.gomb { display: inline-flex; list-style: none; }
.leave-new > summary.gomb::-webkit-details-marker { display: none; }
.leave-new[open] { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 12px 16px; }
.leave-new[open] > summary.gomb { background: none; border: 0; padding: 0; box-shadow: none; color: var(--link); }
.leave-form { margin-top: 10px; }
.leave-form input[type="date"], .leave-form select, .leave-form textarea { font: 17px var(--torzs); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); max-width: 100%; }
.leave-form input[type="text"] { width: 100%; }
.leave-form textarea { width: 100%; }
.leave-modes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.leave-modes label { font-weight: 400; margin: 0; }
.leave-modes input { accent-color: var(--okker); }
.leave-lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.leave-lessons > div { display: grid; gap: 4px; min-width: 0; }
.leave-lessons select { width: 100%; }
.leave-lessons label { font-weight: 700; margin-top: 0; }
.leave-form:has(input[value="egesz"]:checked) .leave-lessons { display: none; }
@media (prefers-reduced-motion: reduce) { .leave-stamp { animation: none; } }

/* Beiratkozás: gyerekenként egy kártya a kipipálható teendőkkel, alatta a tudnivalók. */
.enrolment-card, .enrolment-notes { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--keret); border-radius: 16px; background: var(--felulet); }
.enrolment-card h2, .enrolment-notes h2 { font-size: 20px; }
.enrolment-card__class { font-size: 15px; font-weight: 600; color: var(--halvany); }
.enrolment-card__hint { margin-top: 4px; font-size: 14px; color: var(--halvany); }
.task-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.task-list form { margin: 0; }
.task-list label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.task-list label:hover { background: var(--arany-vil); }
.task-list input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--okker); }
.task-list__item--done > form > label > span { color: var(--halvany); }
.task-list__meta { display: block; font-size: 13px; color: var(--halvany); }
.enrolment-notes { font-size: 15px; }
.enrolment-notes ul { padding-left: 20px; }
.other-parent { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--keret); }
.other-parent h3 { font-size: 17px; margin: 0; }
.other-parent .parent-form input[type="text"], .other-parent .parent-form select { font: 17px var(--torzs); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); max-width: 100%; }
.class-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 8px; margin: 22px 0 0; }
.class-card { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 12px 14px; }
.class-card h2 { font: 700 15px var(--torzs); color: var(--halvany); margin: 0 0 6px; }
.class-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 15px; }
.class-card dt { color: var(--halvany); }
.class-card dd { margin: 0; overflow-wrap: anywhere; }
.class-card__detail { display: block; font-size: 14px; }
/* A diák napja (Ma és holnap / A gyermekem napja): telefonra tervezve; széles kijelzőn az idő külön oszlopban. */
.day-child { font-size: 20px; margin: 22px 0 0; }
/* több gyereknél ugrósor a lap tetején */
.day-children { margin: 0 0 8px; }
.day-card { margin-top: 14px; padding: 12px 12px 14px; border: 1px solid var(--keret); border-radius: 16px; background: var(--felulet); }
.day-card h2 { font-size: 18px; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.day-card__changes { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--arany-vil); color: var(--szoveg); }
.day-empty { color: var(--halvany); font-size: 15px; margin: 6px 0 0; }
.day-lessons { list-style: none; margin: 0; padding: 0; display: grid; }
/* egy sor: az óra száma (vagy ikon) bal oldalt; mellette az idő, alatta a tartalom */
.day-lesson { display: grid; grid-template-columns: 2em 1fr; grid-template-areas: "hour time" "hour main"; gap: 0 8px; padding: 9px 8px; margin: 0 -8px;
  border-top: 1px solid var(--keret); align-items: baseline; }
.day-lesson:first-child { border-top: 0; }
.day-lesson__hour { grid-area: hour; font-weight: 700; color: var(--halvany); font-variant-numeric: tabular-nums; text-align: center; }
.day-lesson__time { grid-area: time; font-size: 13px; color: var(--halvany); font-variant-numeric: tabular-nums; }
.day-lesson__main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.day-lesson__main strong { font-size: 16px; }
.day-lesson__meta { font-size: 14px; color: var(--halvany); overflow-wrap: anywhere; }
.day-lesson__flag { font-weight: 700; color: var(--szoveg); }
.day-lesson__change { font-size: 14px; }
.day-lesson__state { font-weight: 700; }
.day-lesson__icon { width: 18px; height: 18px; vertical-align: -3px; }
.day-lesson__text { font-size: 15px; }
.day-lesson__note { font-size: 13px; color: var(--away); }
.day-badge { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6;
  background: var(--homok); color: var(--halvany); vertical-align: 1px; }
.day-badge--now { background: var(--arany); color: #3B2A0A; }
/* a tételek (ebéd, szentmise, kikérő, távozás, pótdolgozat): ikon, normál betű */
.day-lesson--item .day-lesson__hour { color: var(--okker); }
/* színek: sárga a helyettesítés, piros az elmaradás, kék a távollét; az ebéd épp csak árnyalt */
.day-lesson--substituted, .day-lesson--cancelled, .day-lesson--lunch, .day-lesson--away { border-radius: 10px; border-top-color: transparent; }
.day-lesson--substituted { background: var(--arany-vil); }
.day-lesson--substituted .day-lesson__change { color: var(--szoveg); }
.day-lesson--cancelled { background: color-mix(in srgb, var(--piros) 9%, transparent); }
.day-lesson--cancelled strong { text-decoration: line-through; color: var(--halvany); }
.day-lesson--cancelled .day-lesson__state { color: var(--piros); }
.day-lesson--lunch { background: color-mix(in srgb, var(--zold-hatter) 55%, transparent); }
.day-lesson--elective strong, .day-lesson--elective .day-lesson__meta { color: var(--halvany); }
.day-lesson--now { box-shadow: inset 3px 0 0 var(--arany); }
.day-lesson--past { opacity: .45; }
/* a távollét (kikérő, távozás) egy blokk: a kezdő sora erősebb, az érintett sorok halványak; lekerekítés a két végén */
.day-lesson--away { border-radius: 0; border-left: 4px solid var(--away); padding-left: 4px; background: var(--away-bg); }
.day-lesson--away.day-lesson--away-first { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.day-lesson--away.day-lesson--away-last { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.day-lesson--away:not(.day-lesson--request):not(.day-lesson--leave):not(.day-lesson--program) > * { opacity: .7; }
.day-lesson--away:is(.day-lesson--request, .day-lesson--leave, .day-lesson--program) { background: color-mix(in srgb, var(--away) 24%, var(--away-bg)); }
.day-lesson--away:is(.day-lesson--request, .day-lesson--leave, .day-lesson--program) .day-lesson__text { font-weight: 700; color: var(--szoveg); }
.day-lesson--away:is(.day-lesson--request, .day-lesson--leave, .day-lesson--program) .day-lesson__hour { color: var(--away); }
/* az elrejtett órák a nap alján: összecsukva csak a számuk, lenyitva soronként „Mutasd” gombbal */
.day-hidden summary { cursor: pointer; width: max-content; }
.day-hidden ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.day-hidden li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-hidden form { margin: 0; }
.day-hidden .gomb { min-height: 40px; }
/* „nem járok rá”: az óra jobb szélén egy ikon; lenyitva alatta a kérdés és a két lehetőség (csak ez a heti óra, vagy a tárgy
   minden órája) */
.day-lesson:has(> .day-lesson__skip) { position: relative; }
.day-lesson:has(> .day-lesson__skip) > :is(.day-lesson__time, .day-lesson__main) { padding-right: 36px; }
.day-lesson__skip { grid-column: -2 / -1; font-size: 14px; color: var(--halvany); }   /* az utolsó (fő) oszlopban, telefonon és asztalon is */
.day-lesson__skip summary { position: absolute; top: 6px; right: 4px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
    list-style: none; cursor: pointer; color: var(--halvany); opacity: .6; }
.day-lesson__skip summary::-webkit-details-marker { display: none; }
.day-lesson__skip summary svg { width: 18px; height: 18px; }
.day-lesson__skip summary:hover, .day-lesson__skip[open] summary { opacity: 1; background: var(--homok); color: var(--szoveg); }
.day-lesson__skip[open] { margin: 8px 0 2px; padding: 12px; border-radius: 10px; background: var(--homok); }
/* a details tartalmára a rács-térköz nem hat: a kérdés alatti térköz margóval, a doboz belső margójával egyező */
.day-lesson__skip-question { display: block; margin: 0 0 12px; line-height: 1.2; font-weight: 700; color: var(--szoveg); }
.day-lesson__skip form { margin: 0; }
.day-lesson__skip-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }   /* a két gomb egymás mellett, a tárgy oszlopának szélességében */
.day-lesson__skip .gomb { width: 100%; height: 100%; min-height: 44px; white-space: normal; background: var(--felulet); }   /* ujjal kényelmes */
.day-hidden { margin: 10px 0 0; font-size: 14px; color: var(--halvany); }
.day-events { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--keret-eros); border-radius: 12px; font-size: 14px; color: var(--halvany); }
.day-events__title { font-weight: 700; color: var(--szoveg); cursor: pointer; }
.day-events__title span { font-weight: 400; color: var(--halvany); }
.day-events ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.day-lesson--untimed { grid-template-areas: "hour main"; }
.day-lesson--untimed .day-lesson__time { display: none; }
@media (min-width: 600px) {
  .day-card { padding: 14px 18px; }
  .day-lesson { grid-template-columns: 2em 6em 1fr; grid-template-areas: "hour time main"; gap: 0 10px; padding: 8px 10px; margin: 0 -10px; }
  .day-lesson:has(> .day-lesson__skip) > .day-lesson__time { padding-right: 0; }   /* asztalon az ikon a fő oszlop mellett van */
  .day-lesson--away { padding-left: 6px; }
  .day-lesson--untimed { grid-template-areas: "hour main main"; }
}
.day-lesson--notice { border-radius: 10px; border-top-color: transparent; background: color-mix(in srgb, var(--okker) 16%, transparent); }
.day-lesson--notice .day-lesson__text { font-size: 14px; }
.day-lesson--notice .day-lesson__text a { font-weight: 700; white-space: nowrap; }
.day-lesson--szin .day-lesson__text { font-weight: 700; }
.day-lesson--szin .day-lesson__hour { color: var(--okker); }
.day-lesson--charity .day-lesson__text { font-weight: 700; }
.day-lesson--charity .day-lesson__hour { color: var(--piros); }
/* a nap felirata, ha nem sima tanítási nap („Tanítás nélküli munkanap: Szent Imre-nap”) */
.day-card__note { margin: -2px 0 8px; font-size: 14px; font-weight: 600; color: var(--szoveg); }
.day-lesson--entry .day-lesson__hour, .day-lesson--exit .day-lesson__hour { color: var(--halvany); }
.day-lesson__late { width: 15px; height: 15px; vertical-align: -2px; color: var(--okker); }
/* Az esti értesítés kártyája a nap alján: csendes, egy kapcsoló. */
.evening-card { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--keret); border-radius: 16px; background: var(--felulet); font-size: 14px; color: var(--halvany); }
.evening-card h2 { font-size: 16px; margin: 0 0 4px; color: var(--szoveg); }
.evening-card p { margin: 0 0 10px; }
.evening-card strong { color: var(--szoveg); overflow-wrap: anywhere; }
.evening-card__switch, .portal-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--szoveg); }
.evening-card__switch input, .portal-switch input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--halvany) 22%, var(--felulet));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--halvany) 40%, transparent); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.evening-card__switch input::after, .portal-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--felulet);
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.evening-card__switch input:checked, .portal-switch input:checked { background: var(--zold); box-shadow: none; }
.evening-card__switch input:checked::after, .portal-switch input:checked::after { left: 21px; }
@media (prefers-reduced-motion: reduce) { .evening-card__switch input, .evening-card__switch input::after, .portal-switch input::after { transition: none; } }
/* Értesítések: kategóriánként egy sor, alatta a két kapcsoló (E-mail, Mobilon); lent a mobil bekapcsolása. */
.notif-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.notif-item { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--keret); border-radius: 16px; background: var(--felulet); }
.notif-item__label { font-weight: 600; }
.notif-item__nowrap { white-space: nowrap; }
.notif-item__lock { width: 12px; height: 12px; fill: var(--halvany); vertical-align: -1px; }
.notif-item__trial { justify-self: start; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--okker); background: var(--arany-vil); color: var(--szoveg); font-size: 12.5px; font-weight: 700; }
.notif-item__switches { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.portal-switch { font-size: 15px; }
.notif-note { font-size: 13px; color: var(--halvany); margin: 0 0 12px; }
.notif-device { margin-top: 24px; padding: 14px; border: 1px solid var(--keret); border-radius: 16px; background: var(--felulet); }
.notif-device h2 { font-size: 17px; margin: 0 0 6px; }
.notif-device p { margin: 0 0 10px; font-size: 14px; color: var(--halvany); }
.notif-device__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notif-device__status:empty { display: none; }
.notif-devices { list-style: none; margin: 10px 0; padding: 0; }
.notif-devices li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--keret); font-size: 14px; }
.notif-devices form { margin: 0; }
.deadline-note { margin-top: 8px; }
.deadline-note strong { color: var(--piros); }

/* Teremellenőrző kioszk (teremellenorzes.szig.hu): a mai nap és a haladás felül tapad; termenként a Rend és a Szemét
   0–4-es gombsora, nagy koppintási felülettel; a kijelölt pont színe a skála szerint (0 piros … 4 zöld). */
.rc-head { position: sticky; top: 0; z-index: 4; margin: 0 -16px 14px; padding: 8px 16px 10px; border-bottom: 1px solid var(--keret);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rc-day { margin: 2px 0 0; text-align: center; font-size: 22px; font-weight: 800; }
.rc-progress { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 16px; }
/* a „csak a hiányzók” szűrő nagy, gomb-kinézetű kapcsoló (telefonon könnyen eltalálható); bekapcsolva kitöltött */
.rc-progress__filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 12px; border-radius: 999px;
  border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); font-weight: 700; cursor: pointer; }
.rc-progress__filter input { width: 22px; height: 22px; margin: 0; accent-color: var(--szoveg); }
.rc-progress__filter:has(input:checked) { background: var(--arany); border-color: var(--okker); }
.rc-hint { margin: 4px 0 0; font-size: 13px; color: var(--halvany); }
/* az emeletek váltakozó, halvány háttérsávon (minden második homokszínű); az emelet neve mellett, hány terme kész */
.rc-floor { margin: 0 -10px 10px; padding: 10px 10px 2px; border-radius: 18px; }
.rc-floor:nth-child(even) { background: color-mix(in srgb, var(--homok) 70%, var(--bg)); }
.rc-floor__title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px;
  font: 700 13px var(--torzs); letter-spacing: .06em; text-transform: uppercase; color: var(--szoveg); }
.rc-floor__count { font-weight: 600; letter-spacing: 0; color: var(--halvany); font-variant-numeric: tabular-nums; }
.rc-room { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 10px 12px 12px; margin-bottom: 10px; scroll-margin-top: 140px; }
.rc-room__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 17px; }
.rc-room__head span { color: var(--halvany); font-size: 15px; }
.rc-room__check { margin-left: auto; color: var(--zold); font-weight: 800; visibility: hidden; }
.rc-room--done { border-color: color-mix(in srgb, var(--zold) 45%, var(--keret)); }
.rc-room--done .rc-room__check { visibility: visible; }
[data-rc-filter="missing"] .rc-room--done { display: none; }
.rc-scale { display: grid; grid-template-columns: 4.2rem 1fr; align-items: center; gap: 8px; margin: 6px 0 0; }
.rc-scale[aria-busy="true"] { opacity: .6; }
.rc-scale__label { font-size: 14px; font-weight: 600; color: var(--halvany); }
.rc-scale__buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rc-scale__button { min-height: 44px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg);
  font: 800 18px var(--torzs); font-variant-numeric: tabular-nums; cursor: pointer; }
.rc-scale__button[aria-pressed="true"] { color: #fff; border-color: transparent; }
.rc-scale__button--0[aria-pressed="true"] { background: #A84738; }
.rc-scale__button--1[aria-pressed="true"] { background: #C26A2E; }
.rc-scale__button--2[aria-pressed="true"] { background: #B88A12; }
.rc-scale__button--3[aria-pressed="true"] { background: #7C8F2E; }
.rc-scale__button--4[aria-pressed="true"] { background: #557538; }
/* program (pl. szakkör): a tag következő alkalma, és ha előtte egy elmarad, az kiemelve */
.program-next { margin: 8px 0 0; font-size: 14.5px; }
.program-next--off { padding: 6px 10px; border-left: 3px solid var(--okker); background: #FFFBEE; border-radius: 6px; }
.program-day { margin: 18px 0 8px; font: 700 15px/1.3 var(--torzs); color: var(--halvany); }
.program-day:first-of-type { margin-top: 4px; }
.program-mark { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.program-mark__note { font-size: 14px; color: var(--halvany); }
/* hibabejelentő: a kioszk kártyái (prioritás, hely, beküldő, leírás, képek, Megoldva / átadás) és a diákportál beküldő űrlapja */
/* a kioszk szűrősorai: soronként egy vízszintesen görgethető sor (telefonon nem tördel több sorba) */
.fr-filters .filter-links { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 10px; padding: 0 32px 2px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.fr-filters .filter-links::-webkit-scrollbar { display: none; }
.fr-filters { margin-bottom: 18px; }
.fr-card { background: var(--felulet); border: 1px solid var(--keret); border-radius: 14px; padding: 12px 14px 14px; margin-bottom: 12px; scroll-margin-top: 80px; }
.fr-card--sos { border-color: var(--piros); box-shadow: inset 4px 0 0 var(--piros); }
.fr-card--done { opacity: .75; }
.fr-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-card__place { font: 700 18px/1.3 var(--torzs); }
.fr-card__text { margin: 8px 0 0; overflow-wrap: anywhere; }
.fr-card__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fr-card__photos img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--keret); }
.fr-card__solved { margin: 10px 0 0; color: var(--zold); font-weight: 600; font-size: 14.5px; }
.fr-card__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 12px; }
.fr-priority { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 800 13px/1.6 var(--torzs); letter-spacing: .02em; }
.fr-priority--sos { background: var(--piros); color: #fff; }
.fr-priority--daily { background: var(--arany); color: var(--szoveg); }
.fr-priority--weekly { background: var(--homok); color: var(--halvany); border: 1px solid var(--keret); }
.fr-solve { min-height: 44px; padding: 10px 18px; }
.fr-solve--armed { background: var(--zold); color: #fff; }
.fr-handover summary { cursor: pointer; padding: 10px 4px; color: var(--link); font-weight: 600; }
.fr-handover p { margin: 4px 0 8px; font-size: 14px; color: var(--halvany); }
.fr-handover form { display: inline-block; margin: 0 6px 6px 0; }
.fr-form { display: grid; gap: 14px; }
.fr-form label, .fr-form fieldset { display: grid; gap: 6px; font-weight: 600; }
.fr-form fieldset { border: 0; padding: 0; margin: 0; }
.fr-form legend { padding: 0; margin-bottom: 6px; }
.fr-form select, .fr-form input[type="text"], .fr-form textarea { font: 16px var(--torzs); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--keret-eros); background: var(--felulet); color: var(--szoveg); width: 100%; }
.fr-form input[type="file"] { width: 100%; min-width: 0; font: 15px var(--torzs); color: var(--halvany); padding: 8px; border: 1px dashed var(--keret-eros); border-radius: 10px; background: var(--felulet); }
.fr-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--keret-eros); border-radius: 10px; background: var(--homok);
  color: var(--szoveg); font: 700 15px var(--torzs); cursor: pointer; }
.fr-form .gomb { justify-self: start; }
.fr-form__hint { font-weight: 400; font-size: 14px; color: var(--halvany); }
/* kép nagyban a lapon belül ([data-zoom], portal.js): sötét háttér, a kép a képernyőn belül, bezáró gomb */
.zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.zoom::backdrop { background: rgba(20, 14, 4, .88); }
.zoom img { display: block; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); margin: 64px auto 0; object-fit: contain; border-radius: 10px; }
.zoom__close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--felulet); color: var(--szoveg);
  font: 700 26px/1 var(--torzs); cursor: pointer; }
.fr-card__actions a.gomb { display: inline-block; text-decoration: none; }