/* ui/portfolio.css — owned by W7. EVERY selector prefixed .pf- (SHELL_CONTRACT §3.2).
   An unprefixed rule here silently restyles somebody else's surface at concat time. */

.pf-loading { padding: 40px; text-align: center; color: var(--faint); }

/* ---------- breadcrumb: group > entity > home ---------- */
.pf-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-crumb { background: none; border: 0; cursor: pointer; font: inherit; color: var(--faint);
  padding: 5px 9px; border-radius: var(--r-sm); display: inline-flex; align-items: baseline; gap: 6px; }
.pf-crumb:hover { background: var(--hover); color: var(--ink); }
.pf-crumb.on { color: var(--ink); font-weight: 600; }
.pf-crumb-n { font-size: 11px; color: var(--faint); font-weight: 400; }
.pf-crumb-sep { color: var(--line2); }

/* ---------- the LEVEL badge. Every number says which level it is on. ---------- */
.pf-lvl { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px; border-radius: var(--r-pill); margin-bottom: 8px; }
.pf-lvl-group  { background: var(--accent-wash); color: var(--info-ink); }
.pf-lvl-entity { background: var(--wash-magenta); color: var(--accent-deep); }
.pf-lvl-home   { background: var(--wash-mint); color: var(--pos-ink); }
i.pf-lvl { margin: 0 0 0 4px; font-style: normal; padding: 1px 5px; font-size: 9px; }

/* ---------- THE VERDICT, first. Not the chart. ---------- */
.pf-verdict { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--sh-1); margin-bottom: 12px; }
.pf-verdict h3 { margin: 0 0 6px; font-family: var(--font-head, inherit); font-size: 20px;
  line-height: 1.35; color: var(--ink); font-weight: 500; }
.pf-verdict h3 b { font-weight: 700; }
.pf-verdict p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pf-vchips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- chips: the verdict vocabulary ---------- */
.pf-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 500; border: 1px solid transparent;
  white-space: nowrap; }
button.pf-chip { cursor: pointer; font-family: inherit; }
button.pf-chip:hover { filter: brightness(.96); }
button.pf-chip.on { box-shadow: var(--focus); }
.pf-act     { background: var(--neg-wash);   color: var(--neg-ink); }
.pf-leave   { background: var(--surface-2);  color: var(--muted-ink); border-color: var(--line); }
.pf-ok      { background: var(--pos-wash);   color: var(--pos-ink); }
/* REFUSE is not a worse LEAVE. It reads as a stop, because it is one. */
.pf-refuse  { background: var(--accent-navy); color: #fff; }
.pf-unknown { background: var(--warn-wash);  color: var(--warn-ink); }
.pf-unseen  { background: var(--wash-lavender); color: var(--accent-deep); }
.pf-neutral { background: var(--surface-2); color: var(--faint); border-color: var(--line); }

/* ---------- coverage: never hidden, never collapsible ---------- */
.pf-cov { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
  border-radius: var(--r-md); margin-bottom: 12px; font-size: 13px; }
.pf-cov-ok  { background: var(--pos-wash); color: var(--pos-ink); }
.pf-cov-gap { background: var(--warn-wash); color: var(--warn-ink); }
.pf-cov-k { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.pf-cov-flag { background: var(--warn); color: #fff; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; }
.pf-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.pf-cov .pf-note { color: inherit; opacity: .92; }
.pf-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  text-decoration: underline; cursor: pointer; }

/* ---------- toolbar ---------- */
.pf-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.pf-search { flex: 1 1 260px; min-width: 220px; }
.pf-search input { width: 100%; padding: 9px 12px; border: 1px solid var(--line2);
  border-radius: var(--r-sm); font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.pf-search input:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.pf-f { display: flex; flex-direction: column; gap: 3px; }
.pf-f span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); }
.pf-f select { padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-sm);
  font: inherit; font-size: 12px; background: var(--surface); color: var(--ink); max-width: 200px; }
.pf-f select:focus { outline: none; box-shadow: var(--focus); }
.pf-clear { padding: 8px 12px; border: 1px solid var(--line2); background: var(--surface);
  border-radius: var(--r-sm); font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); }
.pf-clear:hover { background: var(--hover); }

/* ---------- the count line. Truncation that doesn't announce itself is the bug. ---------- */
.pf-count { font-size: 12px; color: var(--faint); margin: 0 0 8px; }
.pf-count b { color: var(--ink); }
.pf-count-filtered { color: var(--warn-ink); }

/* ---------- the table. No max-height that hides rows; long is honest. ---------- */
.pf-tablewrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto;
  background: var(--surface); box-shadow: var(--sh-1); }
.pf-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-tbl th { text-align: left; padding: 10px 12px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--faint);
  letter-spacing: .04em; text-transform: uppercase; position: sticky; top: 0; z-index: 1;
  white-space: nowrap; }
.pf-tbl th.num, .pf-tbl td.num { text-align: right; }
.pf-sortable { cursor: pointer; user-select: none; }
.pf-sortable:hover { color: var(--ink); background: var(--hover); }
.pf-sortable.on { color: var(--accent); }
.pf-arrow { font-size: 9px; }
.pf-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink2);
  vertical-align: middle; }
