/*
 * shared/task-event-editor.css — a KÖZÖS teljes-oldalas feladat/esemény-készítő stílusa.
 * Prefix: .tee-*  (task-event-editor). Modul-független, globálisan betöltve (index.html).
 * A .page-listhead / .page-back / .btn-* / .ajdd a globális dashboard.css-ből jön; itt csak
 * a saját váz, a beállítás-lista és a jelölő-chipek élnek.
 *
 * ===========================================================================
 * VÁLTOZÁS-NAPLÓ
 * ===========================================================================
 * 2026-08-13  BEÁLLÍTÁS-LISTA (koncepció/Kész koncept/uj-feladat-latvany-koncept.html, „B" irány).
 *   Kivezetve: `.tee-toggle*` (narancs pill-csúszka), `.tee-segmented` / `.tee-seg`,
 *   `.tee-modeswitch` / `.tee-mode-btn`, `.tee-set*`, `.tee-allday-inline`, `.tee-reserved`,
 *   és a fő gomb fénycsíkja (a ház a shimmert globálisan is elhagyta, ez volt az utolsó
 *   példánya). Helyettük: `.tee-list` beállítás-lista, `.tee-tabs` fej-fülek, `.tee-req` /
 *   `.tee-optional` / `.tee-chip` jelölő-chipek, `.tee-error` mező-hiba.
 *   A LAPON EGYETLEN NARANCS ELEM MARADT: a fő gomb (plusz a fókusz-gyűrű).
 *   A kötelezőség HÁROM rétegben jelenik meg: jel (csillag), kiírt szó, halvány szín , a
 *   szín soha nem hordozza egyedül a jelentést.
 */

/* A lap saját jelölő-színei. SZÁNDÉKOSAN a `.tee-root`-ra kötve, nem a `:root`-ra: a
   készítőn kívül semmit nem befolyásolnak. Kék = kötelező, piros = kizárólag hiba. */
.tee-root {
  --tee-kell-bg: #dbeafe;
  --tee-kell-ink: #1e40af;
  --tee-hiba-ink: #b91c1c;
  --tee-hiba-keret: #dc2626;

  display: block;
  animation: tee-in 0.2s ease-out;
}

/* A CSENDES FEJLÉC ALÁ VONAL KERÜL, kártya-keret helyett (PO, 2026-08-13).
   A `--csendes` elveszi a hátteret és a keretet, de akkor a fejléc és az első kártya
   összeérne, és nem lenne látható határ a „mit teszek a lappal" és a „mit írok bele" között.
   A vonal ugyanaz a megoldás, amit a Naptár és a Feladatok polca is használ: szerkezetet
   mutat, nem díszít. */
.tee-head {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
@keyframes tee-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes tee-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tee-root {
    animation: none;
  }
}

/* ===== Fejléc: mit hozol létre (Feladat / Esemény) =====
   Nem szín jelöli az aktívat, hanem PIPA + vastag alsó vonal + `aria-pressed`. */
/* ════════════════════════════════════════════════════════════════════════════════════════
   A KÉTÁLLÁSÚ FAJTA-CSÚSZKA , AZ ÉLES SZERKESZTŐBEN MÁR NEM HASZNÁLT (2026-08-24)

   A „feladat vagy esemény" váltó a ház NÉZET-VÁLTÓJÁRA cserélődött (PO-döntés; koncepció:
   feladat-munkalap-koncept.html 7.3). Ezek a szabályok azért maradtak itt, mert a
   `koncepció/feladat-letrehozas-koncept.html` ezzel a jelöléssel mutatja meg a MAI (régi)
   állapotot az összevetésben , ha törölnénk, az a lap stílus nélkül maradna.

   AKI IDE TÉVED: a szerkesztő ma NEM ad ki `.tee-tab` elemet. Ha új felületet írsz, a
   `shared/nezet-valto.js` a szabvány.
   ════════════════════════════════════════════════════════════════════════════════════════ */
