@charset "utf-8";
/* ==========================================================================
   SunRight Solar — Solar Rebates & Incentives (/rebates/)

   People arrive here with one question — "what can I get?" — so the page is
   built to be scanned, and it is built so that a figure and the condition that
   qualifies it can never be read apart.

     Index      the whole federal/state picture as one table, first thing
                after the introduction, with row groups for Federal and for
                State and territory
     Sheets     the two federal programmes and NSW each render as a single
                bordered panel holding every rule that belongs to them. A
                condition cannot drift away from its amount because it is
                physically inside the same box.
     Cards      the five remaining state programmes, one card each, every card
                carrying its own H2, its change caveat and its source
     Notices    every "this can change" line renders at body size in a bordered
                notice with a sunrise bar. None of it is fine print.

   Federal panels carry the sunrise rule, state panels a navy one, so the two
   families read apart at a glance — but the headings say "Federal" and "NSW"
   as well, because colour is never the only signal.

   Nothing here overrides main.css. Every colour is a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Notices — the compliance voice of the page

   PROMOTE: .rb-notice is a general-purpose "this can change" callout. Any page
   that quotes a rebate, a scheme deadline or a threshold needs the same
   treatment, and it must never be allowed to shrink into fine print. Worth
   moving to main.css §11c beside .rebates-panel.
   -------------------------------------------------------------------------- */
.rb-notice {
  position: relative;
  margin-top: clamp(1.35rem, 2.2vw, 1.75rem);
  padding: clamp(1.1rem, 1.8vw, 1.45rem) clamp(1.15rem, 2vw, 1.6rem);
  padding-left: calc(clamp(1.15rem, 2vw, 1.6rem) + .5rem);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(120deg, #fff8ef, #fff 62%);
}
/* The bar is the only decoration. It runs the full height so the block reads
   as one statement rather than as a tinted paragraph. */
.rb-notice::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad-cta);
}
/* Body size, ink colour: a caveat that is set smaller than the copy around it
   is fine print, whatever the border does. */
.rb-notice p {
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--ink);
  max-width: 46rem;
}
.rb-notice p + p { margin-top: .85rem; }
.rb-notice .source-link { margin-top: .25rem; }

/* In the page head the notice sits between the introduction and the buttons,
   on the same measure as the lead above it. */
.rb-notice--head { margin-top: 1.6rem; }
.rb-notice--head p { max-width: 34rem; }

.rb-notice--wide { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }

/* --------------------------------------------------------------------------
   2. Programme sheets — one panel per programme
   -------------------------------------------------------------------------- */
.rb-scheme {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3.2vw, 3.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: linear-gradient(168deg, #fff 58%, var(--sky-50));
  box-shadow: var(--shadow-sm);
}
.rb-scheme::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
}
.rb-scheme--federal::before { background: var(--grad-cta); }
.rb-scheme--state::before   { background: linear-gradient(90deg, var(--navy-700), var(--navy-300)); }

/* Two of these headings are long enough that the shared 16ch measure would set
   them five lines deep. Widened here only, wording untouched. */
.rb-scheme .section-head h2 { max-width: 20ch; }

.rb-scheme__media { margin-top: clamp(2rem, 3.5vw, 3rem); border-radius: var(--r-xl); }

.rb-parts { margin-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--line); }
.rb-part {
  display: grid;
  gap: .8rem;
  min-width: 0;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.rb-part h3 { font-size: var(--step-2); }
.rb-part__body { min-width: 0; }
.rb-part__body > * + * { margin-top: 1.05rem; }
.rb-part__body p { font-size: var(--step-0); line-height: 1.75; max-width: 46rem; }
.rb-part:last-child { border-bottom: 0; padding-bottom: 0; }

/* A part that is itself a caveat — the programme timeline, with its funding
   end date and its shrinking discount — takes the notice treatment whole.
   The :last-child duplicate in the selector is deliberate: .rb-part:last-child
   above carries the same specificity, and without it the reset border would
   lose the cascade and the panel would end on a stray rule. */
.rb-part--notice,
.rb-part--notice:last-child {
  position: relative;
  margin: .85rem 0;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.15rem, 2vw, 1.6rem);
  padding-left: calc(clamp(1.15rem, 2vw, 1.6rem) + .5rem);
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(120deg, #fff8ef, #fff 62%);
}
.rb-part--notice::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad-cta);
}

/* The approved copy marks two NSW lines with a bold label. They set the income
   threshold that qualifies the loan, so they are given their own block rather
   than being left to sit inside a paragraph a reader can skim past. */
.rb-term {
  padding: .8rem 1rem .8rem 1.1rem;
  border-left: 3px solid var(--sun-400);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: var(--sky-25);
}
.rb-term strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* Eligibility checklist — ruled rows with a typographic tick rule. There are
   no decorative icons in this design language, so the rule does the marking.

   PROMOTE: identical in behaviour to .ruled-list in inverters.css. One of the
   two should move to main.css §11d and the other be deleted. */
