/* ============================================================================
   pp-ui.css — Probate Pros design system (single source of truth)
   Replaces 33 hand-rolled inline <style> blocks. Grounded in a 4-stream research
   synthesis (Refactoring UI · Material 3 · Carbon · Stripe · Linear · Superhuman ·
   SLDS · the adopted product-and-ux-design / frontend-engineering / accessibility-
   engineering skills). See docs/PORTAL-FACELIFT.md.

   Architecture: primitive tokens -> semantic tokens -> components. Components ONLY
   read semantic tokens, so dark mode is a one-layer override ([data-theme=dark]).
   ============================================================================ */

/* ---- 1. PRIMITIVE TOKENS ------------------------------------------------- */
:root {
  /* Warm-tinted neutral ramp (harmonizes with gold; never pure black/white). */
  --gray-50:#FAFAF9; --gray-100:#F4F4F1; --gray-200:#E6E5E1; --gray-300:#D4D3CD;
  --gray-400:#A8A7A0; --gray-500:#78776F; --gray-600:#57564F; --gray-700:#3F3E38;
  --gray-800:#2A2A25; --gray-900:#1A1A16;
  /* Gold accent ramp. #c9a44c FAILS AA as text on white (~2:1) -> fills/display
     only; gold TEXT/links on light use gold-700 (#8A6D1F ~4.7:1). */
  --gold-50:#FBF7EC; --gold-100:#F5ECCF; --gold-200:#EBD9A0; --gold-300:#DEC272;
  --gold-400:#D2B25A; --gold-500:#C9A44C; --gold-600:#A9863A; --gold-700:#8A6D1F;
  --gold-800:#6B5318; --gold-900:#4A390F;
  /* Semantic status (the 600 step passes AA as text on white). */
  --green-500:#16A34A; --green-600:#15803D;
  --amber-500:#D97706; --amber-700:#B45309;
  --red-500:#DC2626;   --red-600:#B91C1C;
  --blue-500:#2563EB;  --blue-600:#1D4ED8;

  /* Type scale (1.25 modular, 16px base; 14px = workhorse). */
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:20px;
  --text-xl:24px; --text-2xl:30px; --text-3xl:36px;
  --lh-tight:1.2; --lh-snug:1.4; --lh-normal:1.5;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Spacing (4px base, non-linear). */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px;

  /* Radius (derived from one base). */
  --radius:8px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px;
  --radius-xl:12px; --radius-full:9999px;

  /* Elevation (light, two-shadow). */
  --elev-1:0 1px 2px rgba(26,26,22,.06),0 1px 3px rgba(26,26,22,.10);
  --elev-2:0 2px 4px rgba(26,26,22,.06),0 4px 8px rgba(26,26,22,.08);
  --elev-3:0 4px 8px rgba(26,26,22,.08),0 8px 16px rgba(26,26,22,.10);
  --elev-4:0 8px 16px rgba(26,26,22,.10),0 16px 32px rgba(26,26,22,.12);

  /* Density (compact flips this via [data-density=compact]). */
  --row-h:40px; --control-h:44px; /* >=44px tap target */

  /* ---- 2. SEMANTIC TOKENS (light) — components read ONLY these ---------- */
  --bg-page:var(--gray-50);
  --bg-surface:#FFFFFF;
  --bg-subtle:var(--gray-100);
  --bg-inset:var(--gray-100);
  --text-primary:var(--gray-900);
  --text-secondary:var(--gray-600);
  --text-muted:var(--gray-500);
  --text-on-accent:var(--gray-900);
  --border-subtle:var(--gray-200);
  --border-strong:var(--gray-300);
  --accent:var(--gold-500);
  --accent-strong:var(--gold-600);
  --accent-text:var(--gold-700);
  --focus-ring:var(--gold-600);
  --success:var(--green-600); --success-bg:#EAF7EE;
  --warning:var(--amber-700); --warning-bg:#FCF1E2;
  --danger:var(--red-600);    --danger-bg:#FDECEC;
  --info:var(--blue-600);     --info-bg:#EAF0FE;
  --elev-card:var(--elev-1);
}

