/* Upload-pagina (page-scoped): app-first — goud/champagne op crème, grote
 * knoppen, mobile-first. Cohesion: alle waarden refereren de shared tokens uit
 * style.css (gate 48 — geen hex-duplicatie meer). */

.up-hero { padding-block: 40px 8px; }
/* ademruimte tussen de twee hero-regels (inbox-002): script-kicker + display-titel
 * stonden op elkaars schouders (line-height 1 + negatieve marge) — nu een stille
 * 8 px-lucht tussen "Delen met" en "Mientje". */
.up-kicker { font-size: 1.7rem; margin: 0 0 var(--space-2xs); color: var(--color-gold-dark); }
.up-hero .up-title { /* .hero .up-title wint van style.css `.hero h1` (0,1,1) */
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  margin: 0;
  font-size: clamp(2.6rem, 12.5vw, 4.6rem);
  background: linear-gradient(180deg, var(--color-gold-pale) 0%, var(--color-gold-light) 38%, var(--color-gold) 62%, var(--color-gold-dark) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(140, 109, 47, 0.35));
}
/* (opruiming inbox-002: hero-subtitle `.up-lede` is van de pagina af — bouw hem niet terug) */

.up-panel {
  border-radius: 26px;
  padding: var(--space-md) 20px;
  background: color-mix(in srgb, var(--color-paper-2) 92%, transparent);
  box-shadow: var(--shadow-lift);
}
.up-dropzone {
  margin-top: var(--space-sm);
  border-radius: var(--radius-lg);
  border-width: 3px;
  padding: 34px var(--space-sm);
  background: linear-gradient(150deg, var(--color-paper-2), #fff8e8);
}
.up-dropzone p { font-size: 1.06rem; }

/* herstelcode op het succes-moment (inbox 001): eigen rustig blok — label, code op een
   eigen regel, knop eronder; geen inline botsing met omringende tekst meer. */
.claim-block { margin: var(--space-xs) 0 0; padding: var(--space-xs) var(--space-sm);
  border: var(--border-gold); border-radius: var(--radius); background: var(--color-paper-2);
  text-align: center; }
.claim-block-label { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-muted); }
.claim-block .claim-code { margin: var(--space-3xs) 0; }
.claim-block .btn-sm { min-width: 9rem; }
.claim-block .helper { margin: var(--space-2xs) 0 0; }
.countdown-card .claim-block { grid-column: 1 / -1; } /* ring-kolom (44px) ontwijken */

/* unified share page (share-golf): segment-keuze boven de twee flows.
   Grote tikbare kaarten (mobile-first app-gevoel); alle waarden tokens (gate 48). */
.share-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs);
  margin-block: var(--space-2xs) var(--space-sm);
}
.share-seg-btn {
  display: grid; justify-items: center; gap: var(--space-3xs);
  min-height: 96px; padding: var(--space-sm) var(--space-2xs);
  background: var(--color-paper); color: var(--color-ink);
  border: 2px solid rgba(201, 162, 75, 0.45); border-radius: var(--radius-lg);
  font-family: var(--font-body); cursor: pointer; text-align: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}
.share-seg-btn:hover { border-color: var(--color-gold); background: #fff8e8; }
.share-seg-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.share-seg-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .share-seg-btn, .share-seg-btn:active { transition: none; transform: none; }
}
.share-seg-btn[aria-selected="true"] {
  border-color: var(--color-gold);
  background: linear-gradient(180deg, var(--color-gold-pale), color-mix(in srgb, var(--color-gold-pale) 55%, var(--color-paper)));
  box-shadow: var(--shadow-soft);
}
.share-seg-btn .ss-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-gold-pale) 60%, transparent); color: var(--color-gold-dark); }
.share-seg-btn[aria-selected="true"] .ss-icon { background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold)); color: var(--color-accent-ink); }
.share-seg-btn .ss-icon svg { width: 20px; height: 20px; }
.share-seg-btn .ss-label { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }

/* panels vangen de ruimte onder de segmenten; links-rij onderaan de keuze */
.share-panel { margin-block-start: var(--space-3xs); }
.share-links { margin-block-start: var(--space-md); }

/* ---------- upload-progress-golf: per-bestandsrijen + batch-balk + countdown ----------
   Alles tokens (gate 48); reduced-motion: geen ring-animatie, tekst-countdown blijft. */
/* .batch-bar draagt author-display (grid) — dat wint van het UA-hidden-attribuut:
 * in rust stond er letterlijk "0 van 0 klaar" in beeld (captain-punt 3, wave-2).
 * Expliciete display:none-terugzet, zelfde patroon als .wish-backdrop[hidden]. */
