/* Federal solar tax credit guide: layout of the components on this page only. Colours, type and spacing come from the site.css tokens; nothing here is a new component. */

/* ============================================================ shared guide rules (gd-) */
/* ---- hero: the answer on the left, a drawn figure on the right ---- */
.gd-hero .sb-hero__copy { display: grid; gap: var(--sp-6) var(--col-gap); }
.gd-hero__head, .gd-hero__answer { min-width: 0; }
.gd-hero .sb-answer { margin-top: 0; }
.gd-fig { margin: 0; min-width: 0; }
@media (min-width: 64em) {
  .gd-hero .sb-hero__copy { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: var(--sp-5); padding-bottom: var(--sp-8); }
  .gd-hero__head { grid-column: 1 / -1; grid-row: 1; }
  .gd-hero__answer { grid-column: 1 / span 7; grid-row: 2; }
  .gd-fig { grid-column: 8 / span 5; grid-row: 2; align-self: stretch; }
}
.gd-glyph { flex: none; }

/* ---- the opening paragraphs, with the guide's own sections beside them ---- */
.gd-intro { padding-block: var(--sp-8); }
.gd-intro .sb-split__a > .sb-eyebrow { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); line-height: 1.4; color: var(--text-soft); }
.gd-tools { max-width: 28rem; }
.gd-lead { font-size: var(--fs-lede); line-height: 1.45; color: var(--navy); max-width: 36rem; }
.gd-intro .sb-split__b > p + p { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }

/* ---- full-width sections (tables and sheets need the room) ---- */
.gd-full .sb-head { margin-bottom: var(--sp-6); }
.gd-full .sb-head p { font-size: 1.25rem; line-height: 1.5; }
@media (min-width: 64em) { .gd-full .sb-head { align-items: start; } }
.gd-full > .wrap > * + * { margin-top: var(--sp-5); }
.gd-full > .wrap > .sb-head { margin-top: 0; }
.gd-full > .wrap > p { max-width: var(--measure); }
.gd-full > .wrap > .sb-source { margin-top: var(--sp-3); }
.gd-full > .wrap > .sb-source + p { margin-top: var(--sp-6); }
.gd-full > .wrap > .sb-source + .sb-source { margin-top: var(--sp-3); }
.gd-full h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); }
/* split sections: question headings are long, so they run a size smaller than a pillar's */
.gd-split .sb-split__a h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); }
.gd-split .sb-split__a > p { font-size: 1.1875rem; line-height: 1.5; max-width: 34rem; }
.gd-split .sb-split__b > p + .sb-source { margin-top: var(--sp-3); }
.gd-split .sb-split__b > .sb-source + p { margin-top: var(--sp-5); }

/* ---- the market band: the market name is the link ---- */
.gd-markets .sb-market h3 a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--text-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--rule-on-dark); text-underline-offset: .22em; }
.gd-markets .sb-market h3 a:visited { color: var(--text-on-dark); }
.gd-markets .sb-market h3 a:hover { text-decoration-color: var(--text-on-dark); text-decoration-thickness: 2px; }
.gd-markets .sb-market h3 a svg { flex: none; width: 22px; height: 22px; color: var(--gold); transition: transform var(--t-micro) var(--ease); }
.gd-markets .sb-market h3 a:hover svg, .gd-markets .sb-market h3 a:focus-visible svg { transform: translateX(4px); }
.gd-markets .sb-market h3 { margin-bottom: var(--sp-3); }
.gd-markets .sb-head p { font-size: 1.25rem; line-height: 1.5; }
@media (min-width: 64em) { .gd-markets .sb-head { align-items: start; } }
.sb-links--foot { margin-top: 0; padding-top: 0; border-top: 0; }
.gd-markets .sb-ledger__foot { margin-top: var(--sp-6); display: grid; gap: var(--sp-4) var(--sp-6); }
@media (min-width: 64em) { .gd-markets .gd-foot--src { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .gd-markets .sb-ledger__foot:not(.gd-foot--src) { grid-template-columns: none; } .gd-markets .gd-foot--src .sb-links { justify-content: flex-end; } }

/* ---- closing, note, sources ---- */
.sb-closing h2 + .gd-close-lede { margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); max-width: 30rem; color: var(--text-soft); }
.gd-notewrap { padding-top: var(--sp-7); }
.gd-sources { padding-top: var(--sp-7); }
.gd-sources__lede { margin-top: var(--sp-3); color: var(--text-soft); max-width: 40rem; }
.gd-sources li { padding-block: 14px; line-height: 1.6; }
.gd-sources li::before { top: 14px; }
/* the linked document title of each source is a chip: bordered, underlined, one box */
.gd-sources a.gd-chip { display: inline-block; min-height: 0; margin: 0 2px 0 0; padding: 1px 9px; line-height: 1.5; font-size: .9375rem; }
@media (min-width: 64em) {
  .gd-sources ol { max-width: none; column-count: 2; column-gap: var(--sp-8); }
  .gd-sources li { break-inside: avoid; }
}

