/* Share dialog content styles. The shell (backdrop, panel, head, body
   rhythm, foot, pill buttons, the fullscreen mobile variant dlg--full)
   comes from the shared dialog base (dlg-* in dialog.css); this file
   styles only what is specific to the share dialog: the tab bar, the
   social panel (og preview + network circles), and the embed panel
   (theme tiles, live preview, option row, snippet codebox). */

#share-dialog { --dlg-w: 640px; }

/* Taller than the base cap (min(85dvh, 720px)): at 720px the desktop fold
   landed right at the embed preview's bottom edge, so nothing hinted at
   the options + snippet below it. DESKTOP-ONLY on purpose: this selector
   (id + class) outweighs `.dlg--full .dlg-panel`, so an unscoped
   max-height would clamp the mobile fullscreen takeover, whose variant
   relies on `max-height: none`. */
@media (min-width: 640px) {
  #share-dialog .dlg-panel { max-height: min(88dvh, 860px); }
}

/* Share link field + its copy button (social panel, above the og card).
   The dialog's ONE copy control: a labeled pill, because a bare glyph
   reads ambiguously. Neutral chrome on purpose — an accent fill here
   would compete with the primary "done" button in the foot. 10px radius
   matches .shd-og / .ed-codebox; the 9999px pill radius belongs to the
   brand-circle row below the card. */
