/* Faize Husaini Kenya — member & trustee portal. v3, 12 Sep 2026.
   Same brand tokens as v2; rebuilt component layer. Every v2 class name still resolves, so no markup has to change.
   What moved: money and headline numerals set in Cormorant with tabular figures; tables lose the solid green header bar
   for a hairline treatment that reads as a ledger; cards get a lighter border and a quieter shadow; form controls are
   50px with uppercase micro-labels; status pills carry meaning rather than one green. */
:root{
  --pg:#0b6b3f;--pgd:#064f2e;--pgx:#073522;--pgxx:#041d13;
  --pi:#fbf8f2;--pi2:#f6f1e7;--pi3:#fdfcf9;
  --pb:#c9a24d;--pb2:#e2c376;--pbt:#8c6a1f;--pbg:#f4efe2;--pbb:#e4d9bd;
  --pr:#922529;--pr2:#a61f26;--prg:#fbe9e7;--prb:#e3bfbf;
  --pt:#161615;--pm:#6e6d69;--pm2:#8c8579;--pl:#e7e1d4;--pl2:#d8d2c6;--pl3:#f2ede2;
  --pgt:#e6f0ea;--pgb:#cfe0d5;
  --r:14px;--r2:10px;--r3:9px;
  --sh:0 10px 30px rgba(6,42,27,.07);--sh2:0 2px 12px rgba(0,0,0,.25);
  --ff:Inter,system-ui,-apple-system,sans-serif;--fd:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box}
.portal{margin:0;background:var(--pi);color:var(--pt);font-family:var(--ff);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--pg)}


/* ---------- top bar */
.p-top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 20px;background:var(--pgx);color:var(--pi);box-shadow:var(--sh2)}
.p-brand{display:flex;align-items:center;gap:11px;color:var(--pi);text-decoration:none;font-family:var(--fd);font-size:19px;font-weight:700;line-height:1.05}
.p-brand img{width:34px;height:34px;border-radius:50%;background:#fff;flex:none}
.p-brand small{display:block;font-family:var(--ff);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pb);font-weight:600;margin-top:2px}
.p-top__right{display:flex;align-items:center;gap:11px;font-size:13px;min-width:0}
.p-lang{color:var(--pb2);text-decoration:none;font-weight:600;padding:6px 11px;border:1px solid rgba(201,162,77,.45);border-radius:999px;white-space:nowrap}
.p-me{color:rgba(251,248,242,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.p-bell{position:relative;color:var(--pb2);text-decoration:none;font-size:18px;padding:4px 6px}
.p-bell b{position:absolute;top:-2px;right:-4px;background:var(--pr);color:#fff;font-size:10px;line-height:1;border-radius:10px;padding:3px 5px}

/* ---------- buttons */
.p-btn{display:inline-block;padding:13px 20px;border-radius:11px;background:var(--pg);color:#fff;border:0;font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;text-align:center;transition:transform .14s,box-shadow .14s,background .14s}
.p-btn:hover{background:var(--pgd);transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,107,63,.26)}
.p-btn--ghost{background:transparent;color:var(--pb2);border:1px solid rgba(201,162,77,.55);padding:9px 14px;font-size:13.5px;font-weight:500}
.p-btn--ghost:hover{background:transparent;color:var(--pb2);box-shadow:none}
.p-main .p-btn--ghost{color:var(--pgd);border-color:var(--pl2);background:#fff}
.p-main .p-btn--ghost:hover{border-color:var(--pg);color:var(--pg)}
.p-btn--sm{padding:8px 13px;font-size:13px}
.p-link{background:none;border:0;color:var(--pr);cursor:pointer;font:inherit;padding:0}

/* ---------- auth */
.portal--auth{min-height:100vh;background:radial-gradient(ellipse at 50% 22%,#0b4430 0%,#062a1b 55%,#041d13 100%)}
.portal--auth .p-top{background:transparent;box-shadow:none}
.p-authwrap{display:flex;align-items:center;justify-content:center;padding:24px 16px 48px}
.p-auth{display:grid;grid-template-columns:1fr 1.15fr;width:min(880px,100%);background:var(--pi);border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.p-auth__side{position:relative;background:var(--pgx);color:var(--pi);padding:38px 30px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;overflow:hidden}
.p-auth__side::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(201,162,77,.22),transparent 55%),radial-gradient(circle at 80% 85%,rgba(11,107,63,.5),transparent 60%)}
.p-auth__side>*{position:relative}
.p-auth__logo{width:92px;height:92px;border-radius:50%;background:#fff;padding:6px;box-shadow:0 0 0 1px rgba(201,162,77,.5),0 14px 34px rgba(0,0,0,.42)}
.p-auth__org{font-family:var(--fd);font-size:28px;font-weight:700;line-height:1.1;margin:10px 0 0}
.p-auth__tag{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pb2);margin:6px 0 0;font-weight:600}
.p-auth__salaam{font-family:'Amiri','Kanz al-Lulu',serif;font-size:21px;line-height:1.7;color:var(--pb2);margin:14px 0 0;direction:rtl}
.p-auth__main{padding:34px 32px 36px}
.p-auth__main h1{font-family:var(--fd);font-size:31px;color:var(--pgd);margin:0 0 5px;line-height:1.1}
.p-auth__main .p-muted{margin:0 0 18px}
.p-btn--sso{display:block;background:var(--pgd);color:#fff;margin:10px 0;padding:15px 18px}
.p-btn--sso small{display:block;font-weight:400;font-size:10px;opacity:.72;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.p-or{position:relative;border:0;margin:20px 0 16px;text-align:center}
.p-or::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--pl2)}
.p-or::after{content:"or";position:relative;background:var(--pi);padding:0 11px;color:var(--pm);font-size:11.5px}


/* ---------- shell */
.p-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100vh - 58px)}
.p-wrap--nonav{grid-template-columns:minmax(0,1fr)}
.p-nav{background:#fff;border-inline-end:1px solid var(--pl);padding:16px 12px;position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow:auto}
.p-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:2px 0;border-radius:var(--r3);color:var(--pgd);text-decoration:none;font-weight:500;font-size:14px}
.p-nav a.on{background:var(--pgx);color:#fff;font-weight:600}
.p-nav a:hover:not(.on){background:var(--pgt)}
.p-nav a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pb);flex:none;opacity:.6}
.p-nav a.on::before{background:var(--pb2);opacity:1}
.p-main{padding:26px clamp(16px,3vw,32px) 52px;max-width:1160px;width:100%;min-width:0}
.p-main h1{font-family:var(--fd);font-size:clamp(27px,3.4vw,34px);color:var(--pgd);margin:0 0 6px;line-height:1.12}
.p-main h1+.p-muted{margin-top:0;margin-bottom:18px}
.p-main h2{font-family:var(--fd);font-size:21px;color:var(--pgd);margin:0 0 10px;font-weight:600}
.p-main h3{font-size:15.5px;margin:0 0 6px;color:var(--pgd);font-weight:600}
.p-card{background:#fff;border:1px solid var(--pl);border-radius:var(--r);padding:18px 20px;margin:0 0 16px;box-shadow:var(--sh)}
.p-muted{color:var(--pm);font-size:13px;line-height:1.55}
.p-hint{color:var(--pm2);font-size:12px;margin:6px 0 0;line-height:1.55}
.p-msg{background:var(--pgt);border-inline-start:3px solid var(--pg);padding:12px 15px;margin:0 0 16px;border-radius:0 var(--r3) var(--r3) 0;font-size:14px}
.p-msg--err{background:var(--prg);border-color:var(--pr)}

/* ---------- forms */
label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--pm2);margin:16px 0 5px;font-weight:600}
input,select,textarea{width:100%;font:inherit;font-size:15px;padding:13px 13px;border:1px solid #b9b4a9;border-radius:var(--r2);background:#fff;min-height:50px;color:var(--pt)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(11,107,63,.3);border-color:var(--pg)}
textarea{min-height:100px;line-height:1.55}
input[type=file]{padding:11px;background:var(--pi2);font-size:13.5px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;margin-inline-end:8px}
label:has(input[type=checkbox]),label:has(input[type=radio]){text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;color:var(--pt);display:flex;align-items:flex-start;gap:2px;line-height:1.5}
.p-form .p-btn,form .p-btn{margin-top:16px}
label .p-hint,label .p-muted,label small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;color:var(--pm2);margin-top:7px;line-height:1.55}
form.p-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px;align-items:end}
form.p-filter label{margin-top:0}
form.p-filter .p-btn{grid-column:1/-1;justify-self:start;margin-top:16px}
@media(min-width:861px){form.p-filter .p-btn{grid-column:auto;margin-top:0;align-self:end}}
form .p-btn+.p-btn{margin-inline-start:8px}