/* ---- rules this page carries itself so it does not depend on other pages ---- */
/* breadcrumb: the slash follows each earlier item, so a trail that wraps never starts a line with one */
.sb-breadcrumb li + li::before { content: none; }
.sb-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--text-soft); }
/* the last word of a text link and its arrow never part (see nbArrows in tools/w2b2-lib.mjs) */
/* nowrap only while the text is at its normal size on a phone (375 px is 23 em); at 150 or 200 percent a word and its arrow may wrap, so nothing is wider than the screen */
@media (min-width: 23em) { .gx-nb { white-space: nowrap; } }
/* a short hyphenated compound in a heading or table head ("made-up") never breaks at its hyphen */
.gx-hy { white-space: nowrap; }
/* headings: only a very long word is hyphenated, so no short word is cut in two and none can overflow at 200% text size */
h1, h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
/* a link inside a sentence or a table cell flows with the text (the system draws it as an inline block, which leaves holes in a wrapped line) */
p:not(.sb-p-links) > a.sb-link, li > a.sb-link, td > a.sb-link:not(.sb-cell-link), dd > a.sb-link { display: inline; padding-block: 0; }
sup { font-size: max(.875rem, .7em); }   /* a superscript is still 14 px or more */
.gd-split .sb-split__b, .sb-split__a { min-width: 0; }
/* jump bar: a focused item scrolls clear of the edge; below 64em the sections are a wrapped row of chips in the page, nothing pinned, nothing half hidden */
.sb-jump ul { scroll-padding-inline: 32px; }
@media (max-width: 63.99em) {
  .sb-jump { position: static; }
  .sb-jump ul { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 12px 0 14px; }
  .sb-jump a { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--surface); white-space: normal; }
  .sb-jump li:first-child a { padding-left: 14px; }
  .sb-jump a:focus-visible { outline-offset: 2px; }
}
@media (min-width: 48em) and (max-width: 63.99em) and (min-height: 30em) { html:has(.sb-jump) { --sticky-top: var(--h-header); } }
@media (max-width: 47.99em) { html:has(.sb-jump) { --sticky-top: 0px; } }

/* ============================================================ the ledger sheet: a table on paper with a navy head (shared by the guides' data tables) */
.gd-sheet { background: var(--paper); border: 1px solid var(--navy); min-width: 0; }
.gd-scroll { overflow-x: auto; }
.gd-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.gd-sheet .sb-table { margin-top: 0; font-size: var(--fs-ui); }
.gd-sheet .sb-table caption { padding: 16px 20px; border-bottom: 1px solid var(--rule); max-width: none; color: var(--text-soft); }
.gd-sheet .sb-table thead th { vertical-align: middle; padding: 14px 20px 10px; }
.gd-sheet .sb-table tbody th, .gd-sheet .sb-table tbody td { padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.gd-sheet .sb-table tbody tr:last-child > * { border-bottom: 0; }
.gd-sheet .sb-table td:last-child, .gd-sheet .sb-table th:last-child { padding-right: 20px; }
@media (max-width: 47.99em) {
  .gd-sheet .sb-table caption { padding: 14px 16px; }
  .gd-sheet .sb-table--stack tbody tr { padding: 16px; border-bottom: 1px solid var(--rule); }
  .gd-sheet .sb-table--stack tbody tr:last-child { border-bottom: 0; }
  .gd-sheet .sb-table--stack tbody th, .gd-sheet .sb-table--stack tbody td { padding: 3px 0; border-bottom: 0; }
  .gd-sheet .sb-table--stack tbody td:last-child { padding-right: 0; }
}
/* a table of four or more columns stacks up to 64em, because four narrow columns break words at tablet width (the same rules as the site's phone stack) */
@media (min-width: 48em) and (max-width: 63.99em) {
  .gd-wide.sb-table--stack thead { display: none; }
  .gd-wide.sb-table--stack, .gd-wide.sb-table--stack tbody, .gd-wide.sb-table--stack tr, .gd-wide.sb-table--stack th, .gd-wide.sb-table--stack td { display: block; width: 100%; }
  .gd-wide.sb-table--stack tbody tr { padding: 18px 20px; border-bottom: 1px solid var(--rule); }
  .gd-wide.sb-table--stack tbody tr:last-child { border-bottom: 0; }
  .gd-sheet .gd-wide.sb-table--stack tbody th, .gd-sheet .gd-wide.sb-table--stack tbody td { padding: 3px 0; border: 0; }
  .gd-wide.sb-table--stack tbody th { font-size: 1.0625rem; padding-bottom: 6px; }
  .gd-wide.sb-table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--text-soft); }
  .gd-sheet .gd-wide.sb-table--stack tbody td:last-child { padding-right: 0; }
  .gd-wide.sb-table--stack caption { display: block; }
}

