/* Pennsylvania hub (/solar/pennsylvania/): the layout of the site.css components on this page only. Colours, type and spacing are site.css tokens; no colour is written as a raw value. Sections: captions under the pictures, a deep full-width data band and a deep compare band between white and sky soft bands, a ZIP entry in the compare band; 16 px type floor. */

/* breadcrumb: the current item carries its own separator spacing ("Home / Solar / Pennsylvania", not "Solar /Pennsylvania") */
.sb-breadcrumb li[aria-current="page"]::before { margin-right: 8px; }
/* headings break at spaces only */
h1, h2, h3, h4 { hyphens: manual; }

/* ---- the section list: the pinned jump bar from 64em; below that the collapsed "On this page" list (the bar would hide most of its ten items off the edge of a phone) ---- */
.pa-jump { display: none; }
.pa-jump a { position: relative; }   /* the visually hidden tail of a label is positioned inside its link, so the scrolling bar clips it and the page gains no sideways scroll */
.pa-toc { background: var(--paper); border-bottom: 1px solid var(--line); }
.pa-toc .wrap { padding-block: 0; }
.pa-toc details > summary { border-top: 0; border-bottom: 0; }
.pa-toc ol { border-top: 1px solid var(--rule); }
@media (min-width: 64em) { .pa-jump { display: block; } .pa-toc { display: none; } }
/* ten labels in a 976 px bar: tighter padding from 64em to 80em, and a fade on the right edge tells a reader the bar scrolls when it still does not fit (larger text, narrower window) */
@media (min-width: 64em) and (max-width: 79.99em) { .pa-jump a { padding-inline: 9px; } .pa-jump li:first-child a { padding-left: 0; } }
.pa-jump ul { -webkit-mask-image: linear-gradient(to right, var(--paper) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--paper) calc(100% - 28px), transparent); }

/* ---- one band per section: the heading pinned left, the section right (the Solar page's layout) ---- */
.pa-band .sb-split__b > h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-1); font-size: var(--fs-h4); line-height: 1.28; letter-spacing: var(--trk-h3); }
.pa-band .sb-split__b > h3:first-child { margin-top: 0; }
.pa-band .sb-split__b > p { max-width: var(--measure); }
.pa-band .sb-split__b > p.sb-source { max-width: 33em; }

/* rules at a glance: the sentence, then its source chips under it */
.pa-band .sb-glance { max-width: 38rem; }
.pa-band .sb-glance li { grid-template-columns: minmax(0, 1fr); padding: 20px 0; gap: 12px; }
.pa-band .sb-glance li > span:first-child { max-width: 35rem; font-size: 1.1875rem; line-height: 1.55; }
.pa-band .sb-chips { justify-content: flex-start; }

/* steps inside a band: the compact numerals the document layout used */
.pa-band .sb-split__b .sb-steps { margin-top: var(--sp-4); }
.pa-band .sb-split__b .sb-steps > li { grid-template-columns: 3.5rem minmax(0, 1fr); padding: var(--sp-4) 0 var(--sp-5); }
.pa-band .sb-split__b .sb-steps > li::before { font-size: 2.5rem; }
.pa-band .sb-split__b .sb-steps h4 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; }
@media (min-width: 48em) { .pa-band .sb-split__b .sb-steps > li { grid-template-columns: 4.5rem minmax(0, 1fr); } }

/* the credit year strip in the narrow pinned column: four year boxes in a row, the "Ended" box under them (the year digits must not break) */
.pa-band .sb-years { grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); }
.pa-band .sb-years li { min-height: 72px; font-size: 1.25rem; padding-inline: 2px; }
.pa-band .sb-years li.sb-years__end { grid-column: 1 / -1; min-height: 0; font-size: 1rem; padding: 12px 14px; }
.pa-band .sb-years li.sb-years__end small { margin-top: 4px; }

/* the year-end, turnaround and contract tables: a little more air than the document layout gives them */
.pa-band .sb-table th, .pa-band .sb-table td { padding-top: 16px; padding-bottom: 16px; }
.pa-band .sb-table thead th { padding-top: 0; padding-bottom: 10px; }
.pa-band .sb-split__b .sb-table + p, .pa-band .sb-split__b .sb-table-wrap + p { margin-top: var(--sp-5); }

/* customer-generators by utility: a thin bar under each count, drawn to the largest count (the numbers stay in the cells) */
.pa-bar { display: block; height: 6px; margin-top: 8px; background: var(--rule); border-radius: 1px; }
.pa-bar i { display: block; height: 100%; background: var(--navy); border-radius: 1px; }
.sb-table--stack .pa-bar { max-width: 14rem; }

