/* 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; }
/* Scott, 23 September: use the width of the page. 1240px left 180px of empty
   margin each side on a 1600px window while the units table was being clipped
   inside it. The gutter shrinks with the window rather than staying fixed. */
.wrap { max-width: 1560px; margin: 0 auto; padding: 0 clamp(.75rem, 1.5vw, 1.5rem);
  width: 100%; }
/* The reading pages keep a comfortable measure; only the working pages widen. */
.wrap.narrow { max-width: 1100px; }
.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: block; padding: 0; overflow: hidden; }
.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; }
.badge.s-ineligible, .badge.s-denied, .badge.s-rejected { background: #fbe9e7; color: var(--err); }
.badge.review-pending { background: var(--warn-bg); color: #8a6116; font-weight: 600; }
/* Portal Status tones (#19): ok is only ever an approval or a payment. */
.badge.tone-neutral { background: #eeeeee; color: #555; }
.badge.tone-info { background: #e5eefb; color: var(--blue); }
.badge.tone-ok { background: #dff3e8; color: var(--green-dark); }
.badge.tone-warn { background: var(--warn-bg); color: #8a6116; }
.badge.tone-bad { background: #fbe9e7; color: var(--err); }
.status-now { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 8px; padding: .8rem 1rem; }
.status-now.tone-ok { border-left-color: var(--green); }
.status-now.tone-warn { border-left-color: #c9962a; }
.status-now.tone-bad { border-left-color: var(--err); }
.status-now.tone-neutral { border-left-color: #999; }
.status-now p { margin: .5rem 0 0; }
.status-action { background: #f6f8fb; padding: .5rem .7rem; border-radius: 6px; }
.badge.review-confirmed { background: #dff3e8; color: var(--green-dark); font-weight: 600; }
.status-guide-list { margin: 0; display: grid; gap: .65rem; }
.status-guide-list dt { margin-bottom: .15rem; }
.status-guide-list dd { margin: 0; color: var(--muted); }
.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); }
.doclist li { margin-bottom: .8rem; overflow-wrap: anywhere; }
.doclist .document-meta { display: block; font-size: .9rem; }
.doclist a { display: inline-block; padding: .4rem .8rem .4rem 0; }
.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; }
}

/* the IQ code a household reads to their contractor */
.iq-code-box { border: 2px dashed var(--green); border-radius: 8px;
               padding: .9rem 1.2rem; margin: .8rem 0; }
.iq-code { display: block; font-family: "Nunito Sans", sans-serif;
           font-size: 1.7rem; font-weight: 800; letter-spacing: .12em;
           color: var(--blue); }

/* application timeline + authorizations */
.timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.timeline li { border-left: 3px solid var(--line); padding-left: .9rem; }
.timeline li:first-child { border-left-color: var(--green); }
.timeline p { margin: .3rem 0 0; }
.auth-row { justify-content: space-between; align-items: center; }
.revoked { text-decoration: line-through; opacity: .7; }

/* DEMO (temporary): scenario switcher bar - remove with app/demo.py */
.demo-bar { position: sticky; bottom: 0; z-index: 50; background: #1c2733;
            color: #fff; border-top: 3px solid var(--green); }
.demo-bar-inner { display: flex; align-items: center; gap: .7rem;
                  flex-wrap: wrap; padding: .5rem 1.25rem; }
.demo-tag { font-family: "Nunito Sans", sans-serif; font-weight: 800;
            font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
            color: var(--green); }
.demo-buttons { display: flex; gap: .35rem; flex-wrap: wrap; }
.demo-btn { font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
            background: transparent; color: #cfd8e0; border: 1px solid #46566a;
            border-radius: 999px; padding: .25rem .75rem; }
.demo-btn:hover { color: #fff; border-color: #fff; }
.demo-btn.on { background: var(--green); border-color: var(--green); color: #fff; }
.demo-viewing { font-size: .82rem; color: #cfd8e0; margin-left: auto; }
.demo-reset { margin-left: .2rem; }

/* #40 tenant invites */
.card.property.linked{opacity:.75;background:#f3f4f6}
.card.property.linked .property-main{opacity:.85}
.linked-tools{margin-top:.5rem}
table.homes{width:100%;border-collapse:collapse;margin:.5rem 0}
table.homes th,table.homes td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid #e5e7eb;vertical-align:middle}
table.homes td.actions form{display:inline;margin-right:.6rem}
.invite-link{width:16rem;max-width:100%;font-size:.85rem;margin-right:.3rem}
.badge.home-open{background:#e5e7eb;color:#374151}
.badge.home-claimed{background:#fef3c7;color:#92400e}
.badge.home-counted{background:#d1fae5;color:#065f46}
.badge.review-confirmed{background:#d1fae5;color:#065f46}
.badge.review-pending{background:#fef3c7;color:#92400e}
.add-home{margin-top:1rem;border-top:1px solid #e5e7eb;padding-top:.75rem}

/* #40 My Properties progress summary */
.building-progress{margin:.6rem 0;padding:.6rem .75rem;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px}
.progress-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.4rem}
.bar{position:relative;height:12px;background:#e5e7eb;border-radius:6px;overflow:visible;margin:.3rem 0 .6rem}
.bar-fill{height:100%;background:#f59e0b;border-radius:6px;transition:width .3s}
.bar-fill.met{background:#00ab4e}
.bar-mark{position:absolute;top:-4px;width:2px;height:20px;background:#034ea2}
.home-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:.3rem 0}
.chip{display:inline-flex;gap:.3rem;align-items:center;padding:.15rem .5rem;border-radius:999px;font-size:.8rem;border:1px solid transparent}
.chip.home-open{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.chip.home-claimed{background:#fef3c7;color:#92400e}
.chip.home-counted{background:#d1fae5;color:#065f46}
.chip.home-owner{background:#e0e7ff;color:#3730a3}
.chip-legend .chip{margin-right:.3rem}
.steps{list-style:none;display:flex;gap:0;padding:0;margin:.5rem 0 .3rem;counter-reset:step}
.steps li{flex:1;position:relative;text-align:center;font-size:.78rem;color:#6b7280;padding-top:1.4rem}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:50%;transform:translateX(-50%);width:1.1rem;height:1.1rem;line-height:1.1rem;border-radius:50%;background:#e5e7eb;color:#374151;font-size:.7rem;font-weight:700}
.steps li::after{content:"";position:absolute;top:.55rem;left:50%;width:100%;height:2px;background:#e5e7eb;z-index:-1}
.steps li:last-child::after{display:none}
.steps li.done{color:#065f46}
.steps li.done::before,.steps li.done::after{background:#00ab4e;color:#fff}
.steps li.current{color:#034ea2;font-weight:600}
.steps li.current::before{background:#034ea2;color:#fff}
.steps li.attention{color:#92400e;font-weight:600}
.steps li.attention::before{background:#f59e0b;color:#fff;content:"!"}
.steps.closed li{opacity:.6}
.next-step{margin:.2rem 0 .4rem}

/* #20 the project document signing checklist */
.signing-list { padding-left: 0; list-style: none; }
.signing-row { border-top: 1px solid #e5e7eb; padding: .9rem 0; color: inherit; }
.signing-row:first-child { border-top: 0; }
.signing-row .row { align-items: center; gap: .5rem; flex-wrap: wrap; }
.signing-row .upload-form { margin-top: .6rem; }
.signing-row .doclist { margin-top: .5rem; }
.source-note { color: var(--muted); font-style: italic; margin-top: .5rem; }

/* #49: a property's buildings sit under the property's name. */
.cards .group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem;
  margin-top: .8rem; padding: 0 .2rem; }
.cards .group-head h2 { margin: 0; font-size: 1.2rem; }
details.route { border: 1px solid #d8dee6; border-radius: .5rem; padding: .6rem .9rem; }
details.route > summary { cursor: pointer; }
details.route[open] > summary { margin-bottom: .5rem; }
.doc-list { list-style: none; padding: 0; margin: .2rem 0; display: grid; gap: .25rem; }
details.upload-for-tenant { margin-top: .4rem; }
details.upload-for-tenant form { margin-top: .5rem; max-width: 34rem; }
fieldset.card { border: 1px solid #d8dee6; }
fieldset.card legend { font-weight: 700; padding: 0 .4rem; }

/* My Properties tiles (#49 follow-up): a header, then one labelled row per
   thing the person needs to know - property type, income qualification. */
.card.property .tile-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: .8rem 1.2rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(#fbfcfe, #fff); }
.card.property .property-main strong { font-size: 1.12rem; color: var(--ink); }
.maps-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600;
  color: var(--blue); text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .28rem .8rem; background: #fff; white-space: nowrap; }
.maps-link:hover { border-color: var(--blue); background: #f2f7fd; }
.tile-rows { margin: 0; }
.tile-row { display: grid; grid-template-columns: 11.5rem 1fr; gap: .4rem 1.2rem;
  padding: .9rem 1.25rem; }
.tile-row + .tile-row { border-top: 1px solid var(--line); }
.tile-row dt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding-top: .2rem; }
.tile-row dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; min-width: 0; }
.tile-value { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; font-weight: 600; }
.tile-action { font-size: .85rem; font-weight: 600; }
.tile-help { margin: 0; font-size: .88rem; color: var(--muted); max-width: 44rem; }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .8rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; border: 1px solid transparent; }
.pill-ok { background: #dff3e8; color: #0b6b35; border-color: #b6e2c8; }
.pill-wait { background: var(--warn-bg); color: #7a5410; border-color: var(--warn-line); }
.pill-warn { background: #fdecd2; color: #8a4b08; border-color: #f0c27a; }
.pill-info { background: #e5eefb; color: var(--blue); border-color: #c4d8f5; }
.pill-todo { background: #eef1f4; color: #47525d; border-color: #d9e1e8; }
.pill-bad { background: #fbe9e7; color: var(--err); border-color: #f1c1bb; }
.card.property .building-progress { margin: 0; width: 100%; max-width: 40rem; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.card.property .building-progress .bar { width: 100%; margin: .1rem 0; }
.card.property .progress-head { margin: 0; }
.home-summary { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .9rem; color: var(--ink); }
.home-summary .todo { color: #8a4b08; }
.home-detail summary { cursor: pointer; }
.card.property .steps { width: 100%; max-width: 26rem; margin: .2rem 0; }
.card.property.linked { opacity: 1; background: var(--card); }
.card.property.linked .tile-head { background: #f3f4f6; }
@media (max-width: 640px) {
  .tile-row { grid-template-columns: 1fr; }
}
.tile-count { font-weight: 600; }

/* Edit / delete before anything is submitted (#49). */
.tile-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .5rem 1rem; padding: .7rem 1.25rem; border-top: 1px solid var(--line); background: #fbfcfe; }
.tile-foot-actions { display: inline-flex; gap: .5rem; align-items: center; }
.button.danger { border-color: var(--err); color: var(--err); background: #fff; }
.button.danger:hover { background: var(--err); color: #fff; }
.danger-link { color: var(--err); }
.danger-zone { border-color: #f1c1bb; margin-top: 1rem; }
.danger-zone h2 { color: var(--err); }
details.home-edit form { margin-top: .4rem; min-width: 15rem; }

.result-box { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 6px; padding: .6rem .9rem; }
.badge.home-vacant { background: #eeeeee; color: #666; }

/* Income Qualification building tiles, tightened (#49, 22 September). */
.card.building.compact { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1.1rem; }
.card.building.compact h2 { margin: 0; font-size: 1.1rem; }
.b-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem 1rem; flex-wrap: wrap; }
.b-head > div { flex: 1 1 22rem; min-width: 0; }
.b-head > .badge { flex: 0 0 auto; white-space: nowrap; margin-top: .15rem; }
.b-sub { margin: .1rem 0 0; font-size: .88rem; color: var(--muted); }
.b-result { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 6px; padding: .5rem .8rem; display: flex; flex-direction: column; gap: .35rem; }
.b-result-main { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.b-result .bar { margin: 0; height: 8px; }
.b-result .bar-mark { top: -3px; height: 14px; }
.b-counts { margin: 0; font-size: .86rem; color: var(--muted); }
.t-low { color: #0b6b35; font-weight: 600; } .t-mod { color: #4c3fb0; font-weight: 600; } .t-high { color: #8a4b08; font-weight: 600; }
.compact-notice { margin: 0; padding: .4rem .7rem; font-size: .88rem; }
.total-form details summary { cursor: pointer; }
.row.tight { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: flex-end; margin: .3rem 0 0; }
.row.tight label { font-size: .85rem; }
.tight-form { display: flex; flex-direction: column; gap: .3rem; }
.tight-form label { font-size: .85rem; }
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.routes .route { margin: 0; padding: .45rem .75rem; }
.routes .route.static { border: 1px solid var(--line); border-radius: .5rem; background: #fbfcfe; }
.covers { border: 0; padding: 0; margin: .2rem 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.covers legend { padding: 0; }
.choice.small { display: inline-flex; align-items: center; gap: .3rem; }
.choice.small input { margin: 0; }
table.homes.compact { width: 100%; border-collapse: collapse; font-size: .9rem;
  table-layout: fixed; }
/* One share of the panel each. Fixed layout means a wide field inside a cell
   wraps instead of stretching the table past its box. */
table.homes.compact col.col-unit { width: 7%; }
table.homes.compact col.col-route { width: 31%; }
table.homes.compact col.col-status { width: 15%; }
table.homes.compact col.col-todo { width: 31%; }
table.homes.compact col.col-act { width: 16%; }
/* Only the things that can be one long unbreakable token. A blanket
   `anywhere` here squeezed a checkbox's sentence to one letter per line. */
table.homes.compact td.home-unit, table.homes.compact .doc-inline,
table.homes.compact .invite-link { overflow-wrap: anywhere; }
table.homes.compact .option.statement > span { flex: 1 1 auto; min-width: 0;
  overflow-wrap: normal; }
table.homes.compact th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .2rem .4rem; }
table.homes.compact td { padding: .3rem .4rem; border-top: 1px solid var(--line); vertical-align: top; }
table.homes.compact .badge { padding: .1rem .55rem; font-size: .8rem; }
.link-row { display: inline-flex; gap: .3rem; align-items: center; }
.link-row .invite-link { width: 14rem; font-size: .8rem; padding: .2rem .4rem; }
.doc-inline { display: inline-flex; gap: .3rem; margin-right: .6rem; }
.home-actions { white-space: nowrap; }
.home-actions .inline, .home-actions details { display: inline-block; margin-right: .5rem; }
.linklike.small { font-size: .82rem; }
/* The Edit disclosure sits in the narrow Actions column; its fields were
   240px wide there and hung 66px outside the table. */
/* `white-space: nowrap` on the Actions cell was inherited by the Edit form,
   so its labels could not wrap and the form kept a 240px min-content width in
   a 180px column. The links keep their own nowrap; the cell does not. */
td.home-actions { white-space: normal; display: flex; flex-wrap: wrap;
  gap: .25rem .6rem; align-items: baseline; }
td.home-actions > form.inline, td.home-actions > .linklike,
td.home-actions form.inline > button { white-space: nowrap; }
td.home-actions > details.home-edit { flex: 1 0 100%; white-space: normal; }
details.home-edit > form.tight-form { width: 100%; box-sizing: border-box;
  display: grid; gap: .3rem .5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
details.home-edit > form.tight-form > label { display: flex; flex-direction: column;
  gap: .1rem; font-size: .74rem; min-width: 0; }
details.home-edit > form.tight-form input { width: 100%; box-sizing: border-box;
  font-size: .8rem; padding: .2rem .3rem; min-width: 0; }
details.home-edit > form.tight-form > button { grid-column: 1 / -1; justify-self: start; }
/* The upload pane's own row: the whole table width to lay out across. */
tr.unit-pane > td { padding: .1rem .4rem .7rem 2.2rem; border-top: 0; }
tr.unit-pane details.upload-for-tenant { margin: 0; }
tr.unit-pane details.upload-for-tenant > summary { font-weight: 600; }
details.upload-for-tenant { margin-top: .15rem; }
/* Scott, 23 September: this was eight controls stacked in a column and made
   the unit's row 473px tall. Two or three to a line, and the row is a third
   of that. */
details.upload-for-tenant form.tight-form { margin-top: .35rem; max-width: none;
  display: grid; gap: .35rem .55rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
details.upload-for-tenant form.tight-form > label { display: flex; flex-direction: column;
  gap: .12rem; font-size: .76rem; min-width: 0; }
details.upload-for-tenant form.tight-form > label.option.statement {
  grid-column: span 2; flex-direction: row; align-items: flex-start; gap: .4rem;
  font-size: .78rem; }
@media (max-width: 900px) {
  details.upload-for-tenant form.tight-form > label.option.statement { grid-column: 1 / -1; }
}
details.upload-for-tenant form.tight-form > label.option.statement > span {
  flex: 1 1 auto; min-width: 0; display: block; }
details.upload-for-tenant form.tight-form > button { grid-column: 1 / -1;
  justify-self: start; margin-top: .15rem; }
details.upload-for-tenant form.tight-form select,
details.upload-for-tenant form.tight-form input:not([type="checkbox"]):not([type="radio"]) {
  font-size: .82rem; padding: .22rem .35rem; width: 100%; box-sizing: border-box; }
details.upload-for-tenant form.tight-form input[type="checkbox"] { flex: none; margin-top: .15rem; }
.b-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; border-top: 1px solid var(--line); padding-top: .5rem; }
@media (max-width: 720px) { .routes { grid-template-columns: 1fr; } .home-actions { white-space: normal; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.total-form details[open] > summary.visually-hidden { position: static; width: auto; height: auto; clip: auto; }

/* #52: owner details, building answers and the signing step. */
[hidden] { display: none !important; }
fieldset.optionset, fieldset.address-block, fieldset.contact-block, fieldset.declarations {
  border: 1px solid #d8dee6; border-radius: 6px; padding: .5rem .8rem .65rem; margin: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
fieldset.optionset > legend, fieldset.address-block > legend,
fieldset.contact-block > legend, fieldset.declarations > legend {
  font-weight: 600; font-size: .95rem; padding: 0 .3rem;
}
/* Short answer sets read across the page, not down it. */
.optionset .options { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
label.option { display: inline-flex; flex-direction: row; align-items: center; gap: .45rem;
  font-weight: 400; font-size: .95rem; line-height: 1.3; padding: .3rem .7rem; margin: 0;
  border: 1px solid #cdd6df; border-radius: 999px; background: #fff; cursor: pointer; }
label.option input { width: 1rem; height: 1rem; flex: none; margin: 0; padding: 0;
  border-radius: 0; accent-color: var(--blue); }
label.option:hover { border-color: var(--blue); }
label.option:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
label.option:has(input:checked) { border-color: var(--blue); background: #eaf1fa; font-weight: 600; }
/* A single tick, and the declarations, keep their own line: the words are sentences. */
label.option.standalone, label.option.statement {
  border: 0; background: none; border-radius: 0; padding: .15rem 0; align-self: flex-start; }
label.option.statement { align-items: flex-start; }
label.option.statement input { margin-top: .2rem; }
fieldset.declarations { gap: .35rem; }
dl.facts { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: .25rem 1rem; margin: 0; }
dl.facts dt { font-weight: 600; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
.about-building { margin: .5rem 0; }
.signature-pad canvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 160;
  border: 1px dashed #6b7785; border-radius: 6px; background: #fff; touch-action: none; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; } }

/* #53: the building's code and its named contractor, one way of saying it. */
ul.building-facts { list-style: none; margin: .5rem 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: .35rem 1.4rem; }
ul.building-facts .fact { display: flex; align-items: baseline; gap: .4rem;
  flex-wrap: wrap; font-size: .9rem; }
ul.building-facts .fact-label { font-weight: 600; }
ul.building-facts .fact-note { color: #4a5763; }
ul.building-facts .code-expired .fact-note { color: #8a4b08; }
li.card.contractor-result { display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; }

/* #53 round two: the owner's four steps, and the two-pane Income Qualification. */
ol.owner-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .6rem; padding: 0; margin: 0 0 1.2rem; }
ol.owner-steps .step { display: flex; gap: .55rem; align-items: flex-start;
  border: 1px solid #d8dee6; border-radius: 8px; padding: .6rem .7rem; background: #fff; }
ol.owner-steps .step-no { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: #eef2f6; color: #4a5763; font-weight: 700;
  font-size: .85rem; }
ol.owner-steps .step-body { display: flex; flex-direction: column; gap: .2rem; }
ol.owner-steps .step-body strong { font-size: .92rem; }
ol.owner-steps .step.done { background: #f3f9f4; border-color: #bfe0c6; }
ol.owner-steps .step.done .step-no { background: var(--green, #00ab4e); color: #fff; }
ol.owner-steps .step.done .step-no::after { content: "✓"; }
ol.owner-steps .step.done .step-no { font-size: 0; }
ol.owner-steps .step.done .step-no::after { font-size: .9rem; }
ol.owner-steps .step.current { border-color: var(--blue, #034ea2); box-shadow: 0 0 0 1px var(--blue, #034ea2); }
ol.owner-steps .step.current .step-no { background: var(--blue, #034ea2); color: #fff; }
ol.owner-steps .step .button { align-self: flex-start; margin-top: .25rem; }

.iq-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.4rem; align-items: start; }
.iq-main { min-width: 0; }
/* Between the width where five columns stop fitting and the width where they
   stack, the table scrolls inside its own box. Without this it sets the floor
   for the whole grid and the PAGE scrolls sideways instead. */
/* With the fixed layout above the table always fits, so this has nothing to
   hide. It stays as a floor: if a future column does overflow, it scrolls here
   rather than dragging the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; min-width: 0; }
@media (max-width: 780px) { .table-scroll { overflow-x: visible; } }
/* A navigation rail, not a wall of tiles. Everything inside it is clipped to
   it: a long building name used to push its status chip out over the panel. */
.iq-sidebar { position: sticky; top: 1rem; font-size: .9rem; min-width: 0;
  background: #fff; border: 1px solid var(--line, #e4e9ee); border-radius: 8px;
  padding: .85rem .8rem .9rem; overflow: hidden; }
.iq-sidebar .sidebar-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: #6b7785; margin: 0 0 .7rem; font-weight: 700; }
/* Each box is pinned to the rail's own width. Without this the nowrap
   building names give the rail a min-content width of their longest name,
   and every box inside it overflows (clipped, or spilling before that). */
.iq-sidebar .sidebar-section, .iq-sidebar ul, .iq-sidebar li,
.iq-sidebar .sidebar-group { width: 100%; max-width: 100%; min-width: 0;
  box-sizing: border-box; }
.iq-sidebar .sidebar-section + .sidebar-section { margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--line, #e9edf1); }
.iq-sidebar .sidebar-group { margin: 0 0 .35rem; font-weight: 700; font-size: .88rem; line-height: 1.3;
  color: #1f2c3a; overflow-wrap: anywhere; }
/* No summary line in the rail: Scott, 22 September - names and one chip each. */
.iq-sidebar ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid #e4e9ee; }
a.iq-entry { display: flex; flex-direction: column; align-items: flex-start; gap: .22rem;
  padding: .42rem .55rem; margin-left: -2px; border-left: 2px solid transparent;
  text-decoration: none; color: inherit; min-width: 0; max-width: 100%; overflow: hidden;
  box-sizing: border-box; border-radius: 0 4px 4px 0; }
a.iq-entry:hover { background: #f3f6fa; }
a.iq-entry.selected { border-left-color: var(--blue, #034ea2); background: #eaf1fa; }
a.iq-entry.selected .entry-title { font-weight: 700; color: var(--blue, #034ea2); }
a.iq-entry .entry-title { display: block; max-width: 100%; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: .87rem; line-height: 1.35; }
.iq-sidebar .sidebar-add { display: inline-block; margin-top: 1rem; font-weight: 600; }

/* ONE status chip, wherever it appears: the rail and the units table read the
   same. Always a single line, never wider than the box it sits in. */
.iq-sidebar .pill, .homes .badge, .pill.st-todo, .pill.st-choose, .pill.st-ready,
.pill.st-sent, .pill.st-progress, .pill.st-decided {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; text-align: center;
  padding: .13rem .5rem; border-radius: 999px; font-size: .71rem; font-weight: 600;
  line-height: 1.5; letter-spacing: .01em; border: 1px solid transparent; }
.iq-sidebar .pill { align-self: flex-start; }
/* Tone: amber = your move, blue-grey = with someone else, green = done. */
.pill.st-todo, .pill.st-choose, .badge.home-open {
  background: #fdf3e0; color: #7a4b05; border-color: #f2ddb6; }
.pill.st-ready, .badge.home-counted {
  background: #e6f4ea; color: #14612c; border-color: #bfe3ca; }
.pill.st-sent, .pill.st-progress, .badge.home-claimed {
  background: #eaeef4; color: #35465a; border-color: #d3dbe5; }
.pill.st-decided { background: #dcefe3; color: #14612c; border-color: #b9dcc6; }
.badge.home-vacant { background: #f1f3f5; color: #6b7785; border-color: #dfe3e8; }

/* The main area leads with what to do next. */
.iq-panel .panel-next { border-left: 4px solid var(--blue, #034ea2); padding: .6rem .85rem;
  background: #f6f9fd; border-radius: 0 6px 6px 0; margin: 0 0 1rem; }
.iq-panel .panel-next p { margin: 0; }
.iq-panel .next-flag { display: inline-block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; background: var(--blue, #034ea2); color: #fff; padding: .1rem .4rem;
  border-radius: 3px; margin-right: .4rem; }
.iq-panel .next-head strong { font-size: 1.02rem; }
.iq-panel .next-detail, .iq-panel .next-how { font-size: .9rem; color: #35465a; margin-top: .25rem; }
.iq-panel .panel-next.next-ready { border-left-color: var(--green, #00ab4e); background: #f3f9f4; }
.iq-panel .panel-next.next-ready .next-flag { background: var(--green, #00ab4e); }
.units-head { font-size: 1rem; margin: 1.1rem 0 .4rem; }

/* One unit, one way of proving income. */
.homes td { vertical-align: top; }
td.home-route .route-form { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
fieldset.route-set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column;
  gap: .18rem; }
label.route-option { display: flex; flex-direction: row; align-items: center; gap: .4rem;
  font-weight: 400; font-size: .83rem; line-height: 1.2; padding: .16rem .4rem;
  border-radius: 4px; cursor: pointer; }
label.route-option input { width: .9rem; height: .9rem; flex: none; margin: 0; padding: 0;
  accent-color: var(--blue, #034ea2); }
label.route-option:hover { background: #f3f6fa; }
label.route-option.picked { background: #eaf1fa; font-weight: 600; }
/* #53 round four: the tenant's details belong to the invite route, so they
   are asked for only when that route is picked. A browser without :has()
   support shows them all the time, which asks for more than it needs but
   never hides a required field. */
/* Two fields to a line, so the four of them add two short lines to the row
   rather than four tall ones, and each input has room to be read. */
td.home-route { min-width: 17.5rem; }
fieldset.invite-details { border: 0; margin: .3rem 0 0; padding: .4rem .55rem .5rem;
  background: #f7fafd; border-left: 3px solid var(--blue, #034ea2); border-radius: 4px;
  width: 100%; box-sizing: border-box; }
p.invite-hint { margin: 0 0 .3rem; font-size: .78rem; font-weight: 600; line-height: 1.2; }
p.invite-hint .muted { font-weight: 400; }
.invite-grid { display: grid; gap: .3rem .45rem;
  grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); }
.invite-grid label { display: flex; flex-direction: column; gap: .08rem;
  font-size: .72rem; font-weight: 400; color: var(--muted, #555);
  text-transform: uppercase; letter-spacing: .03em; min-width: 0; }
/* Scott, 23 September: keep them on one line so the unit's row stays short. */
.invite-grid label.wide { grid-column: auto; }
.invite-grid input { font-size: .82rem; padding: .22rem .35rem; width: 100%;
  box-sizing: border-box; border: 1px solid var(--line, #cbd5e1); border-radius: 3px;
  text-transform: none; letter-spacing: normal; }
.invite-grid input:focus { outline: 2px solid var(--blue, #034ea2); outline-offset: -1px; }
.invite-grid input::placeholder { color: #9aa5b1; }
@media (max-width: 700px) {
  .invite-grid { grid-template-columns: 1fr; }
  td.home-route { min-width: 0; }
}
@supports selector(form:has(input:checked)) {
  form.route-form:not(:has(input[value="invite"]:checked)) fieldset.invite-details {
    display: none; }
}
/* Columns wide enough to read: the status chip on one line, and the "what is
   left to do" column not squeezed to a word per line. */

td.home-unit { white-space: nowrap; }
/* A file input reports a wide intrinsic size and pushed the card out. */
.tight-form input[type="file"], .tight-form select, .tight-form input[type="text"],
.tight-form input[type="email"] { max-width: 100%; box-sizing: border-box; }
.tight-form .row.tight > label { min-width: 0; }
td.home-todo { font-size: .85rem; }
td.home-todo .link-row { display: flex; gap: .3rem; align-items: center; }
.button.tiny-cta { padding: .18rem .5rem; font-size: .78rem; border-radius: 4px; }

/* Under 780px a five-column table cannot be read: every cell becomes a word
   per line. Each unit becomes its own card instead, with the column name in
   front of the value. Same markup, same order, no horizontal scrolling. */
@media (max-width: 780px) {
  table.homes.compact, table.homes.compact tbody, table.homes.compact tr,
  table.homes.compact td { display: block; width: 100%; box-sizing: border-box; }
  table.homes.compact thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); }
  table.homes.compact tr { border: 1px solid var(--line, #e4e9ee); border-radius: 8px;
    padding: .55rem .7rem; margin: 0 0 .7rem; background: #fff; }
  table.homes.compact td { border: 0; padding: .3rem 0; min-width: 0; }
  table.homes.compact td + td { border-top: 1px dashed #edf1f5; }
  table.homes.compact tr.unit-pane { margin-top: -.85rem; border-top-left-radius: 0;
    border-top-right-radius: 0; border-top: 0; }
  tr.unit-pane > td { padding: .2rem 0 .1rem; }
  tr.unit-pane > td::before { display: none; }
  table.homes.compact td[data-label]::before { content: attr(data-label);
    display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
    color: #6b7785; font-weight: 700; margin-bottom: .2rem; }
  table.homes.compact td.home-unit::before { display: none; }
  table.homes.compact td.home-unit { font-size: 1rem; padding-bottom: .45rem; }
  table.homes.compact td.home-unit strong::before { content: "Unit "; font-weight: 600;
    color: #6b7785; font-size: .8rem; }
  td.home-status, td.home-todo, td.home-unit { min-width: 0; }
  td.home-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
  td.home-actions::before { flex: 1 0 100%; }
  .invite-link { min-width: 0; }
  td.home-todo .link-row { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  ol.owner-steps { grid-template-columns: 1fr 1fr; }
  .iq-layout { grid-template-columns: minmax(0, 1fr); }
  .iq-sidebar { position: static; }
}
@media (max-width: 560px) { ol.owner-steps { grid-template-columns: 1fr; } }

/* #53: one place that says how a unit gets income qualified. */
.units-block { border: 1px solid #d8dee6; border-radius: 8px; padding: .8rem 1rem 1rem;
  margin: 1.1rem 0; background: #fcfdfe; }
.units-block .units-head { margin-top: 0; }
ol.howto { list-style: none; counter-reset: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .45rem; }
ol.howto li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem;
  line-height: 1.35; }
ol.howto .howto-no { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue, #034ea2); color: #fff;
  font-size: .78rem; font-weight: 700; }
details.sep-block { border: 1px solid #dde4ea; border-radius: 6px; padding: .5rem .75rem;
  background: #fff; margin-bottom: 1rem; }
details.sep-block > summary { cursor: pointer; }
fieldset.covers { border: 0; padding: 0; margin: .5rem 0 0; }
fieldset.covers legend { font-weight: 400; margin-bottom: .35rem; }
.unit-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .4rem; }
label.unit-chip { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem;
  border: 1px solid #cdd6df; border-radius: 999px; padding: .2rem .6rem; background: #fff;
  font-weight: 400; font-size: .85rem; cursor: pointer; }
label.unit-chip input { width: .9rem; height: .9rem; flex: none; margin: 0;
  accent-color: var(--blue, #034ea2); }
label.unit-chip.picked, label.unit-chip:has(input:checked) { border-color: var(--blue, #034ea2);
  background: #eaf1fa; font-weight: 600; }
label.unit-chip.all-units { border-style: dashed; margin-bottom: .3rem; }

/* --- One status-chip scale (#53, 23 September 2026) -------------------------
   Three chips were being drawn at three sizes: 11.4px in the rail, 12.8px in
   the units table, 13.6px in the building header, with different padding and
   only some of them bordered. They now read as one family: the same radius,
   the same 1px tone border, one line always, and one step of size between a
   chip inside a list and the header's own. */
table.homes.compact .badge, .iq-sidebar .pill {
  padding: .16rem .55rem; font-size: .75rem; font-weight: 600; line-height: 1.5;
  border-radius: 999px; border: 1px solid transparent;
  display: inline-block; max-width: 100%; }
/* In the rail a chip is a label beside a name, so it stays on one line and
   truncates. In the table it is the answer to the column, so it wraps rather
   than hiding its own words. */
.iq-sidebar .pill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.homes.compact .badge { white-space: normal; text-align: left;
  border-radius: 10px; }
.b-head > .badge { padding: .2rem .7rem; font-size: .8rem; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent; }
.badge.review-pending, .b-head > .badge.review-pending {
  background: #fdf3e0; color: #7a4b05; border-color: #f2ddb6; }
.badge.review-confirmed, .b-head > .badge.review-confirmed {
  background: #e6f4ea; color: #14612c; border-color: #bfe3ca; }
/* Tones, after the scale so the border colour is not reset to transparent. */
.iq-sidebar .pill.st-todo, .iq-sidebar .pill.st-choose,
table.homes.compact .badge.home-open {
  background: #fdf3e0; color: #7a4b05; border-color: #f2ddb6; }
.iq-sidebar .pill.st-ready, table.homes.compact .badge.home-counted {
  background: #e6f4ea; color: #14612c; border-color: #bfe3ca; }
.iq-sidebar .pill.st-sent, .iq-sidebar .pill.st-progress,
table.homes.compact .badge.home-claimed {
  background: #eaeef4; color: #35465a; border-color: #d3dbe5; }
.iq-sidebar .pill.st-decided { background: #dcefe3; color: #14612c; border-color: #b9dcc6; }
table.homes.compact .badge.home-vacant {
  background: #f1f3f5; color: #6b7785; border-color: #dfe3e8; }
/* The demo bar wrapped to four rows on a phone and covered a third of the
   screen. One scrolling row instead, until it is deleted with app/demo.py. */
@media (max-width: 780px) {
  .demo-bar-inner { flex-wrap: nowrap; overflow-x: auto; gap: .45rem;
    padding: .4rem .75rem; -webkit-overflow-scrolling: touch; }
  .demo-buttons { flex-wrap: nowrap; }
  .demo-btn { white-space: nowrap; font-size: .78rem; padding: .22rem .6rem; }
  .demo-tag { font-size: .68rem; flex: 0 0 auto; }
  .demo-viewing { display: none; }
}
/* The fifth instruction is a way out, not another step: it is set apart. */
ol.howto li.howto-help { margin-top: .45rem; padding-top: .55rem;
  border-top: 1px dashed var(--line, #e4e9ee); }
ol.howto li.howto-help .howto-no { background: #eef1f5; color: #46566a; }
ol.howto li.howto-help a { font-weight: 600; }

/* #56: what a customer typed into a support ticket, shown back to them with
   their own line breaks kept. */
.preserve { white-space: pre-wrap; }

/* #33: the directory shows one page of cards at a time. */
.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0; }
.pager .gap { color: var(--muted); padding: 0 .2rem; }
.pager [aria-current="page"] { cursor: default; }
/* On a phone the filter rows stack, and each label's width basis (11-12rem)
   became its HEIGHT, while flex-end pushed every field to the right: the
   filters took 1,300px before the first result. Stack them at their own
   height, full width. */
@media (max-width: 560px) {
  .filterbar .row { align-items: stretch; }
  .filterbar .row > label, .filterbar .row > label.narrow { flex: 0 0 auto; white-space: normal; }
}

/* #60: the admin page's search sits on one line. */
.admin-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 1rem 0; }
.admin-search input[type=search] { min-width: 16rem; }