.tee-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
}
.tee-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s ease;
}
.tee-tab:hover {
  color: var(--text-primary);
}
.tee-tab-ic,
.tee-tab-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
.tee-tab[aria-pressed='true'] {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--text-primary);
}
.tee-tab[aria-pressed='true'] .tee-tab-ic,
.tee-tab[aria-pressed='false'] .tee-tab-check {
  display: none;
}
.tee-tab[aria-pressed='true'] .tee-tab-check {
  color: var(--text-primary);
}
/* Szerkesztéskor nincs váltás , csak jelölő címke */
.tee-modelabel {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   A TÖRZS HÁROM ÁLLAPOTA (koncepció 7.6 ajánlása, megépítve 2026-08-25)

   A MÉRT BAJ: a tartalom-hasáb korlátlanul nyúlt. 1440-en 1036, 1920-on 1341, 2560-on 1729
   képpont , miközben a mezők fele (Nap, Idő) rövid, tehát ugyanaz a néhány mező úszott egy
   egyre nagyobb üres felületen. Ráadásul a lap 2560-on a képernyő 82%-át használta, a két
   hasáb magassága pedig 120 képponttal tért el, tehát alul üres folt maradt.

   A MEGOLDÁS NEM AZ, hogy a tartalom-hasábot megkötjük egy fix számra, mert akkor széles
   képernyőn NŐNE az üres sáv. Hanem az, hogy a felszabaduló helyet HASZNÁLJUK:

     700 alatt ...... EGY hasáb (telefon)
     700-tól ........ KETTŐ: tartalom + beállítás (laptop ÉS full HD)
     2000-től ....... HÁROM: azonosító + részletek + beállítás (2K és fölötte)

   A HATÁR AZÉRT 2000, ÉS NEM 1800: a full HD pontosan 1920 széles, és a koncept mérése szerint
   ott még a két hasáb az egységesebb. 1800-as határnál a full HD is három hasábra esne szét,
   ami épp a leggyakoribb monitoron rontana.

   A HARMADIK HASÁBBA a BAL oldal folytatása kerül (Leírás, Helyszín, Online link), NEM egy
   második legördülő-oszlop. A legördülők így 2K-n is egy vonalon állnak a változatlan
   beállítás-hasábban , ha kettéosztanánk őket, a szem nem tudná, melyik oszlopban keresse a
   következő sort.

   UGYANAZ A MARKUP mind a három állapotban: csak a rács változik, egyetlen mező sem tűnik el.
   ════════════════════════════════════════════════════════════════════════════════════════ */
/* A BEÁLLÍTÁS-HASÁB FIX 444 KÉPPONT, és minden további képpont a bal hasábé. Ezért a jobb
   oldal ritmusa 1440-en, 1920-on és 2560-on KÉPPONTRA azonos , ez a K2 fő ígérete: a
   legördülők ugyanoda esnek, bármekkora a képernyő. A 444 nem szemre vett szám, tokenekből
   jön: 16 bélés + 122 címke-sáv + 10 rés + 280 vezérlő (--lebego-w-kozepes) + 16 bélés.

   MIÉRT MÉDIA-LEKÉRDEZÉS, ÉS NEM KONTÉNER. A koncepció konténer-lekérdezést használ, és az
   pontosabb is lenne (a hasáb a saját helyéből dolgozna, nem a képernyőből). Élesben viszont
   NEM HASZNÁLHATÓ: a `container-type: inline-size` layout-elszigetelést kapcsol, attól pedig
   a gyökér BEFOGLALÓ BLOKKJA lesz a `position: fixed` leszármazottaknak. A dátumválasztó
   panelje (`.dtp-pop`) pont ilyen, és a helyét a `positionPop()` KÉPERNYŐ-koordinátában
   számolja , konténerrel a naptár a szerkesztő bal felső sarkához képest csúszna el.
   A küszöb ezért mért arányból jön: nyitott oldalsávnál a tartalom-terület a képernyő
   nagyjából 82%-a, tehát a koncepció 830 képpontos hasáb-küszöbe ~1010 képernyő-képpont;
   a 1060 ehhez ad tartalékot csukott oldalsávra is. */
.tee-body {
  display: grid;
  gap: 20px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 444px;
}
.tee-main,
.tee-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 6px 16px rgba(28, 25, 23, 0.08);
}
.tee-main {
  padding: 18px 20px;
}
.tee-side {
  padding: 14px 16px 16px;
  gap: 0;
}

/* [hidden] robusztus elrejtés , a saját display-értékek felülírnák az UA [hidden]-t
   (ezért látszott régen a Vége + Online link feladat módban). */
