/* The member app — profile, directory, admin.
 *
 * TOKENS AND SHAPES ARE THE PLATFORM SIMULATION'S, NOT THE LANDING PAGE'S.
 * `design/app-sim/moc-app.html` is the reviewed design for this product: warm paper, white
 * cards, soft shadow, 10px corners, a 236px sidebar. The first version of this file borrowed
 * the landing page's dark palette and a top nav instead, which made the product look like a
 * different application wearing the same logo.
 *
 * Light is the default here, unlike everywhere else in this brand — and that is the
 * simulation's decision, not a slip. The marketing site is dark because it is a poster; this
 * is a tool somebody reads tables in for twenty minutes. Dark is kept as an explicit opt-in
 * and as the system preference, using the simulation's own dark ramp.
 *
 * Class names are `p-*` and unchanged, so every page written against the previous stylesheet
 * keeps working. What changed is what they look like.
 */

/* DARK IS THE DEFAULT, and that is a correction rather than a preference.
 *
 * The first version of this file took the platform simulation's light palette, because the
 * simulation is the reviewed design. That was half the evidence. The surfaces a member
 * ACTUALLY walks through are dark — the landing page (`launch.css`: "Dark by default") and
 * the RSVP form (`rsvp.css`: "Dark is the default here, not a preference-driven variant",
 * describing it as *the portal's dark palette*). Shipping a light app made the journey
 * dark -> dark -> light, and the seam was visible at exactly the moment a member arrives
 * somewhere new and is deciding whether it is the same organisation.
 *
 * These are the simulation's own dark steps, not an inversion of its light ones — which is
 * the distinction the visualisation guidance insists on: a dark mode is SELECTED from the
 * same ramps and validated against the dark surface, never flipped. `--green` and `--red`
 * step one stop UP their ramp because #004B1D reads as a hole on #15130F, while the text
 * tokens step the other way.
 *
 * Measured against #15130F, not eyeballed:
 *   --ink 15.8:1   --soft 6.9:1   --green-text 5.4:1   --red-text 5.0:1   --amber 8.8:1
 * All AA for body text. --faint is 3.7:1 and is therefore used ONLY for labels, meta and
 * rules — never for anything a member has to read.
 */
:root{
  --green:#0E7A38;      --red:#C8161D;
  --green-text:#3E9C63; --green-soft:#153521;
  --red-text:#E0555B;   --red-soft:#3A1A1B;
  --amber:#E3A83D;      --amber-soft:#3A2E13;
  --bg:#15130F; --card:#1E1A14; --ink:#F1ECE2;
  --soft:#A79C89; --faint:#786E5B; --line:#332C21; --line-strong:#463C2C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.7);
  --r:10px;
  /* A single warm accent for the one thing on each screen that leads. Karak — milk tea —
     is the simulation's illustration-only token; used here for a hairline and a glow, never
     for type, buttons or rules, and never mistakable for the retired gold badge. */
  --karak:#D19A5B;
}

/* Light survives as an explicit opt-in only. Nothing switches it automatically — a member
   whose phone is in light mode should still see the product the brand actually is. */
