/* ==========================================================================
   ring2026.css — "Ring 2026" premium skin for the India health ring and the
   fitness ring. Loaded LAST, after styles.css / data.css / <site>.css, and
   scoped to body[data-r26] so no other cluster is touched.
   Reference bar: Apple product pages, Samsung Galaxy, Sony — big confident
   type, generous air, soft depth, one accent used sparingly, alternating
   canvas bands, pill controls. Pure CSS: no new JS, no layout shift, no
   images required (AdSense + Core Web Vitals safe).
   Two registers:
     data-r26="light"  India health ring (thali, sehat, sugar, diet, fast, grow)
     data-r26="dark"   fitness ring heroes (gym, move, run, yoga, burn, lift, fuel)
   ========================================================================== */

body[data-r26] {
  --r-canvas: #ffffff;
  --r-band: #f5f5f7;
  --r-ink: #1d1d1f;
  --r-ink-2: #424245;
  --r-muted: #6e6e73;
  --r-line: #e3e3e8;
  --r-card: #ffffff;
  --r-acc: var(--site-accent, #0071e3);
  --r-acc-soft: color-mix(in srgb, var(--r-acc) 9%, #fff);
  --r-glow: color-mix(in srgb, var(--r-acc) 22%, transparent);
  --r-radius: 22px;
  --r-radius-sm: 14px;
  --r-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px -12px rgba(0,0,0,.12);
  --r-shadow-hi: 0 2px 4px rgba(0,0,0,.05), 0 22px 48px -18px rgba(0,0,0,.22);
  --r-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans Devanagari", sans-serif;
  --r-text: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Sans Devanagari", sans-serif;
  --r-ease: cubic-bezier(.2,.8,.2,1);
  --bg: var(--r-canvas); --paper: var(--r-canvas); --surface: var(--r-card); --surface-2: var(--r-band);
  --surface-sunken: var(--r-band); --ink: var(--r-ink); --ink-2: var(--r-ink-2); --muted: var(--r-muted);
  --line: var(--r-line); --line-2: #d2d2d7; --accent: var(--r-acc); --accent-2: var(--r-acc);
  --accent-soft: var(--r-acc-soft); --accent-line: color-mix(in srgb, var(--r-acc) 28%, #fff);
  --radius: var(--r-radius-sm); --radius-lg: var(--r-radius); --radius-sm: 12px;
  --font: var(--r-text); --serif: var(--r-display); --display: var(--r-display);
  background: var(--r-canvas) !important;
  background-image: none !important;
  color: var(--r-ink);
  font-family: var(--r-text);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.012em;
  text-rendering: optimizeLegibility;
}
body[data-r26]::before, body[data-r26]::after { background-image: none !important; }

body[data-r26] h1, body[data-r26] h2, body[data-r26] h3, body[data-r26] .h1, body[data-r26] .display {
  font-family: var(--r-display) !important;
  font-optical-sizing: auto;
  font-variation-settings: normal;
  color: var(--r-ink);
}
body[data-r26] h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 700 !important;
  text-wrap: balance;
}
body[data-r26] h1 em, body[data-r26] h1 span, body[data-r26] h1 b {
  font-style: normal;
  background: linear-gradient(100deg, var(--r-acc), color-mix(in srgb, var(--r-acc) 55%, #ff9f0a));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
body[data-r26] h2, body[data-r26] h2.sec {
  font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  text-wrap: balance;
}
body[data-r26] h2.sec::before, body[data-r26] .keel::before, body[data-r26] .hero hr { display: none !important; }
body[data-r26] h3 { font-weight: 650 !important; letter-spacing: -0.02em !important; }
body[data-r26] p, body[data-r26] li { text-wrap: pretty; }
body[data-r26] .lede, body[data-r26] .hero p.lede, body[data-r26] .sec-note {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  line-height: 1.45 !important;
  color: var(--r-muted) !important;
  max-width: 44ch;
  letter-spacing: -0.015em;
  font-weight: 450;
}
body[data-r26] .kicker, body[data-r26] .eyebrow, body[data-r26] .sheet, body[data-r26] .spec {
  font-family: var(--r-text) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  color: var(--r-acc) !important;
  background: none !important; border: 0 !important; padding: 0 !important;
}
body[data-r26] .srcline, body[data-r26] .srcline-min, body[data-r26] .cite, body[data-r26] .vintage, body[data-r26] .freshness {
  font-family: var(--r-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .82rem !important;
  color: var(--r-muted) !important;
  border-top: 0 !important;
}
body[data-r26] .crumbs, body[data-r26] nav[aria-label="Breadcrumb"] {
  font-family: var(--r-text) !important; font-size: .82rem !important; letter-spacing: 0 !important; color: var(--r-muted);
}
body[data-r26] a { color: var(--r-acc); text-underline-offset: 3px; text-decoration-thickness: 1px; }

body[data-r26] .wrap { max-width: 1180px; padding-inline: clamp(18px, 4vw, 40px); }
body[data-r26] .wrap.narrow, body[data-r26] .narrow { max-width: 820px; }
body[data-r26] main > .section, body[data-r26] main > section.section { padding-block: clamp(64px, 9vw, 120px) !important; border-top: 0 !important; }
body[data-r26] main > .section:nth-of-type(odd) { background: var(--r-band); }
body[data-r26] .section + .section { border-top: 0 !important; }

body[data-r26] .netbar { background: #000 !important; border: 0 !important; }
body[data-r26] .netbar-in { height: 38px; }
body[data-r26] .netbar .netbar-label { font-family: var(--r-text); letter-spacing: .04em; text-transform: none; font-size: .74rem; color: rgba(255,255,255,.55); opacity: 1; }
body[data-r26] .netbar-links a { font-size: .76rem; color: rgba(255,255,255,.78); border-radius: 999px; padding: 4px 11px; }
body[data-r26] .netbar-links a:hover { background: rgba(255,255,255,.14); color: #fff; }
body[data-r26] .netbar-links a[aria-current="page"] { background: #fff; color: #000; }
body[data-r26] .netbar .nb-dot { display: none; }

body[data-r26] .site-head {
  background: rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
body[data-r26] .head-in { height: 56px; }
body[data-r26] .brand { font-family: var(--r-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.03em; }
body[data-r26] .head-nav a { font-size: .86rem; font-weight: 500; color: var(--r-ink-2); border-radius: 999px; padding: 7px 14px; }
body[data-r26] .head-nav a:hover { background: rgba(0,0,0,.05); color: var(--r-ink); }
body[data-r26] .icon-btn, body[data-r26] .langpick summary, body[data-r26] .hsearch, body[data-r26] .hsearch input {
  border-radius: 999px !important; border-color: rgba(0,0,0,.1) !important; background: rgba(0,0,0,.035) !important;
}

body[data-r26] main > .hero, body[data-r26] .hero {
  position: relative;
  padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px) !important;
  overflow: hidden;
  isolation: isolate;
}
body[data-r26] .hero::before {
  content: "" !important;
  position: absolute; inset: -30% -10% auto -10% !important; height: 120% !important;
  z-index: -1 !important;
  background:
    radial-gradient(50% 45% at 50% 0%, var(--r-glow), transparent 70%),
    radial-gradient(35% 30% at 85% 20%, color-mix(in srgb, var(--r-acc) 12%, transparent), transparent 70%) !important;
  pointer-events: none;
}
body[data-r26][data-site] .hero { text-align: center; }
body[data-r26][data-site] .hero .wrap > * { margin-inline: auto; }
body[data-r26][data-site] .hero h1 { max-width: 16ch; margin-inline: auto; }
/* own-shell sites keep their own hero alignment; only cap the measure */
body[data-r26]:not([data-site]) h1 { max-width: 20ch; }
body[data-r26] .hero .lede { margin-top: 18px; }
body[data-r26] .hero .srcline { justify-content: center; text-align: center !important; }

body[data-r26] .answer, body[data-r26] .answer.aaa, body[data-r26] .short-answer, body[data-r26] .quick-answer {
  text-align: left;
  max-width: 820px;
  margin: 40px auto 0 !important;
  padding: clamp(24px, 4vw, 40px) !important;
  background: var(--r-card) !important;
  border: 0 !important;
  border-radius: var(--r-radius) !important;
  box-shadow: var(--r-shadow-hi) !important;
}
body[data-r26] .answer .big, body[data-r26] .answer .stat, body[data-r26] .stat-v, body[data-r26] .big-num, body[data-r26] .result-v, body[data-r26] .res-v, body[data-r26] .figure-v {
  font-family: var(--r-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  font-size: clamp(3.4rem, 8vw, 6rem) !important;
  line-height: .95 !important;
  background: linear-gradient(160deg, var(--r-ink) 30%, color-mix(in srgb, var(--r-acc) 80%, var(--r-ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

body[data-r26] .card, body[data-r26] .rec, body[data-r26] .rel-card, body[data-r26] .calc-card, body[data-r26] .tile,
body[data-r26] .citystats > *, body[data-r26] .stat-card, body[data-r26] .net-card, body[data-r26] .linkgrid a, body[data-r26] .chips a {
  background: var(--r-card) !important;
  border: 0 !important;
  border-radius: var(--r-radius) !important;
  box-shadow: var(--r-shadow) !important;
  transition: transform .35s var(--r-ease), box-shadow .35s var(--r-ease) !important;
}
body[data-r26] .rec:hover, body[data-r26] .rel-card:hover, body[data-r26] .linkgrid a:hover, body[data-r26] .chips a:hover, body[data-r26] .net-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--r-shadow-hi) !important;
}
body[data-r26] .rel-card { border-top: 0 !important; padding: 26px !important; }
body[data-r26] .rel-grid, body[data-r26] .rec-grid { gap: 20px !important; }
body[data-r26] .linkgrid a, body[data-r26] .chips a { padding: 16px 18px !important; font-weight: 550; color: var(--r-ink) !important; }
body[data-r26] .chips { gap: 12px !important; }

body[data-r26] .btn, body[data-r26] button.btn, body[data-r26] .aff-cta, body[data-r26] .cta {
  border-radius: 999px !important; padding: 13px 24px !important; font-weight: 600 !important; letter-spacing: -0.01em;
}
body[data-r26] .btn-primary { background: var(--r-acc) !important; color: #fff !important; }
body[data-r26] input[type="text"], body[data-r26] input[type="search"], body[data-r26] input[type="number"], body[data-r26] select,
body[data-r26] .gsearch input {
  border-radius: 14px !important; min-height: 52px; font-size: 1rem !important;
  background: var(--r-band) !important; border: 1px solid transparent !important; box-shadow: none !important;
}
body[data-r26] .gsearch { max-width: 620px; margin: 32px auto 0 !important; }
body[data-r26] .gsearch input { border-radius: 999px !important; padding-inline: 24px !important; background: #fff !important; box-shadow: var(--r-shadow-hi) !important; }
body[data-r26] input:focus, body[data-r26] select:focus { border-color: var(--r-acc) !important; box-shadow: 0 0 0 4px var(--r-glow) !important; background: #fff !important; }

body[data-r26] .tbl-wrap, body[data-r26] table.data, body[data-r26] .rank {
  border: 0 !important; border-radius: var(--r-radius) !important; box-shadow: var(--r-shadow) !important; background: var(--r-card) !important; overflow: hidden;
}
body[data-r26] .tbl-wrap th, body[data-r26] table th {
  background: transparent !important; font-family: var(--r-text) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: .82rem !important; color: var(--r-muted) !important; font-weight: 600 !important;
}
body[data-r26] .tbl-wrap tbody tr:nth-child(even) td { background: transparent !important; }
body[data-r26] .tbl-wrap td, body[data-r26] table td { border-bottom: 1px solid var(--r-line) !important; }

body[data-r26] .faq details, body[data-r26] .faqs details {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--r-line) !important;
  border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
}
body[data-r26] .faq summary, body[data-r26] .faqs summary { padding: 22px 4px !important; font-size: 1.12rem !important; font-weight: 600 !important; letter-spacing: -0.02em; }
body[data-r26] .faq summary::after, body[data-r26] .faqs summary::after { color: var(--r-muted) !important; }

body[data-r26] .callout, body[data-r26] .assume, body[data-r26] .serving, body[data-r26] .ymyl {
  border: 0 !important; border-radius: var(--r-radius-sm) !important; background: var(--r-acc-soft) !important; color: var(--r-ink-2) !important;
}
body[data-r26] .method li { border-color: var(--r-line) !important; }
body[data-r26] .method li::before { font-family: var(--r-display) !important; font-weight: 700; color: var(--r-acc) !important; font-size: 1rem; }

body[data-r26] .ad-slot { background: transparent !important; border: 0 !important; border-top: 1px solid var(--r-line) !important; border-bottom: 1px solid var(--r-line) !important; border-radius: 0 !important; }
body[data-r26] .ad-label { font-family: var(--r-text) !important; letter-spacing: .04em !important; text-transform: uppercase; font-size: .66rem !important; }

body[data-r26] .site-foot, body[data-r26] footer { background: var(--r-band) !important; border-top: 0 !important; font-size: .8rem; color: var(--r-muted); }
body[data-r26] .site-foot a, body[data-r26] footer a { color: var(--r-ink-2) !important; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body[data-r26] main > .section > .wrap > *, body[data-r26] .rel-card, body[data-r26] .rec {
      animation: r26-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%;
    }
    @keyframes r26-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  }
}

body[data-r26="dark"] .hero { background: #000 !important; color: #f5f5f7; }
body[data-r26="dark"] .hero::before {
  background:
    radial-gradient(55% 55% at 50% 0%, color-mix(in srgb, var(--r-acc) 55%, transparent), transparent 70%),
    radial-gradient(40% 40% at 90% 30%, color-mix(in srgb, var(--r-acc) 30%, transparent), transparent 70%) !important;
  opacity: .9;
}
body[data-r26="dark"] .hero h1, body[data-r26="dark"] .hero h2 { color: #f5f5f7 !important; }
body[data-r26="dark"] .hero h1 em, body[data-r26="dark"] .hero h1 span, body[data-r26="dark"] .hero h1 b {
  background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--r-acc) 60%, #fff)); -webkit-background-clip: text; background-clip: text;
}
body[data-r26="dark"] .hero .lede, body[data-r26="dark"] .hero p, body[data-r26="dark"] .hero .srcline, body[data-r26="dark"] .hero .srcline a { color: #a1a1a6 !important; }
body[data-r26="dark"] .hero .answer, body[data-r26="dark"] .hero .answer.aaa {
  background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; color: #f5f5f7;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
body[data-r26="dark"] .hero .answer * { color: inherit; }
body[data-r26="dark"] .hero .answer .big, body[data-r26="dark"] .hero .answer .stat, body[data-r26="dark"] .hero .stat-v, body[data-r26="dark"] .hero .big-num {
  background: linear-gradient(160deg, #fff 35%, color-mix(in srgb, var(--r-acc) 70%, #fff)); -webkit-background-clip: text; background-clip: text;
}
body[data-r26="dark"] .hero .kicker, body[data-r26="dark"] .hero .sheet { color: color-mix(in srgb, var(--r-acc) 55%, #fff) !important; }
body[data-r26="dark"] .hero svg text { fill: #d2d2d7; }

:root[data-theme="dark"] body[data-r26] {
  --r-canvas: #000; --r-band: #0d0d0f; --r-ink: #f5f5f7; --r-ink-2: #d2d2d7; --r-muted: #a1a1a6;
  --r-line: #2a2a2e; --r-card: #1c1c1e; --r-acc-soft: color-mix(in srgb, var(--r-acc) 18%, #000);
  --r-shadow: none; --r-shadow-hi: 0 0 0 1px #2a2a2e;
}
:root[data-theme="dark"] body[data-r26] .site-head { background: rgba(22,22,23,.78) !important; border-bottom-color: rgba(255,255,255,.08) !important; }

@media (max-width: 640px) {
  body[data-r26] { font-size: 16px; }
  body[data-r26] .answer { margin-top: 28px !important; }
  body[data-r26] .netbar-label { display: none; }
}
@media print { body[data-r26] .hero::before { display: none !important; } body[data-r26] .hero { background: none !important; color: #000; } }

/* ---- v1.1 refinements ---------------------------------------------------- */
/* a vivid companion of the site accent for glows, fills and big numerals */
body[data-r26] { --r-vivid: oklch(from var(--r-acc) max(l, .7) max(c, .16) h); }
@supports not (color: oklch(from red l c h)) { body[data-r26] { --r-vivid: color-mix(in srgb, var(--r-acc) 55%, #ff8a1f); } }
body[data-r26="dark"] .hero { --accent: var(--r-vivid); --site-accent: var(--r-vivid); }
body[data-r26="dark"] .hero::before {
  background:
    radial-gradient(60% 50% at 50% -5%, color-mix(in srgb, var(--r-vivid) 45%, transparent), transparent 70%),
    radial-gradient(30% 35% at 92% 35%, color-mix(in srgb, var(--r-vivid) 22%, transparent), transparent 70%),
    radial-gradient(30% 35% at 6% 60%, color-mix(in srgb, var(--r-vivid) 14%, transparent), transparent 70%) !important;
}
body[data-r26="dark"] .hero h1 em, body[data-r26="dark"] .hero h1 span, body[data-r26="dark"] .hero h1 b {
  background: linear-gradient(100deg, #fff 10%, var(--r-vivid) 90%) !important; -webkit-background-clip: text !important; background-clip: text !important;
}
body[data-r26="dark"] .hero .answer .big, body[data-r26="dark"] .hero .answer .stat, body[data-r26="dark"] .hero .stat-v,
body[data-r26="dark"] .hero .big-num, body[data-r26="dark"] .hero .answer [class*="num"] {
  background: linear-gradient(170deg, #fff 30%, var(--r-vivid)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
body[data-r26="dark"] .hero svg circle, body[data-r26="dark"] .hero svg .dot { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--r-vivid) 60%, transparent)); }

/* dark register: the masthead goes dark glass over a dark hero (Apple pattern) */
body[data-r26="dark"] .site-head { background: rgba(22,22,23,.72) !important; border-bottom-color: rgba(255,255,255,.08) !important; }
body[data-r26="dark"] .site-head .brand, body[data-r26="dark"] .site-head .head-nav a { color: #f5f5f7 !important; }
body[data-r26="dark"] .site-head .head-nav a:hover { background: rgba(255,255,255,.1); }
body[data-r26="dark"] .site-head .icon-btn, body[data-r26="dark"] .site-head .langpick summary, body[data-r26="dark"] .site-head .hsearch,
body[data-r26="dark"] .site-head .hsearch input { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: #f5f5f7 !important; }
body[data-r26="dark"] .site-head svg { color: #f5f5f7; }

/* the answer tile: its heading is a label, not a second headline */
body[data-r26] .answer h2, body[data-r26] .answer h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important; letter-spacing: -0.02em !important; margin: 0 0 10px !important;
  border: 0 !important; padding: 0 !important; color: inherit;
}
body[data-r26] .answer h2::after, body[data-r26] .answer h2::before { display: none !important; }
body[data-r26] .answer .srcline, body[data-r26] .answer .srcline-min { padding: 14px 0 0 !important; margin-top: 18px !important; border-top: 1px solid var(--r-line) !important; }
body[data-r26="dark"] .hero .answer .srcline { border-top-color: rgba(255,255,255,.12) !important; }
body[data-r26] .hero > .wrap > hr, body[data-r26] .hero .rule, body[data-r26] .hero .gsearch + hr, body[data-r26] .atlas { border-top: 0 !important; }
body[data-r26] .atlas::before { display: none !important; }

/* stat strips become bento tiles with headline numerals */
body[data-r26] .citystats, body[data-r26] .stats, body[data-r26] .statgrid {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 20px !important; border: 0 !important;
}
body[data-r26] .citystats > * { padding: 28px 26px !important; border: 0 !important; }
body[data-r26] .citystats b, body[data-r26] .citystats strong, body[data-r26] .citystats .v, body[data-r26] .citystats [class*="num"] {
  display: block; font-family: var(--r-display) !important; font-size: clamp(2.4rem, 4vw, 3.4rem) !important; font-weight: 700 !important;
  letter-spacing: -0.045em !important; line-height: 1 !important; color: var(--r-ink) !important; margin-bottom: 10px;
}
body[data-r26] .citystats small, body[data-r26] .citystats span, body[data-r26] .citystats .k {
  font-family: var(--r-text) !important; letter-spacing: .02em !important; text-transform: none !important; font-size: .9rem !important; color: var(--r-muted) !important;
}
body[data-r26="dark"] .site-head { background: rgba(10,10,12,.9) !important; }
body[data-r26="dark"] .site-head select, body[data-r26="dark"] .site-head .pscope { background: transparent !important; color: #a1a1a6 !important; border: 0 !important; box-shadow: none !important; }
body[data-r26] .hsearch select, body[data-r26] .hsearch .pscope { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; font-size: .72rem !important; }
body[data-r26] .stat-display, body[data-r26] .stat-display * {
  font-family: var(--r-display) !important; font-weight: 700 !important; letter-spacing: -0.05em !important;
  font-size: clamp(3.6rem, 8vw, 6.2rem) !important; line-height: .95 !important; margin: 6px 0 14px !important;
  background: linear-gradient(170deg, var(--r-ink) 35%, var(--r-acc)); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
body[data-r26] .stat-display .u, body[data-r26] .stat-display small {
  font-family: var(--r-text) !important; font-size: 1.1rem !important; letter-spacing: 0 !important; font-weight: 500 !important;
  -webkit-text-fill-color: var(--r-muted); color: var(--r-muted) !important; margin-left: 8px;
}
body[data-r26="dark"] .hero .stat-display, body[data-r26="dark"] .hero .stat-display * { background: linear-gradient(170deg, #fff 30%, var(--r-vivid)); -webkit-background-clip: text; background-clip: text; }
body[data-r26="dark"] .hero .stat-display .u { -webkit-text-fill-color: #a1a1a6; }
body[data-r26] .stat-display, body[data-r26] .hero p.stat-display { -webkit-text-fill-color: transparent !important; color: transparent !important; }
body[data-r26] .stat-display .u { -webkit-text-fill-color: var(--r-muted) !important; background: none !important; }
body[data-r26="dark"] .hero p.stat-display .u { -webkit-text-fill-color: #a1a1a6 !important; }

/* ---- v1.2: reading width, headings, ranked lists ------------------------- */
body[data-r26] h2, body[data-r26] h2.sec, body[data-r26] h1 { border: 0 !important; padding-bottom: 0 !important; box-shadow: none !important; }
body[data-r26] h2.sec { margin-bottom: 22px !important; }
body[data-r26] .sheet::after, body[data-r26] .sheet::before, body[data-r26] .kicker::after { display: none !important; }
body[data-r26] .prose, body[data-r26] .wrap.narrow.prose { max-width: 760px !important; }
body[data-r26] .prose p, body[data-r26] .prose li, body[data-r26] main .section p {
  font-size: clamp(1.02rem, 1.3vw, 1.14rem) !important; line-height: 1.62 !important; color: var(--r-ink-2);
}
body[data-r26] .prose p + p { margin-top: 1em; }
body[data-r26] .method .formula, body[data-r26] pre, body[data-r26] code {
  border-radius: var(--r-radius-sm) !important; background: var(--r-band) !important; border: 0 !important; font-size: .85rem !important;
}
body[data-r26] main > .section:nth-of-type(odd) .method .formula { background: #fff !important; }
body[data-r26] .citystats { width: 100% !important; max-width: none !important; }
body[data-r26] .citystats > * { min-height: 150px; display: flex !important; flex-direction: column; justify-content: flex-end; }
body[data-r26] .stat-display .u { margin-left: 12px !important; display: inline-block; }
/* ranked list: generous rows, big ordinal, pill chips */
body[data-r26] .rank { padding: 6px 0 !important; }
body[data-r26] .rank > *, body[data-r26] .rank li, body[data-r26] .rank tr { padding-block: 14px !important; }
body[data-r26] .rank a { font-weight: 600; color: var(--r-ink) !important; text-decoration: none; font-size: 1.04rem; }
body[data-r26] .rank a:hover { color: var(--r-acc) !important; }
body[data-r26] .rank .n, body[data-r26] .rank .badge, body[data-r26] .rank .cnt, body[data-r26] .chip {
  border-radius: 999px !important; border: 0 !important; background: var(--r-acc-soft) !important; color: var(--r-acc) !important; font-weight: 600; padding: 3px 10px !important;
}
body[data-r26] .sec-note { margin: 0 0 32px !important; text-align: left; margin-inline: 0 !important; }
body[data-r26] .tnote { color: var(--r-muted); font-size: .85rem; margin-top: 18px; }
/* v1.3: a second heading inside the hero is a subhead, never a rival to the h1 */
body[data-r26] .hero h2, body[data-r26] .hero .answer-h { font-size: clamp(1.35rem, 2.3vw, 1.8rem) !important; letter-spacing: -0.025em !important; color: var(--r-ink-2) !important; margin-top: 6px !important; }
body[data-r26] .hero .kicker + h2 { margin-top: 4px !important; }

/* ---- v1.4: all-sites wave ------------------------------------------------ */
/* header search control: some own-shell sites (SuburbIQ, masthead variant) never styled it — the icon rendered 300px wide */
body[data-r26] .hsearch { display: inline-flex !important; align-items: center; gap: 8px; height: 38px; padding: 0 14px !important; position: relative; max-width: 240px; }
body[data-r26] .hsearch > svg, body[data-r26] .hsearch svg:first-child { width: 15px !important; height: 15px !important; flex: none; opacity: .6; }
body[data-r26] .hsearch input { background: transparent !important; border: 0 !important; min-height: 0 !important; height: 36px; padding: 0 !important; font-size: .86rem !important; box-shadow: none !important; width: 100%; }
body[data-r26] .hsearch input:focus { box-shadow: none !important; }
/* masthead variant (.masthead/.masthead-in) used by the own-shell sites — same glass treatment as .site-head */
body[data-r26] .masthead { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.74) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.08) !important; }
body[data-r26] .masthead-in { min-height: 56px; }
body[data-r26] .masthead .nav a { font-size: .86rem; font-weight: 500; color: var(--r-ink-2); border-radius: 999px; padding: 7px 14px; text-decoration: none; }
body[data-r26] .masthead .nav a:hover { background: rgba(0,0,0,.05); color: var(--r-ink); }
body[data-r26="dark"] .masthead { background: rgba(10,10,12,.9) !important; border-bottom-color: rgba(255,255,255,.08) !important; }
body[data-r26="dark"] .masthead a, body[data-r26="dark"] .masthead .nav a { color: #f5f5f7 !important; }
:root[data-theme="dark"] body[data-r26] .masthead { background: rgba(22,22,23,.78) !important; }
/* own-shell dark sites (SleepTime, SkyWatch, WhiteLights) keep a dark canvas: cards must stay dark glass there */
body[data-r26="dark"]:not([data-site]) { --r-canvas: #000; --r-band: #0b0b0d; --r-card: #161618; --r-ink: #f5f5f7; --r-ink-2: #d2d2d7; --r-muted: #a1a1a6; --r-line: #2a2a2e; --r-shadow: none; --r-shadow-hi: 0 0 0 1px #2a2a2e; }
body[data-r26="dark"]:not([data-site]) .answer, body[data-r26="dark"]:not([data-site]) .answer * { color: #f5f5f7; }
body[data-r26="dark"]:not([data-site]) .answer p, body[data-r26="dark"]:not([data-site]) .answer li { color: #d2d2d7 !important; }

body[data-r26][data-site] .lede, body[data-r26][data-site] .sec-note { margin-inline: auto; }
body[data-r26][data-site] .sec-note { margin-inline: 0 !important; }
/* header crowding: nav labels never wrap; search shrinks first */
body[data-r26] .head-nav a, body[data-r26] .masthead .nav a { white-space: nowrap; }
body[data-r26] .site-head .hsearch { max-width: 190px; }
@media (max-width: 1180px) { body[data-r26] .site-head .hsearch { max-width: 150px; } }
body[data-r26="dark"] .hero .answer h2, body[data-r26="dark"] .hero .answer h3 { color: #f5f5f7 !important; }
body[data-r26] .hsearch input { flex: 1 1 auto; min-width: 0; width: auto !important; }
body[data-r26] .hsearch .pscope, body[data-r26] .hsearch select { position: static !important; flex: none; width: auto !important; padding: 0 0 0 4px !important; text-transform: uppercase; letter-spacing: .04em; color: var(--r-muted) !important; }
body[data-r26] .hsearch .qr { position: absolute; top: calc(100% + 6px); right: 0; }