/* NatGas Central · the Degree Days page (workstream E, BUILD_SPEC §1.3, §5.3, §1.15). The landing, model-page head,
   switcher, notices, sample and paywall-frame part of the approved prototype's css/pages/dd.css (round 5/6, class names
   unchanged). The run body's CSS (cards, region strip, chart, the daily table) is the run file's own (degree_days/web/
   dd_run.css, printed by the template from the file's embed-css), so the two never disagree; the few shared rules (words
   and figures) are repeated there with the same values so a run file reads correctly from disk. Tokens only.

   One switcher bar (§1.15): the PHP prints the desktop full switcher (.dd-sw, n-only-desktop) and ONE compact bar (.dd-bar):
   pinned under the site header on phones and tablets (the prototype's .dd-bar--sticky), and on desktop fixed under the pinned
   nav, hidden until the full switcher has scrolled out (the prototype's .dd-bar--float; ngc-dd.js adds .is-on). No id
   selectors here: ngc-dd.js names the bar #dd-bar-f while it floats (the run page's script reads that id). */

.dd { position: relative; }
.dd-stack { display: flex; flex-direction: column; gap: 32px; }

/* ---------- words and figures (also in dd_run.css, same values) ---------- */
.dd-quiet { color: var(--t3); }
.dd-nw { white-space: nowrap; }
.dd-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--t3); white-space: nowrap; }

