/* ==========================================================================
   KommentRadar - "megjelölt jegyzőkönyv"

   A rendszer dolga: megkeresni a zajban az egy mondatot, és megjelölni.
   Ezt viszi a vizuális nyelv is. Egyetlen betűcsalád (Archivo, változó
   súllyal és szélességgel), fehér lap, majdnem fekete szöveg, és egy
   kiemelőfilc-sárga, ami SOHA nem szövegszín: mindig jelölés a szöveg
   mögött. Amit a rendszer megtalált, az sárga alatt van.

   A lap mindig világos, sötét séma nincs. Az arány szándékos: nagyon
   világos felület, nagyon sötét betű, közte semmi félhang.

   Szerkezet: napló, nem kártyafolyam. Vékony vonalak választanak,
   nincs doboz, nincs árnyék, nincs lekerekítés. A sor főszereplője a
   hozzászólás szövege, minden más köré rendeződik.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-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;
}

:root {
  color-scheme: light;

  /* Felület. Fehér, nem krém és nem törtfehér: a lap világítson, a betű
     legyen majdnem fekete. A hűvös hangolás csak a szürkékben van meg. */
  --paper: oklch(1 0 0);
  --paper-2: oklch(0.966 0.003 262);
  --ink: oklch(0.185 0.012 262);
  --ink-2: oklch(0.415 0.013 262);
  --ink-3: oklch(0.525 0.012 262);
  --rule: oklch(0.885 0.005 262);
  --rule-2: oklch(0.775 0.008 262);

  /* Kiemelőfilc. Csak háttérként, soha szövegszínként. */
  --mark: oklch(0.905 0.175 101);
  --mark-2: oklch(0.855 0.165 98);
  --on-mark: oklch(0.205 0.02 90);

  /* Állapotok, kizárólag az adminban. */
  --ok: oklch(0.47 0.115 155);
  --ok-bg: oklch(0.945 0.045 155);
  --stop: oklch(0.5 0.17 25);
  --stop-bg: oklch(0.955 0.03 25);

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Fokozatos skála, 1.28-as lépésköz. A megszólalás szándékosan kilóg
     belőle felfelé: a listában ez a legnagyobb folyó szöveg. */
  --t-display: clamp(2.35rem, 1.55rem + 3.1vw, 4rem);
  --t-quote: clamp(1.62rem, 1.24rem + 1.72vw, 2.5rem);
  --t-title: clamp(1.7rem, 1.35rem + 1.5vw, 2.3rem);
  --t-say: clamp(1.42rem, 1.12rem + 1.4vw, 2.1rem);
  --t-h2: clamp(1.18rem, 1.06rem + 0.5vw, 1.4rem);
  --t-lede: clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --t-body: 1rem;
  --t-sm: 0.9rem;
  --t-xs: 0.825rem;

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  --rail: 8.5rem;

  --mk-top: 0.42em;
  --mk-h: 0.72em;

  --z-sticky: 20;
  --z-backdrop: 40;
  --z-modal: 41;
  --z-toast: 50;
  --z-skip: 60;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Alap --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--mark); color: var(--on-mark); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  z-index: var(--z-skip);
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: var(--gutter); top: 12px; }

/* --- A jelölés ---------------------------------------------------------
   Egy filccsík a szöveg mögött. Nem tölti ki a sorközt: a felső harmad
   szabadon marad, ettől olvasszik valódi jelölésnek és nem doboznak. */

.mk, mark {
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-size: 100% var(--mk-h);
  background-position: 0 var(--mk-top);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark { padding: 0 0.06em; }

/* A filccsík behúzása. Csak akkor fut, ha a lap betöltéskor tényleg látszik:
   rejtett fülön az animáció megáll az első képkockán, és a jelölés eltűnne.
   Az .anim osztályt a layout fejlécében egy soros szkript teszi ki. */
.anim :where(.mk, mark) { animation: mk-swipe 0.62s var(--ease); }
.anim .detail-say { animation: say-in 0.5s var(--ease); }

@keyframes mk-swipe {
  from { background-size: 0 var(--mk-h); }
}

/* --- Fejléc ------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem; flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: 0.5em;
  text-decoration: none; font-size: clamp(1.3rem, 0.95rem + 1.6vw, 2rem); line-height: 1;
  font-stretch: 106%; letter-spacing: -0.022em;
}
.brand-mark {
  width: 0.8em; height: 0.8em; flex: 0 0 auto;
  border: 0.11em solid var(--ink); border-radius: 50%;
  position: relative;
}
.brand-mark::after {
  content: ''; position: absolute; inset: 0.15em;
  border-radius: 50%; background: var(--mark-2);
}
.brand-text { font-weight: 400; }
.brand-text b { font-weight: 800; }

.head-nav {
  display: flex; align-items: center; gap: 1.4rem;
  font-size: var(--t-sm); font-weight: 500;
}
.head-nav a {
  color: var(--ink-2); text-decoration: none; padding: 0.35rem 0;
  transition: color 0.16s var(--ease);
}
.head-nav a:hover { color: var(--ink); }
.head-nav a.on { color: var(--ink); font-weight: 600; }
.head-nav .nav-admin { color: var(--ink); font-weight: 600; }

/* --- Lábléc ------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 2rem 0 3rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
/* Egy hasáb, teljes szélességben széthúzva: balra a leírás, jobbra a jelzés. */
.foot-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6rem clamp(2rem, 5vw, 4rem);
  justify-content: space-between;
}
.foot-inner p { margin: 0; flex: 1 1 32rem; max-width: none; }
.foot-inner .foot-meta { flex: 0 0 auto; margin: 0; color: var(--ink-3); }
.foot-meta a { color: var(--ink-2); text-underline-offset: 3px; }

/* --- Nyitó blokk ---------------------------------------------------------
   Kétosztatú fej: balra a cím és az egy mondat, jobbra a számok. A számok
   nem kártyák, hanem egy hajszálvonallal tagolt oszlopsor, az aljvonaluk a
   szöveg alapvonalához igazodik. */