/* the Level 1 clock: 10 business days, then 15 more, on one scale (drawn from the sentence above it, so the markup hides it from screen readers) */
.pa-clock { margin: var(--sp-5) 0 var(--sp-2); max-width: 40rem; }
.pa-clock ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pa-clock li { flex: var(--d) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; font-size: var(--fs-ui); line-height: 1.35; }
.pa-clock li:first-child { background: var(--navy); color: var(--paper); }
.pa-clock li:last-child { background: var(--sky-soft); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.pa-clock b { font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.pa-clock__axis { position: relative; height: 26px; margin-top: 8px; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-soft); }
.pa-clock__axis span { position: absolute; top: 0; transform: translateX(-50%); }
.pa-clock__axis span:first-child { transform: none; }
.pa-clock__axis span:last-child { transform: translateX(-100%); }

/* ---- the photographs: the caption sits under the picture on a solid strip, never on it; the data plate follows it ---- */
.sb-hero__side .pa-fig { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.pa-fig .sb-hero__media { flex: 1 1 auto; }
.pa-fig__cap { background: var(--midnight); color: var(--text-soft-on-dark); font-size: var(--fs-caption); line-height: 1.3; padding: 8px var(--gutter); }
@media (min-width: 64em) { .pa-fig__cap { padding-inline: 20px; } }
/* the closing figure: the picture fills the column, a light caption strip closes it (a deep one would run into the footer) */
.pa-fig--close .pa-fig__cap { background: var(--surface-2); color: var(--navy-soft); }
.sb-survey.pa-fig--close { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; }
.pa-fig__img { position: relative; flex: 1 1 auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--midnight); }
@media (min-width: 64em) { .pa-fig__img { aspect-ratio: auto; min-height: 420px; } }

/* ---- the deep bands: the utility data and the compare entry. Inside a deep band the ink token is the light text colour, so rules and table heads stay visible ---- */
.pa-data { --navy: var(--text-on-dark); }
.pa-data .sb-zip input { color: var(--midnight); }   /* the field stays white, so its text stays dark */
.pa-data .pa-bar { background: var(--rule-on-dark); }
.pa-data .pa-bar i { background: var(--gold); }
/* the full-width data block: the table under the heading and the two paragraphs */
.pa-wide { margin-top: var(--sp-7); }
.pa-wide .sb-table { font-size: 1.0625rem; }
.pa-wide .sb-table td.num { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.pa-wide .sb-table td.num .pa-bar, .pa-wide .sb-table--stack .pa-bar { height: 10px; margin-top: 10px; max-width: none; }
.pa-wide .sb-source { margin-top: var(--sp-4); }
@media (min-width: 48em) {
  .pa-wide .sb-table thead th:first-child, .pa-wide .sb-table tbody th { width: 25%; }
  .pa-wide .sb-table th:nth-child(2), .pa-wide .sb-table td:nth-child(2) { width: 37%; }
  .pa-wide .sb-table th, .pa-wide .sb-table td { padding-right: var(--sp-6); }
  .pa-wide .sb-table th:last-child, .pa-wide .sb-table td:last-child { padding-right: 0; }
}
/* phone: each utility is a short card instead of six stacked lines */
@media (max-width: 47.99em) {
  .pa-wide .sb-table--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-5); padding: 16px 0 18px; }
  .pa-wide .sb-table--stack tr > th, .pa-wide .sb-table--stack tr > td:nth-child(2) { grid-column: 1 / -1; }
  .pa-wide .sb-table--stack td.num::before { margin-bottom: 2px; }
  .pa-wide .sb-table--stack td:nth-child(3), .pa-wide .sb-table--stack td:nth-child(4) { padding-top: var(--sp-3); }
}
/* the ZIP entry in the compare band */
.pa-zip { max-width: 34rem; margin-top: var(--sp-6); }
.pa-band .sb-split__b > .pa-zip { margin-top: var(--sp-6); }

/* rows of links under a section: one per line, so three links of different lengths do not wrap into a ragged mix */
.pa-band .sb-p-links { flex-direction: column; align-items: flex-start; gap: 0; }

/* type floors: the header button and the table heads at 16 px, the source list at 16 px */
.sb-header__cta { font-size: 1rem; }
.pa-band .sb-table thead th { font-size: 1rem; }

/* sources: two columns on wide screens */
.pa-sources li { font-size: 1rem; }
.pa-sources__lead { margin-top: var(--sp-3); color: var(--text-soft); max-width: 46rem; }
@media (min-width: 64em) {
  .pa-sources ol { max-width: none; columns: 2; column-gap: var(--sp-8); }
  .pa-sources li { break-inside: avoid; }
}