.dd-led { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.dd-led__w { font-weight: 600; }
.dd-led__sep { color: var(--t3); font-weight: 400; }
.dd-led__n { font-weight: 600; }
.dd-led__u { font-size: 13px; font-weight: 400; color: var(--t3); }
.dd-led.dd-quiet .dd-led__w { color: var(--t2); font-weight: 500; }
.dd-led.dd-quiet .dd-led__n { color: var(--t1); }
.dd-led--sm { font-size: 13px; }
.dd-led--sm .dd-led__w, .dd-led--sm .dd-led__n { font-weight: 500; }
.dd-led--lg { column-gap: 8px; row-gap: 0; }
.dd-led--lg .dd-led__w { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.dd-led--lg .dd-led__n { font-size: 28px; font-weight: 500; letter-spacing: -0.015em; }
.dd-led--lg .dd-led__sep { font-size: 22px; }
.dd-led--lg .dd-led__u { font-size: 14px; }

/* the AI chip is core's term button (tap or click opens "AI model"); it keeps the chip's look, no dotted underline */
.dd-ai.n-term { display: inline-flex; align-items: center; vertical-align: middle; text-decoration: none; }
.dd-ai.n-term .n-chip--ai { cursor: help; }
.dd-ai.n-term:hover .n-chip--ai, .dd-ai.n-term[aria-expanded="true"] .n-chip--ai { color: var(--t1); border-color: var(--t3); }

.dd-late { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--warn); white-space: nowrap; }
.dd-late svg { color: var(--warn); }

/* ---------- panels ---------- */
.dd-panel__head { padding-top: 14px; padding-bottom: 14px; }
.dd-ph { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; width: 100%; }
.dd-ph__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-ph__h { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.dd-ph__m { font-size: 13px; line-height: 1.45; color: var(--t3); }
.dd-lr__mover { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--t2); }
.dd-lr__mover strong { color: var(--t1); font-weight: 600; }
.dd-panel__foot { align-items: flex-start; }
/* the foot's text: the key line, then the window note (one column beside the "How the words work" button) */
.dd-panel__ft { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }
.dd-panel__ft p, .dd-keyline { max-width: 88ch; }
.dd-keyline { font-size: 13px; line-height: 1.5; color: var(--t3); text-wrap: pretty; }
.dd-keyline--head { margin-top: 6px; }
.dd-help { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--t2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.dd-help:hover { color: var(--t1); background: var(--raised); }
.dd-help svg { color: var(--t2); }

.dd-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* a table wider than its box fades at the edge that has more to scroll to: core's [data-scroll-x][data-more] mask */
.dd-sx { position: relative; }
.dd-tablewrap:focus-visible { outline-offset: -2px; }

/* ---------- latest runs (tablet and desktop) ---------- */
.dd-lr { width: 100%; min-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dd-lr th, .dd-lr td { padding: 10px 14px; border-bottom: 1px solid var(--hair-soft); text-align: right; vertical-align: middle; font-size: 14px; color: var(--t1); white-space: nowrap; }
.dd-lr .n-l { text-align: left; }
.dd-lr thead th { height: 36px; padding-top: 0; padding-bottom: 0; background: var(--raised); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--t2); }
.dd-lr thead th:first-child { padding-left: 22px; }
.dd-lr tbody th { font-weight: 500; }
.dd-lr__group th { height: 30px; padding: 0 22px; background: var(--ground); font-size: 12px; font-weight: 500; color: var(--t3); text-align: left; border-bottom: 1px solid var(--hair-soft); }
.dd-lr__row { cursor: pointer; }
.dd-lr__row > th { padding-left: 22px; }
.dd-lr__row:hover > th, .dd-lr__row:hover > td { background: var(--raised); }
.dd-lr__row.is-hl > th, .dd-lr__row.is-hl > td { background: var(--raised); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.dd-lr__name { display: inline-flex; align-items: center; gap: 8px; }
.dd-lr__m { font-size: 15px; font-weight: 600; color: var(--t1); }
.dd-lr__m:hover { color: var(--accent); }
.dd-lr__flag { display: block; margin-top: 5px; }
.dd-lr__run { font-size: 14px; color: var(--t1); }
.dd-lr__tot { font-size: 15px; font-weight: 600; }
.dd-lr__go { width: 40px; padding-left: 0 !important; padding-right: 18px !important; color: var(--t3); }
.dd-lr__go svg { display: inline-block; }
.dd-lr__row:hover .dd-lr__go { color: var(--accent); }
.dd-lr__row.is-late .dd-lr__run { color: var(--t1); }
.dd-lr thead tr.dd-lr__grp th, .dd-lr thead tr.dd-lr__grp td { height: 30px; background: transparent; border-bottom: 1px solid var(--hair); font-size: 12px; font-weight: 500; color: var(--t3); }
.dd-lr thead tr.dd-lr__grp th { color: var(--t2); }
.dd-lr .dd-lr__gsep { border-left: 1px solid var(--hair-soft); }
.dd-lr thead .dd-lr__gsep { border-left-color: var(--hair); }
/* "published 07:27 ET" under the run time: only at 700-899, where the Published column gives up its room (below) */
.dd-lr__pubsub { display: none; }
/* 700-959: the table fits its box instead of scrolling sideways; the group headings and the HDD/CDD lines may wrap */
@media (min-width: 700px) and (max-width: 959px) {
  .dd-lr { min-width: 0; }
  .dd-lr thead tr.dd-lr__grp th { white-space: normal; }
}
/* 700-899: the Published column shrinks to nothing (screen readers still read it, the colspans hold) and its time moves under
   the run time, as in the phone list */
@media (min-width: 700px) and (max-width: 899px) {
  .dd-lr .dd-lr__pub { width: 0; padding: 0; font-size: 0; }
  .dd-lr .dd-lr__pub > * { display: none; }
  .dd-lr .dd-lr__pubsub { display: block; }
  .dd-lr .dd-late { display: flex; width: max-content; margin: 3px 0 0; }
}

/* ---------- latest runs (phone list) ---------- */
.dd-lrm { display: flex; flex-direction: column; }
.dd-lrm__group { padding: 9px 16px 7px; background: var(--ground); border-bottom: 1px solid var(--hair-soft); font-size: 12px; font-weight: 500; color: var(--t3); }
.dd-lrm__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l go" "r go"; align-items: center; column-gap: 10px; row-gap: 8px; min-height: 68px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--hair-soft); color: var(--t1); }
/* the model name is the row's link, its ::after stretched over the whole row (one tap target); the AI chip and the first run
   time are buttons above it (z-index), so no button sits inside a link */
.dd-lrm__a, .dd-cmp__a { color: var(--t1); text-decoration: none; }
.dd-lrm__a::after, .dd-cmp__a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.dd-lrm__a:focus-visible, .dd-cmp__a:focus-visible { outline: none; }
.dd-lrm__a:focus-visible::after, .dd-cmp__a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 2px; }
.dd-lrm__row .n-term, .dd-cmp__row .n-term { z-index: 4; }
.dd-lrm__go { grid-area: go; display: flex; align-items: center; color: var(--t3); }
.dd-lrm__row:last-child { border-bottom: 0; }
.dd-lrm__row:hover { background: var(--raised); color: var(--t1); }
.dd-lrm__row.is-hl { background: var(--raised); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.dd-lrm__l { grid-area: l; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dd-lrm__m { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dd-lrm__s { font-size: 12px; line-height: 1.4; color: var(--t3); }
.dd-lrm__l .dd-late { margin-left: 0; font-size: 12px; }
.dd-lrm__r { grid-area: r; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dd-lrm__v { display: inline-flex; align-items: baseline; gap: 6px; }
.dd-lrm__k { font-size: 11px; color: var(--t3); white-space: nowrap; }

/* ---------- compare models ---------- */
.dd-cmp { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 36px; align-items: start; }
.dd-cmp__plot { --cmp-name: 176px; --cmp-val: 190px; --cmp-m: 12px; min-width: 0; }
.dd-cmp__row, .dd-cmp__group, .dd-cmp__axis { display: grid; grid-template-columns: var(--cmp-name) minmax(0, 1fr) var(--cmp-val); align-items: stretch; }
.dd-cmp__row { position: relative; min-height: 54px; border-bottom: 1px solid var(--hair-soft); color: var(--t1); }
.dd-cmp__row:hover { background: var(--raised); color: var(--t1); }
.dd-cmp__row.is-sel { background: var(--raised); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.dd-cmp__group > span:first-child { align-self: end; padding: 12px 0 5px; font-size: 12px; font-weight: 500; color: var(--t3); }
.dd-cmp__name { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; padding: 7px 0 7px 2px; }
.dd-cmp__nl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
/* the name and its AI chip stay on one line */
.dd-cmp__nm { white-space: nowrap; font-size: 14px; font-weight: 600; }
.dd-cmp__run { font-size: 12px; line-height: 1.35; color: var(--t3); }
.dd-cmp__run--late { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 500; }
.dd-cmp__run--late svg { flex: none; color: var(--warn); }
.dd-cmp__sel { font-size: 12px; color: var(--t3); }
.dd-cmp__track { position: relative; margin: 0 var(--cmp-m); min-height: 24px; }
.dd-cmp__track::before, .dd-cmp__track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.dd-cmp__track::before { left: 25%; }
.dd-cmp__track::after { left: 75%; }
/* zero is the normal, drawn as the charts draw it: 2 px round dots every 5 px in --ref, one unbroken rule down every row (the
   centre of the track column), starting just under its "Normal 121.2 TDD" label */
.dd-cmp__rows { position: relative; }
.dd-cmp__zline { position: absolute; top: -5px; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; pointer-events: none;
  left: calc(var(--cmp-name) + var(--cmp-m) + (100% - var(--cmp-name) - var(--cmp-val) - 2 * var(--cmp-m)) / 2);
  background: radial-gradient(circle at 1px 1px, var(--ref) 1px, transparent 1.45px) 0 0 / 2px 5px repeat-y; }
.dd-cmp__stem { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--control); z-index: 1; }
.dd-cmp__dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--t1); box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.dd-cmp__row:hover .dd-cmp__dot, .dd-cmp__row.is-sel .dd-cmp__dot { box-shadow: 0 0 0 2px var(--raised); }
.dd-cmp__dot--late { background: var(--surface); border: 2px solid var(--warn); }
.dd-cmp__row:hover .dd-cmp__dot--late, .dd-cmp__row.is-sel .dd-cmp__dot--late { background: var(--raised); }
.dd-cmp__val { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 6px 2px 6px 8px; text-align: right; font-size: 13px; }
.dd-cmp__axis .dd-cmp__ticks { position: relative; height: 24px; margin: 0 var(--cmp-m); }
.dd-cmp__ticks > span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11px; color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-cmp__axis--top .dd-cmp__ticks { height: 26px; }
.dd-cmp__axis--top .dd-cmp__ticks > span { top: 2px; }
.dd-cmp__norm { font-size: 12px !important; font-weight: 500; color: var(--ref-caption) !important; }
.dd-cmp__normv { color: var(--ref); font-weight: 600; }
.dd-cmp__vh { align-self: center; font-size: 12px; color: var(--t3); text-align: right; padding-right: 2px; }
.dd-cmp__axt { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 2px 12px 0; font-size: 12px; color: var(--t2); text-align: center; }
.dd-cmp__mid { color: var(--t3); }
.dd-cmp__note { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.6; color: var(--t2); }
.dd-cmp__recon { font-size: 13px; color: var(--t3); }
.dd-cmp__late { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--t2); }
.dd-cmp__late svg { flex: none; margin-top: 3px; color: var(--warn); }
.dd-cmp__late strong { color: var(--t1); font-weight: 600; }

/* ---------- about ---------- */
.dd-about { max-width: 760px; }
.dd-about > h2 { margin-bottom: 6px; }
.dd-about .n-acc__body { padding-bottom: 14px; }
.dd-attr { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; color: var(--t2); }

/* ---------- model page head + switcher ---------- */
.dd-crumb { margin-bottom: 14px; font-size: 14px; }
.dd-crumb .n-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
/* the run-hour switch and its "?" (what 06Z means) */
.dd-cyc { display: inline-flex; align-items: center; gap: 2px; }
.dd-cyc__q { margin-left: 6px; }
.dd-mhead { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
/* a block heading, so the AI chip stays on the line of the name's last word */
.dd-mhead .n-h1 .dd-ai { margin-left: 12px; vertical-align: 0.2em; }
.dd-mhead .n-chip--ai { height: 22px; font-size: 12px; }
.dd-mhead__m { font-size: 15px; line-height: 1.55; color: var(--t2); }

.dd-sw { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.dd-sw__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 36px; }
.dd-sw__k { flex: none; width: 44px; font-size: 13px; font-weight: 500; color: var(--t2); }
.dd-sw__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.dd-sw__g { display: inline-flex; align-items: center; gap: 10px; }
.dd-sw__gl { font-size: 12px; color: var(--t3); white-space: nowrap; }
.dd-sw .n-seg__b, .dd-bar .n-seg__b { height: 32px; padding: 0 12px; font-size: 13px; }
/* a model or run-hour link in the switcher is the seg's pressed button when it is the page's own (aria-current) */
.dd-sw a.n-seg__b, .dd-bar a.n-seg__b, .dd-bar__sub a.n-seg__b { text-decoration: none; }
.dd-sw__ai { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; margin-left: 2px; border: 1px solid var(--line); border-radius: var(--r-xs); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--t3); }
.dd-sw__run { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.dd-pub { margin-left: auto; font-size: 13px; color: var(--t3); white-space: nowrap; }
.dd-pub strong { color: var(--t1); font-weight: 600; }

.dd-step { display: inline-flex; align-items: center; gap: 6px; }
.dd-step__d { min-width: 88px; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; }
.dd-step .n-iconbtn[disabled], .dd-step .n-iconbtn[aria-disabled="true"] { opacity: 0.5; }

.dd-bar__in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.dd-msel { width: 220px; flex: none; }
.dd-msel .n-select { height: 40px; font-size: 14px; }
.dd-msel .n-selectwrap > svg { top: 12px; }

/* phones and tablets: pinned under the site bar (--pin-h = the pinned bar's height at every width) */
@media (max-width: 1099px) {
  .dd-bar { position: sticky; top: var(--pin-h, 0px); z-index: 12; margin: 0 calc(-1 * var(--gutter)) 20px; padding: 10px var(--gutter); background: var(--ground); border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair); }
}
/* desktop: fixed under the pinned nav, hidden until the full switcher scrolls up behind the nav (ngc-dd.js adds .is-on) */
@media (min-width: 1100px) {
  .dd-bar { position: fixed; top: var(--pin-h, 0px); left: 0; right: 0; z-index: 15; padding: 8px 0; background: var(--ground); border-bottom: 1px solid var(--hair); box-shadow: var(--shadow); transform: translateY(-110%); visibility: hidden; transition: transform .16s ease, visibility 0s linear .16s; }
  .dd-bar.is-on { transform: none; visibility: visible; transition: transform .16s ease; }
  .dd-bar .dd-bar__in { flex-wrap: nowrap; 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)); }
  /* keyboard focus clears the pinned nav and the 57 px float bar under it (WCAG 2.4.11) */
  html:has(.dd-bar) { scroll-padding-top: calc(var(--pin-h, 0px) + 69px); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  .dd-bar, .dd-bar.is-on { transition: none; }
}

/* the run file's own "Published …" line (its filled marker) repeats the switcher's (or the sample head's): shown only when the
   page says it nowhere else */
.dd--pubshown .dd-run__pub { display: none; }

.dd .n-noticerow { margin-bottom: 20px; }
.dd-older { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); font-size: 14px; line-height: 1.5; color: var(--t2); }
.dd-older > svg { color: var(--t2); }

/* ---------- a run file from before the Night Desk run pages (v1): today's viewer, an auto-height frame ---------- */
.dd-v1 { margin-top: 4px; }
.dd-v1__frame { display: block; width: 100%; min-height: 1300px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--ground); }

/* ---------- sample mode ---------- */
.dd-sbar { background: var(--surface); border-bottom: 1px solid var(--hair); }
.dd-sbar__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.dd-sbar__l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; line-height: 1.45; color: var(--t2); }
.dd-sbar__t { color: var(--t2); }
.dd-close { margin-top: 40px; }
.dd-close .n-panel__body { display: flex; flex-direction: column; gap: 14px; padding: 28px; max-width: 900px; }
.dd-close__price { font-size: 16px; color: var(--t2); }
.dd-close__price strong { color: var(--t1); }
/* the members-only © line of the run's footer is not the sample reader's (the run file marks it) */
.dd--sample .dd-foot__c { display: none; }