.lede {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
.lede h1 {
  margin: 0;
  font-size: var(--t-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.032em;
  max-width: 16ch;
}
.lede-sub {
  margin: 1.1rem 0 0;
  font-size: var(--t-lede);
  color: var(--ink-2);
  max-width: 56ch;
}
.lede-stats {
  display: flex; flex-wrap: wrap; align-items: end;
  gap: 1rem clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
}
.lede-stats > div { min-width: 0; }
.lede-stats > div + div {
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--rule);
}
.lede-stats dd {
  margin: 0;
  font-size: var(--t-title); font-weight: 800; font-stretch: 106%;
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.lede-stats .lede-stat-d { font-size: var(--t-h2); letter-spacing: -0.02em; white-space: nowrap; }
.lede-stats dt {
  margin-top: 0.35rem;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
}
@media (max-width: 46rem) {
  .lede { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lede-stats { align-items: start; }
}

/* --- Szűrő -------------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
  padding: 1.15rem 0 1.35rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* Az admin szűrői sorokba csoportosítanak, a nyilvános oldal egy sorba tördel. */
.filter-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
  width: 100%;
}
.filter-row + .filter-row { margin-top: 0.85rem; }

/* A választók egy sorban: négy-öt legördülő elfér, a hasáb 61 rem széles.
   Alattuk az időszak és a törlés, legalul a keresés a saját gombjával. */
.filter-picks > .field { flex: 1 1 9rem; }
.filter-when > .field { flex: 0 1 10rem; }
.filt-clear { margin-left: auto; }
/* A dátum sima szövegmező, mert a natív választó a gép nyelvét követi, nem a
   lapét. Táblázatos számokkal a két mező egymás alatt is egy vonalban áll.
   A naptárat a flatpickr adja, magyar nyelvvel; az alábbi felülírások az ő
   lekerekített, árnyékos alapkinézetét hozzák a lap nyelvére. */
.d-hu { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* A naptár szélessége fix pixel, a napok rácsa is: keret helyett gyűrű kell,
   különben a szegély kettővel beljebb húzná a tartalomdobozt. */
.flatpickr-calendar {
  border-radius: 0; box-shadow: 0 0 0 1px var(--ink);
  background: var(--paper); font-size: var(--t-sm);
}
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months { padding: 0.35rem 0 0.15rem; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { color: var(--ink); }
.flatpickr-current-month { font-size: var(--t-body); font-weight: 600; padding-top: 0.5rem; }
.flatpickr-current-month input.cur-year { font-weight: 600; font-family: inherit; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ink); }
.flatpickr-weekdays, .flatpickr-weekdays .flatpickr-weekdaycontainer { background: transparent; }
span.flatpickr-weekday {
  color: var(--ink-3); font-weight: 600; font-size: var(--t-xs); background: transparent;
}
.flatpickr-day {
  border-radius: 0; border-color: transparent; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--paper-2); border-color: transparent; }
.flatpickr-day.today { border-color: var(--rule-2); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  background: var(--paper-2); border-color: var(--rule-2); color: var(--ink);
}
/* A kiemelőfilc itt is csak háttér, sosem szövegszín: ez a lap egy szabálya. */
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
  background: var(--mark); border-color: var(--mark); color: var(--on-mark); font-weight: 600;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--rule-2); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--rule); }
@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.animate.open { animation: none; }
}
/* Keskenyen a dátumpár is osztozzon egy soron, különben a 10 rem-es alapszélesség
   pár képpontnyival túlér a hasábon, és a két mező egymás alá esik. */
@media (max-width: 46rem) {
  .filter-when > .field { flex: 1 1 8rem; }
}
.filter-find { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
/* Csukott szűrőknél a sáv egyetlen tömör blokk: a kereső elválasztó vonala
   csak akkor kell, ha fölötte tényleg kinyíltak a legördülők. */
.filt-more:not([open]) + .filter-find { margin-top: 0; padding-top: 0.25rem; border-top: 0; }

/* Frissülő lista: csak a találati rész halványul el, a szűrő nem, mert épp azt
   állítja a látogató. Nincs pörgő karika, a lap nem is ugrik meg. */
#szurheto[aria-busy='true'] .ered { opacity: 0.4; transition: opacity 0.12s var(--ease); }
.ered { transition: opacity 0.18s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  #szurheto[aria-busy='true'] .ered, .ered { transition: none; }
}

/* Nincs mivel tovább szűkíteni: a mező marad a helyén, de nem ígér semmit.
   A felirat olvasható marad, csak a mező veszít a súlyából. */
.field-off select { color: var(--ink-3); border-color: var(--rule); cursor: not-allowed; }
.field-off select:hover { border-color: var(--rule); }

/* A szűrők minden kijelzőn összecsuknak: a sáv alapállapotban egyetlen
   kapcsolósor plusz a kereső, a legördülők csak kérésre nyílnak ki. Aktív
   szűrésnél nyitva indul, hogy látszódjon, mi szűkíti a listát. */
.filt-more { width: 100%; }
.filt-more > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  padding: 0.35rem 0;
}
.filt-more > summary::-webkit-details-marker { display: none; }
.filt-more > summary::after { content: '+'; margin-left: 0.4em; color: var(--ink-3); }
.filt-more[open] > summary::after { content: '\2212'; }
.filt-more > summary:hover { color: var(--ink); }
.filt-more:not([open]) > .filter-row { display: none; }
.filt-more:not([open])::details-content { content-visibility: hidden; }
.filt-more[open] > .filter-row { margin-top: 0.6rem; }
.filt-jump {
  margin: 1rem 0 0;
  font-size: var(--t-sm); color: var(--ink-2);
}
.filt-warn { color: var(--stop); }
.filt-warn .lnk { color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field > label {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-3);
  letter-spacing: 0.01em;
}
.grow { flex: 1 1 12rem; }
.field-actions { flex-direction: row; align-items: center; gap: 0.6rem; }

input[type=text], input[type=search], input[type=password], input[type=url],
input[type=date], input[type=number], select, textarea {
  font-family: inherit; font-size: var(--t-body); font-weight: 400;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule-2); border-radius: 0;
  padding: 0.55rem 0.7rem; width: 100%; min-height: 2.6rem;
  transition: border-color 0.16s var(--ease);
}
textarea { line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -1px; border-color: transparent;
}
select {
  appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.95rem center, right 0.65rem center;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

/* --- Gombok ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  padding: 0.62rem 1.15rem; min-height: 2.6rem;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease),
    border-color 0.16s var(--ease), transform 0.08s var(--ease);
}
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn:active { transform: translateY(1px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--paper); }
.btn-ok:hover { background: var(--ok); border-color: var(--ink); }

.btn-danger { background: transparent; color: var(--stop); border-color: var(--stop); }
.btn-danger:hover { background: var(--stop-bg); color: var(--stop); border-color: var(--stop); }

.btn-sm { font-size: var(--t-xs); padding: 0.42rem 0.8rem; min-height: 2.15rem; }

/* Szöveglink, a naplóban ez az alapértelmezett hivatkozás-alak. */
.lnk {
  color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--rule-2);
  transition: text-decoration-color 0.16s var(--ease);
}
.lnk:hover { text-decoration-color: var(--ink); }
.lnk-out::after {
  content: '\2197'; font-size: 0.78em; margin-left: 0.15em;
  vertical-align: 0.15em; color: var(--ink-3);
}

