/* Resident Property Portal — DESIGN.md civic-adapted system.
   Source tokens: /DESIGN.md (cream canvas, IBM Plex Sans, flat hairline cards,
   6px radius, single-accent CTA discipline). Divergences: no mascots; body ink
   #23251d for WCAG AA; primary accent is dark navy blue (2026-07-23, per
   request) rather than DESIGN.md's own gold-orange — using the SAME navy scale
   already canonical across the platform (piaindustries.com/public_html/css/
   civic-ledger.css, frontend/mainstay/src/platform/tokens.css: #0d1f33/#1e4470)
   so this portal reads as one brand with the rest of PIAI, not a bespoke hue. */
:root{
  --pp-canvas:#eeefe9; --pp-card:#ffffff; --pp-card-doc:#fcfcfa;
  --pp-hairline:#bfc1b7; --pp-hairline-soft:#dcdfd2;
  --pp-ink:#23251d; --pp-body:#23251d; --pp-mute:#4d4f46; --pp-faint:#63655a;

  /* Navy scale (civic-ledger canonical values) — the platform primary. */
  --pp-navy:#0d1f33; --pp-navy-2:#142840; --pp-navy-3:#16324f; --pp-navy-4:#1e4470; --pp-navy-ink:#0a1826;
  --pp-navy-soft:#e4e9f0; --pp-navy-muted:#c3ccd9;

  /* Primary/CTA now navy; text on it is white (navy is dark, unlike the old
     gold which needed dark ink). Hover/active step to the lighter --pp-navy-4,
     mirroring the .cl-btn convention used elsewhere on the platform. */
  --pp-cta:var(--pp-navy); --pp-cta-hover:var(--pp-navy-4); --pp-cta-pressed:var(--pp-navy-ink); --pp-cta-ink:#ffffff;
  --pp-link:var(--pp-navy-4);
  --pp-focus:var(--pp-navy-4); --pp-focus-ring:rgba(30,68,112,.22);

  /* Badge/status text darkened 2026-07-23 — an accessibility audit found the
     original values failed 4.5:1 against their own -soft backgrounds (e.g.
     --pp-warn 3.5:1, --pp-info 3.13:1). New values reuse the platform's own
     canonical ink pairings (civic-ledger --ms-good-ink/--ms-crit, DESIGN.md
     link-blue) rather than inventing new hues. -soft backgrounds unchanged. */
  --pp-ok:#1f6b4c; --pp-ok-soft:#d9eddf; --pp-warn:#a3241d; --pp-warn-soft:#f7d6d3;
  --pp-info:#1d4ed8; --pp-info-soft:#dceaf6; --pp-note:#7c44a6; --pp-note-soft:#e7d8ee;
  --pp-r:6px; --pp-sp:16px;
}
*{box-sizing:border-box}
body.pp{margin:0;background:var(--pp-canvas);color:var(--pp-body);
  font-family:"IBM Plex Sans Variable","IBM Plex Sans",-apple-system,system-ui,sans-serif;
  font-size:16px;line-height:1.5}
.pp-shell{max-width:1160px;margin:0 auto;padding:24px}
.pp-card{background:var(--pp-card);border:1px solid var(--pp-hairline);border-radius:var(--pp-r);
  padding:24px;margin:0 0 16px}
.pp-card-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pp-silo-icon{width:22px;height:22px;flex:0 0 auto;color:var(--pp-mute)}
.pp-card-head h2{font-size:20px;font-weight:700;line-height:1.4;margin:0;color:var(--pp-ink)}
.pp-figure{font-weight:700;color:var(--pp-ink)}
.pp-cta{display:inline-block;background:var(--pp-cta);color:var(--pp-cta-ink);
  font-weight:700;font-size:14px;line-height:1.5;padding:8px 16px;height:40px;
  border:0;border-radius:var(--pp-r);text-decoration:none;cursor:pointer;
  transition:background .15s}
.pp-cta:hover{background:var(--pp-cta-hover);color:var(--pp-cta-ink)}
.pp-cta:active{background:var(--pp-cta-pressed)}
.pp-badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:9999px}
.pp-badge-ok{background:var(--pp-ok-soft);color:var(--pp-ok)}
.pp-badge-info{background:var(--pp-info-soft);color:var(--pp-info)}
.pp-callout{padding:16px 20px;border-radius:var(--pp-r);margin:12px 0}
.pp-callout-blue{background:var(--pp-info-soft)} .pp-callout-green{background:var(--pp-ok-soft)}
.pp-callout-red{background:var(--pp-warn-soft)} .pp-callout-purple{background:var(--pp-note-soft)}
a{color:var(--pp-link)} :focus-visible{outline:2px solid var(--pp-focus);outline-offset:2px}
@media (max-width:600px){.pp-shell{padding:16px}}