/* This is the October 2026 responsive layer, written by explainers/edit_responsive_2026_10.py.
   It is linked right after /assets/ee.css on every page except the premium articles and the
   investor briefs. Page styles load before and after this file, so rules carry an html prefix or
   !important to win. */

/* Landing stat boxes and product tiles use two columns on phones. */
@media (max-width: 640px) {
  html .tkpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html .tkpi > div { padding: 12px 12px 13px; }
  html .tkpi b { font-size: 22px; }
  html .tkpi span { letter-spacing: 0.03em; line-height: 1.35; }
  html .tprods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html .tp-b { padding: 9px 10px 11px; }
  html .tp-name { font-size: 14px; }
  html .tp-stat { font-size: 14.5px; line-height: 1.4; }
  html .tp-go { display: none; }
  html .tpimg svg { height: 40px; }
}
/* A lone last stat box or hub card spans its row. */
@media (max-width: 820px) {
  html .tkpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 641px) {
  html ul.list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* On phones the inline ee-spec-m script moves the explainer spec strip under the title. */
@media (max-width: 640px) {
  html .article > .specstrip { margin: 0 0 26px; }
}
/* The explainer side menu stays below the sticky top bar on desktop. */
@media (min-width: 821px) {
  html .sidenav { top: 78px; max-height: calc(100vh - 98px); overflow-y: auto; scrollbar-width: thin; }
}
/* The top bar wraps to two rows (90px) below about 960px wide. */
@media (min-width: 821px) and (max-width: 959px) {
  html .sidenav { top: 110px; max-height: calc(100vh - 130px); }
}

/* Hero photo credits and the Keep exploring heading get a 12px floor. */
html .hero-cap { font-size: 12px !important; }
html .midrel-h { font-size: 12px !important; }

/* The footer gets a 12px floor, colored signup errors, 40px link rows on touch screens and two
   columns on phones. */
html .sf-col h4, html .sf-signup h4 { font-size: 12px; }
html .sf-fine { font-size: 12.5px; }
html .sf-err { font-size: 13.5px; line-height: 1.5; font-weight: 600; color: #9b2b1f; margin: 9px 0 0; }
html .sitefoot .sf-err { color: #f4a99b; }
html .news .sf-err { grid-column: -2 / -1; margin: -16px 0 0; font-size: 14px; color: #8a1c10; }
@media (max-width: 640px), (pointer: coarse) {
  html .sf-col li { margin: 0; }
  html .sf-col li a { display: block; padding: 11px 2px; }
  html .sf-mini a { padding: 12px 2px; }
}
@media (max-width: 480px) {
  html .sf-top { grid-template-columns: 1fr 1fr !important; gap: 22px 16px !important; }
  html .sf-brand, html .sf-signup { grid-column: 1 / -1; }
  html .sf-mini { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 16px !important; width: 100%; }
}

/* Form fields use 16px text on touch screens, so iPhones do not zoom in when a field gets focus. */
@media (max-width: 640px), (pointer: coarse) {
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="file"]):not([type="color"]),
  html select,
  html textarea { font-size: 16px !important; }
}

/* Tap targets on touch screens reach 40px. Links that share a line get vertical padding offset
   by negative margins, so the layout does not move. */
@media (max-width: 640px), (pointer: coarse) {
  html a.wm, html a.wordmark, html a.cov-wm { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
  html .crumb a, html a.topnav-link { display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }
  html p.backlinks a { padding-top: 11px; padding-bottom: 11px; }
  html .midrel a { min-height: 44px; }
  html details.pcred > summary { padding-top: 11px; padding-bottom: 11px; }
  html details.dsh-sources > summary { padding-top: 11px; padding-bottom: 11px; }
  html .eec-b { min-height: 40px; }
}