/* Share pick dialog: preview on the left, reasoning picker on the right. */
#shareDialog { width:min(62rem,calc(100% - 1.75rem)); }
#shareMeta { margin:0 0 0.875rem; }
.share-layout { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:1.25rem; align-items:start; }
.share-preview { position:sticky; top:0; display:grid; place-items:center; padding:0.75rem; background:#15101b; border:1px solid var(--line); border-radius:var(--r-control); }
#shareCanvas { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; border-radius:var(--r-data); box-shadow:0 0.5rem 1.5rem #0009; }
.share-controls { display:grid; gap:0.875rem; min-width:0; }
.share-record-scope { display:grid; gap:0.75rem; }
.share-record-scope[hidden], #shareDialog [hidden] { display:none; }
.share-record-scope label { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.share-record-scope select { max-width:100%; }
.share-record-scope p { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.6; }
#shareRecordSummary { white-space:pre-line; color:var(--ink); }
.share-owner label { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.75rem; overflow-wrap:anywhere; }
.share-owner input { flex:none; accent-color:var(--cyan); }
.share-owner p { margin:0.5rem 0 0; color:var(--muted); font-size:0.6875rem; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.share-controls fieldset { margin:0; padding:0; border:0; min-width:0; }
.share-controls legend { display:flex; align-items:baseline; gap:0.5rem; padding:0; margin-bottom:0.5rem; color:var(--cyan); font-size:0.5625rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.share-controls legend small { color:var(--muted); font-weight:600; letter-spacing:0; text-transform:none; }
.share-formats { display:flex; flex-wrap:wrap; gap:0.375rem; }
.share-formats legend { width:100%; }
.share-formats label { display:inline-flex; align-items:center; gap:0.375rem; padding:0.375rem 0.625rem; border:1px solid #4b3c62; border-radius:var(--r-data); font-size:0.6875rem; cursor:pointer; }
.share-formats label:has(input:checked) { border-color:var(--cyan); background:#2b2139; color:var(--ink); }
.share-formats input { accent-color:var(--cyan); margin:0; width:0.875rem; height:0.875rem; flex:none; }
.share-formats label { white-space:nowrap; }
.share-fit { margin:0.5rem 0 0; padding:0.5rem 0.625rem; background:#282230; color:#cbadff; font-size:0.625rem; }
.share-stats-note { margin:0 0 0.5rem; padding:0.5rem 0.625rem; background:#282230; color:#cbadff; font-size:0.625rem; }
#shareReasons { display:grid; gap:0.75rem; max-height:22rem; overflow:auto; padding-right:0.25rem; }
.share-reason-group h4 { margin:0 0 0.3125rem; color:var(--muted); font-size:0.5625rem; letter-spacing:1px; text-transform:uppercase; }
.share-order h4 { margin:0 0 0.3125rem; color:var(--muted); font-size:0.5625rem; letter-spacing:1px; text-transform:uppercase; }
.share-order ol { display:grid; gap:0.25rem; margin:0; padding:0; list-style:none; }
.share-order li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0.5rem; padding:0.25rem 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); font-size:0.6875rem; }
.share-order li > span { min-width:0; overflow-wrap:anywhere; }
.share-order-actions { display:flex; gap:0.25rem; }
.share-order-actions .pd-button { min-width:2.75rem; min-height:2.75rem; padding:0.25rem; }
.share-order-actions .pd-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.share-reason { display:grid; grid-template-columns:auto 3.75rem minmax(0,1fr); align-items:center; gap:0.5rem; padding:0.4375rem 0.5rem; margin-bottom:0.25rem; border:1px solid #3e3051; border-radius:var(--r-control); background:#1f1828; cursor:pointer; }
.share-reason:hover { border-color:#504069; }
.share-reason.is-on { border-color:var(--cyan); background:#2b2139; }
.share-reason.is-disabled { opacity:.5; cursor:not-allowed; }
.share-reason input { accent-color:var(--cyan); margin:0; }
.share-reason b { color:var(--cyan); font-size:0.8125rem; font-variant-numeric:tabular-nums; text-align:center; overflow-wrap:anywhere; }
.share-reason span { display:grid; gap:0.125rem; min-width:0; }
.share-reason strong { font-size:0.6875rem; }
.share-reason small { color:#b9abd2; font-size:0.5625rem; line-height:1.5; }
.share-note-label { display:flex; justify-content:space-between; gap:0.5rem; color:var(--cyan); font-size:0.5625rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.share-note-label small { color:var(--muted); font-weight:600; letter-spacing:0; text-transform:none; }
#shareNote { width:100%; box-sizing:border-box; resize:vertical; padding:0.5rem 0.625rem; background:#1f1828; color:var(--ink); border:1px solid #4b3c62; border-radius:var(--r-control); font:inherit; font-size:0.75rem; line-height:1.5; }
#shareNote:focus { outline:2px solid var(--cyan); outline-offset:1px; }
.share-actions { display:flex; flex-wrap:wrap; gap:0.5rem; }
#shareStatus { min-height:1em; margin:0; color:var(--green); font-size:0.625rem; }
/* Share is a call to action: an accent outline button with an icon. */
.bet-share { display:inline-flex; align-items:center; justify-content:center; gap:0.4375rem; padding:0.4375rem 0.875rem; border:1px solid var(--accent); border-radius:var(--r-control); background:var(--accent-soft); color:var(--accent); font:inherit; font-size:0.75rem; font-weight:800; letter-spacing:0.02em; text-decoration:none; cursor:pointer; }
.bet-share:hover, .bet-share:focus-visible { background:var(--accent); color:var(--accent-ink); }
.bet-share:disabled { opacity:0.4; cursor:default; }
/* Reasons past the suggested groups fold under "More reasons" (open on desktop). */
.share-more { display:grid; gap:0.75rem; }
.share-more > summary { display:flex; align-items:center; gap:0.375rem; min-height:2.75rem; padding:0 0.625rem; border:1px dashed #4b3c62; border-radius:var(--r-control); color:var(--ink); font-size:0.75rem; font-weight:800; cursor:pointer; }
.share-more > summary small { color:var(--muted); font-weight:600; }
.share-more > summary:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
@media(max-width:48em) {
  /* The pinned edges bleed to the dialog's own padding (players.css: 1.5rem, 1.125rem on phones). */
  #shareDialog { --share-pad:1.5rem; }
  /* --share-bar is the pinned bar's fixed height: two rows of buttons by default, one row when it fits (below). */
  .share-controls { --share-bar:calc(7.125rem + 1px + env(safe-area-inset-bottom, 0px)); }
  .share-layout { grid-template-columns:1fr; container:share-layout / inline-size; }
  /* The status line sits just above the pinned bar (fixed height --share-bar) and stays pinned with it, so
     "Image downloaded." and the copy errors are never hidden under the buttons. */
  #shareStatus { position:sticky; bottom:calc(var(--share-bar) - var(--share-pad)); z-index:2; order:1; margin:0 calc(-1 * var(--share-pad)) -0.875rem; padding:0 var(--share-pad); background:var(--surface); line-height:1.6; }
  #shareStatus:not(:empty) { padding-block:0.375rem; }
  /* Phones: a small preview stays pinned at the top while you tick reasons, and the
     actions stay pinned at the bottom, so neither sits 2,000px down the sheet. */
  .share-preview { position:sticky; top:calc(-1 * var(--share-pad)); z-index:2; padding:0.5rem; margin:0 -0.25rem; box-shadow:0 0.5rem 0.75rem -0.5rem #000c; }
  #shareCanvas { max-height:min(26vh, 14rem); width:auto; max-width:100%; }
  #shareReasons { max-height:none; }
  /* UI-304: four buttons in one row left "Download PNG" spilling out of its button, so the bar is a
     2x2 grid (labels fit on one line at 320). Three buttons (no native Share) sit in one row when the
     sheet is wide enough, else Download spans the first row. */
  .share-actions { position:sticky; bottom:calc(-1 * var(--share-pad)); z-index:2; order:2; margin:0 calc(-1 * var(--share-pad)) calc(-1 * var(--share-pad)); padding:0.625rem var(--share-pad) calc(0.625rem + env(safe-area-inset-bottom, 0px)); box-sizing:border-box; height:var(--share-bar);
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(0, 1fr); background:var(--surface); border-top:1px solid var(--line); gap:0.375rem; }
  .share-actions:has(> #shareNative[hidden]) > #shareDownload { grid-column:1 / -1; }
  #shareDialog .share-actions .pd-button { min-width:0; min-height:2.75rem; padding:0.25rem 0.5rem; font-size:0.75rem; line-height:1.2; white-space:normal; overflow-wrap:normal; text-align:center; }
  @container share-layout (min-width: 17rem) {
    .share-controls:has(#shareNative[hidden]) { --share-bar:calc(4.5rem + 1px + env(safe-area-inset-bottom, 0px)); }
    .share-actions:has(> #shareNative[hidden]) { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .share-actions:has(> #shareNative[hidden]) > #shareDownload { grid-column:auto; }
  }
  /* Large text (200%) on a phone: the sheet is too narrow for a pinned bar, so the actions and the
     status line scroll with the form and the buttons wrap to as many rows as they need. */
  @container share-layout (max-width: 11rem) {
    #shareStatus, #shareStatus:not(:empty) { position:static; order:3; margin:0; padding:0; background:none; }
    .share-actions { position:static; height:auto; margin:0; padding:0; border-top:0; background:none; display:flex; flex-wrap:wrap; }
    #shareDialog .share-actions .pd-button { flex:1 1 auto; }
  }
}
@media(max-width:37.125em) { #shareDialog { --share-pad:1.125rem; } }
#shareCanvas.can-drag { cursor:grab; }
/* Set while 2+ reasons are chosen so a touch drag reorders instead of scrolling; the sheet still scrolls outside the card. */
#shareCanvas.can-reorder { touch-action:none; }
#shareCanvas.is-dragging { cursor:grabbing; }

/* Proposed site (PS-17): the preview lifts off the sheet; Copy morphs to "Copied". */
.share-preview { background:var(--bg); border:2px solid var(--line); border-radius:var(--r-card); }
#shareCanvas { border-radius:var(--r-card); border:2px solid var(--edge); box-shadow:none; rotate:calc(-1deg * var(--move));
  animation:share-lift var(--dur-base) var(--spring-soft) both; }
@keyframes share-lift { from { rotate:0deg; translate:0 calc(8px * var(--move)); opacity:0.6; } }
#shareCopy.is-copied, #shareCaption.is-copied { background:var(--good); color:var(--accent-ink); border-color:var(--edge); }
#shareCopy.is-copied::before, #shareCaption.is-copied::before { content:"\2713\00a0"; }
@media (prefers-reduced-motion: reduce) { #shareCanvas { animation:none; rotate:0deg; } }