.shd-url {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.shd-url-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.5rem;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--vc-7, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--vc-15, rgba(255, 255, 255, 0.08));
  color: var(--vtext, var(--color-gray-200));
  font: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease;
}
.shd-url-input:focus {
  outline: none;
  border-color: var(--vc-40, rgba(255, 255, 255, 0.18));
}
.shd-url-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 7px;
  height: 2.5rem;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--vc-7, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--vc-15, rgba(255, 255, 255, 0.08));
  color: var(--vtext, var(--color-gray-300));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.shd-url-copy:hover {
  background: var(--vc-12, rgba(255, 255, 255, 0.10));
  border-color: var(--vc-40, rgba(255, 255, 255, 0.18));
  color: var(--vt, #fff);
}
/* The icon swaps to a check on copy: branch at the CONSUMING property
   (mask-image), a self-referential --icon var is a WebKit cycle
   (test/cssCustomPropertyCycles.test.js). */
.shd-url-copy.is-copied { color: var(--vc, var(--color-teal-500)); }
.shd-url-copy.is-copied .shd-copy-icon {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNC41IDEyLjc1bDYgNiA5LTEzLjUiLz48L3N2Zz4K);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNC41IDEyLjc1bDYgNiA5LTEzLjUiLz48L3N2Zz4K);
}
.shd-copy-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Im05NzIgNTUyYzAtMzUuMDA4LTEzLjkwNi02OC41ODItMzguNjYtOTMuMzQtMjQuNzU4LTI0Ljc1NC01OC4zMzItMzguNjYtOTMuMzQtMzguNjZoLTI4OGMtMzUuMDA4IDAtNjguNTgyIDEzLjkwNi05My4zNCAzOC42Ni0yNC43NTQgMjQuNzU4LTM4LjY2IDU4LjMzMi0zOC42NiA5My4zNHYyODhjMCAzNS4wMDggMTMuOTA2IDY4LjU4MiAzOC42NiA5My4zNCAyNC43NTggMjQuNzU0IDU4LjMzMiAzOC42NiA5My4zNCAzOC42NmgyODhjMzUuMDA4IDAgNjguNTgyLTEzLjkwNiA5My4zNC0zOC42NiAyNC43NTQtMjQuNzU4IDM4LjY2LTU4LjMzMiAzOC42Ni05My4zNHptLTcyIDI4OGMwIDE1LjkxNC02LjMyMDMgMzEuMTc2LTE3LjU3NCA0Mi40MjYtMTEuMjUgMTEuMjU0LTI2LjUxMiAxNy41NzQtNDIuNDI2IDE3LjU3NGgtMjg4Yy0xNS45MTQgMC0zMS4xNzYtNi4zMjAzLTQyLjQyNi0xNy41NzQtMTEuMjU0LTExLjI1LTE3LjU3NC0yNi41MTItMTcuNTc0LTQyLjQyNnYtMjg4YzAtMTUuOTE0IDYuMzIwMy0zMS4xNzYgMTcuNTc0LTQyLjQyNiAxMS4yNS0xMS4yNTQgMjYuNTEyLTE3LjU3NCA0Mi40MjYtMTcuNTc0aDI4OGMxNS45MTQgMCAzMS4xNzYgNi4zMjAzIDQyLjQyNiAxNy41NzQgMTEuMjU0IDExLjI1IDE3LjU3NCAyNi41MTIgMTcuNTc0IDQyLjQyNnoiLz4KICA8cGF0aCBkPSJtNDkyIDI2NGMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im02ODQgMjY0YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+CiAgPHBhdGggZD0ibTMwMCAyNjRjMCAxOS44ODMtMTYuMTE3IDM2LTM2IDM2cy0zNi0xNi4xMTctMzYtMzYgMTYuMTE3LTM2IDM2LTM2IDM2IDE2LjExNyAzNiAzNnoiLz4KICA8cGF0aCBkPSJtMzAwIDQ1NmMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im0zMDAgNjQ4YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+Cjwvc3ZnPgo=) center / contain no-repeat;
  mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Im05NzIgNTUyYzAtMzUuMDA4LTEzLjkwNi02OC41ODItMzguNjYtOTMuMzQtMjQuNzU4LTI0Ljc1NC01OC4zMzItMzguNjYtOTMuMzQtMzguNjZoLTI4OGMtMzUuMDA4IDAtNjguNTgyIDEzLjkwNi05My4zNCAzOC42Ni0yNC43NTQgMjQuNzU4LTM4LjY2IDU4LjMzMi0zOC42NiA5My4zNHYyODhjMCAzNS4wMDggMTMuOTA2IDY4LjU4MiAzOC42NiA5My4zNCAyNC43NTggMjQuNzU0IDU4LjMzMiAzOC42NiA5My4zNCAzOC42NmgyODhjMzUuMDA4IDAgNjguNTgyLTEzLjkwNiA5My4zNC0zOC42NiAyNC43NTQtMjQuNzU4IDM4LjY2LTU4LjMzMiAzOC42Ni05My4zNHptLTcyIDI4OGMwIDE1LjkxNC02LjMyMDMgMzEuMTc2LTE3LjU3NCA0Mi40MjYtMTEuMjUgMTEuMjU0LTI2LjUxMiAxNy41NzQtNDIuNDI2IDE3LjU3NGgtMjg4Yy0xNS45MTQgMC0zMS4xNzYtNi4zMjAzLTQyLjQyNi0xNy41NzQtMTEuMjU0LTExLjI1LTE3LjU3NC0yNi41MTItMTcuNTc0LTQyLjQyNnYtMjg4YzAtMTUuOTE0IDYuMzIwMy0zMS4xNzYgMTcuNTc0LTQyLjQyNiAxMS4yNS0xMS4yNTQgMjYuNTEyLTE3LjU3NCA0Mi40MjYtMTcuNTc0aDI4OGMxNS45MTQgMCAzMS4xNzYgNi4zMjAzIDQyLjQyNiAxNy41NzQgMTEuMjU0IDExLjI1IDE3LjU3NCAyNi41MTIgMTcuNTc0IDQyLjQyNnoiLz4KICA8cGF0aCBkPSJtNDkyIDI2NGMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im02ODQgMjY0YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+CiAgPHBhdGggZD0ibTMwMCAyNjRjMCAxOS44ODMtMTYuMTE3IDM2LTM2IDM2cy0zNi0xNi4xMTctMzYtMzYgMTYuMTE3LTM2IDM2LTM2IDM2IDE2LjExNyAzNiAzNnoiLz4KICA8cGF0aCBkPSJtMzAwIDQ1NmMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im0zMDAgNjQ4YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+Cjwvc3ZnPgo=) center / contain no-repeat;
}

/* Tab bar: a segmented pill row (the collect-priv-seg idiom on the dlg
   surface), pinned between the head and the scrolling body (it is a
   .dlg-form child, not .dlg-body content). The 20px side margin matches
   the base's head/body inset. */
