/* Share sheet component (Vision). Theme it with --ss-* custom properties on :root or any ancestor (see README).
   Built-in defaults are neutral light and dark; a site's own --ss-* values always win. */

/* Share button: header top-right (all sizes) and optional hero placement (mobile only) */
.ss-btn{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  min-width:44px;min-height:44px;padding:0;margin:0;
  border:1px solid var(--ss-btn-line,transparent);border-radius:var(--ss-btn-radius,12px);
  background:var(--ss-btn-bg,transparent);color:var(--ss-btn-fg,currentColor);
  font:inherit;font-weight:700;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.ss-btn svg{width:22px;height:22px;flex:none}
.ss-btn:hover{background:var(--ss-btn-hover,color-mix(in srgb,currentColor 10%,transparent))}
.ss-btn:active{transform:scale(.96)}
.ss-btn:focus-visible{outline:2px solid var(--ss-focus,currentColor);outline-offset:2px}
.ss-btn--hero{padding:0 16px;border-color:var(--ss-btn-line,currentColor)}
.ss-btn-label{font-size:1rem}
@media (min-width:760px){.ss-btn--hero{display:none}}

/* Sheet: native <dialog> in the top layer, so sticky or collapsing headers can never cover it */
.ss-sheet{
  --_bg:var(--ss-bg,#ffffff);--_fg:var(--ss-fg,#16161a);--_muted:var(--ss-muted,#55555e);--_line:var(--ss-line,#d4d4da);
  --_card:var(--ss-card,#f5f5f7);--_accent:var(--ss-accent,#1f4fd1);--_accent-fg:var(--ss-accent-fg,#ffffff);
  --_focus:var(--ss-focus,#1f4fd1);--_ok:var(--ss-ok,#0f7a3e);
  box-sizing:border-box;padding:0;border:1px solid var(--_line);
  background:var(--_bg);color:var(--_fg);font-family:var(--ss-font,inherit);font-size:1rem;line-height:1.5;
  max-height:92dvh;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ss-sheet[data-ss-theme="dark"]{
  --_bg:var(--ss-bg,#141418);--_fg:var(--ss-fg,#f2f2f5);--_muted:var(--ss-muted,#b4b4bc);--_line:var(--ss-line,#3a3a42);
  --_card:var(--ss-card,#1f1f25);--_accent:var(--ss-accent,#8ab4ff);--_accent-fg:var(--ss-accent-fg,#0b1530);
  --_focus:var(--ss-focus,#9cc0ff);--_ok:var(--ss-ok,#5fd39a);
}
.ss-sheet::backdrop{background:var(--ss-scrim,rgba(8,8,14,.55))}
.ss-sheet *,.ss-sheet *::before,.ss-sheet *::after{box-sizing:border-box}
/* Mobile: bottom sheet, full width, safe-area padding (same breakpoint as Encore: 760px) */
@media (max-width:759px){
  .ss-sheet{width:100%;max-width:100%;margin:auto 0 0;border-bottom:0;border-radius:var(--ss-radius,20px) var(--ss-radius,20px) 0 0}
}
/* Desktop: centered dialog, 440px like Encore */
@media (min-width:760px){
  .ss-sheet{width:min(440px,calc(100% - 32px));max-width:440px;max-height:90dvh;margin:auto;border-radius:var(--ss-radius,20px)}
  .ss-grab{display:none}
}
/* No <dialog> support: fixed layer on the z-dialog token */
.ss-sheet.ss-fallback{position:fixed;inset:auto 0 0 0;z-index:var(--ss-z,40);display:block}
@media (min-width:760px){.ss-sheet.ss-fallback{inset:50% auto auto 50%;transform:translate(-50%,-50%)}}

.ss-inner{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
@media (min-width:760px){.ss-inner{padding:16px 24px 24px}}
.ss-grab{width:40px;height:4px;border-radius:2px;background:var(--_line);margin:0 auto 8px}
.ss-head{display:flex;align-items:center;gap:8px}
.ss-title{flex:1;margin:0;font-size:1.125rem;line-height:1.3;font-weight:800}
.ss-x{-webkit-appearance:none;appearance:none;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;margin-right:-8px;
  border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
.ss-x:hover{background:var(--_card)}

.ss-qr{margin:12px auto 0;width:max-content;max-width:100%;padding:12px;border-radius:16px;background:#fff;color:#16161a;text-align:center;border:1px solid var(--_line)}
.ss-qr svg{display:block;width:200px;height:200px;margin:0 auto}
.ss-qr figcaption{margin-top:4px;font-size:.875rem;font-weight:700;color:#3d3d45}
.ss-url{margin:8px 0 0;text-align:center;font-size:.875rem;color:var(--_muted);overflow-wrap:anywhere}

.ss-actions{display:grid;gap:8px;margin-top:16px}
.ss-targets{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ss-targets li:last-child:nth-child(odd){grid-column:1/-1}
.ss-extra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ss-act{
  -webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:48px;padding:8px 12px;border:1px solid var(--_line);border-radius:12px;
  background:var(--_card);color:var(--_fg);font:inherit;font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer;text-align:center
}
.ss-act:hover{border-color:var(--_fg)}
.ss-act:active{transform:scale(.98)}
.ss-act svg{flex:none}
.ss-primary{border:0;background:var(--_accent);color:var(--_accent-fg)}
.ss-act.is-done{color:var(--_ok);border-color:currentColor}
.ss-primary.is-done{background:var(--_accent);color:var(--_accent-fg)}
.ss-ic{display:inline-grid;place-items:center;width:24px;height:24px;flex:none}
.ss-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;border:2px solid currentColor;font:800 .8125rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ss-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ss-live{margin:8px 0 0;min-height:1.5em;text-align:center;font-size:.875rem;font-weight:700;color:var(--_ok)}
.ss-sheet :focus-visible{outline:2px solid var(--_focus);outline-offset:2px}

/* Motion only when allowed */
@media (prefers-reduced-motion:no-preference){
  .ss-sheet[open]{animation:ss-up .22s cubic-bezier(.2,.8,.2,1)}
  .ss-sheet[open]::backdrop{animation:ss-fade .22s ease-out}
  @media (min-width:760px){.ss-sheet[open]{animation-name:ss-pop}}
}
@keyframes ss-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes ss-pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes ss-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ss-btn:active,.ss-act:active{transform:none}}