/* ---------- figures */
.p-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin:0 0 20px}
.p-kpi{background:#fff;border:1px solid var(--pl);border-top:3px solid var(--pb);border-radius:var(--r2);padding:15px 16px;text-decoration:none;color:var(--pt);box-shadow:var(--sh);display:block}
.p-kpi:hover{border-top-color:var(--pg)}
.p-kpi b{display:block;font-size:29px;color:var(--pgd);font-family:var(--fd);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.p-kpi span{font-size:11.5px;color:var(--pm);display:block;margin-top:5px}
.p-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.p-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 16px}
.p-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-span2{grid-column:span 2}
.p-list{margin:0;padding:0;list-style:none}
.p-list li{margin:0;padding:12px 0;border-bottom:1px solid var(--pl3);line-height:1.55}
.p-list li:last-child{border-bottom:0;padding-bottom:0}
.p-list li:first-child{padding-top:0}
.p-steps{margin:0;padding-inline-start:20px}
.p-steps li{margin:9px 0}

/* ---------- status */
.p-badge{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--pgt);color:var(--pgd);font-size:11.5px;vertical-align:middle;font-weight:600;letter-spacing:.01em}
.p-badge--pending,.p-badge--open,.p-badge--requested,.p-badge--review{background:var(--pbg);color:var(--pbt)}
.p-badge--cancelled,.p-badge--declined,.p-badge--rejected,.p-badge--expired{background:var(--prg);color:var(--pr)}
.p-badge--verified{background:var(--pgt);color:var(--pgd)}
.p-good{color:var(--pgd);font-weight:600}
.p-bad{color:var(--pr);font-weight:600}
.p-warn{color:var(--pbt);font-weight:600}
.p-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.p-tabs a{padding:9px 15px;border:1px solid var(--pl2);border-radius:999px;text-decoration:none;color:var(--pgd);background:#fff;font-size:13.5px}
.p-tabs a.on{background:var(--pg);color:#fff;border-color:var(--pg)}

/* ---------- documents & evidence */
.p-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.p-doc{border-top:3px solid var(--pl2);margin:0}
.p-doc--verified{border-top-color:var(--pg)}
.p-doc--pending{border-top-color:var(--pb)}
.p-doc--rejected,.p-doc--expired{border-top-color:var(--pr)}
.p-state{font-weight:600;margin:0 0 4px}
.p-doc--rejected .p-state,.p-doc--expired .p-state{color:var(--pr)}
.p-doc--verified .p-state{color:var(--pg)}
.p-upload{margin-top:10px;padding-top:10px;border-top:1px dashed var(--pl2)}
.p-upload input{margin:6px 0}

/* ---------- tables: a ledger, not a banner */
.p-tablewrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.p-table{width:100%;min-width:0;border-collapse:collapse;font-size:13.5px}
.p-table th{text-align:start;background:transparent;color:var(--pm2);padding:0 10px 9px;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1.5px solid var(--pl2);white-space:nowrap}
.p-table td{padding:11px 10px;border-bottom:1px solid var(--pl3);vertical-align:top}
.p-table tr:last-child td{border-bottom:0}
td.READY{color:var(--pg);font-weight:600}

.p-reply{background:var(--pi2);padding:11px 13px;border-radius:var(--r3);margin:8px 0 0}
.p-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--pt);margin:6px 0;padding:10px 12px;border:1px solid var(--pl);border-radius:var(--r3)}
.p-check input{width:auto;min-height:0;margin:0}
.p-foot{padding:20px 16px;color:var(--pm2);font-size:12px;border-top:1px solid var(--pl);text-align:center}
.p-foot a{color:var(--pg)}
audio{width:100%;max-width:420px}

/* ---------- Lisan al-Dawat (member side only) */
[dir="rtl"] .portal{font-family:'Kanz al-Lulu','Noto Naskh Arabic',serif;font-size:18px}
[dir="rtl"] .p-main h1,[dir="rtl"] .p-main h2,[dir="rtl"] .p-main h3,[dir="rtl"] .p-auth__main h1,[dir="rtl"] .p-kpi b{font-family:'Kanz al-Lulu','Noto Naskh Arabic',serif}
[dir="rtl"] .p-brand,[dir="rtl"] .p-auth__org{font-family:var(--fd)}
[dir="rtl"] label{font-size:14px;letter-spacing:0;text-transform:none}
[dir="rtl"] .p-muted{font-size:15px}