:root[data-theme="light"]{
  --green:#004B1D; --green-text:#004B1D; --green-soft:#E6F2EB;
  --red:#AE090F;   --red-text:#AE090F;   --red-soft:#F8E5E6;
  --amber:#A66A12; --amber-soft:#F3E6CF;
  --bg:#FAF8F4; --card:#FFFFFF; --ink:#201D18;
  --soft:#6B6355; --faint:#948C7C; --line:#E7E1D5; --line-strong:#D6CDB9;
  --shadow:0 1px 2px rgba(30,25,15,.06), 0 12px 28px -16px rgba(30,25,15,.25);
  --karak:#C08344;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink); color-scheme:dark;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:var(--green-text); }
h1,h2,h3{ font-family:'Poppins','Inter',system-ui,sans-serif; font-weight:600;
          line-height:1.22; text-wrap:balance; margin:0; }
h1{ font-size:25px; }
h2{ font-size:18px; margin:30px 0 13px; }
h3{ font-size:14px; margin:20px 0 7px; color:var(--soft);
    letter-spacing:.02em; text-transform:none; }
code{ font-family:ui-monospace,'Cascadia Code',Consolas,monospace; font-size:.88em; color:var(--soft); }

/* ------------------------------------------------------------------- the shell */

.p-app{ max-width:1280px; margin:0 auto; display:grid;
        grid-template-columns:236px minmax(0,1fr); align-items:start; }
.p-side{ position:sticky; top:0; padding:22px 16px 22px; border-right:1px solid var(--line);
         min-height:100vh; display:flex; flex-direction:column; }
.p-main{ padding:26px 26px 60px; min-width:0; }

/* The wordmark never gets recoloured or inverted (CLAUDE.md #8) — on a dark ground the
   ground gets a white plaque instead. */
.p-brand{ display:block; line-height:0; margin-bottom:4px; }
.p-plaque{ display:inline-block; background:#fff; border-radius:6px; padding:7px 10px; }
.p-plaque img{ display:block; width:150px; height:auto; }

.p-whoami{ margin:14px 0 18px; padding:11px 12px; border:1px solid var(--line);
           border-radius:var(--r); background:var(--card); display:flex; gap:9px; align-items:center; }
.p-whoami-t{ min-width:0; }
.p-whoami .n{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-whoami .m{ font-size:11.5px; color:var(--soft); margin-top:1px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:flex;
  align-items:center; justify-content:center; font-size:12.5px; font-weight:700;
  background:var(--green-soft); color:var(--green-text);
}
.p-avatar.is-admin{ background:var(--red-soft); color:var(--red-text); }

.p-nav{ display:flex; flex-direction:column; gap:2px; }
.p-nav a{
  display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:8px;
  text-decoration:none; color:var(--soft); font-size:14px; font-weight:500;
}
.p-nav a:hover{ background:var(--green-soft); color:var(--green-text); }
.p-nav a[aria-current="page"]{ background:var(--green); color:#fff; font-weight:600; }
.p-nav a .ic{ width:15px; text-align:center; flex:none; font-size:13px; opacity:.9; }

.p-side-foot{ margin-top:auto; padding-top:18px; }
.p-signout{
  background:none; border:1px solid var(--line-strong); color:var(--soft);
  font:inherit; font-size:12.5px; padding:6px 12px; border-radius:8px; cursor:pointer; width:100%;
}
.p-signout:hover{ color:var(--ink); border-color:var(--soft); }
.p-legal{ font-size:11px; color:var(--faint); margin:12px 0 0; }

/* Signed out — no shell, nothing to navigate. */
.p-solo{ max-width:440px; margin:0 auto; padding:56px 20px 40px; }

.p-foot{ max-width:1280px; margin:0 auto; padding:18px 26px 44px;
         color:var(--faint); font-size:12.5px; }

@media (max-width:820px){
  .p-app{ grid-template-columns:1fr; }
  .p-side{ position:static; min-height:0; border-right:0; border-bottom:1px solid var(--line);
           padding-bottom:14px; }
  .p-nav{ flex-direction:row; flex-wrap:wrap; }
  .p-side-foot{ margin-top:14px; }
  .p-signout{ width:auto; }
  .p-main{ padding:20px 18px 50px; }
}

/* ------------------------------------------------------------------- blocks */

.p-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
         padding:17px 18px; box-shadow:var(--shadow); }
.p-narrow{ max-width:440px; margin-left:auto; margin-right:auto; }
.p-lede{ color:var(--soft); margin:10px 0 18px; }
.p-fine{ color:var(--faint); font-size:12.5px; margin-top:18px; }
.p-sub{ color:var(--faint); font-size:12px; }
.p-empty{ color:var(--faint); font-size:14px; padding:18px 0; }

.p-note{ margin:0 0 16px; padding:11px 14px; border-radius:var(--r); font-size:14px;
         border:1px solid var(--line-strong); background:var(--card); color:var(--soft); }
.p-ok  { border-color:var(--green); background:var(--green-soft); color:var(--green-text); }
.p-warn{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber); }
.p-bad { border-color:var(--red);   background:var(--red-soft);   color:var(--red-text); }

.p-back{ display:inline-block; font-size:13px; color:var(--soft); text-decoration:none; margin-bottom:12px; }
.p-back:hover{ color:var(--ink); }

/* ------------------------------------------------------------------- forms */

.p-form{ margin:0; }
.p-form label{ display:block; font-size:13px; font-weight:600; color:var(--ink);
               margin:16px 0 6px; }
.p-form input[type=text], .p-form input[type=email], .p-form input[type=tel],
.p-form input[type=date], .p-form input[type=search], .p-form input[type=password],
.p-form select, .p-form textarea{
  width:100%; background:var(--card); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:9px;
  padding:10px 12px; font:inherit; font-size:15px;
}
.p-form textarea{ min-height:86px; resize:vertical; line-height:1.55; }
.p-form input:focus, .p-form select:focus, .p-form textarea:focus{
  outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);
}
.p-hint{ font-size:12px; color:var(--faint); margin:5px 0 0; font-weight:400; }
.p-err { font-size:12px; color:var(--red-text); margin:5px 0 0; }
.p-field + .p-field{ margin-top:2px; }

.p-code{ font-size:25px !important; letter-spacing:.34em; text-align:center;
         font-variant-numeric:tabular-nums; }

.p-go{
  margin-top:22px; width:100%; background:var(--green); color:#fff; border:0;
  border-radius:9px; padding:11px 18px; font:inherit; font-weight:700; font-size:14px;
  cursor:pointer; transition:background .15s ease;
}
.p-go:hover{ background:#166B42; }
.p-go.p-slim{ width:auto; margin-top:0; padding:9px 16px; }
.p-link{ background:none; border:0; color:var(--green-text); font:inherit; font-size:13.5px;
         padding:0; cursor:pointer; text-decoration:underline; }
.p-again{ margin-top:14px; text-align:center; }

.p-as{ border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; margin:18px 0 0;
       background:var(--bg); }
.p-as legend{ font-size:11px; letter-spacing:.06em; text-transform:uppercase;
              color:var(--faint); padding:0 5px; }
.p-as label{ display:flex; align-items:center; gap:9px; margin:6px 0; font-weight:400;
             font-size:14px; color:var(--ink); }

/* Chips — the RSVP form's selector shape, since that is where members already meet it. */
.p-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:8px 0 0; }
.p-chips label{
  display:inline-flex; align-items:center; margin:0; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:100px; padding:6px 13px;
  font-size:13.5px; font-weight:500; color:var(--soft); background:var(--card);
}
.p-chips input{ position:absolute; opacity:0; width:0; height:0; }
.p-chips label:hover{ border-color:var(--soft); color:var(--ink); }
.p-chips label:has(input:checked){
  border-color:var(--green); background:var(--green-soft); color:var(--green-text); font-weight:600;
}
.p-chips input:focus-visible + span{ outline:2px solid var(--green); outline-offset:3px; }

.p-check{ display:flex; align-items:flex-start; gap:9px; margin:16px 0 0;
          font-weight:400; font-size:14px; color:var(--ink); }
.p-check input{ margin-top:3px; }

/* ------------------------------------------------------------------- data */

.p-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; }

