/* =============================================================================================
   Social share (features.socialShare, MJ's Figma "4. Social Share"): the "Share your run" sheet
   (Components/Share/SocialShareSheet: the card grid, the chosen card with its X, the options) and
   the share buttons on the run, Mileage and listing pages (.sw-ss-btn). SwSheet draws the sheet's
   chrome; this is its body. The images themselves are drawn by js/socialShare.js.
   Plain CSS on the sw.css tokens (Tailwind does not compile this file, so app.min.css is untouched).
   Linked after sw.css by Supwell/wwwroot/index.html (app) and Supwell.Web/Components/App.razor (web).
   Unlayered, like recruit.css. The only motion (the chosen card easing in, the tile press) is off
   under prefers-reduced-motion.
   ============================================================================================= */

.sw-ss-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* ---- the card list ---------------------------------------------------------------------------- */
.sw-ss-list { display: flex; flex-direction: column; gap: 14px; }
.sw-ss-format { align-self: center; min-width: 200px; }
.sw-ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sw-ss-pickbtn {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--sw-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-ss-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 22px; background: var(--sw-olive); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: transform .16s var(--sw-pop, ease-out);
}
.sw-ss-tile--post { aspect-ratio: 4 / 5; }
.sw-ss-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-ss-pickbtn:active .sw-ss-tile { transform: scale(.97); }
.sw-ss-pickbtn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 3px; border-radius: 22px; }
.sw-ss-tile--wait { background: var(--sw-ground-2); }
span.sw-ss-pickbtn { cursor: default; }
.sw-ss-tile--wait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%);
  background-size: 200% 100%; animation: sw-ss-shimmer 1.2s linear infinite;
}
.sw-ss-tile__t { text-align: center; font: 500 12px/16px var(--sw-font-mono); color: var(--sw-ink-muted); }
.sw-ss-empty { margin: 24px 0; text-align: center; font: 500 14px/20px var(--sw-font-inter); color: var(--sw-ink-muted); }

/* ---- the chosen card -------------------------------------------------------------------------- */
.sw-ss-pick { display: flex; flex-direction: column; align-items: stretch; gap: 14px; animation: sw-ss-in .22s ease-out; }
.sw-ss-preview {
  position: relative; align-self: center; height: min(48vh, 460px); aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 25px; background: var(--sw-olive); box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.sw-ss-preview--post { aspect-ratio: 4 / 5; height: min(40vh, 380px); }
.sw-ss-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-ss-failed { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; color: #f6f3e6; font: 500 13px/18px var(--sw-font-inter); }
.sw-ss-back {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(246, 243, 230, .92); color: var(--sw-ink); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
/* A bigger tap target than the disc. */
.sw-ss-back::before { content: ""; position: absolute; inset: -8px; }

.sw-ss-photo {
  position: relative; align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--sw-olive-wash); color: var(--sw-olive); font: 600 14px/20px var(--sw-font-inter); cursor: pointer;
}
.sw-ss-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sw-ss-h { margin: 4px 0 0; font: 600 20px/26px var(--sw-font-inter); letter-spacing: -.01em; color: var(--sw-ink); }
.sw-ss-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.sw-ss-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--sw-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-ss-opt:disabled { opacity: .4; cursor: default; }
.sw-ss-opt:not(:disabled):active .sw-ss-ico { transform: scale(.94); }
.sw-ss-opt:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 4px; border-radius: 14px; }
.sw-ss-opt__t { font: 500 13px/17px var(--sw-font-mono); text-align: center; text-wrap: balance; }
.sw-ss-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: #fff;
  background: var(--sw-olive); transition: transform .12s ease-out;
}
.sw-ss-ico--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sw-ss-ico--messages { background: linear-gradient(#65f37c, #0bc32c); }
.sw-ss-hint { margin: -2px 0 0; text-align: center; font: 500 12px/18px var(--sw-font-inter); color: var(--sw-ink-muted); }

/* ---- the share buttons on the pages ----------------------------------------------------------- */
.sw-ss-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin: -6px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--sw-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-ss-btn:active { background: var(--sw-olive-wash); }
.sw-ss-btn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }

@keyframes sw-ss-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sw-ss-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .sw-ss-pick, .sw-ss-tile--wait::after { animation: none; }
  .sw-ss-tile, .sw-ss-ico { transition: none; }
  .sw-ss-pickbtn:active .sw-ss-tile, .sw-ss-opt:not(:disabled):active .sw-ss-ico { transform: none; }
}