/* ============================================================
   TESZEDD – „Gyűjtőpontok” fül (js/teszedd-pontok.js, -terkep.js): eszközsor, típus-csipeszek, SVG-térkép, pont-kártya, lista.
   Csak tokenek (docs/arculat.md). A típus színe mellett mindig ott a piktogram és a név is (színtévesztők).
   ============================================================ */
.tzPt { display:grid; gap:var(--sp-3); min-width:0; }
.tzpVaz { height:min(56dvh, 420px); border-radius:var(--r-l); }
.tzpEszkoz { display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr); gap:var(--sp-2); align-items:center; }
.tzpEszkoz .ds-btn { white-space:nowrap; }
.tzpCsipek { display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.tzpCsip { flex:0 0 auto; min-height:var(--tap); cursor:pointer; font:700 var(--fs-s)/1 var(--body); }
.tzpCsip small { font-weight:600; opacity:.75; }
.tzpCsip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.tzpCsip:focus-visible, .tzpSor:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.tzpFolt { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--tzp-c, var(--olive-soft)); border:2px solid var(--line); flex:0 0 auto; }
.tzpUzenet { margin:0; font:600 var(--fs-s)/1.4 var(--body); }
.tzpUzenet:empty { display:none; }
.tzpUzenet .pic { width:18px; height:18px; vertical-align:-3px; }

/* típus-színek (a palettából) */
.tzp-elem { --tzp-c:var(--ember); } .tzp-ruha { --tzp-c:var(--blossom); } .tzp-ehull { --tzp-c:var(--sky); } .tzp-olaj { --tzp-c:var(--honey); }
.tzp-szelektiv { --tzp-c:var(--leaf); } .tzp-komposzt { --tzp-c:var(--olive-soft); } .tzp-uveg { --tzp-c:var(--sage); } .tzp-egyeb { --tzp-c:var(--berry); }
.tzp-gyogyszer { --tzp-c:var(--berry); } .tzp-fem { --tzp-c:var(--sage); } .tzp-muanyag { --tzp-c:var(--honey-deep); }

/* térkép */
.tzpTerkep { position:relative; border:var(--line-w) solid var(--line); border-radius:var(--r-l); background:var(--sky-bg); overflow:hidden; }
.tzpSvg { display:block; width:100%; height:auto; aspect-ratio:1000 / 618; touch-action:none; user-select:none; -webkit-user-select:none; }
.tzpOrszag { fill:var(--paper); stroke:var(--line); stroke-width:3; vector-effect:non-scaling-stroke; }
.tzpMegyeP { fill:var(--paper); stroke:var(--sage); stroke-width:1.2; vector-effect:non-scaling-stroke; cursor:pointer; transition:fill var(--t-fast) var(--ease-out); }
.tzpMegyeP:hover { fill:var(--sage-bg); } .tzpMegyeP.on { fill:var(--butter); }
.tzpMegyeP:focus-visible { outline:none; stroke:var(--focus); stroke-width:3; }
.tzpPt, .tzpCs { cursor:pointer; }
.tzpHit { fill:transparent; }
.tzpDot { fill:var(--tzp-c, var(--accent)); stroke:var(--ink); }
.tzpPt.on .tzpDot { stroke:var(--focus); }
.tzpCs circle { fill:var(--accent); stroke:var(--ink); }
.tzpCs.egy circle { fill:var(--tzp-c); }
.tzpCs text { fill:var(--ink); font-family:var(--body); font-weight:800; text-anchor:middle; pointer-events:none; }
.tzpPt:focus-visible .tzpDot, .tzpCs:focus-visible circle { stroke:var(--focus); }
.tzpPt:focus, .tzpCs:focus { outline:none; }
.tzpTeGyuru { fill:none; stroke:var(--sky); } .tzpTeDot { fill:var(--ink); stroke:var(--paper); }
.tzpZoom { position:absolute; right:var(--sp-2); bottom:var(--sp-2); display:grid; gap:6px; }
.tzpZoom .ds-icon-btn { min-width:var(--tap); min-height:var(--tap); background:var(--surface); }

/* pont-kártya */
.tzpKartya { display:grid; gap:var(--sp-2); border-left:8px solid var(--tzp-c, var(--accent)); }
.tzpKartya header { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:var(--sp-2); align-items:start; }
.tzpKartya h3 { margin:6px 0 0; font:400 var(--fs-l)/1.15 var(--display); overflow-wrap:anywhere; }
.tzpKartya p { margin:0; overflow-wrap:anywhere; }
.tzpKartya p .pic { width:18px; height:18px; vertical-align:-3px; }
.tzpKartyaIk { width:52px; height:52px; display:grid; place-items:center; }
.tzpKartyaIk .art, .tzpKartyaIk .pic, .tzpKartyaIk svg { width:100%; height:100%; }

/* lista */
.tzpListaCim { margin:0; font:400 var(--fs-l)/1.2 var(--display); }
.tzpLista { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
.tzpSor { width:100%; min-height:var(--tap); display:grid; grid-template-columns:40px minmax(0, 1fr) auto; gap:var(--sp-2); align-items:center; text-align:left;
  padding:8px 10px; border:var(--line-w) solid var(--line); border-left:8px solid var(--tzp-c, var(--accent)); border-radius:var(--r-m); background:var(--paper); color:var(--ink);
  font:600 var(--fs-s)/1.3 var(--body); cursor:pointer; transition:transform var(--t-fast) var(--ease-out); }
.tzpSor:active { transform:scale(.98); } .tzpSor.on { background:var(--butter); }
.tzpSorIk { width:40px; height:40px; display:grid; place-items:center; } .tzpSorIk .art, .tzpSorIk .pic, .tzpSorIk svg { width:100%; height:100%; }
.tzpSorTxt { display:grid; min-width:0; } .tzpSorTxt b { overflow-wrap:anywhere; } .tzpSorTxt small { color:var(--ink-soft); overflow-wrap:anywhere; }
.tzpKm { font:400 var(--fs-m)/1 var(--display); white-space:nowrap; }
.tzpKicsi { margin:0; font:400 var(--fs-s)/1.45 var(--body); color:var(--ink-soft); }
.tzpKicsi .pic { width:16px; height:16px; vertical-align:-3px; } .tzpKicsi a { color:inherit; }
.tzpTipp { margin:0; color:var(--ink-soft); } .tzpTipp .pic { width:18px; height:18px; vertical-align:-3px; }

@media (max-width:560px){
  .tzpEszkoz { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .tzpEszkoz .ds-btn { grid-column:1 / -1; justify-content:center; }
  .tzpSvg { aspect-ratio:1 / 1; max-height:62dvh; }          /* telefonon négyzetesebb: több hely a pontoknak */
}
@media (prefers-reduced-motion:reduce){ .tzpSor, .tzpMegyeP { transition:none; } .tzpSor:active { transform:none; } }