.shd-tabs {
  display: flex;
  flex-shrink: 0;
  margin: 0 20px 12px;
  padding: 3px;
  background: var(--vb, var(--color-gray-900));
  border: 1px solid var(--vc-15, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
}
.shd-tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--vc-53, var(--color-gray-400));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.shd-tab:hover { color: var(--vtext, var(--color-gray-200)); }
.shd-tab.is-active {
  /* Same accent fallback as .dlg-btn--primary: unthemed, a near-white pill
     beside the teal "done" button read as two different design systems. */
  background: var(--vc, var(--color-teal-300));
  color: var(--vc-text, #0a0b0e);
}
.shd-tab.is-locked { opacity: 0.55; cursor: not-allowed; }
.shd-tab.is-locked:hover { color: var(--vc-53, var(--color-gray-400)); }
/* Masked lock glyph; --icon is set inline by the partial (the popup-menu
   icon idiom). */
.shd-tab-lock {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Both tabpanels reproduce the .dlg-body 16px rhythm one level down; the
   min-width guard is what keeps the snippet <pre> from blowing the grid
   column out (the exact failure the base documents for .dlg-body). */
.shd-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}
.shd-panel > * { min-width: 0; }

/* Social panel: the og share-card preview. Fixed 1200x630 card ratio so
   the skeleton occupies the exact final footprint; shimmer sweeps until
   the img loads (first og renders can take a few seconds), then the card
   fades in. is-error just stops the shimmer and leaves the neutral box. */
.shd-og {
  position: relative;
  aspect-ratio: 1200 / 630;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--v-card-border, rgba(255, 255, 255, 0.06));
  background: var(--vc-7, rgba(255, 255, 255, 0.04));
}
.shd-og::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 30%, var(--vc-10, rgba(255, 255, 255, 0.07)) 50%, transparent 70%);
  animation: shd-shimmer 1.4s ease-in-out infinite;
}
@keyframes shd-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.shd-og.is-loaded::before,
.shd-og.is-error::before { content: none; }
.shd-og-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.shd-og.is-loaded .shd-og-img { opacity: 1; }

/* Network circles: the profile-link--icon recipe scaled up for a primary
   action row. Brand SVGs ride currentColor (neutral on the dlg surface;
   brand hexes like tiktok's #000 would vanish on the dark panel). */
