/* =========================================================
   Share sheet (js/share.js)
   A bottom sheet on phones and a centred dialog on laptops: a live preview
   of the picture, its size, its background, and where to share it.
   Everything is scoped to .shr, so the rest of the site is never touched,
   with two exceptions at the bottom of this file: the page can't scroll
   while the sheet is open, and while a share message shows, the site's
   toast moves to the top, above the sheet and the phone's own share sheet.
   ========================================================= */

.shr {
  --shr-ink: #141414;
  --shr-muted: #4A4A46;
  --shr-maroon: #5D0707;
  --shr-maroon-2: #470505;
  --shr-paper: #FFFFFF;
  --shr-chip: #EFEDE8;
  --shr-line: #DCDAD3;
  --shr-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* The preview's height; the picture fits inside it at any size. */
  --shr-h: clamp(150px, 34vh, 256px);
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--shr-ink);
  font-family: inherit;
  font-size: 16px;
  font-stretch: 100%;
  line-height: 1.5;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.shr *,
.shr *::before,
.shr *::after { box-sizing: border-box; }
.shr.is-closing { pointer-events: none; }

.shr__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  opacity: 0;
  transition: opacity 240ms var(--shr-ease);
}
.shr.is-open .shr__scrim { opacity: 1; }
.shr.is-closing .shr__scrim { transition-duration: 200ms; }

/* ---------- The sheet ---------- */

.shr__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100% - 24px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: var(--shr-paper);
  box-shadow: 0 -10px 40px -12px rgba(20, 20, 20, 0.25);
  transform: translate3d(0, 100%, 0);
  transition: transform 380ms var(--shr-ease);
  outline: none;
}
.shr.is-open .shr__panel { transform: none; }
.shr.is-closing .shr__panel { transition-duration: 240ms; }
.shr__panel.is-dragging { transition: none; }

/* The top row stays put while the rest scrolls on short phones. */
.shr__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 28px;
  background: var(--shr-paper);
  touch-action: none;
}
.shr__grab {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--shr-line);
}
.shr__title {
  margin: 0;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--shr-ink);
}
.shr__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--shr-chip);
  color: var(--shr-ink);
  cursor: pointer;
  transition: background-color 160ms var(--shr-ease);
}
.shr__close svg { display: block; width: 18px; height: 18px; }

.shr__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
}
.shr__controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---------- The preview ---------- */

.shr__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--shr-h);
}
.shr__frame {
  position: relative;
  flex: none;
  width: min(100%, calc(var(--shr-h) * var(--shr-ar, 0.5625)));
  aspect-ratio: var(--shr-ar, 0.5625);
  overflow: hidden;
  border-radius: 14px;
  background: var(--shr-wait, #F7F6F2);
  box-shadow: 0 10px 24px -14px rgba(20, 20, 20, 0.5), 0 0 0 1px rgba(20, 20, 20, 0.08);
  transition: opacity 200ms var(--shr-ease);
}
/* A new size takes a moment to draw the first time. */
.shr__frame.is-busy { opacity: 0.7; transition-delay: 150ms; }
.shr__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  animation: shr-in 220ms var(--shr-ease) both;
}
@keyframes shr-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Choices: size and background ----------
   Real radio buttons, invisible, over pill-shaped labels. Each is 44px tall;
   the dark pill sits inside it. */

.shr__seg {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--shr-chip);
}
.shr__opt {
  position: relative;
  flex: 1 1 0;
  display: flex;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.shr__opt input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.shr__opt span {
  position: relative;
  z-index: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--shr-ink);
  transition: color 160ms var(--shr-ease);
}
.shr__opt span::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 999px;
  background: transparent;
  transition: background-color 160ms var(--shr-ease), box-shadow 160ms var(--shr-ease);
}
.shr__opt input:checked + span { color: var(--shr-paper); }
.shr__opt input:checked + span::before { background: var(--shr-ink); }
.shr__opt input:focus-visible + span { outline: 3px solid var(--shr-maroon); outline-offset: 0; }
.shr__opt input:disabled { cursor: default; }
.shr__opt input:disabled + span { color: rgba(20, 20, 20, 0.35); }