.batch-bar[hidden] { display: none; }
.batch-bar { margin-block-start: var(--space-sm); display: grid; gap: var(--space-3xs); }
/* upload-scroll-wave2 (captain-punt 2): dummy-hoogte onder de lijst zolang er een
 * actieve batch loopt — scroll-headroom zodat het follow-anker (actieve rij hoog +
 * twee pending-rijen eronder) ook bij de laatste rijen fysiek haalbaar blijft. */
.up-lookahead { height: clamp(160px, 38dvh, 320px); }
.up-lookahead[hidden] { display: none; }
.batch-count { font-weight: 800; font-size: 0.92rem; color: var(--color-ink-soft); }
.up-bar { display: block; width: 100%; height: 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-gold-pale) 70%, transparent); overflow: hidden; }
.up-fill { display: block; height: 100%; width: 0%; border-radius: inherit;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
  transition: width var(--dur-short) var(--ease-out); }

.upload-list .up-row { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-xs);
  align-items: center; padding: var(--space-xs) var(--space-3xs); }
.up-thumb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius);
  overflow: hidden; background: var(--color-paper); color: var(--color-gold-dark);
  border: 1px solid rgba(201, 162, 75, 0.3); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-thumb svg { width: 22px; height: 22px; }
.up-body { display: grid; gap: 4px; min-width: 0; }
.up-line1 { display: flex; gap: var(--space-xs); align-items: baseline; min-width: 0; }
.up-line1 .fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.up-line1 .fstatus { flex: none; font-weight: 700; font-size: 0.82rem; color: var(--color-ink-soft); }
.up-meta { font-size: 0.78rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.up-actions { display: flex; gap: 6px; }
.up-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(201, 162, 75, 0.5); background: var(--color-paper); color: var(--color-gold-dark);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out); }
.up-btn svg { width: 18px; height: 18px; }
.up-btn:hover { border-color: var(--color-gold); background: #fff8e8; }
.up-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.up-btn:active { transform: scale(0.94); }

/* state-kleuren: klaar = groen, mislukt = rood (status-done/status-fail tokens uit style.css) */
.up-row[data-state="done"] .fstatus, .up-row[data-state="deduped"] .fstatus { color: var(--color-ok); }
.up-row[data-state="failed"] .fstatus { color: var(--color-err); }
.up-row[data-state="done"] .up-fill, .up-row[data-state="deduped"] .up-fill { background: var(--color-ok); }
.up-row[data-state="failed"] .up-fill { background: var(--color-err); }
.up-row[data-state="paused"] .up-fill { background: var(--color-gold-light); }
.up-row[data-state="ready"] .up-bar, .up-row[data-state="done"] .up-meta { display: none; }

/* client-conversie (captain-besluit 002): dual-path — "verkleinen op dit toestel…" met
 * Sla-over-knop die naar het server-pad overdraagt. */
.up-row[data-state="converting"] .fstatus { color: var(--color-gold-dark); }
.up-row[data-state="converting"] .up-bar { display: none; }
.up-row[data-state="ready"] .up-bar { display: none; }

/* upload-restore-golf: "wacht op bestand"-rij (herkeuze na reload/tab-discard) */
.up-row[data-state="needfile"] .fstatus { color: var(--color-gold-dark); }
.up-row[data-state="needfile"] .up-fill { background: var(--color-gold-light); }
.up-btn-text { width: auto; min-width: 38px; padding: 0 14px; font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap; }

/* countdown-kaart (inbox 001; countdown-terug-golf): ring + twee tik-opties;
   hint upload-redirect-off → ring start GEPAUZEERD (tik ring of "Teller starten"). */
.countdown-card { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-xs) var(--space-sm);
  align-items: center; text-align: left; }
.cd-ring { grid-row: 1 / span 2; width: 44px; height: 44px; }
.cd-track { stroke: color-mix(in srgb, var(--color-gold-pale) 80%, transparent); }
.cd-prog { stroke: var(--color-gold-dark); transition: stroke-dashoffset 1s linear; }
.cd-ring-num { fill: var(--color-gold-dark); font-family: var(--font-body); font-weight: 800;
  font-size: 15px; font-variant-numeric: tabular-nums; } /* cijfer in de ring; tabular = geen jitter */
