/* Elon, Explained — shared responsive / a11y / overflow layer.
   Linked from every page. Keep visual identity; only fix layout, type, and CLS. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body { overflow-x: clip; }
img, video, svg, canvas { max-width: 100%; }
iframe, twitter-widget, .twitter-tweet {
  max-width: 100% !important;
}
/* Tables that are not already in .tablewrap / .tg-wrap still must not blow the viewport. */
table { max-width: 100%; }
.tablewrap, .tg-wrap, .nw-wrap { max-width: 100%; }
h1.m-wm { margin: 0; }

/* Touch targets for chips / filters / org-chart nodes (WCAG 2.5.8 ~24px min; we aim ~44). */
.qchip, .fchip { min-height: 44px; }
.azindex a, .azindex .dis { min-width: 44px; min-height: 44px; }
.node { min-height: 36px; padding: 8px 12px; display: inline-flex; align-items: center; }
.nav-toggle { width: 44px; height: 44px; }

/* Net-worth hover tip: nowrap overflows a 375px card. */
@media (max-width: 640px) {
  .nw-tip { white-space: normal; max-width: min(240px, calc(100% - 24px)); }
  .patients { grid-template-columns: 1fr; }
  .hstrip { gap: 16px 24px; }
}

/* Phone: stack footer columns and the subscribe row. */
@media (max-width: 480px) {
  .sf-top { grid-template-columns: 1fr; gap: 22px; }
  .sf-form { flex-direction: column; }
  .sf-form button { width: 100%; }
  .sf-mini { flex-direction: column; gap: 4px; }
  .ee-beta { width: min(350px, calc(100% - 28px)); }
}

/* Long tokens in KPI tiles / glossary terms wrap instead of forcing scroll. */
.tkpi b, .spec-v, .kv, .term .t, .dstat .dn {
  overflow-wrap: anywhere;
}

/* --- t142: sitewide phone / tablet hardening --- */
img, video { height: auto; }
body, .card, .body-inner, .article-body { overflow-wrap: anywhere; }
.tablewrap, .tg-wrap, .nw-wrap, .bd-chart, .chart-wrapper, .chart {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hero wordmarks wrap; do not override page font-size (already clamped). */
.m-wm, h1.m-wm { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .body-inner, .top-wrap, .timeline {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tkpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tprods { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .feat-hero, .feat-grid, .kex-cards,
  .moment-row.split, .split {
    grid-template-columns: 1fr !important;
  }
  .specstrip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .tkpi, .tprods, .optirow, .tmaps, .tcharge-grid, .tunit,
  .grid, .cards, .pgrid, .dgrid, .rail, .factgrid, .vspecs,
  .patients, .flist.two, .fkidgroups {
    grid-template-columns: 1fr !important;
  }
  .vspecs { grid-template-columns: 1fr 1fr !important; }
  .ex-grid { grid-template-columns: 1fr !important; }
  .bar { grid-template-columns: 1fr auto !important; }
  .bar .bn { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
  .bar .bv { min-width: 0; white-space: normal; }
  .balrow { flex-wrap: wrap; }
  .card {
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .m-tag, .dek, .seclead { font-size: 15px; }
  .crow, .controls, .qrow { flex-wrap: wrap; }
  .moment-row.split, .moment-row {
    display: flex;
    flex-direction: column;
  }
}

.bd-chart, .score { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.bd-chart svg { min-width: 0 !important; width: 100%; height: auto; }

@media (max-width: 420px) {
  .vspecs { grid-template-columns: 1fr !important; }
  .tkpi { grid-template-columns: 1fr !important; }
}


/* --- t151: briefs chrome (paywall / print bar) + leftover 320 snapshot --- */
@media (max-width: 560px) {
  .printbtn { min-height: 44px; padding: 12px 16px; }
  .pw-h { font-size: 22px; }
  ol.pw-toc li { grid-template-columns: 28px minmax(0, 1fr); }
  .pw-kk { grid-column: 2; }
  .paywall { padding: 22px 14px; }
  .pw-actions { flex-direction: column; }
  .pw-buy { min-height: 44px; width: 100%; justify-content: center; }
}
@media (max-width: 360px) {
  .snapshot { grid-template-columns: 1fr !important; }
}

/* --- t152: hide horizontal scrollbars (keep overflow where needed) --- */
/* Document never shows a page-level horizontal scrollbar. */
html, body { overflow-x: clip; }

/* Intentional horizontal regions: scrollable, but scrollbar visually hidden. */
.no-xbar,
[data-scroll-x],
.tablewrap,
.tg-wrap,
.nw-wrap,
.bd-chart,
.chart-wrapper,
.chart,
figure.chart,
.score,
.model-scroll,
.chart-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / old Edge */
}
.no-xbar::-webkit-scrollbar,
[data-scroll-x]::-webkit-scrollbar,
.tablewrap::-webkit-scrollbar,
.tg-wrap::-webkit-scrollbar,
.nw-wrap::-webkit-scrollbar,
.bd-chart::-webkit-scrollbar,
.chart-wrapper::-webkit-scrollbar,
.chart::-webkit-scrollbar,
figure.chart::-webkit-scrollbar,
.score::-webkit-scrollbar,
.model-scroll::-webkit-scrollbar,
.chart-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

/* Prefer reflow over sideways scroll for common wide layouts. */
.tablewrap table,
.tg-wrap table,
.nw-wrap table {
  max-width: 100%;
}
.filters, .qrow, .crow, .controls, .hstrip {
  max-width: 100%;
  min-width: 0;
}