/* Additional fixes for this hub page, linked after its main stylesheet. Tokens come from css/site.css. */

/* ---- BASE: steps in a band, plain variant. The numeral keeps the small size and 44 px indent of site.css, so it does not print over the first words (these rules out-rank the ".pa-band .sb-split__b .sb-steps" rules in the generated file) ---- */
.pa-band .sb-split__b .sb-steps--plain > li { display: block; padding: 14px 0 14px 44px; }
.pa-band .sb-split__b .sb-steps--plain > li::before { font-size: 1.25rem; }

/* ---- BASE: pinned bars and focus room. */
:root { --h-jump: 47px; }
html { scroll-padding-bottom: 24px; }

/* ---- BASE: a parenthesis or a closing mark stays with its link: "(" + link + ")" is one unit that does not break; the link itself may still wrap. ---- */
.nj-nw { white-space: nowrap; }
.nj-nw > a { white-space: normal; max-width: calc(100% - 1.5em) !important; }   /* room for the bracket and the full stop beside the link: the unit never exceeds the line */
/* max-width on in-text links: higher-specificity rules (site.css ".sb-source a", ".pa-band .sb-split__b p a", new-jersey.css ".sb-table td a") set max-width:100% on the same links, so !important is needed for a long link to wrap at 150 and 200 percent text size. The link stays an inline-block box (one focus ring, a 24 px target). */
/* ---- in-text links are boxes (so a wrapped link keeps one focus ring) with no padding: prose lines are 28 px, source lines 24.5 px and Sources entries 24.75 px, so every link is already a 24 px target and link boxes never overlap the line above ---- */
.pa-band .sb-split__b p a:not(.sb-link):not(.sb-chip), .pa-band .sb-split__b li a:not(.sb-link):not(.sb-chip):not(.sb-guide),
.sb-table td a:not(.sb-cell-link), .sb-table th a:not(.sb-cell-link), .sb-source a, .sb-sources a { padding-block: 0; }
.sb-source { line-height: 1.75; }
.sb-sources li { line-height: 1.65; }

/* ---- BASE: stacked (phone) tables. The band's 16 px cell padding out-ranked the stack layout's 3 px, so every cell carried 32 px of air. ---- */
@media (max-width: 47.99em) {
  .pa-band .sb-table--stack th, .pa-band .sb-table--stack td,
  .pa-band--wide .sb-table--stack th, .pa-band--wide .sb-table--stack td { padding: 3px 0; }
  .pa-band .sb-table--stack tbody th { padding-bottom: 6px; }
  .section.pa-band { padding-block: 2.75rem; }
}

/* ---- New Jersey: the lede of a band sits in the same column as the rest of the band's text ---- */
.pa-band .sb-split__b > .nj-lede { max-width: var(--measure); font-size: var(--fs-lede); line-height: 1.45; color: var(--navy); }

/* a band with one short answer needs less air */
.section.pa-band--short { padding-block: clamp(2.5rem, 1.9rem + 3vw, 4.75rem); }

/* the hero plate is a card of its own under the photograph, so "Newark" does not read as the photograph's place */
@media (min-width: 64em) { .sb-hero--hub.sb-hero--nj .sb-hero__side .sb-plate { margin-top: 0; border-top: 1px solid var(--rule-on-dark); } }

/* the plate's source line is three lines, one source each, so a wrapped link never sits inside another link's box */
.sb-plate__source .nj-line { display: block; }
.sb-plate__source .nj-line + .nj-line { margin-top: 6px; }