/* ---------- mobile */
@media (max-width:860px){
  .p-auth{grid-template-columns:1fr}.p-auth__side{padding:26px 20px 18px}.p-auth__logo{width:72px;height:72px}
  .p-auth__org{font-size:24px}.p-auth__salaam{font-size:18px;margin-top:8px}.p-auth__main{padding:24px 20px 28px}.p-authwrap{padding:12px 12px 32px}
  .p-wrap{grid-template-columns:1fr}
  .p-nav{position:sticky;top:58px;height:auto;display:flex;overflow-x:auto;gap:5px;padding:9px 12px;border-inline-end:0;border-bottom:1px solid var(--pl);scrollbar-width:none}
  .p-nav::-webkit-scrollbar{display:none}
  .p-nav a{flex:none;padding:9px 13px;font-size:13.5px;margin:0;border:1px solid var(--pl);background:#fff}
  .p-nav a.on{border-color:var(--pgx)}
  .p-nav a::before{display:none}
  .p-main{padding:18px 14px 44px}
  .p-cols,.p-grid3{grid-template-columns:1fr}.p-span2{grid-column:auto}
  .p-me{display:none}.p-kpi b{font-size:25px}.p-card{padding:16px 15px}.p-top{padding:9px 14px}.p-brand{font-size:17px}
}
@media (max-width:480px){
  .p-kpis{grid-template-columns:1fr 1fr}
  .p-docs{grid-template-columns:1fr}
  .p-btn{display:block;width:100%}
  .p-btn--ghost,.p-btn--sm{width:auto;display:inline-block}
  form .p-btn+.p-btn{margin-inline-start:0;margin-top:9px}
  .p-lang{padding:5px 9px;font-size:11.5px}
}

/* ============================================================ photographs (d37)
   Built for a large thumb on a small phone: nothing below 48px, one instruction visible at a time. */
.p-lede{font-size:16px;line-height:1.6;color:var(--pt);max-width:62ch;margin:0 0 18px}
.p-btn--big{min-height:58px;font-size:16px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;margin:0 8px 10px 0}
.p-step__n{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pb);margin:0 0 6px;font-weight:600}
.p-wiz{padding:22px}
.p-wiz h2{margin:0 0 10px}
.p-check{list-style:none;margin:0 0 20px;padding:0}
.p-check li{position:relative;padding:9px 0 9px 30px;font-size:15px;line-height:1.5;border-bottom:1px solid var(--pl)}
.p-check li:before{content:"•";position:absolute;left:8px;color:var(--pg);font-size:20px;line-height:1.2}
.p-check li:last-child{border-bottom:0}