/* --- Nap fejléce -------------------------------------------------------- */

.daygroup { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.daygroup:first-of-type { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.day-head {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 0.35rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  letter-spacing: 0.005em;
}
.day-head::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--rule);
}
/* A vonal a dátum és a "Ma" közé kerül, ezért a jelölés a sor végére sorolódik. */
.day-rel {
  order: 1;
  font-weight: 700; color: var(--ink);
  padding: 0 0.3em;
}

/* --- Egy tétel: naplósor ------------------------------------------------ */

.rec {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 2rem;
  padding: 1.95rem 0 2.05rem;
  border-top: 1px solid var(--rule);
}
.daygroup > .rec:first-of-type { border-top: 0; }

/* A behúzás az idézet első sorának alapvonalára igazítja a sávot: a nagy
   szöveg alapvonala lejjebb van, mint a 14 px-es időé. */
.rec-rail {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding-top: 0.5rem;
  font-size: var(--t-sm);
}
.rec-time {
  font-weight: 650; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.rec-plat { color: var(--ink-2); font-weight: 500; }
.rec-topic {
  color: var(--ink-3); font-size: var(--t-xs);
  overflow-wrap: anywhere;
}
.rec-cat { text-decoration: none; }
.rec-cat:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Az első alkalom egy célpontnál: jelölés, nem címke. */
.rec-first {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: var(--t-xs); font-weight: 650; color: var(--ink);
  padding: 0 0.3em;
}

/* A megszólalás a sor főszereplője, ezért ez áll elöl és ez a legnagyobb
   szöveg a listában. A ki-kinek-mire csak utána jön, halkan: az attribúció
   nem előzi meg azt, amit mondtak. A nyitó idézőjel kilóg balra, a rács
   hézagjába, és másfélszeres méretű; a sormagasságot a line-height: 0
   tartja helyben. Nem pull quote: nincs kerete, nincs színe, nincs csíkja. */
.rec-say {
  margin: 0 0 0.75rem;
  font-size: var(--t-say);
  font-weight: 450;
  line-height: 1.28;
  letter-spacing: -0.021em;
  text-indent: -0.63em;
  max-width: 30ch;
}
.rec-say .q {
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.14em;
  font-weight: 500;
}
.rec-say-empty {
  font-size: var(--t-lede); font-weight: 400; color: var(--ink-3);
  letter-spacing: 0; line-height: 1.55;
  text-indent: 0; max-width: 48ch;
}

.rec-who {
  margin: 0;
  font-size: var(--t-body); color: var(--ink-2);
}
.rec-who b { color: var(--ink); font-weight: 650; }
/* A célpont profilképe a neve előtt. Kör: az éles sarkú rendszer második,
   tudatos kivétele a szóvédjegy pontja mellett, mert profilképként így
   ismerős. Kép híján monogram, ugyanabban a méretben, hogy a sor ne ugráljon. */
.who-ava {
  display: inline-block; vertical-align: -0.4em;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  margin-right: 0.1rem;
}
.who-ava-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: var(--ink-3);
  letter-spacing: 0.02em;
}
/* A bejegyzés a másik ember tartalma: keretes dobozban válik el a komment
   rétegétől, ugyanazzal a logikával, mint a tétel-oldal srcpost blokkja. */
.rec-postbox {
  margin-top: 0.75rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 0.75rem 0.95rem 0.85rem;
}
/* A bejegyzés szövege két sorra vágva: kontextus, nem főszereplő. */
.rec-post {
  margin: 0;
  font-size: var(--t-sm); color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Adminban vágatlanul: a moderálási döntéshez a teljes poszt-szöveg kell. */
.rec-post-teljes { display: block; white-space: pre-line; }

.rec-note {
  margin: 0.85rem 0 0;
  font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch;
}

/* Ügycímkék: sima szöveglinkek középponttal elválasztva, nem pirulák. */
.rec-tags {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem;
  margin: 0.7rem 0 0;
  font-size: var(--t-xs); color: var(--ink-3);
}
.rec-tags a {
  text-decoration: none; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.rec-tags a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.detail-tags { margin-top: 1.1rem; font-size: var(--t-sm); }

/* A célpont neve a naplósorban link, de nem néz ki linknek, amíg rá nem visznek. */
.who-lnk {
  color: var(--ink); font-weight: 650; text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  transition: border-color 0.16s var(--ease);
}
.who-lnk:hover { border-bottom-color: var(--ink); }

.rec-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin-top: 0.95rem;
  font-size: var(--t-sm);
}
.rec-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.rec-src-label { color: var(--ink-3); font-size: var(--t-xs); }
.rec-more { color: var(--ink-3); font-size: var(--t-xs); }
.rec-open { font-weight: 600; }
.rec-open::after {
  content: '\2192'; margin-left: 0.3em;
  display: inline-block;
  transition: transform 0.18s var(--ease);
}
.rec-open:hover::after { transform: translateX(3px); }

.rec-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  grid-column: 1 / -1;
}
.rec-actions form { display: contents; }
/* A display: contents erősebb a hidden alapértelmezésénél, ezért a lekapcsolt
   gombú űrlapot (pl. Jóváhagyás egy már élő tételen) külön kell eltüntetni. */
.rec-actions form[hidden] { display: none; }

/* AJAX-os döntés után a kártya összecsukva tűnik el, hogy a lista alatta ne
   ugorjon; a magasságot a szkript állítja, itt csak az átmenet és a nullázás. */
.rec-ki {
  overflow: hidden; opacity: 0;
  padding-block: 0; border-top-width: 0;
  transition: opacity 0.18s var(--ease), height 0.28s var(--ease),
    padding 0.28s var(--ease), border-top-width 0.28s var(--ease);
}

/* --- Képernyőkép -------------------------------------------------------- */

.shot { display: block; margin: 1.1rem 0 0; }
.shot img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--rule); background: var(--paper-2);
  transition: border-color 0.16s var(--ease);
}
.shot figcaption {
  margin-top: 0.5rem; font-size: var(--t-xs); color: var(--ink-3); max-width: 56ch;
}
.shot-thumb img { max-height: 20rem; width: auto; }
.shot-thumb:hover img { border-color: var(--ink-3); }

/* A naplósor főszereplője a hozzászólás képernyőképe: elöl áll és nagy. */
.rec-shot { margin: 0 0 0.9rem; }
.rec-shot img { max-height: 26rem; width: auto; }
.rec-shot:hover img { border-color: var(--ink-3); }
/* Adminban a kép mellett a szó szerinti szöveg is kell az ellenőrzéshez. */
.rec-say-mellett {
  font-size: var(--t-lede); font-weight: 400;
  letter-spacing: 0; line-height: 1.5;
  max-width: 56ch; margin-bottom: 0.9rem;
}