/* ---------- the words dialog (the landing's copy; run pages print their own inside the run) ---------- */
.dd-words { display: flex; flex-direction: column; gap: 12px; }
.dd-words__lead { font-size: 14px; line-height: 1.55; color: var(--t1); text-wrap: pretty; }
.dd-words__lead .n-ddkey__s { color: var(--t1); }
.dd-words__list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--t2); }
.dd-wx { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-sm); }
.dd-wx__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.dd-wx__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }

/* ---------- the empty frame under the paywall (no numbers, no tables: plain shapes, §1.11) ---------- */
.dd-skel { pointer-events: none; user-select: none; }
.dd-skel .n-panel__body { display: flex; flex-direction: column; }
.dd-skel__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 52px; padding: 0 22px; border-bottom: 1px solid var(--hair-soft); }
.dd-skel__row:last-child { border-bottom: 0; }
.dd-skel__b { display: block; height: 10px; width: 70%; border-radius: 5px; background: var(--hair); }
.dd-skel__b--name { width: 55%; height: 12px; background: var(--line); }
.dd-skel__b--wide { width: 90%; }
.dd-skel__b--short { width: 40%; }
.dd-skel__b--big { height: 22px; width: 60%; margin: 6px 0; background: var(--line); }
.dd-skel__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 24px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.dd-skel__card { display: flex; flex-direction: column; gap: 8px; min-height: 120px; padding: 18px 20px; background: var(--surface); }
.dd-skel__panel { overflow: hidden; }
.dd-skel__chart { height: 220px; margin: 20px 22px; border-radius: var(--r-sm); background: linear-gradient(to top, var(--hair-soft) 1px, transparent 1px) 0 0 / 100% 44px; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .dd-cmp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dd-cmp__note { max-width: 680px; }
  .dd-msel { width: 200px; }
  .dd-lr th, .dd-lr td { padding-left: 10px; padding-right: 10px; }
  .dd-lr .dd-sub { white-space: normal; }
  .dd-lr thead th:first-child, .dd-lr__row > th, .dd-lr__group th { padding-left: 16px; }
  .dd-bar__in { gap: 8px 14px; }
  /* keyboard focus and jumps clear the site bar and this page's pinned switcher */
  html:has(.dd-bar) { scroll-padding-top: calc(var(--pin-h, 0px) + 76px); }
  .dd-skel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 700-899: a narrower model select and tighter gaps keep the switcher on one line */
@media (min-width: 700px) and (max-width: 899px) {
  .dd-msel { width: 168px; }
  .dd-bar__in { gap: 8px 12px; }
  .dd-bar .dd-cyc__q { margin-left: 4px; }
}
/* 700-959: "Published" leaves the pinned bar for the in-page row just below it (.dd-bar__sub), so the bar (select, run switch,
   ?, stepper) is one line on every run. From 960 px the bar has room for it and .dd-bar__sub is hidden. */
@media (min-width: 700px) and (max-width: 959px) {
  .dd-bar .dd-pub { display: none; }
  .dd-bar__sub { display: flex; justify-content: flex-end; margin: 8px 0 12px; }
  .dd-bar__sub .dd-bar__cyc { display: none; }
  .dd-bar__sub .dd-pub { font-size: 13px; }
}
@media (min-width: 960px) { .dd-bar__sub { display: none; } }
/* the landing's Latest runs table below 720 px: a little less padding keeps "Warmer · +15.9" on one line */
@media (min-width: 700px) and (max-width: 719px) {
  .dd-lr th, .dd-lr td { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 899px) {
  .dd-cmp__axis--title { display: flex; justify-content: center; }
  .dd-cmp__axis--title > span:empty { display: none; }
  .dd-cmp__axis--title .dd-cmp__axt { margin: 4px 0 0; }
  .dd-cmp__mid { order: -1; width: 100%; }
}

/* ---------- phone ---------- */
@media (max-width: 699px) {
  .dd-stack { gap: 24px; }
  .dd-panel__head { padding-top: 12px; padding-bottom: 12px; }
  .dd-ph__h { font-size: 18px; }
  .dd-panel__foot { flex-direction: column; }
  .dd-panel__ft { flex-basis: auto; }
  .dd-help { height: 44px; }

  /* Compare: each row is two rows, the name and its value on the first, the track across the full width under them. Zero (the
     normal) is drawn on each track, since a rule down the rows would cross the names and values */
  .dd-cmp__plot { --cmp-m: 8px; }
  .dd-cmp__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track track"; column-gap: 10px; min-height: 0; }
  .dd-cmp__name { grid-area: name; padding: 9px 0 4px 2px; }
  .dd-cmp__val { grid-area: val; padding: 9px 2px 4px 0; }
  .dd-cmp__row > .dd-cmp__track { grid-area: track; margin: 0 var(--cmp-m) 10px; min-height: 22px;
    background: radial-gradient(circle at 1px 1px, var(--ref) 1px, transparent 1.45px) 50% 0 / 2px 5px repeat-y; }
  .dd-cmp__zline { display: none; }
  .dd-cmp__group { grid-template-columns: minmax(0, 1fr); }
  .dd-cmp__group > span:not(:first-child) { display: none; }
  .dd-cmp__axis { grid-template-columns: minmax(0, 1fr); }
  .dd-cmp__axis > span:empty { display: none; }
  .dd-cmp__axis--top { position: relative; }
  .dd-cmp__axis--top .dd-cmp__vh { position: absolute; top: 2px; right: 2px; }
  .dd-cmp__nm { font-size: 14px; }
  .dd-cmp__name .dd-ai .n-chip--ai { height: 18px; padding: 0 4px; }
  .dd-cmp__val { font-size: 12px; }
  .dd-cmp__val .dd-led { font-size: 14px; }
  .dd-cmp__val .dd-sub, .dd-cmp__norm, .dd-cmp__ticks > span, .dd-cmp__axt, .dd-cmp__vh, .dd-cmp__run, .dd-cmp__sel { font-size: 12px !important; }
  .dd-cmp__axt { margin: 2px 8px 0; }
  .dd-cmp__note { font-size: 14px; }

  /* the one-tap way back to Degree Days gets the 44 px phone tap height; the margins take back the 12 px */
  .dd-crumb { margin-top: -6px; margin-bottom: 8px; }
  .dd-crumb .n-link { min-height: 44px; }
  .dd-mhead { margin-bottom: 16px; }
  .dd-mhead__m { font-size: 14px; }
  /* the pinned part is one row, model select + date stepper (44 + 2 x 5 px + the border = 56 px); the run-hour switch and
     "Published" are .dd-bar__sub just below it, in the page, and scroll away */
  .dd-bar { padding-top: 5px; padding-bottom: 5px; margin-bottom: 0; border-top: 0; }
  .dd-bar__in { flex-wrap: nowrap; gap: 8px; }
  .dd-msel { order: 1; flex: 1 1 120px; min-width: 0; width: auto; }
  /* 16 px like core's phone selects, so iOS doesn't zoom the page when the model select is tapped */
  .dd-msel .n-select { height: 44px; font-size: 16px; }
  .dd-msel .n-selectwrap > svg { top: 14px; }
  .dd-bar .dd-step { order: 2; flex: none; gap: 2px; }
  .dd-bar .dd-step__d { min-width: 72px; font-size: 13px; }
  .dd-step .n-iconbtn--sm { width: 44px; height: 44px; }
  .dd-bar__sub { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 16px; }
  .dd-bar__sub .n-seg__b { height: 44px; padding: 0 10px; font-size: 13px; }
  .dd-bar__sub .dd-pub { margin-left: auto; font-size: 12px; }
  html:has(.dd-bar) { scroll-padding-top: calc(var(--pin-h, 0px) + 68px); }

  .dd-sbar__in { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
  .dd-sbar__in .n-btn { width: 100%; height: 44px; }
  .dd-lrm__k { font-size: 12px; }
  /* the AI chip's tap area is about 44 px, so a slightly-off tap opens its bubble rather than the row's link */
  .dd-ai.n-term::after { inset: -13px -8px; }
  .dd-close .n-panel__body { padding: 20px 16px; }
  .dd-v1__frame { min-height: 1100px; }

  .dd-skel__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 16px; }
  .dd-skel__row > :nth-child(n+3) { display: none; }
  .dd-skel__card { min-height: 96px; padding: 14px; }
  .dd-skel__chart { height: 160px; margin: 16px; }
}

/* below 360 px (320 phones): Compare's name and value share one line above the track, so the HDD/CDD line may wrap */
@media (max-width: 359px) {
  .dd-cmp__plot { --cmp-m: 6px; }
  .dd-cmp__val .dd-sub { white-space: normal; }
  .dd-cmp__val .dd-led { justify-content: flex-end; }
  .dd-cmp__val .dd-led__sep { display: none; }
}
/* the smallest phones (360 px): the pinned date stepper shows "27 Sep" (the run's heading below says the weekday), which gives
   the model select the room "AIFS Ens Mean" needs at 16 px */
@media (max-width: 374px) {
  .dd-bar .dd-step__wd { display: none; }
  .dd-bar .dd-step__d { min-width: 52px; }
}

/* ---------- the landing's "as of" views (Rob, 7 Oct 2026): the line under the head and the picker ----------
   The picker is the model switcher's pattern (§1.15): on tablet and desktop one row in the switcher's box (As of · Latest · the day
   list · the four cycles · earlier / later); on phones one select and the two steps, 44 px each, one line from 360 px. */
/* icon | text: the text (and "Back to latest" inline after it) wraps beside the icon at every width */
.dd-asof-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; margin: 0 0 16px; padding: 10px 16px; background: var(--accent-quiet); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; line-height: 1.5; color: var(--t1); }
.dd-asof-note > svg { margin-top: 3px; color: var(--accent); }
.dd-asof-note strong { font-weight: 600; white-space: nowrap; }
.dd-asof-note__sep { margin: 0 2px; color: var(--t3); }
.dd-asof-note__back { white-space: nowrap; font-weight: 500; }
.dd-asof-note--quiet { background: var(--surface); border-color: var(--hair); color: var(--t2); }
.dd-asof-note--quiet > svg { color: var(--t3); }
.dd-asof-note__n { white-space: nowrap; }
/* a cycle view's row marker (Rob, 7 Oct): why a row shows the model's run before the cycle ("no 06Z run · showing 00Z", "06Z run
   not in yet · …", "00Z run missing · showing 18Z 6 Oct"), under the run time in Latest runs (table and phone list) and Compare models */
.dd-mark { display: flex; align-items: flex-start; gap: 4px; max-width: 100%; margin-top: 3px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--t2); white-space: normal; }
.dd-mark > svg { flex: none; margin-top: 2px; color: var(--t3); }
.dd-mark--no_run { font-weight: 400; color: var(--t3); }
.dd-lrm__l .dd-mark { margin-top: 0; }
.dd-cmp__name .dd-mark { margin-top: 0; }