.shd-circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 2px;
}
.shd-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  background: var(--vc-7, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--vc-15, rgba(255, 255, 255, 0.08));
  color: var(--vtext, var(--color-gray-300));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.shd-circle:hover {
  background: var(--vc-12, rgba(255, 255, 255, 0.10));
  border-color: var(--vc-40, rgba(255, 255, 255, 0.18));
  color: var(--vt, #fff);
}
.shd-circle svg,
.shd-circle .brand-glyph {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
/* The last circle: the device's own share sheet, the house share glyph. */
.shd-device-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxOTYgMTk2IDgwOCA4MDgiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0zMzIuNzYgNzAxLjg4Yy0zOS4xMjEgMTguMjM4LTkyLjc2MiA0My4zMi05Mi43NjIgOTkuODRzNTMuNjQxIDgxLjQ4IDkyLjc2MiA5OS44NGMyNi42NDEgMTIuNDggNDIuMjM4IDIwLjY0MSA0OC42MDIgMjguNTU5bDIuNTE5NSAzLjEyMTF2My45NjA5YzAuNzE4NzUgMTkuNTU5IDE2LjU1OSAzNC44MDEgMzYuMTIxIDM0LjgwMSAxOS41NTkgMCAzNi0xNi4xOTkgMzYtMzYgMC01Ni41Mi01My42NDEtODEuNDgtOTIuNzYyLTk5Ljg0LTE5LjU1OS05LjEyMTEtMzcuODAxLTE4LTQ2LjA3OC0yNS45MjJsLTkuMTIxMS04LjY0MDYgOS4xMjExLTguNzYxN2M4LjM5ODQtNy45MjE5IDI2LjUyLTE2LjgwMSA0Ni4wNzgtMjUuOTIyIDM5LjEyMS0xOC4yMzggOTIuNzYyLTQzLjMyIDkyLjc2Mi05OS44NHMtNTMuNjQxLTgxLjQ4LTkyLjc2Mi05OS44NGMtMTkuNTU5LTkuMTIxMS0zNy44MDEtMTgtNDYuMDc4LTI1LjkyMmwtOS4xMjExLTguNjQwNiA5LjEyMTEtOC43NjE3YzguMjgxMi03LjkyMTkgMjYuMzk4LTE2LjY4IDQ1Ljg0LTI1LjgwMSAzOS40OC0xOC40OCA5My4xMjEtNDMuNDQxIDkzLjEyMS05OS45NjEgMC01Ni41Mi01My42NDEtODEuNjAyLTkyLjc2Mi05OS44NC0yNi42NDEtMTIuMzU5LTQyLjIzOC0yMC42NDEtNDguNjAyLTI4LjU1OWwtMi41MTk1LTMuMTIxMXYtMy45NjA5Yy0wLjcxODc1LTE5LjU1OS0xNi41NTktMzQuOTIyLTM2LjEyMS0zNC45MjItMTkuNTU5IDAtMzYgMTYuMTk5LTM2IDM2IDAgNTYuNTIgNTMuNjQxIDgxLjYwMiA5Mi43NjIgOTkuODQgMTkuNjggOS4yMzgzIDM3LjkyMiAxOCA0Ni4xOTkgMjUuOTIybDkuMTIxMSA4LjY0MDYtOS4xMjExIDguNjQwNmMtOC4yODEyIDcuOTIxOS0yNi41MiAxNi44MDEtNDYuMTk5IDI1LjkyMi0zOS4xMjEgMTguMjM4LTkyLjc2MiA0My4zMi05Mi43NjIgOTkuODRzNTMuNjQxIDgxLjQ4IDkyLjc2MiA5OS44NGMxOS41NTkgOS4xMjExIDM3LjgwMSAxOCA0Ni4wNzggMjUuOTIybDkuMTIxMSA4LjY0MDYtOS4xMjExIDguNzYxN2MtOC4zOTg0IDcuOTIxOS0yNi41MiAxNi44MDEtNDYuMDc4IDI1LjkyMnoiLz4KIDxwYXRoIGQ9Im03MjAgNTA0YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+CiA8cGF0aCBkPSJtNjExLjUyIDIyOGMxMzYuOCAwIDI0OS44NCAxMTAuODggMjUyLjQ4IDI0Ny4wOHYzLjQ4MDVsODAuMzk4IDEyMC40OGMxNC4yODEgMjEuNDggMTkuMDc4IDQ2LjkyMiAxMy4wNzggNjkuODQtOS43MTg4IDM3LjA3OC00My4xOTkgNjMtODEuMzU5IDYzaC0xMnY3MmMwIDQ2LjQ0MS0zNy41NTkgODQtODQgODRoLTg5LjUycy0xOS42OCA1Ny40OC0xOS42OCA1Ny40OGMtNC44MDA4IDE0LjAzOS0xNi45MjIgMjUuMDc4LTMxLjY4IDI2LjM5OC01Ljc2MTcgMC40ODA0Ny0xMS4zOTgtMC4zNTkzNy0xNi44MDEtMi41MTk1LTE3LjM5OC03LjA3ODEtMjYuMTYtMjguMzItMTkuNjgtNDcuNTJsMjIuMzItNjUuMjgxYzguMjgxMi0yNC4yMzggMzEuMDc4LTQwLjU1OSA1Ni43NjItNDAuNTU5aDk4LjE2YzYuNjAxNiAwIDEyLTUuMzk4NCAxMi0xMnYtMTIwYzAtMTMuMTk5IDEwLjgwMS0yNCAyNC0yNGg2MGM5LjYwMTYgMCAxNS4zNTktMTAuNjggOS45NjA5LTE4LjYwMmwtODIuMDc4LTEyM2MtOC4wMzkxLTEyLTExLjg3OS0yNi4yODEtMTItNDAuODAxLTAuNzE4NzUtOTguMDM5LTgwLjY0MS0xNzcuNDgtMTc4LjgtMTc3LjQ4aC0xLjA3ODFjLTE3LjM5OCAwLTMyLjg3OS0xMi4yMzgtMzUuNjQxLTI5LjM5OC0zLjYwMTYtMjMuMjgxIDEzLjQ0MS00Mi42MDIgMzUuMDM5LTQyLjYwMnoiLz4KPC9zdmc+Cg==) center / contain no-repeat;
  mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxOTYgMTk2IDgwOCA4MDgiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxwYXRoIGQ9Im0zMzIuNzYgNzAxLjg4Yy0zOS4xMjEgMTguMjM4LTkyLjc2MiA0My4zMi05Mi43NjIgOTkuODRzNTMuNjQxIDgxLjQ4IDkyLjc2MiA5OS44NGMyNi42NDEgMTIuNDggNDIuMjM4IDIwLjY0MSA0OC42MDIgMjguNTU5bDIuNTE5NSAzLjEyMTF2My45NjA5YzAuNzE4NzUgMTkuNTU5IDE2LjU1OSAzNC44MDEgMzYuMTIxIDM0LjgwMSAxOS41NTkgMCAzNi0xNi4xOTkgMzYtMzYgMC01Ni41Mi01My42NDEtODEuNDgtOTIuNzYyLTk5Ljg0LTE5LjU1OS05LjEyMTEtMzcuODAxLTE4LTQ2LjA3OC0yNS45MjJsLTkuMTIxMS04LjY0MDYgOS4xMjExLTguNzYxN2M4LjM5ODQtNy45MjE5IDI2LjUyLTE2LjgwMSA0Ni4wNzgtMjUuOTIyIDM5LjEyMS0xOC4yMzggOTIuNzYyLTQzLjMyIDkyLjc2Mi05OS44NHMtNTMuNjQxLTgxLjQ4LTkyLjc2Mi05OS44NGMtMTkuNTU5LTkuMTIxMS0zNy44MDEtMTgtNDYuMDc4LTI1LjkyMmwtOS4xMjExLTguNjQwNiA5LjEyMTEtOC43NjE3YzguMjgxMi03LjkyMTkgMjYuMzk4LTE2LjY4IDQ1Ljg0LTI1LjgwMSAzOS40OC0xOC40OCA5My4xMjEtNDMuNDQxIDkzLjEyMS05OS45NjEgMC01Ni41Mi01My42NDEtODEuNjAyLTkyLjc2Mi05OS44NC0yNi42NDEtMTIuMzU5LTQyLjIzOC0yMC42NDEtNDguNjAyLTI4LjU1OWwtMi41MTk1LTMuMTIxMXYtMy45NjA5Yy0wLjcxODc1LTE5LjU1OS0xNi41NTktMzQuOTIyLTM2LjEyMS0zNC45MjItMTkuNTU5IDAtMzYgMTYuMTk5LTM2IDM2IDAgNTYuNTIgNTMuNjQxIDgxLjYwMiA5Mi43NjIgOTkuODQgMTkuNjggOS4yMzgzIDM3LjkyMiAxOCA0Ni4xOTkgMjUuOTIybDkuMTIxMSA4LjY0MDYtOS4xMjExIDguNjQwNmMtOC4yODEyIDcuOTIxOS0yNi41MiAxNi44MDEtNDYuMTk5IDI1LjkyMi0zOS4xMjEgMTguMjM4LTkyLjc2MiA0My4zMi05Mi43NjIgOTkuODRzNTMuNjQxIDgxLjQ4IDkyLjc2MiA5OS44NGMxOS41NTkgOS4xMjExIDM3LjgwMSAxOCA0Ni4wNzggMjUuOTIybDkuMTIxMSA4LjY0MDYtOS4xMjExIDguNzYxN2MtOC4zOTg0IDcuOTIxOS0yNi41MiAxNi44MDEtNDYuMDc4IDI1LjkyMnoiLz4KIDxwYXRoIGQ9Im03MjAgNTA0YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+CiA8cGF0aCBkPSJtNjExLjUyIDIyOGMxMzYuOCAwIDI0OS44NCAxMTAuODggMjUyLjQ4IDI0Ny4wOHYzLjQ4MDVsODAuMzk4IDEyMC40OGMxNC4yODEgMjEuNDggMTkuMDc4IDQ2LjkyMiAxMy4wNzggNjkuODQtOS43MTg4IDM3LjA3OC00My4xOTkgNjMtODEuMzU5IDYzaC0xMnY3MmMwIDQ2LjQ0MS0zNy41NTkgODQtODQgODRoLTg5LjUycy0xOS42OCA1Ny40OC0xOS42OCA1Ny40OGMtNC44MDA4IDE0LjAzOS0xNi45MjIgMjUuMDc4LTMxLjY4IDI2LjM5OC01Ljc2MTcgMC40ODA0Ny0xMS4zOTgtMC4zNTkzNy0xNi44MDEtMi41MTk1LTE3LjM5OC03LjA3ODEtMjYuMTYtMjguMzItMTkuNjgtNDcuNTJsMjIuMzItNjUuMjgxYzguMjgxMi0yNC4yMzggMzEuMDc4LTQwLjU1OSA1Ni43NjItNDAuNTU5aDk4LjE2YzYuNjAxNiAwIDEyLTUuMzk4NCAxMi0xMnYtMTIwYzAtMTMuMTk5IDEwLjgwMS0yNCAyNC0yNGg2MGM5LjYwMTYgMCAxNS4zNTktMTAuNjggOS45NjA5LTE4LjYwMmwtODIuMDc4LTEyM2MtOC4wMzkxLTEyLTExLjg3OS0yNi4yODEtMTItNDAuODAxLTAuNzE4NzUtOTguMDM5LTgwLjY0MS0xNzcuNDgtMTc4LjgtMTc3LjQ4aC0xLjA3ODFjLTE3LjM5OCAwLTMyLjg3OS0xMi4yMzgtMzUuNjQxLTI5LjM5OC0zLjYwMTYtMjMuMjgxIDEzLjQ0MS00Mi42MDIgMzUuMDM5LTQyLjYwMnoiLz4KPC9zdmc+Cg==) center / contain no-repeat;
}
/* Phones show all seven circles (every phone browser has a share sheet):
   seven at the desktop gap overflow a 375px row by a few pixels and strand
   the last one on a line of its own, so the gap tightens instead. */
