/* ════════════════════════════════════════════════════════════════════════
   share-card.css — basboudewijn.nl · deel-kaart-generator
   Styling voor de zelfstandige preview-/download-UI (ShareCard.openPanel).
   On-brand (papier / roest / eucalyptus). Erft tokens uit site.css; valt
   netjes terug op eigen waarden als die niet geladen zijn. file://-proof.
   ════════════════════════════════════════════════════════════════════════ */

.sharecard-panel{
  --sc-paper:var(--paper,#F6F2E7);
  --sc-paper50:var(--paper-50,#FBF9F1);
  --sc-ink:var(--ink,#221E18);
  --sc-umber:var(--umber,#5B5345);
  --sc-rust:var(--rust,#B4462B);
  --sc-stone:var(--stone,#DCD4BF);
  --sc-rand:var(--velrand,rgba(120,100,70,.28));
  --sc-fd:var(--f-d,'Spectral',Georgia,serif);
  --sc-fb:var(--f-b,'Hanken Grotesk',system-ui,sans-serif);
  --sc-fm:var(--f-m,'JetBrains Mono',ui-monospace,monospace);

  position:fixed; right:24px; bottom:24px; z-index:9999;
  width:min(380px,calc(100vw - 32px));
  background:var(--sc-paper50);
  border:1px solid var(--sc-rand);
  border-radius:10px;
  box-shadow:0 2px 4px rgba(96,74,40,.12), 0 22px 56px rgba(96,74,40,.26);
  font-family:var(--sc-fb); color:var(--sc-ink);
  overflow:hidden;
  /* luchtpost-rand als bovenrand — het signatuurmotief, ook op de UI */
  border-top:0;
}
.sharecard-panel::before{
  content:''; display:block; height:8px;
  background:repeating-linear-gradient(45deg,
    var(--outback,#B4462B) 0 8px, var(--sc-paper) 8px 16px,
    var(--deep-sky,#3F5E76) 16px 24px, var(--sc-paper) 24px 32px);
  opacity:.95;
}

.sharecard-panel .sc-head{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 16px 10px; border-bottom:1px solid var(--sc-rand);
}
.sharecard-panel .sc-title{
  font-family:var(--sc-fd); font-weight:600; font-size:16px; color:var(--sc-ink);
}
.sharecard-panel .sc-sub{
  font-style:italic; font-family:var(--f-i,'Newsreader',serif);
  font-size:13px; color:var(--sc-umber);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
}
.sharecard-panel .sc-close{
  margin-left:auto; flex:0 0 auto;
  width:26px; height:26px; border:none; border-radius:50%;
  background:transparent; color:var(--sc-umber);
  font-size:20px; line-height:1; cursor:pointer;
  transition:background .18s, color .18s;
}
.sharecard-panel .sc-close:hover{ background:rgba(180,70,43,.1); color:var(--sc-rust); }

.sharecard-panel .sc-tabs{
  display:flex; gap:8px; padding:12px 16px 4px;
}
.sharecard-panel .sc-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:8px 4px; cursor:pointer;
  background:var(--sc-paper); color:var(--sc-umber);
  border:1px solid var(--sc-rand); border-radius:6px;
  font-family:var(--sc-fb); transition:all .18s;
}
.sharecard-panel .sc-tab b{ font-family:var(--sc-fm); font-size:13px; font-weight:500; }
.sharecard-panel .sc-tab span{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.sharecard-panel .sc-tab:hover{ border-color:var(--sc-rust); color:var(--sc-ink); }
.sharecard-panel .sc-tab.on{
  background:var(--sc-rust); color:#fff; border-color:var(--sc-rust);
  box-shadow:0 4px 12px rgba(180,70,43,.28);
}
.sharecard-panel .sc-tab.on span{ opacity:.85; }

.sharecard-panel .sc-stage{
  position:relative; margin:12px 16px;
  background:
    repeating-linear-gradient(45deg, rgba(120,100,70,.05) 0 14px, transparent 14px 28px),
    var(--sc-stone);
  border:1px dashed var(--sc-rand); border-radius:6px;
  min-height:160px;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.sharecard-panel .sc-canvas{
  max-width:100%; max-height:46vh; height:auto;
  border-radius:3px;
  box-shadow:0 2px 4px rgba(96,74,40,.12), 0 14px 30px rgba(96,74,40,.2);
  display:block;
}
.sharecard-panel .sc-stage.loading::after{
  content:'render…';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sc-fm); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sc-umber); background:rgba(251,249,241,.7);
}

.sharecard-panel .sc-bar{
  display:flex; gap:8px; padding:4px 16px 16px;
}
.sharecard-panel .sc-dl{
  flex:1; padding:11px 14px; cursor:pointer;
  font-family:var(--sc-fb); font-weight:600; font-size:13px;
  border-radius:100px; border:1px solid var(--sc-rust);
  background:var(--sc-rust); color:#fff;
  transition:all .2s;
}
.sharecard-panel .sc-dl:hover{ box-shadow:0 6px 18px rgba(180,70,43,.3); transform:translateY(-1px); }
.sharecard-panel .sc-dl.ghost{
  flex:0 0 auto; background:transparent; color:var(--sc-rust);
  border-color:rgba(180,70,43,.4);
}
.sharecard-panel .sc-dl.ghost:hover{ border-color:var(--sc-rust); box-shadow:none; }

@media (max-width:480px){
  .sharecard-panel{ right:8px; left:8px; bottom:8px; width:auto; }
  .sharecard-panel .sc-canvas{ max-height:40vh; }
}

@media (prefers-reduced-motion:reduce){
  .sharecard-panel .sc-tab,
  .sharecard-panel .sc-dl,
  .sharecard-panel .sc-close{ transition:none; }
  .sharecard-panel .sc-dl:hover{ transform:none; }
}

/* ════════════════════════════════════════════════════════════════════════
   LEZER-DEELSHEET (.share-sheet) — de Spotify-achtige bottom-sheet, huisstijl.
   Mobiel-first: een bottom-sheet die op desktop een gecentreerd paneel wordt.
   Erft de site-tokens (var(--paper) e.d.); valt file://-proof terug op eigen
   waarden. Hoort bij js/v3/share-sheet.js.
   ════════════════════════════════════════════════════════════════════════ */
.share-sheet{
  --shs-paper:var(--paper,#F6F2E7);
  --shs-paper50:var(--paper-50,#FBF9F1);
  --shs-sand:var(--sand,#ECE6D5);
  --shs-ink:var(--ink,#221E18);
  --shs-umber:var(--umber,#5B5345);
  --shs-ink3:var(--ink3,#6B6354);
  --shs-rust:var(--rust,#B4462B);
  --shs-stone:var(--stone,#DCD4BF);
  --shs-rand:var(--velrand,rgba(120,100,70,.28));
  --shs-fd:var(--f-d,'Spectral',Georgia,serif);
  --shs-fb:var(--f-b,'Hanken Grotesk',system-ui,sans-serif);
  --shs-fi:var(--f-i,'Newsreader',Georgia,serif);
  --shs-fm:var(--f-m,'JetBrains Mono',ui-monospace,monospace);

  position:fixed; inset:0; z-index:10000;
  font-family:var(--shs-fb); color:var(--shs-ink);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.share-sheet .shs-scrim{
  position:absolute; inset:0;
  background:rgba(34,30,24,.46);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .26s ease;
}
.share-sheet.on .shs-scrim{ opacity:1; }

.share-sheet .shs-panel{
  position:relative; z-index:1;
  width:100%; max-width:520px; margin:0 auto;
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--shs-paper50);
  border:1px solid var(--shs-rand); border-bottom:0;
  border-radius:18px 18px 0 0;
  box-shadow:0 -2px 4px rgba(96,74,40,.10), 0 -22px 60px rgba(96,74,40,.30);
  padding:0 18px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.share-sheet.on .shs-panel{ transform:translateY(0); }
/* luchtpost-rand als bovenrand van het paneel — het signatuurmotief */
.share-sheet .shs-panel::before{
  content:''; position:sticky; top:0; display:block; height:7px;
  margin:0 -18px 0; border-radius:18px 18px 0 0;
  background:repeating-linear-gradient(45deg,
    var(--outback,#B4462B) 0 7px, var(--shs-paper) 7px 14px,
    var(--deep-sky,#3F5E76) 14px 21px, var(--shs-paper) 21px 28px);
  opacity:.95; z-index:2;
}

.share-sheet .shs-grip{
  width:42px; height:4px; border-radius:100px;
  background:var(--shs-stone); margin:9px auto 2px;
}

.share-sheet .shs-head{
  display:flex; align-items:flex-start; gap:10px;
  padding:6px 2px 10px;
}
.share-sheet .shs-titles{ display:flex; flex-direction:column; flex:1; min-width:0; }
.share-sheet .shs-title{
  font-family:var(--shs-fd); font-weight:600; font-size:19px; line-height:1.2;
  color:var(--shs-ink);
}
.share-sheet .shs-sub{
  font-family:var(--shs-fi); font-style:italic; font-size:13.5px;
  color:var(--shs-umber); margin-top:1px;
}
.share-sheet .shs-close{
  flex:0 0 auto; width:34px; height:34px; border:none; border-radius:50%;
  background:var(--shs-sand); color:var(--shs-umber);
  font-size:22px; line-height:1; cursor:pointer;
  transition:background .18s, color .18s;
}
.share-sheet .shs-close:hover{ background:rgba(180,70,43,.12); color:var(--shs-rust); }

/* LIVE PREVIEW */
.share-sheet .shs-stage{
  position:relative; margin:2px 0 8px;
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
}
.share-sheet .shs-canvas{
  max-width:100%; max-height:46vh; height:auto; width:auto;
  border-radius:6px;
  box-shadow:0 2px 4px rgba(96,74,40,.14), 0 16px 36px rgba(96,74,40,.24);
  display:block;
}
.share-sheet .shs-stage.loading::after{
  content:''; position:absolute; width:30px; height:30px;
  border:2.5px solid var(--shs-rand); border-top-color:var(--shs-rust);
  border-radius:50%; animation:shs-spin .8s linear infinite;
}
@keyframes shs-spin{ to{ transform:rotate(360deg); } }

.share-sheet .shs-note{
  margin:0 0 8px; padding:9px 12px;
  font-size:13px; line-height:1.4; color:var(--shs-ink);
  background:var(--mist,#DCE6EC); border:1px solid var(--haze,#9DB6C6);
  border-radius:8px;
  opacity:0; max-height:0; overflow:hidden; padding-top:0; padding-bottom:0;
  transition:opacity .2s ease, max-height .25s ease, padding .25s ease;
}
.share-sheet .shs-note.on{ opacity:1; max-height:120px; padding-top:9px; padding-bottom:9px; }

/* groepskopjes */
.share-sheet .shs-grouphead{
  font-family:var(--shs-fb); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--shs-ink3);
  margin:12px 2px 8px;
}

/* ORIËNTATIE-keuze — drie kaders (horizontaal · vierkant · verticaal), boven
   de stijl-tabs. De eerste, grofste keuze: de vorm van de kaart. */
.share-sheet .shs-orient{
  display:flex; gap:8px;
}
.share-sheet .shs-orientbtn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px 9px; cursor:pointer;
  background:var(--shs-paper); color:var(--shs-umber);
  border:1px solid var(--shs-rand); border-radius:12px;
  font-family:var(--shs-fb); font-size:12px; font-weight:600;
  letter-spacing:.01em;
  transition:all .18s;
}
.share-sheet .shs-orient-ic{ display:flex; align-items:center; justify-content:center; color:inherit; }
.share-sheet .shs-orientbtn:hover{ border-color:var(--shs-rust); color:var(--shs-ink); }
.share-sheet .shs-orientbtn.on{
  border-color:var(--shs-rust); color:var(--shs-rust);
  background:var(--shs-paper50);
  box-shadow:0 0 0 1px var(--shs-rust), 0 4px 12px rgba(180,70,43,.16);
}

/* VARIANT-tabs (segmented control) */
.share-sheet .shs-tabs{
  display:flex; gap:6px; padding:4px;
  background:var(--shs-sand); border-radius:12px;
}
.share-sheet .shs-tab{
  flex:1; padding:9px 6px; cursor:pointer;
  font-family:var(--shs-fd); font-size:14px; font-weight:500;
  color:var(--shs-umber); background:transparent;
  border:1px solid transparent; border-radius:9px;
  transition:all .18s;
}
.share-sheet .shs-tab:hover{ color:var(--shs-ink); }
.share-sheet .shs-tab.on{
  background:var(--shs-paper50); color:var(--shs-ink);
  border-color:var(--shs-rand);
  box-shadow:0 1px 3px rgba(96,74,40,.16);
}

/* THEMA-swatches */
.share-sheet .shs-themes{
  display:flex; gap:10px; flex-wrap:wrap;
}
.share-sheet .shs-swatch{
  display:flex; align-items:center; gap:7px;
  padding:6px 12px 6px 8px; cursor:pointer;
  background:var(--shs-paper); border:1px solid var(--shs-rand);
  border-radius:100px; color:var(--shs-umber);
  font-family:var(--shs-fb); font-size:12.5px; font-weight:500;
  transition:all .18s;
}
.share-sheet .shs-swatch-dot{
  width:18px; height:18px; border-radius:50%;
  background:var(--swatch-bg,#F6F2E7);
  border:1px solid var(--shs-rand);
  position:relative; flex:0 0 auto;
}
.share-sheet .shs-swatch-dot::after{
  content:''; position:absolute; right:2px; bottom:2px;
  width:6px; height:6px; border-radius:50%;
  background:var(--swatch-dot,#B4462B);
}
.share-sheet .shs-swatch:hover{ border-color:var(--shs-rust); color:var(--shs-ink); }
.share-sheet .shs-swatch.on{
  border-color:var(--shs-rust); color:var(--shs-ink);
  box-shadow:0 0 0 1px var(--shs-rust), 0 4px 12px rgba(180,70,43,.18);
}

/* DEELDOELEN */
.share-sheet .shs-targets{
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px;
  margin-bottom:4px;
}
.share-sheet .shs-target{
  display:flex; align-items:center; gap:11px;
  padding:13px 14px; cursor:pointer; text-align:left;
  background:var(--shs-paper); color:var(--shs-ink);
  border:1px solid var(--shs-rand); border-radius:12px;
  font-family:var(--shs-fb); font-size:14px; font-weight:500;
  transition:all .18s;
}
.share-sheet .shs-target:hover{
  border-color:var(--shs-rust);
  box-shadow:0 4px 14px rgba(96,74,40,.16); transform:translateY(-1px);
}
.share-sheet .shs-target-ic{
  flex:0 0 auto; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--shs-rust);
}
.share-sheet .shs-target-lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-sheet .shs-target.is-primary{
  grid-column:1 / -1;
  background:var(--shs-rust); color:#fff; border-color:var(--shs-rust);
}
.share-sheet .shs-target.is-primary .shs-target-ic{ color:#fff; }
.share-sheet .shs-target.is-primary:hover{ box-shadow:0 6px 18px rgba(180,70,43,.34); }

/* DESKTOP: gecentreerd paneel i.p.v. bottom-sheet */
@media (min-width:760px){
  .share-sheet{ justify-content:center; align-items:center; padding:24px; }
  .share-sheet .shs-panel{
    border-radius:16px; border-bottom:1px solid var(--shs-rand);
    max-width:560px; max-height:88vh;
    transform:translateY(16px) scale(.98); opacity:0;
    transition:transform .26s ease, opacity .26s ease;
  }
  .share-sheet.on .shs-panel{ transform:translateY(0) scale(1); opacity:1; }
  .share-sheet .shs-panel::before{ border-radius:16px 16px 0 0; }
}

@media (prefers-reduced-motion:reduce){
  .share-sheet .shs-scrim,
  .share-sheet .shs-panel,
  .share-sheet .shs-target,
  .share-sheet .shs-tab,
  .share-sheet .shs-orientbtn,
  .share-sheet .shs-swatch,
  .share-sheet .shs-close{ transition:none; }
  .share-sheet .shs-stage.loading::after{ animation:none; }
  .share-sheet .shs-target:hover{ transform:none; }
}

/* ── DE "DEEL"-KNOP in de reader (story.html) ────────────────────────────
   Klein, rustig, on-brand. Verschijnt boven de verhaaltitel; opent de sheet. */
.story-share-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 14px; padding:8px 16px 8px 13px; cursor:pointer;
  font-family:var(--f-b,'Hanken Grotesk',system-ui,sans-serif);
  font-weight:600; font-size:13px; letter-spacing:.01em;
  color:var(--rust,#B4462B);
  background:var(--paper-50,#FBF9F1);
  border:1px solid var(--velrand,rgba(120,100,70,.28));
  border-radius:100px;
  transition:border-color .18s, box-shadow .18s, transform .18s, background .18s;
  -webkit-tap-highlight-color:transparent;
}
.story-share-btn .story-share-ic{ display:flex; align-items:center; color:inherit; }
.story-share-btn:hover{
  border-color:var(--rust,#B4462B);
  background:var(--paper,#F6F2E7);
  box-shadow:0 4px 14px rgba(180,70,43,.16); transform:translateY(-1px);
}
.story-share-btn:focus-visible{ outline:2px solid var(--rust,#B4462B); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .story-share-btn{ transition:none; }
  .story-share-btn:hover{ transform:none; }
}