.dd-asof { margin-bottom: 24px; }
.dd-asof__wide { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); }
.dd-asof__k { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 13px; font-weight: 500; color: var(--t2); white-space: nowrap; }
.dd-asof__q { margin-left: 4px; }
.dd-asof .n-seg { align-self: center; }
.dd-asof .n-seg__b { height: 32px; padding: 0 12px; font-size: 13px; }
.dd-asof__day { flex: none; width: 148px; }
.dd-asof__day .n-select { height: 36px; font-size: 14px; }
.dd-asof__day .n-selectwrap > svg { top: 10px; }
.dd-asof__wide .dd-asof__step { margin-left: auto; }
/* phones: "As of ?" and the earlier / later steps on one line, the select below at the full width (review 7 Oct: the count of a
   cycle still filling reads in the closed select) */
.dd-asof__phone { display: flex; flex-direction: column; gap: 6px; }
.dd-asof__lab { display: flex; align-items: center; gap: 2px; margin: 0; font-size: 13px; font-weight: 500; color: var(--t2); }
.dd-asof__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dd-asof__sel { min-width: 0; }
/* 700-899: tighter gaps and a narrower day list keep the earlier / later steps on the picker's one line (review 7 Oct; after the
   rules above, so it wins) */
@media (min-width: 700px) and (max-width: 899px) {
  .dd-asof__wide { gap: 10px 10px; padding: 12px 16px; }
  .dd-asof__day { width: 136px; }
}
/* touch screens from 700 px (tablets): every picker control and "Back to latest" 44 px tall, as on phones (review 7 Oct) */
@media (min-width: 700px) and (pointer: coarse) {
  .dd-asof .n-seg__b, .dd-asof .n-select { min-height: 44px; }
  .dd-asof .dd-step__b { min-width: 44px; min-height: 44px; }
  .dd-asof__day .n-selectwrap > svg { top: 14px; }
  .dd-asof-note__back { display: inline-flex; align-items: center; min-height: 44px; }    /* its text stays on the line's baseline */
}
@media (max-width: 699px) {
  .dd-asof { margin-bottom: 20px; }
  .dd-asof-note { padding: 8px 12px; font-size: 14px; }
  /* the count and "Back to latest" take their own lines: no dot left at a line's end (review 7 Oct) */
  .dd-asof-note__sep { display: none; }
  .dd-asof-note__n { display: block; }
  /* the way back: its own line, a 44 px tap target on phones */
  .dd-asof-note__back { display: flex; align-items: center; width: max-content; min-height: 44px; margin-bottom: -8px; }
  /* 16 px like core's phone selects (iOS doesn't zoom the page); the steps are core's 44 px icon buttons */
  .dd-asof__sel .n-select { height: 44px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dd-asof__sel .n-selectwrap > svg { top: 14px; }
  .dd-asof__phone .dd-step { flex: none; gap: 4px; }
}

/* ---------- print: the page as read, without the pinned bars and the switcher ---------- */
@media print {
  .dd-bar, .dd-bar__sub, .dd-sw, .dd-asof, .dd-help, .dd-sbar .n-btn, .dd-close .n-btnrow { display: none !important; }
  .dd-lr__row:hover > th, .dd-lr__row:hover > td, .dd-lrm__row:hover, .dd-cmp__row:hover { background: transparent; }
  .dd-cmp__dot, .dd-cmp__stem, .dd-cmp__zline, .dd-cmp__row > .dd-cmp__track { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dd-panel, .dd-cmp__row, .dd-lrm__row, .dd-lr tr { break-inside: avoid; }
  .dd-v1__frame { min-height: 0; border: 0; }
}