.p-kv{ margin:0; }
.p-kv div{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.p-kv div:last-child{ border-bottom:0; }
.p-kv dt{ flex:0 0 42%; color:var(--faint); font-size:13px; }
.p-kv dd{ margin:0; flex:1; font-size:14px; word-break:break-word; }

.p-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.p-tag{ display:inline-block; font-size:12px; padding:3px 10px; border-radius:100px;
        border:1px solid var(--line-strong); color:var(--soft); background:var(--bg); }

.p-pill{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 8px; border-radius:100px;
  background:var(--bg); border:1px solid var(--line-strong); color:var(--faint);
}
.p-pill.is-complete,.p-pill.is-confirmed,.p-pill.is-attended{
  background:var(--green-soft); border-color:var(--green); color:var(--green-text); }
.p-pill.is-contactable{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber); }
.p-pill.is-declined{ background:var(--red-soft); border-color:var(--red); color:var(--red-text); }

.p-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
           border:1px solid var(--line); border-radius:var(--r); background:var(--card);
           box-shadow:var(--shadow); }
.p-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.p-table th,.p-table td{ text-align:left; padding:10px 13px; border-bottom:1px solid var(--line);
                         vertical-align:top; }
.p-table tbody tr:last-child td{ border-bottom:0; }
.p-table th{ color:var(--faint); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
             font-weight:700; white-space:nowrap; background:var(--bg); }
.p-table tbody tr:hover{ background:var(--green-soft); }
.p-table a{ text-decoration:none; font-weight:600; }
.p-table a:hover{ text-decoration:underline; }
.p-table tr.p-group td{ border-top:2px solid var(--line-strong); }
.p-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

.p-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:18px 0 0; }
.p-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
         padding:14px 16px; box-shadow:var(--shadow); }
.p-stat b{ display:block; font-size:26px; font-weight:600; font-variant-numeric:tabular-nums;
           line-height:1.15; font-family:'Poppins','Inter',sans-serif; color:var(--green-text); }
.p-stat span{ display:block; font-size:12px; color:var(--faint); margin-top:2px; }