.shr__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.shr__label { font-size: 14px; font-weight: 600; }
.shr__seg--small .shr__opt { flex: none; }
.shr__seg--small .shr__opt span { padding: 0 18px; font-size: 13px; }
.shr__seg--small .shr__opt span::before { inset: 5px; }
.shr__seg--small .shr__opt input:checked + span { color: var(--shr-ink); }
.shr__seg--small .shr__opt input:checked + span::before {
  background: var(--shr-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.15);
}

/* ---------- Where to share ---------- */

.shr__targets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 4px;
}
.shr__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 2px 0 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--shr-ink);
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.shr__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--shr-ink);
  border-radius: 50%;
  transition: background-color 160ms var(--shr-ease), border-color 160ms var(--shr-ease), color 160ms var(--shr-ease), transform 140ms var(--shr-ease);
}
.shr__icon svg { display: block; width: 24px; height: 24px; }
.shr__name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.shr__target--primary .shr__icon {
  background: var(--shr-maroon);
  border-color: var(--shr-maroon);
  color: var(--shr-paper);
}
.shr__target--primary .shr__name { font-weight: 700; }
.shr__target:active .shr__icon { transform: scale(0.94); }
.shr__target[aria-busy="true"] .shr__icon { opacity: 0.6; }
.shr__close:focus-visible,
.shr__target:focus-visible { outline: 3px solid var(--shr-maroon); outline-offset: 2px; }
@media (hover: hover) {
  .shr__close:hover { background: var(--shr-line); }
  .shr__opt:hover input:not(:checked):not(:disabled) + span::before { background: rgba(20, 20, 20, 0.06); }
  .shr__target:hover .shr__icon { background: var(--shr-ink); border-color: var(--shr-ink); color: var(--shr-paper); }
  .shr__target--primary:hover .shr__icon { background: var(--shr-maroon-2); border-color: var(--shr-maroon-2); }
}

.shr__note {
  max-width: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--shr-muted);
}

/* Words for screen readers only. The dialog's message line shows itself
   only on a page without the site's toast. */
.shr__sr,
.shr__said {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.shr__said.is-shown {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: 13px;
  font-weight: 600;
}
/* The helpers for copying the link and saving the picture. */
.shr__offscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
}

/* ---------- Laptops: a centred dialog, the preview beside the choices ---------- */

@media (min-width: 720px) and (min-height: 560px) {
  .shr {
    --shr-h: clamp(300px, calc(100vh - 230px), 480px);
    align-items: center;
    padding: 24px;
  }
  .shr__panel {
    width: min(780px, 100%);
    max-width: none;
    max-height: 100%;
    padding: 0 28px 28px;
    border-radius: 24px;
    box-shadow: 0 30px 80px -20px rgba(20, 20, 20, 0.45);
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.98);
    transition: transform 280ms var(--shr-ease), opacity 200ms var(--shr-ease);
  }
  .shr.is-open .shr__panel { opacity: 1; transform: none; }
  .shr.is-closing .shr__panel { transition-duration: 180ms; }
  .shr__grab { display: none; }
  .shr__head { padding-top: 22px; touch-action: auto; }
  .shr__title { font-size: 20px; }
  .shr__body {
    display: grid;
    grid-template-columns: calc(var(--shr-h) * 0.625) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding-top: 18px;
  }
  .shr__frame { border-radius: 18px; }
  .shr__controls { gap: 18px; }
}

/* ---------- Less motion: a quick fade, nothing slides ---------- */

@media (prefers-reduced-motion: reduce) {
  .shr__panel,
  .shr.is-open .shr__panel {
    transform: none;
    transition: opacity 160ms linear;
  }
  .shr__panel { opacity: 0; }
  .shr.is-open .shr__panel { opacity: 1; }
  .shr__img { animation: none; }
  .shr__frame,
  .shr__icon,
  .shr__opt span,
  .shr__opt span::before { transition: none; }
  .shr__target:active .shr__icon { transform: none; }
}

/* ---------- Outside the sheet ---------- */

/* The page stays still behind the sheet, keeping its scrollbar's space. */
html.shr-open { overflow: hidden; }
html.shr-gutter { scrollbar-gutter: stable; }

/* While a share message shows, the site's toast (js/site.js) sits at the
   top, above the sheet and where the phone's own share sheet can't cover it. */
html.shr-toast .toast {
  top: calc(12px + env(safe-area-inset-top, 0px));
  bottom: auto;
  z-index: 100;
  transform: translate(-50%, -12px);
  pointer-events: none;
}
html.shr-toast .toast.is-shown { transform: translate(-50%, 0); }