/* Sharing is a quiet secondary action in both worlds. */
.bar-experience #opening-dialog .share-trigger {
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:max-content;max-width:100%;min-height:44px;margin:4px auto 0;padding:8px 14px;
  border:0;border-radius:6px;background:transparent;color:#eee8df;
  font:500 12px/1.3 Arial,Helvetica,sans-serif;box-shadow:none;
}
.share-trigger svg { width:15px;height:15px;fill:currentColor; }
.bar-experience #opening-dialog .share-trigger:hover { background:#ffffff12; }
.result-secondary { grid-column:1 / -1;display:flex;justify-content:center; }
.bar-experience #opening-dialog .result-secondary { margin:0; }
.bar-experience #opening-dialog .result-actions { gap:4px 8px; }
@media(max-width:600px) {
  .bar-experience #opening-dialog #opening-step { display:none; }
  .bar-experience #opening-dialog .opening-top { justify-content:flex-start; }
  .bar-experience #opening-dialog #pack-rotate-hint { display:none; }
}
.bar-experience #opening-dialog .pack-view-controls { gap:0; }
.bar-experience #opening-dialog .pack-view-controls button {
  min-width:64px;min-height:44px;border-radius:0;background:#151317d9;
  border:1px solid #ffffff40;font:12px Arial,Helvetica,sans-serif;
}
.bar-experience #opening-dialog .pack-view-controls button:first-of-type { border-radius:6px 0 0 6px; }
.bar-experience #opening-dialog .pack-view-controls button:last-of-type { border-radius:0 6px 6px 0;border-left:0; }

/* Available height is shared by the preview and the active sharing method. */
.bar-experience #share-dialog {
  width:560px;max-width:calc(100vw - 24px);
  height:min(640px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:12px;
  padding:24px;border:1px solid #c9c0c044;border-radius:14px;
  background:#121018;color:#eee9df;text-align:center;overflow:clip;
  box-shadow:0 24px 90px #000a;color-scheme:dark;
}
.bar-experience #share-dialog[open] { display:grid; }
#share-dialog::backdrop { background:#08060ccc;backdrop-filter:blur(10px); }
.share-heading { padding:0 30px; }
.share-heading .eyebrow { display:block;margin:0 0 8px;color:#bdb4c2;font-size:9px;letter-spacing:1px; }
.bar-experience #share-dialog h2 { margin:0;font:700 28px/1.1 Arial,Helvetica,sans-serif;letter-spacing:-1px;color:#eee9df;text-shadow:none; }
.bar-experience #share-dialog h2 em { font:italic 400 1em Georgia,serif;color:inherit; }
.bar-experience #share-dialog p { margin:0;color:#c8c0cd;font:12px/1.4 Arial,Helvetica,sans-serif; }
#share-instructions { max-width:380px;justify-self:center; }
.share-preview {
  position:relative;display:grid;place-items:center;min-height:0;
  width:100%;overflow:hidden;container-type:size;
}
.share-preview img { display:block;width:100%;height:100%;min-height:0;object-fit:contain;border-radius:6px; }
#share-loading { align-self:center; }
#share-dialog .share-caption { color:#eee9df;max-width:440px;justify-self:center; }
.share-controls { min-width:0; }
.share-actions { display:grid;grid-template-columns:1fr 1fr;gap:4px 8px; }
.bar-experience #share-dialog .button {
  display:flex;align-items:center;justify-content:space-between;
  min-height:48px;padding:12px 16px;gap:8px;border-radius:6px;
  font:600 13px/1.2 Arial,Helvetica,sans-serif;box-shadow:none;text-shadow:none;
}
.bar-experience #share-dialog .primary { background:#eee9df;color:#1d1922;border:1px solid #eee9df; }
.bar-experience #share-dialog .outline { background:transparent;color:#eee9df;border:1px solid #eee9df55; }
#share-dialog .button:hover { filter:brightness(1.08); }
#share-dialog .button:disabled { opacity:.45; }
#share-dialog .button > span { font:inherit;letter-spacing:inherit; }
.bar-experience #share-dialog :is(button,a,summary):focus-visible { outline:2px solid #eee9df;outline-offset:3px; }
.bar-experience #share-dialog .close-dialog { width:44px;height:44px;top:6px;right:6px;background:none;color:#eee9df;border:0;border-radius:6px;box-shadow:none; }
.bar-experience #share-dialog .share-native-primary { width:100%;justify-content:center;gap:14px; }
#share-web-options summary { display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:8px;font:12px/1.3 Arial,Helvetica,sans-serif;cursor:pointer;list-style:none; }
#share-web-options summary::-webkit-details-marker { display:none; }
#share-web-options[open] summary .action-icon { transform:rotate(180deg); }
#share-dialog:has(#share-web-options[open]) #share-native { display:none; }
#share-dialog.can-copy #share-save { grid-column:1 / -1;grid-row:2; }
.share-save-link { display:flex;justify-content:center;align-items:center;min-height:44px;font:12px/1.3 Arial,Helvetica,sans-serif;text-decoration:underline;text-underline-offset:4px; }
.bar-experience #share-dialog #share-paste-hint { margin-top:4px;font-size:11px; }
.bar-experience #share-dialog #share-status { min-height:32px;display:flex;justify-content:center;align-items:center;margin-top:4px;font-size:11px; }
#share-retry { width:100%;justify-content:center; }
[data-edition="og"] .bar-experience #share-dialog { background:#172019;border-color:#f3e6c650;border-radius:4px; }
[data-edition="og"] .bar-experience #share-dialog .button { border-radius:3px; }
@media(max-width:600px) {
  .bar-experience #share-dialog { width:calc(100vw - 12px);max-width:460px;padding:18px 14px 12px;gap:8px; }
  .share-heading { padding-inline:24px; }
  .share-heading .eyebrow { font-size:8px; }
  .bar-experience #share-dialog h2 { font-size:25px; }
  .bar-experience #share-dialog .share-caption { font-size:11px; }
  .bar-experience #share-dialog .button { padding:12px;font-size:12px; }
}
@media(min-width:601px) and (max-height:580px) {
  .bar-experience #share-dialog {
    width:min(900px,calc(100vw - 24px));padding:16px;gap:8px 20px;
    grid-template-columns:minmax(0,1fr) minmax(300px,1fr);
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }
  #share-dialog .share-preview { grid-column:1;grid-row:1 / -1; }
  #share-dialog :is(.share-heading,#share-instructions,.share-caption,.share-controls) { grid-column:2; }
  #share-dialog .share-heading { grid-row:1; }
  #share-dialog #share-instructions { grid-row:2;font-size:11px; }
  #share-dialog .share-caption { grid-row:3;align-self:center;font-size:11px; }
  #share-dialog .share-controls { grid-row:4; }
  #share-dialog .share-heading .eyebrow { display:none; }
  .bar-experience #share-dialog h2 { font-size:24px; }
}