/* ========================================================================
   guides-chrome-mobile-soft — Soft Soft KEEP DRAFT · HOLD LIVE · HOLD --prod
   Clay punch 2026-09-15 PT · Crest 1b656128 · NO ElevenLabs
   
   Merge onto Institute Soft Soft DP site CSS (site-6c51e099 / site-6e25051a)
   and www clinic CSS (site-56a78e30). Disease freeze pages inherit when
   the same chrome CSS is present.
   ======================================================================== */

/* ---- 1) Banner hierarchy (BOTH hosts) ---------------------------------
   Primary host mark = LARGER. Cross-site clinical/patient or Institute
   link (.site-ribbon__x) = SMALLER / less distracting.
   Institute ribbon: Institute mark primary; .com patient-care link quiet.
   Clinic ribbon: clinic mark primary; .org Institute cross-link quiet. */
.site-ribbon__mark {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
}
.site-ribbon__x {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .78;
  border-bottom-color: rgba(255, 255, 255, .32);
  white-space: normal; /* allow wrap on phone instead of crowding */
  max-width: 42ch;
}
.site-ribbon__x:hover,
.site-ribbon__x:focus-visible {
  opacity: 1;
  border-bottom-color: #fff;
}
.site-ribbon__tag {
  font-size: .75rem;
  font-weight: 400;
  opacity: .9;
}

@media (max-width: 760px) {
  .site-ribbon__in {
    gap: 6px 10px;
    padding: 8px 0;
  }
  .site-ribbon__mark {
    font-size: .98rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-ribbon__x {
    font-size: .65rem;
    margin-left: 0;
    max-width: 100%;
    opacity: .7;
  }
}

/* ---- 2) Mobile Soft Soft punch — tables / heroes / touch -------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 16px 0;
  border-radius: 8px;
  /* keep fade affordance from base CSS when present */
}
.table-scroll .stage-table,
.table-scroll table.stage-table {
  margin: 0;
}

@media (max-width: 560px) {
  /* Readable stage tables on phone: drop desktop min-width floor */
  .table-scroll .stage-table,
  .table-scroll table.stage-table {
    min-width: 0;
    width: 100%;
    font-size: .88rem;
  }
  .stage-table th,
  .stage-table td {
    padding: 10px 10px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .stage-table .stage {
    white-space: normal;
  }

  /* Hero / article grids: single column, no cramped multi-col */
  .hero-grid,
  .article-layout,
  .hero.hero--photo .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .stats,
  .cond-grid,
  .benefit-band__grid,
  .outcome-grid {
    grid-template-columns: 1fr !important;
  }

  /* Touch targets ≥44px where buttons / primary controls */
  .btn,
  a.btn,
  .site-header .nav-cta .btn,
  .callbar__btn,
  .nav-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .btn,
  a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .toc a,
  .nav-links > li > a,
  .footer-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---- 3) First-intro tone — quiet research “highlights” ----------------
   Soften study callouts so a first introduction reads plain, not like an
   advanced research dump. No new clinical facts — presentation only. */
.study {
  border-left-width: 2px;
  border-left-color: rgba(240, 84, 36, .35);
  padding: 2px 0 2px 12px;
  margin-bottom: 12px;
  font-size: .92rem;
  color: var(--body, #3C4356);
}
.study .jrnl,
.study .cite-link {
  font-size: .78rem;
  opacity: .85;
}

/* Folded “later reading” block for Latest studies sections */
details.studies-fold {
  margin: 28px 0 8px;
  padding: 12px 14px;
  background: var(--bg-alt, #F5F6FC);
  border: 1px solid var(--line, #E4E6F0);
  border-radius: 10px;
}
details.studies-fold > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy, #243090);
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
details.studies-fold > summary::-webkit-details-marker { display: none; }
details.studies-fold > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--orange, #F05424);
}
details.studies-fold[open] > summary::before { content: "▾"; }
details.studies-fold .study { margin-top: 12px; }

/* Quiet non-plain callouts that read as “highlights” on first intro */
.prose .callout:not(.callout--plain) {
  background: var(--bg-alt, #F5F6FC);
  border-left-color: var(--line, #E4E6F0);
  padding: 14px 16px;
  font-size: .95rem;
}