/* NatGas Central · base: reset, type scale, layout utilities, accessibility (A1-04; port of proto/css/base.css, round 5).
   The reset is scoped to our own documents, so Astra, WooCommerce and plugin markup on any other page is never touched:
     - html rules apply to html[data-chrome] (every Night Desk template and generated report/degree-day page prints it),
     - body rules to body.ngc (templates call body_class('ngc'); the generated pages print class="ngc"),
     - element rules to descendants of body.ngc.
   Scoping uses :where(), so every rule keeps the prototype's exact specificity (an element rule stays (0,0,1)) and the
   component classes in ngc-components.css win exactly as they do in the prototype.
   Core classes use the `n-` prefix; page CSS uses its own prefix (hm- ct- db- dd- rp- rs- ac- acct-).
   Canonical copy: child-theme/assets/css/ngc-base.css (synced into ngc_web/static/shared/ by tools/sync_web_assets.py). */

:where(body.ngc), :where(body.ngc) *, :where(body.ngc) *::before, :where(body.ngc) *::after { box-sizing: border-box; }
html:where([data-chrome]) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
html:where([data-chrome]), body:where(.ngc) { margin: 0; padding: 0; }
body:where(.ngc) {
  min-height: 100vh;
  background: var(--ground);
  color: var(--t1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
:where(body.ngc) img, :where(body.ngc) svg, :where(body.ngc) canvas, :where(body.ngc) video { display: block; max-width: 100%; }
:where(body.ngc) svg { flex: none; }
:where(body.ngc) button, :where(body.ngc) input, :where(body.ngc) select, :where(body.ngc) textarea { font: inherit; color: inherit; }
:where(body.ngc) button { cursor: pointer; }
:where(body.ngc) a { color: var(--accent); text-decoration: none; }
:where(body.ngc) a:hover { color: var(--accent-hover); }
:where(body.ngc) p { margin: 0; }
:where(body.ngc) h1, :where(body.ngc) h2, :where(body.ngc) h3, :where(body.ngc) h4, :where(body.ngc) h5, :where(body.ngc) h6 { margin: 0; font-weight: 600; color: var(--t1); text-wrap: balance; }
:where(body.ngc) ul, :where(body.ngc) ol { margin: 0; padding: 0; }
:where(body.ngc) dl, :where(body.ngc) dd { margin: 0; }
:where(body.ngc) table { border-collapse: collapse; border-spacing: 0; }
:where(body.ngc) hr { border: 0; height: 1px; background: var(--hair); margin: 0; }
:where(body.ngc) summary { list-style: none; cursor: pointer; }
:where(body.ngc) summary::-webkit-details-marker { display: none; }
:where(body.ngc) ::selection { background: var(--accent-quiet); color: var(--t1); }

/* focus: always visible for keyboard users */
:where(body.ngc) :focus { outline: none; }
:where(body.ngc) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(body.ngc), :where(body.ngc) *, :where(body.ngc) *::before, :where(body.ngc) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- type ---------- */
.n-display { font-size: 48px; font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; max-width: 600px; }
.n-h1 { font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; }
.n-h2 { font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; }
.n-h2r { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }   /* report section title / sub-block h3 */
.n-h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.n-h4 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.n-overline { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); line-height: 1.3; }
.n-lede { font-size: 18px; line-height: 1.55; color: var(--t2); max-width: 640px; text-wrap: pretty; }
.n-body { font-size: 16px; line-height: 1.6; color: var(--t2); text-wrap: pretty; }
.n-small { font-size: 14px; line-height: 1.5; color: var(--t2); }
.n-caption { font-size: 12px; line-height: 1.5; color: var(--t3); }
.n-meta { font-size: 13px; line-height: 1.45; color: var(--t3); }
.n-serif { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--reading); max-width: var(--reading-max); text-wrap: pretty; }
.n-mono { font-family: var(--mono); letter-spacing: 0.02em; }
.n-tnum { font-variant-numeric: tabular-nums; }
.n-nowrap { white-space: nowrap; }
.n-t1 { color: var(--t1); } .n-t2 { color: var(--t2); } .n-t3 { color: var(--t3); }
.n-up { color: var(--up); } .n-down { color: var(--down); }
.n-warm { color: var(--warm); } .n-cold { color: var(--cold); }
.n-strong { color: var(--t1); font-weight: 600; }
.n-link { color: var(--accent); font-weight: 500; }
.n-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 699px) {
  .n-display { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
  .n-h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; }
  .n-h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.012em; }
  .n-h2r { font-size: 19px; line-height: 1.3; }
  .n-lede { font-size: 17px; }
  .n-serif { font-size: 16px; line-height: 1.65; }
}