.p-cam{position:relative;max-width:420px;margin:0 auto 14px;background:#1d1b17;border-radius:12px;overflow:hidden}
.p-cam video{display:block;width:100%;height:auto;transform:scaleX(-1)}
.p-cam__guide{position:absolute;inset:0;pointer-events:none}
.p-cam__guide:after{content:"";position:absolute;left:50%;top:16%;width:46%;height:56%;transform:translateX(-50%);border:2px dashed rgba(255,255,255,.75);border-radius:50%}

.p-align{position:relative;max-width:420px;margin:0 auto 14px;touch-action:none}
.p-align canvas{display:block;margin:0 auto;border-radius:12px;background:#efece5;cursor:grab}
.p-align__guide{position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none}
.p-align__crown,.p-align__chin{position:absolute;left:0;right:0;border-top:2px solid var(--pr2)}
.p-align__crown{top:18%}
.p-align__chin{top:70%}
.p-align__crown i,.p-align__chin i{position:absolute;right:6px;top:-9px;background:var(--pr2);color:#fff;font-style:normal;font-size:10px;padding:1px 7px;border-radius:9px;letter-spacing:.04em}
.p-align__oval{position:absolute;left:50%;top:18%;width:46%;height:52%;transform:translateX(-50%);border:2px dashed rgba(11,107,63,.5);border-radius:50%}

.p-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto 16px}
.p-pad__b{min-height:52px;font-size:18px;padding:0}
.p-pad__z{min-height:52px;grid-column:span 2;font-size:14px;padding:0}

.p-result{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-bottom:14px}
.p-result__img img{width:180px;border-radius:10px;border:1px solid var(--pl2);display:block}
.p-result__list{list-style:none;margin:0;padding:0;flex:1 1 260px;min-width:240px}
.p-result__list li{padding:8px 0;font-size:14.5px;line-height:1.5;border-bottom:1px solid var(--pl)}
.p-result__list li b{display:inline-block;width:22px;font-size:15px}
.p-result__list li.ok b{color:var(--pgd)}
.p-result__list li.no b{color:var(--pr)}
.p-result__list li.no{color:var(--pr)}
.p-msg--ok{background:var(--pgt);color:var(--pgd);border-color:var(--pgb)}

.p-photo__have{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.p-photo__shot img{width:170px;border-radius:10px;border:1px solid var(--pl2);display:block}
.p-photo__meta{flex:1 1 240px;min-width:220px}
.p-state--verified b{color:var(--pgd)}
.p-state--rejected b{color:var(--pr)}

.p-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.p-size{display:block;padding:14px 16px;border:1px solid var(--pl2);border-radius:10px;background:#fff;text-decoration:none;color:inherit;min-height:64px}
.p-size:hover{border-color:var(--pg);box-shadow:0 2px 10px rgba(11,107,63,.09)}
.p-size b{display:block;font-size:14.5px;color:var(--pgd);margin-bottom:2px}
.p-size span{display:block;font-size:12px;color:var(--pm)}
.p-size em{display:block;font-size:11.5px;color:var(--pm);font-style:normal;margin-top:6px;line-height:1.45}

.p-phrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.p-phrow__img img{width:120px;border-radius:8px;border:1px solid var(--pl2);display:block}
.p-phrow__body{flex:1 1 300px;min-width:260px}
.p-phrow__body h3{margin:0 0 4px}
.p-flags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.p-flags span{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--pgt);color:var(--pgd)}
.p-flags span.no{background:var(--prg);color:var(--pr)}
.p-inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
/* row actions in a table cell — each destructive one is its own POST form, so they have to sit inline */
.p-rowacts{display:flex;gap:2px 7px;align-items:center;flex-wrap:wrap;white-space:nowrap}
.p-rowacts form{display:inline;margin:0}
.p-rowacts .p-link{color:var(--pgd);font-size:inherit}
.p-rowacts .p-link:hover{text-decoration:underline}
.p-rowacts .p-link.p-bad{color:var(--pr)}
.p-rowacts .p-sep{color:var(--pl2)}
.p-inline input{margin:0;min-width:180px}
.p-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.p-spec .p-wide{grid-column:1/-1}
.p-kpi.on{border-color:var(--pg);background:var(--pgt)}

/* ============================================================ the shell, rebuilt (d38)
   Grouped navigation, a text-size control that actually changes the page, one "what needs you" block,
   per-page help that stays out of the way, and a foot that always offers a human. */

/* ---- text size: the whole portal scales from one variable */
.portal{font-size:15px}
.p-ts--l{font-size:17px}
.p-ts--x{font-size:19.5px}
.p-ts--l .p-muted,.p-ts--x .p-muted{font-size:14px}
.p-ts--l input,.p-ts--l select,.p-ts--l textarea,.p-ts--l .p-btn{font-size:16px}
.p-ts--x input,.p-ts--x select,.p-ts--x textarea,.p-ts--x .p-btn{font-size:18px;min-height:56px}
.p-ts--x label{font-size:12.5px}
.p-ts{display:inline-flex;align-items:baseline;gap:2px;border:1px solid rgba(201,162,77,.45);border-radius:999px;padding:2px 4px}
.p-ts a{color:var(--pb2);text-decoration:none;padding:2px 7px;border-radius:999px;line-height:1;font-weight:600}
.p-ts a.on{background:var(--pb);color:var(--pgx)}
.p-ts__n{font-size:12px}.p-ts__l{font-size:15px}.p-ts__x{font-size:18px}

/* ---- navigation */
.p-nav__h{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--pm2);margin:16px 12px 4px;font-weight:700}
.p-nav__h:first-of-type{margin-top:8px}
.p-nav__todo,.p-nav__home{display:flex!important;align-items:center;gap:8px;margin:0 0 4px!important;padding:12px 13px!important;border-radius:var(--r3);background:var(--pgx)!important;color:#fff!important;font-weight:600!important;text-decoration:none}
.p-nav__todo::before,.p-nav__home::before{display:none!important}
.p-nav__todo b{background:var(--pb);color:var(--pgx);border-radius:999px;min-width:24px;text-align:center;padding:1px 7px;font-size:13px}
.p-nav__n{margin-inline-start:auto;background:var(--pr);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}
.p-nav__more{font-size:12px!important;color:var(--pm)!important;font-weight:400!important;margin-top:12px!important;border-top:1px solid var(--pl);padding-top:12px!important;border-radius:0!important}
.p-nav__more::before{display:none!important}

/* ---- what needs you */
.p-todo{background:#fff;border:1px solid var(--pl);border-top:4px solid var(--pg);border-radius:var(--r);padding:20px 22px;margin:0 0 20px;box-shadow:var(--sh)}
.p-todo h2{margin:0 0 12px}
.p-todo__clear{margin:0;color:var(--pgd);font-size:15px}
.p-todo__list{list-style:none;margin:0;padding:0;counter-reset:todo}
.p-todo__list li{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid var(--pl)}
.p-todo__list li:last-child{border-bottom:0;padding-bottom:0}
.p-todo__list li.u .p-todo__t{color:var(--pr);font-weight:600}
.p-todo__t{flex:1 1 260px;min-width:0;font-size:15px;line-height:1.5}
.p-todo__list .p-btn{flex:none}

/* ---- per-page help */

/* ---- the foot */
.p-foot{margin:40px 0 0;padding:20px 0 0;border-top:1px solid var(--pl);font-size:14px;color:var(--pm)}
.p-foot a{font-weight:600}
.p-foot__small{font-size:12px;margin-top:8px;color:var(--pm2)}
.p-foot--legal{margin:0;padding:18px 20px;border-top:1px solid var(--pl);text-align:center;font-size:11.5px;color:var(--pm2);background:#fff}

@media (max-width:860px){
  .p-nav__h{margin:10px 4px 2px;width:100%}
  .p-nav{flex-wrap:wrap}
  .p-nav__todo,.p-nav__home{width:100%;justify-content:center}
  .p-nav__more{border-top:0!important;padding-top:9px!important;margin-top:0!important}
  .p-todo{padding:17px 16px}
  .p-todo__list li{gap:9px}
  .p-todo__list .p-btn{width:100%}
}

/* ---- a ledger row: reference and person on the left, money right-aligned, state as a pill (d38) */
.p-lrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--pl)}
.p-lrow:last-child{border-bottom:0}
.p-lrow__main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-lrow__main a{font-weight:700;font-size:14.5px;text-decoration:none}
.p-lrow__main a:hover{text-decoration:underline}
.p-lrow__sub{font-size:12.5px;color:var(--pm);line-height:1.45}
.p-lrow__amt{font-family:var(--fd);font-size:19px;font-weight:700;color:var(--pgd);white-space:nowrap;margin-inline-start:auto}
.p-badge--awaiting_exec,.p-badge--submitted,.p-badge--declared{background:var(--pbg);color:var(--pbt)}
.p-badge--dispatched,.p-badge--approved{background:var(--pgt);color:var(--pgd)}
.p-badge--returned_exec,.p-badge--declined,.p-badge--disputed{background:var(--prg);color:var(--pr)}
@media (max-width:480px){ .p-lrow__amt{margin-inline-start:0} .p-lrow{gap:7px} }

/* ---- the help strip reads as a utility, not a banner */
@media(min-width:861px){
  .p-lrow__amt{min-width:148px;text-align:end}
  .p-lrow>.p-badge{min-width:206px;text-align:center}
}

/* ---- the menu collapses on a phone so the page starts at the top of the screen (d38) */
.p-navbox{border:0;background:transparent}
.p-navbox>summary{display:none}
@media (max-width:860px){
  .p-nav{display:block;padding:9px 12px}
  .p-navbox>summary{display:block;cursor:pointer;list-style:none;margin:8px 0 0;padding:12px 14px;background:#fff;border:1px solid var(--pl2);border-radius:var(--r3);font-weight:600;color:var(--pgd);font-size:14.5px;text-align:center}
  .p-navbox>summary::-webkit-details-marker{display:none}
  .p-navbox>summary::after{content:" ▾"}
  .p-navbox[open]>summary::after{content:" ▴"}
  .p-navbox__in{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
  .p-nav a{margin:0}
  .p-nav__h{width:100%;margin:8px 4px 0}
}
.p-nav__out{display:none}
@media (max-width:560px){
  .p-top{flex-wrap:nowrap}
  /* d53 — this hid Sign out on every phone, with a comment saying it "moves into the menu". It does — into a
     <details> that is COLLAPSED on a small screen, so on a shared handset the way out of somebody else's
     account was two taps behind a control that gives no hint it is there. The words go; the door stays. */
  .p-top .p-out{display:none}
  .p-brand small{display:none}
  .p-brand{font-size:16px}
  .p-nav__out{display:block;font-size:13px!important;color:var(--pr)!important;font-weight:600!important;width:100%;text-align:center;border:1px solid var(--prb)!important;background:var(--prg)!important;margin-top:8px!important}
  .p-nav__out::before{display:none!important}
}

/* ---- the sign-in screen: one field, one button, everything else out of the way (d38) */
.p-auth__main label{text-transform:none;font-size:13px;letter-spacing:0;color:var(--pgd);font-weight:600;margin-bottom:7px}
.p-bigfield input{min-height:60px;font-size:22px;letter-spacing:.16em;text-align:center;font-variant-numeric:tabular-nums}
.p-auth__main .p-btn--big{width:100%;margin:14px 0 0}
.p-auth__main .p-lede{font-size:15.5px;margin-bottom:20px}
.p-small{font-size:13px;line-height:1.6;color:var(--pm);margin:14px 0 0}
.p-small--quiet{font-size:11.5px;color:var(--pm2);margin-top:18px}
.p-authwrap .p-ts{border-color:rgba(201,162,77,.5)}

/* ---------------------------------------------------------------- registers, the Trust's details, receipts (d41)
   A register row has ten columns and a phone has none to spare, so each row is a card: the status and the
   identifier on top, the wording next, the rest as a short list, and the one control a portfolio manager
   actually needs — the status box — always visible without opening anything. */
.p-reg{padding:14px 16px}
.p-reg--late{border-left:4px solid var(--pr)}
.p-reg__id{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px;font-size:12.5px;color:var(--pm);letter-spacing:.02em}
.p-reg__t{margin:0 0 10px;font-size:15.5px;line-height:1.5}
.p-reg__d{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0 0 12px;font-size:13.5px}
.p-reg__d dt{color:var(--pm);white-space:nowrap}
.p-reg__d dd{margin:0}
.p-reg__f{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;border-top:1px solid var(--pl);padding-top:12px}
.p-reg__f label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--pm);margin:0}
.p-reg__f select,.p-reg__f input{min-width:150px;margin-top:4px}
.p-reg__f input{min-width:220px}
.p-reg__u{margin:10px 0 0;font-size:11.5px;color:var(--pm2)}
@media (max-width:560px){.p-reg__f{display:block}.p-reg__f label{margin-bottom:10px}.p-reg__f select,.p-reg__f input{width:100%;min-width:0}}

/* The receipts list: one line per receipt, the number and the amount always on the same row as the download. */
.p-rec{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--pl)}
.p-rec:last-child{border-bottom:0}
.p-rec__n{font-weight:700;font-variant-numeric:tabular-nums}
.p-rec__a{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.p-rec__m{color:var(--pm);font-size:13px}
[dir="rtl"] .p-rec__a{margin-left:0;margin-right:auto}
/* A register row folds away until it is wanted: fifty open rows made a page nearly thirty thousand pixels tall. */
.p-reg__x>summary{cursor:pointer;font-size:13px;color:var(--pg);padding:6px 0;list-style:none}
.p-reg__x>summary::-webkit-details-marker{display:none}
.p-reg__x>summary::before{content:"▸ ";font-size:11px}
.p-reg__x[open]>summary::before{content:"▾ "}
.p-pager{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px 0}
.p-tabs i{font-style:normal;font-size:11px;color:var(--pgx);letter-spacing:.03em}
/* A Trust item on a trustee's list: the Trust's business, above his own paperwork but below what is urgent. */
.p-todo__list li.t{border-left:3px solid var(--pg)}
/* What is missing on a visa case: legible, not shouting. Five of these in a row in heavy red is unreadable. */
.p-list li.p-bad{font-weight:400;color:var(--pr);font-size:14px;line-height:1.55}
.p-list li.p-bad::before{content:"•  ";font-weight:700}

/* An M-Pesa statement row. A six-column table put the one thing the Treasurer needs — why a row did NOT match
   — off the right edge of a phone, so each row is a block with the reason under the reference. (d44) */
.p-stmt{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--pl)}
.p-stmt:last-of-type{border-bottom:0}
.p-stmt--ok{background:linear-gradient(90deg,rgba(11,107,63,.06),transparent 60%);margin:0 -8px;padding:12px 8px}
.p-stmt__tick{flex:0 0 22px;padding-top:2px;color:var(--pm2);text-align:center}
.p-stmt__body{flex:1 1 auto;min-width:0}
.p-stmt__top{margin:0 0 3px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-variant-numeric:tabular-nums}
.p-stmt__ref{margin:0;font-size:13.5px;word-break:break-word}
.p-stmt__why{margin:3px 0 0;font-size:13px;color:var(--pm)}
.p-stmt__pick{display:block;margin-top:8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--pm)}
.p-stmt__pick select{width:100%;margin-top:4px;font-size:14px;text-transform:none;letter-spacing:0;color:var(--pt)}

/* ---------------------------------------------------------------- what this module is  (d47)
   Two layers on every page: the brief is always on the screen, and a small (i) opens the rest. A <details>
   element, so it needs no JavaScript, opens on one tap, and reads correctly to a screen reader. */
.p-info{margin:0 0 18px;border:1px solid var(--pl);border-radius:var(--r3);background:var(--pi3)}
.p-info>summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;font-size:14.5px;line-height:1.55;color:var(--pt)}
.p-info>summary::-webkit-details-marker{display:none}
.p-info__txt{flex:1 1 auto;min-width:0}
.p-info__i{flex:0 0 22px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;
  background:var(--pl2);color:var(--pgd);font-family:var(--fd);font-size:14px;font-weight:700;font-style:italic;
  transition:background .15s,color .15s}
