/* Önökért paletta (admin/src/theme/tokens.ts másolata — külön app, nem importálhat).
   Mobil-először: a felhasználó a telefonján, egy e-mail linkjéről érkezik. */
:root {
  --primary: #A05A48;
  --primary-dark: #8C4D3D;
  --sage: #6B8E6B;
  --gold: #B08D55;
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --border: #E7E5E4;
  --ink: #292524;
  --ink-muted: #57534E;
  --ink-light: #78716C;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--ink);
  /* 17px alap: az olvasó gyakran idős, és telefonon, kinti fényben nézi. */
  font: 17px/1.55 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

main { max-width: 520px; margin: 0 auto; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 14px;
}

h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 19px; margin: 0 0 6px; }
p { margin: 0 0 10px; }

.muted { color: var(--ink-muted); }
/* 16px a padló MINDENHOL ezen az oldalon. Az apróbetű itt nem stílus:
   az olvasó gyakran 60+, telefonon, néha kinti fényben nézi. Ha valami
   nem elég fontos 16px-hez, akkor nem elég fontos ahhoz, hogy ott legyen. */
.small { font-size: 16px; }

/* Gomb: 52 px magas, mert hüvelykujjal, menet közben nyomják meg. */
.btn {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn:active { background: var(--primary-dark); }
/* Látható fókusz. Nem elméleti a11y-tétel: aki nagyítóval, billentyűzettel
   vagy switch-eszközzel használja a telefont, enélkül nem tudja, melyik
   gombon áll — és ez pont az a felhasználói kör, akinek ez az oldal készült. */
.btn:focus-visible,
.consent:focus-within {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.btn.secondary { background: transparent; color: var(--primary); border: 1px solid var(--border); }
/* A letiltott állapot MINDEN gombfajtára — a `.secondary` szabály korábban
   felülírta a `:disabled` hátteret, így egy letiltott gomb kattinthatónak
   látszott. A felhasználó nyomkodta volna, és azt hiszi, elromlott. */
.btn:disabled,
.btn.secondary:disabled {
  background: #F5F5F4;
  color: #A8A29E;
  border-color: var(--border);
  cursor: default;
}

.item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.item:last-child { border-bottom: none; }
.item .body { flex: 1; min-width: 0; }
.item .name { font-weight: 600; }
.item .hint { color: var(--ink-muted); font-size: 16px; }

/* Alapértelmezett kék link a terrakotta palettában idegen test — és a
   láblécben pont az a link, amit baj esetén meg kell találni. */
a { color: var(--primary); }

.state { font-size: 22px; width: 26px; text-align: center; flex: none; color: var(--ink-muted); }
.state.done { color: var(--sage); }

.thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); flex: none;
}

/* A hozzájárulás nem apróbetűs rész: ez KAPUJA az egész oldalnak — amíg
   nincs bepipálva, egyetlen gomb sem működik. Sima szürke bekezdésként a
   szem átugorja (apróbetűnek nézi), aztán a felhasználó egy halott gombba
   ütközik. Ezért saját felülete van: látszik, hogy tennivaló. */
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px 0 2px; padding: 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: #FBF7F4;
  font-size: 16px; color: var(--ink);
  cursor: pointer;
}
.consent input { width: 24px; height: 24px; margin-top: 1px; flex: none; }

.msg { padding: 10px 12px; border-radius: 8px; font-size: 16px; margin: 8px 0 0; }
.msg.err { background: #FDECEA; color: #B3261E; }
.msg.ok { background: #EDF3ED; color: #3F5F3F; }
/* Figyelmeztetés, nem hiba: a fotó gyenge, de elküldhető. A szín is ezt
   mondja — borostyán, nem piros. */
.msg.warn { background: #FBF3E4; color: #6B4E16; }

footer { max-width: 520px; margin: 20px auto 40px; padding: 0 4px; }

/* A rendszer-beállítást tiszteletben tartjuk: sok idős felhasználó tudatosan
   nagyít, és egy fix méretezés ezt felülírná. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}