/* =========================================================================
   SortedCars UK — Vehicle Report Builder storefront (/reports/)
   Pairs with /style.css + /css/sorted-check.css. Generated pages link this.
   ========================================================================= */

/* ---- hub grid + cards (mirrors the /check/free-checks look) ---- */
.hub-intro { max-width: 800px; margin: 0 auto 2.5rem; padding: 0 2rem; text-align: center; color: rgba(255,255,255,0.8); }
.hub-intro p { font-size: 1.05rem; line-height: 1.7; }
/* min-width:0 because body is display:flex (style.css) and these sections are
   flex items: without it they take min-width:auto and refuse to shrink below
   their widest child, sliding the whole page sideways instead of letting the
   child wrap. Same root cause as the free-check overflow (QA #5). */
.hub-grid-section { max-width: 1100px; margin: 0 auto 3rem; padding: 0 2rem; min-width: 0; }
.hub-grid-title { color: #fff; font-size: 1.25rem; margin: 0 0 1.25rem; font-weight: 700; }
/* minmax(min(260px, 100%), …), not minmax(260px, …): a bare floor wider than
   the container makes the track overflow rather than shrink, so the homepage
   grid stuck out on a 320px phone. min() lets the last card give way. */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 1rem; }
.hub-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1rem;
    text-decoration: none;
    color: #fff;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    display: flex;
    flex-direction: column;
    min-height: 140px;
}
.hub-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,112,10,0.6);
    background: linear-gradient(135deg, rgba(255,112,10,0.08), rgba(255,255,255,0.03));
}
.hub-card-icon { width: 36px; height: 36px; margin-bottom: 0.75rem; color: #FF700A; display: inline-flex; align-items: center; justify-content: center; }
.hub-card-icon svg { width: 100%; height: 100%; }
.hub-card-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
.hub-card-desc { font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.7); flex: 1; }
.hub-card-meta { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- home reg form (matches SortedCheck joined plate + button) ---- */
.rep-reg-form { display: flex; gap: 1px; align-items: stretch; justify-content: center; height: 52px; border: 0; background: none; padding: 0; }
@media (max-width: 640px) {
    .rep-reg-form { flex-direction: column; height: auto; }
}

/* ---- section build card ---- */
.rep-build { max-width: 720px; margin: 0 auto 2rem; padding: 0 2rem; }
.rep-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 1.75rem;
}
.rep-desc { color: rgba(255,255,255,0.82); line-height: 1.7; margin: 0 0 1.5rem; }
.rep-reg-label { display: block; color: rgba(255,255,255,0.6); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
/* Standalone reg plate (builder + section pages) — same plate as
   /check/free-car-check, but a complete pill (no joined button). */
.rep-reg-plate { width: 100%; max-width: 320px; height: 52px; border-radius: 8px; margin: 0.5rem auto 1.5rem; }
.rep-choose { color: #fff; font-weight: 600; margin: 0 0 0.75rem; }
.rep-prov-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.rep-prov {
    display: flex; align-items: center; gap: 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.rep-prov:hover { border-color: rgba(255,112,10,0.5); }
.rep-prov:has(.rep-prov-cb:checked) { border-color: rgba(255,112,10,0.8); background: rgba(255,112,10,0.1); }
.rep-prov-cb { width: 18px; height: 18px; accent-color: #FF700A; flex-shrink: 0; }
.rep-prov-name { flex: 1; color: #fff; font-weight: 600; font-size: 0.95rem; }
.rep-prov-price { color: #FF700A; font-weight: 800; }
.rep-note { color: rgba(255,255,255,0.5); font-size: 0.8rem; margin: -0.25rem 0 1rem; }
.rep-add-btn { width: 100%; padding: 1rem; font-size: 1rem; margin-top: 0.5rem; }
.rep-add-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.rep-freenote { color: rgba(255,255,255,0.55); font-size: 0.8rem; text-align: center; margin: 0.9rem 0 0; line-height: 1.5; }
.rep-added { color: #4ade80; }

/* ---- sticky mini-cart bar ---- */
.cart-bar {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
    z-index: 900;
    display: flex; align-items: center; gap: 0.65rem;
    background: linear-gradient(180deg, rgba(20,24,33,0.96), rgba(12,16,22,0.96));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,112,10,0.4);
    border-radius: 999px;
    padding: 0.6rem 0.7rem 0.6rem 0.85rem;
    text-decoration: none; color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    transition: transform 0.15s;
}
.cart-bar[hidden] { display: none; }
.cart-bar:hover { transform: translateX(-50%) translateY(-2px); }
.cart-bar-disabled { cursor: not-allowed; border-color: rgba(255,255,255,0.18); }
.cart-bar-disabled:hover { transform: translateX(-50%); }
.cart-bar-disabled .cart-bar-cta { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }
.cart-bar-disabled .cart-bar-count { background: rgba(255,255,255,0.3); }
.cart-bar-count {
    background: #FF700A; color: #fff; font-weight: 800; font-size: 0.85rem;
    min-width: 1.5rem; height: 1.5rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 0.4rem;
}
.cart-bar-label { font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.cart-bar-total { font-weight: 800; }
.cart-bar-cta {
    background: linear-gradient(180deg, #ff7a1a, #ff6b00); color: #fff;
    font-weight: 700; font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 999px;
}

@media (max-width: 480px) {
    .cart-bar { width: calc(100% - 1.5rem); justify-content: space-between; border-radius: 16px; }
}

/* ===== Two-panel builder (Before you buy) ===== */
.bld-wrap { width: 100%; max-width: 1040px; margin: 0 auto 2rem; padding: 0 2rem; box-sizing: border-box; }
.bld-reg-row { max-width: 360px; margin: 0 auto 1.75rem; text-align: center; }
.bld-reg-row .sc-reg-plate { margin: 0.5rem auto 0; }
.bld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .bld-grid { grid-template-columns: 1fr; } }

.bld-pick { color: #fff; font-weight: 600; margin: 0 0 0.75rem; font-size: 0.95rem; }

/* left — flagship */
.bld-flagship {
    background: linear-gradient(135deg, rgba(255,112,10,0.12), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,112,10,0.4);
    border-radius: 18px; padding: 1.5rem;
}
.bld-flag-title { color: #fff; margin: 0; font-size: 1.25rem; }
.bld-flag-desc { color: rgba(255,255,255,0.78); line-height: 1.6; font-size: 0.9rem; margin: 0.5rem 0 1.25rem; }
.bld-tiers { display: flex; flex-direction: column; gap: 0.5rem; }
.bld-guarantee-note { color: rgba(255,255,255,0.62); font-size: 0.8rem; line-height: 1.5; margin: 0.75rem 0 0; }
.bld-guarantee-note a { color: #FF700A; }
.bld-tier {
    display: flex; align-items: center; gap: 0.75rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 0.85rem 1rem; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.bld-tier:hover { border-color: rgba(255,112,10,0.6); }
.bld-tier:has(.bld-radio:checked) { border-color: rgba(255,112,10,0.9); background: rgba(255,112,10,0.12); }
.bld-radio { width: 18px; height: 18px; accent-color: #FF700A; flex-shrink: 0; }
.bld-tier-name { flex: 1; color: #fff; font-weight: 600; font-size: 0.92rem; }
.bld-tier-price { color: #FF700A; font-weight: 800; }

/* right — others */
.bld-others { display: flex; flex-direction: column; gap: 0.85rem; }
.bld-item {
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 1rem 1.1rem;
}
.bld-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.bld-item-title { color: #fff; font-weight: 700; font-size: 1rem; }
.bld-item-desc { color: rgba(255,255,255,0.65); font-size: 0.82rem; line-height: 1.45; margin: 0.3rem 0 0.7rem; }
.bld-sample { color: #FF700A; font-size: 0.78rem; font-weight: 600; text-decoration: underline; white-space: nowrap; cursor: pointer; }
.bld-sample:hover { color: #ff944d; }
.bld-item-provs { display: flex; flex-direction: column; gap: 0.4rem; }
.bld-cb-row {
    display: flex; align-items: center; gap: 0.65rem; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 0.6rem 0.8rem; transition: border-color 0.15s, background 0.15s;
}
.bld-cb-row:hover { border-color: rgba(255,112,10,0.5); }
.bld-cb-row:has(.bld-cb:checked) { border-color: rgba(255,112,10,0.8); background: rgba(255,112,10,0.1); }
.bld-cb { width: 17px; height: 17px; accent-color: #FF700A; flex-shrink: 0; }
.bld-cb-name { flex: 1; color: #fff; font-size: 0.88rem; }
.bld-cb-price { color: #FF700A; font-weight: 800; font-size: 0.9rem; }

.bld-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin: 1.75rem auto 0; }
.bld-add { flex: 1 1 0; max-width: 300px; margin: 0; padding: 1rem; font-size: 1rem; }
.bld-add:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.bld-reset { flex: 1 1 0; max-width: 300px; margin: 0; padding: calc(1rem - 1px) 1.6rem; border-radius: 980px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.bld-reset:hover:not(:disabled) { color: #ff6b6b; border-color: rgba(255,107,107,0.6); background: rgba(255,107,107,0.08); }
.bld-reset:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== 80% sample-report modal ===== */
.smodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.smodal[hidden] { display: none; }
.smodal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
.smodal-box {
    position: relative; width: 80vw; height: 80vh; max-width: 900px;
    background: #0c1016; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.smodal-frame { width: 100%; height: 100%; border: 0; display: block; background: #0c1016; }
.smodal-close {
    position: absolute; top: 0.5rem; right: 0.6rem; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.smodal-close:hover { background: rgba(255,112,10,0.8); }
@media (max-width: 600px) { .smodal-box { width: 94vw; height: 88vh; } }

/* Branded confirm dialog — replaces window.confirm() */
.cmodal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cmodal[hidden] { display: none; }
.cmodal-overlay { position: absolute; inset: 0; background: rgba(6,8,12,0.28); }
.cmodal-box {
    position: relative; width: 100%; max-width: 420px; text-align: center;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 24px; padding: 1.75rem;
    /* Liquid glass: light blur, high transparency, vibrant refraction */
    backdrop-filter: blur(10px) saturate(2) brightness(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.15);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.45),
        inset 0 1px 1px rgba(255,255,255,0.6),
        inset 0 0 12px rgba(255,255,255,0.08);
    animation: cmodal-pop 0.18s ease-out;
}
/* Glossy specular sheen + rim light — the "liquid" in liquid glass */
.cmodal-box::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0) 42%),
        radial-gradient(130% 80% at 50% -15%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%);
}
.cmodal-title, .cmodal-text, .cmodal-actions { position: relative; z-index: 1; }
@keyframes cmodal-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.cmodal-title { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.cmodal-text { margin: 0 0 1.5rem; font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.cmodal-actions { display: flex; gap: 0.75rem; justify-content: center; }
.cmodal-btn { flex: 1 1 0; padding: 0.7rem 1.2rem; border-radius: 980px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: filter 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.cmodal-cancel { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.cmodal-cancel:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: #fff; }
.cmodal-ok { background: linear-gradient(180deg, #ff7a1a 0%, #ff6b00 100%); border: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 8px rgba(255,107,0,0.3); }
.cmodal-ok:hover { filter: brightness(1.05); }

/* ===== Set-menu vs à-la-carte ===== */
.bld-setmenu {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: #fff; background: #FF700A; padding: 0.12rem 0.5rem; border-radius: 999px; vertical-align: middle;
}
.bld-incl {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3px;
    color: #ffb37a; background: rgba(255,112,10,0.14); border: 1px solid rgba(255,112,10,0.35);
    padding: 0.08rem 0.45rem; border-radius: 999px; white-space: nowrap; vertical-align: middle;
}
/* à-la-carte-only buckets: full-width responsive grid of report boxes */
.bld-alacarte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0.85rem; }
/* disabled (already in the full meal) */
.bld-cb-row.bld-disabled { opacity: 0.45; pointer-events: none; filter: grayscale(0.4); }

/* ===== Home set-menu hero ===== */
.setmenu-hero {
    display: block; max-width: 1100px; margin: 0 auto 1.5rem; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, rgba(255,112,10,0.18), rgba(255,112,10,0.04));
    border: 1px solid rgba(255,112,10,0.5); border-radius: 20px; padding: 1.75rem 2rem;
    transition: transform 0.15s, border-color 0.15s;
}
.setmenu-hero:hover { transform: translateY(-2px); border-color: rgba(255,112,10,0.85); }
.setmenu-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #FF700A; margin-bottom: 0.5rem; }
.setmenu-hero h2 { margin: 0 0 0.5rem; font-size: 1.5rem; color: #fff; }
.setmenu-hero p { margin: 0 0 1.25rem; color: rgba(255,255,255,0.8); line-height: 1.6; max-width: 760px; }
.setmenu-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.setmenu-price { font-size: 1.4rem; font-weight: 800; color: #FF700A; }
.setmenu-cta .btn { padding: 0.8rem 1.6rem; }

/* ===== All-reports page ===== */
.bld-flagship-wide { max-width: none; margin: 0; }
.bld-group-title { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 0.85rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* ---- category tabs ---- */
/* Sticky below the fixed header, not at 0. Stuck at 0 the strip parked itself
   underneath the header, so arriving from a homepage card left the tabs half
   hidden and the tab you aimed at was not where it looked.

   The offset reads --sc-header-h, which js/header.js measures from the real
   header and keeps in sync via ResizeObserver. A literal cannot work here: the
   header is ~59px on a phone, ~70px on desktop and ~86px at the 768px
   breakpoint where the nav wraps, so any single number is wrong somewhere.
   The 62px fallback only applies if header.js has not run yet. */
.bld-tabs { position: sticky; top: var(--sc-header-h, 62px); z-index: 6; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.5rem 0 1.25rem; padding: 0.35rem 0; background: rgba(12,16,22,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.12); }
.bld-tab { scroll-margin-top: calc(var(--sc-header-h, 62px) + 12px); flex: 1 1 0; text-align: center; white-space: nowrap; background: none; border: 0; color: rgba(255,255,255,0.62); font: inherit; font-weight: 700; font-size: 0.95rem; padding: 0.6rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.bld-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.bld-tab:focus { outline: none; }
.bld-tab:focus-visible { outline: 2px solid rgba(255,112,10,0.7); outline-offset: -2px; border-radius: 8px; }
.bld-tab.active { color: #FF700A; border-bottom-color: #FF700A; }
.bld-panel[hidden] { display: none; }
.bld-subgroup-title { color: rgba(255,255,255,0.55); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 1.6rem 0 0.85rem; }
.bld-subgroup-title:first-child { margin-top: 0.25rem; }

/* ===== Trader Reports page — input/output cards ===== */
.bld-prov-tag { font-size: 0.7rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; font-weight: 600; }
.bld-io { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 0.8rem; }
.bld-io-row { display: grid; grid-template-columns: 60px 1fr; gap: 0.6rem; align-items: start; }
.bld-io-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #FF700A; padding-top: 0.12rem; }
.bld-io-val { font-size: 0.82rem; line-height: 1.45; color: rgba(255,255,255,0.82); }
.bld-cb-tag { color: rgba(255,255,255,0.5); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.bld-cb-row:has(.bld-tcb:checked) { border-color: rgba(255,112,10,0.8); background: rgba(255,112,10,0.1); }
.trade-bar { border: 0; cursor: pointer; font: inherit; }
.trade-note { color: rgba(255,255,255,0.55); font-size: 0.85rem; text-align: center; max-width: 700px; margin: 0.5rem auto 0; line-height: 1.5; }
/* The /trade/ CTA button spells out an email address. That is one unbreakable
   token, so the button's min-content width (262px, plus 4rem of padding) held
   the whole section at 392px and slid the page sideways on every phone
   narrower than ~414px. Let the address wrap and the padding ease off. */
.hub-cta .btn { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .hub-cta { padding: 1.5rem 1rem !important; }
  .hub-cta .btn { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ===== Builder extra inputs: shared odometer + per-report fields ===== */
.bld-odometer-row { margin: 0 0 1rem; padding: 0.9rem 1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; }
.bld-odometer-row label { display: block; color: rgba(255,255,255,0.8); font-size: 0.85rem; margin-bottom: 0.45rem; }
.bld-xinput { margin-top: 0.6rem; }
.bld-x-reveal { margin: 0.35rem 0 0.6rem 1.9rem; }
.bld-xinput label { display: block; color: rgba(255,255,255,0.7); font-size: 0.8rem; margin-bottom: 0.3rem; }
.bld-x { width: 100%; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.95rem; box-sizing: border-box; }
.bld-x:focus { border-color: #FF700A; }
.bld-x:focus-visible { outline: 2px solid #FF700A; outline-offset: 1px; }
.bld-x-req { color: #FF9D4D; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
/* Still-to-fill, before they've pressed anything: amber, not alarm red.
   Declared ABOVE .bld-x-error so the red press-time state wins when a field
   carries both. */
.bld-x-needed { border-color: rgba(255,157,77,0.65); background: rgba(255,157,77,0.07); }
.bld-x-error { border-color: #ff6b6b; box-shadow: 0 0 0 2px rgba(255,107,107,0.25); }
.bld-msg { margin: 0.75rem auto 0; max-width: 640px; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.5); color: #ff6b6b; font-size: 0.9rem; font-weight: 600; text-align: center; }
/* Same slot as .bld-msg, calmer — the running list of what's outstanding. */
.bld-needs { margin: 0.75rem auto 0; max-width: 640px; padding: 0.6rem 0.9rem; border-radius: 10px; background: rgba(255,157,77,0.08); border: 1px solid rgba(255,157,77,0.3); color: #FFB878; font-size: 0.88rem; font-weight: 600; text-align: center; }
.bld-needs[hidden] { display: none; }