.pf-tbl tbody tr:last-child td { border-bottom: 0; }
.pf-row { cursor: pointer; }
.pf-row:hover td { background: var(--hover); }
.pf-row:focus { outline: none; }
.pf-row:focus td { background: var(--hover); box-shadow: inset 0 0 0 2px var(--accent); }
.pf-sub { display: block; font-size: 11px; color: var(--faint); }
.pf-ent { font-size: 11px; color: var(--muted); font-family: var(--font-mono, monospace); }
.pf-under { color: var(--neg-ink); font-weight: 600; }
.pf-basis { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint);
  border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 1px 5px; cursor: help; }
.pf-empty { text-align: center; padding: 30px; color: var(--faint); }

/* ---------- ABSENCE IS NOT ZERO. This is the most important rule in the file. ----------
   A no-data cell must be VISIBLY, STRUCTURALLY distinct from a real value. Not a 0, not a
   dash that reads like a minus, not an empty cell that reads like an oversight. */
.pf-nodata { color: var(--hairline); font-weight: 400; cursor: help; }
.pf-row-unseen { background: repeating-linear-gradient(135deg, transparent, transparent 6px,
  rgba(221,216,254,.28) 6px, rgba(221,216,254,.28) 12px); }
.pf-row-unseen:hover td { background: var(--wash-lavender); }
.pf-unseen-cell { font-size: 12px; color: var(--accent-deep); font-style: italic; }

/* ---------- the home drawer + the refusal ---------- */
.pf-drawer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sh-2); }
.pf-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.pf-dhead h4 { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: var(--ink);
  font-family: var(--font-head, inherit); }
.pf-dv { display: flex; align-items: center; gap: 10px; }
.pf-x { background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--faint);
  padding: 4px 8px; border-radius: var(--r-sm); }
.pf-x:hover { background: var(--hover); color: var(--ink); }
.pf-hstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
  margin-bottom: 14px; }
.pf-hstat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; }
.pf-hk { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.pf-hv { display: block; font-size: 20px; font-weight: 600; color: var(--ink); }

/* THE REFUSAL. It must not look like a warning about money. It is a stop. */
.pf-refuse.pf-refuse, div.pf-refuse { background: var(--accent-navy); color: #fff;
  border-radius: var(--r-md); padding: 18px 20px; }
div.pf-refuse h5 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: #fff;
  font-family: var(--font-head, inherit); }
div.pf-refuse p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.88); }
div.pf-refuse p:last-child { margin-bottom: 0; }
div.pf-refuse b { color: #fff; }
div.pf-refuse .pf-note { color: rgba(255,255,255,.66); font-size: 12px; }
div.pf-refuse .pf-nodata { color: rgba(255,255,255,.5); }

@media (max-width: 900px) { .pf-hide-sm { display: none; } }


/* ---------- v281: the states the corrected data made visible ---------- */

/* THE REFINEMENT LINE. A sub-count of "no action", never a rival headline. */
.pf-refine { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--warn-wash); color: var(--warn-ink); font-size: 12px; line-height: 1.5; }
.pf-refine b { font-weight: 700; }
.pf-refine .pf-link { color: var(--warn-ink); font-weight: 600; }

/* A home that needs no economic action but is still short of its own casemix target.
   It is counted as "no action" — but it must never LOOK like a home that is fine. */
.pf-ok-below { background: var(--warn-wash); color: var(--warn-ink); }
.pf-sub-warn { color: var(--warn-ink); font-size: 10px; }

/* STAFF IT. An instruction, not a verdict. It must not read as a softer "leave". */
.pf-staffit { display: inline-block; background: var(--lime); color: var(--accent-navy);
  font-weight: 800; font-size: 12px; letter-spacing: .04em; padding: 5px 11px;
  border-radius: var(--r-pill); margin-bottom: 12px; }

/* THE COST OF COMPLIANCE. (v10.01) Shown in full — it is the number they came for. Styled as an
   OBLIGATION, not an opportunity: warm/sober, never the green of a saving, because it must not
   read as one side of a trade. There is no payback rendered next to it, and there never will be. */
.pf-cost-comply { margin: 12px 0 6px; padding: 12px 14px; border-radius: 8px;
                  background: #FFF7ED; border-left: 3px solid #C2410C; }
.pf-cost-comply .pf-stat-v { color: #7C2D12; }

/* A TOTAL BLACKOUT is not a coverage note. Opal: 144 of 144 homes invisible in one quarter. */
.pf-cov-blackout { background: var(--accent-navy); color: #fff; align-items: flex-start; }
.pf-cov-blackout .pf-cov-k { color: rgba(255,255,255,.7); }
.pf-cov-blackout b { color: #fff; }
.pf-cov-blackout .pf-note { color: rgba(255,255,255,.85); }
.pf-cov-blackout .pf-cov-flag { background: var(--neg); }
.pf-cov-blackout .pf-link { color: var(--lime); }

.pf-blackouts { background: var(--neg-wash); color: var(--neg-ink); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 12px; font-size: 12px; line-height: 1.9; }
.pf-bo { display: inline-block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 10px; margin: 0 6px 0 0; color: var(--ink); }
.pf-bo i { font-style: normal; color: var(--neg-ink); font-weight: 700; }