/* a guide row's one-line description never runs past 32 rem, so a single-column list at tablet width stays inside the 85-character line */
.gd-related .sb-guide__d { max-width: 32rem; }
/* a link that is the whole text of a table cell, or the document in a ledger row: a 44 px hit area drawn from the row's own padding (the site rule, with a floor so one line reaches 44) */
.sb-table a.sb-cell-link { box-sizing: border-box; min-height: 44px; }

/* the answer box matches the height of the figure beside it; its source line sits at the foot of the box, under a rule, so the extra height reads as a footer and not as a gap */
@media (min-width: 64em) {
  .gd-hero__answer { display: flex; flex-direction: column; }
  .gd-hero__answer > .sb-source { margin-top: auto; }
}


/* ============================================================ this page */
/* ---- hero: the last day, in figures, beside the answer ---- */
.fc-plate { align-self: end; }
.fc-plate .sb-stat { font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.fc-plate .sb-stat__label { max-width: 24rem; font-size: var(--fs-lede); line-height: 1.4; color: var(--navy); }
.fc-plate .sb-yearstrip { margin-top: var(--sp-6); }
.fc-plate__src { margin-top: var(--sp-4); }

/* ---- which date counts: the date line ---- */
.fc-date { margin: 0 0 var(--sp-6); padding: var(--sp-5); background: var(--paper); border: 1px solid var(--line-strong); max-width: 40rem; }
.fc-date figcaption { margin-bottom: var(--sp-5); font-size: var(--fs-ui); line-height: 1.5; font-weight: 600; color: var(--navy); max-width: 32rem; }
.fc-date__axis { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 2px solid var(--navy); }
.fc-date__zone { display: flex; align-items: center; min-height: 76px; padding: 28px 12px 10px; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; color: var(--navy); }
.fc-date__zone--l { background: var(--sky-soft); justify-content: flex-start; }
.fc-date__zone--r { background: var(--paper); border-left: 2px dashed var(--navy); justify-content: flex-end; text-align: right; }   /* a solid ground under the words (no hatching), the dashed edge says "outside the date" */
.fc-date__pill { position: absolute; left: 50%; top: -2px; transform: translate(-50%, -50%); padding: 6px 12px; background: var(--navy); color: var(--paper); font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; border-radius: var(--radius-ctl); }
.fc-date__cases { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.fc-date__case { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-ui); line-height: 1.5; }
.fc-date__case svg { width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fc-date__case b { display: block; font-weight: 600; font-size: var(--fs-body); }
.fc-date__case--yes svg, .fc-date__case--yes b { color: var(--positive); }
.fc-date__case--no svg, .fc-date__case--no b { color: var(--error); }
.fc-date__case span { color: var(--navy); }

/* ---- the situations table: a drawn mark in front of each answer; the word always stays ---- */
.fc-mark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.fc-mark svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fc-mark b { font-weight: 600; color: var(--navy); }
.fc-mark--yes { color: var(--positive); }
.fc-mark--no { color: var(--error); }
.fc-mark--carry { color: var(--brand); }
@media (min-width: 64em) {
  .fc-situations .sb-table thead th:nth-child(1), .fc-situations .sb-table tbody th { width: 34%; }
  .fc-situations .sb-table thead th:nth-child(2), .fc-situations .sb-table tbody td:nth-child(2) { width: 22%; }
}
@media (max-width: 47.99em) { .fc-mark { white-space: normal; } }

/* ---- what is left: two lines of Form 5695, as a paper excerpt ---- */
.fc-form { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); max-width: 32rem; background: var(--paper); border: 1px solid var(--navy); }
.fc-form figcaption { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.fc-form dl { margin: var(--sp-3) 0 0; }
.fc-form dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); }
.fc-form dt { font-weight: 600; color: var(--brand); font-size: var(--fs-body); }
.fc-form dd { margin: 0; font-size: var(--fs-body); }
.fc-left .sb-split__b > .fc-form + .sb-source { margin-top: var(--sp-4); }