/* A bejegyzés képe kérésre nyílik ki a poszt-dobozban. A summary rendes ghost
   gombnak öltözik, mert a csupasz szövegváltozatot senki nem vette észre;
   a +/- jel marad, az mondja meg, hogy nyit vagy csuk. */
.rec-postpic { margin: 0; }
.rec-post + .rec-postpic { margin-top: 0.65rem; }
.rec-postpic > summary {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; list-style: none; user-select: none;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  padding: 0.42rem 0.8rem; min-height: 2.15rem;
  transition: border-color 0.16s var(--ease);
}
.rec-postpic > summary::-webkit-details-marker { display: none; }
.rec-postpic > summary::after { content: '+'; margin-left: 0.45em; color: var(--ink-3); }
.rec-postpic[open] > summary::after { content: '\2212'; }
.rec-postpic > summary:hover { border-color: var(--ink); }
.rec-postpic > summary:active { transform: translateY(1px); }
.rec-postpic .shot { margin-top: 0.65rem; }
.rec-postpic .shot img { max-height: 24rem; width: auto; background: var(--paper); }

/* --- A bejegyzés, amire a hozzászólás érkezett -------------------------- */

/* Külön dobozban áll, hogy egy pillantásra elváljon a hozzászólástól: a lap
   többi szövege a figyelt személyé, ez viszont azé, akinek a bejegyzése alá
   írt. Oldalsó színsáv helyett teljes keret, lásd a design-szabályokat. */
.srcpost {
  margin: 2rem 0 0;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.srcpost-h { margin-top: 0; }
.srcpost-text {
  margin: 0;
  font-size: var(--t-sm); color: var(--ink-2);
  max-width: 65ch; white-space: pre-line;
}
.srcpost-shot { margin-top: 1rem; }
.srcpost-shot img { max-height: 32rem; width: auto; background: var(--paper); }

/* --- A hozzászólás, amire válaszolt -------------------------------------- */

/* Ugyanaz a nyelv, mint a srcpost: keretes doboz, mert a szöveg másé. A
   bejegyzés doboza FÖLÖTT áll, mert a válasz közvetlen előzménye. */
.replyto {
  margin: 1.6rem 0 0;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.replyto-h { margin-top: 0; }
.replyto-who { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.replyto-text {
  margin: 0.5rem 0 0;
  font-size: var(--t-sm); color: var(--ink-2);
  max-width: 65ch; white-space: pre-line;
}
.who-reply b { font-weight: 600; }

/* --- Lapozó ------------------------------------------------------------- */

.pager {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.pager .cur {
  color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center;
}
.pager .sp { flex: 1 1 0; min-width: 0; }
.pager .sp:last-child { text-align: right; }
.pager a { font-weight: 600; }

/* --- Üres állapot ------------------------------------------------------- */

.empty { padding: clamp(3rem, 8vw, 5.5rem) 0; max-width: 46ch; }
.empty h2 {
  margin: 0 0 0.6rem;
  font-size: var(--t-title); font-weight: 800; font-stretch: 108%;
  letter-spacing: -0.028em; line-height: 1.05;
}
.empty p { margin: 0; color: var(--ink-2); }

/* --- Gyűjtemény-oldalak és böngésző ------------------------------------
   Egy célpont, téma, ügy, platform vagy hónap összefoglalója. Ugyanaz a
   napló-nyelv, csak elé kerül egy fejléc a mérőszámokkal. */

.coll, .browse { padding-block: 0 clamp(2rem, 4vw, 3rem); }

.coll-crumb {
  margin: clamp(1.25rem, 2.5vw, 1.9rem) 0 0;
  font-size: var(--t-sm); color: var(--ink-3);
}
.coll-crumb a { color: var(--ink-2); text-decoration: none; }
.coll-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.coll-crumb span { margin: 0 0.5rem; color: var(--rule-2); }

.coll-head { padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2rem); }
.browse .coll-head { padding-top: clamp(2.5rem, 5vw, 4rem); }
.coll-kind {
  margin: 0 0 0.5rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-3);
}
.coll-head h1 {
  margin: 0;
  font-size: var(--t-display); font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.038em; line-height: 0.98;
  max-width: 16ch;
}
.coll-lede {
  margin: 0.9rem 0 0;
  font-size: var(--t-lede); color: var(--ink-2); max-width: 54ch;
}

/* A három mérőszám: a darabszám a hangsúlyos, a két dátum halkabb. */
.coll-stats {
  display: flex; flex-wrap: wrap; gap: 0.9rem clamp(1.75rem, 4vw, 3rem);
  margin: clamp(1.5rem, 3vw, 2.1rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}
.coll-stats dt {
  font-size: var(--t-xs); color: var(--ink-3); font-weight: 600;
}
.coll-stats dd {
  margin: 0.1rem 0 0;
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em;
}
.coll-stats .num { font-variant-numeric: tabular-nums; }

/* Megoszlások. Szövegsorok, nem kártyák: a szám a név mögé sorolódik. */
.coll-facets {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.6rem);
  border-top: 1px solid var(--rule);
}
.fx-h {
  margin: 0 0 0.55rem;
  font-size: var(--t-xs); font-weight: 650; color: var(--ink-3);
}
.fx {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-size: var(--t-sm);
}
.fx-wide { gap: 0.5rem 1.25rem; }
.fx a {
  text-decoration: none; color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.fx a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.fx a span {
  margin-left: 0.35em;
  color: var(--ink-3); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* Napszak-hisztogram. Csak akkor jelenik meg, ha van elég ismert időpont. */
.rhythm { margin: clamp(1.5rem, 3vw, 2.1rem) 0 0; padding: 0; }
.rhythm figcaption {
  font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 0.55rem;
}
.rhythm figcaption b { color: var(--ink-2); font-weight: 650; }
.rhythm-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: 3.25rem;
  border-bottom: 1px solid var(--rule-2);
}
.rhythm-bars .rh {
  flex: 1 1 0; min-width: 0;
  height: max(2px, calc(var(--h) * 100%));
  background: var(--mark);
}
.rhythm-bars .rh-0 { background: var(--rule); }
.rhythm-axis {
  display: flex; justify-content: space-between;
  margin-top: 0.3rem;
  font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Kompakt lista: a "mikor mit" végigfutásához, az idővonal fölött. */
.compact { margin-top: clamp(1.5rem, 3vw, 2.1rem); }
.compact > summary {
  cursor: pointer; list-style: none;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
}
.compact > summary::-webkit-details-marker { display: none; }
.compact > summary::after { content: '+'; margin-left: 0.45em; color: var(--ink-3); }
.compact[open] > summary::after { content: '\2212'; }
.compact > summary:hover { color: var(--ink); }
.compact .tbl-scroll { margin-top: 0.4rem; }
.compact .tbl td { font-size: var(--t-sm); }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); }

/* Böngésző-index */
.br-sec { margin-top: clamp(2rem, 4vw, 3rem); }
.br-h {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 0 0 0.9rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-2);
  font-size: var(--t-h2); font-weight: 750; letter-spacing: -0.022em;
}
.br-n { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }

.br-list { list-style: none; margin: 0; padding: 0; }
.br-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem 6.5rem;
  gap: 0.75rem; align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: var(--t-sm);
}
.br-list li:last-child a { border-bottom: 0; }
.br-list a:hover .br-name { text-decoration: underline; text-underline-offset: 3px; }
.br-name { font-weight: 600; overflow-wrap: anywhere; }
.br-db {
  text-align: right; color: var(--ink-2);
  font-variant-numeric: tabular-nums; font-weight: 650;
}
.br-last { text-align: right; color: var(--ink-3); font-size: var(--t-xs); }