@media (max-width: 420px) {
  .shd-circles { gap: 8px; }
}
/* Theme picker tiles */
.ed-themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ed-theme-tile {
  cursor: pointer;
  background: var(--vc-7, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--vc-15, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  color: inherit;
  font-family: inherit;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ed-theme-tile:hover { border-color: var(--vc-40, rgba(255, 255, 255, 0.18)); }
.ed-theme-tile.is-active {
  border-color: var(--vc, #d4d6da);
  background: var(--vc-10, rgba(255, 255, 255, 0.04));
}

.ed-theme-tile .tile-swatch {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--v-card-border, rgba(255, 255, 255, 0.06));
  position: relative;
}
.ed-theme-tile .tile-swatch--themed {
  /* Picks up the page's vessel theme when present, else neutral */
  background: var(--vb, #1a0f1f);
  color: var(--vc, #c084fc);
}
.ed-theme-tile .tile-swatch--unthemed {
  background: #0b1220;
  color: var(--color-teal-500);
}
.ed-theme-tile .tile-swatch::after,
.ed-theme-tile .tile-swatch::before {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: currentColor;
}
.ed-theme-tile .tile-swatch::after {
  left: 8px; right: 8px; top: 12px; height: 4px;
  opacity: 0.6;
}
.ed-theme-tile .tile-swatch::before {
  left: 8px; right: 16px; top: 22px; bottom: 12px;
  opacity: 0.18;
}
.ed-theme-tile .tile-text { line-height: 1.3; min-width: 0; }
.ed-theme-tile .tile-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--vt, var(--color-gray-200));
  display: block;
}
.ed-theme-tile .tile-hint {
  font-size: 12px;
  color: var(--vc-53, #8d93a0);
  margin-top: 2px;
  display: block;
}

/* Live preview */
.ed-preview-frame {
  background: #f5f1ea;
  border-radius: 10px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--v-card-border, rgba(255, 255, 255, 0.06));
  background-image:
    linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%,
                    rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%);
  background-size: 16px 16px;
}
.ed-preview-iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  background: transparent;
  /* Symmetric fade at top and bottom so it's clear content continues
     beyond the visible window. JS (in share-dialog.js) toggles
     .is-at-top / .is-at-bottom based on the iframe's scroll position to
     drop whichever edge has no more content to reveal. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
.ed-preview-iframe.is-at-top {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 92%, transparent 100%);
}
.ed-preview-iframe.is-at-bottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%);
}
.ed-preview-iframe.is-at-top.is-at-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Options checkboxes */
.ed-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.ed-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vtext, #d4d6da);
  cursor: pointer;
  user-select: none;
}

