/* Shared editorial skin for script detail pages. Load after legacy detail styles. */
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) {
  --detail-bg: #0d1110;
  --detail-surface: #141a17;
  --detail-raised: #1a211d;
  --detail-ink: #f3f2e9;
  --detail-muted: #b4b8a8;
  --detail-line: rgba(243, 242, 233, .14);
  --detail-lime: #d5fc70;
  color: var(--detail-ink) !important;
  background: var(--detail-bg) !important;
  color-scheme: dark;
  overflow-x: clip !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero))::before,
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero))::after { display: none !important; }

/* Keep the established dark editorial palette legible when the site toggle is light. */
html.vx-light body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) {
  --detail-bg: #0d1110;
  --detail-surface: #141a17;
  --detail-raised: #1a211d;
  --detail-ink: #f3f2e9;
  --detail-muted: #b4b8a8;
  --detail-line: rgba(243, 242, 233, .14);
  --detail-lime: #d5fc70;
  color: var(--detail-ink) !important;
  background: var(--detail-bg) !important;
  color-scheme: dark;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.shell, .vx-shell) {
  width: min(100% - 40px, 1200px) !important;
  margin-inline: auto !important;
  padding: 24px 0 72px !important;
  isolation: isolate;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.topbar, .vx-topbar) {
  min-height: 58px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--detail-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.topbar, .vx-topbar) a {
  color: var(--detail-muted) !important;
  text-decoration: none;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.topbar, .vx-topbar) a:hover { color: var(--detail-lime) !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.brand-link, .vx-brandmark) {
  color: var(--detail-ink) !important;
  letter-spacing: .2em !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.hero, .vx-hero) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(20px, 3vw, 40px) !important;
  margin-top: clamp(32px, 6vw, 76px) !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.panel, .vx-panel, .section, .vx-section) {
  min-width: 0 !important;
  border: 1px solid var(--detail-line) !important;
  border-radius: 4px !important;
  background: var(--detail-surface) !important;
  color: var(--detail-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.panel, .vx-panel) { padding: clamp(20px, 3vw, 36px) !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.preview, .vx-panel:has(.vx-art)) { display: grid !important; align-content: start !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.details, .vx-panel:not(:has(.vx-art))) { display: flex !important; flex-direction: column !important; align-items: stretch !important; }

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.art, .vx-art) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border: 1px solid var(--detail-line) !important;
  border-radius: 2px !important;
  background: var(--detail-raised) !important;
  box-shadow: none !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.art, .vx-art)::before,
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.art, .vx-art)::after,
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) .vx-art-overlay { content: none !important; display: none !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) .detail-art-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(h1, .vx-title) {
  max-width: 18ch;
  margin: 0 !important;
  color: var(--detail-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--detail-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.4rem, 5vw, 5rem) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(h2, .vx-section-head h2) {
  margin: 0 !important;
  color: var(--detail-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(h3, p, .subtitle, .vx-subtitle, .section p, .vx-section p) {
  color: var(--detail-muted) !important;
  overflow-wrap: anywhere;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.subtitle, .vx-subtitle) { max-width: 56ch !important; line-height: 1.7 !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.meta, .vx-meta) { gap: 8px !important; margin: 0 0 22px !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.pill, .vx-pill) {
  border: 1px solid var(--detail-line) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--detail-muted) !important;
  overflow-wrap: anywhere;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.pill.updated, .vx-pill.updated) {
  border-color: rgba(213, 252, 112, .45) !important;
  color: var(--detail-lime) !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.section, .vx-section) {
  margin-top: 24px !important;
  padding: clamp(20px, 3.5vw, 44px) !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.description-box, .vx-desc-box) {
  border: 1px solid var(--detail-line) !important;
  border-radius: 2px !important;
  background: var(--detail-raised) !important;
  box-shadow: none !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.description-title, .vx-desc-title) { color: var(--detail-ink) !important; }

/* Actions retain their existing IDs and event handlers; this only changes presentation. */
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.btn, .small-btn, .copy, .vx-btn, .vx-toggle-row button) {
  display: inline-flex !important;
  min-width: 0;
  min-height: 46px !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 17px !important;
  border: 1px solid var(--detail-line) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--detail-ink) !important;
  font: inherit !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.btn.primary, .btn.scriptblox, .btn.github, .btn.primary:hover, .vx-btn.primary, #copyLoadstring) {
  border-color: var(--detail-lime) !important;
  background: var(--detail-lime) !important;
  color: #151a12 !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.row, .toggle-row, .raw-actions, .source-actions, .vx-source-actions) { gap: 10px !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.row, .vx-source-actions) { margin-top: auto !important; padding-top: 24px; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.copy.success, .vx-btn.success) { border-color: var(--detail-lime) !important; color: var(--detail-lime) !important; }

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.source-card, .vx-source-card) {
  min-width: 0 !important;
  border: 1px solid var(--detail-line) !important;
  border-radius: 2px !important;
  background: var(--detail-raised) !important;
  box-shadow: none !important;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.source-head h3, .vx-source-head h3) { color: var(--detail-ink) !important; }
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(pre, code, .vx-code, #loadstringText, #scriptText, #rawText) {
  max-width: 100% !important;
  min-width: 0;
  border: 1px solid var(--detail-line) !important;
  border-radius: 2px !important;
  background: #090d0b !important;
  color: #e3e7d9 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  tab-size: 2;
}
body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(pre, .vx-code, #loadstringText, #scriptText, #rawText) {
  overflow: auto !important;
  max-height: min(52vh, 560px) !important;
}

body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 3px solid var(--detail-lime) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px var(--detail-bg) !important;
}
@media (hover: hover) and (pointer: fine) {
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.btn, .small-btn, .copy, .vx-btn, .vx-toggle-row button):hover {
    transform: translateY(-2px) !important;
    border-color: var(--detail-lime) !important;
    background: rgba(213, 252, 112, .08) !important;
    color: var(--detail-lime) !important;
  }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.btn.primary, .btn.scriptblox, .btn.github, #copyLoadstring):hover {
    background: #e2ff9b !important;
    color: #151a12 !important;
  }
}
@media (max-width: 780px) {
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.shell, .vx-shell) { width: min(100% - 28px, 1200px) !important; padding: 14px 0 48px !important; }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.hero, .vx-hero) { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; margin-top: 24px !important; }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.panel, .vx-panel, .section, .vx-section) { padding: 20px !important; }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.art, .vx-art) { aspect-ratio: 16 / 9 !important; }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.row, .raw-actions, .source-actions, .vx-source-actions) { align-items: stretch !important; }
}
@media (max-width: 420px) {
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.shell, .vx-shell) { width: min(100% - 20px, 1200px) !important; }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.panel, .vx-panel, .section, .vx-section) { padding: 16px !important; }
  body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) :where(.row, .toggle-row, .raw-actions, .source-actions, .vx-source-actions) > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-reduced-motion="false"]) body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) *, html:not([data-reduced-motion="false"]) body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) *::before, html:not([data-reduced-motion="false"]) body[data-page^="detail-"]:is(:has(.hero .panel), :has(.vx-hero)) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}