/* Issue #356 Owner UAT corrections.
   Preserve mobile reading behavior while preventing desktop article sections
   from collapsing into a phone-width strip inside the editorial canvas. */

/* Surface components must carry their own foreground color. Otherwise a white
   card placed inside an ink section inherits near-white text and becomes the
   sort of accessibility defect screenshots were invented to expose. */
.cs-capability,
.cs-loop:not(.cs-loop--dark),
.cs-plane:not(.cs-plane--core),
.cs-phenotype,
.cs-download,
.cs-studio-controls,
.cs-details,
.cs-prompt-contract span {
  color: var(--ink);
}
.cs-capability > span:not(.cs-state) {
  color: var(--muted);
  font-weight: 780;
  letter-spacing: .035em;
}
.cs-capability h3,
.cs-loop:not(.cs-loop--dark) h3,
.cs-plane:not(.cs-plane--core) h3,
.cs-phenotype strong,
.cs-download h3 {
  color: var(--ink);
}
.cs-capability p,
.cs-loop:not(.cs-loop--dark) p,
.cs-plane:not(.cs-plane--core) p,
.cs-phenotype small,
.cs-download p {
  color: var(--muted);
}

/* The canonical SharePlane article shell applies its contrast-enforced light
   foreground directly to h2/h3/p/li descendants. That is correct for ordinary
   reading surfaces but it outranks inherited color on intentional dark panels.
   Dark Issue #356 surfaces therefore own their foreground explicitly. */
.sp-article--the-semantic-operating-system .cs-section--ink h2,
.sp-article--the-semantic-operating-system .cs-section--ink h3,
.sp-article--the-semantic-operating-system .cs-section--ink blockquote,
.sp-article--the-semantic-operating-system .cs-plane--core h2,
.sp-article--the-semantic-operating-system .cs-plane--core h3 {
  color: #f3f4f5;
}
.sp-article--the-semantic-operating-system .cs-section--ink p,
.sp-article--the-semantic-operating-system .cs-section--ink li,
.sp-article--the-semantic-operating-system .cs-plane--core p {
  color: #c8cdd3;
}
.sp-article--the-semantic-operating-system .cs-section--ink .cs-eyebrow,
.sp-article--the-semantic-operating-system .cs-plane--core .cs-eyebrow {
  color: var(--authority);
}
.sp-article--the-semantic-operating-system .cs-section--ink .cs-dek,
.sp-article--the-semantic-operating-system .cs-section--ink .cs-core-note,
.sp-article--the-semantic-operating-system .cs-plane--core .cs-core-note {
  color: #b8bec5;
}
.sp-article--the-semantic-operating-system .cs-loop--dark,
.sp-article--the-semantic-operating-system .cs-loop--dark h3,
.sp-article--the-semantic-operating-system .cs-loop--dark li {
  color: #eef0f2;
}
.sp-article--the-semantic-operating-system .cs-loop--dark p {
  color: #c8cdd3;
}
.sp-article--the-semantic-operating-system .cs-loop--dark li::after {
  color: #a7adb4;
}
.sp-article--the-semantic-operating-system .cs-core-grid span {
  color: #eef0f2;
}

.cs-prompt-contract {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.25rem 0;
}
.cs-prompt-contract span {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font: 700 .68rem/1.35 var(--mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cs-prompt-contract span::before {
  content: "✓";
  margin-right: .45rem;
  color: var(--verified);
  font-weight: 900;
}

/* The engineering edition lives inside the canonical SharePlane sp-reading
   host, which is intentionally 760px for ordinary prose. Its marquee system
   needs a viewport-width breakout while evidence/package surfaces remain in
   the canonical reading column below it. */
.sp-article.sp-reading.sp-article--the-semantic-operating-system {
  overflow: visible;
}
.sp-article.sp-reading.sp-article--the-semantic-operating-system > .cs-main {
  position: relative;
  left: 50%;
  width: min(calc(100vw - 32px), var(--max));
  max-width: none;
  transform: translateX(-50%);
  overflow: clip;
}
.sp-article--the-semantic-operating-system .cs-hero > * {
  min-width: 0;
}
.sp-article--the-semantic-operating-system .cs-hero .cs-display {
  max-width: 9.25ch;
}
.sp-article--the-semantic-operating-system .cs-hero .cs-plane--core {
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 0;
}
.sp-article--the-semantic-operating-system .cs-engineering-title {
  max-width: 12ch;
}

@media (min-width: 1281px) {
  .sp-article--the-semantic-operating-system .cs-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
    gap: clamp(3rem, 5vw, 6rem);
  }
}

@media (min-width: 1101px) {
  /* The section stays broad. The prose inside it keeps a readable measure. */
  .cs-section.cs-prose {
    max-width: min(1240px, calc(100vw - 6rem));
  }
  .cs-section.cs-prose > p,
  .cs-section.cs-prose > ul,
  .cs-section.cs-prose > ol {
    max-width: 82ch;
  }
  .cs-section.cs-prose > h2 {
    max-width: 19ch;
  }
  .cs-section.cs-prose > blockquote {
    max-width: 27ch;
  }

  /* Four columns looked like a mobile table stretched across desktop. */
  .cs-capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .cs-capability {
    min-height: 190px;
    padding: 1.35rem;
  }
  .cs-capability h3 {
    font-size: 1.08rem;
  }
  .cs-capability p {
    font-size: .92rem;
  }

  .cs-studio-layout {
    grid-template-columns: minmax(310px, 380px) minmax(0, 1fr);
    gap: 2.25rem;
  }
  .cs-prompt {
    min-height: 720px;
    padding: 1.65rem;
    font-size: .9rem;
    line-height: 1.68;
  }
}

@media (min-width: 1500px) {
  .cs-section.cs-prose {
    max-width: min(1320px, calc(100vw - 8rem));
  }
  .cs-studio-layout {
    grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
    gap: 3rem;
  }
}

@media (max-width: 1280px) {
  .sp-article--the-semantic-operating-system .cs-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .sp-article--the-semantic-operating-system .cs-hero .cs-plane--core {
    width: min(100%, 900px);
  }
}

@media (max-width: 1100px) {
  .cs-prompt-contract {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cs-prompt-contract {
    grid-template-columns: 1fr;
  }
  .cs-prompt {
    min-height: 560px;
  }
  .sp-article--the-semantic-operating-system .cs-hero .cs-display {
    max-width: 10ch;
  }
}

@media print {
  .sp-article.sp-reading.sp-article--the-semantic-operating-system > .cs-main {
    position: static;
    left: auto;
    width: 100%;
    transform: none;
    overflow: visible;
  }
}