/* Code snippet box — kept high-contrast dark for legibility regardless of
   the panel's theme. The mono stack is generic on purpose (code content,
   not UI chrome; Source Code Pro is not loaded on the pages this mounts
   on, per the dlg design rules). */
.ed-codebox {
  position: relative;
  background: #0a0b0e;
  border: 1px solid var(--v-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}
.ed-code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #d4d6da;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  padding-right: 70px; /* room for the copy button */
}

/* Copy button: the snippet copy is the dialog's primary CTA and must be
   tappable on touch, so it is fully styled here (the in-post
   .code-copy-btn nests its positioning inside @media (hover: hover) and
   renders unstyled on touch devices). Accent fill matches the primary
   "done" button; .is-copied swaps the icon mask to the checkmark for the
   house 1500ms flash. */
.ed-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.375rem;
  border: none;
  border-radius: 0.375rem;
  background: var(--vc, var(--color-gray-200));
  color: var(--vc-text, #0a0b0e);
  cursor: pointer;
  transition: filter 0.15s ease;
}
.ed-copy-btn:hover { filter: brightness(1.08); }
.ed-copy-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Im05NzIgNTUyYzAtMzUuMDA4LTEzLjkwNi02OC41ODItMzguNjYtOTMuMzQtMjQuNzU4LTI0Ljc1NC01OC4zMzItMzguNjYtOTMuMzQtMzguNjZoLTI4OGMtMzUuMDA4IDAtNjguNTgyIDEzLjkwNi05My4zNCAzOC42Ni0yNC43NTQgMjQuNzU4LTM4LjY2IDU4LjMzMi0zOC42NiA5My4zNHYyODhjMCAzNS4wMDggMTMuOTA2IDY4LjU4MiAzOC42NiA5My4zNCAyNC43NTggMjQuNzU0IDU4LjMzMiAzOC42NiA5My4zNCAzOC42NmgyODhjMzUuMDA4IDAgNjguNTgyLTEzLjkwNiA5My4zNC0zOC42NiAyNC43NTQtMjQuNzU4IDM4LjY2LTU4LjMzMiAzOC42Ni05My4zNHptLTcyIDI4OGMwIDE1LjkxNC02LjMyMDMgMzEuMTc2LTE3LjU3NCA0Mi40MjYtMTEuMjUgMTEuMjU0LTI2LjUxMiAxNy41NzQtNDIuNDI2IDE3LjU3NGgtMjg4Yy0xNS45MTQgMC0zMS4xNzYtNi4zMjAzLTQyLjQyNi0xNy41NzQtMTEuMjU0LTExLjI1LTE3LjU3NC0yNi41MTItMTcuNTc0LTQyLjQyNnYtMjg4YzAtMTUuOTE0IDYuMzIwMy0zMS4xNzYgMTcuNTc0LTQyLjQyNiAxMS4yNS0xMS4yNTQgMjYuNTEyLTE3LjU3NCA0Mi40MjYtMTcuNTc0aDI4OGMxNS45MTQgMCAzMS4xNzYgNi4zMjAzIDQyLjQyNiAxNy41NzQgMTEuMjU0IDExLjI1IDE3LjU3NCAyNi41MTIgMTcuNTc0IDQyLjQyNnoiLz4KICA8cGF0aCBkPSJtNDkyIDI2NGMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im02ODQgMjY0YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+CiAgPHBhdGggZD0ibTMwMCAyNjRjMCAxOS44ODMtMTYuMTE3IDM2LTM2IDM2cy0zNi0xNi4xMTctMzYtMzYgMTYuMTE3LTM2IDM2LTM2IDM2IDE2LjExNyAzNiAzNnoiLz4KICA8cGF0aCBkPSJtMzAwIDQ1NmMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im0zMDAgNjQ4YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+Cjwvc3ZnPgo=) center/contain no-repeat;
  mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Im05NzIgNTUyYzAtMzUuMDA4LTEzLjkwNi02OC41ODItMzguNjYtOTMuMzQtMjQuNzU4LTI0Ljc1NC01OC4zMzItMzguNjYtOTMuMzQtMzguNjZoLTI4OGMtMzUuMDA4IDAtNjguNTgyIDEzLjkwNi05My4zNCAzOC42Ni0yNC43NTQgMjQuNzU4LTM4LjY2IDU4LjMzMi0zOC42NiA5My4zNHYyODhjMCAzNS4wMDggMTMuOTA2IDY4LjU4MiAzOC42NiA5My4zNCAyNC43NTggMjQuNzU0IDU4LjMzMiAzOC42NiA5My4zNCAzOC42NmgyODhjMzUuMDA4IDAgNjguNTgyLTEzLjkwNiA5My4zNC0zOC42NiAyNC43NTQtMjQuNzU4IDM4LjY2LTU4LjMzMiAzOC42Ni05My4zNHptLTcyIDI4OGMwIDE1LjkxNC02LjMyMDMgMzEuMTc2LTE3LjU3NCA0Mi40MjYtMTEuMjUgMTEuMjU0LTI2LjUxMiAxNy41NzQtNDIuNDI2IDE3LjU3NGgtMjg4Yy0xNS45MTQgMC0zMS4xNzYtNi4zMjAzLTQyLjQyNi0xNy41NzQtMTEuMjU0LTExLjI1LTE3LjU3NC0yNi41MTItMTcuNTc0LTQyLjQyNnYtMjg4YzAtMTUuOTE0IDYuMzIwMy0zMS4xNzYgMTcuNTc0LTQyLjQyNiAxMS4yNS0xMS4yNTQgMjYuNTEyLTE3LjU3NCA0Mi40MjYtMTcuNTc0aDI4OGMxNS45MTQgMCAzMS4xNzYgNi4zMjAzIDQyLjQyNiAxNy41NzQgMTEuMjU0IDExLjI1IDE3LjU3NCAyNi41MTIgMTcuNTc0IDQyLjQyNnoiLz4KICA8cGF0aCBkPSJtNDkyIDI2NGMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im02ODQgMjY0YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+CiAgPHBhdGggZD0ibTMwMCAyNjRjMCAxOS44ODMtMTYuMTE3IDM2LTM2IDM2cy0zNi0xNi4xMTctMzYtMzYgMTYuMTE3LTM2IDM2LTM2IDM2IDE2LjExNyAzNiAzNnoiLz4KICA8cGF0aCBkPSJtMzAwIDQ1NmMwIDE5Ljg4My0xNi4xMTcgMzYtMzYgMzZzLTM2LTE2LjExNy0zNi0zNiAxNi4xMTctMzYgMzYtMzYgMzYgMTYuMTE3IDM2IDM2eiIvPgogIDxwYXRoIGQ9Im0zMDAgNjQ4YzAgMTkuODgzLTE2LjExNyAzNi0zNiAzNnMtMzYtMTYuMTE3LTM2LTM2IDE2LjExNy0zNiAzNi0zNiAzNiAxNi4xMTcgMzYgMzZ6Ii8+Cjwvc3ZnPgo=) center/contain no-repeat;
}
.ed-copy-btn.is-copied .ed-copy-icon,
.ed-copy-foot.is-copied .ed-copy-icon {
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNC41IDEyLjc1bDYgNiA5LTEzLjUiLz48L3N2Zz4K);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNC41IDEyLjc1bDYgNiA5LTEzLjUiLz48L3N2Zz4K);
}