/* ---------- layout ---------- */
.n-wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }   /* round 5: landscape notch */
.n-wrap--report { max-width: calc(var(--report-max) + 2 * var(--gutter)); }
.n-wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.n-stack { display: flex; flex-direction: column; }
.n-row { display: flex; align-items: center; }
.n-row--wrap { flex-wrap: wrap; }
.n-between { justify-content: space-between; }
.n-gap-1 { gap: 4px; } .n-gap-2 { gap: 8px; } .n-gap-3 { gap: 12px; } .n-gap-4 { gap: 16px; } .n-gap-5 { gap: 20px; } .n-gap-6 { gap: 24px; } .n-gap-7 { gap: 32px; } .n-gap-8 { gap: 40px; } .n-gap-10 { gap: 56px; }
.n-grow { flex: 1 1 auto; min-width: 0; }
.n-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.n-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.n-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.n-section { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.n-band { background: var(--surface); border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); }
.n-page { padding-top: 48px; padding-bottom: 88px; }
.n-page-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
@media (max-width: 1099px) {
  .n-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .n-grid12 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .n-grid12 > * { grid-column: 1 / -1 !important; }
  .n-cols-2, .n-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .n-section { padding-top: 56px; padding-bottom: 56px; }
  .n-page { padding-top: 24px; padding-bottom: 56px; }   /* round 5 (SPEC5 C9): one phone top rhythm */
  .n-page-head { margin-bottom: 24px; }
}

/* visibility by breakpoint (phone ≤ 699 · tablet 700–1099 · desktop ≥ 1100). Server-rendered pages print both variants of a
   markup branch and let these classes pick one (BUILD_SPEC §1.15); the phone copy's ids end in -m. */
@media (max-width: 699px) { .n-hide-phone { display: none !important; } }
@media (min-width: 700px) { .n-only-phone { display: none !important; } }
@media (max-width: 1099px) { .n-only-desktop { display: none !important; } }
@media (min-width: 1100px) { .n-hide-desktop { display: none !important; } }

/* wide content scrolls inside its own box, never the page (the QA overflow check ignores [data-scroll-x]) */
[data-scroll-x] { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; }   /* relative: absolutely positioned children (.n-sr) stay inside the clip */
[data-scroll-x]:focus-visible { outline-offset: -2px; }

.n-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.n-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--fill); color: var(--on-fill); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; }
.n-skip:focus { top: 8px; color: var(--on-fill); }

/* page shell. The prototype's #app column (min-height 100vh, the footer pushed to the bottom by its margin-top: auto) is
   .n-app on the real site, for a template that wraps its strip/header/main/footer in one element; <main> is .n-main. */
.n-app { min-height: 100vh; display: flex; flex-direction: column; }
.n-app > main, .n-main { flex: 1 0 auto; min-width: 0; }
.n-main:focus { outline: none; }

/* Astra's scroll-to-top button belongs to the old pages: ngc_enqueue_prepare() switches it off on our templates (it is styled
   only by Astra's CSS, which they dequeue); this hides it should any copy of it still be printed. */
body:where(.ngc) #ast-scroll-top { display: none !important; }