.br-rare { margin-top: 1.1rem; }
.br-rare > summary { border-bottom: 0; }
.br-rare .fx { margin-top: 0.75rem; }

.br-year { margin-bottom: 1.1rem; }
.br-year-h {
  display: inline-block; margin-bottom: 0.4rem;
  font-weight: 700; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.br-year-h:hover { text-decoration: underline; text-underline-offset: 3px; }

.coll-foot {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  margin-top: 2.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}

@media (max-width: 34rem) {
  .br-list a { grid-template-columns: minmax(0, 1fr) 2.5rem; }
  .br-last { display: none; }
}

/* --- Tétel-oldal -------------------------------------------------------- */

/* Ezek az osztályok a .wrap-pel egy elemen ülnek, ezért csak a függőleges
   behúzáshoz nyúlhatnak: a padding shorthand kiütné a .wrap oldalmargóját. */
.detail { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem); }
.back {
  display: inline-block; margin-bottom: 1.6rem;
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
}
.back::before { content: '\2190'; margin-right: 0.4em; }
.back:hover { color: var(--ink); }

.detail-back { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; }
.detail-back:hover { color: var(--ink); }

.detail-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.85rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.detail-meta b { color: var(--ink); font-weight: 650; }

/* A tétel-oldalon ugyanaz a rend: elöl a megszólalás, utána az attribúció. */
.detail-say {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  font-size: var(--t-quote);
  font-weight: 450;
  line-height: 1.24;
  letter-spacing: -0.024em;
  text-indent: -0.63em;
  max-width: 22ch;
}
.detail-say .q {
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -0.14em;
  font-weight: 500;
}
.detail-say.rec-say-empty {
  font-size: var(--t-lede); font-weight: 400; color: var(--ink-3);
  letter-spacing: 0; line-height: 1.55;
  text-indent: 0; max-width: 46ch;
}

.detail-who {
  margin: 1.15rem 0 0;
  font-size: var(--t-body); color: var(--ink-2);
}
.detail-who b { color: var(--ink); font-weight: 650; }
@keyframes say-in {
  from { opacity: 0; transform: translateY(0.4rem); }
}

.detail-note {
  margin-top: 1.4rem;
  font-size: var(--t-lede);
}

.detail dl {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0 1.5rem; margin: 2rem 0 0; font-size: var(--t-sm);
}
.detail dt {
  color: var(--ink-3); font-weight: 500;
  padding: 0.6rem 0; border-top: 1px solid var(--rule);
}
.detail dd {
  margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink);
  padding: 0.6rem 0; border-top: 1px solid var(--rule);
}

.sec-h {
  margin: 2.5rem 0 0;
  font-size: var(--t-h2); font-weight: 700; font-stretch: 105%;
  letter-spacing: -0.02em;
}
.source-list { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.source-list li {
  padding: 0.75rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm);
}
.source-list .src-meta {
  display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 0.15rem;
}

/* --- Szöveges oldalak --------------------------------------------------- */

.prose { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); max-width: 42rem; }
.prose h1 {
  margin: 0 0 1.4rem;
  font-size: var(--t-title); font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.03em; line-height: 1.02;
}
.prose h2 {
  margin: 2.6rem 0 0.6rem;
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.018em;
}
.prose p, .prose li { color: var(--ink-2); max-width: 66ch; }
.prose p { margin: 0.75rem 0; }
.prose li { margin: 0.4rem 0; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ol, .prose ul { padding-left: 1.25rem; }
.prose .lede-sub { color: var(--ink); }
.prose .btn { margin-top: 1.5rem; }

/* --- Visszajelzés ------------------------------------------------------- */

.flash {
  margin: 1rem 0 0; padding: 0.7rem 0.95rem;
  font-size: var(--t-sm); font-weight: 500;
  border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--ink);
}
.flash-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.flash-error { border-color: var(--stop); color: var(--stop); background: var(--stop-bg); }

/* Az AJAX-os admin-műveletek visszajelzése: rövid, magától eltűnő csík alul,
   mert a flash-sáv a lap tetején a görgetett listából nem látszana. */