/* Footer copy pill: embed-tab chrome (is-tab-embed is stamped on the
   dialog root by selectTab), shown at EVERY width so the snippet's copy
   is one always-visible click away even while the codebox sits scrolled
   out of view. Desktop additionally keeps the floating codebox button;
   the social tab never shows this pill. */
.ed-copy-foot {
  display: none;
  align-items: center;
  gap: 7px;
}
#share-dialog.is-tab-embed .ed-copy-foot { display: inline-flex; }
.ed-copy-foot .ed-copy-icon {
  width: 1rem;
  height: 1rem;
}

/* Mobile: the dlg breakpoint (639/640), nothing else. The fullscreen
   takeover itself is the base's dlg--full variant; these are content
   tweaks inside it. */
@media (max-width: 639px) {
  .ed-themes { grid-template-columns: 1fr; }
  /* Zoomed out: a phone left the card ~300px of width (the striped frame's
     padding plus the embed page's own), so names, the reply pill and the
     action row wrapped and clipped. The iframe lays out at 1/zoom of the
     frame's width and height and is scaled back down, so the embed renders
     at a desktop-like width and shows the whole card; the negative bottom
     margin hands back the layout height the transform does not. Scaling
     the whole iframe also scales the fade mask with it. No frame padding:
     the embed page's own 12px side padding already shows the stripes
     around the card. */
  .ed-preview-frame { --ed-zoom: 0.75; padding: 0; }
  .ed-preview-iframe {
    width: calc(100% / var(--ed-zoom));
    height: calc(460px / var(--ed-zoom));
    margin-bottom: calc(460px - 460px / var(--ed-zoom));
    transform: scale(var(--ed-zoom));
    transform-origin: 0 0;
  }
  /* The floating codebox button retires (the footer pill, shown on the
     embed tab at every width, is the only copy control here) and the
     code reclaims its width. */
  .ed-copy-btn { display: none; }
  .ed-code { padding-right: 0; }
}


/*# sourceMappingURL=shareDialogCss.a10fbbcc5debb1765111.css.map*/