.rb-checks {
  display: grid;
  gap: 0;
  margin-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.rb-checks li {
  position: relative;
  min-width: 0;
  padding: .85rem 0 .85rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
  line-height: 1.65;
}
.rb-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(.85rem + .8em);
  width: 10px; height: 2px;
  background: var(--grad-cta);
}
/* The same list inside a table cell, where the row is already dense. */
.rb-checks--compact { margin-top: .75rem; }
.rb-checks--compact li { padding: .55rem 0 .55rem 1.35rem; font-size: .9375rem; line-height: 1.55; }
.rb-checks--compact li::before { top: calc(.55rem + .75em); width: 8px; }
.rb-checks--compact li:last-child { border-bottom: 0; padding-bottom: 0; }

.rb-sources { display: flex; flex-wrap: wrap; gap: .55rem 1.75rem; margin-top: 1.25rem; }
.rb-scheme__links { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); gap: 1.25rem 2rem; }

/* Desktop split for the parts: heading left, rules right, so the sheet can be
   read down its left edge. MUST stay after the base rules above — equal
   specificity means source order alone decides the winner. */
@media (min-width: 940px) {
  .rb-part {
    grid-template-columns: minmax(0, .52fr) minmax(0, 1.28fr);
    gap: 0 clamp(1.5rem, 3vw, 3.25rem);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   3. At-a-glance index — a real table

   PROMOTE: .rb-scroll is the same scrollable, labelled, focusable table region
   as .table-scroll in guide-panels.css. Two pages now need it, so it belongs
   in main.css with one name.
   -------------------------------------------------------------------------- */
/* The index sits directly beneath the page head, which carries its own bottom
   padding, so this band opens tighter than a standard section. */
.rb-band--index { padding-top: clamp(2.5rem, 4vw, 4rem); }

.rb-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.rb-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.rb-index { width: 100%; border-collapse: collapse; min-width: 44rem; }

/* The caption names the block, so it is set as a title rather than a footnote.
   Its width is pinned to the visible area rather than to the table: the table
   is wider than a phone and an unconstrained caption would have to be scrolled
   sideways to be read. `sticky` then keeps it in view while the table moves;
   where that is unsupported the width alone still does the important half. */
.rb-index caption {
  position: sticky;
  left: 0;
  caption-side: top;
  width: min(100%, calc(100vw - var(--gutter) * 2));
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.15rem, 2vw, 1.6rem) .35rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.rb-index th,
.rb-index td {
  padding: 1rem clamp(.85rem, 1.4vw, 1.15rem);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.rb-index thead th {
  background: var(--sky-50);
  font-family: var(--font-num);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-800);
  border-bottom: 1px solid var(--line-strong);
}
/* Row-group headers carry the federal/state split. White on navy-800 is 11:1. */
.rb-index__group th {
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-num);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-block: .7rem;
  border-bottom: 0;
}
.rb-index tbody th[scope="row"] {
  width: 16rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink);
}
.rb-index tbody th[scope="row"] a { color: var(--ink); text-decoration: none; }
.rb-index tbody th[scope="row"] a:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: .22em; }
/* Wrapping sooner inside the cell; the column keeps its own width. */
.rb-index td p { font-size: .9375rem; line-height: 1.6; color: var(--body); max-width: 34rem; }
.rb-index td p + p { margin-top: .6rem; }
.rb-index__src { width: 11rem; }
.rb-index tbody:last-child tr:last-child th,
.rb-index tbody:last-child tr:last-child td { border-bottom: 0; }

.rb-hint { margin-top: .85rem; font-size: .8125rem; color: var(--muted); }
@media (min-width: 800px) { .rb-hint { display: none; } }

/* --------------------------------------------------------------------------
   4. State and territory cards
   -------------------------------------------------------------------------- */
.rb-states__media { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }

.rb-states {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
.rb-state {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.rb-state::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-700), var(--navy-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.rb-state:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(7, 42, 76, .05), 0 30px 56px -26px rgba(7, 42, 76, .3);
}
.rb-state:hover::before { transform: scaleX(1); }
/* A real H2 inside a card, so it is stepped down from the section scale. */
.rb-state h2 { font-size: var(--step-2); line-height: 1.24; margin-bottom: .9rem; }
.rb-state p { font-size: var(--step-0); line-height: 1.72; max-width: 42rem; }
.rb-state p + p { margin-top: .9rem; }
.rb-state .rb-notice { margin-top: 1.1rem; }
.rb-state__source { margin-top: auto; padding-top: 1.35rem; }

/* Two columns from 760px. Five cards means the fifth would sit beside a hole,
   so it takes the whole row and closes the set — the copy keeps its measure,
   the rule does the widening. Breakpoint block stays after the base rules. */
@media (min-width: 760px) {
  .rb-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-states .rb-state:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   5. Stacking — the worked example, then the warning

   PROMOTE: .rb-example is the same navy pull-quote panel as .callout in
   inverters.css. Consolidate into main.css §11b.
   -------------------------------------------------------------------------- */
.rb-example {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 3rem);
  background: var(--navy-900);
  border-radius: var(--r-xl);
}
.rb-example p {
  margin: 0;
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.55;
  color: #fff;
}
.rb-stack__actions { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }

/* --------------------------------------------------------------------------
   6. Narrow phones
   Last in the file so these overrides win on source order.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* The sheet loses its inset so the copy keeps a usable measure at 320px,
     and reads as a ruled document rather than as a squeezed card. */
  .rb-scheme { padding-inline: clamp(1.1rem, 4vw, 1.5rem); }
  .rb-index tbody th[scope="row"] { width: auto; }
  .rb-index__src { width: auto; }
}