/* project-status.css -- Phase 3 Project Status / Contractor Coverage overview panel (Property Owner).
 *
 * Read-only overview that sits ABOVE the detailed Match cards. Uses the platform's established palette
 * (PO/brand green #036836; the same orange used by the Phase 2 "needs review" flag) rather than new
 * hues, so it reads as part of one dashboard. Semantic status colour (covered vs needed vs review) is
 * kept separate from any single accent, and status is always carried by TEXT, never colour alone
 * (accessibility). Minimal, symmetric, mobile-first. */

.npca-v2-project-status {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 4px solid #036836;
    border-radius: 8px;
    background: rgba(3, 104, 54, 0.03);
    /* Contrast root-cause fix (2026-09-10): this panel set a pale-green BACKGROUND but never its own text
       COLOR, so every element that relies on inheritance + opacity (the "Selected: <contractor>" row and
       the whole Preferred-Contractor referral block -- name, labels, lists, note) inherited the page
       framework's default text colour, which renders near-WHITE on the pale-green panel and is unreadable.
       Anchoring an explicit dark base colour here makes the panel own its text; the darker per-element
       colours below still refine specific labels, and the dark-mode block re-lightens everything as a set. */
    color: #1a1a1a;
    /* This panel is a <section>, so the framework's `section:where(:not(.bricks-shape-divider))` rule
       was handing it `display:flex; flex-direction:column; align-items:center; gap:var(--container-gap)`
       -- a ~65.4px flex gap between the summary, scope list, still-needed recap and manage-note, plus
       center alignment. That is the SAME framework injection platform-shell.css already neutralizes for
       `.npca-v2-status-card` and the other panes; this Phase 3 panel was simply never added to that
       reset, so it kept the 65px gaps and read dramatically too tall. Restore block flow so the panel's
       own authored margins (below) supply the rhythm. A single class (0,1,0) beats the framework's
       `section` (0,0,1), and this file prints after automatic.css, so no !important is needed. */
    display: block;
    gap: 0;
}
/* The panel's DIRECT <div> children were likewise taking the framework's `section > div` content gap
   (~29.5px), padding out the space inside the summary, still-needed and referral groups. Their own
   authored child margins are the intended rhythm; restore block flow so they apply. (`__head` and
   `__summary-line` author their own `display:flex`, so they are already immune and left untouched.) */
.npca-v2-project-status__summary,
.npca-v2-project-status__needed,
.npca-v2-project-status__referral {
    display: block;
    gap: 0;
}
.npca-v2-project-status__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.npca-v2-project-status__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.npca-v2-project-status__empty {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
}

/* ---- Coverage summary + meter ---- */
.npca-v2-project-status__summary {
    margin-top: 0.7rem;
}
.npca-v2-project-status__summary-line {
    margin: 0 0 0.55rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.npca-v2-project-status__summary-count {
    font-size: 0.98rem;
    font-weight: 600;
}
.npca-v2-project-status__summary-detail {
    font-size: 0.9rem;
    /* Phase 3 accessibility cleanup (folded into the 0.17.94 release): darkened from 0.62 for a
       comfortable AA margin on the near-white card. No layout change. */
    color: rgba(0, 0, 0, 0.72);
}
.npca-v2-project-status__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
}
.npca-v2-project-status__badge--complete {
    color: #036836;
    background: rgba(3, 104, 54, 0.14);
}
.npca-v2-project-status__meter {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.09);
    overflow: hidden;
}
.npca-v2-project-status__meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #036836;
    transition: width 0.25s ease;
}
.npca-v2-project-status__summary.is-complete .npca-v2-project-status__meter-fill { background: #036836; }

/* ---- Per-scope status list ---- */
.npca-v2-project-status__scopes {
    list-style: none;
    margin: 0.95rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.npca-v2-project-status__scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.npca-v2-project-status__scope:first-child { border-top: 0; }
.npca-v2-project-status__scope-name {
    font-weight: 600;
    font-size: 0.94rem;
    flex: 1 1 40%;
    min-width: 8rem;
}
.npca-v2-project-status__scope-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-left: auto;
}
.npca-v2-project-status__scope-status--covered { color: #036836; }
.npca-v2-project-status__scope-status--covered::before {
    content: "\2713"; /* check */
    font-weight: 700;
}
.npca-v2-project-status__scope-lead {
    /* Phase 3 accessibility cleanup (0.17.94): darkened from 0.55 for a comfortable AA margin. */
    color: rgba(0, 0, 0, 0.64);
    font-weight: 500;
}
.npca-v2-project-status__scope-contractor {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
}
.npca-v2-project-status__scope-status--needed {
    color: #8a5a00;
    font-weight: 600;
}
.npca-v2-project-status__scope-status--needed::before {
    content: "\25CB"; /* open circle -- an unfilled scope */
    font-size: 0.8em;
}
.npca-v2-project-status__review {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8a5a00;
    background: rgba(248, 105, 2, 0.12);
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    cursor: help;
}

/* ---- Still needed recap ---- */
.npca-v2-project-status__needed {
    margin-top: 0.95rem;
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.14);
}
.npca-v2-project-status__needed-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Contrast fix: 0.55 black on the near-white card read as "nearly invisible" for this small
       uppercase label. Darkened to 0.72 -- the same value the summary-detail line already uses for a
       comfortable AA margin. No layout change. */
    color: rgba(0, 0, 0, 0.72);
    margin-bottom: 0.35rem;
}
.npca-v2-project-status__needed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}
.npca-v2-project-status__needed-list li {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a5a00;
    background: rgba(248, 105, 2, 0.1);
    border-radius: 4px;
    padding: 0.12rem 0.5rem;
}
.npca-v2-project-status__manage-note {
    margin: 0.9rem 0 0;
    font-size: 0.83rem;
}

/* ---- Live-refresh affordance (project-status.js swaps innerHTML) ---- */
.npca-v2-project-status.is-refreshing { opacity: 0.6; transition: opacity 0.15s ease; }

/* Dark-mode block REMOVED in 0.17.99 (CSS isolation Phase B). The host WordPress/Bricks site is
   permanently light and never darkens its own background for OS dark mode, so this
   `@media (prefers-color-scheme: dark)` block only ever fired for a viewer whose OS/browser was dark
   -- painting the panel's text WHITE (rgba(255,255,255,0.92)) on the site's still-LIGHT pale-green
   surface, i.e. the reported illegibility. NPCA now commits to its light palette to match the host
   (`.npca-v2-shell { color-scheme: light }` + `color: var(--match-ink)`), so this panel stays readable
   regardless of the OS setting. Do not reintroduce a dark block unless the whole site adopts dark mode. */

/* Phase 6: Preferred Contractor (referral) surface inside the Project Status panel. */
.npca-v2-project-status__referral { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 8px; background: rgba(0,0,0,0.035); }
.npca-v2-project-status__referral-label { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.64; }
.npca-v2-project-status__referral-name { display: block; font-size: 1.02rem; font-weight: 600; margin-bottom: 0.5rem; }
.npca-v2-project-status__referral-group { margin-top: 0.5rem; }
.npca-v2-project-status__referral-group-label { display: block; font-size: 0.8rem; font-weight: 600; opacity: 0.8; margin-bottom: 0.15rem; }
.npca-v2-project-status__referral-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; }
.npca-v2-project-status__referral-list--muted { opacity: 0.72; }
.npca-v2-project-status__referral-note { margin: 0.6rem 0 0; font-size: 0.8rem; }