.toast {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: var(--z-toast);
  transform: translate(-50%, 0.5rem); opacity: 0; pointer-events: none;
  padding: 0.6rem 1.05rem;
  font-size: var(--t-sm); font-weight: 500;
  background: var(--ink); color: var(--paper);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.toast.lathato { opacity: 1; transform: translate(-50%, 0); }

/* --- Címkék (admin) ----------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--rule-2); color: var(--ink-2);
}
.tag-pending { border-color: transparent; background: var(--mark); color: var(--on-mark); }
.tag-approved { border-color: var(--ok); color: var(--ok); }
.tag-rejected { border-color: var(--rule-2); color: var(--ink-3); }

/* --- Admin -------------------------------------------------------------- */

.admin { padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.admin-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.admin-head h1 {
  margin: 0;
  font-size: var(--t-title); font-weight: 800; font-stretch: 108%;
  letter-spacing: -0.03em; line-height: 1.05;
}
.admin-head .hint { margin: 0; }

.admin-tabs {
  display: flex; gap: 0.15rem; flex-wrap: wrap;
  margin: 1.25rem 0 1.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.admin-tabs a {
  text-decoration: none; color: var(--ink-2); font-weight: 500;
  padding: 0.5rem 0.75rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a.on { color: var(--ink); font-weight: 650; border-bottom-color: var(--ink); }

/* A tétel gépi előélete: honnan jött, valódi-e az órája, járt-e már ott a runner. */
.form-state {
  margin: -0.75rem 0 1.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5;
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 0.6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.hint { font-size: var(--t-xs); color: var(--ink-3); margin: 0.3rem 0 0; }

.tbl-scroll { overflow-x: auto; }
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm);
}
.tbl th, .tbl td {
  padding: 0.65rem 0.75rem; text-align: left;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.tbl th {
  font-size: var(--t-xs); font-weight: 650; color: var(--ink-3);
  border-bottom-color: var(--rule-2); white-space: nowrap;
}
.tbl td:first-child, .tbl th:first-child { padding-left: 0; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-variant-numeric: tabular-nums; }
.mono {
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
  font-size: 0.82rem;
}

/* --- Runner-futások (admin Futások fül) --------------------------------- */

.rr-fej { margin: 0 0 14px; }
.rr-elo { margin: 0 0 8px; font-size: var(--t-body); }
.rr-riaszt {
  margin: 0 0 8px; padding: 0.55rem 0.75rem;
  background: var(--stop-bg); color: var(--stop);
  font-size: var(--t-sm); font-weight: 600;
}
.rr-b {
  display: inline-block; padding: 0.1rem 0.5rem;
  font-size: var(--t-xs); font-weight: 650; white-space: nowrap;
}
.rr-kesz { background: var(--ok-bg); color: var(--ok); }
.rr-fut { background: var(--mark); color: var(--on-mark); }
.rr-baj { background: var(--stop-bg); color: var(--stop); }
.rr-reszlet { margin-top: 0.3rem; font-size: var(--t-xs); }
.rr-reszlet summary { cursor: pointer; color: var(--ink-3); }
.rr-altabla { margin-top: 0.35rem; font-size: var(--t-xs); }
.rr-altabla td { padding: 0.25rem 0.6rem 0.25rem 0; border-bottom: 0; }
.rr-cim { font-size: 1rem; margin: 0 0 8px; }
.rr-svg { max-width: 100%; height: auto; display: block; }
.rr-svg text { font-family: var(--sans); }
.rr-oszlop { fill: var(--ink-2); }
.rr-tengely { stroke: var(--rule-2); }
.rr-ertek { font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.rr-nap { font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.rr-futasjel { font-size: 12px; fill: var(--ok); text-anchor: middle; font-weight: 700; }
.rr-futasjel.rr-gond { fill: var(--stop); }
.rr-inditas { stroke: var(--stop); stroke-dasharray: 3 3; }
.rr-inditas-cimke { font-size: 12px; fill: var(--stop); }

/* --- Modál -------------------------------------------------------------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: oklch(0.18 0.01 262 / 0.55);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  animation: fade-in 0.18s var(--ease);
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative; z-index: var(--z-modal);
  background: var(--paper); border: 1px solid var(--ink);
  padding: 1.5rem; max-width: 26rem; width: 100%;
  animation: modal-in 0.24s var(--ease);
}
.modal p { margin: 0 0 1.35rem; font-size: var(--t-body); }
.modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(0.6rem); } }

.login-box { max-width: 22rem; margin: clamp(3rem, 10vh, 6rem) auto; }
.login-box h1 {
  margin: 0 0 0.4rem;
  font-size: var(--t-h2); font-weight: 800; font-stretch: 108%;
  letter-spacing: -0.025em;
}
.login-box .field { margin-bottom: 0.9rem; }

/* --- Keskeny kijelző ---------------------------------------------------- */

@media (max-width: 46rem) {
  .rec {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 1.35rem 0 1.5rem;
  }
  .rec-rail {
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: 0.15rem 0.7rem; margin-bottom: 0.55rem; padding-top: 0;
    font-size: var(--t-xs);
  }
  .rec-topic { width: 100%; }
  .lede h1 { max-width: none; }
  .detail dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .detail dt { border-top: 1px solid var(--rule); padding-bottom: 0; }
  .detail dd { border-top: 0; padding-top: 0.15rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .pager { flex-wrap: wrap; }
  .pager .sp { min-width: 0; }
}

@media (max-width: 30rem) {
  .head-nav { gap: 1rem; font-size: var(--t-xs); }
  /* Keskenyen nincs hova kilógnia a nyitó idézőjelnek, ezért beáll a sorba. */
  .rec-say, .detail-say { text-indent: 0; }
  /* Egy hosszú magyar összetett szó (kommentszekció, vagyonnyilatkozat) 112%-os
     szélességgel kilóg a 375 px-es kijelzőről. A változó betű szélesség-tengelye
     ezt orvosolja, a méret és a súly maradhat. A címméret 380 px alatt már a
     clamp alsó határán ül, tehát a legkeskenyebb kijelzőn még egy fokozat kell. */
  .lede h1, .coll-head h1 { font-stretch: 92%; letter-spacing: -0.026em; }
}

@media (max-width: 22rem) {
  .lede h1, .coll-head h1 { font-stretch: 78%; }
}

/* --- Feed ---------------------------------------------------------------- */
/* Egy oszlop, mint egy fotós folyam: a bejegyzés képe a főszereplő, a jobb
   alsó sarkára a hozzászólás képe matricaként kerül, kicsit elforgatva, a
   poszt széle alá és mellé kilógva. A kilógás az oldal szélén levágódik
   (overflow-x: clip a lapon), a törzs sosem görgethető vízszintesen. */
.feed-page { overflow-x: clip; }
.feed-head {
  max-width: 36rem; margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.feed-head h1 {
  margin: 0;
  font-size: var(--t-display); font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.038em; line-height: 0.98;
  text-wrap: balance;
}
.feed { max-width: 36rem; margin: 0 auto; }
.fd { display: grid; gap: 0.9rem; padding: clamp(1.75rem, 4vw, 2.5rem) 0 0; }
/* Elválasztó a bejegyzések közt: a matrica alá kell a hely, ezért a vonal a
   következő kártya tetején áll, nem a kép alján. */
.fd + .fd { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule-2); }
.fd-reply { font-weight: 400; color: var(--ink-3); }
.fd-head { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.fd-ava {
  flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--paper-2);
}
.fd-ava-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--t-sm); color: var(--ink-2);
}
.fd-meta { display: grid; gap: 0.1rem; min-width: 0; line-height: 1.25; }
.fd-name { font-weight: 700; overflow-wrap: anywhere; }
.fd-name a { text-decoration: none; }
.fd-name a:hover { text-decoration: underline; }
.fd-when { font-size: var(--t-sm); color: var(--ink-3); }

.fd-pic {
  position: relative; display: block;
  margin: 0.2rem 0 0;
  text-decoration: none;
  cursor: pointer;
  /* Az egér helye a kártyán (-1..1), az app.js állítja; enélkül 0, tehát a
     hover-emelés egyenesen felfelé megy. */
  --mx: 0; --my: 0;
}
.fd-post {
  display: block; width: 100%; height: auto;
  max-height: 44rem; object-fit: cover; object-position: top;
  border: 1px solid var(--rule); background: var(--paper-2);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* A matrica a kép VALÓDI méretén áll (2x-es kép: srcset 2x, tehát feles), és
   csak plafonja van: a rövid, pár karakteres komment nem nagyítódik óriásira,
   a hosszú a kártya 88%-áig nő. */
.fd-sticker {
  position: absolute; right: -2.5rem; bottom: -2.4rem;
  width: auto; max-width: 88%; max-height: 86%;
  object-fit: cover; object-position: top;
  border: 5px solid #fff; background: #fff;
  box-shadow: 0 1px 2px oklch(0.2 0.01 262 / 0.2), 0 18px 38px -10px oklch(0.2 0.01 262 / 0.45);
  transform: rotate(-1.6deg);
  transform-origin: 85% 90%;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  /* A görgetős parallaxot az app.js a KÜLÖN `translate` tulajdonságon állítja
     képkockánként: így nem ütközik a transform dőlésével és a hover-emelés
     átmenetével (a transition csak a transformra szól, a translate azonnali). */
  translate: 0 0;
}
.fd-pic:hover .fd-sticker, .fd-pic:focus-visible .fd-sticker { transform: rotate(-1deg) translateY(-3px); }
/* Asztali hover: a két réteg különböző mélységben emelkedik, parallax-módra.
   A bejegyzés kicsit, az egérrel ELLENTÉTES irányba; a matrica többet, az
   egér IRÁNYÁBA, és picit nő. Az egér helyét (--mx/--my) az app.js frissíti,
   a 0,45 s-os átmenet miatt a kép lágyan követi, nem ugrál. Csak egeres
   eszközön: érintőn a hover ragadna. */
@media (hover: hover) and (pointer: fine) {
  .fd-pic:hover .fd-post {
    transform: translate(calc(var(--mx) * -3px), calc(-4px + var(--my) * -3px));
    box-shadow: 0 16px 32px -18px oklch(0.2 0.01 262 / 0.45);
  }
  .fd-pic:hover .fd-sticker, .fd-pic:focus-visible .fd-sticker {
    transform: rotate(-0.8deg) translate(calc(var(--mx) * 9px), calc(-12px + var(--my) * 9px)) scale(1.025);
    box-shadow: 0 2px 4px oklch(0.2 0.01 262 / 0.2), 0 30px 50px -14px oklch(0.2 0.01 262 / 0.5);
  }
}

.fd-say {
  margin: 0; font-size: var(--t-lede); line-height: 1.45;
  font-weight: 450; letter-spacing: -0.012em; overflow-wrap: anywhere;
}
.fd-say .q { color: var(--mark); font-weight: 700; }

/* --- Tétel-modál -------------------------------------------------------- */
/* Natív <dialog>: fókuszcsapda és Esc ingyen. Szkript nélkül (közvetlen link)
   nyitott attribútummal a folyam fölött, sima blokként áll. */
.tetel-modal {
  width: min(44rem, 100% - 2 * var(--gutter)); max-width: none;
  padding: 0; margin: auto;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px -20px oklch(0.2 0.01 262 / 0.5);
}
.tetel-modal:not([open]) { display: none; }
/* Nyitás: fade + nagyítás. Zárás: a szkript a `.zar` osztályt teszi rá, megvárja
   az animáció végét, és csak utána hívja a close()-t (a natív close azonnali). */
.tetel-modal[open] { animation: modal-zoom-in 0.3s var(--ease); }
.tetel-modal::backdrop { background: oklch(0.18 0.01 262 / 0.55); animation: fade-in 0.3s var(--ease); }
.tetel-modal.zar[open] { animation: modal-zoom-out 0.2s var(--ease) forwards; pointer-events: none; }
.tetel-modal.zar::backdrop { animation: fade-out 0.2s var(--ease) forwards; }
@keyframes modal-zoom-in { from { opacity: 0; transform: scale(0.92) translateY(6px); } }
@keyframes modal-zoom-out { to { opacity: 0; transform: scale(0.94); } }
@keyframes fade-out { to { opacity: 0; } }
.tetel-modal:modal { max-height: calc(100dvh - 2 * var(--gutter)); overflow: auto; overscroll-behavior: contain; }
.tetel-modal:not(:modal)[open] { margin: 0 auto clamp(2rem, 4vw, 3rem); }
.modal-nyitva { overflow: hidden; }
.tetel { padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem); }
.tetel-head {
  display: flex; align-items: center; gap: 0.7rem; min-width: 0;
  position: sticky; top: 0; z-index: 1;
  margin: calc(-1 * clamp(1.1rem, 3vw, 1.75rem)) calc(-1 * clamp(1.1rem, 3vw, 1.75rem)) 0;
  padding: 0.9rem clamp(1.1rem, 3vw, 1.75rem);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.tetel-head .fd-meta { flex: 1 1 auto; }
.tetel-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-right: -0.5rem;
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 1.35rem; border-radius: 50%;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.tetel-close:hover, .tetel-close:focus-visible { background: var(--paper-2); color: var(--ink); }
.tetel-who { margin: 1.25rem 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.tetel-who b { color: var(--ink); }
.tetel-say {
  margin: 0.9rem 0 0;
  font-size: var(--t-quote); font-weight: 450; line-height: 1.24; letter-spacing: -0.024em;
  overflow-wrap: anywhere;
}
.tetel-say .q { color: var(--mark); font-weight: 700; }
.tetel-shot { margin-top: 1.5rem; }
.tetel-shot img { width: auto; max-width: 100%; height: auto; }
.tetel-note { margin-top: 1rem; }
.tetel-links { margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tetel-links .btn svg { flex: none; }
.tetel-rogz { margin: 1rem 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.tetel .sec-h { margin-top: 1.75rem; }
.tetel-betolt { padding: 2.5rem; min-height: 14rem; display: grid; place-items: center; text-align: center; color: var(--ink-3); }
/* Lassú hálózaton a betöltő dobozba érkező tétel átúszik, nem ugrik be. */
.tetel-erkezett { animation: fade-in 0.22s var(--ease); }

.feed-more { text-align: center; margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
.feed-end, .feed-empty {
  text-align: center; color: var(--ink-3); font-size: var(--t-sm);
  margin: 2.5rem auto 0; max-width: 36rem;
}
.feed-empty { color: var(--ink-2); font-size: var(--t-body); }

@media (max-width: 46rem) {
  .fd-sticker { right: -1rem; bottom: -2rem; max-width: 96%; }
  .fd-pic { margin-bottom: 2.4rem; }
}
/* Mobilon a matrica a teljes oszlopot kitölti, sőt a poszt széle fölé is
   nyúlik: a komment szövegének olvashatónak kell maradnia, a poszt itt már
   csak a háttér. */
@media (max-width: 34rem) {
  .fd-sticker {
    right: calc(-1 * var(--gutter)); max-width: calc(100% + 2 * var(--gutter));
    max-height: 92%; border-width: 4px; transform: rotate(-1deg);
  }
  .fd-pic:hover .fd-sticker, .fd-pic:focus-visible .fd-sticker { transform: rotate(-0.4deg) translateY(-3px); }
}

/* --- Csökkentett mozgás ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .anim :where(.mk, mark), .anim .detail-say { animation: none; }
  .rec-open:hover::after { transform: none; }
  .fd-pic:hover .fd-sticker, .fd-pic:focus-visible .fd-sticker { transform: none; }
  .fd-pic:hover .fd-post { transform: none; }
  .fd-sticker { transform: none; translate: none; }
  /* A modál csökkentett mozgásnál is átúszik (opacity), csak a zoom marad el.
     A 0,01 ms-os általános szabály itt nem érvényes, ezért a hossz külön áll. */
  .tetel-modal[open] { animation: fade-in 0.2s var(--ease) !important; }
  .tetel-modal::backdrop { animation: fade-in 0.2s var(--ease) !important; }
  .tetel-modal.zar[open] { animation: fade-out 0.16s var(--ease) forwards !important; }
  .tetel-modal.zar::backdrop { animation: fade-out 0.16s var(--ease) forwards !important; }
}

/* --- Statisztika oldal --------------------------------------------------- */

.stat { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2.5rem, 5vw, 4rem); max-width: min(var(--wrap), 50rem); }
.stat .sec-h { margin-top: 2.6rem; }
.stat p { margin: 0.8rem 0 0; max-width: 64ch; line-height: 1.55; }
.stat p b { font-weight: 700; }
.stat-abl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.4rem; }
.stat-abl a {
  display: inline-flex; align-items: center; min-height: 2.15rem; padding: 0.35rem 0.9rem;
  border: 1px solid var(--rule-2); color: var(--ink-2); text-decoration: none;
  font-size: var(--t-sm); font-weight: 550;
}
.stat-abl a:hover { border-color: var(--ink); color: var(--ink); }
.stat-abl a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.stat-ures, .stat-keves { color: var(--ink-2); }
.stat-szamok {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem;
  margin: 1.8rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--ink);
}
.stat-szamok div { display: flex; flex-direction: column-reverse; gap: 0.15rem; }
.stat-szamok dt { font-size: var(--t-sm); color: var(--ink-2); }
.stat-szamok dd {
  margin: 0; font-size: var(--t-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-szamok dd.stat-datum { font-size: var(--t-lede); font-weight: 650; letter-spacing: 0; line-height: 1.2; }
.stat-rhythm { margin-top: 1.1rem; }
.stat-rhythm .rhythm-bars { height: 5rem; }
.rhythm-7 { gap: 6px; }
.rhythm-axis-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; justify-content: normal; }
.stat-szakok {
  list-style: none; margin: 0.9rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem 1rem;
  font-size: var(--t-sm); color: var(--ink-2);
}
.stat-szakok b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-szakok span { color: var(--ink-3); }
/* Naptár-hőtérkép: hét-oszlopok, hétfő felül. */
.hm-scroll { overflow-x: auto; margin-top: 1rem; padding-bottom: 0.25rem; }
.hm { display: flex; gap: 3px; width: max-content; --cella: 0.95rem; }
.hm-napok, .hm-oszlop { display: flex; flex-direction: column; gap: 3px; }
.hm-napok span, .hm-nap { display: block; width: var(--cella); height: var(--cella); }
.hm-napok span { width: auto; font-size: var(--t-xs); color: var(--ink-3); line-height: var(--cella); padding-right: 0.3rem; }
.hm-ho { display: block; height: 1.1rem; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.1rem; white-space: nowrap; }
.hm-napok::before { content: ''; display: block; height: 1.1rem; }
.hm-nap { background: var(--paper-2); border: 1px solid var(--rule); box-sizing: border-box; }
.hm-nap.hm-x { background: transparent; border-color: transparent; }
.hm-nap.hm-1 { background: color-mix(in oklch, var(--mark) 35%, var(--paper)); border-color: transparent; }
.hm-nap.hm-2 { background: color-mix(in oklch, var(--mark) 70%, var(--paper)); border-color: transparent; }
.hm-nap.hm-3 { background: var(--mark); border-color: transparent; }
.hm-nap.hm-4 { background: oklch(0.72 0.16 92); border-color: transparent; }
/* Vízszintes sávok: név, rúd, darab. */
.sav { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 40rem; }
.sav li {
  display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 2.5rem; align-items: center; gap: 0.75rem;
  padding: 0.4rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm);
}
.sav li:first-child { border-top: 0; }
.sav-nev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sav-rud { display: block; height: 0.9rem; background: var(--mark); width: max(3px, calc(var(--w) * 100%)); }
.sav-db { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.stat-cimkek { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.stat-cimkek li {
  padding: 0.3rem 0.7rem; border: 1px solid var(--rule-2); font-size: var(--t-sm); color: var(--ink);
}
.stat-cimkek li b { color: var(--ink-3); font-weight: 600; margin-left: 0.2rem; }
.stat-idezet { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 40rem) {
  .sav li { grid-template-columns: minmax(6rem, 9rem) 1fr 2.2rem; }
}

/* --- Info oldal --------------------------------------------------------- */

.info { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2.5rem, 5vw, 4rem); max-width: min(var(--wrap), 46rem); }
.info-h1 {
  margin: 0; font-size: var(--t-title); font-weight: 800; font-stretch: 105%;
  letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance;
}
.info .sec-h { margin-top: 2.2rem; }
.info p { margin: 0.8rem 0 0; max-width: 62ch; line-height: 1.55; }
.info-lista { margin: 0.8rem 0 0; padding-left: 1.4rem; max-width: 62ch; }
.info-lista li { margin: 0.5rem 0; line-height: 1.55; }
.info-lista li::marker { font-weight: 700; color: var(--ink-2); }
.info-meta { color: var(--ink-2); font-size: var(--t-sm); }
.info-vissza { margin-top: 2.2rem; }