/* Doubled text on narrow screens, owner decision 10.10.2026 (release audit).
   With text enlarged to 200 percent on a 320px phone, pages scrolled
   sideways, the conditions list printed one letter per line and headings
   broke mid-word. Everything below applies only when the screen is narrower
   than 19.5 times the root text size: about 312px at normal size, so no phone
   at normal text size is affected, but about 624px once text is doubled.
   The root element is the size container so that this em is the reader's own
   text size. Loaded last on every page, after the Gray and support styles it
   adjusts; !important only where a language-specific rule would otherwise win.
   Capitalised words are never hyphenated by the browser, so the largest
   display text is held to what the screen can carry, never below its normal
   size. Body text keeps the full enlargement and hyphenates in English and
   Russian. */
html{container-type:inline-size}
/* Side-by-side layouts start at 768px (48rem, a screen width): the portrait
   beside the heading, three numbers in a row, the two lists of conditions
   and treatments. With doubled text that leaves columns too narrow for whole
   words on tablets and laptops, so they stay one column while the screen is
   under 47.9 times the text size. At normal text size that is under 766px,
   where all of them are one column anyway, so nothing changes there. */
@container (max-width:47.9em){
  .mbg-hero{grid-template-columns:1fr !important;align-items:normal}
  .mbg-faq .faq-intro-inner{grid-template-columns:minmax(0,1fr) !important;column-gap:var(--sp-8)}
  .mbg-metrics{grid-template-columns:1fr !important}
  .mbg-index{grid-template-columns:minmax(0,1fr) !important}
  .spec-pairing{grid-template-columns:minmax(0,1fr);grid-template-rows:none;column-gap:0;row-gap:var(--rhythm-grid)}
  .spec-pairing>div{grid-row:auto;display:block}
}
/* Conditions rows: the icon sits above the title and the title takes the
   full width. Applies up to 26 times the text size, which includes phones up
   to 416px at normal size: there the Russian list (and "Electrophysiology"
   in English at 320px) was already cutting long words mid-word, a defect
   found by this audit on 10.10.2026. Descriptions hyphenate in English and
   Russian. */