/* ---- 2b. DARK THEME (the focus cockpit) — same semantic tokens, overridden */
[data-theme="dark"] {
  --bg-page:#0A0D10;
  --bg-surface:#11161B;
  --bg-subtle:#171C22;
  --bg-inset:#0D1014;
  --text-primary:#F1F4F7;
  --text-secondary:#AEB6BF;
  --text-muted:#8A94A0;
  --text-on-accent:#1A1A16;
  --border-subtle:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.13);
  --accent:var(--gold-500);
  --accent-strong:var(--gold-400);
  --accent-text:var(--gold-300);   /* gold passes on dark */
  --focus-ring:var(--gold-400);
  --success:#34D27B; --success-bg:rgba(52,210,123,.12);
  --warning:#E5A94C; --warning-bg:rgba(229,169,76,.12);
  --danger:#F2685C;  --danger-bg:rgba(242,104,92,.12);
  --info:#5B9BF2;    --info-bg:rgba(91,155,242,.12);
  --elev-card:none;  /* dark leans on surface tint + borders, not shadow */
}

[data-density="compact"] { --row-h:32px; --control-h:38px; }

/* ---- 3. BASE / RESET ----------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg-page); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4 { margin:0 0 var(--space-2); line-height:var(--lh-tight); font-weight:var(--fw-bold); color:var(--text-primary); }
h1 { font-size:var(--text-2xl); } h2 { font-size:var(--text-xl); } h3 { font-size:var(--text-lg); font-weight:var(--fw-semibold); }
p { margin:0 0 var(--space-3); }
a { color:var(--accent-text); text-decoration:none; }
a:hover { text-decoration:underline; }
.num,.pp-stat-value,.pp-table td.num,.pp-table th.num { font-variant-numeric:tabular-nums; }

/* Visible focus on EVERY interactive element (a11y 2.4.7; >=3:1). */
:where(a,button,input,select,textarea,[tabindex],[role=button]):focus-visible {
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-sm);
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important;} }

/* Tiny uppercase eyebrow label (the cheap premium tell). */
.pp-eyebrow { font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.pp-muted { color:var(--text-muted); }
.pp-secondary { color:var(--text-secondary); }

/* ---- 4. COMPONENTS ------------------------------------------------------- */

/* Card */
.pp-card {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--elev-card); padding:var(--space-4);
}
.pp-card + .pp-card { margin-top:var(--space-4); }

/* Buttons — ONE primary per screen; >=44px tall */
.pp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--control-h); padding:0 var(--space-4); border-radius:var(--radius-md);
  font:var(--fw-semibold) var(--text-sm)/1 var(--font-sans); cursor:pointer;
  border:1px solid transparent; text-decoration:none; white-space:nowrap;
  transition:filter .12s ease, background .12s ease;
}
.pp-btn:hover { text-decoration:none; }
.pp-btn-primary { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent-strong); }
.pp-btn-primary:hover { filter:brightness(.96); }
.pp-btn-ghost { background:transparent; color:var(--text-primary); border-color:var(--border-strong); }
.pp-btn-ghost:hover { background:var(--bg-subtle); }
.pp-btn-danger { background:transparent; color:var(--danger); border-color:var(--danger); }
.pp-btn-danger:hover { background:var(--danger-bg); }
.pp-btn-block { display:flex; width:100%; }
.pp-btn-lg { min-height:60px; font-size:var(--text-base); border-radius:var(--radius-lg); }

/* Badge / status pill — color + TEXT, never color alone */
.pp-badge {
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:var(--fw-semibold); line-height:1.4;
  background:var(--bg-subtle); color:var(--text-secondary); border:1px solid var(--border-subtle);
}
.pp-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pp-badge-success { background:var(--success-bg); color:var(--success); border-color:transparent; }
.pp-badge-warning { background:var(--warning-bg); color:var(--warning); border-color:transparent; }
.pp-badge-danger  { background:var(--danger-bg);  color:var(--danger);  border-color:transparent; }
.pp-badge-info    { background:var(--info-bg);    color:var(--info);    border-color:transparent; }
.pp-badge-accent  { background:var(--gold-100);   color:var(--accent-text); border-color:transparent; }
.pp-badge.no-dot::before { display:none; }

/* Tier chip (S/A/B/C/D) — the pre-attentive rank token */
.pp-tier { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:var(--radius-md); font-weight:var(--fw-bold); font-size:var(--text-sm); flex:none; }
.pp-tier-S,.pp-tier-A { background:var(--success-bg); color:var(--success); }
.pp-tier-B { background:var(--info-bg); color:var(--info); }
.pp-tier-C { background:var(--warning-bg); color:var(--warning); }
.pp-tier-D { background:var(--bg-subtle); color:var(--text-muted); }

