/* Article integrity guardrails â€” responsive owner v2 â€” 2026-08-18
 * Production contract:
 * - Enqueued after plugin-overrides (priority 1001) and content-hash versioned.
 * - One visible canonical H1 from single.php; source-body H1 remains portable but hidden here.
 * - Rail stacks through 1279px and becomes a bounded 260â€“320px sticky rail from 1280px.
 * - Technical lists/references cannot create intrinsic tracks wider than the article canvas.
 * - Dense mobile tables and code blocks scroll inside their own regions instead of leaking into the page.
 * - Prose keeps a readable measure while figures/PDFs retain the wider research canvas.
 */

.single-article.aiwp-design-shell .aiwp-design-grid:has(.aiwp-design-rail) {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.single-article.aiwp-design-shell .aiwp-design-main,
.single-article.aiwp-design-shell .article-content,
.single-article.aiwp-design-shell .article-content .aiwp-section,
.single-article.aiwp-design-shell .article-content .aiwp-references {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.single-article.aiwp-design-shell .aiwp-design-main {
  max-width: 100% !important;
}

.single-article.aiwp-design-shell .article-content {
  width: 100% !important;
  max-width: min(100%, 1120px) !important;
}

/* single.php owns the one visible title. */
.single-article.aiwp-design-shell .article-content h1 {
  display: none !important;
}

/* Lists are constrained to one track; long technical references wrap inside it. */
.single-article.aiwp-design-shell .article-content :where(ul, ol) {
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.single-article.aiwp-design-shell .article-content :where(li, li > a) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.single-article.aiwp-design-shell .article-content .aiwp-references {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

.single-article.aiwp-design-shell .article-content .aiwp-references__list {
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--space-4, 1rem) 0 0 !important;
  padding-inline-start: clamp(1.35rem, 3vw, 2rem) !important;
}

.single-article.aiwp-design-shell .article-content .aiwp-references__list > li,
.single-article.aiwp-design-shell .article-content .aiwp-references__list a {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto;
}

.single-article.aiwp-design-shell .article-content .aiwp-references__list a {
  display: inline-block !important;
  min-height: 24px !important;
  padding: 0 0.25rem !important;
  line-height: inherit !important;
  vertical-align: baseline;
}

/* Sections must contain their own children; no global clipping is used as a substitute for containment. */
.single-article.aiwp-design-shell .article-content .aiwp-section {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

.single-article.aiwp-design-shell .article-content .aiwp-section > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Code owns its horizontal scrolling at PRE level. */
.single-article.aiwp-design-shell .article-content pre {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-overflow-scrolling: touch;
}

.single-article.aiwp-design-shell .article-content pre code {
  display: block !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  white-space: inherit !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Desktop/tablet tables fit the content canvas. */
@media (min-width: 768px) {
  .single-article.aiwp-design-shell .article-content table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
  }

  .single-article.aiwp-design-shell .article-content :is(th, td) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto;
  }
}

/* Dense phone tables remain readable via an intentional local horizontal scroll region. */
@media (max-width: 767px) {
  .single-article.aiwp-design-shell .article-content table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .single-article.aiwp-design-shell .article-content table :is(thead, tbody, tfoot, tr) {
    max-width: none !important;
  }

  .single-article.aiwp-design-shell .article-content .aiwp-references {
    padding-inline: 0 !important;
  }

  .single-article.aiwp-design-shell .article-content .aiwp-references__list {
    padding-inline-start: 1.4rem !important;
  }
}

/* Rail handoff: stacked through 1279, bounded sticky side rail from 1280. */
@media (max-width: 1279px) {
  .single-article.aiwp-design-shell .aiwp-design-rail {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 1280px) {
  .single-article.aiwp-design-shell .aiwp-design-grid:has(.aiwp-design-rail) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    gap: clamp(1.5rem, 2.2vw, 2.25rem) !important;
    align-items: start !important;
  }

  .single-article.aiwp-design-shell .aiwp-design-rail {
    position: sticky !important;
    top: 96px !important;
    width: auto !important;
    min-width: 260px !important;
    max-width: 320px !important;
    margin-top: 0 !important;
  }
}

/* Wide research canvas for media, readable inner prose measure. */
@media (min-width: 1024px) {
  .single-article.aiwp-design-shell .article-content > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote),
  .single-article.aiwp-design-shell .article-content .aiwp-section > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote) {
    max-width: min(100%, 68ch) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* No shared header/footer/archive selectors belong in this article-only owner. */

/* SKYNET GLOBAL DARK INTEGRITY 20260819
 * Cross-lane dark-theme accessibility owner discovered by the all-published-post audit.
 * Light mode is intentionally untouched. Accent hierarchy is retained with accessible
 * dark-mode marker/tag/category treatments rather than removing affordances.
 */
:root[data-theme='dark'] .single-article.aiwp-design-shell .sbend-timeline__marker {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: inset 0 0 0 2px rgba(var(--color-primary-rgb), 0.12) !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .article-tags {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .article-tags__label {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

/* The runtime contrast repair may also choose dark ink for these small controls.
 * This blue/ink pair remains AA-safe under that runtime decision. */
:root[data-theme='dark'] .single-article.aiwp-design-shell .article-tags__tag,
:root[data-theme='dark'] .single-article.aiwp-design-shell .article-category {
  background: #60a5fa !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08) !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .article-tags__tag:focus-visible,
:root[data-theme='dark'] .single-article.aiwp-design-shell .article-category:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .social-share__link--copy,
:root[data-theme='dark'] .single-article.aiwp-design-shell .social-share__link--email {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .social-share__link--copy :is(span,svg),
:root[data-theme='dark'] .single-article.aiwp-design-shell .social-share__link--email :is(span,svg) {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  stroke: currentColor !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .social-share__link--whatsapp,
:root[data-theme='dark'] .single-article.aiwp-design-shell .social-share__link--whatsapp :is(span,svg) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  stroke: currentColor !important;
}

/* Fix legacy light callout surfaces (observed at ~1.05:1 on post 158829)
 * by owning the component surface and text together in dark mode. */
:root[data-theme='dark'] .single-article.aiwp-design-shell .aiwp-callout {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
  border-left-color: var(--color-warning) !important;
}

:root[data-theme='dark'] .single-article.aiwp-design-shell .aiwp-callout :is(p,strong,em,li) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}


/* SKYNET RESEARCH STATUS CONTRAST CONTRACT 20260819
 * The scholarly-status callout owns its foreground and surface together.
 * This prevents inherited article/body ink from collapsing against the callout
 * in explicit Dark mode and in System mode when the OS prefers dark colors.
 */
.single-article.aiwp-design-shell .research-status {
  background: var(--color-surface-alt) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}

.single-article.aiwp-design-shell .research-status :is(p, strong, em, li, span, a) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme='dark'] .single-article.aiwp-design-shell .research-status {
  background: var(--color-surface-alt) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-strong, var(--color-border)) !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .single-article.aiwp-design-shell .research-status {
    background: var(--color-surface-alt) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-strong, var(--color-border)) !important;
  }

  html:not([data-theme='light']) .single-article.aiwp-design-shell .research-status :is(p, strong, em, li, span, a) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
}