.p-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:0 0 18px; }
.p-bar label{ margin:0 0 5px; }

.p-dates{ list-style:none; margin:8px 0 0; padding:0; }
.p-dates li{ padding:7px 0; border-bottom:1px solid var(--line); font-size:14px;
             font-variant-numeric:tabular-nums; }
.p-dates li:last-child{ border-bottom:0; }

.p-danger{ border-color:var(--red); }
.p-danger h2{ color:var(--red-text); margin-top:0; }

/* ------------------------------------------------------------------- directory + matching */

.p-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.p-mini{ padding:16px 17px; }
.p-mini-name{ font-size:15.5px; color:var(--ink); margin:0; display:flex; gap:8px;
              align-items:center; flex-wrap:wrap; text-transform:none; }
.p-mini-role{ margin:2px 0 0; font-size:13.5px; color:var(--soft); }
.p-mini-meta{ margin:8px 0 0; font-size:12px; color:var(--faint); }
.p-mini-give{ margin:11px 0 0; font-size:13.5px; color:var(--soft); }
.p-mini-want{ margin:11px 0 0; font-size:13px; color:var(--soft);
              border-left:2px solid var(--green); padding-left:10px; }
.p-mini-want span{ display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
                   color:var(--faint); margin-bottom:2px; }
.p-mini .p-tags{ margin-top:11px; }
.p-mini-admin{ margin:12px 0 0; font-size:12.5px; }

.p-mutual{ border-color:var(--green); }
.p-why{ list-style:none; margin:11px 0 0; padding:0; }
.p-why li{ font-size:12.5px; color:var(--soft); padding:5px 0 5px 12px; position:relative;
           border-top:1px solid var(--line); }
.p-why li:first-child{ border-top:0; }
.p-why li::before{ content:"·"; position:absolute; left:2px; color:var(--faint); }

/* ------------------------------------------------------------------- chat */

.p-chat{ display:flex; flex-direction:column; gap:9px; margin:0 0 18px; }
.p-msg{ max-width:min(70ch,86%); padding:11px 14px; border-radius:var(--r); font-size:14.5px;
        line-height:1.55; white-space:pre-wrap; }
.p-msg.is-them{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
                align-self:flex-start; border-bottom-left-radius:3px; }
.p-msg.is-me{ background:var(--green); color:#fff; align-self:flex-end;
              border-bottom-right-radius:3px; }

/* The proposal. Bordered in green because it is the moment something is about to be written,
   and the member should see that this step is different from the conversation above it. */
.p-proposal{ border-color:var(--green); margin:0 0 18px; }
.p-changes{ list-style:none; margin:12px 0 0; padding:0; }
.p-changes li{ padding:2px 0; }
.p-changes .p-check{ margin:6px 0 0; }

.p-say textarea{ font-size:15.5px; }
.p-say .p-go{ margin-top:12px; }
.p-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
       white-space:nowrap; }
.p-chatcta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 20px;
            padding:13px 15px; border:1px solid var(--green); border-radius:var(--r);
            background:var(--green-soft); }
.p-chatcta span{ font-size:13px; color:var(--green-text); }

/* ------------------------------------------------------------------- the wizard */

/* Every step is visible until app.js says otherwise — that is the no-JavaScript state and
   it is a working form, not a broken one. */
.p-step{ border:0; padding:0; margin:0 0 6px; }
.p-step-h{ padding:0; font-family:'Poppins','Inter',sans-serif; font-size:17px; font-weight:600;
           color:var(--ink); display:block; margin:18px 0 2px; }
