/* Spelersfoto's (M2) — raster van spelerskaarten en fotoblad op de TeamSeason-pagina, stijl C.
   Gebruikt uitsluitend de tokens uit index.html (--bg, --bg-2, --card, --line, --ink, --muted,
   --accent, --accent-ink, --accent-line, --accent-soft, --danger) en de globale :focus-visible.
   Telefoon 375 px: drie kolommen, geen horizontaal scrollen; aanraakdoelen ≥ 44 px.
   Geen enkele CSS-url-functie in deze stylesheet: beelden komen alleen als <img src="blob:…">. */

.pp-roster{display:flex; flex-direction:column; gap:8px; min-width:0;}
.pp-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pp-toolbar:empty{display:none;}
.pp-filter{font:inherit; font-size:.8rem; font-weight:600; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 12px; min-height:36px; cursor:pointer;}
.pp-filter:hover{color:var(--ink); border-color:var(--accent-line);}
.pp-filter[aria-pressed="true"]{color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-line);}

.pp-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; min-width:0;}
.pp-grid[aria-busy="true"]{opacity:.75;}
.pp-item{min-width:0;}
.pp-card{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:6px; width:100%; min-width:0; min-height:44px; padding:6px; font:inherit; color:var(--ink); text-align:center; background:var(--bg-2); border:1px solid var(--line); border-radius:10px;}
button.pp-card{cursor:pointer;}
button.pp-card:hover, button.pp-card.is-drop{border-color:var(--accent-line);}
.pp-card.is-drop{background:var(--accent-soft);}
/* Verwijzing aanwezig maar niet te tonen: niet geladen, of wissen niet afgerond. Geen "geen foto". */
.pp-card.is-unloaded{border-style:dashed;}
.pp-card.is-pending{border-style:dashed; border-color:var(--danger);}
.pp-badge{position:absolute; left:10px; right:10px; bottom:34px; padding:2px 6px; border-radius:6px; font-size:.68rem; font-weight:700; line-height:1.3; color:var(--ink); background:rgba(11,14,19,.82); border:1px solid var(--line); overflow-wrap:anywhere;}
.pp-card.is-pending .pp-badge{color:#ffd9cc; border-color:var(--danger);}
.pp-name{font-size:.82rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; min-width:0;}

/* Beeldvlak. De foto wordt NOOIT bijgesneden (PO-handtest M2, K7 herzien): object-fit contain toont
   de volledige afbeelding in de oorspronkelijke verhouding; de rustige achtergrond komt uit CSS, niet
   uit de afbeelding (transparantie blijft zichtbaar als die achtergrond). */
.pp-media{position:relative; display:block; width:100%; aspect-ratio:1 / 1; border-radius:8px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line);}
.pp-media .pp-img, .pp-media .pp-placeholder{display:block; width:100%; height:100%;}
.pp-img{object-fit:contain; object-position:50% 50%;}
/* Detailvenster en uploadpreview: passend binnen het scherm, ook op 375 px en bij lage schermhoogte. */
.pp-media-large{aspect-ratio:auto; width:100%; max-width:420px; height:clamp(150px, 46vh, 460px); height:clamp(150px, 46dvh, 460px); margin:0 auto;}
.pp-media-small{max-width:96px; margin:0 auto;}
@media (max-height:520px){ .pp-media-large{height:clamp(120px, 38vh, 260px); height:clamp(120px, 38dvh, 260px);} }

/* "Foto toevoegen" bij hover/focus (desktop); op aanraakschermen een klein camera-icoon. */
.pp-add-hint{position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border-radius:999px; font-size:.7rem; font-weight:700; color:var(--accent-ink); background:rgba(11,14,19,.78); border:1px solid var(--accent-line);}
.pp-cam{width:14px; height:14px;}
.pp-add-text{display:none;}
@media (hover:hover) and (pointer:fine){
  .pp-add-hint{opacity:0; transition:opacity .12s ease;}
  .pp-card:hover .pp-add-hint, .pp-card:focus-visible .pp-add-hint{opacity:1;}
  .pp-card:hover .pp-add-text, .pp-card:focus-visible .pp-add-text{display:inline;}
}
@media (prefers-reduced-motion:reduce){ .pp-add-hint{transition:none;} }