@container (max-width:26em){
  .mbg-row{grid-template-columns:minmax(0,1fr) auto}
  .mbg-row .mbg-row-idx,.mbg-row:has(.spec-index-icon) .mbg-row-idx{grid-column:1;grid-row:1}
  .mbg-row .mbg-row-title,.mbg-row:has(.spec-index-icon) .mbg-row-title{grid-column:1 / -1;grid-row:2}
  .mbg-row .mbg-row-desc{grid-column:1 / -1;grid-row:3}
  .mbg-row .mbg-row-arrow{grid-column:2;grid-row:1}
  :is(:lang(en),:lang(ru)) .mbg-row-desc{hyphens:auto;-webkit-hyphens:auto}
}
@container (max-width:19.5em){
  /* Side spacing is set in rem, so doubled text doubled it too and left the
     content a 256px column on a 320px screen. Hold it at its normal size; the
     container width is computed from the gutter on the root, so it is
     restated here to use the held value (release audit IR3-01). */
  body{--gutter:32px;--mb-gutter:16px;--pad-row:12px 0;--pad-tile:16px 12px;--container-inline:min(100% - var(--gutter),var(--container))}
  .mb-card{padding:16px}
  .mb-masthead__inner{flex-wrap:wrap}
  .mb-wordmark{flex-shrink:1;min-inline-size:0}
  .mb-wordmark__name,.mb-wordmark__role{white-space:normal}
  .mb-masthead__end{min-inline-size:0;inline-size:100%;flex-direction:column;align-items:stretch}
  .landing-page-nav{flex-wrap:wrap;row-gap:0}
  html .landing-page-nav a,html:not([lang="en"]) :is(.mbg-production-home,.mbg-shell) .landing-page-nav a{white-space:normal}
  .mb-langswitch{max-inline-size:100%}
  .mb-langswitch__item{min-inline-size:0;padding-inline:var(--mb-space-2,8px)}
  .mb-btn,.spec-button,.mb-masthead__book,.mb-consent-settings{white-space:normal;min-inline-size:0;max-inline-size:100%}
  .mb-btn.mb-ltr{overflow-wrap:anywhere}
  .mbg-metrics{grid-template-columns:minmax(0,1fr)}
  .spec-inner--hero>*,.spec-about,.spec-about-list,.spec-about-item,.spec-about-item>*,.spec-about-item-body,.spec-about-sublist,.spec-about-sublist li,.mbg-metrics>*,.mbg-metrics>*>*{min-inline-size:0}
  .spec-h1{font-size:min(var(--size-display-1),14vw) !important}
  :lang(en),:lang(ru){hyphens:auto;-webkit-hyphens:auto}
  .spec-about-list,[dir="rtl"] .spec-about-list{margin-inline:0;padding:12px;inline-size:auto}
  .spec-about-item{gap:8px}
  .spec-about-sublist li{padding-inline-start:8px}
  /* Held to the screen width, owner decision 10.10.2026 (release audit
     IR2-01): the line under the name, the About list and the FAQ answers grow
     as large as a phone can hold with words whole, never below their normal
     size (the px floors). */
  :is(.spec-about-item,.spec-about-item span,.spec-about-item>.spec-about-mark,.spec-about-sublist li){font-size:min(calc(var(--size-small) * 1.5),max(22.5px,6.6vw)) !important}
  :lang(he) :is(.spec-about-item,.spec-about-item span,.spec-about-item>.spec-about-mark,.spec-about-sublist li){font-size:min(calc(var(--size-small) * 1.5),max(25.5px,8vw)) !important}
  .mbg-faq .faq-a p:not(.faq-evidence),.mbg-faq .faq-a p:not(.faq-evidence) :not(sup){font-size:min(var(--size-reading-body),max(18px,9.5vw)) !important}
  /* Capitalised words are never hyphenated by the browser, so the largest
     display text is capped to what a 320px screen can hold, never below its
     normal size there. */
  .mbg-overline,.spec-metric-label,.spec-credentials{letter-spacing:.04em !important;font-size:max(20px,6.2vw) !important}
  :lang(he) :is(.mbg-overline,.spec-metric-label,.spec-credentials){font-size:max(22px,9vw) !important}
  .spec-metric{font-size:min(var(--size-metric),22vw) !important}
  .mbg-row-title{font-size:9.5vw !important}
  body:not(.mbg-page) h1{font-size:min(var(--mb-text-h1),12vw) !important}
  body:not(.mbg-page) h2{font-size:min(var(--mb-text-h2),10vw) !important}
  .faq-topics ul{grid-template-columns:minmax(0,1fr) !important}
  .faq-topics li+li .faq-topic{border-inline-start:var(--border-control);border-block-start:0}
  /* Buttons are set in tracked capitals: keep the tracking modest and the
     label within the screen. */
  .spec-button,.mb-masthead__book{letter-spacing:.04em !important;padding-inline:16px}
  /* FAQ questions: the number sits above the question, as the conditions
     list does, so the question keeps the full width. */
  .mbg-faq .faq-q summary{grid-template-columns:minmax(0,1fr) 1.25rem;row-gap:4px}
  .mbg-faq .faq-q-idx{grid-column:1;grid-row:1}
  .mbg-faq .faq-q-text{grid-column:1 / -1;grid-row:2}
  .mbg-faq .faq-q-mark{grid-column:2;grid-row:1}
  .mbg-faq .faq-a{padding-inline-start:0}
  .mbg-faq .faq-q-text{font-size:min(var(--size-row-title),9vw) !important}
  .mbg-faq .faq-chapter-title{font-size:min(clamp(1.5rem,3vw,2rem),9vw) !important}
  /* Citation codes and DOIs have no word breaks of their own; they may break
     at any character, as reference lists conventionally do. */
  .mbg-faq .faq-reading{overflow-wrap:anywhere}
}