/*!
 * scl-share-overlay.css — SCL V3 CC · Global contextual share MODAL overlay (PORTAL_UNIFIED_SHELL_V1 §6/§14).
 * Compact redesign: heading → rainbow LP CTA → icon profile row → divider → compact preview → share section.
 * The rainbow "Zur Schnappnot Landingpage" button is the SHARED .scl-btn-brand component
 * (assets/css/scl-portal-components.css) — no one-off gradient here. Icon profiles use the shared
 * .scl-portal-icon-btn. Self-contained colors use --okd-* fallbacks so it renders outside the portal scope.
 */
html.scl-okd-social-lock { overflow: hidden; }

.scl-okd-social-dialog { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 12px; }
.scl-okd-social-dialog[hidden] { display: none; }
.scl-okd-social-dialog__backdrop { position: absolute; inset: 0; background: rgba(6,3,16,.72); }
@supports (backdrop-filter: blur(2px)) { .scl-okd-social-dialog__backdrop { backdrop-filter: blur(2px); } }

/* Card = flex column with a fixed head + a scrolling body, so the close button stays visible (§14). */
.scl-okd-social-dialog__card { position: relative; z-index: 1; display: flex; flex-direction: column;
  width: min(430px, 100%); max-height: min(calc(100dvh - 24px), 640px); overflow: hidden;
  background: var(--okd-surface, #170e2e); color: var(--okd-text, #f4f0ff);
  border: 1px solid var(--okd-border, rgba(255,255,255,.14)); border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); font-family: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .scl-okd-social-dialog.is-open .scl-okd-social-dialog__card { animation: scl-okd-social-in .2s cubic-bezier(.2,.7,.2,1); }
}
@keyframes scl-okd-social-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.scl-okd-social-dialog__head { position: relative; flex: 0 0 auto; padding: 16px 18px 8px; }
.scl-okd-social-dialog__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 18px 18px; }

.scl-okd-social-dialog__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; border: 1px solid var(--okd-border, rgba(255,255,255,.14)); border-radius: 12px;
  background: rgba(255,255,255,.05); color: var(--okd-text, #f4f0ff); cursor: pointer; }
.scl-okd-social-dialog__close:hover { border-color: var(--okd-accent, #f34fd0); }
.scl-okd-social-dialog__close:focus-visible { outline: var(--scl-focus-ring-width,3px) solid var(--scl-focus-ring-color, var(--okd-accent,#8a5cff)); outline-offset: 2px; }
.scl-okd-social-dialog__title { font-size: clamp(1.15rem,3.2vw,1.4rem); font-weight: 800; color: var(--okd-text, #f4f0ff); margin: 2px 44px 0 0; }

/* 1) Rainbow LP CTA — spacing only; visual comes from shared .scl-btn-brand */
.scl-okd-social-lp { margin: 2px 0 12px; }

/* 2) Icon-only profile row */
.scl-okd-social-profiles { display: flex; gap: 12px; margin: 0 0 12px; justify-content: center; }

/* 3) Divider */
.scl-okd-social-divider { border: 0; border-top: 1px solid var(--okd-border, rgba(255,255,255,.14)); margin: 4px 0 12px; }

/* 4) Compact preview */
.scl-okd-social-preview { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 0 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--okd-border, rgba(255,255,255,.14)); border-radius: 12px; }
.scl-okd-social-preview[hidden] { display: none; }
.scl-okd-social-preview__cover { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #1b1233; }
.scl-okd-social-preview__cover[hidden] { display: none; }
.scl-okd-social-preview__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scl-okd-social-preview__type { font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: var(--okd-accent, #f34fd0); }
.scl-okd-social-preview__type[hidden] { display: none; }
.scl-okd-social-preview__title { font-weight: 800; color: var(--okd-text, #f4f0ff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scl-okd-social-preview__artist { font-size: .84rem; color: var(--okd-muted, #b3a9d1); }
.scl-okd-social-preview__artist[hidden] { display: none; }

/* 5) Share section */
.scl-okd-social-sharehead { font-size: 1rem; font-weight: 800; color: var(--okd-text, #f4f0ff); margin: 2px 0 8px; }
.scl-okd-social-url { margin: 0 0 10px; padding: 7px 10px; border: 1px dashed var(--okd-border, rgba(255,255,255,.14)); border-radius: 10px;
  background: rgba(255,255,255,.03); font-size: .76rem; color: var(--okd-muted, #b3a9d1); word-break: break-all; }
.scl-okd-social-url:empty { display: none; }
.scl-okd-social-share { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.scl-okd-social-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px;
  border: 1.5px solid var(--okd-border, rgba(255,255,255,.14)); border-radius: 12px; background: rgba(255,255,255,.04);
  color: var(--okd-text, #f4f0ff); font-weight: 800; font-size: .88rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.scl-okd-social-btn__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: .92rem; font-weight: 900; line-height: 1; opacity: .9; }
.scl-okd-social-btn--primary { background: rgba(138,92,255,.22); border-color: rgba(138,92,255,.5); color: #fff; }
.scl-okd-social-btn--copy { border-style: dashed; }
@media (hover: hover) and (pointer: fine) {
  .scl-okd-social-btn { transition: transform .12s ease, border-color .12s ease; }
  .scl-okd-social-btn:hover { transform: translateY(-2px); border-color: var(--okd-accent, #f34fd0); }
}
.scl-okd-social-btn:focus-visible { outline: var(--scl-focus-ring-width,3px) solid var(--scl-focus-ring-color, var(--okd-accent,#8a5cff)); outline-offset: 2px; }
.scl-okd-social-btn[disabled] { opacity: .4; cursor: not-allowed; }
.scl-okd-social-status { min-height: 1.2em; margin: 2px 0 0; color: var(--okd-accent, #f34fd0); font-size: .85rem; font-weight: 700; }
.scl-okd-social-status:empty { display: none; }