.p-info>summary:hover .p-info__i,.p-info[open] .p-info__i{background:var(--pg);color:#fff}
.p-info__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.p-info__body{border-top:1px solid var(--pl);padding:4px 16px 16px}
.p-info__body h3{font-family:var(--fd);font-size:18px;color:var(--pgd);margin:14px 0 8px;font-weight:600}
.p-info__body p{margin:8px 0;font-size:14px;line-height:1.6;max-width:66ch}
.p-info__h{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--pm);
  margin:16px 0 4px !important;font-weight:600}
.p-info__body ul{margin:0;padding-inline-start:20px}
.p-info__body li{font-size:14px;line-height:1.6;margin:5px 0;max-width:64ch}
.p-info__rules li{color:var(--pgd)}
.p-info__who,.p-info__see{font-size:13.5px !important;color:var(--pm)}
.p-info__see a{color:var(--pg)}
@media (max-width:560px){.p-info>summary{font-size:14px;padding:11px 12px}.p-info__body{padding:4px 13px 14px}}
.p-hr{border:0;border-top:1px solid var(--pl);margin:18px 0 14px}

/* d50 — the Friday note: the progress bar on the sweep, and the note as it will be sent. */
.p-bar{height:.55rem;border-radius:.3rem;background:var(--pl);overflow:hidden;margin:.35rem 0 1rem}
.p-bar span{display:block;height:100%;background:var(--pg);transition:width .3s}
.p-note{width:100%;font:0.82rem/1.45 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  white-space:pre;background:var(--pi2);border:1px solid var(--pl);
  border-radius:.4rem;padding:.7rem;color:inherit}

