/* ==========================================================================
   pages/sharecard.css: the share image page (/p/:id/card)
   Owner: the share image lane. Every rule is scoped under .pg-sharecard. Tokens
   from public/ds/tokens.css; buttons, seg, notice, empty and skeleton are the
   shared components.
   ========================================================================== */

.pg-sharecard .sc { padding-top: var(--s-5); padding-bottom: var(--s-10); }
.pg-sharecard .sc-back { gap: 6px; }
.pg-sharecard .sc-back .i { width: 16px; height: 16px; }
.pg-sharecard .sc-top { margin-top: var(--s-5); }
.pg-sharecard .sc-top .page-title { margin-top: var(--s-2); }
.pg-sharecard .sc-top .page-sub { max-width: 520px; }

.pg-sharecard .sc-seg { margin-top: var(--s-6); }

/* ---- the preview ---------------------------------------------------------- */
/* The image is the real one from the Worker. aspect-ratio holds its space while it
   draws, so the buttons below never jump. */
.pg-sharecard .sc-frame {
  position: relative; margin: var(--s-4) 0 0; width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 24px 60px -30px rgba(var(--mode-rgb), .55), var(--shadow-1);
}
.pg-sharecard .sc-frame.is-story { max-width: 360px; margin-left: auto; margin-right: auto; }
.pg-sharecard .sc-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity var(--t-med, .25s) ease;
}
.pg-sharecard .sc-frame.is-in img { opacity: 1; }
.pg-sharecard .sc-skel { position: absolute; inset: 0; border-radius: 0; margin: 0; }
.pg-sharecard .sc-frame.is-in .sc-skel,
.pg-sharecard .sc-frame.is-failed .sc-skel { display: none; }
.pg-sharecard .sc-frame.is-failed { display: none; }
.pg-sharecard .sc-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  margin-top: var(--s-2); font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted);
}
.pg-sharecard .sc-cap span:first-child {
  font: 500 var(--fs-xs)/1.35 var(--font-label); letter-spacing: var(--track-micro, .08em);
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.pg-sharecard .sc-cap span:last-child { text-align: right; }
.pg-sharecard .sc-body.is-story .sc-cap { max-width: 360px; margin-left: auto; margin-right: auto; }
.pg-sharecard #sc-fail:not(:empty) { margin-top: var(--s-4); }

/* ---- privacy note, actions ----------------------------------------------- */
.pg-sharecard .sc-note { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.pg-sharecard .sc-note strong { color: var(--text); }
.pg-sharecard .sc-note .notice-icon { width: 40px; height: 40px; flex-basis: 40px; }
.pg-sharecard .sc-note .notice-icon .i { width: 22px; height: 22px; }

.pg-sharecard .sc-go { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.pg-sharecard .sc-main { width: 100%; }
.pg-sharecard .sc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.pg-sharecard .sc-row .btn { width: 100%; justify-content: center; }
.pg-sharecard .sc-fine { margin-top: var(--s-5); max-width: 520px; }

/* Wide screens: the link card gets the full column; the story sits beside the
   actions instead of pushing them a phone's height down the page. */
@media (min-width: 900px) {
  .pg-sharecard .sc { max-width: calc(820px + 2 * var(--gutter)); }
  .pg-sharecard .sc-body.is-story { display: grid; grid-template-columns: 340px 1fr; gap: var(--s-7); align-items: start; }
  .pg-sharecard .sc-body.is-story .sc-frame { max-width: none; }
  .pg-sharecard .sc-body.is-story .sc-side > :first-child { margin-top: var(--s-4); }
}