/* KPI "calm card": label · big number · delta */
.pp-stat { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-4); box-shadow:var(--elev-card); min-width:120px; }
.pp-stat-value { font-size:var(--text-2xl); font-weight:var(--fw-bold); line-height:1.1; color:var(--text-primary); }
.pp-stat-label { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-top:2px; }
.pp-stat-delta { font-size:var(--text-sm); margin-top:4px; }
.pp-stat-delta.up { color:var(--success); } .pp-stat-delta.down { color:var(--danger); }
.pp-stat-row { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.pp-stat-row > .pp-stat { flex:1; }

/* Data table — left-align text, right-align numbers, hairline rows, tabular nums */
.pp-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.pp-table th { text-align:left; font-weight:var(--fw-semibold); color:var(--text-muted);
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; padding:0 var(--space-2) var(--space-2); }
.pp-table td { padding:0 var(--space-2); height:var(--row-h); border-top:1px solid var(--border-subtle);
  vertical-align:middle; color:var(--text-primary); }
.pp-table td.num,.pp-table th.num { text-align:right; }
.pp-table tbody tr:hover { background:var(--bg-subtle); }

/* Form field */
.pp-field { display:block; margin-bottom:var(--space-3); }
.pp-field label { display:block; font-size:var(--text-sm); font-weight:var(--fw-medium); margin-bottom:6px; color:var(--text-secondary); }
.pp-input,.pp-select,.pp-textarea {
  width:100%; min-height:var(--control-h); padding:0 var(--space-3); font-size:16px; /* 16px = no iOS zoom */
  background:var(--bg-surface); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); font-family:inherit;
}
.pp-textarea { padding:var(--space-3); min-height:90px; line-height:var(--lh-normal); }

/* Disposition chips — radio chips, NOT a dropdown (faster one-tap logging) */
.pp-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pp-chip { display:inline-flex; align-items:center; min-height:var(--control-h); padding:0 var(--space-3);
  border:1px solid var(--border-strong); border-radius:var(--radius-full); background:var(--bg-surface);
  color:var(--text-primary); font-size:var(--text-sm); font-weight:var(--fw-medium); cursor:pointer; }
.pp-chip:hover { background:var(--bg-subtle); }
.pp-chip.is-on { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent-strong); }
.pp-chip-danger.is-on { background:var(--danger); color:#fff; border-color:var(--danger); }

/* Empty / loading state — first-class, teaches + invites */
.pp-empty { text-align:center; padding:var(--space-8) var(--space-4); color:var(--text-muted); }
.pp-empty-icon { font-size:34px; margin-bottom:var(--space-2); }
.pp-empty h3 { color:var(--text-secondary); margin-bottom:var(--space-1); }
.pp-skel { background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--bg-inset) 37%,var(--bg-subtle) 63%);
  background-size:400% 100%; animation:pp-shimmer 1.4s ease infinite; border-radius:var(--radius-sm); height:14px; }
@keyframes pp-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* App shell: sidebar (desktop) + bottom-nav (mobile) */
.pp-shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.pp-sidebar { background:var(--bg-surface); border-right:1px solid var(--border-subtle); padding:var(--space-4); }
.pp-main { padding:var(--space-5); padding-bottom:calc(var(--space-9) + env(safe-area-inset-bottom,0px)); max-width:1200px; }
.pp-topbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-subtle); background:var(--bg-surface); }
.pp-bottomnav { position:fixed; left:0; right:0; bottom:0; display:none; background:var(--bg-surface);
  border-top:1px solid var(--border-subtle); z-index:40; padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:var(--elev-2); }
.pp-bottomnav a { flex:1; text-align:center; padding:8px 1px 10px; color:var(--text-muted);
  font-size:11px; font-weight:var(--fw-semibold); text-decoration:none; }
.pp-bottomnav a.is-active { color:var(--accent-text); }
.pp-bottomnav a .ic { display:block; font-size:20px; line-height:1.15; }

@media (max-width:768px) {
  .pp-shell { grid-template-columns:1fr; }
  .pp-sidebar { display:none; }
  .pp-bottomnav { display:flex; }
  .pp-main { padding:var(--space-4); padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
}

/* Utilities (small, intentional) */
.pp-row { display:flex; align-items:center; gap:var(--space-3); }
.pp-between { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.pp-stack > * + * { margin-top:var(--space-3); }
.pp-wrap { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.pp-mt-2{margin-top:var(--space-2)} .pp-mt-4{margin-top:var(--space-4)} .pp-mb-4{margin-bottom:var(--space-4)}
.pp-grow{flex:1} .pp-right{text-align:right} .pp-center{text-align:center}