/* ---- what to ask: the checklist on a paper sheet ---- */
.fc-sheet { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5) var(--sp-3); background: var(--paper); border: 1px solid var(--navy); }
.fc-sheet .sb-checklist { border-top: 0; }
.fc-sheet .sb-checklist li:last-child { border-bottom: 0; }
.fc-sheet .sb-checklist li { max-width: none; }

/* ---- worked examples: a drawn bar beside each made-up table ---- */
.fc-ex { padding-top: var(--sp-6); border-top: 2px solid var(--navy); display: grid; gap: var(--sp-5) var(--col-gap); }
.fc-ex + .fc-ex { margin-top: var(--sp-8); }
.fc-ex__a > p { margin-top: var(--sp-3); max-width: 30rem; }
.fc-ex__b > .sb-table, .fc-ex__b > .sb-table-wrap { margin-top: 0; }
.fc-ex__b > p { margin-top: var(--sp-4); max-width: var(--measure); }
@media (min-width: 64em) {
  .fc-ex { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fc-ex__a { grid-column: 1 / span 5; }
  .fc-ex__b { grid-column: 6 / span 7; }
}
.fc-bars { margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--surface); border: 1px solid var(--line-strong); max-width: 30rem; }
.fc-bars .sb-worked__lab { margin-bottom: var(--sp-3); }
.fc-bars__row { display: grid; gap: 6px; }
.fc-bars__row + .fc-bars__row { margin-top: var(--sp-4); }
.fc-bars__k { font-size: var(--fs-ui); line-height: 1.35; font-weight: 600; color: var(--navy); }
.fc-bars__bar { display: flex; flex-wrap: wrap; min-height: 48px; }
.fc-bars__bar > i { display: flex; align-items: center; justify-content: center; flex: none; width: var(--w); min-width: max-content; min-height: 48px; padding-inline: 8px; font-style: normal; text-align: center; }
.fc-bars__bar b { font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; }
.fc-bars__net { background: var(--navy); color: var(--paper); }
.fc-bars__carry { background: var(--sky-text); color: var(--paper); }
.fc-bars__gone { background: var(--surface); color: var(--navy); border: 2px dashed var(--navy); }
.fc-bars__pad { background: none; }

/* ============================================================ adjustments on this page only */
/* Sources: the linked title is an ordinary underlined link, so a comma or a closing bracket never stands alone at the start of a line and every entry has the same shape. */
.gd-sources li a, .gd-sources a.gd-chip { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--link); font-size: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: .2em; }
.gd-sources li a:visited { color: var(--link-visited); }
.gd-sources li a:hover { text-decoration-thickness: 2px; }
/* In an entry with two links the first stays one box (its focus ring is one rectangle and the second link never sits over it); a lone link flows with the text, so a comma or bracket after it never starts a line. */
.gd-sources li a:not(:only-of-type):first-of-type { display: inline-block; max-width: 100%; }
/* Entries in plain text are held to a 70-character line: the narrow list is 31 rem, the two-column list keeps its full-width rules and pads the text. */
@media (max-width: 63.99em) { .gd-sources ol { max-width: 31rem; } }
@media (min-width: 64em) { .gd-sources li { padding-right: 5.5rem; } }

/* T2. Hero: the heading runs to three lines, which left the top right of the first screen empty. The date plate now starts level with the heading and runs down beside the answer. */
@media (min-width: 64em) {
  .fc-hero .gd-hero__head { grid-column: 1 / span 7; }
  .fc-hero .gd-fig { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: start; margin-top: 60px; }   /* 60 px = the 44 px breadcrumb row plus its gap, so the plate's top rule meets the heading's first line */
  .fc-hero .gd-hero__answer { align-self: start; }
  .fc-hero .gd-hero__answer > .sb-source { margin-top: var(--sp-5); }   /* the box does not stretch, so the gap above its source line is set, not left over */
  .fc-plate .sb-yearstrip { margin-top: var(--sp-7); }
  .fc-plate .sb-years li { min-height: 104px; }
}

/* T3. Year strip between 64 em and 75 em (1024 to 1199 px): five tiles in a 390 px column split "2023" into "202" and "3". The last-day tile takes its own row there, so the four years stay whole. */
@media (min-width: 64em) and (max-width: 74.99em) {
  .fc-plate .sb-years { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fc-plate .sb-years li.sb-years__end { grid-column: 1 / -1; min-height: 0; }
}

/* T4. Two body paragraphs in the split sections ran 76 characters a line at 33 em (the rule is 75); 31.5 em gives 72. */
.gd-split .sb-split__b > p { max-width: 31.5em; }