/* TokenScale shared editorial heading accent.
   Retune these tokens here to change every linked informational title. */
:root {
  --ts-heading-accent: #047830;
  --ts-static-brand-accent: #047830;
  --ts-explore-accent: #047830;
}

html[data-theme="dark"],
html[data-bg="charcoal"],
html[data-bg="midnight"],
html[data-bg="pitch"] {
  --ts-heading-accent: #3fae6e;
  --ts-static-brand-accent: #3fae6e;
  --ts-explore-accent: #3fae6e;
}

/* The stronger selector replaces older editorial title gradients. Calculator
   provider accents use spans, so their selected-provider colours stay intact. */
html:root body h1 em {
  color: var(--ts-heading-accent) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ts-heading-accent) !important;
}

/* Page-level editorial eyebrows share the title accent. Small data labels,
   chart annotations and control labels remain deliberately page-specific. */
html:root body .ts-page-eyebrow {
  color: var(--ts-heading-accent) !important;
  -webkit-text-fill-color: var(--ts-heading-accent) !important;
}

html:root body .ts-page-eyebrow::before {
  background: var(--ts-heading-accent) !important;
}

/* Shared reading rhythm. Keep the calculator's geometry and each page's
   content intact; use one finish for document titles, copy and data surfaces. */
:root {
  --ts-ui-radius: 12px;
  --ts-ui-table: #263b35;
  --ts-ui-table-alt: #2c433c;
  --ts-ui-table-head: #172c25;
  --ts-ui-table-rule: #53675e;
  --ts-ui-table-ink: #ffffff;
}
html body :is(h1,h2,h3) { text-wrap: balance; word-break: normal; }
html body :is(p,li,summary) { text-wrap: pretty; }
html body :is(button,summary,a,input,select):focus-visible {
  outline: 2px solid var(--ts-heading-accent,#047830);
  outline-offset: 3px;
}
html body :is(.hero-price-route-copy,.ts-nav-primary-copy,.snapshot-metric) { min-width: 0; }
html body #hwheelTeaserPickName { display: inline-block; max-width: 100%; text-wrap: balance; }

html body.ts-ui-document :is(.wrap,.page,main.container) > h1,
html body.ts-ui-document :is(.masthead h1,.masthead-hed,.blog-masthead-hed,.hero h1,.hero-hed) {
  font-family: 'Clash Display','Inter',system-ui,sans-serif;
  font-weight: 700;
  font-size: clamp(2rem,4.3vw,2.8rem);
  line-height: 1.1 !important;
  letter-spacing: -.025em;
  max-width: 25ch !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}
html body.ts-ui-document h1 em { font-family: inherit; font-weight: inherit; font-style: normal; }
html body.ts-ui-document :is(.wrap,.page,main.container) > h1 { margin-top: 0; }
html body.ts-ui-document :is(.topnav,.ts-topnav) + :is(.wrap,main.wrap,.container,main.container) {
  padding-top: 1.35rem !important;
}
html body.ts-ui-document :is(.masthead,.blog-masthead) {
  padding-top: 1.35rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}
html body.ts-ui-document :is(.hero,.hero-header):not(.stat) { padding-top: 1.35rem; }
html body.ts-ui-document :is(.lede,.masthead-dek,.blog-masthead-dek,.tagline,.intro) {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 64ch;
  text-wrap: pretty;
}
html body.ts-ui-document :is(.wrap,main.container) > h2 { margin-top: 2rem; margin-bottom: .7rem; }
html body.ts-ui-document .ts-page-eyebrow {
  font-size: max(.7rem,12px);
  letter-spacing: .13em;
  line-height: 1.5;
  margin-bottom: .65rem;
}
html body.ts-ui-document :is(.masthead-byline,.blog-masthead-byline) { flex-wrap: wrap; gap: .4rem 1rem; }
/* A reading page should be legible at first paint, including without a reveal
   observer. Keep interactive and decorative motion outside this rule. */
html body.ts-ui-document .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html body.ts-ui-document :is(#poster,.tape-wrap,.tape,.blank) { animation: none; }
html body.ts-ui-document :is(.statgrid,.pipe) { margin-block: 1rem; }
html body.ts-ui-document :is(.stat,.node,.scenario-panel,.scenario-snapshot,.controls,.pending) {
  border-radius: var(--ts-ui-radius);
}

/* Comparable values stay intact. Paragraph cells remain free to wrap and
   existing phone card/scroll treatments continue to own table layout. */
html body table { font-variant-numeric: tabular-nums; }
html body.ts-ui-document #tbl {
  --text: #ffffff;
  --text-sub: #e1ebe5;
  --text-muted: #cad7cf;
  --save-c: #b8f0cf;
  --out-c: #ffc5b9;
}
html body.ts-ui-document:has(#tbl) > .wrap { max-width: 1120px; }
html body.ts-ui-document #tbl tr.unavailable { opacity: 1; }
html body.ts-ui-document table thead th {
  background: var(--ts-ui-table-head);
  color: var(--ts-ui-table-ink);
  border-color: var(--ts-ui-table-rule);
}
html body.ts-ui-document :is(#tbl,#htbl) thead :is(button,.arr) { color: inherit; }
html body.ts-ui-document :is(#tbl,#htbl) .th-info {
  color: #fff;
  background: transparent;
  border-color: #b3c9bc;
}
html body.ts-ui-document #tbl tbody td {
  background: var(--ts-ui-table);
  color: #fff;
  border-color: var(--ts-ui-table-rule);
}
html body.ts-ui-document #tbl tbody tr:nth-child(even) td { background: var(--ts-ui-table-alt); }
html body.ts-ui-document #tbl tbody tr:hover td { background: #365447; }
html body.ts-ui-document #tbl tbody :is(a,.down) { color: #b8f0cf; }
html body.ts-ui-document #tbl tbody :is(.up) { color: #ffc5b9; }
html body.ts-ui-document #tbl tbody :is(.flat,.ctx,.muted,.ratio) { color: #d0dbd5; }
html body.ts-ui-document .simple-list { gap: 1px; border-radius: 12px; overflow: hidden; background: var(--ts-ui-table-rule); }
html body.ts-ui-document .simple-list li {
  background: var(--ts-ui-table); border: 0; border-radius: 0; box-shadow: none; opacity: 1;
  padding: .7rem .65rem;
}
html body.ts-ui-document .simple-list li:nth-child(even) { background: var(--ts-ui-table-alt); }
html body.ts-ui-document .simple-list :is(.sl-prov,.sl-price) { color: #fff; }
html body.ts-ui-document .simple-list :is(.sl-rank,.sl-model) { color: #d0dbd5; }
html body.ts-ui-document .simple-list .sl-model { white-space: normal; overflow: visible; text-wrap: pretty; }
html body.ts-ui-document .simple-list .sl-cheapest :is(.sl-price,.sl-tag) { color: #b8f0cf; }
html body.ts-ui-document .simple-list .sl-cheapest { box-shadow: inset 3px 0 #b8f0cf; }
html body.ts-ui-document .simple-list .sl-unavailable .sl-price { color: #ffc5b9; }
html body.ts-ui-document .scenario-head { gap: .3rem .75rem; }
html body.ts-ui-document .scenario-btn { min-height: 0; padding: .65rem .7rem; }
html body.ts-ui-document .scenario-btn span { text-wrap: pretty; overflow-wrap: normal; }
html body.ts-ui-document .snapshot-grid { grid-template-columns: 1fr 1fr; }
html body.ts-ui-document .snapshot-metric { padding: .7rem .85rem; border-bottom: 1px solid var(--border); }
html body.ts-ui-document .snapshot-metric:nth-child(even) { border-right: 0; }
html body.ts-ui-document .snapshot-metric:nth-last-child(-n+2) { border-bottom: 0; }
html body.ts-ui-document .snapshot-value { line-height: 1.35; text-wrap: pretty; }

/* Cache map: every cell has a deliberate fill. The existing four symbols and
   accessible model/status labels carry meaning independently of colour. */
html body .cache-coverage-scroll { border-color: var(--ts-ui-table-rule); }
html body .cache-coverage-table :is(th,td) {
  background: var(--ts-ui-table);
  color: #fff;
  border-color: var(--ts-ui-table-rule);
  padding: 0;
}
html body .cache-coverage-table thead th {
  padding: .65rem .35rem;
  background: var(--ts-ui-table-head);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .04em;
}
html body .cache-coverage-table .cache-coverage-provider {
  padding: .45rem .75rem !important;
  font-size: .8rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
  color: #fff;
}
html body .cache-coverage-table tr:nth-child(even) .cache-coverage-provider { background: var(--ts-ui-table-alt); }
html body .cache-coverage-table tr.is-current .cache-coverage-provider {
  background: #365447;
  color: #fff;
  box-shadow: inset 3px 0 #b8f0cf;
}
html body .cache-coverage-cell[data-status="supported"] { background: #256345; }
html body .cache-coverage-cell[data-status="explicitly_unavailable"] { background: #63463f; }
html body .cache-coverage-cell[data-status="blocked"] { background: #654e2d; }
html body .cache-coverage-cell[data-status="unestablished"] { background: #404b48; }
html body .cache-coverage-table .cache-coverage-cell .cache-coverage-mark {
  display: flex;
  width: 100%;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
}
html body .cache-coverage-table .cache-coverage-mark:hover { background: #ffffff18; }
html body .cache-coverage-table .cache-coverage-mark:is([aria-pressed="true"],:focus-visible) {
  border-color: #fff;
  background: #ffffff18;
  color: #fff;
  outline: 0;
  box-shadow: inset 0 0 0 2px #172c25;
}
html body :is(.cache-coverage-dek,.cache-coverage-detail-text) {
  font-family: 'Inter',sans-serif;
  font-size: .8rem;
  line-height: 1.5;
  text-wrap: pretty;
}
html body .cache-coverage-detail-title { font-size: .85rem; line-height: 1.4; }
html body .cache-coverage-detail { scroll-margin-top: calc(var(--topbar-h,340px) + .75rem); }
html body .cache-coverage-counts { gap: .35rem; }
html body .cache-coverage-key { color: var(--d-text-sub); line-height: 1.4; }
html body .cache-coverage-toggle { min-height: 48px; }
html body .cache-coverage-summary { text-wrap: pretty; }

@media (max-width:700px) {
  html body.ts-ui-document :is(.wrap,.page,main.container) > h1,
  html body.ts-ui-document :is(.masthead h1,.masthead-hed,.blog-masthead-hed,.hero h1,.hero-hed) {
    font-size: clamp(1.85rem,7.7vw,2.2rem);
    max-width: 100% !important;
    letter-spacing: -.02em;
  }
  html body.ts-ui-document :is(.wrap,.page,main.container) > h1 br { display: none; }
  html body.ts-ui-document :is(.lede,.masthead-dek,.blog-masthead-dek) { font-size: 1rem; line-height: 1.55; }
  html body.ts-ui-document :is(.wrap,main.container) > h2 { margin-top: 1.6rem; }
  html body.ts-ui-document .scenario-panel { padding: .75rem; }
  html body.ts-ui-document .scenario-grid { gap: .45rem; }
  html body.ts-ui-document .scenario-btn { padding: .6rem; }
  html body.ts-ui-document .snapshot-value { font-size: .94rem; }
  html body .cache-coverage-table thead th:first-child { width: 43%; }
  html body .cache-coverage-table .cache-coverage-provider { font-size: .78rem; padding-inline: .6rem !important; }
  html body:has(#dialOuter) .page { width: min(330px,calc(100vw - 24px)); }
  html body #dialOuter { width: min(330px,calc(100vw - 24px)); height: auto; aspect-ratio: 330 / 236; }
}
@media (prefers-reduced-motion: reduce) {
  html body.ts-ui-document :is(.masthead,.masthead-hed,.blog-masthead,.reveal) {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
@media print {
  html body.ts-ui-document #tbl,
  html body .cache-coverage-table {
    --text: #000; --text-sub: #222; --text-muted: #333;
    --save-c: #174d31; --out-c: #712b21;
  }
  html body.ts-ui-document table thead th,
  html body.ts-ui-document #tbl tbody td,
  html body .cache-coverage-table :is(th,td),
  html body .cache-coverage-table .cache-coverage-cell .cache-coverage-mark {
    color: #000 !important; background: #fff !important; border-color: #999 !important;
  }
  html body.ts-ui-document #tbl :is(a,.ctx,.muted,.ratio,.flat,.up,.down) { color: #222; }
  html body.ts-ui-document :is(#tbl,#htbl) .th-info { color: #000; background: #fff; }
}