/* Focus on Energy look and feel, matched to the current IRA eligibility
   pages: Nunito Sans headings, Open Sans body, Focus blue #034ea2,
   Focus green #00ab4e. */
:root {
  --blue: #034ea2; --blue-dark: #033f83; --green: #00ab4e; --green-dark: #00913f;
  --ink: #343434; --muted: #5f6b76; --line: #d9e1e8; --bg: #f5f7fa;
  --card: #ffffff; --warn-bg: #fff7e6; --warn-line: #e6c26e; --err: #c0392b;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
       color: var(--ink); background: var(--bg); display: flex;
       min-height: 100vh; flex-direction: column; }
h1, h2, h3, .brand-sub { font-family: "Nunito Sans", Arial, Helvetica, sans-serif; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; width: 100%; }
.topbar { background: var(--blue); color: #fff; font-size: .85rem; }
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center;
                padding: .35rem 1rem; gap: 1rem; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.site-header { background: var(--card); border-bottom: 3px solid var(--green); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center;
                     gap: .6rem; padding: .7rem 1rem; position: relative;
                     padding-right: 3.4rem; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none;
         margin-right: 1.6rem; }
.brand-logo { height: 44px; width: auto; }
.brand-sub { color: var(--blue); font-weight: 800; font-size: 1.02rem;
             border-left: 1px solid var(--line); padding-left: .8rem; }
nav { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
nav a:hover { color: var(--blue); }
main { padding: 1.6rem 1rem 3rem; flex: 1; }
h1 { color: var(--blue); font-size: 1.75rem; font-weight: 800; margin: .2rem 0 .9rem; }
h2 { color: var(--blue); font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; }
.lede { color: var(--muted); max-width: 46rem; margin-top: 0; }
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: 8px; padding: 1.25rem 1.5rem; margin: 1rem 0;
        box-shadow: 0 1px 3px rgba(3,78,162,.06); }
.hero { padding: 1.2rem 0 .4rem; }
.hero h1 { font-size: 2rem; }
.hero p { color: var(--muted); max-width: 46rem; font-size: 1.05rem; }
.page-head { display: flex; align-items: center; justify-content: space-between;
             flex-wrap: wrap; gap: .8rem; }
.cards { list-style: none; padding: 0; display: grid; gap: .8rem; }
.card.property { display: flex; justify-content: space-between; gap: 1rem;
                 flex-wrap: wrap; align-items: center; }
.property-main { display: flex; flex-direction: column; gap: .15rem; }
.property-main span { color: var(--muted); }
.property-type { display: flex; align-items: center; gap: .7rem; }
.card.empty { text-align: center; padding: 2.4rem 1.4rem; }
.stack { display: flex; flex-direction: column; gap: .95rem; }
.row { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-start; }
.row > label { flex: 1 1 12rem; }
.row > label.narrow { flex: 0 1 8rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95rem; }
label input, label select { font: inherit; font-weight: 400; padding: .6rem .65rem;
        border: 1px solid #b9c4cd; border-radius: 4px; background: #fff; width: 100%; }
label input:focus, label select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.choice { flex-direction: row; align-items: flex-start; gap: .65rem; font-weight: 400; }
.choice input { width: auto; margin-top: .32rem; accent-color: var(--blue); }
.choice.big { border: 1px solid var(--line); border-radius: 6px; padding: .85rem 1rem;
              cursor: pointer; transition: border-color .12s, background .12s; }
.choice.big:hover { border-color: var(--blue); background: #f2f7fd; }
.choice.big strong { color: var(--blue); }
.button { display: inline-block; border: 2px solid var(--blue); background: #fff;
          color: var(--blue); padding: .55rem 1.4rem; border-radius: 4px;
          font: inherit; font-family: "Nunito Sans", sans-serif; font-weight: 700;
          text-decoration: none; cursor: pointer; }
.button:hover { background: #f2f7fd; }
.button.primary { background: var(--green); border-color: var(--green); color: #fff; }
.button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.button.small-cta { padding: .4rem .9rem; font-size: .9rem; }
.linklike { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600;
            cursor: pointer; padding: 0; text-decoration: underline; }
.inline { display: inline; }
.small { font-size: .85rem; color: var(--muted); }
.badge { display: inline-block; padding: .18rem .75rem; border-radius: 999px;
         font-size: .85rem; font-weight: 700; background: #e8edf1; }
.badge.type { background: #eaf3ff; color: var(--blue); font-weight: 600; }
.badge.s-approved { background: #dff3e8; color: var(--green-dark); }
.badge.s-documents_submitted, .badge.s-in_review { background: #e5eefb; color: var(--blue); }
.badge.s-needs_more_info { background: var(--warn-bg); color: #8a6116; }
.status-line { color: var(--muted); display: flex; gap: .5rem; align-items: center;
               flex-wrap: wrap; }
.notice { background: var(--warn-bg); border: 1px solid var(--warn-line);
          border-radius: 6px; padding: .75rem .95rem; }
.notice.ok { background: #dff3e8; border-color: #9fd4bb; }
.warning { background: var(--warn-bg); border-left: 4px solid var(--warn-line);
           padding: .75rem .95rem; border-radius: 4px; }
.error { color: var(--err); font-weight: 400; font-size: .9rem; }
.hint { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; }
.doclist { padding-left: 1.2rem; color: var(--muted); }
.site-footer { background: var(--blue); color: #fff; margin-top: 2rem; }
.site-footer .wrap { padding: 1.1rem 1rem; }
.site-footer a { color: #fff; }
.site-footer .copyright { font-size: .85rem; opacity: .85; margin: .2rem 0 0; }
.site-footer p { margin: .2rem 0; }
@media (max-width: 560px) { .row { flex-direction: column; } .row > label.narrow { flex: 1; }
  .brand-sub { display: none; } }

/* user icon menu (no-JS dropdown via <details>) */
.usermenu { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); }
.usermenu summary { list-style: none; cursor: pointer; display: flex;
                    align-items: center; justify-content: center;
                    color: var(--blue); width: 2.5rem; height: 2.5rem;
                    border: 2px solid var(--blue); border-radius: 50%;
                    background: #fff; }
.usermenu summary:hover { background: #f2f7fd; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu[open] summary { color: var(--blue-dark); }
.usermenu-list { position: absolute; right: 0; top: 2rem; background: #fff;
                 border: 1px solid var(--line); border-radius: 6px;
                 box-shadow: 0 4px 14px rgba(3,78,162,.14); min-width: 11.5rem;
                 display: flex; flex-direction: column; z-index: 30; }
.usermenu-list a, .usermenu-list button { padding: .65rem .9rem; text-align: left;
                 color: var(--ink); text-decoration: none; font-weight: 600;
                 background: none; border: 0; font: inherit; cursor: pointer; }
.usermenu-list a:hover, .usermenu-list button:hover { background: #f2f7fd;
                 color: var(--blue); }
.card.program h2 { max-width: 42rem; }
.applist { list-style: none; padding: 0; display: flex; flex-direction: column;
           gap: .5rem; }
.applist li { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }

/* address autocomplete */
.suggest-wrap { position: relative; }
.suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
               background: #fff; border: 1px solid var(--line);
               border-radius: 0 0 6px 6px; box-shadow: 0 6px 16px rgba(3,78,162,.14);
               display: flex; flex-direction: column; max-height: 16rem; overflow-y: auto; }
.suggestion { text-align: left; padding: .55rem .7rem; background: none; border: 0;
              font: inherit; font-weight: 400; cursor: pointer; }
.suggestion:hover, .suggestion.active { background: #f2f7fd; color: var(--blue); }

.cta-block { border-left: 4px solid var(--green); background: var(--card);
             border-radius: 0 8px 8px 0; padding: 1rem 1.4rem; margin: 1rem 0 1.4rem;
             box-shadow: 0 1px 3px rgba(3,78,162,.06); }
.cta-block p { margin: .4rem 0; }

.fld { border: 1px solid var(--line); border-radius: 6px; padding: .7rem .9rem; margin: 0; }
.fld legend { font-weight: 600; padding: 0 .3rem; }
.property-iq { display: flex; gap: .5rem; align-items: center; }
.applist a { text-decoration: none; color: var(--ink); }
.applist a:hover strong { color: var(--blue); }

/* help center FAQ accordions */
details.faq { background: var(--card); border: 1px solid var(--line);
              border-radius: 8px; margin: .6rem 0; padding: 0; }
details.faq summary { cursor: pointer; font-weight: 700; color: var(--blue);
                      padding: .85rem 1.1rem; list-style-position: inside; }
details.faq[open] summary { border-bottom: 1px solid var(--line); }
details.faq p { margin: .7rem 1.1rem; }

.cmap { height: 420px; border: 1px solid var(--line); border-radius: 8px;
        margin: 1rem 0; z-index: 1; }
.card.contractor { display: flex; justify-content: space-between; gap: 1rem;
                   flex-wrap: wrap; }
.filterbar { margin-bottom: .4rem; }

/* find-a-contractor: view toggle, grid view, aligned search row */
.view-toggle { display: flex; gap: .5rem; margin: 1rem 0 .4rem; }
.cards.grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
              align-items: stretch; }
.cards.grid .card.contractor { flex-direction: column; justify-content: flex-start;
                               gap: .5rem; margin: 0; }
.filterbar .row { align-items: flex-end; }
.filterbar .row > label { justify-content: flex-end; }
.filterbar .row > label.narrow { flex: 0 1 11rem; white-space: nowrap; }

/* map-view split: tiles left, map right (reference layout) */
.results-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                 gap: 1rem; align-items: start; margin-top: .6rem; }
.results-list { max-height: 640px; overflow-y: auto; padding-right: .3rem; }
.results-list .cards { margin: 0; }
.results-list .card.contractor { margin: 0 0 .8rem; flex-direction: column;
                                 justify-content: flex-start; gap: .5rem;
                                 padding: 1rem 1.1rem; }
.results-map { position: sticky; top: 1rem; }
.results-split .cmap { height: 640px; margin: 0; }
@media (max-width: 860px) {
  .results-split { grid-template-columns: 1fr; }
  .results-map { position: static; order: -1; }
  .results-split .cmap { height: 360px; }
  .results-list { max-height: none; overflow: visible; }
}

/* =====================================================================
   Everything below is this portal's own. The block above is the shared
   IRA look, copied from the customer portal (SHARED_LOOK.md) — when it
   changes, change it there and copy it over rather than forking it.
   ===================================================================== */

/* ---- Registered Contractor Portal additions ------------------------------
   The household and contractor portals are the same program to the people who
   use both, so the base sheet above is the customer portal's, unchanged. Only
   what the contractor side genuinely adds lives below. */
.badge.s-draft { background: #eef1f5; color: var(--muted); }
.badge.s-submitted { background: #e5eefb; color: var(--blue); }
.badge.s-declined { background: #fdeaea; color: var(--err); }
.badge.r-pass { background: #dff3e8; color: var(--green-dark); }
.badge.r-fail { background: #fdeaea; color: var(--err); }
.badge.r-could_not_check { background: var(--warn-bg); color: #8a6116; }
.steps { list-style: none; padding: 0; margin: 0 0 1rem; display: flex;
         flex-wrap: wrap; gap: .4rem .9rem; font-size: .92rem; }
.steps a, .steps span { color: var(--muted); text-decoration: none; }
.steps a:hover { color: var(--blue); }
.steps .here { color: var(--blue); font-weight: 700; }
.todo { margin: .4rem 0 0; padding-left: 1.2rem; }
.todo li { margin: .25rem 0; }
.doclist { list-style: none; padding: 0; display: grid; gap: .55rem; }
.doclist li { display: flex; justify-content: space-between; gap: 1rem;
              align-items: center; border: 1px solid var(--line);
              border-radius: 6px; padding: .6rem .8rem; background: #fff; }
.doclist .meta { color: var(--muted); font-size: .88rem; }
.invite { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 1.15rem; letter-spacing: .12em; font-weight: 700;
          color: var(--blue); }
.partner { display: flex; justify-content: space-between; gap: 1rem;
           flex-wrap: wrap; align-items: center; }
.check-detail { color: var(--muted); font-size: .92rem; margin: .35rem 0 0; }

/* ---- the four-step registration wizard ---------------------------------
   Laid out to match the programme's own UAT screens: a numbered stepper
   across the top, three checkbox columns for the specialities, and a
   Go back / Next step foot on every screen. */
.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
           padding: 0; margin: .2rem 0 1.4rem; border-bottom: 1px solid var(--line);
           padding-bottom: .9rem; }
.stepper .step { display: flex; align-items: center; gap: .5rem;
                 color: var(--muted); font-size: .95rem; }
.stepper a { display: flex; align-items: center; gap: .5rem;
             color: inherit; text-decoration: none; }
.stepper a:hover .label { color: var(--blue); }
.stepper .bubble { display: inline-flex; align-items: center; justify-content: center;
                   width: 1.55rem; height: 1.55rem; border-radius: 999px;
                   border: 1px solid #b9c4cd; font-size: .82rem; font-weight: 700;
                   background: #fff; flex: none; }
.stepper .done .bubble { background: var(--muted); border-color: var(--muted); color: #fff; }
.stepper .here .bubble { background: var(--green); border-color: var(--green); color: #fff; }
.stepper .here .label { color: var(--ink); font-weight: 700;
                        border-bottom: 2px solid var(--green); padding-bottom: 2px; }

.req { color: var(--err); font-weight: 700; }
.field-label { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.wizard-nav { display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem;
              margin-top: .4rem; }
.wizard-nav .back { color: var(--green-dark); font-weight: 600;
                    text-decoration: none; font-size: .95rem; }
.wizard-nav .back:hover { text-decoration: underline; }

h3 { color: var(--ink); font-size: 1rem; margin: .5rem 0 .1rem;
     font-family: "Nunito Sans", Arial, sans-serif; }
.choice.inline { flex-direction: row; align-items: center; display: inline-flex;
                 gap: .35rem; margin-right: 1.1rem; font-weight: 400; }
.radio-pair { display: flex; flex-wrap: wrap; align-items: center; margin: .15rem 0 .3rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
          gap: .3rem .9rem; }
.inline-checks { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

/* Three columns on step 3, exactly as the reference screen has them. */
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
           gap: 1rem; }
.col { border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
       display: flex; flex-direction: column; }
.col-head { background: #eef2f8; padding: .6rem .8rem; font-weight: 700;
            font-size: .93rem; color: var(--ink); }
.col-head .count { color: var(--muted); font-weight: 400; font-size: .85rem; }
.col .choice { padding: .35rem .8rem; font-weight: 400; }
.inline-upload { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-upload input[type=file] { font-size: .85rem; max-width: 14rem; }
.terms-box p { font-size: .95rem; }
.terms-box { max-height: 30rem; overflow-y: auto; }

/* ---- customers and applications ---------------------------------------- */
nav a.quiet { color: var(--muted); font-weight: 400; font-size: .9rem; }
nav a.quiet:hover { color: var(--blue); }
.chip { display: inline-block; padding: .16rem .7rem; border-radius: 999px;
        border: 1px solid var(--line); background: #fff; color: var(--muted);
        text-decoration: none; font-size: .85rem; margin-right: .3rem; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.searchbar { display: flex; gap: .5rem; align-items: center; margin: .2rem 0 1rem; }
.searchbar input { flex: 1 1 22rem; font: inherit; padding: .55rem .65rem;
                   border: 1px solid #b9c4cd; border-radius: 4px; }
.cards .card.property .meta { color: var(--muted); font-size: .88rem; }
.doclist li span + span { text-align: right; white-space: nowrap; }

/* The environment pill, from the PI/PA portal's chrome. */
.env-pill { background: var(--warn-bg); border: 1px solid var(--warn-line);
            color: #8a6116; border-radius: 999px; padding: .1rem .7rem;
            font-size: .78rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .04em; margin-left: .2rem; }
.topbar .wrap { justify-content: space-between; }
.topbar-program { font-weight: 600; }
.usermenu summary { gap: .45rem; }
.usermenu-label { font-weight: 600; font-size: .9rem; color: var(--ink); }
@media (max-width: 720px) { .usermenu-label { display: none; } }

/* Evidence history includes dates and replacement links, including on phones. */
.evidence-history { min-width: 0; }
.evidence-history li { flex-wrap: wrap; min-width: 0; }
.evidence-history li > span { white-space: normal; text-align: left;
                              min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .evidence-upload .row > label { flex: initial; width: 100%; }
}

/* Pre-submission checks (#19). One row per rule, colour-coded by outcome, with
   the rule and the version it ran at underneath — a contractor who wants to
   argue with a check needs to be able to name it. */
.badge.o-passed { background: #dff3e8; color: var(--green-dark); }
.badge.o-failed { background: #fdeaea; color: var(--err); }
.badge.o-could_not_check { background: var(--warn-bg); color: #8a6116; }
.badge.o-not_applicable { background: #eef1f5; color: var(--muted); }
.checks { list-style: none; margin: .6rem 0 0; padding: 0; }
.checks > li { border-top: 1px solid var(--line); padding: .7rem 0; }
.checks > li:first-child { border-top: 0; }
.checks .check-head { display: flex; gap: .6rem; align-items: baseline;
  flex-wrap: wrap; }
.checks .check-head strong { flex: 1 1 14rem; }
.checks p { margin: .3rem 0 0; }
.checks .fix { font-weight: 600; }
.checks .provenance { color: var(--muted); font-size: .82rem; }
.checks .affected { color: var(--muted); font-size: .88rem; }
.checks.quiet > li { opacity: .75; }