/* ============================================================
   PROFIL (régi nevén matrica-album – js/album.js, 2026-10-06; Profil 2026-10-07, Kristóf: „profil jellegű felület”)
   Egy nagy, görgethető panel: fej (lakó-típus), összesítő csipeszek, négy fül, tartalom. A Profil saját elemei: css/menu-nezet.css.
   Csak tokenek.
   ============================================================ */
#album { position:fixed; inset:0; z-index:var(--z-popup); display:flex; align-items:center; justify-content:center;
  padding:max(12px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)); background:var(--scrim); }   /* 12 px: a 10 px-es beúszás se lógjon ki */
#album.hidden { display:none; }
/* a panel láthatóan panel marad (körülötte a háttér): így egyértelmű, hogy görgethető – ne tűnjön teljes képernyős lapnak,
   amelynek az alja csak „véletlenül” lóg le (méret-próba, 2026-10-07) */
.albumBox { width:min(860px, 100%); max-height:min(100%, 88vh); max-height:min(100%, 88dvh); overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column;
  gap:var(--sp-2); padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.albumBox:focus { outline:none; }
.albumFej { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.albumFej h2 { display:flex; align-items:center; gap:8px; margin:0; font:400 var(--fs-2xl)/1.05 var(--display); }
.albumFej h2 .pic { width:30px; height:30px; }
.albumOssz { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.albumFulek .ds-tab { flex:1 1 0; min-width:0; justify-content:center; }
.albumFulek { display:flex; position:sticky; top:calc(-1 * var(--sp-3)); z-index:1; background:var(--bg); padding-block:4px; }
.albumTartalom { display:grid; gap:var(--sp-3); }
.albumBe { margin:0; }
.albumJatek h3 { display:flex; align-items:center; gap:8px; margin:0 0 6px; font:400 var(--fs-l)/1.1 var(--display); }
.albumJatek h3 .art, .albumJatek h3 .pic { width:30px; height:30px; flex:none; }
.albumJatek h3 small { margin-left:auto; font:600 var(--fs-xs)/1 var(--body); color:var(--ink-soft); }
.albumRacs { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:var(--sp-2); }
.albumMatrica { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 4px; min-height:var(--tap); font:inherit; color:var(--ink);
  background:var(--surface); border:var(--line-w) solid var(--line); border-radius:var(--r-m); cursor:pointer; touch-action:manipulation; }
.albumMatrica .art { width:56px; height:56px; }
.albumMatrica small { font-size:var(--fs-xs); line-height:1.2; text-align:center; overflow-wrap:anywhere; }
.albumUres { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; padding:var(--sp-2); border:2px dashed var(--line); border-radius:var(--r-m); }
.albumUres p { margin:0; flex:1 1 180px; color:var(--ink-soft); font-size:var(--fs-s); }
.albumHely { width:40px; height:46px; background:var(--sage-bg); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); flex:none; }
.albumJelvenyek { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--sp-2); }
.albumJelveny { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:var(--sp-2); }
.albumJelveny.is-locked b { color:var(--ink-soft); }   /* teljes kontraszt: a lakat jelzi, hogy még nincs meg */
.albumJelvenyIko .art, .albumJelvenyIko .pic { width:44px; height:44px; }
.albumJelveny small { font-size:var(--fs-xs); color:var(--ink-soft); }
.albumLab { margin:var(--sp-2) 0 0; text-align:center; }
@media (max-width:520px){ .albumBox { padding:var(--sp-3); } .albumRacs { grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); } .albumMatrica .art { width:46px; height:46px; } }
@media (prefers-reduced-motion: reduce){ .albumBox { animation:none; } }