.pp-note{margin:2px 0 0; color:var(--muted); font-size:.8rem;}
.pp-list-error{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

/* ---- Fotoblad: desktop dialoog (≥ 640 px), telefoon blad van onderen ---- */
.pp-layer{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px;}
.pp-scrim{position:absolute; inset:0; background:rgba(5,8,12,.66);}
.pp-sheet{position:relative; display:flex; flex-direction:column; gap:12px; width:min(520px, 100%); max-height:calc(100vh - 32px); overflow:auto; padding:16px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45);}
.pp-sheet:focus{outline:none;}
.pp-sheet:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.pp-sheet-head{display:flex; align-items:flex-start; gap:10px;}
.pp-sheet-ident{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.pp-sheet-title{margin:0; font-size:1.05rem; line-height:1.3; overflow-wrap:anywhere;}
.pp-sheet-sub{color:var(--muted); font-size:.84rem; overflow-wrap:anywhere;}
.pp-close{flex:none; inline-size:44px; block-size:44px; font:inherit; font-size:1.05rem; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:10px; cursor:pointer;}
.pp-close:hover{color:var(--ink); border-color:var(--accent-line);}
.pp-close:disabled{opacity:.4; cursor:default;}
.pp-sheet-body{display:flex; flex-direction:column; gap:10px; min-width:0;}
.pp-lead{margin:0; font-weight:600;}
.pp-muted{margin:0; color:var(--muted); font-size:.88rem;}
.pp-notice{margin:0; padding:8px 10px; font-size:.86rem; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:10px;}
.pp-compare{display:flex; align-items:flex-end; justify-content:center; gap:12px; flex-wrap:wrap;}
.pp-fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 1 120px; min-width:0;}
.pp-fig figcaption{color:var(--muted); font-size:.78rem;}
/* "Nieuwe foto": huidige foto klein ernaast, de nieuwe krijgt de rest van de breedte (ook op 375 px). */
.pp-fig-now{flex:0 0 96px;}
.pp-compare .pp-fig-now ~ .pp-fig .pp-media-large{height:clamp(140px, 40vh, 400px); height:clamp(140px, 40dvh, 400px);}

.pp-drop{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px; text-align:center; border:1px dashed var(--line); border-radius:12px; background:var(--bg-2);}
.pp-drop-text{color:var(--ink); font-weight:600;}
.pp-hint{color:var(--muted); font-size:.8rem;}
.pp-drop .wd-primary, .pp-drop .tb-add{min-height:44px; min-width:180px;}
@media (pointer:fine){ .pp-coarse{display:none !important;} }
@media (pointer:coarse){ .pp-fine{display:none !important;} }

.pp-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:stretch;}
.pp-actions > button{min-height:44px; margin-left:0;}
.pp-replace{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;}
.pp-btn-main{font-weight:700;}
.pp-btn-sub{font-size:.74rem; font-weight:500; color:var(--muted);}
.pp-remove{color:var(--danger); border-color:var(--danger); display:inline-flex; align-items:center;}
.pp-remove:hover{color:var(--danger); border-color:var(--danger); background:rgba(224,118,79,.08);}
/* Rode, niet-standaard bevestigknop; krijgt nooit automatisch de focus. */
.pp-danger{font:inherit; font-weight:700; color:#fff; background:#b5462a; border:1px solid var(--danger); border-radius:10px; padding:10px 15px; cursor:pointer;}
.pp-danger:hover{background:#c4502f;}
.pp-danger:disabled{opacity:.5; cursor:default;}

.pp-error{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid var(--danger); border-radius:10px; background:rgba(224,118,79,.08);}
.pp-error p{margin:0; color:var(--ink); font-size:.88rem;}
.pp-error .tb-act, .pp-error .sp-back{margin-left:0; min-height:44px;}
.pp-status:empty{display:none;}

/* ---- M3: Eerdere foto's (ingeklapt onder de actuele foto) ---- */
.pp-prev{display:flex; flex-direction:column; gap:8px; min-width:0; padding-top:8px; border-top:1px solid var(--line);}
.pp-prev-toggle{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 0; font:inherit; font-size:.88rem; font-weight:600; color:var(--ink); background:transparent; border:0; cursor:pointer; text-align:left; overflow-wrap:anywhere;}
.pp-prev-toggle::before{content:"\25B8 "; color:var(--muted);}
.pp-prev-toggle[aria-expanded="true"]::before{content:"\25BE ";}
.pp-prev-toggle:hover{color:var(--accent-ink);}
.pp-prev-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-width:0;}
.pp-prev-item{display:flex; align-items:center; gap:10px; min-width:0;}
.pp-prev-item .pp-media-small{flex:0 0 72px; max-width:72px; margin:0;}
.pp-prev-meta{display:flex; flex-direction:column; gap:6px; min-width:0; flex:1;}
.pp-prev-date{color:var(--muted); font-size:.8rem;}
.pp-prev-used{color:var(--ink); font-size:.8rem;}
.pp-prev-actions{display:flex; gap:8px; flex-wrap:wrap;}
.pp-prev-actions > button{min-height:44px; margin-left:0;}

@media (max-width:639px){
  .pp-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;}
  .pp-card{padding:5px;}
  .pp-name{font-size:.78rem;}
  .pp-layer{align-items:flex-end; padding:0;}
  .pp-sheet{width:100%; max-height:92vh; max-height:92dvh; border-radius:16px 16px 0 0; border-bottom:0; padding:14px 16px calc(16px + env(safe-area-inset-bottom, 0px));}
  .pp-actions{flex-direction:column;}
  .pp-actions > button, .pp-drop .wd-primary, .pp-drop .tb-add{width:100%; min-width:0; justify-content:center; text-align:center;}
  .pp-replace{align-items:center;}
  .pp-filter{min-height:44px;}
}