.cd-title { margin: 0; font-weight: 800; }
.cd-text { margin: 0; font-weight: 500; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.cd-btns { grid-column: 1 / -1; margin: var(--space-3xs) 0 0; display: flex; flex-direction: column;
  gap: var(--space-xs); } /* countdown-card-fix-golf: gecentreerde volle-breedte-kolom, gelijke marges als het herstelcode-blok */
.cd-btns .btn { width: 100%; flex: 1 1 auto; min-height: 48px; }
.cd-paused-note { grid-column: 1 / -1; margin: 0; font-size: 0.86rem; color: var(--color-muted); }
.cd-paused-note[hidden] { display: none; } /* author-display-patroon: hidden-gate expliciet */
.cd-start { appearance: none; background: none; border: 0; padding: 0; font: inherit;
  font-weight: 700; color: var(--color-gold-dark); text-decoration: underline; cursor: pointer; }
.countdown-card.cd-paused .cd-ring { cursor: pointer; }
.countdown-card.cd-paused .cd-prog { transition: none; stroke-dashoffset: 0; }
.countdown-card.cd-paused .cd-ring:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 3px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .up-fill, .up-btn, .up-btn:active { transition: none; transform: none; }
  .cd-ring { display: none; }                       /* geen geanimeerde ring… */
  .countdown-card { grid-template-columns: 1fr; }
  .cd-btns { grid-column: 1; }
  .cd-text { display: block !important; }           /* …wél de cijfermatige tekst-countdown */
}

/* ---------- wens-sheet (galerij-upload-ux-golf captain-punt 5; hertekend upload-scroll-wave2) ----------
   Bottom-sheet (mobiel) / centered dialog (≥40rem) in de paper/foil-taal van de kaart:
   crème blad met gouden lijst (status-card/up-panel-DNA), script-kicker + display-kop
   (bedankt-ramp), folie-sub, grabber + safe-area. De upload-lijst erachter draait door.
   states: hidden · open (+rise-animatie) · hover · focus · active · loading (submit
   "Plaatsen…") · error (msg-err) · success (msg-ok + auto-sluit). */
.wish-open-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  padding: var(--space-3xs) var(--space-2xs); min-height: 44px; cursor: pointer; font: inherit;
  font-size: 0.92rem; color: var(--color-ink-soft); border-radius: var(--radius-sm);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-gold); }
.wish-open-btn:hover { color: var(--color-ink); background: var(--color-paper-2); }
.wish-open-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wish-open-btn:active { transform: translateY(1px); }

.wish-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-toast) + 5);
  display: grid; align-items: end; justify-items: center;
  background: rgba(30, 20, 8, 0.45); animation: wish-fade var(--dur-short) var(--ease-out); }
.wish-backdrop[hidden] { display: none; }
.wish-sheet { position: relative; width: min(480px, 100%); text-align: center;
  background: color-mix(in srgb, var(--color-gold-pale) 14%, var(--color-paper));
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lift);
  padding: var(--space-xs) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  max-height: 86dvh; overflow-y: auto;
  animation: wish-rise 320ms var(--ease-out); }
@keyframes wish-fade { from { opacity: 0; } }
@keyframes wish-rise { from { transform: translateY(16px); opacity: 0; } }
.wish-grab { width: 44px; height: 4px; border-radius: var(--radius-pill);
  background: var(--color-gold); margin: 0 auto var(--space-sm); }
.wish-close { position: absolute; top: var(--space-2xs); right: var(--space-2xs);
  min-height: 44px; min-width: 44px; padding: 8px; background: none; border: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-pill); color: var(--color-muted);
  cursor: pointer; touch-action: manipulation;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.wish-close:hover { color: var(--color-ink); background: color-mix(in srgb, var(--color-gold-pale) 55%, transparent); }
.wish-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wish-close:active { transform: translateY(1px); }
.wish-close svg { width: 18px; height: 18px; }
.wish-kicker { font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1; margin: 0;
  color: var(--color-gold-dark); }
.wish-title { font-family: var(--font-display); font-size: clamp(1.35rem, 5vw, 1.7rem);
  font-weight: 700; margin: var(--space-3xs) 0 var(--space-2xs); color: var(--color-ink); }
.wish-sub { color: var(--color-ink-soft); font-size: 0.95rem; max-width: 34ch;
  margin: 0 auto var(--space-sm); }
.wish-sheet form { text-align: left; }
.wish-sheet textarea { width: 100%; min-height: 110px; background: var(--color-paper); }
.wish-sheet .btn-row { justify-content: center; }
@media (min-width: 40rem) {
  .wish-backdrop { align-items: center; padding: var(--space-md); }
  .wish-sheet { border-radius: var(--radius-lg); padding-block-end: var(--space-md); }
  .wish-grab { display: none; } /* centered dialog heeft geen grabber nodig */
}
html.wish-open, html.wish-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .wish-sheet, .wish-backdrop, .wish-open-btn, .wish-close { animation: none !important; transition: none !important; }
}