.p-step-n{ display:block; font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
           letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
.p-step-hint{ margin:0 0 4px; font-size:13.5px; color:var(--soft); }

/* Once stepping is live the spacing tightens — one screen should feel like one question,
   not like a slice of something longer. */
.is-wizard .p-step{ min-height:230px; }
.is-wizard .p-step-h{ margin-top:0; }

.p-wiz{ display:flex; align-items:center; gap:14px; margin:22px 0 0;
        padding-top:16px; border-top:1px solid var(--line); }
.p-wiz-b{
  background:var(--card); border:1px solid var(--line-strong); color:var(--ink);
  font:inherit; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:9px;
  cursor:pointer;
}
.p-wiz-b:hover:not(:disabled){ border-color:var(--green); color:var(--green-text); }
.p-wiz-b:disabled{ opacity:.4; cursor:default; }
.p-wiz-next{ margin-left:auto; background:var(--green); border-color:var(--green); color:#fff; }
.p-wiz-next:hover{ background:#166B42; border-color:#166B42; color:#fff; }

.p-wiz-dots{ display:flex; gap:6px; }
.p-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); cursor:pointer; }
.p-dot.is-done{ background:var(--green-soft); }
.p-dot.is-on{ background:var(--green); transform:scale(1.35); }

/* Save sits under the step nav so "Next" is the obvious action mid-form and Save is the
   deliberate one. On the last step Next disappears and Save is all that is left. */
.is-wizard .p-go{ margin-top:14px; }

:root[data-theme="light"] body{ color-scheme:light; }

/* ------------------------------------------------------------------- home */

/* The hero. A date is the one number this screen leads with, so it gets hero treatment —
   large, sans, and the only thing at that weight on the page. The karak hairline is the
   single warm accent in the product: illustration only, never type or buttons. */
.p-hero{
  position:relative; padding:26px 26px 24px; border-radius:var(--r);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--green) 26%, transparent) 0%, transparent 58%),
    var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden;
}
.p-hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--karak), transparent); opacity:.5;
}
.p-hero-k{ margin:0; font-size:11px; font-weight:700; letter-spacing:.1em;
           text-transform:uppercase; color:var(--faint); }
.p-hero-n{ margin:6px 0 0; font-size:clamp(28px,5vw,44px); line-height:1.05; letter-spacing:-.01em; }
.p-hero-t{ margin:8px 0 0; font-size:19px; font-weight:600; color:var(--ink);
           font-variant-numeric:tabular-nums; }
.p-hero-t span{ font-size:13px; font-weight:400; color:var(--faint); margin-left:8px;
                letter-spacing:0; }
.p-hero-s{ margin:16px 0 0; font-size:14.5px; color:var(--soft); }
.p-hero-s.is-in{ color:var(--green-text); font-weight:600; }
.p-hero-b{ margin-top:12px; display:inline-block; text-decoration:none; }

/* The meter — one hue, same-ramp track. Not a pie of two slices, not a one-bar chart. */
.p-meter-top{ display:flex; align-items:baseline; gap:10px; margin:2px 0 8px; }
.p-meter-n{ font-family:'Poppins','Inter',sans-serif; font-size:34px; font-weight:600;
            line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.p-meter-n small{ font-size:17px; color:var(--faint); margin-left:1px; }
/* The word carries the status, so the colour never has to on its own. */
.p-meter-w{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
            padding:3px 9px; border-radius:100px; border:1px solid; }
.p-meter-w.is-good{ color:var(--green-text); border-color:var(--green); background:var(--green-soft); }
.p-meter-w.is-ok  { color:var(--green-text); border-color:var(--line-strong); background:transparent; }
.p-meter-w.is-warn{ color:var(--amber);      border-color:var(--amber); background:var(--amber-soft); }
.p-meter-w.is-low { color:var(--soft);       border-color:var(--line-strong); background:transparent; }

.p-meter{ height:8px; border-radius:100px; background:var(--green-soft);
          border:1px solid var(--line); overflow:hidden; }
.p-meter span{ display:block; height:100%; border-radius:100px; background:var(--green);
               transition:width .5s cubic-bezier(.22,1,.36,1); }
.p-meter-c{ margin:10px 0 0; font-size:13px; color:var(--soft); }

/* One action, never a list of gaps. */
.p-next{ margin:16px 0 0; padding:14px 15px; border-radius:var(--r);
         border:1px solid var(--line-strong); background:var(--bg); }
.p-next-k{ margin:0; font-size:10.5px; font-weight:700; letter-spacing:.08em;
           text-transform:uppercase; color:var(--faint); }
.p-next-t{ margin:4px 0 0; font-size:16px; font-weight:600; color:var(--ink); }
.p-next-w{ margin:5px 0 0; font-size:13px; color:var(--soft); }
.p-next-done{ margin:16px 0 0; font-size:14px; color:var(--green-text); font-weight:600; }
.p-quiet{ font-size:13px; color:var(--faint); margin-left:12px; }

.p-kpi{ display:flex; gap:26px; margin:2px 0 4px; }
.p-kpi b{ display:block; font-family:'Poppins','Inter',sans-serif; font-size:30px;
          font-weight:600; line-height:1.1; color:var(--green-text);
          font-variant-numeric:tabular-nums; }
.p-kpi span{ display:block; font-size:12px; color:var(--faint); margin-top:1px; }
.p-hero-r{ margin:14px 0 0; font-size:14px; color:var(--soft); }
.p-hero-r strong{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }