/* Phone-only presentation safeguards.
   Product behavior and tablet/desktop layouts are intentionally out of scope. */
@media (max-width: 640px) {
  /* The brief's desktop slide rail depends on each section occupying most of
     the viewport. Several phone sections are deliberately taller, so use
     natural scrolling instead of showing a progress state that cannot track
     them truthfully. */
  html:has(.deck > .slide) {
    scroll-snap-type: none;
  }

  body:has(.deck > .slide) .progress:has(.progress-dot) {
    display: none;
  }

  body:has(.deck > .slide) .deck > .slide {
    padding-right: 18px;
  }

  /* Keep the number, title, and explanation in stable columns instead of
     allowing the title to auto-flow into the narrow number column. */
  body:has(.deck > .slide) .artifact-row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "number title"
      ". description";
    gap: 5px 12px;
    align-items: start;
  }

  body:has(.deck > .slide) .artifact-row .artifact-num {
    grid-area: number !important;
  }

  body:has(.deck > .slide) .artifact-row strong {
    grid-area: title;
  }

  body:has(.deck > .slide) .artifact-row > span:last-child {
    grid-area: description !important;
  }

  /* Preserve the evidence icon as one anchor spanning its title and
     explanation; the earlier auto-placement compressed explanations into the
     icon column on narrow screens. */
  body:has(.deck > .slide) .evidence-step {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas:
      "node title"
      "node description";
    gap: 3px 13px;
    align-items: center;
  }

  body:has(.deck > .slide) .evidence-step .evidence-node {
    grid-area: node;
  }

  body:has(.deck > .slide) .evidence-step strong {
    grid-area: title;
  }

  body:has(.deck > .slide) .evidence-step > span {
    grid-area: description;
  }

  /* Keep senior-team portraits compact and honor their intended square crop. */
  .canonical-green-shell .founder-grid {
    gap: 24px;
  }

  .canonical-green-shell .founder-photo {
    width: min(44vw, 168px);
    max-width: 168px;
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: start;
  }

  .canonical-green-shell .founder .section-inner > h2 {
    margin-bottom: 28px !important;
  }

  /* Article grids must shrink below their content's intrinsic width. */
  .canonical-green-shell .article-inner,
  .canonical-green-shell .article-layout,
  .canonical-green-shell .article-layout > *,
  .canonical-green-shell .content,
  .canonical-green-shell .sidebar,
  .canonical-green-shell .sidebar-card,
  .canonical-green-shell .pullquote,
  .canonical-green-shell .signal-figure,
  .canonical-green-shell .output-figure,
  .canonical-green-shell .cta {
    min-width: 0;
    max-width: 100%;
  }

  .canonical-green-shell .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .canonical-green-shell .content,
  .canonical-green-shell .sidebar {
    width: 100%;
  }

  .canonical-green-shell .lens-matrix {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    overflow: visible;
  }

  /* The comparison is a table on larger screens. On phones, each cell carries
     its own visible field label, so the redundant desktop header row is removed
     and each Diagnostic becomes a full-width reading block. */
  .canonical-green-shell .lens-matrix thead {
    display: none;
  }

  .canonical-green-shell .lens-matrix tbody,
  .canonical-green-shell .lens-matrix tr,
  .canonical-green-shell .lens-matrix td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .canonical-green-shell .lens-matrix tbody {
    display: grid;
    gap: 12px;
  }

  .canonical-green-shell .lens-matrix tr {
    padding: 14px 16px;
    border: 1px solid rgba(8,56,62,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.58);
  }

  .canonical-green-shell .lens-matrix tr.lens-matrix-self {
    background: rgba(12,110,120,0.08);
    border-color: rgba(12,110,120,0.22);
  }

  .canonical-green-shell .lens-matrix td {
    display: block;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid rgba(8,56,62,0.09);
    overflow-wrap: break-word;
    word-break: normal;
  }

  .canonical-green-shell .lens-matrix td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .canonical-green-shell .lens-matrix td:first-child {
    padding-top: 0;
  }

  .canonical-green-shell .lens-matrix td::before {
    display: block;
    color: #5b6b78;
    content: "Diagnostic";
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.45;
    margin-bottom: 3px;
    text-transform: uppercase;
  }

  .canonical-green-shell .lens-matrix td:nth-child(2)::before {
    content: "Question";
  }

  .canonical-green-shell .lens-matrix td:nth-child(3)::before {
    content: "Examines";
  }

  /* The four Diagnostic shells are grid-centered on larger screens. At the
     narrowest phone width that creates a min-content floor, so use the full
     available phone measure without touching any controls or behavior. */
  .diagnostic-instrument .shell {
    display: block;
  }

  .diagnostic-instrument .shell > .app,
  .diagnostic-instrument .frame-top,
  .diagnostic-instrument .environment,
  .diagnostic-instrument .environment-inner,
  .diagnostic-instrument .stage,
  .diagnostic-instrument .env-head,
  .diagnostic-instrument .env-foot,
  .diagnostic-instrument .question-card,
  .diagnostic-instrument .intake-shell,
  .diagnostic-instrument .intake-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .diagnostic-instrument .shell > .app {
    margin-inline: auto;
  }

  .diagnostic-instrument .engine-note,
  .diagnostic-instrument .tool-title {
    min-width: 0;
    max-width: 100%;
  }

  .diagnostic-instrument .hero-step {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .diagnostic-instrument .toast-stack {
    right: 14px;
    left: 14px;
  }

  .diagnostic-instrument .toast {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Long promotional links wrap inside the phone measure. */
  .canonical-green-shell .ps-sample-link {
    max-width: 100% !important;
    padding-inline: 20px !important;
  }

  .canonical-green-shell .ps-sample-link a,
  .canonical-green-shell .ps-contact a {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .canonical-green-shell .mxps-why .mxps-card > a {
    flex: 1 1 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Research's featured-book grid is declared later in the page. Give each
     grid item permission to shrink to the phone measure without changing its
     tablet or desktop composition. */
  .canonical-green-shell .book-feature,
  .canonical-green-shell .book-feature-inner,
  .canonical-green-shell .book-feature-cover,
  .canonical-green-shell .book-feature-main,
  .canonical-green-shell .book-feature-side,
  .canonical-green-shell .bf-links {
    min-width: 0;
    max-width: 100%;
  }

  .canonical-green-shell .book-feature-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .canonical-green-shell .book-feature-cover,
  .canonical-green-shell .book-feature-main,
  .canonical-green-shell .book-feature-side {
    padding-inline: 20px;
  }

  .canonical-green-shell .bf-links a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .canonical-green-shell .paper-card.wide > *,
  .canonical-green-shell .paper-top,
  .canonical-green-shell .paper-body,
  .canonical-green-shell .paper-foot {
    min-width: 0;
    max-width: 100%;
  }

  .canonical-green-shell .paper-foot {
    flex-wrap: wrap;
  }

  .canonical-green-shell .paper-action {
    white-space: normal;
  }

  /* Keep the four history filters usable at 320px without changing their
     meaning, order, or event wiring. */
  .workspace-surface #filters.filters {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .workspace-surface #filters.filters button {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    padding-inline: 8px;
  }
}