/* d51 — the safars editor and the intake door. */
.p-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
@media (max-width:640px){.p-grid2{grid-template-columns:1fr}}
.p-fold{border:1px solid var(--pl);border-radius:.5rem;padding:.5rem .75rem;margin:.75rem 0;background:var(--pi2)}
.p-fold>summary{cursor:pointer;font-weight:600;color:var(--pg);list-style-position:inside}
.p-fold>summary::marker{color:var(--pm)}
.p-fs{border:1px solid var(--pl);border-radius:.4rem;padding:.35rem .7rem;margin:.5rem 0}
.p-fs>legend{font-size:.75rem;color:var(--pm);padding:0 .3rem}
.p-rights td,.p-rights th{white-space:nowrap}
.p-rights td:first-child{white-space:normal;min-width:11rem}
.p-rights__g td{background:var(--pi2);padding-top:.5rem}
.p-check--tight{display:block;font-size:.78rem;margin:.1rem 0;white-space:nowrap}
.p-check--tight input{margin-right:.25rem}

/* d52 — My tasks. Finished work is struck through and sinks; what is still to do stays at the top. */
.p-tasks{list-style:none;margin:0;padding:0}
.p-task{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem .25rem;border-top:1px solid var(--pl)}
.p-task:first-child{border-top:0}
.p-task__do{margin:0;flex:0 0 auto}
.p-task__tick{width:2rem;height:2rem;border-radius:50%;border:1.5px solid var(--pl2);
  background:#fff;color:var(--pg);font-size:1rem;line-height:1;cursor:pointer;padding:0}
.p-task__tick:hover{background:var(--pg);color:#fff;border-color:var(--pg)}
.p-task__body{flex:1 1 auto;min-width:0}
.p-task__t{margin:0 0 .15rem;font-weight:600;line-height:1.35}
.p-task__m{margin:0;font-size:.82rem;color:var(--pm)}
.p-task__n{margin:.2rem 0 0;font-size:.85rem;color:var(--pm)}
.p-task__more{margin-top:.3rem;font-size:.85rem}
.p-task__more>summary{cursor:pointer;color:var(--pg)}
.p-task--done{opacity:.55}
.p-task--done .p-task__t{text-decoration:line-through}
.p-task--late .p-task__t{color:#8d1f24}
@media (max-width:560px){.p-task{gap:.5rem}.p-task__tick{width:1.75rem;height:1.75rem}}

/* ============================================================================
   d52 — reading a list
   Every table in the portal is a list of people, money or dates that somebody
   has to read across. Three things make that possible and none of them were
   here: a stripe so the eye keeps its row, a hover that is unmistakably not
   the stripe, and a first column that stays put when the table is wider than
   the screen — which on a phone is every table.
   ============================================================================ */

.p-table tbody tr:nth-child(odd) > td,
.p-table tr:nth-child(odd) > td { background: var(--pi3); }
.p-table tbody tr:nth-child(even) > td,
.p-table tr:nth-child(even) > td { background: transparent; }

/* The hover is a different hue from the stripe, not a darker shade of it: a
   shade reads as "this row is striped", a hue reads as "you are on this row". */
.p-table tr:hover > td { background: var(--pgt); box-shadow: inset 2px 0 0 var(--pg); }
.p-table tr:hover > td:first-child { color: var(--pgd); }
.p-rights__g:hover > td, .p-table tr.p-rights__g:hover > td { background: var(--pi2); box-shadow: none; }

/* The heading stays while the rows scroll. A fifty-row register otherwise loses
   its column names at row twelve. */
.p-table th { position: sticky; top: 0; z-index: 2; background: var(--pi); }
.p-card .p-table th { background: var(--pi3); }

/* The first column is the one that says which row this is. It stays put while
   the rest slides. */
.p-table td:first-child, .p-table th:first-child {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 1px 0 0 var(--pl3);
}
.p-table th:first-child { z-index: 3; }

.p-tablewrap { position: relative; scrollbar-width: thin; }
.p-tablewrap::-webkit-scrollbar { height: 8px; }
.p-tablewrap::-webkit-scrollbar-thumb { background: var(--pl2); border-radius: 99px; }

@media (max-width: 640px) {
  /* Room for a thumb, and one less column of wasted gutter. */
  .p-tablewrap > .p-table { min-width: 480px; }
  .p-table { font-size: 13px; }
  .p-table td { padding: 13px 8px; }
  .p-table th { padding: 0 8px 8px; }
}

/* ---------- room to breathe
   Cards were tight against each other and against the text inside them, which
   on a laptop reads as cramped and on a phone as one undifferentiated column. */
.p-card { margin-bottom: 18px; }
.p-card > h2:first-child { margin-top: 0; }
.p-card + .p-card { margin-top: 0; }
.p-main > h1 { margin-bottom: 14px; }
.p-msg { margin: 12px 0; }
.p-inline { display: inline-block; margin: 0 0 0 .35rem; vertical-align: middle; }
.p-inline > summary { cursor: pointer; color: var(--pg); font-size: .85rem }
.p-hr { border: 0; border-top: 1px solid var(--pl); margin: 16px 0 }

@media (min-width: 1100px) {
  /* On a wide screen a paragraph should not run the full width of a monitor. */
  .p-main > p.p-muted, .p-card > p.p-muted { max-width: 78ch; }
}
@media (max-width: 560px) {
  .p-card { padding: 14px 13px; border-radius: 11px; }
  .p-main { padding: 12px 12px 40px; }
  .p-btn { min-height: 42px; }
}

/* ---------- the tabs, which were a wrapping row of buttons on a phone */
.p-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.p-tabs::-webkit-scrollbar { display: none }
.p-tabs > a { white-space: nowrap; flex: 0 0 auto }

/* d52 — a placeholder that looks like a value is worse than no placeholder: the office cannot tell a filled
   field from an empty one, and saves the example by accident. */
.portal input::placeholder, .portal textarea::placeholder { color: var(--pm2); opacity: 1; font-style: italic }
.portal input::-webkit-input-placeholder, .portal textarea::-webkit-input-placeholder { color: var(--pm2); font-style: italic }

/* d52 — three badge states were emitted by the bookings and payments pages and styled nowhere, so a confirmed
   booking looked identical to a draft one. */
.p-badge--confirmed{background:var(--pgt);color:var(--pgd);border-color:var(--pgb)}
.p-badge--completed{background:var(--pi2);color:var(--pm);border-color:var(--pl2)}
.p-badge--paid{background:var(--pgt);color:var(--pgd);border-color:var(--pgb)}
.p-badge--declared{background:var(--pbg);color:var(--pbt);border-color:var(--pbb)}
.p-badge--disputed{background:var(--prg);color:var(--pr);border-color:var(--prb)}


/* d53 — the way out is always one tap away.
   On a wide screen it is the worded button; below 560px the word is dropped and the same link stays as a
   door icon beside the bell. Never hidden, never behind a menu: on a shared phone, signing out of somebody
   else's account is the most urgent thing on the screen. */
.p-out__icon{display:none;color:var(--pb2);padding:7px;border-radius:999px;line-height:0;
  border:1px solid rgba(201,162,77,.45);flex:none}
.p-out__icon:hover,.p-out__icon:focus-visible{background:rgba(201,162,77,.16);color:var(--pi)}
@media (max-width:560px){
  .p-out__icon{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px}
  .p-top{padding:9px 12px;gap:8px}
  .p-top__right{gap:7px}
  .p-bell{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .p-lang{padding:7px 9px;font-size:12px}
}
/* The text-size control lives in the menu on a small screen, where it has room and a label. */
.p-nav__ts{display:none}
@media (max-width:560px){
  /* At phone width the language pill, three text sizes, the bell and the way out do not all fit across the
     top — the audit found the door pushed to x=391 on a 390-pixel screen. The text size is the one that can
     move, because it is a setting rather than an action; it goes into the menu, with a label it never had. */
  .p-top .p-ts{display:none}
  .p-nav__ts{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:10px;padding:9px 11px;border:1px solid var(--pl);border-radius:var(--r3);
    font-size:13px;color:var(--pm)}
  .p-nav__ts .p-ts{margin:0}
  .p-brand span{font-size:15px}
  .p-brand img{width:30px;height:30px}
}

/* d53 — the audit found tables pushing the page sideways on six screens. The existing rule was
   `.p-card table`, which only matches a table that is a DIRECT child of a card; every table nested one div
   deeper kept its 480px minimum and dragged the whole page with it. Make the table its own scroller, wherever
   it sits, so the page never scrolls sideways and the table always can. */
/* A minimum width belongs on the CONTENT of a scroller, never on the scroller itself: a table with
   min-width:480px is 480px wide whatever its parent says, and drags the whole page sideways with it. A table
   inside .p-tablewrap can keep a minimum, because the wrapper is what scrolls. A bare table gets none and
   wraps its text instead — narrower columns on a phone, and a page that does not move.  */
.p-tablewrap > .p-table{min-width:480px}

/* A long reference, an e-mail address or a file name in a list has nowhere to break and pushes the page out.
   Break it rather than break the layout. */
.p-list li,.p-info__body li,.p-card li,.p-muted{overflow-wrap:anywhere}
.p-card code,.p-note{overflow-wrap:anywhere}

/* The brand is a link and the audit counts it as a tap target; give it a real one. */
.p-brand{min-height:38px}

/* d53 — type and targets, from the render audit.
   Nothing here is taste: 9.5px is below what a 60-year-old trustee reads on a phone in daylight, and a 23-pixel
   tap target is smaller than the pad of a thumb. The floor is 11px for a label and 38px for anything you press. */
.p-brand small{font-size:11px;letter-spacing:.1em}
.p-nav__h{font-size:11px}
.p-nav__n{font-size:11px}
.p-table th{font-size:11.5px}
label{font-size:12px}
.p-hint{font-size:11.5px}

.p-ts{display:inline-flex;gap:2px;align-items:center}
.p-ts a{min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;line-height:1}
@media (pointer:coarse){ .p-ts a{min-width:40px;min-height:40px} }

/* A checkbox is 13 pixels square by default. The label around it is the real target and already large, but the
   box itself should be findable by a thumb too. */
.portal input[type=checkbox],.portal input[type=radio]{width:20px;height:20px;min-height:20px;accent-color:var(--pg)}
.p-check{min-height:44px}

/* d53b — the last 33 findings of the render audit, all of them the same mistake in three costumes:
   a control that is legible but too short to press. A thumb pad is about 9mm, which is 40 CSS pixels on a
   phone. None of this changes what anything looks like; it changes what happens when you aim at it. */

/* A reference in a table is the way into the record. It was 22px tall — the height of its own text.
   The padding is cancelled by an equal negative margin, so rows do not grow; only the hit area does. */
.p-table td a:not(.p-btn):not(.p-pill){display:inline-block;padding:7px 0;margin:-7px 0}

/* Every disclosure is pressed, so every disclosure is a target. .p-info and .p-navbox already are. */
.portal details:not(.p-info):not(.p-navbox) > summary{
  min-height:40px;box-sizing:border-box;display:flex;align-items:center;gap:6px;cursor:pointer}
.p-reg__x>summary{padding:9px 0}

/* A tick box's label is the target, and a one-line label was 26px. Padding takes it past 40 on one line and
   lets it grow on two, so the box stays beside the first line where it belongs. */
label:has(input[type=checkbox]),label:has(input[type=radio]){padding-block:10px}
.p-check label,label.p-check{padding-block:0}

/* A list row carries exactly one link — the reference — and that link was 22 pixels tall in a 46-pixel row.
   Nobody aims at the text; they aim at the row. So the row is the target, and it lights up like one. */
.p-lrow{position:relative;transition:background .12s}
.p-lrow__main a::after{content:"";position:absolute;inset:0 -10px;border-radius:var(--r3)}
.p-lrow:has(a):hover{background:var(--pgt)}
.p-lrow__amt,.p-lrow>.p-badge{position:relative}

/* ─────────────────────────────────────────────────────────────────────────────
   d53c — the design pass.

   The subject is a trust office's ledger: money asked for, money moved, records kept, dates that matter.
   It is read by trustees in their fifties and sixties, mostly on a phone, often in daylight. So the work
   here is subtraction — take out what decorates, leave what informs, and make the informing part legible.
   ───────────────────────────────────────────────────────────────────────────── */

/* A field label is the name of the field. It was set as an 11px tracked-out capital — a sign, not a word —
   which is both the hardest thing on the page to read and the commonest tell of a templated interface.
   Sentence case at a readable size says the same thing and asks less of the eye. */
label{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--pm2);margin:16px 0 6px}
.p-kpi span,.p-kpi__l,.p-nav__h{text-transform:none;letter-spacing:.01em}
.p-nav__h{font-size:12px;font-weight:700;color:var(--pm2)}
.p-table th{text-transform:none;letter-spacing:0;font-size:12.5px}

/* Every navigation item had a gold dot in front of it. A mark that appears on all of them distinguishes
   none of them; it is decoration. The active row is already a filled pill, which is the real signal. */
.p-nav a::before{display:none}
.p-nav a{padding-inline-start:13px}

/* A rule set against the edge of the text is a rule the text is fighting. Give it the gap it needs. */
.p-todo__list li.t{padding-inline-start:14px}

/* On a phone the two bars above the page — "15 need you" and "Menu" — were stacked full-width and cost
   200 pixels before a single word of the actual page. They sit on one row now, and opening the menu drops
   a panel over the page instead of shoving the page 600 pixels down. */
@media (max-width:860px){
  .p-nav{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch;overflow:visible}   /* d66 — overflow:auto clipped the open menu to the bar's own height, so it never showed */
  .p-nav__todo,.p-nav__home{width:auto;flex:1 1 auto;margin:0!important}
  .p-navbox{flex:0 0 auto}
  .p-navbox>summary{margin:0;height:100%;display:flex;gap:6px;align-items:center;justify-content:center;white-space:nowrap}
  .p-navbox[open]>.p-navbox__in{position:absolute;inset-inline:0;top:calc(100% + 7px);z-index:40;
    background:#fff;border:1px solid var(--pl2);border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.17);
    padding:12px 14px;max-height:72vh;overflow:auto}

  /* Every action was a full-width green slab, so one item filled half the screen and a list of fifteen
     read as a list of two. The button is as wide as its own words. */
  .p-todo__list .p-btn{width:auto}
  .p-todo__list li{gap:10px 12px}
  .p-todo__t{flex:1 1 100%}
}

/* Urgency was carried by bold red across three wrapped lines, three items running — which is not emphasis,
   it is shouting, and nothing stands out when everything does. The rule at the edge says "urgent"
   structurally; the colour stays, the weight goes back to normal so the sentence can be read. */
.p-todo__list li.u{border-inline-start:3px solid var(--pr);padding-inline-start:14px}
.p-todo__list li.u .p-todo__t{font-weight:500}

/* A row of filters. Not a paragraph of links — the thing it filters is a list of records, and choosing one
   is a press, so it gets the size and the state of a control. */
.p-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 16px}
.p-chips__c{font-size:12.5px;color:var(--pm2);margin-inline-end:3px}
.p-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px;border:1px solid var(--pl2);
  border-radius:999px;background:#fff;color:var(--pgd);text-decoration:none;font-size:13.5px;line-height:1.2;
  transition:background .12s,border-color .12s,color .12s}
.p-chip b{font-weight:700;color:var(--pm2)}
.p-chip:hover{background:var(--pgt);border-color:var(--pg);color:var(--pgd)}
.p-chip.on{background:var(--pg);border-color:var(--pg);color:#fff}
.p-chip.on b{color:var(--pb)}
.p-chip.on:hover{background:var(--pgd)}
.p-chip--clear{color:var(--pr);border-color:#e6d2d2}
.p-chip--clear:hover{background:#fdf2f2;border-color:var(--pr);color:var(--pr)}

/* The pager. It is a control, so it is sized like one, and it is the same at the top of a list and the bottom. */
.p-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:16px 0;padding:12px 0;border-top:1px solid var(--pl)}
.p-pager__c{font-size:12.5px;color:var(--pm2);margin-inline-end:auto}
.p-pager__b,.p-pager__n{display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:38px;
  padding:6px 13px;border:1px solid var(--pl2);border-radius:9px;background:#fff;color:var(--pgd);
  text-decoration:none;font-size:14px;font-weight:600;transition:background .12s,border-color .12s}
.p-pager__n{padding:6px 10px;font-weight:500}
.p-pager__b:hover,.p-pager__n:hover{background:var(--pgt);border-color:var(--pg)}
.p-pager__n.on{background:var(--pg);border-color:var(--pg);color:#fff}
.p-pager__b.is-off{color:var(--pm2);background:var(--pbg);border-color:var(--pl);cursor:default}
.p-pager__g{color:var(--pm2);padding:0 2px}
@media (max-width:560px){ .p-pager__c{flex:1 1 100%;margin:0 0 4px} }

/* A card that folds. The heading is the control, so it reads and behaves like one: a caret that turns, the
   whole row pressable, and no change to how the card looks once it is open. */
.p-card.p-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  margin:-4px 0 0;padding:6px 0;border-radius:var(--r3)}
.p-card.p-fold > summary::-webkit-details-marker{display:none}
.p-card.p-fold > summary h2{margin:0;flex:1 1 auto}
.p-card.p-fold > summary::after{content:"";width:9px;height:9px;flex:none;margin-inline-start:auto;
  border-right:2px solid var(--pg);border-bottom:2px solid var(--pg);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .16s}
.p-card.p-fold[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.p-card.p-fold > summary:hover{background:var(--pgt)}
.p-card.p-fold[open] > summary{margin-bottom:6px}

/* d61 — Rights → Modules. A plain list of what the Trust uses, with enough room round each row that a
   thumb on a phone hits the box and not the row above it. */
.p-modlist{list-style:none;margin:0 0 18px;padding:0}
.p-modlist li{padding:7px 0;border-bottom:1px solid var(--pl)}
.p-modlist li:last-child{border-bottom:0}
.p-modlist label{display:flex;gap:9px;align-items:baseline;cursor:pointer;margin:0;font-weight:400}
.p-modlist input[type=checkbox]{flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--pgd)}
.p-modlist input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}
.p-modlist input[type=checkbox]:disabled+b{opacity:.6}
.p-modlist .p-muted{font-size:.88em}
/* d66 */
.p-ok{color:var(--pgd);font-weight:600}
.p-chip.on .p-muted{color:rgba(255,255,255,.78)}
.p-spec{margin:0 0 12px;display:flex;gap:14px;align-items:flex-start}.p-spec img{width:130px;border-radius:10px;border:1px solid var(--pl2);flex:none}.p-spec figcaption{font-size:13.5px;color:var(--pm);line-height:1.5}