/* ---- New Jersey: the lead module, five dated changes on a rail (the same dates and sentences as the table under "What is changing") ---- */
.nj-rail { padding-block: var(--sp-7) var(--sp-8); }
.nj-rail__k { margin: 0 0 var(--sp-6); max-width: 46rem; font-size: var(--fs-body); line-height: 1.5; color: var(--text-soft); }
.nj-rail__list { list-style: none; margin: 0 0 0 5px; padding: 0; display: grid; gap: var(--sp-6); border-left: 1px solid var(--rule); }
.nj-rail__list > li { position: relative; padding-left: 28px; min-width: 0; }
.nj-rail__list > li::before { content: ""; position: absolute; left: -6px; top: .6rem; width: 11px; height: 11px; border-radius: 50%; background: var(--text-soft); }
.nj-rail__now::before { background: var(--gold); box-shadow: 0 0 0 4px var(--rule-on-dark); }
.nj-rail time { display: block; line-height: 1.1; color: var(--text); }
.nj-rail time b { font-size: clamp(2rem, 1.55rem + 1.5vw, 2.875rem); font-weight: 600; letter-spacing: -.035em; }
.nj-rail time span { margin-left: 4px; font-size: var(--fs-ui); color: var(--text-soft); }
.nj-rail__now time b { color: var(--gold); }
.nj-rail__list > li > p { margin: var(--sp-3) 0 var(--sp-4); max-width: 30rem; color: var(--text); font-size: var(--fs-body); line-height: 1.5; }
.nj-rail .sb-chip { max-width: 100%; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .nj-rail__list > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--sp-5); align-items: start; }
  .nj-rail__list > li > time { grid-row: 1 / span 2; }
  .nj-rail__list > li > p { margin-top: 2px; }
  .nj-rail__list > li > .sb-chip { justify-self: start; }
}
@media (min-width: 64em) {
  .nj-rail__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-5); margin: 0; padding-top: var(--sp-5); border-left: 0; border-top: 1px solid var(--rule); }
  .nj-rail__list > li { display: flex; flex-direction: column; align-items: flex-start; padding-left: 0; }
  .nj-rail__list > li::before { left: 0; top: calc(-1 * var(--sp-5) - 6px); }
  .nj-rail__list > li > p { flex: 1 1 auto; }
}

/* ---- New Jersey: net metering, the 12 monthly billing periods drawn from the sentences beside it ---- */
.nj-year { padding: var(--sp-5); }
.nj-year figcaption { margin-bottom: var(--sp-4); font-weight: 600; color: var(--navy); }
.nj-year__cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.nj-year__cells li { display: flex; align-items: center; justify-content: center; min-height: 48px; border-top: 3px solid var(--navy); background: var(--sky-soft); color: var(--navy); font-size: var(--fs-ui); font-weight: 600; }
.nj-year__cells li:last-child { background: var(--navy); border-top-color: var(--navy); color: var(--paper); }
.nj-year__notes { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.nj-year__notes p { position: relative; margin: 0; padding-left: 40px; max-width: 34rem; font-size: var(--fs-ui); line-height: 1.45; color: var(--navy); }
.nj-year__notes p::before { content: ""; position: absolute; left: 0; top: .15em; width: 28px; height: 18px; border-top: 3px solid var(--navy); background: var(--sky-soft); }
.nj-year__notes .nj-year__end::before { background: var(--navy); border-top-color: var(--navy); }
@media (min-width: 40em) { .nj-year__cells { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ---- New Jersey: the four connection clocks in a row (the band is wide): two by two from 64em, four across from 75em ---- */
.sb-steps p.nj-step-t { margin-top: 0; max-width: none; color: var(--navy); font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 64em) {
  .pa-wide .nj-clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-wide .nj-clock > li { padding: var(--sp-5) var(--sp-5) var(--sp-5); }
  .pa-wide .nj-clock > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pa-wide .nj-clock > li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pa-wide .nj-clock > li::before { font-size: 2.75rem; margin-bottom: var(--sp-3); }
}
@media (min-width: 75em) {
  .pa-wide .nj-clock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pa-wide .nj-clock > li:nth-child(odd) { padding-left: var(--sp-5); border-left: 1px solid var(--rule); }
  .pa-wide .nj-clock > li:first-child { padding-left: 0; border-left: 0; }
  .pa-wide .nj-clock > li:nth-child(n+3) { border-top: 0; }
}
.pa-wide > .sb-table--changing { max-width: 72rem; }
.pa-wide > .nj-clock + p { margin-top: var(--sp-6); }

/* ---- New Jersey phones: the stacked dated-changes table spends its lines on the date, the sentence and the source (the sentence needs no label under its date) ---- */
@media (max-width: 47.99em) {
  .sb-table--changing td[data-label="What happens"]::before { display: none; }
  .sb-table--changing td[data-label="Source"] { padding-top: 0; padding-bottom: 3px; }
  .sb-table--changing td[data-label="Source"]::before { display: inline; margin-right: 6px; }
}