.tee-body [hidden] {
  display: none !important;
}

/* ===== Oszlop-fejek ===== */
/* A HASÁB FEJE nagybetűs és ritkított, a hasábon BELÜLI blokk-cím („Ki csinálja", „Mikor")
   viszont kisbetűs félkövér. Két ütem egy hasábon belül: ha mindkettő nagybetűs lenne, egy
   szintnek látszana a kettő, és eltűnne, hogy az egyik a hasáb neve, a másik egy csoporté. */
.tee-hasabfej {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.tee-hasabfej svg,
.tee-hasabfej i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
.tee-req,
.tee-optional,
.tee-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.75;
  white-space: nowrap;
}
.tee-req {
  padding-left: 6px;
  background: var(--tee-kell-bg);
  color: var(--tee-kell-ink);
}
.tee-optional {
  padding-left: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.tee-chip {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.tee-req svg,
.tee-optional svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

/* ===== Mezők ===== */
.tee-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.tee-field > label,
.tee-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.tee-field input[type='text'],
.tee-field input[type='url'],
.tee-field input[type='date'],
.tee-field input[type='time'],
.tee-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--font-base);
}
/* A MEZŐ NEM NŐ A VÉGTELENSÉGIG, A HASÁB IGEN (koncepció). A hasáb kitölti a helyet, a
   beviteli mező viszont 720 képpontnál megáll: fölötte a szem elveszti a sor elejét, és a
   kurzor keresésével megy el az idő. Mérve a mezők eddig 894 képpontig nyúltak. */
.tee-main .tee-field input,
.tee-main .tee-field textarea {
  max-width: 720px;
}
.tee-field textarea {
  resize: vertical;
  min-height: 96px;
}
.tee-field input:focus,
.tee-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint, #fff3ee);
}
/* Hibás mező: vastagabb piros keret ÉS alatta a magyarázat , a szín önmagában nem elég. */
.tee-field input[aria-invalid='true'] {
  border-color: var(--tee-hiba-keret);
  border-width: 1.5px;
}
#teeTitle {
  font-size: 17px;
  font-weight: 600;
}
/* A PÉLDA-MONDAT NEM ÖRÖKLI A CÍM VASTAGSÁGÁT (PO, 2026-08-25). A cím mezője szándékosan
   nagyobb és félkövér , ő a tétel neve, a lap legfontosabb sora. A helyőrző viszont ettől
   ugyanolyan hangsúlyt kapott, és beírt értéknek látszott: az üres mező pont olyan
   „késznek" tűnt, mint a kitöltött. Ugyanaz a javítás, amit a bejelentkezés kódmezője már
   elvégzett (`.login-otp::placeholder`): halkabb szín ÉS kisebb vastagság , a kettő együtt
   mondja meg, hogy ez még nem a te szöveged. */
#teeTitle::placeholder {
  font-weight: 400;
  color: var(--text-tertiary);
}

/* Dátum + idő + vége egy sorban */
.tee-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.tee-row > .tee-field {
  flex: 1 1 140px;
}

/* Mező-hiba és halk magyarázat */
.tee-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tee-hiba-ink);
}
.tee-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: -4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
}
.tee-error svg,
.tee-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* FENNTARTOTT HELY a tartalom-hasáb alján , doboz és szaggatott keret nélkül. A vonal a
   BLOKK fölött fut egyszer (lásd `.tee-soonblokk`), nem soronként: három egymás alatti
   vonal listának látszana, holott ez három ígéret. */
.tee-soon {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 2px 0;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
.tee-soon svg,
.tee-soon i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
.tee-soon b {
  color: var(--text-primary);
  font-weight: 700;
}
.tee-soon .tee-chip {
  margin-left: auto;
}

/* =========================================================================
   BEÁLLÍTÁS-LISTA
   Keret nélkül, csak hajszál-vonal a sorok között. Minden sor kiírja szóval a saját
   értékét, a lehetőségek a ház `.ajdd` legördülőjében nyílnak (nem natív select).
   ========================================================================= */
.tee-list {
  display: block;
}

/* =========================================================================
   CSOPORTOK (PO, 2026-08-13)

   Eddig hét-tíz EGYFORMA sor állt egyetlen tömbben. Nem a mennyiség volt sok, hanem a ritmus
   hiányzott: azonos súlyú sorok között semmi nem emelkedik ki, és a szem nem tud hova
   kapaszkodni. A négy fejléc a négy valódi kérdést mondja ki (ki, mikor, szóljon-e, mihez).

   A FEJLÉC HALK, ÉS NEM KAP SZÍNT. Nem ő a tartalom, hanem a tájékozódási pont: ha
   kiemelkedne, elvonná a figyelmet a beállításokról. Ugyanaz a nagybetűs, ritkított minta,
   amit az oldalsáv csoportjai használnak , tehát nem új nyelv, hanem a meglévő folytatása.
   ========================================================================= */
.tee-group + .tee-group {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
/* A HALK FELIRATOK SZÍNE `--text-secondary`, NEM `--text-tertiary`. A tertiary fehéren
   2,6:1, a szöveg-minimum viszont 4,5:1. A secondary 4,8:1, tehát megfelel , nem új szín
   kell, csak a helyes token (koncepció 7/L). */
.tee-group-cim {
  margin: 0 0 4px;
  padding: 0 2px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 700;
}
/* EGY BEÁLLÍTÁS-SOR. Rács, nem flex: így a vezérlők BAL éle egy vonalban áll, akkor is, ha
   a címkék hossza különbözik. A korábbi flex-változat a sor jobb széléhez tapasztotta az
   értéket, tehát minden sor máshol kezdődött , és a keret nélküli érték miatt az sem
   látszott, hogy ott egyáltalán választani lehet. */
.tee-listrow {
  display: grid;
  grid-template-columns: minmax(0, 122px) minmax(0, var(--lebego-w-kozepes));
  align-items: center;
  gap: 10px;
  padding: 3px 6px 3px 2px;
  border-radius: var(--radius-md);
}
.tee-listrow:hover {
  background: var(--bg-secondary);
}
.tee-listrow[hidden] {
  display: none;
}
/* ALSOR , az emlékeztető és az ismétlődés kísérői. A behúzás KI VAN EGYENSÚLYOZVA a
   címke-sávban: 14 behúzás + 108 címke = 122, tehát az alsor vezérlője PONTOSAN ugyanarra a
   vonalra esik, mint a többié. A behúzás így látszik a címkén, de nem töri meg a mezők bal
   élét. (A ház tiltása a DÍSZ-célú bal keretre vonatkozik, ez szerkezetet mutat.) */
.tee-listrow--al {
  margin-left: var(--lebego-behuzas);
  grid-template-columns: minmax(0, 108px) minmax(0, var(--lebego-w-kozepes));
  border-left: 1px solid var(--border);
  padding-left: 12px;
}
.tee-listrow-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.tee-listrow-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}
.tee-listrow-ctrl {
  min-width: 0;
  width: 100%;
}
/* CSAK OLVASHATÓ ÉRTÉK (szerkesztéskor a „Kire tartozik" sor). Keretet SZÁNDÉKOSAN nem kap:
   ha dobozban állna, választhatónak látszana. A bal éle viszont egy vonalon marad a
   legördülőkével, tehát az oszlop ritmusa nem törik meg. */
.tee-listrow-val {
  display: block;
  padding: 7px 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
}
/* A MAGYARÁZÓ SOR a teljes szélességet kapja, a címke-sáv ALATT is átfut , félbevágva
   használhatatlan lenne. */
.tee-listrow-hint {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.tee-listrow-hint[hidden] {
  display: none;
}
/* HALK ÉRTÉK ott, ahol az „üres" az alapérték: ránézésre látszik, mihez nem nyúltál. A
   halkságot a betű-vastagság adja, nem gyengébb kontraszt. */
.tee-listrow.is-empty .ajdd-label {
  font-weight: 500;
  color: var(--text-secondary);
}
.tee-ismet-koz {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tee-ismet-koz input[type='number'] {
  width: 68px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-sm);
  text-align: right;
}
.tee-ismet-koz input[type='number']:focus {
  outline: none;
  border-color: var(--primary);
}
/* MÉG NINCS KÉSZ , egy blokk, a tétel-hasáb alján. Elválasztó vonal fölötte, mert ami itt van,
   az MÁS természetű, mint a fölötte lévő mezők: nem kitöltendő, csak jelzés. */
.tee-soonblokk {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tee-soon-cim {
  margin: 0 0 4px;
  padding: 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
}
/* Zárolt sor , amihez ezen a cégen nincs jogod. Nem tűnik el, csak nem nyílik. */
.tee-listrow[data-locked='1']:hover {
  background: transparent;
}
.tee-listrow[data-locked='1'] .ajdd {
  pointer-events: none;
  opacity: 0.55;
}
.tee-lablec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 92ch;
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tee-lablec svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* A LEGÖRDÜLŐ A HÁZ SZABVÁNY DOBOZA, kerettel. Egy ideig keret nélkül állt itt (csupasz
   érték + chevron a sor jobb szélén), és pont az veszett el vele, amit egy űrlapnak
   mutatnia kell: hogy ott VÁLASZTANI lehet. Kerettel a bal él is egy vonalra kerül, tehát
   a hasáb egyetlen ritmust ad , ez a K2 fő ígérete. */
.tee-listrow .ajdd {
  position: relative;
  width: 100%;
}
.tee-listrow .ajdd-btn {
  width: 100%;
}
/* A magyarázó fél mondat itt TÖRDELHET. A ház alapból egy sorra vágja (kiszámítható
   lista-magasság), de ezen a lapon pont a magyarázat a lényeg: egy félbevágott mondat
   rosszabb, mint egy két sorral magasabb sor. */
.tee-listrow .ajdd-opt-mondat {
  white-space: normal;
  overflow: visible;
}

/* A felelős-chipek a sorban feleslegesek: az érték már ott áll („Kiss Róbert +2"), a
   kivétel pedig a nyitott listában, pipa-visszavétellel történik. */
.tee-listrow .ajdd-chips {
  display: none;
}
/* A „HOGYAN SZÓLJON" AZ EMLÉKEZTETŐ-PANEL LÁBLÉCÉBEN. Ugyanazok az opció-sorok, mint a
   listában (`.ajdd-opt`), tehát nem új formanyelv , csak a helyük más: a görgő listán kívül,
   a panel alján, ahol a görgetés nem tolja el őket. */
.tee-hangero-opts {
  display: flex;
  flex-direction: column;
  gap: var(--lebego-sorkoz);
  padding: 2px;
}

/* Az emlékeztető órája: kicsi natív óra-mező a sor jobb szélén. */
.tee-timeinput {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}
.tee-timeinput:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint, #fff3ee);
}

/* Zárolt dátum-választó (a feladat magját csak a kiosztó szerkesztheti) */
.tee-main .dtp.is-locked {
  pointer-events: none;
  opacity: 0.55;
}

/* ===== A lap EGYETLEN narancs eleme: a fő gomb ===== */
.btn-primary[data-tee-save] {
  min-height: 42px;
  padding: 0 22px;
}
.tee-save-spin {
  display: none;
  width: 16px;
  height: 16px;
}
[data-tee-save][aria-busy='true'] .tee-save-spin {
  display: inline-block;
  animation: tee-spin 0.9s linear infinite;
}
[data-tee-save][aria-busy='true'] {
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  [data-tee-save][aria-busy='true'] .tee-save-spin {
    animation: none;
  }
}

/* Ragadós alsó Mentés-sáv , CSAK mobilon látszik (hüvelykujj-zóna) */
.tee-mobilebar {
  display: none;
}

/* EGY HASÁB. A 444-es beállítás-hasáb alatt a bal oldalnak 366 képpont kell (330 képpontos
   beviteli mező plusz bélés); ez alatt a két hasáb már csak tört sorokkal férne el, és az
   rosszabb, mint egy hasáb egész sorokkal. */
@media (max-width: 1060px) {
  .tee-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A NAP ÉS AZ IDŐ EGYMÁS ALÁ (PO-kérés, 2026-09-04). A `.tee-row` alapból törhet, de a
   `flex: 1 1 140px` miatt két rövid mező még 393 képponton is EGY sorba fér , csak épp
   mindkettő szűk lesz, és a dátum („2026. 09. 04.") kitölti a keretét maradék nélkül.
   500 alatt ezért kimondjuk: egy mező egy sor. Ez a ház telefonos alapelve, ugyanaz, ami a
   beállítás-soroknál is érvényes. */
@media (max-width: 500px) {
  .tee-row > .tee-field {
    flex: 1 1 100%;
  }
}

/* TELEFONON A SOR KETTÉTÖRIK: a címke a vezérlő FÖLÉ megy. Egymás mellett a 280 képpontos
   vezérlő és a 122 képpontos címke-sáv 412-t kér, annyi ott nincs. */
@media (max-width: 560px) {
  .tee-listrow,
  .tee-listrow--al {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 6px 4px;
  }
}

@media (max-width: 640px) {
  /* A FELSŐ MENTÉS MOBILON FÖLÖSLEGES , az alsó ragadós sáv viszi.
     A `.page-shelf-right` 2026-09-04-én került ide: a Jegyzet szerkesztője a POLC-vázat
     használja, nem a régi akció-sávot, ezért a szabály nem érte el, és telefonon KÉT
     „Létrehozás" gomb látszott egyszerre, fent és lent. Ugyanaz a művelet két helyen, egy
     képernyőn , a felhasználó joggal gondolja, hogy a kettő mást csinál. */
  .tee-head .page-listhead-actions .btn-primary,
  .tee-head .page-shelf-right .btn-primary {
    display: none;
  }
  /* A RAGADÓS LÁBLÉC KÖZVETLENÜL A TAB-SÁV FÖLÉ ÜL (PO-bejelentés, 2026-09-04):
     „a létrehozás az alsó sáv fölött legyen közvetlen, mert most egy sáv van ott, ami átlátszik,
      és látszik a görgés alatta".

     AZ OK. A tartalom-terület alul akkora belső térközt tart fenn, amekkorát a tab-sáv elfoglal
     (`--tabbar-sav`). Ez a térköz a GÖRGETHETŐ területhez tartozik, tehát a tartalom átgörög
     rajta , a lábléc viszont a térköz FÖLÖTT állt meg, és a kettő között kilátszott a mozgó
     lista. A javítás nem eltolja a léchez, hanem KITERJESZTI rá: a sáv háttere lefedi a
     fenntartott térközt, a gomb pedig fölötte marad.

     A NEGATÍV ALSÓ MARGÓ ehhez kell: enélkül a magasabb doboz alul üres helyet foglalna a
     görgethető területen, és a lap alja fölöslegesen hosszabb lenne. */
  .tee-mobilebar {
    display: block;
    position: sticky;
    z-index: 5;
    /* A SÁV A TAB-SÁV FÖLÖTT ÁLL MEG. A `bottom` a fenntartott sáv magassága, tehát a lécet
       nem takarja el, és nem is marad alatta rés, amin átlátszik a görgő lista.
       A negatív alsó margó a saját belső térközét nullázza vissza, hogy a lap alja ne
       hosszabbodjon meg fölöslegesen. */
    bottom: var(--tabbar-sav);
    margin: var(--space-md) calc(-1 * var(--space-md)) 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  }
  .tee-mobilebar .btn-primary {
    width: 100%;
    justify-content: center;
  }
  /* Érintésre a sor magasabb: ott az ujj a mutató, nem az egér. */
  .tee-listrow {
    min-height: 44px;
  }
}

/* ===== Megjegyzés-szál (kiosztó ↔ felelős visszacsatolás) ===== */
.tee-comments {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.tee-comments-title {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
}
.tee-comments-hint {
  font-weight: 400;
  color: var(--text-tertiary);
}
.tee-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 320px;
  overflow-y: auto;
}
.tee-comments-empty {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  padding: var(--space-sm) 0;
}
.tee-comment {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.tee-comment.is-mine {
  background: var(--primary-tint, var(--bg-secondary));
}
.tee-comment-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 2px;
}
.tee-comment-who {
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--text-primary);
}
.tee-comment-when {
  margin-left: auto;
  font-size: var(--font-sm);
  color: var(--text-tertiary);
}
.tee-comment-tag {
  font-size: 11px;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}
.tee-comment-body {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tee-comments-add {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}
.tee-comments-input {
  flex: 1;
  min-width: 0;
  resize: vertical;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-sm);
}
.tee-comments-input:focus {
  outline: none;
  border-color: var(--primary);
}
.tee-comments-send {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* A felelős-zárolás jelzése (nem-kiosztó szerkeszti a feladatot) */
.tee-lock-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.4;
}