/* FlowView Center — one stylesheet, on the Sanctuary design system.
   Screen sizes in px, printed sizes in pt or in.

   TWO SETS OF COLOURS, ON PURPOSE.

   The screen reads the theme tokens (--bg, --surface, --text, --brand ...).
   A theme in theme.js swaps those, and nothing else.

   Printed paperwork reads the Sanctuary palette (--navy, --cream, --stone,
   --ink ...), which no theme ever redefines. A treasurer on Midnight Violet
   must still print a statement a member can read, in the church's colours,
   on white paper. If a screen rule below ever reaches for --navy or --cream
   directly, it will stop following the theme; if a print rule reaches for a
   theme token, paper will start following the screen. Keep them apart.

   Fonts are bundled in app/fonts and referenced locally. They are never
   fetched from a network: this app makes no outbound connection of any kind,
   and a linked webfont would be the one exception. Source Serif 4 and
   Source Sans 3 are variable fonts, so one file covers every weight. */

@font-face{font-family:'Source Serif 4';src:url('../fonts/source-serif-4.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-prime.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* shaded alternate rows (tables, the Members list, the activity log), and their hover */
  --stripe:var(--surface-2);
  --stripe-hover:color-mix(in srgb,var(--line) 55%,var(--surface-2));
  /* every total row on screen (tables and the dashboard): a darker navy band */
  --total-bg:#BCD1E3;--total-ink:#0A2E48;--total-line:#0B3A5B;
  /* ---- Sanctuary palette: PRINT reads these. Never themed. ---- */
  --navy:#1A2B44;          /* Heritage Navy */
  --navy-deep:#04162e;
  --navy-soft:#374762;
  --oak:#8C6A42;           /* Cedar Oak */
  --oak-soft:#a98559;
  --cream:#F9F7F2;         /* Altar Cream */
  --stone:#E2E4E7;         /* Stone Gray */
  --ink:#121212;           /* Ink Black */
  --ok:#2D5A27;            /* Success Green */
  --warn:#A64D5D;          /* Charity Rose */
  --info:#374762;
  --ink-soft:#44474d;
  --rule:var(--stone);
  --rule-soft:#edeef0;

  /* Screen shapes. Controls are 10px round, cards 16px. */
  --radius:10px;
  --r-card:16px;
  --r-pill:999px;

  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Courier Prime','Courier New',ui-monospace,Consolas,monospace;

  /* ---- screen tokens: Light, the FlowView look ----
     Deep navy for the rail and headings, FlowView blue for primary actions,
     a soft blue-tinted page with white cards. */
  --bg:#F3F6FA;
  --rail:#0B3558;
  --surface:#ffffff;
  --surface-2:#F2F6FA;     /* quiet fills: hover, empty states, chips */
  --input:#ffffff;
  --line:#E2E8F0;
  --line-soft:#EDF1F6;
  --line-strong:#CBD5E1;
  --text:#152232;
  --text-soft:#4A5868;
  --muted:#7A8797;
  --heading:#0B3558;
  --brand:#1677B8;         /* primary buttons, selected states */
  --brand-hover:#0F5F96;
  --brand-wash:rgba(22,119,184,.09);
  --on-brand:#ffffff;
  --accent:#1677B8;        /* links, focus */
  --accent-wash:rgba(22,119,184,.08);
  --good:#149467;
  --bad:#C8384F;
  --warn-c:#B7791F;        /* muted amber, for warnings */
  --overlay:rgba(8,24,40,.55);
  --tip:#10202F;
  --shadow:0 1px 2px rgba(11,53,88,.05),0 6px 20px rgba(11,53,88,.06);
  --shadow-lg:0 20px 50px rgba(8,24,40,.25);

  /* The rail. A dark theme keeps its own dark rail; a light theme is navy. */
  --rail-text:#DCE7F2;
  --rail-muted:#91A8C0;
  --rail-hover:rgba(255,255,255,.07);
  --rail-active:rgba(59,150,214,.26);
  --rail-mark:#34C6D8;
  --rail-line:rgba(255,255,255,.12);

  /* Section colours: each screen and card takes one, so the treasurer knows
     where they are. People blue and teal, giving green, expenses and
     birthdays rose, the bank navy. A dark theme lifts them so they read. */
  --c-navy:#0B3558;
  --c-blue:#1677B8;
  --c-teal:#0EA5A8;
  --c-green:#149467;
  --c-rose:#E2556D;
  --c-oak:#A0773F;         /* muted gold */
  --c-amber:#C98A1B;
  --c-slate:#34506F;
  --c-plum:#6E5A9A;
}

/* ---- the themes ---- */
:root[data-theme="dark"]{
  --bg:#121417; --rail:#181b1f; --surface:#1b1e23; --surface-2:#23272d; --input:#15181c;
  --line:#2f343b; --line-soft:#262a30; --line-strong:#434a53; --text:#e9e7e2; --text-soft:#b0b5bd; --muted:#838a93;
  --heading:#e3e9f2; --brand:#3b82c4; --brand-hover:#4b93d4; --brand-wash:rgba(59,130,196,.16); --on-brand:#fff;
  --accent:#7db8ea; --accent-wash:rgba(125,184,234,.12); --good:#5fc08f; --bad:#ef8a9b; --warn-c:#e0b25a;
  --overlay:rgba(0,0,0,.66); --tip:#000; --shadow:0 4px 20px rgba(0,0,0,.35);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6);
  --rail-text:#c9ced6; --rail-muted:#8a919b; --rail-hover:rgba(255,255,255,.05); --rail-active:#262b33; --rail-mark:#7db8ea; --rail-line:#2a2f36;
  --c-navy:#3d5f91; --c-blue:#3b82c4; --c-teal:#1f9ea1; --c-green:#2f8f63; --c-rose:#c75a6d; --c-oak:#a47d4f; --c-amber:#b88627; --c-slate:#4f6385; --c-plum:#7f6a8c;
}
:root[data-theme="violet"]{
  --bg:#15111d; --rail:#1b1626; --surface:#1f1a2b; --surface-2:#2a2339; --input:#18131f;
  --line:#3a3150; --line-soft:#2d263d; --line-strong:#4d4268; --text:#ece8f6; --text-soft:#bdb4d1; --muted:#8f87a6;
  --heading:#e2d6ff; --brand:#7657d0; --brand-hover:#8a6de0; --brand-wash:rgba(118,87,208,.2); --on-brand:#fff;
  --accent:#c4a7ff; --accent-wash:rgba(196,167,255,.12); --good:#79c98a; --bad:#f08da4; --warn-c:#e3b866;
  --overlay:rgba(6,2,14,.7); --tip:#000; --shadow:0 4px 22px rgba(0,0,0,.4);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6);
  --rail-text:#d4cce6; --rail-muted:#968cb0; --rail-hover:rgba(255,255,255,.05); --rail-active:#2d2540; --rail-mark:#c4a7ff; --rail-line:#2d263d;
  --c-navy:#6247b8; --c-blue:#5a6fd0; --c-teal:#2f9aa0; --c-green:#3f8a63; --c-rose:#b4507a; --c-oak:#9a6fc9; --c-amber:#b08a3a; --c-slate:#5a5392; --c-plum:#8e5aa8;
}
:root[data-theme="graphite"]{
  --bg:#22262c; --rail:#282d34; --surface:#2b3037; --surface-2:#333941; --input:#252a30;
  --line:#434a54; --line-soft:#373d46; --line-strong:#56606c; --text:#e7eaee; --text-soft:#b6bec8; --muted:#8f98a3;
  --heading:#e4ebf2; --brand:#5d7488; --brand-hover:#6e869b; --brand-wash:rgba(93,116,136,.25); --on-brand:#fff;
  --accent:#a9bccd; --accent-wash:rgba(169,188,205,.12); --good:#8cc281; --bad:#e2939f; --warn-c:#d8b36a;
  --overlay:rgba(0,0,0,.62); --tip:#111; --shadow:0 4px 20px rgba(0,0,0,.3);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);
  --rail-text:#cfd5dc; --rail-muted:#939ba5; --rail-hover:rgba(255,255,255,.05); --rail-active:#353b43; --rail-mark:#a9bccd; --rail-line:#373d46;
  --c-navy:#4d6275; --c-blue:#4f7596; --c-teal:#3f8586; --c-green:#4d7555; --c-rose:#8f5c66; --c-oak:#7c6a58; --c-amber:#94783f; --c-slate:#5b6674; --c-plum:#6d6078;
}
:root[data-theme="ocean"]{
  --bg:#eef5f9; --rail:#0b4f7c; --surface:#ffffff; --surface-2:#f2f8fb; --input:#ffffff;
  --line:#d3e2eb; --line-soft:#e5eef4; --line-strong:#b9cfdc; --text:#0f2433; --text-soft:#48626f; --muted:#7b93a0;
  --heading:#0b4f7c; --brand:#0e6ba8; --brand-hover:#0a5689; --brand-wash:rgba(14,107,168,.09); --on-brand:#fff;
  --accent:#0e6ba8; --accent-wash:rgba(18,135,158,.09); --good:#2a7a4b; --bad:#b5485d; --warn-c:#a8741c;
  --overlay:rgba(8,32,48,.5); --tip:#0f2433; --shadow:0 4px 20px rgba(14,107,168,.10);
  --shadow-lg:0 18px 50px rgba(8,32,48,.25);
  --rail-text:#dcecf6; --rail-muted:#9dc0d6; --rail-hover:rgba(255,255,255,.08); --rail-active:rgba(255,255,255,.16); --rail-mark:#6fd6e3; --rail-line:rgba(255,255,255,.14);
  --c-navy:#0e6ba8; --c-blue:#1d87c6; --c-teal:#12879e; --c-green:#2a7a4b; --c-rose:#b5485d; --c-oak:#9a7a44; --c-amber:#a8741c; --c-slate:#38627d; --c-plum:#5b5f9e;
}
:root[data-theme="midnight"]{
  --bg:#0a1120; --rail:#0e1628; --surface:#111a2c; --surface-2:#18233a; --input:#0d1526;
  --line:#243150; --line-soft:#1b2640; --line-strong:#33446a; --text:#e6ecf5; --text-soft:#a9b8cf; --muted:#7a8ca8;
  --heading:#d4e3ff; --brand:#2f6fd6; --brand-hover:#4381e6; --brand-wash:rgba(47,111,214,.2); --on-brand:#fff;
  --accent:#8db5f2; --accent-wash:rgba(141,181,242,.12); --good:#6fc28f; --bad:#ee8b9b; --warn-c:#d4a95c;
  --overlay:rgba(0,4,12,.72); --tip:#000; --shadow:0 4px 22px rgba(0,0,0,.45);
  --shadow-lg:0 18px 50px rgba(0,0,0,.65);
  --rail-text:#c8d4e8; --rail-muted:#7f91ae; --rail-hover:rgba(255,255,255,.05); --rail-active:#18233a; --rail-mark:#8db5f2; --rail-line:#1b2640;
  --c-navy:#2659b3; --c-blue:#2f6fd6; --c-teal:#1f8f9a; --c-green:#2f7d58; --c-rose:#b3506a; --c-oak:#a8813f; --c-amber:#a8813f; --c-slate:#3f5a8a; --c-plum:#6f5b9c;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:400 16px/24px var(--sans)}
h1,h2,h3,.serif{font-family:var(--serif)}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shell ----------
   A deep navy rail on the left and the working area beside it. Below
   1024px the rail becomes a drawer, opened from the menu button in the top
   bar, so the content never has to squeeze beside it. */
.shell{display:flex;min-height:100vh;align-items:stretch}
.masthead{flex:0 0 244px;width:244px;background:var(--rail);color:var(--rail-text);
  display:flex;flex-direction:column;padding:24px 0 18px;position:sticky;top:0;height:100vh;z-index:50}
.mh-top{padding:0 20px 22px}
.mh-id{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;text-align:center}
.mh-logo{width:56px;height:56px;flex:0 0 auto;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.08);padding:4px}
/* A long organization name has to fit the rail without becoming a paragraph. */
.masthead h1{margin:0;font-family:var(--sans);font-size:19px;line-height:24px;
  font-weight:700;color:#fff;letter-spacing:-.005em;overflow-wrap:anywhere}
.masthead .sub{margin:3px 0 0;font-size:13px;line-height:18px;color:var(--rail-muted)}
.masthead .mh-tagline{margin:4px 0 0;font-size:13.5px;line-height:18px;color:var(--rail-text);letter-spacing:.02em}
.tabs{display:flex;flex-direction:column;gap:3px;padding:6px 12px;overflow-y:auto;scrollbar-width:none;flex:1 1 auto}
/* Always show a thin scroll bar, so nobody misses that Settings is below on a short window. */
.tabs{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.tabs::-webkit-scrollbar{width:6px}
.tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:6px}
.tab{display:flex;align-items:center;gap:13px;width:100%;min-height:46px;text-align:left;border:0;background:none;
  color:var(--rail-text);padding:10px 14px;font-family:var(--sans);font-size:15.5px;font-weight:500;
  border-radius:10px;cursor:pointer;white-space:nowrap;position:relative}
/* (After .tab, so they win.) On a short window the rail tightens up so every screen, Settings included, fits without scrolling. */
@media(max-height:1020px){
  .tab{min-height:38px;padding:6px 14px}.tabs{gap:2px}
}
@media(max-height:860px){
  .masthead{padding:14px 0 10px}.mh-top{padding:0 18px 10px}.mh-logo{width:44px;height:44px}
  .tab{min-height:33px;padding:4px 14px}.tabs{gap:1px}
  .mh-foot{padding-top:8px}.mh-foot .credit{padding-top:8px}
}
@media(max-height:740px){
  .mh-logo{display:none}.masthead .mh-tagline{display:none}.tab{min-height:32px;padding:3px 14px}
}
.tab:hover{background:var(--rail-hover);color:#fff}
.tab[aria-selected="true"]{background:var(--rail-active);color:#fff;font-weight:600}
.tab[aria-selected="true"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;
  width:4px;background:var(--rail-mark);border-radius:0 3px 3px 0}
.tab:focus-visible{outline:2px solid var(--rail-mark);outline-offset:-2px}
.tab .ic{width:21px;height:21px;flex:0 0 auto;opacity:.85}
.tab[aria-selected="true"] .ic{opacity:1;color:var(--rail-mark)}
.rq-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--c-rose);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.subtab .rq-badge{margin-left:8px;display:inline-block}
.mh-foot{margin-top:auto;padding:14px 22px 0}
.mh-foot .credit{border-top:1px solid var(--rail-line);padding:14px 0 0;text-align:left;color:var(--rail-muted);
  font-size:10.5px;letter-spacing:.08em;white-space:nowrap}
.mh-foot .credit b{color:var(--rail-text);font-weight:600}
.mh-ver{margin:4px 0 0;font-size:11px;letter-spacing:.06em;color:var(--rail-muted)}
.masthead .sub{display:none}
.plan-badge{margin-top:8px}
.nav-close{display:none}

/* The settings sections, nested right under the Settings row in this same
   drawer on a tablet or a phone (built in app.js from .snav-list, so a
   section hidden from a role is hidden here too). A wide screen never sees
   this: the rail there is permanent, not a drawer, and its own .snav-list
   beside the page handles switching sections. */
.tab-subnav{display:none}
@media(max-width:1023px){
  .tab-subnav{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 18px;padding-left:12px;border-left:2px solid var(--rail-line)}
  .tab-subnav:empty{display:none}
  /* Reports' list goes with its tab: hidden for anyone who may not open it. */
  .tab[hidden] + .tab-subnav{display:none}
  .tab-subnav .sub-item{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;text-align:left;border:0;background:none;
    color:var(--rail-muted);padding:8px 12px;font:500 14px/1.3 var(--sans);border-radius:8px;cursor:pointer}
  .tab-subnav .sub-item:hover{background:var(--rail-hover);color:#fff}
  .tab-subnav .sub-item[aria-selected="true"]{background:var(--rail-active);color:#fff;font-weight:600}
  .tab-subnav .sub-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
  .tab-subnav .sub-item[aria-selected="true"] svg{opacity:1;color:var(--rail-mark)}
}

/* The top bar: which screen, the date, and who is signed in. */
.topbar{display:flex;align-items:flex-start;gap:16px;margin:0 0 24px}
.nav-toggle{display:none;flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--heading);cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ph-right{margin-left:auto;display:flex;align-items:center;gap:18px;flex:0 0 auto;padding-top:14px}
.ph-date{font-size:15px;color:var(--text-soft);white-space:nowrap}
.ph-sep{width:1px;height:34px;background:var(--line)}
.profile{position:relative}
.profile-btn{display:flex;align-items:center;gap:12px;background:none;border:0;padding:4px 6px;border-radius:12px;cursor:pointer;text-align:left;min-height:44px}
.profile-btn:hover{background:var(--surface-2)}
.profile-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--c-teal);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;background:#fff}
.pf-name{display:block;font-weight:700;color:var(--heading);font-size:15px;line-height:20px;max-width:190px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-role{display:block;font-size:13px;color:var(--text-soft);line-height:18px}
.pf-chev{width:18px;height:18px;color:var(--text-soft)}
.profile-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;z-index:70}
.pm-who{padding:10px 12px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.pm-who b{display:block;color:var(--heading)}
.pm-who span{font-size:13px;color:var(--text-soft)}
.profile-menu button{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;padding:11px 12px;border-radius:10px;
  cursor:pointer;text-align:left;font-size:15px;color:var(--text);min-height:44px}
.profile-menu button:hover,.profile-menu button:focus-visible{background:var(--surface-2);outline:0}
.profile-menu svg{width:18px;height:18px;color:var(--text-soft)}

/* The secretary sees no money anywhere, and a read-only account sees no
   controls that would change anything. */
body.no-money .money-only{display:none !important}
body.read-only .write-only{display:none !important}

/* organization logo */
.logo-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-top:4px}
.logo-preview{width:112px;height:112px;object-fit:contain;background:var(--surface-2);
  border:1px solid var(--line);border-radius:14px;padding:10px}
.card-logo{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 14px}
.steps{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin:0 0 6px;text-align:center}

/* clip, not hidden: hidden would make <main> a scroll box and stop position:sticky inside it working */
main{flex:1;min-width:0;overflow-x:clip}
.sheet{max-width:1880px;margin:0 auto;padding:26px clamp(20px,2.4vw,44px) 40px}
.panel{display:none}
.panel.on{display:block}
.credit{text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:8px 12px 28px}
.instid{display:block;font-family:var(--mono);letter-spacing:0;text-transform:none;font-size:12px}
/* The credit lives in the rail on a wide screen, under the content in a drawer layout. */
.mobile-credit{display:none}
.nav-scrim{display:none}

@media(max-width:1023px){
  .masthead{position:fixed;left:0;top:0;bottom:0;height:auto;transform:translateX(-102%);
    transition:transform .2s ease;box-shadow:var(--shadow-lg);overflow-y:auto}
  body.nav-open .masthead{transform:none}
  body.nav-open .nav-scrim{display:block;position:fixed;inset:0;background:var(--overlay);z-index:45}
  .nav-toggle{display:inline-flex}
  .nav-close{display:flex;position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:10px;
    background:rgba(255,255,255,.08);color:#fff;cursor:pointer;align-items:center;justify-content:center}
  .nav-close svg{width:20px;height:20px}
  .masthead{padding-top:18px}
  .mh-top{padding-bottom:14px}
  .mh-logo{width:44px;height:44px}
  .masthead h1{font-size:17px;line-height:22px}
  .tab{min-height:44px;padding:8px 14px}
  .sheet{padding:18px 20px 30px}
  .mobile-credit{display:block}
}
@media(max-width:720px){
  .topbar{flex-wrap:wrap;gap:12px}
  .ph-right{padding-top:0;gap:10px;order:2;margin-left:auto}
  .ph-date,.ph-sep,.pf-text,.pf-chev{display:none}
  #page-head{order:3;flex-basis:100%}
  .sheet{padding:14px 16px 26px;padding-bottom:calc(26px + 62px + env(safe-area-inset-bottom))}
}

/* ---------- mobile tab bar ----------
   A phone's and a tablet's main navigation (anything narrower than the
   permanent rail, so an iPad looks like the phone): flush to the bottom edge, full width, no gap
   on any side and no floating pill — a fixed bar, not a card. It reuses the
   same .tab elements and data-p attributes as the rail (App.showPanel,
   Auth.applyRole's role-based hiding), so a tab here is never out of step
   with the rail; only its own look is overridden below. "More" is not a
   screen of its own: it opens the same drawer the rail collapses into on a
   narrower window, which already lists every destination. */
.mobile-tabbar{display:none}
@media(max-width:1023px){
  .sheet{padding-bottom:calc(30px + 62px + env(safe-area-inset-bottom))}
  /* The drawer's foot (the credit and version) stays clear of the bar. */
  .masthead{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .mobile-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--surface);border-top:1px solid var(--line);
    padding:6px max(2px, calc((100% - 720px) / 2)) calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(11,53,88,.07)}
  .mobile-tabbar .tab,.mobile-tabbar .mtb-more{flex:1 1 0;min-width:0;position:static;min-height:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;border-radius:10px;border:0;background:none;color:var(--text-soft);
    font:650 10.5px/1.1 var(--sans);letter-spacing:0}
  .mobile-tabbar .tab::before{display:none}
  .mobile-tabbar .tab .ic,.mobile-tabbar .mtb-more svg{width:22px;height:22px;opacity:1}
  .mobile-tabbar .tab[aria-selected="true"]{background:none;color:var(--brand)}
  .mobile-tabbar .tab .tl{display:block;line-height:1}
  body.nav-open .mobile-tabbar .mtb-more{color:var(--brand)}
}

/* ---------- the page heading ----------
   Every screen opens with a small eyebrow saying which part of the work it
   belongs to, its name, and one warm line saying what it is for. */
.page-head{min-width:0;flex:1 1 auto}
.page-head .ph-eyebrow{margin:0 0 2px;font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--text-soft)}
.page-head h1{margin:0;font-family:var(--serif);font-size:34px;line-height:42px;font-weight:700;
  color:var(--heading);letter-spacing:-.015em;overflow-wrap:anywhere}
.page-head p.ph-lead{margin:4px 0 0;font-size:16.5px;color:var(--text-soft)}
@media(max-width:720px){.page-head h1{font-size:27px;line-height:34px}.page-head p.ph-lead{font-size:15px}}

/* ---------- cards ----------
   Every section is a white card. Its colour is a small mark beside the
   title and the tint of its icon, never a heavy bar over the whole card.
   --hl picks the colour. .flush drops the padding for a table or list that
   runs edge to edge. */
.block{--hl:var(--c-navy);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);margin:0 0 20px;overflow:visible}
.block-hd{display:flex;align-items:center;gap:10px;color:var(--heading);
  font-family:var(--sans);font-size:17px;font-weight:700;padding:16px 20px 4px;position:relative}
.block-hd::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--hl);flex:0 0 auto}
.block-hd svg{width:18px;height:18px;flex:0 0 auto;color:var(--hl)}
.block-hd .aside{margin-left:auto;font-weight:500;font-size:14px;color:var(--text-soft)}
.block-bd{padding:12px 20px 6px}
.block-bd.flush{padding:6px 0 0}
.block-bd.flush > .stack,.block-bd.flush > table.led,.block-bd.flush > div > .stack,
.block-bd.flush > div > table.led{border:0;border-radius:0}
.block-bd.flush > .empty,.block-bd.flush > div > .empty{border:0;border-radius:0 0 var(--r-card) var(--r-card);margin:0}
.block-bd > .btnrow:last-child{margin-bottom:14px}
.block-bd > .hint:first-child{margin-top:0;margin-bottom:12px}
.block-foot{padding:12px 20px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;
  gap:8px;align-items:center}
.blocks2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start}
@media(max-width:900px){.blocks2{grid-template-columns:minmax(0,1fr)}}
.block-bd.flush table.led tr:last-child td{border-bottom:0}

/* ---------- stat cards (screens other than Home) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 20px}
.stat{--sc:var(--c-navy);background:var(--surface);border:1px solid var(--line);text-align:left;
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:16px 18px}
.stat .st-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.stat .st-ic{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;color:#fff;background:var(--sc)}
.stat .st-ic svg{width:18px;height:18px}
.stat .st-k{font-size:14px;font-weight:600;color:var(--text-soft);line-height:18px}
.stat .st-v{font-family:var(--serif);font-size:32px;line-height:38px;font-weight:700;color:var(--heading)}
.stat .st-v.money{font-family:var(--sans);font-size:26px;letter-spacing:-.01em}
.stat .st-n{font-size:14px;color:var(--text-soft);margin-top:2px}
.stat[data-go]{cursor:pointer}
.stat[data-go]:hover{border-color:var(--sc)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);font-weight:700;margin:28px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.eyebrow:first-child{margin-top:0}
.hint{font-size:15px;line-height:23px;color:var(--text-soft);margin:8px 0 0}
.hint b{color:var(--text);font-weight:600}
.empty{padding:26px;text-align:center;color:var(--text-soft);background:var(--surface-2);
  border:1px dashed var(--line-strong);border-radius:12px;font-size:15px}

/* ---------- forms ----------
   Labels above controls; every control at least 44px tall. */
.fld{display:block;margin:0 0 16px}
.fld>span{display:block;font-family:var(--sans);font-size:14.5px;line-height:20px;
  font-weight:600;color:var(--heading);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--input);font-size:16px;color:var(--text)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--bad)}
.fld-err{display:block;margin-top:6px;font-size:14px;color:var(--bad);font-weight:600}
.fld-err:empty{display:none}
.fld-help{display:block;margin-top:6px;font-size:13.5px;color:var(--text-soft);font-weight:400;letter-spacing:0}
.fld textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px}
@media(max-width:900px){.row4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.row2,.row3,.row4{grid-template-columns:1fr}}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
/* Primary is FlowView blue. Secondary is a quiet outline. Destructive actions
   are red text, so nobody deletes by reflex. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);padding:10px 20px;
  border-radius:var(--radius);font-family:var(--sans);font-size:15px;letter-spacing:.01em;
  font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s;text-decoration:none}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.primary{background:var(--brand);border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.ghost{background:var(--surface);color:var(--heading);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--brand)}
.btn.danger{background:none;border-color:transparent;color:var(--bad);text-decoration:underline;
  padding-left:10px;padding-right:10px}
.btn.danger:hover{background:rgba(200,56,79,.08)}
.btn.danger-solid{background:var(--bad);border-color:var(--bad);color:#fff;text-decoration:none}
.btn.danger-solid:hover{filter:brightness(.92)}
.btn.tiny{min-height:36px;padding:6px 13px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn svg{width:18px;height:18px}
.linkbtn{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;
  padding:2px 0;font-size:14px}
.check{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-soft);
  margin:2px 0 14px;cursor:pointer;min-height:32px}
.check input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}

/* ---------- name picker ---------- */
.row-name{display:grid;grid-template-columns:1fr 210px;gap:0 14px;align-items:start}
@media(max-width:640px){.row-name{grid-template-columns:1fr}}
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--surface);
  border:1px solid var(--text-soft);border-top:0;max-height:300px;overflow-y:auto;display:none;
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg)}
.combo-list.on{display:block}
.combo-list button{display:block;width:100%;text-align:left;border:0;background:var(--surface);
  padding:10px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.combo-list button:nth-child(even){background:var(--surface-2)}
.combo-list button:hover,.combo-list button:focus{background:var(--brand);color:var(--on-brand);outline:0}
.combo-list .none{padding:10px 12px;font-size:13px;color:var(--text-soft)}
.combo-list .sec{padding:7px 12px 5px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--text-soft);background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
/* The two ways to put a new name on the roll, side by side, so the
   treasurer decides member or visitor rather than getting one by default. */
.combo-list .addrow{display:flex;gap:0;border-top:1px solid var(--line)}
.combo-list .addrow button,.combo-list .addrow button:nth-child(even){flex:1;border-bottom:0;font-weight:600;
  color:var(--accent);background:var(--surface);text-align:center}
.combo-list .addrow button + button{border-left:1px solid var(--line-soft)}
.combo-list .dim{opacity:.62}
.picked{display:flex;align-items:center;gap:12px;background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px}
.picked b{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--heading)}
.picked button{margin-left:auto;background:none;border:0;color:var(--accent);
  text-decoration:underline;cursor:pointer;font-size:14px}
.just{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--good);border-radius:var(--radius);
  padding:12px 16px;margin:16px 0 0;box-shadow:var(--shadow)}
.just .jk{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--good)}
.just .jv{font-size:15px}
.just .jv b{font-family:var(--mono);font-weight:700}
.just button{margin-left:auto}

/* ---------- the amount boxes ---------- */
.headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
/* --hl is set per fund from CONFIG.headlineColors, so Tithe, Offering and
   Building are told apart by colour before the label is read. */
.hl-cell{--hl:var(--c-navy);border:1px solid var(--line);border-top:3px solid var(--hl);
  border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.hl-cell label{display:block;background:var(--hl);color:#fff;font-family:var(--sans);
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding:9px 14px}
.hl-cell .moneybox input:focus{outline-color:var(--hl)}
.moneybox{display:flex;align-items:stretch}
.moneybox .cur{display:flex;align-items:center;padding:0 12px;background:var(--surface-2);
  border-right:1px solid var(--line);color:var(--text-soft);font-weight:600}
.moneybox input{flex:1;border:0;padding:14px;text-align:right;font-size:22px;
  font-family:var(--mono);background:var(--input);color:var(--text);min-width:0}
.moneybox input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.fundgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:10px}
.fundrow{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:var(--radius);padding:7px 10px;background:var(--surface)}
.fundrow span{flex:1;font-size:13px;min-width:0}
.fundrow input{width:7.4em;text-align:right;padding:7px 9px;border:1px solid var(--line);
  border-radius:var(--radius);font-family:var(--mono);background:var(--input)}
.tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--heading);
  margin-top:22px;padding-top:14px}
.tot .lab{font-family:var(--sans);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;color:var(--text-soft)}
.tot .val{font-size:30px;font-weight:400;font-family:var(--mono);color:var(--heading)}

/* ---------- full size photo ---------- */
.photoveil{align-items:center;background:rgba(12,18,24,.88)}
.photoview{max-width:min(94vw,1000px);margin:auto}
.photoview img{max-width:100%;max-height:76vh;display:block;margin:0 auto;
  border-radius:var(--radius);background:#fff}
.pv-bar{display:flex;align-items:center;gap:10px;margin-top:14px;color:#fff}
.pv-bar b{font-size:15px}

/* ---------- lists ---------- */
.stack{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface)}
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface-2)}
.item b{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--heading)}
.item .meta{font-size:14px;color:var(--text-soft);margin-top:2px}

/* ---------- household shading on the Members list ----------
   Everyone in one household shares one very light shade, chosen from the family
   name (see householdIndex in members.js), never from the row. A dot in the same
   colour sits beside the family name, which is always written out too. Nobody
   without a family keeps the plain row. Hover deepens the household's own shade;
   an opened row gets an outline, so selection is not carried by colour alone. */
/* The Members list: one compact line per person, about 30px tall. */
.mlist .mrow{display:grid;grid-template-columns:24px minmax(0,max-content) minmax(0,1fr) auto;gap:10px;align-items:center;padding:3px 12px;min-height:30px;line-height:20px}
.mlist .mrow b{font-size:15px}
.mlist .mr-name{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.mlist .mr-name b{overflow:hidden;text-overflow:ellipsis}
.mlist .mr-name .tag,.mlist .mr-meta .tag{margin:0;font-size:11px;padding:1px 7px;line-height:16px}
.mlist .mr-meta{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mlist .mr-meta .tag{margin-left:4px}
.mlist .btn.tiny{padding:1px 10px;min-height:22px;font-size:12.5px;line-height:18px}
.mlist .av-xs{width:24px;height:24px;border-radius:50%;object-fit:cover}
.mlist .mrow.alt{background:var(--stripe)}
.mlist .mrow.alt:hover{background:var(--stripe-hover)}
@media (max-width:640px){.mlist .mrow{grid-template-columns:24px minmax(0,1fr) auto;row-gap:0;padding:4px 12px}.mlist .mr-meta{line-height:18px}.mlist .mr-meta{grid-column:2 / 3;grid-row:2}.mlist .mrow .btn{grid-row:1 / span 2;grid-column:3}}
.item.hh{background:var(--hh-bg)}
.item.hh:hover{background:color-mix(in srgb,var(--hh) 9%,var(--hh-bg))}
.item.hh-0{--hh:#4A90E2;--hh-bg:#F1F6FC}
.item.hh-1{--hh:#B88935;--hh-bg:#FBF7EF}
.item.hh-2{--hh:#5EAA8B;--hh-bg:#F2F7F3}
.item.hh-3{--hh:#8B72C5;--hh-bg:#F5F3F8}
.item.hh-4{--hh:#C77C86;--hh-bg:#FBF3F3}
.item.hh-5{--hh:#71869D;--hh-bg:#F2F5F8}
:root[data-theme="dark"],:root[data-theme="violet"],:root[data-theme="graphite"],:root[data-theme="midnight"]{
  --total-bg:color-mix(in srgb,var(--c-blue) 32%,var(--surface));--total-ink:var(--heading);--total-line:var(--c-blue)}
:root[data-theme="dark"] .item.hh,:root[data-theme="violet"] .item.hh,
:root[data-theme="graphite"] .item.hh,:root[data-theme="midnight"] .item.hh{--hh-bg:color-mix(in srgb,var(--hh) 13%,var(--surface))}
:root[data-theme="dark"] .item.hh:hover,:root[data-theme="violet"] .item.hh:hover,
:root[data-theme="graphite"] .item.hh:hover,:root[data-theme="midnight"] .item.hh:hover{background:color-mix(in srgb,var(--hh) 22%,var(--surface))}
.item[data-open]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.item[aria-selected="true"]{outline:2px solid var(--brand);outline-offset:-2px}
.hh-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--hh,transparent);
  margin-right:6px;vertical-align:baseline;position:relative;top:0}
@media(forced-colors:active){
  .item.hh,.item.hh:hover{background:Canvas}
  .hh-dot{background:CanvasText;forced-color-adjust:none}
  .item[aria-selected="true"],.item[data-open]:focus-visible{outline:2px solid Highlight}
}
.tag{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.04em;
  font-weight:600;padding:1px 9px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--text-soft);margin-left:8px;vertical-align:middle;line-height:20px}
.tag.good{background:rgba(45,90,39,.12);border-color:transparent;color:var(--good)}
.tag.warn{background:rgba(166,77,93,.12);border-color:transparent;color:var(--bad)}
.tag.dept{background:var(--accent-wash);border-color:transparent;color:var(--accent);margin-left:0;margin-right:5px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
/* Reports > Forecast */
.fc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fc-top .hint{margin:0}
.fc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.fc-card{background:var(--surface,#fff);border:1px solid var(--line,#E3E8EE);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.fc-card span{font-size:12px;color:var(--muted,#5A6776)}
.fc-card b{font-size:22px;font-family:var(--serif,Georgia,serif)}
.fc-card small{font-size:12px;color:var(--muted,#5A6776)}
.fc-h{margin:20px 0 8px;font-size:16px}
.fc-chart svg{width:100%;height:auto;display:block;border:1px solid var(--line,#E3E8EE);border-radius:10px}
.fc-scroll{overflow-x:auto}
.fc-soft{color:var(--muted,#5A6776);font-size:12px}
.fc-watch{margin:0;padding-left:20px;line-height:1.6}
.fc-note{margin-top:16px}
/* Rows tint on hover, to help the eye track across columns. */
table.led{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface)}
table.led th{text-align:left;font-family:var(--sans);font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-soft);font-weight:600;padding:10px 12px;
  border-bottom:1px solid var(--heading);background:var(--surface)}
table.led td{padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
/* Every other row shaded, so a line of figures is easy to follow across.
   Mixed from the theme's own colours, so it works in every theme; the
   hover stays the stronger of the two. */
table.led tbody tr:nth-child(even):not(.total) td{background:var(--stripe)}
table.led tbody tr:hover td,table.led tbody tr:nth-child(even):not(.total):hover td{background:var(--stripe-hover)}
table.led td.num,table.led th.num{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums}
table.led th.num{font-family:var(--sans)}
table.led tr.total td{border-top:2px solid var(--total-line);border-bottom:0;font-weight:700;
  background:var(--total-bg);color:var(--total-ink)}
table.led tr.total:hover td{background:var(--total-bg)}
table.led .meta{font-size:13px;color:var(--text-soft);font-family:var(--sans)}
.scroller{max-height:440px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius)}

/* ---------- flags ---------- */
.flag{background:var(--accent-wash);border-left:3px solid var(--accent);padding:13px 16px;
  font-size:15px;line-height:23px;margin:14px 0;border-radius:0 var(--radius) var(--radius) 0}
.flag.good{background:rgba(20,148,103,.10);border-left-color:var(--good)}
.flag.bad{background:rgba(200,56,79,.08);border-left-color:var(--bad)}
.flag.info{background:var(--surface-2);border-left-color:var(--heading)}
/* Settings, Billing */
.bill-state{border:1px solid var(--line);border-left:4px solid var(--heading);border-radius:10px;padding:16px 18px;margin:0 0 14px;background:var(--surface)}
.bill-state h3{margin:0 0 6px;font-size:18px}
.bill-state p{margin:0}
.bill-state.good{border-left-color:var(--good);background:rgba(45,90,39,.07)}
.bill-state.warn{border-left-color:var(--accent);background:var(--accent-wash)}
.bill-state.bad{border-left-color:var(--bad);background:rgba(166,77,93,.08)}
.bill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0 14px}
.bill-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface);margin:0 0 14px}
.bill-grid .bill-card{margin:0}
.bill-card h4{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bill-card .btn{margin-top:10px}
.bill-facts{margin:0}
.bill-facts>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line-soft)}
.bill-facts>div:first-child{border-top:0}
.bill-facts dt{color:var(--muted)}
.bill-facts dd{margin:0;text-align:right;font-weight:600}
.bill-foot{justify-content:flex-end}
.bill-list{margin:0 0 18px;padding-left:20px;line-height:1.55}
.bill-list li{margin-bottom:6px}
.tbl-wrap{overflow-x:auto}
.bill-table td,.bill-table th{white-space:nowrap}
.bill-table td:nth-child(2){white-space:normal}
.hint.small{font-size:13px}
.btn.danger-text{color:var(--bad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- birthdays ---------- */
.bday-hero{background:var(--c-navy);color:#fff;border-radius:var(--radius);padding:26px 30px;
  margin-bottom:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.bday-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:190px;height:190px;
  border-radius:50%;background:rgba(201,160,106,.22)}
.bday-hero .kicker{font-family:var(--sans);font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:600;color:#e4c89e;margin:0 0 6px}
.bday-hero h2{margin:0 0 6px;font-family:var(--serif);font-size:32px;line-height:40px;
  font-weight:700;letter-spacing:-.01em;position:relative}
.bday-hero p{margin:0;opacity:.85;font-size:16px;position:relative}
.bday-people{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;position:relative}
.bday-person{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:6px 18px 6px 6px}
.bday-person .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
.bday-person b{display:block;font-family:var(--serif);font-size:16px;font-weight:600}
.bday-person span{font-size:13px;opacity:.8}
.up-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.block-bd .up-list{margin-bottom:14px}
.up-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;background:var(--surface);transition:border-color .12s}
.up-card:hover{border-color:var(--accent)}
/* The accent marks the ones close enough to act on this week. */
.up-card.soon{border-left:3px solid var(--accent);background:var(--surface-2)}
.up-card .av{width:46px;height:46px;border-radius:50%;flex:0 0 auto}
.up-card b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--heading)}
.up-card .when{font-size:14px;color:var(--text-soft)}
.up-card .when.now{color:var(--accent);font-weight:600}

/* ---------- photos ---------- */
.av{object-fit:cover;background:var(--line-soft);display:block}
.av-lg{width:104px;height:104px;border-radius:var(--radius)}
.av-sm{width:40px;height:40px;border-radius:50%}
.av-xs{width:30px;height:30px;border-radius:50%}
.photo-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.photo-cell{position:relative;width:104px;height:104px}
.photo-cell img{width:104px;height:104px;border-radius:var(--radius);object-fit:cover;
  border:1px solid var(--line)}
.photo-cell button{position:absolute;top:-7px;right:-7px;width:23px;height:23px;border-radius:50%;
  border:0;background:var(--bad);color:#fff;font-size:13px;line-height:23px;cursor:pointer;padding:0}

/* ---------- member detail ---------- */
.mem-head{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.mem-head h2{margin:0 0 4px;font-family:var(--serif);font-size:32px;line-height:40px;
  font-weight:600;color:var(--heading)}
.mem-facts{font-size:15px;color:var(--text-soft);line-height:1.8}
.mem-facts b{color:var(--heading);font-weight:600}
.family-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.family-chip{font-size:14px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:5px 14px;cursor:pointer}
.family-chip:hover{border-color:var(--accent);color:var(--accent)}
.fam-photo{width:100%;max-width:340px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);display:block;margin-top:10px}

/* ---------- editor sections ---------- */
.ed-sec{border:1px solid var(--line);border-top:3px solid var(--hl,var(--c-navy));
  border-radius:var(--radius);margin:18px 0 0;background:var(--surface)}
.ed-sec > .ed-hd{background:var(--hl,var(--c-navy));color:#fff;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;padding:7px 14px;margin-top:-1px}
.ed-sec > .ed-bd{padding:14px 14px 2px}

/* The Add / Edit member screen used to be a small fixed-size dialog floating
   over everything, hard to read and worse to type in on a small screen. It
   is now a page like any other: #p-member-edit is an ordinary .panel, opened
   and closed the same way Home, Members and the rest are (Members.openEditor
   / showEditorPanel in app.js), and it scrolls with the page instead of in a
   440px box. Bigger fields and bolder labels here on purpose, closer to the
   public membership form's own look, because this screen is filled in by
   hand far more often than most. */
#p-member-edit{max-width:840px}
.ed-top{padding:0 0 8px}
.ed-back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0 0 12px;
  font:600 14.5px var(--sans);color:var(--text-soft);cursor:pointer}
.ed-back:hover{color:var(--heading)}
.ed-back:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.ed-back svg{width:17px;height:17px}
.ed-top .lead{margin:0 0 14px}
.ed-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  background:var(--brand-wash);border-radius:12px 12px 0 0;padding:6px 8px 0}
.ed-tab{flex:0 0 auto;border:0;background:none;padding:11px 16px;font:600 15px var(--sans);color:var(--text-soft);
  cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ed-tab:hover{color:var(--heading)}
.ed-tab[aria-selected="true"]{color:var(--heading);border-bottom-color:var(--c-blue);background:var(--surface);border-radius:10px 10px 0 0}
.ed-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:6px}
.ed-scroll{padding:14px 0 0}
.ed-scroll [data-tab]{display:none}
.ed-scroll [data-tab].on{display:block}
.ed-scroll .ed-notes{margin-top:16px}
#p-member-edit .fld>span{font-weight:700;font-size:15px}
#p-member-edit .fld input,#p-member-edit .fld select,#p-member-edit .fld textarea{min-height:50px;font-size:16px;border-width:1.5px}
.ed-foot{position:sticky;bottom:0;margin:22px 0 0;padding:14px 0;border-top:1px solid var(--line);
  background:var(--surface);z-index:2}
@media(max-width:560px){.ed-foot{padding:12px 0}.ed-foot .btn{flex:1 1 auto}}

/* ---------- the family panel ---------- */
.fam-panel{margin:2px 0 14px}
.fam-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fam-row{display:grid;grid-template-columns:30px minmax(0,1fr) 170px auto;gap:10px;align-items:center;
  padding:8px 10px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.fam-row:last-child{border-bottom:0}
.fam-row.me{background:var(--surface-2)}
.fam-row.gone{opacity:.5}
.fam-row.gone .fr-name{text-decoration:line-through}
.fam-row .fr-name{font-weight:600;color:var(--heading);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam-row .fr-name small{display:block;font-weight:400;color:var(--text-soft);font-size:12px}
.fam-row select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--input);font-size:14px;width:100%}
.fam-add{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;gap:10px;align-items:start;margin-top:10px}
.fam-add select{padding:11px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--input)}
@media(max-width:640px){
  .fam-row{grid-template-columns:30px minmax(0,1fr) auto}
  .fam-row select{grid-column:2 / 4}
  .fam-add{grid-template-columns:1fr}
}
.fam-addbox{border:1px solid var(--line);border-left:3px solid var(--c-oak);border-radius:var(--radius);
  background:var(--surface-2);padding:10px 12px 12px;margin-top:12px}
.fam-addtitle{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--heading);margin:0 0 8px}
.fam-add2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) 150px 58px auto;gap:8px;align-items:end}
.fam-add2 .fld{margin:0}
.fam-add2 .fld>span{font-size:12px;letter-spacing:.03em;margin-bottom:4px}
.fam-add2 .fld input,.fam-add2 .fld select{padding:9px 10px;font-size:15px}
.fam-add2 .btn{padding:10px 18px}
.fam-pic{width:44px;height:44px;border-radius:50%;border:1px dashed var(--text-soft);background:var(--input);
  padding:0;overflow:hidden;cursor:pointer;display:block}
.fam-pic img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.fam-pic.on{border-style:solid;border-color:var(--accent)}
.fam-pic.on img{opacity:1}
@media(max-width:640px){.fam-add2{grid-template-columns:1fr 1fr}.fam-add2 .fld:first-child{grid-column:1 / 3}}
.fam-photo-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.fam-photo-row img{width:120px;height:90px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface-2)}

/* ---------- toggle chips (departments) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);
  border-radius:99px;padding:5px 13px;font-size:14px;cursor:pointer;user-select:none;color:var(--text-soft)}
.chip input{display:none}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.add{border-style:dashed;color:var(--accent)}
.chip-new{display:flex;gap:8px;margin-top:10px}
.chip-new input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--input)}

/* ---------- the log ---------- */
.lg-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.lg-chip{--lc:var(--c-slate);display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--surface);color:var(--text-soft);border-radius:99px;padding:5px 13px;font-size:14px;
  cursor:pointer}
.lg-chip i{width:9px;height:9px;border-radius:50%;background:var(--lc);display:block}
.lg-chip b{font-weight:600;color:var(--text);font-size:12px;opacity:.75}
.lg-chip[aria-pressed="true"]{background:var(--lc);border-color:var(--lc);color:#fff}
.lg-chip[aria-pressed="true"] i{background:#fff}
.lg-chip[aria-pressed="true"] b{color:#fff}
.lg-day{display:flex;align-items:baseline;gap:10px;padding:9px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--line-soft);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;color:var(--heading);position:sticky;top:0}
.lg-day span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-soft)}
.lg-row{display:grid;grid-template-columns:74px 12px minmax(0,190px) minmax(0,1fr);gap:12px;align-items:start;
  padding:10px 16px;border-bottom:1px solid var(--line-soft)}
.lg-row.alt{background:var(--stripe)}
.lg-row:hover{background:var(--stripe-hover)}
.lg-row .t{font-family:var(--mono);font-size:14px;color:var(--text-soft);white-space:nowrap}
.lg-row .d{width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--lc,var(--c-slate))}
.lg-row .w{font-size:14px;min-width:0}
.lg-row .w b{display:block;color:var(--heading);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-row .w span{font-size:12px;color:var(--text-soft)}
.lg-row .x{min-width:0;font-size:14px}
.lg-row .x b{font-weight:600;color:var(--text)}
.lg-row .x div{color:var(--text-soft);overflow-wrap:anywhere}
.lg-row.strong .x b{color:var(--bad)}
@media(max-width:640px){
  .lg-row{grid-template-columns:60px 10px minmax(0,1fr)}
  .lg-row .x{grid-column:3}
}

/* ---------- texts ---------- */
.consent{border:1px solid var(--line);border-left:3px solid var(--c-green);border-radius:var(--radius);
  background:var(--surface-2);padding:10px 12px;margin:0 0 16px}
.consent .fld{margin:6px 0 8px}
.aud-sum{font-size:16px}
.aud-sum b{font-family:var(--serif);font-size:26px;color:var(--heading);margin-right:4px}
.aud-skip{margin-left:12px;font-size:14px;color:var(--text-soft)}
.aud-why{margin-top:8px;font-size:14px;color:var(--text-soft);border-left:2px solid var(--line);padding-left:10px}
.aud-why div{margin:2px 0}
.aud-why b{color:var(--text)}
.chip button{background:none;border:0;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 4px}
.chip.dim{opacity:.55}
.sms-phone{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px;min-height:110px}
.sms-bubble{display:inline-block;max-width:100%;background:#e5e5ea;color:#111;border-radius:16px 16px 16px 4px;
  padding:9px 13px;font-size:15px;line-height:21px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- tooltip ---------- */
.tip{position:relative;display:inline-block;margin-left:6px;vertical-align:middle}
.tip>button{width:16px;height:16px;padding:0;border:0;border-radius:50%;background:var(--text-soft);
  color:var(--surface);font-size:10px;font-weight:700;line-height:16px;cursor:help;font-family:inherit}
.tip>span{position:absolute;left:50%;bottom:132%;transform:translateX(-50%);width:236px;
  background:var(--tip);color:#fff;padding:9px 11px;border-radius:var(--radius);font-size:12px;
  line-height:1.45;letter-spacing:0;text-transform:none;font-weight:400;text-align:left;z-index:40;
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.tip>span::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--tip)}
.tip:hover>span,.tip>button:focus+span{opacity:1;visibility:visible}
/* wide: a paragraph or two. below: opens downward (near the top of a page). left: lines up with the icon. */
.tip.wide>span{width:min(460px,78vw);font-size:13.5px;line-height:1.5}
.tip.below>span{bottom:auto;top:132%}
.tip.below>span::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--tip)}
.tip.left>span{left:-8px;transform:none}
.tip.left>span::after{left:14px;margin-left:0}
.tip>button{font-style:normal}
.upd-tip>span ul{margin:4px 0 8px;padding-left:18px}
.upd-tip>span li{margin:2px 0}
.upd-tip>span b{display:block}
.upd-status{margin:8px 0 0;font-weight:600}
.langbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.lb-b{border:1px solid var(--line);background:var(--surface);color:var(--text-soft);border-radius:99px;padding:5px 13px;font:600 13.5px var(--sans);cursor:pointer;min-height:32px}
.lb-b[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lb-b .lb-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-left:6px;vertical-align:middle}
.lb-b[aria-pressed="true"] .lb-on{background:var(--on-brand)}
.lb-b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tplbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.tplbar .tb-l{font-size:13.5px;color:var(--text-soft);margin-right:2px}
.tplbar .tb-t{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:99px;background:var(--surface-2);overflow:hidden}
.tplbar .tb-t button{border:0;background:transparent;color:var(--heading);font:600 13.5px var(--sans);padding:5px 11px;cursor:pointer;min-height:32px}
.tplbar .tb-t button:hover{background:var(--brand-wash)}
.tplbar .tb-t .tb-x{color:var(--text-soft);border-left:1px solid var(--line);padding:5px 9px}
.tplbar .tb-name{border:1px solid var(--line);border-radius:var(--radius);padding:6px 10px;font:14px var(--sans);background:var(--input);color:var(--text);min-width:180px}
.aud-lang{margin:6px 0 0;font-size:14px;color:var(--text-soft)}
.codebar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 12px}
.cb-l{font-size:13.5px;color:var(--text-soft);margin-right:2px}
.cb-b{border:1px solid var(--line);background:var(--surface-2);color:var(--heading);border-radius:99px;padding:5px 12px;font:600 13.5px var(--sans);cursor:pointer;min-height:32px}
.cb-b:hover{border-color:var(--c-blue);background:var(--brand-wash)}
.g-bank{margin:0 0 6px;color:var(--text-soft);font-size:14px}
.g-bank .tip{margin:0 6px 0 0}
.g-bank small{font-size:14px;vertical-align:middle}
.gr-tools{display:flex;gap:6px;justify-content:flex-end}
@media(max-width:640px){.tip>span{width:184px;left:auto;right:-8px;transform:none}
  .tip>span::after{left:auto;right:12px}}

/* ---------- sub tabs ---------- */
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid var(--line)}
.subtab{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);
  padding:9px 15px;font-family:var(--sans);font-size:14px;letter-spacing:.03em;font-weight:600;
  border-radius:var(--radius);cursor:pointer}
.subtab:hover{border-color:var(--accent);color:var(--accent)}
.subtab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* Check setup is where the paper, the bank account and the font are set, not a
   daily task, so it wears Cedar Oak to stand apart from its neighbours. */
.subtab.subtab-setup{background:color-mix(in srgb,var(--oak) 14%,var(--surface));border-color:var(--oak-soft);color:var(--oak)}
.subtab.subtab-setup:hover{background:color-mix(in srgb,var(--oak) 22%,var(--surface));border-color:var(--oak);color:var(--oak)}
.subtab.subtab-setup[aria-selected="true"]{background:var(--oak);border-color:var(--oak);color:#fff}
.subtab.subtab-setup::before{content:"\2699\FE0E";margin-right:6px;font-weight:400}
.subpanel{display:none}
.subpanel.on{display:block}

/* ---------- dialogs ---------- */
.veil{position:fixed;inset:0;background:var(--overlay);z-index:60;display:flex;
  align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto}
.veil[hidden]{display:none}
.card{background:var(--surface);color:var(--text);width:100%;max-width:680px;padding:24px 22px;
  border-radius:var(--radius);margin:auto;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.card.narrow{max-width:440px}

/* Bottom sheets, on a phone: the same .veil/.card dialog machinery
   (UI.openDialog/closeDialog, the focus trap, Escape) presented as a sheet
   rising from the bottom edge, which is what a phone user expects a form
   like "Add a fund" to do. Above the phone breakpoint it is an ordinary
   centered dialog, unchanged. */
.bsheet-handle{display:none}
@media(max-width:720px){
  .veil.bsheet-veil{align-items:flex-end;padding:0}
  .veil.bsheet-veil .card{max-width:none;margin:0;border-radius:20px 20px 0 0;
    padding:10px 18px calc(22px + env(safe-area-inset-bottom));
    max-height:88svh;overflow-y:auto;animation:bsheet-rise .18s ease-out}
  .bsheet-handle{display:block;width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin:0 auto 18px}
}
@keyframes bsheet-rise{from{transform:translateY(28px);opacity:.5}}
.card h2{margin:0 0 4px;font-size:22px;color:var(--heading)}
.card p.lead{margin:0 0 18px;font-size:14px;color:var(--text-soft)}
.radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);margin:0 0 8px;cursor:pointer;background:var(--surface)}
.radio input{margin-top:4px;accent-color:var(--brand)}
.radio b{display:block;color:var(--heading)}
.radio span{font-size:14px;color:var(--text-soft)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);
  background:var(--tip);color:#fff;padding:12px 20px;border-radius:var(--radius);font-size:14px;
  opacity:0;transition:.22s;z-index:99;pointer-events:none;max-width:90vw;text-align:center;
  box-shadow:var(--shadow-lg)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){*{transition:none !important}}


/* ═══════════════ shared pieces: badges, menus, dialogs ═══════════════ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-soft);border:1px solid var(--line);
  line-height:18px;white-space:nowrap;vertical-align:middle}
.badge.good{background:rgba(20,148,103,.12);border-color:transparent;color:var(--good)}
.badge.warn{background:rgba(201,138,27,.14);border-color:transparent;color:var(--warn-c)}
.badge.bad{background:rgba(200,56,79,.1);border-color:transparent;color:var(--bad)}
.badge.info{background:var(--brand-wash);border-color:transparent;color:var(--brand)}
.badge.lock{background:var(--surface-2);color:var(--text-soft)}
.badge svg{width:13px;height:13px}
.badge.you{background:var(--brand-wash);color:var(--brand);border-color:transparent;margin-left:8px}

.flag.warn{background:rgba(201,138,27,.10);border-left-color:var(--warn-c)}
/* The recovery code, big enough to copy by hand without a mistake. */
.lock-code{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.08em;text-align:center;
  color:var(--heading);background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;
  padding:14px 10px;margin:4px 0 14px;user-select:all;word-break:break-all}

/* The three-dot menu that holds Rename, Remove and the like. */
.amenu{position:relative;display:inline-block}
.amenu-btn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:none;color:var(--text-soft);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.amenu-btn:hover,.amenu-btn[aria-expanded="true"]{background:var(--surface-2);border-color:var(--line)}
.amenu-btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.amenu-btn svg{width:20px;height:20px}
.amenu-list{position:absolute;right:0;top:calc(100% + 4px);min-width:200px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:40;text-align:left}
.amenu-list[hidden]{display:none}
.amenu-list button{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;padding:10px 12px;border-radius:8px;
  font-size:15px;color:var(--text);cursor:pointer;text-align:left;min-height:42px;white-space:nowrap}
.amenu-list button:hover,.amenu-list button:focus-visible{background:var(--surface-2);outline:0}
.amenu-list button.danger{color:var(--bad)}
.amenu-list button:disabled{opacity:.5;cursor:not-allowed;background:none}
.amenu-list .amenu-note{display:block;padding:4px 12px 8px;font-size:13px;color:var(--text-soft);white-space:normal;max-width:260px}

/* Tables that turn into stacked cards on a phone. */
.rtable{width:100%;border-collapse:collapse;font-size:15px}
.rtable th{text-align:left;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--text-soft);
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.rtable td{padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.rtable tr:last-child td{border-bottom:0}
.rtable td.num,.rtable th.num{text-align:right;font-variant-numeric:tabular-nums}
.rtable td.act{text-align:right;width:56px}
.rtable .cell-main{font-weight:700;color:var(--heading)}
.rtable .cell-sub{display:block;font-size:13.5px;color:var(--text-soft);margin-top:2px}
/* recovery contacts, on People With Access (online only) */
.rc-slot{border-top:1px solid var(--line);padding:12px 0}
.rc-slot:first-child{border-top:0}
.rc-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rc-row .cell-sub{display:block;font-size:13.5px;color:var(--text-soft);margin-top:2px}
.rc-form summary{cursor:pointer;font-weight:600;color:var(--c-navy,inherit);padding:4px 0}
.rc-form[open] summary{margin-bottom:10px}
.rtable input.inline-num{width:9em;min-height:40px;text-align:right;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--input);font-variant-numeric:tabular-nums}
.rtable-wrap{border:1px solid var(--line);border-radius:14px;overflow:visible}
.rtable-wrap .rtable th:first-child{border-top-left-radius:14px}
.rtable-wrap .rtable th:last-child{border-top-right-radius:14px}
@media(max-width:720px){
  .rtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tr{border-bottom:1px solid var(--line);padding:10px 4px;position:relative}
  .rtable tr:last-child{border-bottom:0}
  .rtable td{border:0;padding:5px 12px;text-align:left !important}
  .rtable td[data-label]::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    font-weight:700;color:var(--text-soft);margin-bottom:2px}
  .rtable td.act{position:absolute;right:6px;top:8px;width:auto;padding:0}
}

/* Funds, as cards, on a phone: grouped under Own box on Giving and Other
   funds, replacing the (generic, label-stacked) mobile table above with the
   richer card this screen deserves on a small screen where a table full of
   badges is hard to scan. #s-flist (the table) and #s-fcards (the cards)
   show the same data from the same renderFunds() call; only one is ever
   visible at a time. */
#s-fcards,.fadd-mobile{display:none}
@media(max-width:720px){
  #s-flist,.fadd-desktop{display:none}
  #s-fcards,.fadd-mobile{display:block}
  .fadd-mobile .btn{width:100%;min-height:51px}
  .fadd-hint{margin:12px 4px 6px;color:var(--text-soft);font-size:12.5px;line-height:1.5}
}
.fgroup-title{font-size:11.5px;text-transform:uppercase;font-weight:800;color:var(--text-soft);letter-spacing:.09em;
  display:flex;align-items:center;gap:10px;margin:22px 2px 10px}
.fgroup-title:first-child{margin-top:2px}
.fgroup-title::after{content:"";height:1px;flex:1;background:var(--line)}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px;margin:0 0 10px;box-shadow:var(--shadow)}
.fcard-top{display:flex;align-items:flex-start;gap:11px}
.fcard-ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--brand-wash);color:var(--brand);
  display:flex;align-items:center;justify-content:center}
.fcard-ic svg{width:19px;height:19px}
.fcard-name{flex:1;min-width:0;padding-top:2px;font-weight:800;font-size:15px;color:var(--heading);overflow-wrap:anywhere}
.fcard-type{display:block;color:var(--text-soft);font-size:12px;font-weight:400;margin-top:3px}
.fcard-bottom{border-top:1px solid var(--line-soft);margin-top:13px;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.fcard-bal small{display:block;color:var(--text-soft);font-size:11px;margin-bottom:3px}
.fcard-bal strong{font-size:16.5px;letter-spacing:-.2px;color:var(--heading);font-variant-numeric:tabular-nums}

/* Dialogs follow the card look; the heading is focused when one opens. */
.card{border-radius:18px;padding:26px 26px 22px}
.card h2{font-size:24px;line-height:30px;margin:0 0 6px}
.card h2:focus{outline:0}
.card p.lead{font-size:15px;line-height:22px}
.pw-wrap{display:flex;gap:8px;align-items:stretch}
.pw-wrap input{flex:1 1 auto;min-width:0}
.pw-wrap .btn{flex:0 0 auto}

/* ═══════════════ Home ═══════════════ */
.dash-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:18px;margin:0 0 18px}
@media(max-width:1180px){.dash-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dash-row .dc-glance{grid-column:1 / -1}}
@media(max-width:600px){.dash-row{grid-template-columns:minmax(0,1fr)}}
.dcard{--dc:var(--c-blue);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:18px 20px;position:relative;overflow:hidden;min-width:0}
.dcard[data-go]{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.dcard[data-go]:hover{border-color:color-mix(in srgb,var(--dc) 45%,var(--line))}
.dcard[data-go]:focus-visible{outline:2px solid var(--dc);outline-offset:2px}
.dc-head{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.dc-ic{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--dc) 14%,var(--surface));color:var(--dc)}
.dc-ic.solid{background:var(--dc);color:#fff}
.dc-ic svg{width:22px;height:22px}
.dc-title{font-weight:700;color:var(--heading);font-size:17px;line-height:22px;min-width:0}
.dc-title small{display:block;font-weight:400;font-size:14px;color:var(--text-soft);line-height:19px;margin-top:1px}
.dc-chev{margin-left:auto;width:18px;height:18px;color:var(--text-soft);flex:0 0 auto}
.dc-big{font-family:var(--serif);font-size:48px;line-height:54px;font-weight:700;color:var(--heading);margin:14px 0 0;position:relative;z-index:1}
.dc-note{font-size:15px;color:var(--text-soft);position:relative;z-index:1}
.dc-art{position:absolute;right:16px;bottom:12px;width:104px;height:80px;color:var(--dc);opacity:.4;z-index:1}
.dc-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:58px;color:var(--dc);opacity:.14;z-index:0}
.dcard.has-art{min-height:160px}
.dc-glance .dc-body{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;margin-top:10px}
@media(max-width:560px){.dc-glance .dc-body{grid-template-columns:minmax(0,1fr) auto}.dc-glance .dc-legend{grid-column:1 / -1}}
.dc-glance .dc-big{font-size:56px;line-height:60px;margin:0}
.dc-pill{display:inline-block;margin-top:10px;padding:5px 12px;border-radius:var(--r-pill);background:var(--surface-2);
  color:var(--text-soft);font-size:14px;white-space:nowrap}
.dc-donut{width:132px;height:132px;display:block}
.dc-donut text{font-family:var(--sans)}
.dc-legend{display:flex;flex-direction:column;gap:14px;padding-left:18px;border-left:1px solid var(--line-soft)}
@media(max-width:560px){.dc-legend{border-left:0;padding-left:0}}
.dc-leg{display:grid;grid-template-columns:12px auto;column-gap:10px;align-items:baseline}
.dc-leg i{width:12px;height:12px;border-radius:50%;display:block;align-self:center}
.dc-leg b{font-size:18px;color:var(--heading)}
.dc-leg b span{font-weight:500;font-size:15px;color:var(--text);margin-left:6px}
.dc-leg small{grid-column:2;font-size:13.5px;color:var(--text-soft)}
/* Ages panel on Home: a bar of the whole roll, then one tile per group. */
.ages-card{margin:0 0 22px}
.age-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--line);margin:16px 0 4px;gap:2px}
.age-bar i{display:block;min-width:6px}
.age-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
@media(max-width:700px){.age-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.age-tile{text-align:center;background:color-mix(in srgb,var(--dc) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--dc) 28%,var(--line));border-radius:14px;padding:14px 16px}
.age-n{font-family:var(--serif);font-size:38px;line-height:42px;font-weight:700;color:var(--heading)}
.age-l{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;color:var(--heading);font-size:16px;margin-top:2px}
.age-l i{width:11px;height:11px;border-radius:50%;background:var(--dc);display:block}
.age-tile small{display:block;font-size:13.5px;color:var(--text-soft);margin-top:2px}
.age-unk{margin:12px 0 0;text-align:center}
.addr-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.35fr) minmax(0,.85fr);gap:10px}
.addr-grid .a-street{grid-column:1 / -1}
@media(max-width:560px){.addr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.addr-grid .a-city{grid-column:1 / -1}}
/* Membership form: the inbox on People, and the Settings section. */
#jr-box{margin:0 0 18px}
.jr-item{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.jr-lines{margin-top:8px;display:grid;gap:3px}
.jr-line{font-size:15px;color:var(--text)}
.jr-line span{display:inline-block;min-width:82px;color:var(--text-soft);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
.jr-act{min-width:190px}
.jr-face{width:72px;height:72px;border-radius:14px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line);flex:0 0 auto}
.jr-hh{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:15px}
.jr-hm{display:flex;gap:10px;align-items:center;margin-top:6px}
.jr-hm .jr-face{width:40px;height:40px;border-radius:10px}
.j-share{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center}
@media(max-width:700px){.j-share{grid-template-columns:minmax(0,1fr)}}
.j-qr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;line-height:0}
.j-qr svg{display:block}
.j-opt{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:16px}
.j-opt input[type=number]{width:84px;margin:0 6px;padding:8px 10px}
.j-place{margin:14px 0 6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}

.dash-note{display:flex;align-items:center;gap:14px;background:var(--brand-wash);border:1px solid color-mix(in srgb,var(--c-blue) 18%,transparent);
  border-radius:var(--r-card);padding:12px 18px;margin:0 0 22px;font-size:15.5px;color:var(--text)}
.dash-note .dc-ic{width:40px;height:40px}
.dash-note b{color:var(--heading)}
.dash-h{display:flex;align-items:center;gap:12px;margin:6px 0 14px;font-family:var(--sans);font-size:21px;font-weight:700;color:var(--heading)}
.dash-h svg{width:24px;height:24px;color:var(--c-blue)}
.money-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 18px}
@media(max-width:1180px){.money-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.money-row{grid-template-columns:minmax(0,1fr)}}
.mcard .dc-body{display:flex;gap:12px;align-items:flex-start}
.mcard .dc-k{font-size:15px;color:var(--text);font-weight:500}
.mcard .dc-amt{font-family:var(--sans);font-size:27px;line-height:34px;font-weight:700;color:var(--heading);margin:4px 0 0;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere}
.mcard .dc-note{font-size:14px}
.spark{display:block;width:100%;height:38px;margin-top:10px;color:var(--dc)}
.glance-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);margin:0 0 18px;padding:8px 6px}
.gl-item{display:flex;align-items:center;gap:12px;padding:10px 16px;min-width:0}
.gl-item + .gl-item{border-left:1px solid var(--line-soft)}
@media(max-width:720px){.gl-item + .gl-item{border-left:0}}
.gl-ic{width:42px;height:42px;border-radius:50%;background:var(--surface-2);color:var(--heading);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.gl-ic svg{width:20px;height:20px}
.gl-item b{display:block;font-size:19px;color:var(--heading);line-height:22px}
.gl-item span{font-size:14px;color:var(--text-soft)}
.bd-card .bd-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bd-card .bd-head h2{margin:0;font-family:var(--sans);font-size:20px;color:var(--heading)}
.bd-card .bd-head .btn{margin-left:auto}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.bd-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-left:4px solid var(--c-teal);
  border-radius:12px;padding:12px 16px;background:var(--surface);cursor:pointer;text-align:left;width:100%;min-height:72px}
.bd-item:nth-child(even){border-left-color:var(--c-rose)}
.bd-item:hover{background:var(--surface-2)}
.bd-item:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.bd-item .av{width:52px;height:52px;border-radius:50%;flex:0 0 auto}
.bd-item b{display:block;font-family:var(--serif);font-size:18px;color:var(--heading)}
.bd-item .when{font-size:14.5px;color:var(--c-blue)}
.bd-item .when.now{color:var(--c-rose);font-weight:600}

/* ═══════════════ Home: the financial dashboard (finance.js) ═══════════════
   For every role that sees money. Laid out after the design preview the user
   supplied: a banner naming the organization and who is signed in, the
   balance first and largest, the month's three figures, then the chart and
   the funds, the weeks, and the newest entries beside the reminders. Theme
   tokens throughout, so it follows Dark and the rest like any screen. */
.fd-banner{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 18px;margin:0 0 16px}
.fd-org{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 220px}
.fd-mark{width:42px;height:42px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  background:var(--rail);color:#fff;font:700 19px/1 var(--serif)}
.fd-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.fd-org strong{display:block;font:700 19px/1.15 var(--serif);color:var(--heading);overflow-wrap:anywhere}
.fd-org small{display:block;font-size:12.5px;color:var(--text-soft);margin-top:3px}
.fd-meta{display:flex;gap:26px;flex-wrap:wrap}
.fd-meta span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:var(--text-soft)}
.fd-meta strong{display:block;font-size:14.5px;color:var(--heading);margin-top:3px}
.fd-meta em{display:block;font-style:normal;font-size:12.5px;color:var(--text-soft)}
.fd-actions{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto}
.fd-actions .btn{display:inline-flex;align-items:center;gap:8px;margin:0}
.fd-actions .btn svg{width:17px;height:17px}

.fd-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;border-radius:var(--r-card);margin:0 0 16px;
  padding:24px 28px;background:var(--rail);color:#fff;box-shadow:var(--shadow)}
.fd-kick{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:#aee2ec}
.fd-big{font:700 48px/1.1 var(--serif);letter-spacing:-.02em;margin:8px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fd-hero p{margin:0;font-size:13.5px;line-height:1.5;color:#d4e6f2;max-width:640px}
.fd-aside{border-left:1px solid rgba(255,255,255,.3);padding-left:22px;font-size:13px;line-height:1.5;color:#d5e9f2;max-width:250px;flex:0 0 auto}
.fd-aside b{display:block;color:#fff;font-size:15px;margin-bottom:6px}

.fd-period{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.fd-period h2{margin:0 auto 0 0;font:700 19px/1.2 var(--sans);color:var(--heading)}
.fd-pick input{min-height:38px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--input);color:var(--text);font:inherit}

.fd-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fd-metric{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:17px 18px 14px;
  position:relative;overflow:hidden;min-width:0}
.fd-metric::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--acc)}
.fd-ml{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}
.fd-ml i{width:9px;height:9px;border-radius:50%;background:var(--acc)}
.fd-mv{font:700 32px/1.15 var(--serif);letter-spacing:-.02em;color:var(--heading);margin:12px 0 4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fd-mh{font-size:13px;color:var(--text-soft)}

.fd-cols,.fd-lower{display:grid;grid-template-columns:minmax(0,1.33fr) minmax(0,1fr);gap:16px;margin-top:16px}
.fd-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:19px 21px;min-width:0}
.fd-weekly{margin-top:16px}
.fd-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.fd-ph h2{margin:0;font:700 17px/1.25 var(--sans);color:var(--heading)}
.fd-ph p{margin:4px 0 0;font-size:13px;color:var(--text-soft)}
.fd-link{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:4px 2px;color:var(--accent);font:700 13px var(--sans);
  cursor:pointer;white-space:nowrap}
.fd-link svg{width:15px;height:15px}
.fd-link:hover{text-decoration:underline}

/* The chart, in HTML so its labels are always a readable size. */
.fd-chartwrap{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:stretch}
.fd-chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;height:210px}
.fd-axis{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:26px;font-size:12px;color:var(--text-soft);text-align:right;
  font-variant-numeric:tabular-nums}
.fd-axis span{line-height:1;transform:translateY(-.5em)}
.fd-axis span:last-child{transform:translateY(.1em)}
.fd-plot{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:26px}
.fd-grid{display:block;height:0;border-top:1px solid var(--line-soft)}
.fd-grid:last-of-type{border-top-color:var(--line-strong)}
.fd-groups{position:absolute;inset:0 0 0 0;display:flex}
.fd-group{flex:1 1 0;display:flex;flex-direction:column;align-items:center;min-width:0}
.fd-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%}
.fd-bars b{display:block;width:min(22px,32%);border-radius:4px 4px 0 0;min-height:0}
.fd-bars b.in,.fd-legend i.in,.fd-key.in{background:var(--c-green)}
.fd-bars b.out,.fd-legend i.out,.fd-key.out{background:var(--c-rose)}
.fd-xl{height:26px;line-height:26px;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
.fd-side{border-left:1px solid var(--line-soft);padding-left:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:13px;color:var(--text-soft)}
.fd-side > small{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.fd-side b{display:block;color:var(--heading);font-size:14.5px;font-variant-numeric:tabular-nums}
.fd-key{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.fd-net{font:700 21px/1.1 var(--serif);color:var(--heading);font-variant-numeric:tabular-nums}
.fd-net small{display:block;font:400 12px var(--sans);color:var(--text-soft);margin-top:2px}
.fd-legend{display:flex;gap:16px;margin-top:10px;font-size:13px;color:var(--text-soft)}
.fd-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}

.fd-fundwrap{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center}
.fd-donut{display:block;width:132px;height:132px}
.fd-donut text{font-family:var(--sans)}
.fd-funds{display:grid;gap:11px;min-width:0}
.fd-fund{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:baseline}
.fd-fn{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--text);min-width:0;overflow-wrap:anywhere}
.fd-fn i{width:9px;height:9px;border-radius:50%;background:var(--fund);flex:0 0 auto}
.fd-fv{font-weight:800;color:var(--heading);font-variant-numeric:tabular-nums}
.fd-fv.neg{color:var(--bad)}
.fd-track{grid-column:1 / -1;height:5px;border-radius:8px;background:var(--line-soft);overflow:hidden}
.fd-track i{display:block;height:100%;background:var(--fund);border-radius:8px}

.fd-scroll{overflow-x:auto}
.fd-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.fd-table th,.fd-table td{padding:10px 12px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
.fd-table .num{text-align:right}
.fd-table thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);background:var(--surface-2);font-weight:800}
.fd-table thead th span{font-weight:400;text-transform:none;letter-spacing:0}
.fd-table tbody th{font-weight:650;color:var(--text)}
.fd-table tfoot th,.fd-table tfoot td{border-top:2px solid var(--total-line);border-bottom:0;font-weight:800;color:var(--total-ink);background:var(--total-bg)}
/* Bank: money in grouped by deposit date, the way a bank statement shows it */
details.dep{border-bottom:1px solid var(--line-soft)}
details.dep:last-child{border-bottom:0}
details.dep > summary{list-style:none;cursor:pointer;border-bottom:0}
details.dep > summary::-webkit-details-marker{display:none}
details.dep > summary > div:first-child{position:relative;padding-left:20px}
details.dep > summary > div:first-child::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;
  border-right:2px solid var(--text-soft);border-bottom:2px solid var(--text-soft);transform:rotate(-45deg);transition:transform .15s}
details.dep[open] > summary > div:first-child::before{transform:rotate(45deg)}
details.dep > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.dep-items{background:var(--surface-2);border-top:1px solid var(--line-soft)}
.dep-items .item{padding-left:34px}
@media(prefers-reduced-motion:reduce){details.dep > summary > div:first-child::before{transition:none}}
/* every other row shaded, as in the report tables (table.led) */
.fd-table tbody tr:nth-child(even) th,.fd-table tbody tr:nth-child(even) td{background:var(--stripe)}
.fd-table tbody tr:hover th,.fd-table tbody tr:hover td{background:var(--stripe-hover)}
.fd-table .in{color:var(--good)}
.fd-table .out{color:var(--bad)}
.fd-table .strong{font-weight:800}
.fd-table td.empty{text-align:center;color:var(--text-soft);white-space:normal}
.fd-recent td:nth-child(2){white-space:normal}
.fd-pill{display:inline-block;padding:2px 7px;border-radius:6px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--text-soft);margin-left:4px;white-space:nowrap}
.fd-pill.gift{background:color-mix(in srgb,var(--c-green) 13%,var(--surface));color:var(--good)}
.fd-pill.expense{background:color-mix(in srgb,var(--c-rose) 12%,var(--surface));color:var(--bad)}
.fd-pill.check{background:color-mix(in srgb,var(--c-blue) 12%,var(--surface));color:var(--c-blue)}
.fd-foot{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-soft)}

.fd-att{display:grid;gap:10px}
.fd-note{border:1px solid var(--line);border-left:3px solid var(--c-oak);border-radius:9px;padding:10px 12px;background:color-mix(in srgb,var(--c-oak) 6%,var(--surface))}
.fd-note.blue{border-left-color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 5%,var(--surface))}
.fd-note[data-go]{cursor:pointer}
.fd-note[data-go]:hover{border-color:var(--line-strong)}
.fd-note:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fd-note strong{display:block;font-size:14px;color:var(--heading)}
.fd-note span{display:block;font-size:13px;color:var(--text-soft);margin-top:3px}
.fd-ok{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:var(--surface-2);color:var(--text-soft);font-size:14px}
.fd-ok svg{width:20px;height:20px;color:var(--good)}
.fd-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fd-quick button{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 11px;color:var(--accent);font:700 13px var(--sans);cursor:pointer;min-height:38px}
.fd-quick button:hover{border-color:var(--line-strong)}

@media(max-width:1180px){
  .fd-cols,.fd-lower{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .fd-banner{padding:13px 14px}
  .fd-actions{margin-left:0;width:100%}
  .fd-actions .btn{flex:1 1 auto;justify-content:center}
  .fd-hero{flex-direction:column;align-items:flex-start;padding:18px}
  .fd-big{font-size:37px}
  .fd-aside{border-left:0;border-top:1px solid rgba(255,255,255,.3);padding:12px 0 0;max-width:none}
  .fd-metrics{grid-template-columns:minmax(0,1fr);gap:10px}
  .fd-mv{font-size:27px}
  .fd-card{padding:16px}
  .fd-chartwrap{grid-template-columns:minmax(0,1fr)}
  .fd-side{border-left:0;border-top:1px solid var(--line-soft);padding:10px 0 0;flex-direction:row;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
  .fd-fundwrap{grid-template-columns:110px minmax(0,1fr);gap:12px}
  .fd-donut{width:110px;height:110px}
  .fd-weekly .fd-table{min-width:560px}
  .fd-recent thead{display:none}
  .fd-recent tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
  .fd-recent td{border:0;padding:0}
  .fd-recent td:nth-child(3){grid-column:2;grid-row:2;font-size:12.5px;color:var(--text-soft)}
  .fd-recent td:nth-child(4){grid-column:3;grid-row:1 / 3;align-self:center}
}

/* Members at a glance: the roll's cards, for anyone whose Home is money. */
.m-glance{margin:0 0 20px}
.m-glance > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:700 17px var(--sans);color:var(--heading);margin:0 0 12px}
.m-glance > summary::-webkit-details-marker{display:none}
.m-glance > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--text-soft);border-bottom:2px solid var(--text-soft);
  transform:rotate(-45deg);transition:transform .15s}
.m-glance[open] > summary::before{transform:rotate(45deg)}
.m-glance[hidden]{display:none}

/* Reports: the quarterly sheet on screen, and the financial history. */
.qr-viewing{margin:10px 0 0;font-size:14px;color:var(--text-soft)}
.qr-viewing .btn{margin-left:6px}
.qr-sheetwrap{background:var(--surface-2);border-top:1px solid var(--line);padding:12px;overflow:hidden}
.qr-sheet{box-sizing:content-box;width:10.2in;margin:0 auto;background:#fff;box-shadow:0 2px 14px rgba(11,53,88,.16);padding:.2in}
.qr-sheet .qtr{height:auto}
tr.qr-old td{color:var(--text-soft)}
.fh-sum{display:flex;gap:8px 20px;flex-wrap:wrap;margin:14px 0 0;font-size:14px;color:var(--text-soft)}
.fh-sum b{color:var(--heading);font-variant-numeric:tabular-nums}
.fh-sum b.in,#fh-list td.in{color:var(--good)}
.fh-sum b.out,#fh-list td.out{color:var(--bad)}
.fh-pages{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;font-size:14px;color:var(--text-soft)}
.fh-pages:empty{display:none}

/* Count sheets (countsheets.js). */
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:6px}
.cs-part h3{margin:0 0 8px;font:700 15px var(--sans);color:var(--heading)}
.cs-t input{width:100%;max-width:9em;min-height:38px;padding:6px 9px;text-align:right;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--input);color:var(--text);font:inherit;font-variant-numeric:tabular-nums}
.cs-t td:first-child input{text-align:left;max-width:none}
.cs-t input:disabled{background:var(--surface-2);color:var(--text)}
.cs-line{white-space:nowrap}
.cs-cmp{margin:10px 0 14px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:14.5px;color:var(--text)}
.cs-cmp.ok{background:color-mix(in srgb,var(--good) 10%,var(--surface));color:var(--text)}
.cs-cmp.off{background:color-mix(in srgb,var(--bad) 9%,var(--surface));color:var(--text)}
.cs-one{font-weight:700}
.cs-hist{margin-top:14px;font-size:14px;color:var(--text-soft)}
.cs-hist summary{cursor:pointer;font-weight:700;color:var(--heading)}
@media(max-width:900px){.cs-grid{grid-template-columns:minmax(0,1fr)}}

/* Settings, Reports & schedules. */
.sq-toggle{margin:0 0 14px;font-weight:600}
.sq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sq-opt{border:1px solid var(--line);border-radius:10px;padding:13px 14px}
.sq-opt small{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--text-soft)}
.sq-opt strong{display:block;margin-top:5px;color:var(--heading);font-size:14.5px}
.sq-help{margin:16px 0 12px}
@media(max-width:720px){.sq-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1023px){#toast{bottom:calc(80px + env(safe-area-inset-bottom))}}

/* ═══════════════ Settings ═══════════════ */
.settings-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:22px;align-items:start}
.snav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:10px;
  position:sticky;top:18px}
/* The settings list stays in view while the long page beside it scrolls. */
@media(min-width:901px){.settings-layout > .snav{position:sticky;top:18px}}
.snav .snav-list{display:flex;flex-direction:column;gap:4px}
:is(#p-settings,#p-reports) .snav .subtab{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:none;
  padding:12px 14px;border-radius:12px;cursor:pointer;color:var(--text);font-size:15px;letter-spacing:0;font-weight:600;min-height:56px;position:relative}
/* A tab switched off with the hidden attribute must stay off; the display rule above would otherwise win. */
:is(#p-settings,#p-reports) .snav .subtab[hidden]{display:none}
:is(#p-settings,#p-reports) .snav .subtab:hover{background:var(--surface-2);color:var(--heading)}
:is(#p-settings,#p-reports) .snav .subtab[aria-selected="true"]{background:var(--brand-wash);color:var(--heading)}
:is(#p-settings,#p-reports) .snav .subtab[aria-selected="true"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;
  border-radius:0 3px 3px 0;background:var(--c-teal)}
:is(#p-settings,#p-reports) .snav .subtab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.snav .sn-ic{width:24px;height:24px;flex:0 0 auto;color:var(--text-soft)}
:is(#p-settings,#p-reports) .snav .subtab[aria-selected="true"] .sn-ic{color:var(--c-blue)}
.snav .sn-t{display:block;line-height:20px}
.snav .sn-t small{display:block;font-weight:400;font-size:13px;color:var(--text-soft);line-height:18px}
.rep-main{min-width:0}
/* Between the rail and a very wide screen the list stays, a little
   narrower. There is no dropdown of sections anywhere: the user asked for it
   to go. */
@media(max-width:1180px){
  .settings-layout{grid-template-columns:232px minmax(0,1fr);gap:18px}
  .snav .sn-t small{display:none}
  :is(#p-settings,#p-reports) .snav .subtab{min-height:46px;padding:10px 12px}
}
/* On a tablet or a phone the list beside the page is hidden; the drawer's
   own settings-sections list, right under the Settings row (.tab-subnav,
   styled where .tabs itself is), opened from the bar at the bottom, is the
   way in instead. */
@media(max-width:1023px){
  .settings-layout{grid-template-columns:minmax(0,1fr)}
  .snav{display:none}
}
.section-list{display:grid;gap:4px;margin:0 0 16px}
.section-choice{display:flex;width:100%;align-items:center;gap:13px;text-align:left;border:0;background:none;
  padding:13px 10px;border-radius:12px;color:var(--text);min-height:0}
.section-choice:hover{background:var(--surface-2)}
.section-choice[aria-selected="true"]{background:var(--brand-wash);color:var(--brand)}
.section-choice .ch-ic{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--text-soft)}
.section-choice[aria-selected="true"] .ch-ic{color:var(--brand)}
.section-choice .ch-ic svg{width:21px;height:21px}
.section-choice strong{display:block;font-size:14.5px;color:inherit}
.section-choice small{display:block;color:var(--text-soft);font-size:12px;margin-top:2px;font-weight:400}
:is(#p-settings,#p-reports) .snav .subtabs{border:0;padding:0;margin:0}
.s-head{margin:4px 0 18px}
.s-head h2{margin:0;font-family:var(--serif);font-size:26px;line-height:32px;color:var(--heading)}
.s-head p{margin:4px 0 0;color:var(--text-soft);font-size:15.5px}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:20px 22px 8px;margin:0 0 18px}
.scard-hd{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px}
.scard-hd .dc-ic{--dc:var(--c-blue);width:44px;height:44px}
.scard-hd h3{margin:0;font-family:var(--sans);font-size:18.5px;line-height:24px;color:var(--heading)}
.scard-hd p{margin:2px 0 0;font-size:14.5px;color:var(--text-soft)}
.scard-hd .scard-act{margin-left:auto;flex:0 0 auto}
.scard.flush{padding:0}
.scard.flush .scard-hd{padding:20px 22px 0}
.org-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.org-grid .span2{grid-column:span 1}
/* The address has a row of its own: street across the top, then city, state and zip. */
.org-grid .fld-addr{grid-column:1 / -1}
@media(max-width:900px){.org-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.org-grid .fld-name,.org-grid .fld-addr{grid-column:1 / -1;grid-row:auto}}
@media(max-width:640px){.org-grid{grid-template-columns:minmax(0,1fr)}}
.savebar{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:12px 16px;margin:6px 0 18px}
.savebar .sb-info{display:flex;align-items:center;gap:10px;color:var(--text-soft);font-size:15px;margin-right:auto}
.savebar .sb-info svg{width:22px;height:22px;color:var(--brand);flex:0 0 auto}
.savebar.dirty .sb-info{color:var(--heading);font-weight:600}
.billcard{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-radius:14px;padding:16px 18px;margin:0 0 18px;
  background:linear-gradient(90deg,rgba(20,148,103,.10),rgba(14,165,168,.06));border:1px solid rgba(20,148,103,.18)}
.billcard.warn{background:rgba(201,138,27,.10);border-color:rgba(201,138,27,.25)}
.billcard.bad{background:rgba(200,56,79,.08);border-color:rgba(200,56,79,.22)}
.billcard.info{background:var(--brand-wash);border-color:rgba(22,119,184,.2)}
.billcard .dc-ic{--dc:var(--c-green)}
.billcard.warn .dc-ic{--dc:var(--c-amber)}
.billcard.bad .dc-ic{--dc:var(--c-rose)}
.billcard.info .dc-ic{--dc:var(--c-blue)}
.billcard .bc-text{min-width:0;flex:1 1 280px}
.billcard .bc-text > b{display:block;font-size:17px;color:var(--heading)}
.billcard .bc-text span b{color:var(--heading)}
.billcard .bc-text span{font-size:14.5px;color:var(--text)}
/* A promotion from sign-up, on its own line under the status. */
.billcard .bc-text span.bc-promo{display:block;margin-top:6px;padding:7px 10px;border-radius:8px;background:color-mix(in srgb,var(--c-green,#2D5A27) 10%,transparent)}
.billcard .bc-act{display:flex;gap:8px;flex-wrap:wrap}
.bill-more{margin:-8px 0 18px}
.bill-more summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:15px;padding:8px 2px;min-height:40px;list-style:none;display:inline-flex;align-items:center;gap:8px}
.bill-more summary::-webkit-details-marker{display:none}
.bill-more summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.bill-more[open] summary::before{transform:rotate(45deg)}
.logo-box{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding-bottom:14px}
@media(max-width:720px){.logo-box{grid-template-columns:auto minmax(0,1fr)}.logo-box .logo-acts{grid-column:1 / -1;flex-direction:row}}
.logo-acts{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.drop{border:2px dashed var(--line-strong);border-radius:14px;padding:22px 16px;text-align:center;color:var(--text-soft);
  font-size:14.5px;cursor:pointer;background:var(--surface-2);min-height:44px}
.drop b{display:block;color:var(--heading);font-size:15.5px;margin-bottom:2px}
.drop:hover,.drop.over,.drop:focus-visible{border-color:var(--brand);color:var(--heading);outline:0}
.upl-status{font-size:14px;margin-top:8px;min-height:20px}
.upl-status.ok{color:var(--good)}
.upl-status.bad{color:var(--bad)}
.add-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:0 14px;align-items:end}
.add-row .btn{margin-bottom:16px}
@media(max-width:720px){.add-row{grid-template-columns:minmax(0,1fr)}}
.list-tools{display:flex;gap:12px;align-items:center;padding:0 22px 14px}
.list-tools input{max-width:320px}
.month-now{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:16px}
.month-now .mn-name{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--heading)}
.month-now .mn-meta{font-size:15px;color:var(--text-soft)}
.month-now .btn{margin-left:auto}
.month-why{margin:0 0 16px;padding-left:20px;color:var(--text-soft);font-size:15px;line-height:24px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.theme-opt{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:10px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);cursor:pointer;text-align:left;position:relative;min-height:44px}
.theme-opt:hover{border-color:var(--brand)}
.theme-opt[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.theme-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.theme-mini{display:grid;grid-template-columns:28% 1fr;height:96px;border-radius:9px;overflow:hidden;border:1px solid rgba(128,128,128,.25)}
.theme-mini .tm-rail{padding:8px 6px;display:flex;flex-direction:column;gap:5px}
.theme-mini .tm-rail i{display:block;height:5px;border-radius:3px;opacity:.55}
.theme-mini .tm-rail i:first-child{opacity:1;height:7px}
.theme-mini .tm-main{padding:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:6px}
.theme-mini .tm-title{grid-column:1 / -1;height:7px;width:60%;border-radius:3px}
.theme-mini .tm-card{border-radius:5px;position:relative}
.theme-mini .tm-card::after{content:"";position:absolute;left:6px;right:10px;bottom:7px;height:5px;border-radius:3px;background:var(--tm-acc)}
.theme-sw{display:flex;gap:6px}
.theme-sw i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(128,128,128,.3);display:block}
.theme-nm{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--heading)}
.theme-check{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:none;align-items:center;justify-content:center}
.theme-check svg{width:14px;height:14px}
.theme-opt[aria-pressed="true"] .theme-check{display:inline-flex}
.data-acts{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 16px}
.support-details{margin:4px 0 16px}
.support-details summary{cursor:pointer;color:var(--text-soft);font-size:14.5px;font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.device-empty{padding:18px 0}
.restore-sum{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:15px}
.restore-sum dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.restore-sum dt{color:var(--text-soft)}
.restore-sum dd{margin:0;font-weight:600;color:var(--heading)}

/* ═══════════════ printed paperwork ═══════════════
   Nothing about the software ever appears on a printed page. The church's own
   name, logo and website do; the app's does not.

   Layout follows the report mockups: a masthead with the church lockup, a
   title block with a facts panel, a row of tinted stat cards, content in
   white cards with an icon header, an optional dark total band, and a
   three-part footer. */
/* ================= Members: toolbar, directory, household colours =================
   The page title and subtitle are the shared page head; Add member and Print
   directory sit beside it (#ph-actions). Everything else is below. Screen only. */
#p-members{--m-ink:#102F44;--m-soft:#4E6678;--m-head:#4A6274;--m-line:#D4E1E9;--m-primary:#0B83BD;--m-primary-d:#0B74A8;--m-surface:#fff}
:root[data-theme="dark"] #p-members,:root[data-theme="violet"] #p-members,:root[data-theme="graphite"] #p-members,:root[data-theme="midnight"] #p-members{
  --m-ink:var(--heading);--m-soft:var(--text-soft);--m-head:var(--text-soft);--m-line:var(--line);--m-primary:var(--c-blue);--m-primary-d:var(--c-blue);--m-surface:var(--surface)}

/* the page's own buttons, beside its title */
.ph-actions{display:flex;align-items:center;flex:0 0 auto;padding-top:14px}
.ph-actions .pha{display:flex;gap:10px}
.ph-actions .pha[hidden]{display:none}
/* A screen with no buttons of its own has no button area at all. Left in
   place, the area took the whole row below 1280px and squeezed every other
   screen's title into a column one letter wide. */
.ph-actions:not(:has(.pha:not([hidden]))){display:none}
.pha-b{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;font-size:14px;font-weight:650}
.pha-b svg{width:18px;height:18px}
/* Not enough room beside the title, the date and the account menu: the
   buttons take a row of their own under the title. Only on a screen that
   has buttons, the only case where the bar wraps. */
@media(max-width:1279px){.topbar:has(.pha:not([hidden])){flex-wrap:wrap;row-gap:10px}.topbar:has(.pha:not([hidden])) .page-head{flex:1 1 300px}
  .topbar:has(.pha:not([hidden])) .ph-right{order:2}
  .topbar:has(.pha:not([hidden])) .ph-actions{order:3;flex-basis:100%;padding-top:0;justify-content:flex-end}}
@media(max-width:720px){.ph-actions{order:4}.ph-actions .pha{width:100%}.pha-b{flex:1 1 0;justify-content:center;padding:0 12px}}

/* search and filters: one compact bar */
.mem-toolbar{display:grid;grid-template-columns:minmax(220px,2.2fr) repeat(3,minmax(130px,1fr)) auto;gap:12px;align-items:end;
  background:var(--m-surface);border:1px solid var(--m-line);border-radius:16px;box-shadow:0 1px 2px rgba(16,47,68,.04),0 6px 18px rgba(16,47,68,.05);
  padding:12px 16px;margin:0 0 16px}
.mem-toolbar:has(#m-status-wrap[hidden]){grid-template-columns:minmax(220px,2.4fr) repeat(2,minmax(140px,1fr)) auto}
.mt-search{position:relative;display:block}
.mt-search svg{position:absolute;left:14px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--m-head);pointer-events:none}
.mt-search input{width:100%;height:40px;padding:0 14px 0 42px;border:1px solid var(--m-line);border-radius:10px;font-size:14.5px;background:var(--input,#fff);color:var(--m-ink)}
.mt-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.mt-fld > span{font-size:12.5px;line-height:16px;font-weight:650;color:var(--m-ink)}
.mt-fld select{height:40px;border-radius:10px;border:1px solid var(--m-line);font-size:14px;padding:0 10px;min-width:0}
.mt-fld[hidden]{display:none}
.mt-acts{display:flex;align-items:center;gap:12px;height:40px}
.mt-filter{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--m-line);border-radius:10px;background:var(--m-surface);color:var(--m-soft);cursor:pointer}
.mt-filter svg{width:19px;height:19px}
.mt-filter:hover{border-color:var(--m-primary);color:var(--m-primary-d)}
.mt-clear{white-space:nowrap;font-size:14px;font-weight:650;color:var(--m-primary-d);text-decoration:none;padding:6px 2px;border-left:1px solid var(--m-line);padding-left:12px;border-radius:0}
.mt-clear:hover{text-decoration:underline}
.mem-toolbar :focus-visible,.mem-dir :focus-visible{outline:3px solid color-mix(in srgb,var(--m-primary) 55%,transparent);outline-offset:2px}

/* the directory */
.mem-dir{container-type:inline-size;background:var(--m-surface);border:1px solid var(--m-line);border-radius:17px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,47,68,.04),0 8px 24px rgba(16,47,68,.06);margin:0 0 18px}
.md-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--m-line)}
.md-ic{display:inline-flex;color:var(--m-primary-d)}
.md-ic svg{width:26px;height:26px}
.md-head h2{margin:0;font-size:20px;line-height:28px;color:var(--m-ink)}
.md-count{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:999px;background:color-mix(in srgb,var(--m-line) 55%,var(--m-surface));
  color:var(--m-ink);font-size:13px;font-weight:600}
.md-count:empty{display:none}
.md-tools{margin-left:auto;display:flex;align-items:center;gap:12px}
.seg{display:inline-flex;border:1px solid var(--m-line);border-radius:10px;overflow:hidden;background:var(--m-surface)}
.seg-b{border:0;background:none;min-height:36px;padding:0 16px;font-size:13.5px;font-weight:600;color:var(--m-soft);cursor:pointer}
.seg-b + .seg-b{border-left:1px solid var(--m-line)}
.seg-b[aria-pressed="true"]{background:color-mix(in srgb,var(--m-primary) 14%,var(--m-surface));color:var(--m-primary-d)}
.md-sort{position:relative;display:inline-flex;align-items:center}
.md-sort svg{position:absolute;left:11px;width:16px;height:16px;color:var(--m-soft);pointer-events:none}
.md-sort select{height:36px;padding:0 10px 0 34px;border-radius:10px;border:1px solid var(--m-line);font-size:13.5px}

/* the table */
.mem-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;color:var(--m-ink)}
.mem-table thead th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--m-head);
  background:color-mix(in srgb,var(--m-line) 30%,var(--m-surface));padding:10px 14px;border-bottom:1px solid var(--m-line)}
.mem-table .c-mem{width:24%}.mem-table .c-det{width:18%}.mem-table .c-con{width:20%}.mem-table .c-hh{width:18%}.mem-table .c-act{width:20%}
.mem-table td{padding:7px 14px;vertical-align:middle;border-bottom:1px solid rgba(16,47,68,.07);background:var(--pc-bg);transition:background-color .12s}
.mem-row{cursor:pointer}
.mem-row:hover td{background:var(--pc-hover)}
.mem-row:focus-visible{outline:3px solid var(--m-primary);outline-offset:-3px}
.mem-row[aria-selected="true"]{outline:2px solid var(--m-primary);outline-offset:-2px}
.mem-group.is-hh td:first-child,.mem-group.is-hh .hh-head th{background-image:linear-gradient(to right,var(--pc-acc) 4px,transparent 4px)}
.mem-group + .mem-group td,.mem-group + .mem-group th{border-top:1px solid rgba(16,47,68,.06)}
.c-mem{white-space:nowrap}
.mem-cell{display:flex;align-items:center;gap:12px;min-width:0}
.av-36{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--m-surface);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.mem-id{display:flex;flex-direction:column;min-width:0;gap:2px}
.mem-id b{font-size:14.5px;font-weight:650;line-height:20px;color:var(--m-ink);overflow:hidden;text-overflow:ellipsis}
.mem-tags{display:flex;gap:6px;align-items:center;min-width:0}
.mem-table .tag{margin:0;font-size:12px;line-height:18px;height:18px;padding:0 8px;border:0;border-radius:999px;display:inline-flex;align-items:center}
.mem-table .tag.st{background:color-mix(in srgb,var(--m-primary) 13%,#fff);color:#0A5A85;border:0}
.mem-sub{display:none;font-size:12.5px;line-height:18px;color:var(--m-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-det{color:var(--m-soft);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm{color:var(--m-soft)}
.c-con .cl{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;min-width:0;white-space:nowrap}
.c-con .cl > span{overflow:hidden;text-overflow:ellipsis}
.mi{width:15px;height:15px;flex:0 0 auto;color:var(--m-soft)}
.c-hh{white-space:nowrap;overflow:hidden}
.hh-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:26px;padding:0 10px;border-radius:999px;background:var(--pc-badge);color:var(--pc-badge-t);font-size:12.5px;font-weight:600}
.hh-badge .mi{color:var(--pc-badge-t)}
.hh-badge .meta{overflow:hidden;text-overflow:ellipsis;color:inherit;font-size:inherit;margin:0}
.c-hh .tag.dept{margin-left:6px}
td.c-act{white-space:nowrap;text-align:right}
td.c-act .amenu{display:inline-block;vertical-align:middle;margin-left:8px}
.mem-view{min-height:34px;height:34px;padding:0 14px;border-radius:8px;border:1.5px solid var(--m-primary);background:var(--m-surface);color:var(--m-primary-d);font-size:13.5px;font-weight:650;vertical-align:middle}
.mem-view:hover{background:color-mix(in srgb,var(--m-primary) 8%,var(--m-surface))}
td.c-act .amenu-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--m-line);background:var(--m-surface)}
.hh-head th{text-align:left;padding:6px 14px 2px;font-size:13px;font-weight:650;color:var(--pc-badge-t);background:var(--pc-bg);height:32px;box-sizing:border-box}
.hh-head .mi{vertical-align:-3px;margin-right:6px;color:var(--pc-acc)}
.hh-head .hh-n{color:var(--m-soft);font-weight:500}

/* seven muted pastels: a household by its name, anyone else by their id */
#p-members .pc-0{--pc-bg:#DDF1EB;--pc-hover:#D2EAE3;--pc-acc:#159879;--pc-badge:#C9E8DF;--pc-badge-t:#176C59}
#p-members .pc-1{--pc-bg:#E4EDF5;--pc-hover:#D8E5F0;--pc-acc:#4F7FA8;--pc-badge:#D2E0EE;--pc-badge-t:#2C5275}
#p-members .pc-2{--pc-bg:#F3EADB;--pc-hover:#ECE0CC;--pc-acc:#B0843A;--pc-badge:#E8D9BF;--pc-badge-t:#654C1C}
#p-members .pc-3{--pc-bg:#E4EEDF;--pc-hover:#D8E6D2;--pc-acc:#5A9451;--pc-badge:#D1E3C9;--pc-badge-t:#365F2F}
#p-members .pc-4{--pc-bg:#ECE5F6;--pc-hover:#E2D9F0;--pc-acc:#8263B6;--pc-badge:#DCD0EE;--pc-badge-t:#533C7C}
#p-members .pc-5{--pc-bg:#F5E4DE;--pc-hover:#EED8CF;--pc-acc:#BC765E;--pc-badge:#ECD2C8;--pc-badge-t:#74402F}
#p-members .pc-6{--pc-bg:#DDEFF0;--pc-hover:#D0E7E9;--pc-acc:#2C959E;--pc-badge:#C7E3E5;--pc-badge-t:#1C5E64}
:root[data-theme="dark"] #p-members [class*="pc-"],:root[data-theme="violet"] #p-members [class*="pc-"],
:root[data-theme="graphite"] #p-members [class*="pc-"],:root[data-theme="midnight"] #p-members [class*="pc-"]{
  --pc-bg:color-mix(in srgb,var(--pc-acc) 14%,var(--surface));--pc-hover:color-mix(in srgb,var(--pc-acc) 22%,var(--surface));
  --pc-badge:color-mix(in srgb,var(--pc-acc) 28%,var(--surface));--pc-badge-t:var(--text)}
@media(forced-colors:active){.mem-table td,.hh-head th{background:Canvas}.mem-group.is-hh td:first-child{border-left:4px solid CanvasText}}

/* loading, and nothing to show */
.mem-skel{display:grid;grid-template-columns:36px 1.4fr 1fr 1fr 150px;gap:14px;align-items:center;height:54px;padding:0 16px;border-bottom:1px solid rgba(16,47,68,.06)}
.mem-skel span{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(16,47,68,.07),rgba(16,47,68,.13),rgba(16,47,68,.07));background-size:200% 100%;animation:memsk 1.2s ease-in-out infinite}
.mem-skel .sk-av{width:36px;height:36px;border-radius:50%}
.mem-skel .sk-btn{height:32px;border-radius:8px}
.mem-skel .w2{width:70%}.mem-skel .w3{width:55%}
@keyframes memsk{from{background-position:100% 0}to{background-position:-100% 0}}
.mem-empty{text-align:center;padding:40px 20px 44px;color:var(--m-soft)}
.mem-empty b{display:block;font-size:17px;color:var(--m-ink);margin-bottom:4px}
.mem-empty p{margin:0 0 16px}
@media(prefers-reduced-motion:reduce){.mem-skel span{animation:none}.mem-table td{transition:none}}

/* narrower: Details moves under the name */
@container (max-width:940px){
  .mem-table .c-det{display:none}
  .mem-sub{display:inline;flex:1 1 auto;min-width:0}
  .mem-tags{flex-wrap:nowrap;overflow:hidden}
  .mem-table .c-mem{width:33%}.mem-table .c-con{width:24%}.mem-table .c-hh{width:19%}.mem-table .c-act{width:24%}
  .mem-table td,.mem-table thead th{padding-left:10px;padding-right:10px}
  .mem-table thead th{white-space:normal;line-height:15px}
}
/* narrow (a phone, or a small window): each person is a card */
@container (max-width:700px){
  .mem-table,.mem-table tbody{display:block}
  .mem-table thead{display:none}
  .mem-table tr.mem-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:"av id act" "av con con" "av hh hh";column-gap:10px;row-gap:4px;
    padding:10px 12px;background:var(--pc-bg);border-bottom:1px solid rgba(16,47,68,.08)}
  .mem-table tr.mem-row:hover{background:var(--pc-hover)}
  .mem-table tr.mem-row > td{display:block;padding:0;border:0;background:none;width:auto;box-shadow:none;min-width:0}
  .mem-table tr.mem-row > td.c-mem,.mem-table tr.mem-row .mem-cell{display:contents}
  .mem-table tr.mem-row > td.c-det{display:none}
  .mem-table tr.mem-row .av-36{grid-area:av;align-self:start;margin-top:2px}
  .mem-table tr.mem-row .mem-id{grid-area:id;align-self:center}
  .mem-table tr.mem-row .mem-id b{white-space:normal;overflow-wrap:anywhere}
  .mem-table tr.mem-row .mem-tags{flex-wrap:wrap;row-gap:2px}
  .mem-table tr.mem-row .mem-sub{white-space:normal}
  .mem-table tr.mem-row > td.c-con{grid-area:con;display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px}
  .mem-table tr.mem-row > td.c-con.none,.mem-table tr.mem-row .cl.none{display:none}
  .mem-table tr.mem-row > td.c-hh{grid-area:hh;white-space:normal}
  .mem-table tr.mem-row > td.c-hh:has(> .mm:only-child){display:none}
  .mem-table tr.mem-row > td.c-act{grid-area:act;align-self:start;display:flex;align-items:center}
  .mem-group.is-hh tr.mem-row,.mem-group.is-hh .hh-head{box-shadow:inset 4px 0 0 var(--pc-acc)}
  .mem-table .hh-head{display:block}
  .mem-table .hh-head th{display:block;background:var(--pc-bg);box-shadow:none}
  .mem-view{padding:0 10px}
}
@container (max-width:380px){
  .mem-view{font-size:0;width:34px;padding:0;position:relative}
  .mem-view::before{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
    background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.9 3.4-6.5 7.5-6.5s7.5 2.6 7.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.9 3.4-6.5 7.5-6.5s7.5 2.6 7.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* the toolbar folds on narrower screens */
@media(max-width:1180px){.mem-toolbar,.mem-toolbar:has(#m-status-wrap[hidden]){grid-template-columns:repeat(3,minmax(0,1fr)) auto}.mt-search{grid-column:1 / -1}}
@media(max-width:640px){.mem-toolbar,.mem-toolbar:has(#m-status-wrap[hidden]){grid-template-columns:1fr 1fr;padding:12px;gap:10px}.mt-acts{justify-content:flex-end;align-self:end}
  .mem-toolbar:has(#m-status-wrap[hidden]) .mt-acts{grid-column:1 / -1;justify-content:space-between}
  .md-head{padding:10px 12px}.md-tools{margin-left:0;width:100%;justify-content:space-between}}

/* Checks, Check setup: the paper and signature choices, and the signature preview. */
.cb-choice{border:1px solid var(--line);border-radius:10px;padding:10px 14px 4px;margin:0 0 14px}
.cb-choice legend{padding:0 6px;font-weight:650;color:var(--heading)}
.cb-choice .check{align-items:flex-start;margin-bottom:8px}
.cb-choice .check input{margin-top:4px}
.cb-sigprev{min-height:40px;display:flex;align-items:center}
.cb-sigprev img{max-height:60px;max-width:260px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px}
/* ---------- Write a check: one check-shaped form, typed on directly ----------
   Screen only. It is never what prints: the printed sheet is built in inches
   by checks.js, so nothing here (the paper tint, the border, the boxes, the
   labels) can reach paper, and the window's width cannot move a field. */
#p-checks{--ck-teal:#0F7C86}
:root[data-theme="dark"] #p-checks,:root[data-theme="midnight"] #p-checks,:root[data-theme="graphite"] #p-checks,:root[data-theme="violet"] #p-checks{--ck-teal:#2BA3AE}
.ck-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 8px}
.ck-toolbar-l{font-weight:700;color:var(--heading)}
.ck-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--surface)}
.ck-seg button{border:0;background:none;padding:9px 18px;font:600 14px var(--sans);color:var(--text-soft);cursor:pointer}
.ck-seg button+button{border-left:1px solid var(--line-strong)}
.ck-seg button[aria-checked="true"]{background:var(--ck-teal);color:#fff}
.ck-seg button:focus-visible{outline:2px solid var(--ck-teal);outline-offset:-3px}
#c-gosetup{display:inline-flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line-strong)}
#c-gosetup svg{width:18px;height:18px}
.ck-note{margin:0 0 12px;color:var(--text-soft);font-size:14px}
.ck-note.warn{color:var(--text)}
.ck-note.warn b{color:var(--bad)}
.echeck{position:relative;padding:28px 34px 26px;border-radius:6px;color:var(--text);
  background:color-mix(in srgb,var(--ck-teal) 5%,var(--surface));
  background-image:repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--ck-teal) 4%,transparent) 7px 8px);
  border:1px solid color-mix(in srgb,var(--ck-teal) 45%,var(--surface));
  box-shadow:0 1px 3px rgba(11,53,88,.06),inset 0 0 0 5px color-mix(in srgb,var(--ck-teal) 5%,var(--surface)),inset 0 0 0 6.5px color-mix(in srgb,var(--ck-teal) 32%,var(--surface))}
.echeck input,.echeck textarea,.ec-under select{background:var(--input);border:1px solid var(--line-strong);border-radius:6px;
  padding:9px 12px;font:inherit;font-size:17px;color:var(--text);min-width:0}
.echeck input:focus,.echeck textarea:focus,.ec-under select:focus{outline:2px solid var(--ck-teal);outline-offset:1px;border-color:var(--ck-teal)}
.ec-top{display:flex;justify-content:space-between;gap:20px}
.ec-org{min-width:0}
.ec-org b{display:block;font-family:var(--serif);font-size:25px;line-height:1.2;color:var(--heading)}
.ec-org span{display:block;white-space:pre-line;font-size:16px;line-height:1.35;margin-top:4px}
.ec-meta{display:grid;gap:10px;justify-items:end;align-content:start}
.ec-inl{display:flex;align-items:center;gap:12px;margin:0}
.ec-inl>span{font-weight:600;color:var(--heading);white-space:nowrap}
#c-no{width:8.5em}
#c-date{width:11.5em}
.ec-pay{display:grid;grid-template-columns:auto minmax(0,1fr) auto 10em;align-items:center;gap:12px;margin-top:26px}
.ec-lbl{font-weight:600;color:var(--heading);line-height:1.2}
.ec-dollar{font-size:24px;color:var(--heading)}
#c-amount{text-align:right;font-variant-numeric:tabular-nums}
.ec-words{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:16px}
.ec-wordsline{min-height:44px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--input);font-size:17px;overflow-wrap:anywhere}
.ec-wordsline.ec-empty{color:var(--muted)}
.ec-dollars{font-weight:600;color:var(--heading);line-height:1.15}
.ec-dollars small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.ec-addr{display:block;margin-top:16px;max-width:27rem}
.ec-addr>span{display:block;font-size:14px;color:var(--text-soft);margin-bottom:4px}
.ec-addr textarea{width:100%;box-sizing:border-box;resize:vertical}
.ec-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end;margin-top:18px}
.ec-memo input{flex:1}
.ec-sig{display:flex;align-items:flex-end;gap:12px}
.ec-sig span{font-weight:600;color:var(--heading)}
.ec-sig i{flex:1;height:0;border-bottom:1.5px solid var(--text-soft);margin-bottom:8px}
/* A recorded check reads as a filled-in check: no boxes, nothing to type in. */
.echeck.locked input,.echeck.locked textarea{border-color:transparent;background:transparent;resize:none}
.echeck.locked .ec-wordsline{border-color:transparent;background:transparent}
.ec-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;
  padding:14px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.ec-under select{min-width:15rem}
.ck-recorded{margin-top:14px;padding:10px 14px;border-radius:8px;color:var(--text);
  background:color-mix(in srgb,var(--good) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--good) 40%,var(--surface))}
.ec-actions{margin-top:16px;align-items:center}
@media (max-width:760px){
  .echeck{padding:20px 18px}
  .ec-top{flex-direction:column}
  .ec-meta{justify-items:start}
  .ec-pay{grid-template-columns:auto minmax(0,1fr)}
  .ec-lbl,#c-payee{grid-column:1 / -1}
  .ec-words,.ec-bottom{grid-template-columns:minmax(0,1fr)}
  .ec-under select{min-width:0;width:100%}
  .ec-under .ec-inl{flex-wrap:wrap;width:100%}
}

/* ---------- Giving: record a gift beside a live summary ----------
   Scoped to #p-giving; no other page changes. The fund colours are the
   organization's own (CONFIG.headlineColors, then the chart palette). */
#p-giving{--gv-teal:#0F7C86}
:root[data-theme="dark"] #p-giving,:root[data-theme="midnight"] #p-giving,:root[data-theme="graphite"] #p-giving,:root[data-theme="violet"] #p-giving{--gv-teal:#2BA3AE}
#p-giving .gv-count{display:inline-block;min-width:1.5em;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--gv-teal) 14%,var(--surface));color:var(--gv-teal)}
#p-giving .gv-count:empty{display:none}
#p-giving .subtab[aria-selected="true"] .gv-count{background:rgba(255,255,255,.24);color:inherit}
.gv-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:18px;align-items:start}
.gv-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 3px rgba(11,53,88,.06);padding:22px 24px;min-width:0}
.gv-card h2{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--heading);margin:0;letter-spacing:0}
.gv-card h3{font-family:var(--sans);font-size:17px;font-weight:700;color:var(--heading);margin:0}
.gv-sub{margin:4px 0 0;color:var(--text-soft);font-size:14px}
.gv-row{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:16px;margin-top:18px}
.gv-row .fld{margin:0}
.gv-sec{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.gv-sec.gv-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#p-giving #g-joint:empty{display:none}
#g-combo.has-pick #g-q{display:none}
#p-giving #g-picked .picked{display:flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:4px 6px 4px 8px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--input)}
#p-giving #g-picked .picked b{font-family:var(--sans);font-weight:600;font-size:16px}
.gv-av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gv-teal);color:#fff;font-size:12px;font-weight:700;flex:0 0 auto}
#p-giving #g-unpick{margin-left:auto;border:0;background:none;font-size:22px;line-height:1;color:var(--text-soft);cursor:pointer;width:34px;height:34px;border-radius:8px;padding:0}
#p-giving #g-unpick:hover,#p-giving #g-unpick:focus-visible{background:var(--surface-2);color:var(--text)}
.gv-funds{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:14px}
.gv-fcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.gv-fcard label{display:block;padding:10px 14px;background:var(--fc);color:#fff;font-weight:700;font-size:15px}
.gv-money{display:flex;align-items:stretch}
.gv-money .cur{display:grid;place-items:center;padding:0 14px;border-right:1px solid var(--line);color:var(--text-soft);font-weight:600}
.gv-money input{flex:1;min-width:0;width:100%;border:0;border-radius:0;background:var(--input);padding:12px 14px;text-align:right;
  font-size:20px;font-variant-numeric:tabular-nums;color:var(--text)}
.gv-money input:focus{outline:2px solid var(--gv-teal);outline-offset:-2px}
.gv-more{margin-top:14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--gv-teal);font:600 14px var(--sans);
  padding:8px 14px;border-radius:10px;cursor:pointer}
.gv-more:hover{border-color:var(--gv-teal)}
.gv-more:focus-visible,.gv-tabs .subtab:focus-visible{outline:2px solid var(--gv-teal);outline-offset:2px}
.gv-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:12px}
.gv-frow{display:grid;grid-template-columns:minmax(0,1fr) 9rem;align-items:center;gap:10px;border:1px solid var(--line);
  border-left:4px solid var(--fc);border-radius:10px;padding:4px 4px 4px 12px}
.gv-frow label{font-weight:600;color:var(--text);overflow-wrap:anywhere}
.gv-frow .gv-money{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.gv-frow .gv-money input{font-size:16px;padding:8px 10px}
.gv-frow .gv-money .cur{padding:0 9px}
.gv-help{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--text-soft);font-size:13.5px}
.gv-help svg{width:16px;height:16px;fill:var(--text-soft);stroke:var(--surface);stroke-width:2.4;flex:0 0 auto}
.gv-entry>.gv-help{border-top:1px solid var(--line);padding-top:16px}
.gv-summary{position:sticky;top:16px}
.gs-who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gs-who .gv-av{width:44px;height:44px;font-size:15px}
.gs-who b{font-size:17px;font-weight:600}
.gs-who small{flex-basis:100%;color:var(--text-soft)}
.gs-none{color:var(--muted)}
.gs-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0}
.gs-dot{width:14px;height:14px;border-radius:50%;background:var(--fc)}
.gs-amt{font-variant-numeric:tabular-nums;font-size:16px}
.gs-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gs-total span{font-weight:700;font-size:17px;color:var(--heading)}
.gs-total b{font-size:26px;color:var(--heading);font-variant-numeric:tabular-nums}
.gs-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:14px 0 18px;font-size:14.5px}
.gs-meta dt{color:var(--text-soft)}
.gs-meta dd{margin:0}
.gs-go{width:100%;min-height:48px;font-size:16px}
#p-giving .btn.primary.gs-go{background:var(--gv-teal);border-color:var(--gv-teal);color:#fff}
#p-giving .btn.primary.gs-go:hover{background:color-mix(in srgb,var(--gv-teal) 85%,#000)}
#p-giving .gv-tabs .subtab[aria-selected="true"]{background:var(--gv-teal);border-color:var(--gv-teal);color:#fff}
.gs-clear{display:block;margin:12px auto 0}
.gs-year{margin:12px 0 0;font-size:13.5px;color:var(--text-soft)}
.gv-summary #g-just .just{margin-top:14px}
.gv-recent{margin-top:18px;padding:20px 0 12px}
.gv-recent-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 24px 12px}
.gv-recent-ft{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px 0;color:var(--text-soft);font-size:13.5px}
.gv-recent .empty{margin:0 24px}
.gv-tablewrap{position:relative}
.gv-rtable{border:0;border-radius:0;width:100%}
.gv-rtable td{height:46px}
/* Narrow screens: each entry becomes a small card (who and amount, then date,
   fund and how it came in), so nothing is squeezed into tiny columns and the
   three-dot menu is never clipped by a scrolling box. */
@media (max-width:700px){
  #p-giving .gv-rtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #p-giving .gv-rtable,.gv-rtable tbody{display:block}
  #p-giving .gv-rtable tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"who amt act" "date fund act" "meth meth act";
    column-gap:12px;row-gap:3px;padding:10px 16px;border-bottom:1px solid var(--line-soft);background:none}
  #p-giving .gv-rtable td{display:block;height:auto;min-height:0;border:0;padding:0;background:none;line-height:1.35}
  #p-giving .gv-rtable td:nth-child(1){grid-area:date;color:var(--text-soft);font-size:13px}
  #p-giving .gv-rtable td:nth-child(2){grid-area:who;font-weight:600;min-width:0;overflow-wrap:anywhere}
  #p-giving .gv-rtable td:nth-child(3){grid-area:fund;justify-self:end}
  #p-giving .gv-rtable td:nth-child(4){grid-area:amt;text-align:right}
  #p-giving .gv-rtable td:nth-child(5){grid-area:meth;color:var(--text-soft);font-size:13px}
  #p-giving .gv-rtable td:nth-child(6){grid-area:act;align-self:center}
}
.gv-ftag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text);
  background:color-mix(in srgb,var(--fc) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--fc) 32%,var(--surface))}
.gv-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line-soft)}
.gv-psize{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:14px;color:var(--text-soft)}
.gv-psize select{width:auto;min-width:4.5rem}
.gv-pinfo{font-size:14px;color:var(--text-soft)}
@media (max-width:1100px){
  .gv-grid{grid-template-columns:minmax(0,1fr)}
  .gv-summary{position:static}
}
@media (max-width:640px){
  .gv-card{padding:18px 16px}
  .gv-row,.gv-sec.gv-row{grid-template-columns:minmax(0,1fr)}
  .gv-recent{padding:16px 0 10px}
  .gv-recent-hd,.gv-recent-ft{padding-left:16px;padding-right:16px}
  .gv-frow{grid-template-columns:minmax(0,1fr) 8rem}
}

/* ---------- Giving, one wide card: the fund cards are the main thing ---------- */
.page-head.ph-compact .ph-eyebrow{margin-bottom:0}
.gv-entry{padding:22px 26px 24px}
.gv-alloc{margin-top:22px}
.gv-card .gv-h{font-family:var(--sans);font-size:28px;font-weight:800;line-height:1.15;color:var(--heading);margin:0;letter-spacing:-.01em}
#p-giving .gv-funds{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:16px}
#p-giving .gv-others{margin-top:16px}
#p-giving .gv-fcard{border:0;border-radius:12px;background:color-mix(in srgb,var(--fc) 9%,var(--surface));box-shadow:0 1px 2px rgba(11,53,88,.06)}
#p-giving .gv-fcard label{padding:14px 20px;font-size:21px;font-weight:800;letter-spacing:.01em}
#p-giving .gv-fcard .gv-money{margin:18px 20px 20px;border:1.5px solid color-mix(in srgb,var(--fc) 45%,var(--surface));border-radius:9px;overflow:hidden;background:var(--input)}
#p-giving .gv-fcard .gv-money .cur{border-right:0;padding:0 4px 0 16px;font-size:26px;font-weight:400;color:var(--text-soft)}
#p-giving .gv-fcard .gv-money input{font-size:34px;font-weight:700;padding:12px 16px 12px 8px;background:transparent}
#p-giving .gv-fcard .gv-money:focus-within{border-color:var(--fc);box-shadow:0 0 0 3px color-mix(in srgb,var(--fc) 25%,transparent)}
#p-giving .gv-fcard .gv-money input:focus{outline:0}
/* The joint statement, and the switch that keeps a gift off it. */
.gv-jstrip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;padding:12px 16px;border-radius:10px;
  background:color-mix(in srgb,var(--gv-teal) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--gv-teal) 22%,var(--surface))}
.gv-jstrip>svg{width:26px;height:26px;fill:var(--gv-teal);flex:0 0 auto}
.gv-jname{font-size:15px}
.gv-switch{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.gv-switch input{position:absolute;opacity:0;width:46px;height:26px;margin:0;cursor:pointer}
.gv-track{position:relative;width:46px;height:26px;border-radius:999px;background:var(--line-strong);transition:background .15s;flex:0 0 auto}
.gv-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.gv-switch input:checked+.gv-track{background:var(--gv-teal)}
.gv-switch input:checked+.gv-track::after{transform:translateX(20px)}
.gv-switch input:focus-visible+.gv-track{outline:2px solid var(--gv-teal);outline-offset:2px}
.gv-jnote{flex-basis:100%;margin:0;font-size:13.5px;color:var(--text);font-weight:600}
@media (prefers-reduced-motion:reduce){.gv-track,.gv-track::after{transition:none}}
#p-giving .joint-hint{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--surface-2)}
/* Total, Record giving, Clear entry: one row. */
.gv-act{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.gv-total{display:flex;align-items:baseline;gap:18px}
.gv-total span{font-size:18px;font-weight:700;color:var(--heading)}
.gv-total b{font-size:40px;font-weight:800;line-height:1;color:var(--heading);font-variant-numeric:tabular-nums}
.gv-actrow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.gv-act .gs-go{width:auto;min-width:15rem}
.gv-act .gs-clear{margin:0}
.gv-actbtns .gv-help{margin-top:8px}
#p-giving #g-just .just{margin-top:16px}
@media (max-width:640px){
  .gv-entry{padding:18px 16px 20px}
  .gv-card .gv-h{font-size:24px}
  #p-giving .gv-fcard .gv-money input{font-size:28px}
  .gv-act .gs-go{min-width:0;flex:1}
  .gv-actrow{width:100%}
  .gv-switch{margin-left:0}
}

/* ---------- Check setup: a toggle between the two kinds of paper ---------- */
.cb-fmt{margin:0 0 16px}
.cb-fmt-l{display:block;font-weight:700;color:var(--heading);margin-bottom:8px}
.cb-toggle{display:inline-flex;padding:4px;gap:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-strong)}
.cb-toggle label{position:relative;margin:0;cursor:pointer}
.cb-toggle input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cb-toggle span{display:block;padding:9px 18px;border-radius:9px;font:600 14.5px var(--sans);color:var(--text-soft);transition:background .15s,color .15s}
.cb-toggle input:checked+span{background:var(--ck-teal);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cb-toggle input:focus-visible+span{outline:2px solid var(--ck-teal);outline-offset:2px}
.cb-toggle input:disabled+span{opacity:.55;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.cb-toggle span{transition:none}}
.cb-fmt-d{margin:8px 0 0;font-size:14px;color:var(--text-soft);max-width:60ch}
.cb-shared{margin:0 0 12px;padding:10px 14px;border-radius:10px;font-size:14px;background:var(--surface-2);color:var(--text)}

/* ---------- Checks: the format selector, the fund's colour, the status ---------- */
#c-format{width:auto;min-width:14rem;padding:9px 36px 9px 12px;border:1px solid var(--line-strong);border-radius:8px;background-color:var(--input);color:var(--text);font:500 15px var(--sans)}
#c-format:focus{outline:2px solid var(--ck-teal);outline-offset:1px}
.ck-same{font-size:13.5px;color:var(--text-soft)}
.ck-fundpick{flex-wrap:nowrap}
.ck-fswatch{width:16px;height:16px;border-radius:50%;background:var(--fc);flex:0 0 auto;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--fc)}
.ck-fswatch.none{background:transparent;box-shadow:0 0 0 1.5px var(--line-strong);border:0}
#c-fund{border-left:5px solid var(--fc,var(--line-strong))}
.ck-status{display:flex;align-items:flex-start;gap:14px;margin-top:16px;padding:14px 18px;border-radius:12px;color:var(--text)}
.ck-status.good{background:color-mix(in srgb,var(--ck-teal) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--ck-teal) 40%,var(--surface))}
.ck-status.bad{background:color-mix(in srgb,var(--bad) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 40%,var(--surface))}
.ck-status svg{width:30px;height:30px;flex:0 0 auto;fill:var(--ck-teal);stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-status b{display:block}
.ck-status span{display:block;color:var(--text-soft);font-size:14px;margin-top:2px}

/* ---------- Receipts ---------- */
.rc-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 6px}
.rc-thumbs:empty{display:none}
.rc-thumb{margin:0;display:grid;gap:4px;justify-items:center}
.rc-thumb img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
#rc-list tr.rc-on td{background:color-mix(in srgb,var(--c-amber,#b7791f) 12%,var(--surface))}
.rc-banner{margin:6px 0 0}

/* Joint giving: the gift is joint unless unticked. Cedar Oak, the colour of
   the Joint giving block, so the two read as one idea. */
.joint-chip{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:10px 14px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--oak) 12%,var(--surface));border:1px solid var(--oak-soft);color:var(--text)}
.joint-chip input{margin-top:3px}
#jg-list tr.dim td{opacity:.62}
.g-gojoint{margin-left:auto;font-size:14px}
.g-bank{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.joint-hint{margin:10px 0 0;font-size:14px;color:var(--text-soft)}
/* Financial Insights (insights.js). Restrained on purpose: few colours, few cards. */
.fi-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:10px 12px 0;border-bottom:1px solid var(--line)}
.fi-tab{border:0;background:none;padding:10px 14px;font:inherit;font-weight:600;color:var(--text-soft);border-bottom:3px solid transparent;cursor:pointer;margin-bottom:-1px}
.fi-tab:hover{color:var(--heading)}
.fi-tab[aria-selected="true"]{color:var(--heading);border-bottom-color:var(--good)}
#fi-body{padding:20px 22px 24px}
.fi-lead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fi-lead p{margin:0;flex:1 1 360px;color:var(--text-soft)}
.fi-lead h3{margin:0;font-family:var(--serif);font-size:24px;color:var(--heading)}
.fi-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--text-soft);white-space:nowrap}
.fi-chip.good{background:rgba(45,90,39,.12);color:var(--good)}
.fi-chip.warn{background:rgba(140,106,66,.15);color:#7a5a32}
.fi-chip.low{background:rgba(166,77,93,.12);color:var(--bad)}
.fi-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 18px}
.fi-metric{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:3px}
.fi-metric span{font-size:12.5px;color:var(--text-soft)}
.fi-metric b{font-family:var(--serif);font-size:23px;color:var(--heading)}
.fi-metric small{font-size:12.5px;color:var(--text-soft)}
.fi-metric.warn b{color:var(--bad)}
.fi-outlook{border-left:4px solid var(--good);background:var(--surface-2);border-radius:8px;padding:12px 16px;margin:0 0 18px}
.fi-outlook.stable{border-left-color:var(--brand,#1A2B44)}
.fi-outlook.attention{border-left-color:var(--bad)}
.fi-outlook p{margin:4px 0 0;color:var(--text-soft)}
.fi-h{margin:24px 0 10px;font-size:17px;color:var(--heading)}
.fi-chart{margin:0}
.fi-chart svg{width:100%;height:auto;display:block}
.fi-key{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-soft);margin-top:6px}
.fi-key i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.fi-key i.dash{background:repeating-linear-gradient(90deg,var(--text-soft) 0 5px,transparent 5px 8px)}
.fi-key i.band{height:10px;background:rgba(166,77,93,.15)}
.fi-insights,.fi-opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.fi-insight,.fi-opp{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--surface)}
.fi-insight h4,.fi-opp h4{margin:8px 0 6px;font-size:16px;color:var(--heading)}
.fi-insight dl{margin:0 0 10px}
.fi-insight dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-top:8px}
.fi-insight dd{margin:2px 0 0}
.fi-opp header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.fi-opp h4{margin:2px 0 0}
.fi-eyebrow{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--good);font-weight:700}
.fi-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.fi-nums dt{font-size:12px;color:var(--text-soft)}
.fi-nums dd{margin:2px 0 0;font-weight:700}
.fi-soft{color:var(--text-soft)}
.fi-empty{padding:22px;border:1px dashed var(--line);border-radius:10px;color:var(--text-soft);text-align:center}
.fi-scroll{overflow-x:auto}
.fi-table td small,.fi-table th small{display:block;font-size:11.5px;color:var(--text-soft);font-weight:400}
.fi-table td.up{color:var(--bad)}
.fi-table td.down{color:var(--good)}
.fi-table td.neg{color:var(--bad)}
.fi-row{cursor:pointer}
.fi-row:hover td,.fi-row:focus td{background:var(--surface-2)}
.fi-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}
.fi-controls label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-soft)}
.fi-notes{margin:0;padding-left:20px;line-height:1.65}
.fi-goal{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.fi-goal label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-soft)}
.fi-goal .fi-check{flex-direction:row;align-items:center;gap:6px;padding-bottom:10px}
.fi-money{display:flex;align-items:center;gap:4px}
.fi-money input{width:140px}
.fi-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.fi-level{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.fi-level.meets{border-color:var(--good)}
.fi-level>b{display:block;font-family:var(--serif);font-size:24px;color:var(--heading);margin-top:4px}
.fi-level .ok{color:var(--good);font-weight:600}
.fi-level .gap{color:var(--text-soft)}
.fi-level ul{margin:8px 0 0;padding-left:18px;font-size:13.5px}
.fi-slider{display:flex;align-items:center;gap:8px}
.fi-slider input[type=range]{width:110px}
.fi-slider input[type=number]{width:64px}
.fi-wi input[data-wi="usd"]{width:96px}
.fi-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:10px}
.fi-two h4,#fi-body>h4{margin:18px 0 8px;color:var(--heading)}
.fi-back{margin-bottom:10px}
.fi-method{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.fi-method summary{cursor:pointer;font-weight:600;color:var(--heading)}
.fi-disclaimer{margin:26px 0 0;font-size:12px;line-height:1.5;color:var(--text-soft);max-width:900px}
@media(max-width:700px){#fi-body{padding:14px}.fi-tab{padding:9px 10px}}
.fi-rel{margin:8px 0;color:var(--text-soft)}
.fi-method h4{margin:16px 0 6px}
/* Smart Budget Builder (budget.js) */
#p-insights .btn.sm{min-height:0;padding:7px 14px;font-size:14px;border-radius:8px}
.bb-head{margin-bottom:8px}
.bb-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.bb-pair{display:flex;gap:6px}
.bb-settings,.bb-custom{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.bb-custom input[type=number]{width:90px}
.bb-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:6px 0 10px}
.bb-panel{border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:var(--surface)}
.bb-panel h4{margin:0 0 8px;color:var(--heading)}
.bb-panel .ok{color:var(--good);font-weight:600}
.bb-dl{display:grid;grid-template-columns:1fr auto;gap:4px 14px;margin:0}
.bb-dl dt{color:var(--text-soft);font-size:13.5px}
.bb-dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.bb-amt{width:110px;text-align:right}
.bb-lines .linkbtn{font-weight:600}
.bb-note{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-soft);margin:8px 0}
.bb-note textarea{width:100%}
.bb-asm th,.bb-asm td{font-size:12.5px;color:var(--text-soft)}
.bb-notes{list-style:none;margin:0 0 10px;padding:0}
.bb-notes li{padding:8px 0;border-bottom:1px solid var(--line)}
.bb-notes small{display:block;color:var(--text-soft);font-size:12px}
.bb-grow{flex:1 1 280px}
.bb-grow input{width:100%}
.bb-current td{background:var(--brand-wash)}
.bb-rec{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0;background:var(--surface)}
.bb-rec b{display:block;font-family:var(--serif);font-size:26px;color:var(--heading)}
.bb-rec small{display:block;color:var(--text-soft)}
.bb-rec p{margin:0;color:var(--text-soft);flex:1}
.bb-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;align-items:end}
.bb-months label{display:flex;flex-direction:column;font-size:12.5px;color:var(--text-soft)}
.bb-months .hint,.bb-months button{grid-column:1/-1;justify-self:start}
.bb-warns{list-style:none;margin:0 0 12px;padding:0}
.bb-warns li{padding:6px 0}
@media(max-width:700px){.bb-rec{flex-direction:column}.bb-amt{width:90px}}
/* What the kind of organization leaves out (orgtype.js, data-org-hide in index.html) */
body.org-organization [data-org-hide~="organization"],body.org-business [data-org-hide~="business"],body.org-personal [data-org-hide~="personal"]{display:none!important}
/* The kind of organization: Settings, and the first-run wizard */
.org-type-row{max-width:520px;margin:0 0 14px}
.w-kinds{border:0;margin:0 0 14px;padding:0;display:grid;gap:8px}
.w-kinds legend{font-weight:600;margin-bottom:8px;color:var(--heading)}
.w-kind{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.w-kind:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}
.w-kind b{display:block}
.w-kind small{display:block;color:var(--text-soft);font-size:12.5px;margin-top:2px}
/* Import from QuickBooks (qbimport.js) */
#qb-body .scard{margin-bottom:14px}
.qb-files{margin:0 0 12px;padding-left:20px;line-height:1.6}
tr.qb-dup td{color:var(--text-soft);text-decoration:line-through}

/* ---- invoices (invoices.js) ---- */
.iv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 16px}
.iv-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.iv-stat span{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft)}
.iv-stat b{font-size:24px;color:var(--heading)}
.iv-stat small{font-size:13px;color:var(--text-soft)}
.iv-stat.warn b{color:var(--warn-c)}
.iv-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.iv-tools .fld{margin:0}
.iv-tools .iv-search{flex:1;min-width:180px}
.iv-table tr.iv-row{cursor:pointer}
.iv-table tr.iv-row:hover td,.iv-table tr.iv-row:focus td{background:var(--surface-2)}
.iv-back{margin:0 0 12px}
/* A wide table scrolls inside this on a phone. position makes it the box the
   hidden "Remove" heading (.sr-only, absolute) is placed in; without it that
   heading is placed against the page, escapes the scroll, and widens the page. */
.iv-scroll{overflow-x:auto;position:relative}
.iv-lines td{vertical-align:middle}
.iv-lines input{width:100%;min-width:0}
.iv-lines .iv-qty{max-width:90px;text-align:right}
.iv-lines .iv-price{max-width:130px;text-align:right}
.iv-lines td:first-child{min-width:220px}
.iv-taxrow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:12px 0}
.iv-taxrow .check{margin:0 0 10px}
.iv-taxrow .fld{margin:0;max-width:200px}
.iv-totals{margin:12px 0 4px auto;max-width:320px}
.iv-totals div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border-bottom:1px solid var(--line)}
.iv-totals dt{color:var(--text-soft)}
.iv-totals dd{margin:0;font-variant-numeric:tabular-nums}
.iv-totals .tot dt,.iv-totals .tot dd{font-weight:700;color:var(--heading)}
.iv-facts{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px 18px;margin:0 0 14px}
.iv-facts dt{font-size:13px;font-weight:700;color:var(--text-soft)}
.iv-facts dd{margin:2px 0 0}
.iv-notes{white-space:normal;color:var(--text);margin:10px 0}
.iv-actions{margin-top:14px;flex-wrap:wrap}

/* Contracts to sign (contracts.js): the list, the link, the signatures and
   the pad an officer signs on. The pad is always white with dark ink, in
   any theme, because it is the paper being signed. */
.ct-table tr.ct-row{cursor:pointer}
.ct-table tr.ct-row:hover td,.ct-table tr.ct-row:focus td{background:var(--surface-2)}
.ct-link{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:12px 0 0}
.ct-link .fld{flex:1;min-width:240px;margin:0}
.ct-link input{font-family:var(--mono);font-size:13.5px}
.ct-sigs{display:grid;gap:12px}
.ct-sig{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.ct-sigart{display:flex;align-items:center;justify-content:center;min-width:200px;min-height:64px;padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.ct-script{font:28px/1.2 "Segoe Script","Brush Script MT","Lucida Handwriting","Apple Chancery",cursive;color:#1A2B44;overflow-wrap:anywhere}
.ct-when{white-space:nowrap;color:var(--text-soft);width:1%}
.ct-sign{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);max-width:620px}
.ct-how{display:flex;gap:8px;margin:0 0 10px}
.ct-how label{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;font-weight:600}
.ct-pad{display:block;width:100%;height:140px;border:1px dashed var(--line);border-radius:10px;background:#fff;cursor:crosshair}
.ct-typedname{display:flex;align-items:center;min-height:140px;padding:0 18px;border:1px dashed var(--line);border-radius:10px;background:#fff}
.ct-padrow{display:flex;justify-content:space-between;gap:10px;margin:6px 0 10px}
.ct-consent{margin:6px 0 12px;align-items:flex-start}
.iv-h{margin:4px 0 8px;font-size:15px;color:var(--heading)}
@media (max-width:760px){.iv-stats{grid-template-columns:1fr}.iv-facts{grid-template-columns:1fr 1fr}}

/* ---- Meetings (meetings.js) ----
   Theme tokens only, so every theme reads well: the meeting colour is the
   theme's teal, its quiet accent the oak. Text boxes grow with what is in
   them (.mt-grow); nothing is squeezed. */
.mt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 14px}
.mt-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-oak)}
.mt-title{margin:4px 0 2px;font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--heading)}
.mt-sub{margin:0;color:var(--text-soft)}
.mt-state{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mt-tabs{margin-top:4px}
.mt-tabs .subtab[aria-selected="true"]{background:var(--c-teal);border-color:var(--c-teal);color:#fff}
.mt-tabs .gv-count{margin-left:6px;font-weight:700;opacity:.85}
.mt-panel .block{margin-bottom:16px}
.mt-panel textarea.mt-grow{resize:vertical;min-height:48px;overflow:hidden;line-height:1.5}
.mt-entry,.mt-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 14px}
.mt-entry-top,.mt-item-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-4px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-oak)}
.mt-entry-top .badge{text-transform:none;letter-spacing:0;margin-left:6px}
.mt-list{list-style:none;margin:0;padding:0}
.mt-num{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;
  background:var(--c-teal);color:#fff;font-size:13px;letter-spacing:0}
.mt-move,.mt-item-tools{display:flex;gap:6px;flex-wrap:wrap;text-transform:none;letter-spacing:0}
.mt-item-tools{margin-left:auto}
.mt-agenda-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) 110px;gap:0 14px}
.mt-warn{margin:0 0 12px;padding:10px 14px;border-radius:var(--radius);background:rgba(201,138,27,.12);color:var(--warn-c);font-weight:600}
.mt-locked{margin:0 0 14px;padding:12px 16px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.mt-locked.warn{background:rgba(201,138,27,.10);border-color:rgba(201,138,27,.35)}
.mt-conflicts{display:grid;gap:10px;margin:0 0 14px}
.mt-cf{padding:12px 16px;border-radius:var(--radius);border:1px solid rgba(200,56,79,.35);background:rgba(200,56,79,.07)}
.mt-cf p{margin:0 0 6px}
.mt-cf-f{margin:8px 0}
.mt-cf-f div{white-space:pre-wrap;padding:8px 10px;background:var(--surface);border-radius:8px;border:1px solid var(--line);margin-top:4px}
.mt-cf .btnrow{margin:8px 0 0}
.mt-foot{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin:8px -4px 0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.mt-save{font-size:14px;color:var(--text-soft);min-height:20px}
.mt-save.saved{color:var(--good)}
.mt-save.saving,.mt-save.typing{color:var(--text-soft)}
.mt-save.failed{color:var(--bad);font-weight:600}
.mt-save.blocked{color:var(--warn-c);font-weight:600}
.mt-save .btn{margin-left:8px}
.mt-printrow{margin:0}
/* ---- the meeting workspace (meetings.js, after the owner's preview,
   October 2026): head, seven underlined tabs, cards, attendance rows with
   Present and Absent. Theme tokens only. */
.mtw-back{border:0;background:none;color:var(--accent);font-weight:600;padding:4px 0;margin:0 0 10px;cursor:pointer}
.mtw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 6px}
.mtw-title{margin:0 0 4px;font-family:var(--serif);font-size:28px;line-height:1.2;color:var(--heading)}
.mtw-title .badge{vertical-align:middle;margin-left:6px}
.mtw-sub{margin:0;color:var(--text-soft)}
.mtw-head-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mtw-head-r .mt-save{margin-right:4px}
.mtw-menu .amenu-btn{width:auto;height:auto}
.mtw-tabs{display:flex;gap:20px;overflow-x:auto;margin:20px 0 22px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.mtw-tabs button{white-space:nowrap;padding:11px 1px;border:0;border-bottom:3px solid transparent;background:none;color:var(--text-soft);font-weight:600;font-size:14.5px;cursor:pointer}
.mtw-tabs button[aria-selected="true"]{color:var(--c-teal);border-bottom-color:var(--c-teal)}
.mtw-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mtw-count{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--surface-2);color:var(--text-soft);font-size:12px;text-align:center}
.mtw-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:20px;align-items:start}
.mtw-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.mtw-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:0 0 18px;box-shadow:var(--shadow)}
.mtw-cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px}
.mtw-cardhead h3,.mtw-sechead h3{margin:0;font-size:17px;color:var(--heading)}
.mtw-sechead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.mtw-sechead p{margin:4px 0 0;color:var(--text-soft);font-size:14px}
.mtw-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mtw-link{border:0;background:none;color:var(--accent);font-weight:600;padding:4px 2px;cursor:pointer}
.mtw-link.danger{color:var(--bad)}
.mtw-link.small{font-size:13px}
.mtw-hint{padding:11px 14px;border-radius:8px;background:var(--brand-wash);color:var(--text);font-size:14px;margin:0 0 16px}
.mtw-divider{height:1px;background:var(--line);margin:18px 0}
.mtw-fold{padding:0;overflow:hidden}
.mtw-fold summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--heading);list-style:none;display:flex;justify-content:space-between;align-items:center}
.mtw-fold summary::-webkit-details-marker{display:none}
.mtw-fold summary::after{content:"\25BE";color:var(--c-teal)}
.mtw-fold[open] summary::after{content:"\25B4"}
.mtw-fold summary small{display:block;font-weight:400;color:var(--text-soft);font-size:13px;margin-top:2px}
.mtw-fold[open] summary{border-bottom:1px solid var(--line)}
.mtw-foldbody{padding:16px 20px}
.mtw-ministries{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px 18px}
.mtw-ministries legend{font-weight:600;font-size:14px;padding:0 4px;color:var(--text)}
.mtw-ministries .mt-tip{width:100%;margin:0 0 4px}
.mtw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.mtw-stat{padding:10px;text-align:center;border-radius:8px;background:var(--surface-2);color:var(--text-soft);font-size:12.5px;font-weight:600}
.mtw-stat b{display:block;font-size:23px;line-height:1.25;color:var(--heading)}
.mtw-stat.good{background:color-mix(in srgb,var(--good) 12%,var(--surface));color:var(--good)}
.mtw-stat.good b{color:var(--good)}
.mtw-stat.bad{background:color-mix(in srgb,var(--bad) 10%,var(--surface));color:var(--bad)}
.mtw-stat.bad b{color:var(--bad)}
.mtw-addrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:0 0 12px}
.mtw-addrow .fld{flex:1;min-width:180px;margin:0}
.mtw-search{margin:0 0 6px}
.mtw-people{list-style:none;margin:0;padding:0}
.mtw-person{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.mtw-person:last-child{border-bottom:0}
.mtw-av{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:var(--brand-wash);color:var(--brand);font-size:12px;font-weight:700}
.mtw-person.is-p .mtw-av{background:color-mix(in srgb,var(--good) 16%,var(--surface));color:var(--good)}
.mtw-person.is-a .mtw-av{background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad)}
.mtw-who{flex:1;min-width:0}
.mtw-who b{display:block;font-weight:600;color:var(--text)}
.mtw-who small{display:block;color:var(--text-soft);font-size:12.5px;overflow-wrap:anywhere}
.mtw-marks{display:flex;gap:4px;flex:0 0 auto}
.mtw-mark{min-height:36px;min-width:72px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer}
.mtw-mark:hover:not([disabled]){border-color:var(--accent)}
.mtw-mark.p[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#fff}
.mtw-mark.a[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:#fff}
.mtw-mark:focus-visible,.mtw-x:focus-visible,.mtw-ibtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mtw-x{border:0;background:none;color:var(--text-soft);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px;flex:0 0 auto}
.mtw-x:hover{background:var(--surface-2);color:var(--bad)}
.mtw-timing{display:flex;gap:16px;align-items:center;padding:4px 0 8px}
.mtw-timing b{font-size:28px;color:var(--heading)}
.mtw-timing span{font-size:13px;color:var(--text-soft)}
.mtw-agenda{list-style:none;margin:0;padding:0}
.mtw-arow{display:grid;grid-template-columns:36px minmax(0,1fr) 70px 70px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.mtw-num{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--c-teal) 12%,var(--surface));color:var(--c-teal);font-weight:700;font-size:13px}
.mtw-atopic{border:0;background:none;padding:0;text-align:left;font-weight:700;color:var(--text);cursor:pointer;font-size:15px}
.mtw-atopic:hover{color:var(--accent)}
.mtw-atext small{display:block;color:var(--text-soft);font-size:12.5px;margin-top:2px}
.mtw-amin{font-size:13px;color:var(--text-soft);text-align:right}
.mtw-arrows{display:flex;gap:4px}
.mtw-ibtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.mtw-ibtn[disabled]{opacity:.35;cursor:default}
.mtw-notes{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.mtw-topics{padding:10px}
.mtw-topics button{display:flex;justify-content:space-between;gap:6px;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:9px 10px;color:var(--text);cursor:pointer;font-size:14px}
.mtw-topics button[aria-current="true"]{background:color-mix(in srgb,var(--c-teal) 12%,var(--surface));color:var(--c-teal);font-weight:700}
.mtw-entry{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 12px;background:var(--surface)}
.mtw-entryhead{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-soft);align-items:center}
.mtw-entryhead>span:last-child{display:flex;gap:14px}
.mtw-entry h4{margin:6px 0;font-size:16px;color:var(--heading)}
.mtw-entry h4 .badge{margin-left:6px;vertical-align:middle}
.mtw-entrybody{color:var(--text);font-size:14.5px}
.mtw-entrybody p{margin:6px 0;overflow-wrap:anywhere}
.mtw-motion{padding:8px 12px;border-left:3px solid var(--c-oak);background:var(--surface-2);font-style:italic}
.mtw-entryfoot{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-soft);border-top:1px solid var(--line-soft);padding-top:10px;margin-top:10px;align-items:center}
.mtw-done{display:flex;align-items:center;gap:10px;cursor:pointer}
.mtw-done input{width:18px;height:18px;accent-color:var(--good)}
.mtw-done .struck{text-decoration:line-through;color:var(--text-soft)}
.mtw-filters{display:flex;gap:6px}
.mtw-filters button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 11px;font-size:13px;cursor:pointer;color:var(--text)}
.mtw-filters button[aria-pressed="true"]{background:color-mix(in srgb,var(--c-teal) 12%,var(--surface));border-color:var(--c-teal);color:var(--c-teal);font-weight:700}
.mtw-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:13px}
.mtw-steps span{padding:5px 10px;border-radius:6px;background:var(--surface-2);color:var(--text-soft)}
.mtw-steps span.on{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good);font-weight:700}
.mtw-steps b{color:var(--muted);font-weight:400}
.mtw-empty{text-align:center;padding:30px 20px}
.mtw-empty h4{margin:0 0 6px;font-size:17px;color:var(--heading)}
.mtw-empty p{margin:0 auto 16px;max-width:380px;color:var(--text-soft)}
.mtw-report{margin-top:6px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.mtw-votes .fld{margin-bottom:8px}
/* The rail takes 248px beside the page from 1024px up, so two columns need a wide window. */
@media (max-width:1320px){.mtw-grid{grid-template-columns:1fr}.mtw-split{grid-template-columns:1fr}}
@media (max-width:1180px){.mtw-notes{grid-template-columns:1fr}.mtw-topics{display:flex;overflow-x:auto;gap:4px}.mtw-topics button{width:auto;white-space:nowrap}}
@media (max-width:900px){.mtw-grid{grid-template-columns:1fr}.mtw-notes{grid-template-columns:1fr}
  .mtw-topics{display:flex;overflow-x:auto;gap:4px}.mtw-topics button{width:auto;white-space:nowrap}}
@media (max-width:620px){.mtw-head{flex-direction:column}.mtw-head-r{justify-content:flex-start}.mtw-title{font-size:24px}
  .mtw-card{padding:16px}.mtw-arow{grid-template-columns:30px minmax(0,1fr) 46px}.mtw-arrows{grid-column:2}
  .mtw-person{display:grid;grid-template-columns:34px minmax(0,1fr) auto;row-gap:8px}.mtw-marks{grid-column:1/-1;grid-row:2;padding-left:44px}.mtw-mark{flex:1}.mtw-x{grid-column:3;grid-row:1}.mtw-report{padding:16px}}
/* Settings, Departments: the head of each, picked in the list. The picker
   shrinks with the card so the actions menu is never pushed out of it. */
#s-depts table{table-layout:auto;width:100%}
.ua-how{border:1px solid var(--line);border-radius:10px;padding:8px 14px 10px;margin:0 0 12px}
.ua-how legend{font-weight:600;font-size:14px;padding:0 4px;color:var(--text)}
.ua-how .check{margin:6px 0}
.s-heads{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.s-head{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--brand-wash);color:var(--heading);font-size:13.5px;font-weight:600}
.s-head-x{border:0;background:none;color:var(--text-soft);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
.s-head-x:hover{background:var(--surface-2);color:var(--bad)}
#s-depts .s-dhead{width:100%;min-width:0;max-width:200px;padding:5px 8px;font-size:13.5px}
#s-depts td[data-label="Head"]{width:45%;min-width:0}
/* Below 1024px the phone's tab bar is fixed along the bottom: the pinned
   save line sits just above it rather than under it. */
@media(max-width:1023px){.mt-foot{bottom:calc(62px + env(safe-area-inset-bottom))}}
.mt-print-phone{display:none}
.mt-att{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.mt-att li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line-soft);border-radius:10px}
.mt-att-n{font-weight:600}
.mt-att-b{display:flex;gap:6px;flex-wrap:wrap}
.mt-addrow{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:0 0 12px}
.mt-addrow .fld{margin:0;flex:1;min-width:200px}
.fld .mt-now{margin-top:6px}
.mt-removed{margin-top:12px;color:var(--text-soft)}
.mt-removed summary{cursor:pointer;font-weight:600}
.mt-removed ul{margin:8px 0 0;padding-left:18px}
.mt-removed li{margin:4px 0}
.card.mt-dialog{max-width:640px;max-height:92vh;overflow:auto}
.card.mt-dialog.wide{max-width:820px}
.mt-tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 4px}
.mt-tpl{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
.mt-tpl-pick{display:flex;align-items:center;gap:8px;cursor:pointer}
.mt-tpl .hint{margin:4px 0}
.mt-tpl details{font-size:14px}
.mt-tpl summary{cursor:pointer;color:var(--accent)}
.mt-tpl ol{margin:6px 0 0;padding-left:20px}
.fld-k{margin:14px 0 4px;font-size:14px;font-weight:600;color:var(--text)}
@media (max-width:760px){
  .mt-head{display:block}.mt-state{justify-content:flex-start;margin-top:8px}
  .mt-title{font-size:25px}
  .mt-agenda-row{grid-template-columns:1fr}
  .mt-tpls{grid-template-columns:1fr}
  .mt-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:10px}
  .mt-tabs .subtab{white-space:nowrap}
  .mt-print-wide{display:none}
  .mt-print-phone{display:flex;flex-wrap:wrap;margin:4px 0 12px}
  .mt-foot{padding:8px 12px;margin:8px 0 0}
  .mt-entry,.mt-item{padding:14px}
}

/* ---- the bank's statement file (bankimport.js) ---- */
.bi-tools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.bi-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.bi-line{display:block}
.bi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bi-amt.in{color:var(--good)}
.bi-amt.out{color:var(--bad)}
.bi-sugg{margin-top:6px;font-size:14px}
.bi-sugg span{color:var(--text-soft)}
.bi-sugg.none{color:var(--text-soft)}
.bi-sugg select{max-width:100%}
.bi-act{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.bi-done{margin-top:6px;font-size:14px;color:var(--text-soft)}
.bi-form{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);align-items:end}
.bi-line.matched,.bi-line.recorded,.bi-line.ignored{opacity:.85}
/* ---- Certificates (certificates.js) ---- */
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('../fonts/great-vibes.woff2') format('woff2');font-display:swap}
.ce-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start;margin-bottom:20px}
.ce-wrap>.block{margin:0}
.ce-side{position:sticky;top:16px}
.ce-preview-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px}
.ce-preview-hd .hint{margin:0}
.ce-page{width:100%;aspect-ratio:792/612;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(11,53,88,.16),0 1px 3px rgba(0,0,0,.08)}
.ce-page svg,.ce-thumb svg{display:block;width:100%;height:auto}
.ce-designs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.ce-design{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;font:inherit;font-size:13px;color:inherit;text-align:center}
.ce-design.on{border-color:var(--c-navy);box-shadow:0 0 0 1px var(--c-navy) inset}
.ce-thumb{display:block;border-radius:3px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.ce-add{display:flex;gap:8px}
.ce-add input{flex:1;min-width:0}
.ce-names{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ce-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--surface-2,#f1ede4);border:1px solid var(--line);font-size:13px}
.ce-chip small{opacity:.65}
.ce-chip button{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;padding:0 4px;color:inherit}
.ce-more{margin:4px 0 10px}
.ce-more summary{cursor:pointer;font-size:14px;margin-bottom:8px}
.ce-signer{display:grid;gap:0}
.ce-acts{white-space:nowrap;text-align:right}
.ce-acts .btn{margin-left:4px}
tr.ce-void td{opacity:.55}
tr.ce-void td b{text-decoration:line-through}
@media (max-width:1100px){.ce-wrap{grid-template-columns:1fr}.ce-side{position:static;order:-1}}
@media (max-width:600px){.ce-designs{grid-template-columns:repeat(2,minmax(0,1fr))}}

#printroot{display:none}

.rep{width:100%;max-width:7.5in;margin:0 auto;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:10pt;line-height:1.45}

/* masthead */
.rep-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding-bottom:12pt;border-bottom:1px solid var(--stone);margin-bottom:16pt}
.rep-brand{display:flex;align-items:center;gap:10pt;min-width:0}
.rep-mark{width:34pt;height:34pt;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.rep-mark img{width:100%;height:100%;object-fit:cover}
.rep-mark svg{width:19pt;height:19pt}
.rep-name{font-family:var(--serif);font-size:16pt;font-weight:700;line-height:1.1;
  color:var(--navy);letter-spacing:-.01em}
.rep-sub{font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:2pt}
.rep-addr{font-size:8.5pt;color:var(--ink-soft);margin-top:2pt}
/* The address and treasurer under the name on the one-page sheets. */
.qt-org small.org-line,.db-id small.org-line,.fn-org small.org-line{text-transform:none;letter-spacing:0;font-weight:400;margin-top:1pt}
.rep-meta{text-align:right;font-size:8.5pt;color:var(--ink-soft);white-space:nowrap}
.rep-meta b{display:block;color:var(--navy);font-size:9.5pt}

/* title block */
.rep-title{display:flex;justify-content:space-between;align-items:flex-start;gap:18pt;
  margin-bottom:16pt}
.rep-title h1{margin:0;font-family:var(--serif);font-size:26pt;line-height:1.1;font-weight:700;
  color:var(--navy);letter-spacing:-.02em}
.rep-title .lead{margin:4pt 0 0;font-size:10pt;color:var(--ink-soft)}
.rep-panel{background:var(--cream);border:1px solid var(--stone);border-radius:6pt;
  padding:10pt 14pt;min-width:2.3in;flex:0 0 auto}
.rep-panel .row{display:flex;gap:8pt;align-items:flex-start;margin-bottom:7pt}
.rep-panel .row:last-child{margin-bottom:0}
.rep-panel .ic{width:16pt;height:16pt;flex:0 0 auto;color:var(--navy);margin-top:1pt}
.rep-panel .k{font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.rep-panel .v{font-size:11pt;font-weight:600;color:var(--navy);line-height:1.25}

/* stat cards */
.rep-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9pt;margin-bottom:16pt}
.rep-stats.three{grid-template-columns:repeat(3,1fr)}
.rep-stats.two{grid-template-columns:repeat(2,1fr)}
.rep-stat{--c:var(--navy);border:1px solid var(--stone);border-radius:6pt;padding:10pt 11pt;
  background:#fff;break-inside:avoid}
.rep-stat .top{display:flex;align-items:center;gap:7pt;margin-bottom:6pt}
.rep-stat .badge{width:20pt;height:20pt;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,#fff)}
.rep-stat .badge svg{width:12pt;height:12pt}
.rep-stat .k{font-size:7pt;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  line-height:1.25}
.rep-stat .v{font-family:var(--mono);font-size:15pt;font-weight:700;color:var(--navy);
  letter-spacing:-.02em}

/* content cards */
.rep-card{border:1px solid var(--stone);border-radius:6pt;overflow:hidden;margin-bottom:14pt;
  break-inside:avoid}
.rep-card > .hd{display:flex;align-items:center;gap:8pt;padding:9pt 12pt;
  border-bottom:1px solid var(--stone);background:#fff}
.rep-card > .hd .badge{width:20pt;height:20pt;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rep-card > .hd .badge svg{width:11pt;height:11pt}
.rep-card > .hd h2{margin:0;font-family:var(--serif);font-size:12pt;font-weight:600;color:var(--navy)}
.rep-card > .bd{padding:0}
.rep-card > .bd.pad{padding:10pt 12pt}

/* tables inside a card */
.rep table{width:100%;border-collapse:collapse}
.rep thead{display:table-header-group}          /* repeat the header across pages */
.rep th{background:var(--navy);color:#fff;font-size:7.5pt;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;text-align:left;padding:7pt 12pt}
.rep td{font-size:9.5pt;padding:7pt 12pt;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
.rep tbody tr:last-child td{border-bottom:0}
.rep tbody tr:nth-child(even) td{background:var(--cream)}
.rep th.num{text-align:right}
/* Figures are monospaced so columns line up; headings are not. */
.rep td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.rep tr.total td{background:#fff !important;border-top:1.5px solid var(--navy);border-bottom:0;
  font-weight:700;font-size:10.5pt}

/* Meetings on paper (meetings.js): agendas, minutes, decisions, action
   items. Unlike a statement's cards these are allowed to break across
   pages anywhere but inside a heading: a long meeting's notes run on to the
   next page, never clipped and never left as a blank gap. */
.mtp .mtp-sec{margin:0 0 12pt}
.mtp h2{font-family:var(--serif);font-size:13pt;color:var(--navy);margin:14pt 0 6pt;padding-bottom:3pt;border-bottom:1px solid var(--stone);break-after:avoid;page-break-after:avoid}
.mtp h3{font-size:10.5pt;margin:8pt 0 3pt;color:var(--ink);break-after:avoid;page-break-after:avoid}
.mtp p{margin:0 0 5pt;overflow-wrap:anywhere}
.mtp .mtp-block{margin:0 0 8pt;padding:0 0 6pt;border-bottom:1px solid var(--rule-soft)}
.mtp .mtp-motion{padding:5pt 8pt;border-left:3px solid var(--oak);background:var(--cream);font-style:italic}
.mtp .mtp-meta{font-size:9pt;color:#555}
.mtp .mtp-status{font-size:9pt;text-transform:uppercase;letter-spacing:.08em;color:#555;margin:-6pt 0 8pt}
.mtp .mtp-total{text-align:right;font-weight:700;margin-top:6pt}
.mtp table.mtp-t td{overflow-wrap:anywhere}
.mtp table.mtp-t td.n{text-align:right;width:1%;white-space:nowrap}
.mtp table.mtp-t tr{break-inside:avoid;page-break-inside:avoid}
.mtp .mtp-sign{display:grid;grid-template-columns:1fr 1fr;gap:28pt;margin-top:30pt;break-inside:avoid;page-break-inside:avoid}
.mtp .mtp-sign span{display:block;border-bottom:1px solid #333;height:26pt;margin-bottom:4pt}
.mtp .mtp-sign div{font-size:9pt;color:#444}
.mtp .mtp-plain{white-space:pre-wrap;font-size:10pt}

/* simple key/value rows, for a fund summary */
.rep-kv{display:flex;justify-content:space-between;gap:12pt;padding:7pt 12pt;
  border-bottom:1px solid var(--rule-soft);font-size:9.5pt}
.rep-kv:last-child{border-bottom:0}
.rep-kv .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rep-kv.total{border-top:1.5px solid var(--navy);border-bottom:0;font-weight:700;font-size:11pt;
  color:var(--navy)}

/* the dark total band */
.rep-band{background:var(--navy);color:#fff;border-radius:6pt;padding:18pt 20pt;margin:4pt 0 16pt;
  display:flex;justify-content:space-between;align-items:center;gap:18pt;break-inside:avoid;
  position:relative;overflow:hidden}
.rep-band .k{font-size:9pt;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.rep-band .v{font-family:var(--mono);font-size:28pt;font-weight:700;line-height:1.1;
  letter-spacing:-.02em;margin-top:2pt}
.rep-band .note{text-align:right;font-size:9.5pt;font-style:italic;opacity:.9;max-width:2.2in}
.rep-band .art{position:absolute;right:14pt;bottom:-8pt;width:78pt;height:78pt;opacity:.14}

/* footer */
.rep-foot{display:flex;justify-content:space-between;gap:16pt;padding-top:11pt;
  border-top:1px solid var(--stone);margin-top:4pt;font-size:8.5pt;color:var(--ink-soft)}
.rep-foot .bit{display:flex;gap:7pt;align-items:center;min-width:0}
.rep-foot .badge{width:17pt;height:17pt;border-radius:50%;background:var(--cream);
  border:1px solid var(--stone);color:var(--navy);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.rep-foot .badge svg{width:9pt;height:9pt}
.rep-foot b{display:block;color:var(--ink);font-weight:600}

/* charts */
/* minmax(0,…) or a wide table refuses to shrink and squeezes its neighbour */
.rep-2col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:11pt;
  margin-bottom:14pt;align-items:start}
.rep-2col.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rep-2col > .rep-card{margin-bottom:0}
.rep-2col > div > .rep-card:last-child{margin-bottom:0}
/* a date is one thing and should not be broken across three lines */
.rep td.dt{white-space:nowrap}
.rep-2col td,.rep-2col th{padding-left:9pt;padding-right:9pt}
.ch{display:block;max-width:100%;height:auto}
.ch-empty{padding:14pt;text-align:center;color:var(--ink-soft);font-size:9pt}
.ch-key{display:flex;gap:12pt;justify-content:center;margin-top:5pt;font-size:8pt;
  color:var(--ink-soft)}
.ch-key span{display:flex;align-items:center;gap:4pt}
.ch-key i{width:9pt;height:3pt;border-radius:2pt;display:block}
.ch-donut{display:flex;flex-direction:column;align-items:center;gap:9pt;position:relative}
.ch-donut > svg{flex:0 0 auto}
.ch-donut-labels{position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:none}
.ch-legend{width:100%;font-size:8.5pt}
.ch-li{display:flex;align-items:center;gap:6pt;padding:2.5pt 0}
.ch-li .sw{width:8pt;height:8pt;border-radius:2pt;flex:0 0 auto}
.ch-li .lb{flex:1;min-width:0;color:var(--ink-soft)}
.ch-li .vl{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* the month-by-month matrix */
.rep-matrix{overflow:hidden}
.rep-matrix table{font-size:7.5pt}
.rep-matrix th{padding:5pt 3pt;font-size:6.5pt;letter-spacing:.04em}
.rep-matrix td{padding:4pt 3pt;font-size:7.5pt}
.rep-matrix td.num{font-size:7.5pt}
.rep-matrix td:first-child,.rep-matrix th:first-child{padding-left:9pt;text-align:left}
.rep-matrix td:last-child,.rep-matrix th:last-child{padding-right:9pt}

/* the member directory, as cards */
.rep-dir{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9pt}
.rep-dir.two{grid-template-columns:1fr 1fr}
.rep-pc{border:1px solid var(--stone);border-radius:6pt;padding:9pt;display:flex;gap:9pt;
  break-inside:avoid;page-break-inside:avoid}
.rep-pc img{width:.62in;height:.62in;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--cream)}
.rep-pc .n{font-family:var(--serif);font-size:10.5pt;font-weight:600;color:var(--navy);line-height:1.2}
.rep-pc .r{font-size:7.5pt;color:var(--oak);letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:3pt}
.rep-pc .d{font-size:8pt;line-height:1.5;color:var(--ink-soft)}
.rep-pc .d span{display:block}

/* ---- the Home dashboard as a landscape report (Print.overview) ----
   Its own page (@page ovr, below): US Letter landscape. Colours are written
   out rather than taken from the theme variables, so the paper is the same
   whatever the screen is wearing. min-height keeps the footer at the foot of
   a one-page report; it is a little under the page's own height so it can
   never push an empty second page out. */
.ovr{width:100%;min-height:7.62in;display:flex;flex-direction:column;gap:6pt;background:#fff;
  color:#13294B;font-family:var(--sans);font-size:8pt;line-height:1.35}
.ovr b{font-weight:700}
.ov-head{display:flex;justify-content:space-between;align-items:stretch;gap:16pt;margin-bottom:2pt}
.ov-kick{font-size:7.5pt;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.ov-kick span{margin:0 3pt}
.ov-head h1{margin:3pt 0 0;font-family:var(--sans);font-size:19pt;font-weight:700;line-height:1.15;color:#13294B}
.ov-org{font-size:8.5pt;color:#5E708A}
.ov-headr{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right}
.ov-date{font-size:7.5pt;color:#5E708A}
.ov-role{font-size:7pt;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#12A2A4;margin-bottom:5pt}

.ov-card{position:relative;overflow:hidden;background:#fff;border:.75pt solid #D3DEEA;border-radius:6pt;
  padding:8pt 11pt;break-inside:avoid;page-break-inside:avoid}
.ov-card.t-teal{background:#F0FAFA}.ov-card.t-green{background:#F0F8F3}
.ov-card.t-blue{background:#F0F6FC}.ov-card.t-rose{background:#FEF2F4}
.ov-ch{display:flex;align-items:center;gap:6pt;font-size:9pt;font-weight:700}
.ov-ch small{font-size:7pt;font-weight:400;color:#5E708A;margin-left:10pt}
.ov-dot{width:9pt;height:9pt;flex:0 0 auto;display:inline-block;vertical-align:middle}
.ov-dot.sm{width:5.5pt;height:5.5pt;margin-right:4pt}
.ov-big{font-size:21pt;font-weight:700;line-height:1;margin-top:8pt}
.ov-note{font-size:7pt;color:#5E708A;margin-top:4pt}
.ov-art{position:absolute;right:10pt;bottom:8pt;width:40pt;height:27pt}

.ov-row1{display:grid;grid-template-columns:1.78fr 1fr 1fr;gap:9pt}
.ov-gbody{display:flex;align-items:center;gap:14pt}
.ov-gleft{flex:1;min-width:0}
.ov-donut{width:54pt;height:54pt;flex:0 0 auto;margin-top:2pt}
.ov-legend{border-left:.75pt solid #D3DEEA;padding-left:10pt;display:flex;flex-direction:column;gap:6pt;min-width:78pt}
.ov-leg b{display:flex;align-items:center;font-size:7.5pt}
.ov-leg small{display:block;font-size:6.5pt;color:#5E708A;margin:1pt 0 0 9.5pt}

.ov-strip{display:flex;align-items:center;gap:7pt;padding:5.5pt 11pt;font-size:8pt;
  background:#E9F3FC;border:.75pt solid #BFDBF2;border-radius:5pt;break-inside:avoid;page-break-inside:avoid}
.ov-strip .ov-dot{width:6pt;height:6pt}

.ov-bar{display:flex;height:4.5pt;margin:7pt 0 8pt;border-radius:3pt;overflow:hidden}
.ov-bar i{display:block;height:0;border-top:4.5pt solid}
.ov-bar i.rest{flex:1;border-top-color:#EDF1F5}
.ov-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9pt}
.ov-tile{text-align:center;border:.75pt solid #D3DEEA;border-radius:5pt;padding:6pt 9pt 6pt;break-inside:avoid;page-break-inside:avoid}
.ov-tile.t-rose{background:#FEF2F4;border-color:#F4B9C4}.ov-tile.t-teal{background:#EEF9F9;border-color:#A9DDDE}
.ov-tile.t-blue{background:#EFF5FC;border-color:#B2D0EC}.ov-tile.t-oak{background:#FAF6F1;border-color:#E2D1B8}
.ov-acc{display:block;width:100%;height:4pt}
.ov-tn{font-size:16pt;font-weight:700;line-height:1;margin-top:6pt}
.ov-tl{display:flex;align-items:center;justify-content:center;font-size:8pt;font-weight:700;margin-top:4pt}
.ov-tr{font-size:6.5pt;color:#5E708A;margin-top:2pt}
.ov-foot-note{margin:5pt 0 0;text-align:center;font-size:7pt;color:#5E708A}

.ov-h2{margin:2pt 0 -2pt;font-family:var(--sans);font-size:9.5pt;font-weight:700;color:#13294B;
  break-after:avoid;page-break-after:avoid}
.ov-fin{display:grid;grid-template-columns:repeat(4,1fr);gap:9pt}
/* Centred like the screen's cards: label, amount and note over the trend line. */
.ov-fcard{padding:7pt 10pt 6pt;text-align:center}
.ov-fcard .ov-ch{font-size:7.5pt;justify-content:center}
.ov-fcard .ov-ch .ov-dot{width:8pt;height:8pt}
.ov-amt{font-size:14pt;font-weight:700;line-height:1.1;margin-top:5pt}
.ov-fnote{font-size:6.8pt;color:#5E708A;margin-top:1.5pt}
.ov-spark{display:block;width:100%;height:11pt;margin-top:3pt}

.ov-sum{display:grid;padding:5pt 11pt}
.ov-si{display:flex;align-items:center;justify-content:center;gap:6pt;padding:0 12pt;font-size:7.5pt;color:#5E708A}
.ov-si + .ov-si{border-left:.75pt solid #D3DEEA}
.ov-si .ov-dot{width:7pt;height:7pt}
.ov-si b{font-size:10pt;color:#13294B;margin-right:3pt}

/* A long list may run on to the next page: the heading stays with the first
   row and a name is never cut in half. No box-decoration-break: clone here;
   inside this flex column Chrome does not count the cloned border, and the
   footer landed on top of the continued card. */
.ov-up{break-inside:auto;page-break-inside:auto}
.ov-up > .ov-ch{break-after:avoid;page-break-after:avoid}
.ov-bds{display:grid;grid-template-columns:repeat(3,1fr);gap:5pt 10pt;margin-top:6pt}
.ov-bd{border:.75pt solid #D3DEEA;border-left:2.5pt solid;border-radius:4pt;padding:4pt 9pt;
  break-inside:avoid;page-break-inside:avoid}
.ov-bd b{display:block;font-size:8pt}
.ov-bd span{display:block;font-size:6.8pt;margin-top:1pt}
.ov-empty{margin:6pt 0 0;font-size:7.5pt;color:#5E708A}

.ov-foot{margin-top:auto;padding-top:6pt;border-top:.75pt solid #D3DEEA;display:flex;justify-content:space-between;
  gap:16pt;font-size:6.8pt;color:#5E708A}

/* ═══════════ the financial reports on paper (print.js finance / quarterly) ═══════════
   Fixed colours, never the theme's. Sizes in points. The smallest text is
   7pt; figures are 9pt and up. Both the dashboard's printout and the
   quarterly report use this one sheet (.qtr, print.js sheetHTML): US Letter
   landscape, built to fit one page, the fund table tightening when there are
   many funds. Every chart is SVG and every accent a border, so they print with the
   browser's "Background graphics" switched off. */
.qtr{background:#fff;color:#13294B;font-family:var(--sans);line-height:1.3;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qtr *{box-sizing:border-box}
.qtr h1,.qtr h2{margin:0;color:#0B3558}
.qtr p{margin:0}
.fp-bars{display:block;width:100%}
.fp-key{display:flex;gap:12pt;align-items:center;font-size:7.5pt;color:#566B80;margin-top:3pt}
.fp-key i{display:inline-block;width:6pt;height:6pt;border-radius:50%;margin-right:4pt}
.fp-key .note{margin-left:auto}
.fp-flist{display:grid;gap:4pt;min-width:0}
.fp-flist.c2{grid-template-columns:1fr 1fr;gap:3pt 12pt}
.fp-flist.c3{grid-template-columns:1fr 1fr 1fr;gap:4pt 14pt}
.fp-fi{display:flex;justify-content:space-between;gap:6pt;font-size:8pt;align-items:baseline;min-width:0}
.fp-fi span{display:flex;align-items:center;gap:5pt;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-fi svg{width:6.5pt;height:6.5pt;flex:0 0 auto}
.fp-fi b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Plain blocks with margins, not a flex column: the desktop app's print
   engine (Electron 31) breaks pages wrongly in a flex column, stretching
   each card to the foot of the page and pushing the rest on to a second and
   third sheet. For the same reason no card here says "do not split me":
   fitOnePage() keeps each report to one page instead. */
.qt-mark{width:26pt;height:26pt;border-radius:6pt;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
  background:#0B3558;color:#fff;font:700 14pt/1 var(--serif)}
.qt-mark img{width:100%;height:100%;object-fit:contain;background:#fff}

/* ---- the Home dashboard's printout (print.js finance): portrait pages ----
   Each .fn-page is its own box one sheet high (the page is cut in code, not
   by the print engine), with its footer pinned to the foot. Page 1 holds the
   overview; later pages hold the rest of the month's entries. */
.fin{width:100%;display:block;background:#fff;color:#13294B;font-family:var(--sans);line-height:1.3;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fin *{box-sizing:border-box}
.fin h1,.fin h2{margin:0;color:#0B3558}
.fin p{margin:0}
.fn-page{position:relative;height:10.1in;overflow:hidden;break-after:page;page-break-after:always}
.fn-page:last-child{break-after:auto;page-break-after:auto}
.fn-body > * + *{margin-top:7pt}
.fn-head,.fn-chead{display:flex;justify-content:space-between;align-items:center;gap:14pt;padding-bottom:7pt;border-bottom:.75pt solid #9DBCCD}
.fn-org{display:flex;align-items:center;gap:8pt;min-width:0}
.fn-mark{width:26pt;height:26pt;border-radius:6pt;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
  background:#0B3558;color:#fff;font:700 14pt/1 var(--serif)}
.fn-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.fn-org b{display:block;font:700 14pt/1.1 var(--serif);color:#0B3558}
.fn-org small{display:block;font-size:7.5pt;color:#566B80;text-transform:uppercase;letter-spacing:.08em;margin-top:2pt}
.fn-chead .pg{font-size:9pt;font-weight:700;color:#0B3558}
.fn-ch2{font:700 15pt/1.2 var(--serif) !important;margin-top:10pt !important}
.fn-meta{display:flex;gap:16pt;text-align:right}
.fn-meta span{display:block;font-size:7pt;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#566B80}
.fn-meta b{display:block;font-size:9pt;margin-top:1pt}
.fn-meta small{display:block;font-size:7.5pt;color:#566B80}
.fn-title h1{font:700 19pt/1.1 var(--serif)}
.fn-title p{font-size:8.5pt;color:#566B80;margin-top:2pt}
.fn-hero{display:flex;justify-content:space-between;align-items:center;gap:16pt;border:1.5pt solid #0B3558;border-radius:8pt;padding:8pt 13pt}
.fn-hero .k{font-size:8pt;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:#0B3558}
.fn-hero .v{font:700 24pt/1.1 var(--serif);color:#0B3558;margin:2pt 0 3pt;font-variant-numeric:tabular-nums}
.fn-hero p{font-size:7.5pt;color:#4F687A;max-width:4.3in}
.fn-aside{border-left:.75pt solid #B9D4E3;padding-left:12pt;font-size:7.5pt;color:#48667B;max-width:2.2in}
.fn-aside b{display:block;color:#13294B;font-size:8.5pt;margin-bottom:2pt}
.fn-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7pt}
.fn-metric{border:.75pt solid #CFDCE8;border-top:3pt solid;border-radius:6pt;padding:6pt 9pt}
.fn-metric .k{font-size:8pt;font-weight:700;color:#304A60}
.fn-metric .v{font:700 16pt/1.15 var(--serif);margin-top:2pt;font-variant-numeric:tabular-nums}
.fn-metric .h{font-size:7pt;color:#566B80;margin-top:1pt}
.fn-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:7pt}
.fin.many .fn-cols{grid-template-columns:1fr}
.fn-card{border:.75pt solid #CFDCE8;border-radius:6pt;padding:7pt 9pt;min-width:0}
.fn-card h2{font:700 10pt/1.2 var(--sans)}
.fn-sub{font-size:7.5pt;color:#566B80;margin:1pt 0 5pt !important}
.fn-fundwrap{display:grid;grid-template-columns:84pt minmax(0,1fr);gap:9pt;align-items:center;margin-top:8pt}
.fn-donut{width:84pt;height:84pt;display:block}
.fin.many .fn-fundwrap{gap:16pt;grid-template-columns:62pt minmax(0,1fr);margin-top:4pt}
.fin.many .fn-donut{width:62pt;height:62pt}
.fin.many .fp-flist.c3{gap:3pt 14pt}
.fn-t{width:100%;border-collapse:collapse;font-size:8pt;font-variant-numeric:tabular-nums}
.fn-t th{text-align:left;font-size:7pt;text-transform:uppercase;letter-spacing:.05em;color:#566B80;padding:2pt 4pt 3pt;border-bottom:.75pt solid #CFDCE8}
.fn-t td{padding:2.4pt 4pt;border-bottom:.5pt solid #E6EDF4}
.fn-t .num{text-align:right;white-space:nowrap}
.fn-t .b{font-weight:700}
.fn-t tfoot td{border-top:1.2pt solid #9DBCCD;border-bottom:0;font-weight:800}
.fn-t tr{break-inside:avoid;page-break-inside:avoid}
/* The entries: one line each, a long payee cut with an ellipsis, so every
   row is the same height and a page always holds its full count. */
.fn-act{table-layout:fixed}
.fn-act td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:15pt}
.fn-act .c-n{width:24pt}.fn-act .c-d{width:92pt}.fn-act .c-y{width:50pt}.fn-act .c-f{width:96pt}.fn-act .c-m{width:74pt}.fn-act .c-am{width:70pt}
.fn-act td:first-child{color:#8A9AAB}
.fn-note{font-size:7pt;color:#566B80}
.fn-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:14pt;padding-top:5pt;
  border-top:.75pt solid #CFDCE8;font-size:7pt;color:#566B80;background:#fff}
.fn-foot .pg{font-weight:700;color:#0B3558;white-space:nowrap}

/* ---- the Home dashboard, printed (print.js finance): one landscape page ----
   The user's "Treasurer dashboard" preview, as its own print stylesheet
   sizes it, in points: banner, centred title, the balance in a navy frame,
   the month's line, three figures, chart and funds side by side, then the
   weekly summary beside the five newest entries. Plain blocks and grids,
   no flex column and no "do not split" (see the Electron 31 note above). */
.dbp{width:100%;display:block;background:#fff;color:#102d45;font-family:var(--sans);font-size:8.25pt;line-height:1.28;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.dbp *{box-sizing:border-box}
.dbp h1,.dbp h2,.dbp p{margin:0}
.dbp > * + *{margin-top:6pt}
.db-banner{display:flex;align-items:center;justify-content:space-between;gap:14pt;padding-bottom:5pt;border-bottom:.75pt solid #9dbccd}
.db-id{display:flex;align-items:center;gap:8pt;min-width:0}
.db-mark{width:22pt;height:22pt;border-radius:7pt;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;background:#0b4a70;color:#fff;font:700 12pt/1 Georgia,serif}
.db-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.db-id strong{display:block;color:#0b3f61;font:700 11.5pt/1.1 Georgia,serif}
.db-id small{display:block;color:#6c8192;font-size:7pt;margin-top:2pt}
.db-meta{display:flex;gap:14pt}
.db-meta span{display:block;color:#688093;font-size:7pt;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.db-meta strong{display:block;color:#163e5c;font-size:8pt;margin-top:2pt}
.db-top{text-align:center}
.db-top h1{font:700 18pt/1.08 Georgia,serif;color:#083b5e}
.db-top p{font-size:7.5pt;color:#4e667b;margin-top:2pt}
.db-hero{display:flex;justify-content:space-between;align-items:center;gap:18pt;border:1.5pt solid #0b4a70;border-radius:8pt;padding:7pt 11pt}
.db-hero .k{color:#0b4a70;font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.db-hero .v{font:700 22pt/1.1 Georgia,serif;color:#0b4a70;letter-spacing:-.02em;margin:2pt 0;font-variant-numeric:tabular-nums}
.db-hero p{font-size:7pt;color:#4f687a}
.db-aside{border-left:.75pt solid #b9d4e3;padding-left:16pt;font-size:7pt;color:#48667b;max-width:170pt}
.db-aside b{display:block;color:#123f5e;font-size:7.5pt;margin-bottom:3pt}
.db-period{display:flex;justify-content:space-between;align-items:center;gap:10pt}
.db-period h2{font-size:10.5pt;color:#0c3655}
.db-period span{font-size:7pt;color:#567084}
.db-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5pt}
.db-metric{position:relative;overflow:hidden;border:.75pt solid #bfd4e2;border-radius:10pt;padding:7pt 8pt 6pt}
.db-metric::before{content:"";position:absolute;left:0;right:0;top:0;height:3pt;background:var(--acc)}
.db-metric .l{display:flex;align-items:center;gap:6pt;font-weight:750;color:#365268;font-size:7.5pt}
.db-metric .l i{width:6.5pt;height:6.5pt;border-radius:50%;background:var(--acc)}
.db-metric .v{font:700 17pt/1.15 Georgia,serif;color:#103a58;letter-spacing:-.03em;margin-top:4pt;font-variant-numeric:tabular-nums}
.db-metric .h{font-size:7pt;color:#668095}
.db-cols,.db-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6pt}
.db-card{border:.75pt solid #bfd4e2;border-radius:10pt;padding:7pt 9pt;min-width:0}
.db-ph{margin-bottom:5pt}
.db-ph h2{font-size:9.5pt;color:#0c3655}
.db-ph p{font-size:7pt;color:#6a8091;margin-top:1pt}
.db-chartwrap{display:grid;grid-template-columns:minmax(0,1fr) 66pt;gap:6pt;align-items:stretch}
.db-legend{display:flex;gap:11pt;color:#526b7c;font-size:7pt;margin-top:3pt}
.db-legend b{display:inline-block;width:6pt;height:6pt;border-radius:50%;margin-right:4pt}
.db-side{border-left:.75pt solid #dce8f0;padding-left:6pt;display:flex;flex-direction:column;justify-content:center}
.db-side small{font-size:7pt;color:#667e90}
.db-side strong{font:700 13.5pt/1.2 Georgia,serif;color:#0b4b6e;overflow-wrap:anywhere}
/* Words in place of a ratio ("No spending yet") are set small enough to fit the column. */
.db-side strong.word{font:700 9pt/1.25 var(--sans)}
.db-side .over{margin-top:6pt;font-weight:700;font-size:7pt}
.db-fundwrap{display:grid;grid-template-columns:76pt minmax(0,1fr);gap:8pt;align-items:center}
.db-donut{width:76pt;height:76pt;display:block}
.db-funds{display:grid;gap:4pt;min-width:0}
.db-funds.two{grid-template-columns:1fr 1fr;gap:3pt 10pt}
.db-fund{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2pt 8pt;font-size:7.5pt}
.db-fund .t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4pt}
.db-fund .t i{width:6pt;height:6pt;border-radius:50%;flex:0 0 auto}
.db-fund .val{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-fund .track{grid-column:1 / -1;height:3pt;border-radius:6pt;background:#ecf3f7;overflow:hidden}
.db-fund .track i{display:block;height:100%;border-radius:6pt}
.db-ffoot{border-top:.75pt solid #e4edf4;margin-top:5pt !important;padding-top:4pt;color:#557084;font-size:7pt}
.db-week,.db-table{width:100%;border-collapse:collapse;font-size:7.5pt;font-variant-numeric:tabular-nums}
.db-week th,.db-week td{text-align:right;padding:3.2pt 5pt;border-bottom:.75pt solid #e5eef4;white-space:nowrap}
.db-week th:first-child,.db-week td:first-child{text-align:left}
.db-week thead th{font-size:6.8pt;color:#638096;text-transform:uppercase;letter-spacing:.05em;background:#f6fbfe}
.db-week thead th span{font-weight:400;text-transform:none;letter-spacing:0}
.db-week tbody th{font-weight:650}
.db-week tfoot th,.db-week tfoot td{border-top:1.5pt solid #bbd4e3;border-bottom:0;font-weight:850;color:#123f5e;background:#f5faff}
.db-table th{text-align:left;color:#698296;font-size:6.8pt;text-transform:uppercase;letter-spacing:.07em;padding:0 4pt 4pt;border-bottom:.75pt solid #e3edf5}
.db-table td{border-bottom:.75pt solid #edf2f6;padding:3.2pt 4pt}
.db-table th:last-child,.db-table td:last-child{text-align:right;white-space:nowrap}
.db-table tr:last-child td{border-bottom:0}
.db-pill{padding:1pt 4pt;border-radius:4pt;background:#edf6f9;color:#3f6975;white-space:nowrap;font-size:7pt}
.dbp .in{color:#087e60}
.dbp .out{color:#c6435d}
.dbp .b{font-weight:800}
.db-afoot{margin-top:4pt;padding-top:4pt;border-top:.75pt solid #e5eef4;font-size:7pt;color:#59768a}
.db-empty{font-size:7.5pt;color:#667e90;padding:6pt 0}
.db-foot{border-top:.75pt solid #d4e2eb;padding-top:4pt;text-align:center;font-size:7pt;color:#688096}

.qtr{width:100%;display:block}
.qtr > * + *{margin-top:8pt}
.qt-head{display:flex;justify-content:space-between;align-items:center;gap:16pt;padding-bottom:7pt;border-bottom:.75pt solid #CFDCE8}
.qt-org{display:flex;align-items:center;gap:9pt;min-width:0}
.qt-mark{width:30pt;height:30pt;border-radius:7pt;font-size:16pt}
.qt-org b{display:block;font:700 13pt/1.1 var(--sans);color:#0B3558;text-transform:uppercase;letter-spacing:.02em}
.qt-org small{display:block;font-size:7.5pt;font-weight:700;color:#566B80;text-transform:uppercase;letter-spacing:.08em;margin-top:2pt}
.qt-meta{text-align:right}
.qt-q{font-size:9.5pt;font-weight:800;color:#0B3558;text-transform:uppercase;letter-spacing:.05em}
.qt-by{font-size:7.5pt;color:#566B80;margin-top:3pt}
.qt-title{display:flex;justify-content:space-between;align-items:flex-end;gap:14pt}
.qt-title h1{font:800 20pt/1.1 var(--sans);color:#0B3558}
.qt-title p{font-size:8.5pt;color:#566B80;margin-top:2pt}
.qt-status{font-size:8pt;font-weight:800;color:#1677B8;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.qt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8pt}
.qt-stat{border:.75pt solid #CFDCE8;border-top:3.5pt solid;border-radius:7pt;padding:7pt 10pt}
.qt-stat.tint{background:#F2F7FB}
.qt-stat .k{font-size:7.5pt;font-weight:800;color:#566B80;text-transform:uppercase;letter-spacing:.06em}
.qt-stat .v{font:800 17pt/1.15 var(--sans);margin-top:4pt;font-variant-numeric:tabular-nums}
.qt-stat .h{font-size:7.5pt;color:#566B80;margin-top:2pt}
.qt-row{display:grid;grid-template-columns:1.5fr 1fr;gap:8pt}
.qt-row2{display:grid;grid-template-columns:1.9fr 1fr;gap:8pt}
.qt-card{border:.75pt solid #CFDCE8;border-radius:7pt;padding:8pt 11pt;min-width:0}
.qt-card h2{font:700 10.5pt/1.2 var(--sans)}
.qt-sub{font-size:7.5pt;color:#566B80;margin:2pt 0 5pt}
.qt-fundwrap{display:grid;grid-template-columns:96pt minmax(0,1fr);gap:12pt;align-items:center}
.qt-donut{width:96pt;height:96pt;display:block}
.qt-t{width:100%;border-collapse:collapse;font-size:8pt;font-variant-numeric:tabular-nums}
.qt-t th{text-align:left;font-size:7pt;text-transform:uppercase;letter-spacing:.06em;color:#566B80;padding:2pt 5pt 4pt;border-bottom:.75pt solid #CFDCE8}
.qt-t td{padding:3.4pt 5pt;border-bottom:.5pt solid #E6EDF4;font-weight:600}
.qt-t td i{display:inline-block;width:2.5pt;height:8pt;border-radius:1pt;margin-right:5pt;vertical-align:-1pt}
.qt-t .num{text-align:right;white-space:nowrap;font-weight:400}
.qt-t .b{font-weight:800}
.qt-t tfoot td{border-top:1.2pt solid #9DBCCD;border-bottom:0;font-weight:800}
.qt-hi .qt-h{margin-top:9pt}
.qt-h b{display:block;font:800 15pt/1.1 var(--sans);color:#0B3558;font-variant-numeric:tabular-nums}
.qt-h span{display:block;font-size:7.5pt;color:#566B80;margin-top:2pt}
.qt-foot{display:flex;justify-content:space-between;gap:16pt;padding-top:5pt;border-top:.75pt solid #CFDCE8;font-size:7pt;color:#566B80}
.qt-foot span:first-child{font-weight:800;text-transform:uppercase;letter-spacing:.06em}
/* Many funds: the table and the list tighten so the page still holds one sheet. */
.qtr.dense .qt-t td{padding:2pt 5pt}
.qtr.dense .qt-t{font-size:7.5pt}
.qt-more{font-size:7pt;color:#566B80;margin-top:5pt}
.qtr.denser > * + *{margin-top:6pt}
.qtr.denser .qt-title h1{font-size:16pt}
.qtr.denser .qt-stat{padding:5pt 9pt}
.qtr.denser .qt-stat .v{font-size:14pt;margin-top:2pt}
.qtr.denser .qt-t td{padding:1.2pt 5pt}
.qtr.denser .qt-t{font-size:7pt}
.qtr.denser .qt-card{padding:6pt 10pt}
.qtr.denser .fp-fi{font-size:7pt}
.form{width:100%;max-width:7.5in;margin:0 auto;background:#fff;color:#000;
  font-family:var(--sans);font-size:10pt;line-height:1.4}
.lh{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  border-bottom:2px solid #000;padding-bottom:7px;margin-bottom:12px}
.lh-l{display:flex;gap:10px;align-items:flex-start;min-width:0}
.lh-logo{width:.62in;height:.62in;object-fit:contain;flex:0 0 auto}
.lh-n{font-family:var(--serif);font-size:16pt;font-weight:700;line-height:1.15;
  letter-spacing:-.01em}
.lh-sub{font-size:8.5pt;margin-top:3px}
.lh-r{text-align:right;font-size:8.5pt;line-height:1.5;white-space:pre-line}
.doc-title{font-family:var(--serif);font-size:17pt;font-weight:600;margin-top:4px}
.doc-sub{font-size:9.5pt;margin:2px 0 14px;padding-bottom:7px;border-bottom:1px solid #000}
.form table{width:100%;border-collapse:collapse}
.form th{font-size:8.5pt;letter-spacing:.05em;text-transform:uppercase;text-align:left;
  border-bottom:1px solid #000;padding:4px 6px 4px 0;font-weight:600}
.form td{font-size:10pt;padding:5px 6px 5px 0;border-bottom:1px solid #d8d8d8;vertical-align:top}
.form td.num,.form th.num{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums}
.form tr.total td{border-top:1px solid #000;border-bottom:0;font-weight:700}
.doc-h{font-size:9pt;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  margin:18px 0 6px;padding-bottom:4px;border-bottom:1px solid #000}
.dir-card .n{font-family:var(--serif)}
.sig{display:flex;gap:22px;margin-top:30px}
.sig div{flex:1;font-size:8.5pt;text-transform:uppercase;letter-spacing:.08em}
.sig span{display:block;border-bottom:1px solid #000;height:26px;margin-bottom:3px}
.photo-sheet{text-align:center}
.photo-sheet .ph-name{font-size:12pt;font-weight:700;margin-bottom:8px}
.photo-sheet img{max-width:100%;max-height:8.6in;object-fit:contain}
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.dir-card{display:flex;gap:9px;border-bottom:1px solid #ddd;padding-bottom:8px;
  break-inside:avoid;page-break-inside:avoid}
.dir-card img{width:0.85in;height:0.85in;object-fit:cover;border:1px solid #bbb}
.dir-card .n{font-size:10.5pt;font-weight:700}
.dir-card .d{font-size:8.5pt;line-height:1.4}

/* ---------- the check itself ---------- */
/* Courier Prime on the check and its stubs, so the preview reads as printed
   output rather than as another screen. */
.ck-sheet{position:relative;width:8.5in;height:11in;margin:0 auto;background:#fff;color:#000;
  font-family:var(--mono)}
.ck-check{position:absolute;left:0;right:0}
.ck-f{position:absolute;white-space:nowrap;overflow:hidden}
.ck-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ck-guide{outline:1px dashed #b9c3cb}
/* Blank check paper: the app draws the lines, labels and boxes itself. */
/* Every writing line falls a fixed .2in below its field's position, whatever
   the type size, so fields placed at the same height (memo and signature) rule
   one straight line. The text stands on it. */
.ck-blank .ck-line{display:flex;align-items:flex-end;height:.2in;box-sizing:border-box;border-bottom:1px solid #000;padding:0 2px 1px}
.ck-blank .ck-box{border:1.5px solid #000;padding:2px 6px}
.ck-lbl{font-size:6.5pt;text-transform:uppercase;letter-spacing:.06em;line-height:1.15;white-space:normal;color:#000}
.ck-f.ck-addr,.ck-f.ck-org,.ck-f.ck-bank,.ck-f.ck-sig{white-space:normal;overflow:visible;line-height:1.25}
.ck-small{font-size:7pt}
.ck-no{font-weight:700;letter-spacing:.04em}
/* The same .2in drop as .ck-line, so the signature line and the memo line meet
   the eye as one. The signature image stands on the line, dipping onto it the
   way a pen does, and never over the label below. */
.ck-sig .ck-sigline{position:relative;height:.2in;box-sizing:border-box}
.ck-sig .ck-sigline.ruled{border-bottom:1px solid #000}
.ck-sig .ck-lbl{text-align:center;margin-top:2px}
.ck-sigimg{position:absolute;left:50%;transform:translateX(-50%);bottom:-.02in;max-height:.55in;max-width:100%}
.ck-micr{position:absolute;left:0;top:0;overflow:visible;fill:#000}
.ck-window{position:absolute;border:1.5px dashed #2266aa;border-radius:3px}
.ck-window span{position:absolute;top:-11px;left:0;font-size:6.5pt;color:#2266aa;white-space:nowrap}
.ck-sample{position:absolute;left:0;right:0;top:38%;text-align:center;font:700 26pt/1 Arial,sans-serif;color:rgba(190,0,0,.32);
  transform:rotate(-10deg);letter-spacing:.12em;pointer-events:none}
.ck-stub{position:absolute;left:.55in;right:.55in}
.ck-stub-h{font-size:10pt;font-weight:700;border-bottom:1px solid #000;padding-bottom:3px;
  margin-bottom:5px;display:flex;justify-content:space-between}
.ck-stub-h span{font-size:8pt;font-weight:400;text-transform:uppercase;letter-spacing:.1em}
.ck-stub-t{width:100%;border-collapse:collapse}
.ck-stub-t td{font-size:9pt;padding:2px 0;border:0}
.ck-stub-t td:first-child{width:1.15in;color:#444;font-size:8pt;text-transform:uppercase;
  letter-spacing:.07em}
.ck-stub-t tr.ck-stub-tot td{font-weight:700;font-size:10.5pt;border-top:1px solid #000;
  padding-top:4px}
/* alignment guide */
.ck-guidesheet{outline:1px solid #ccc}
.ck-outline{outline:2px solid #2f6f3e}
.ck-checklabel{position:absolute;top:2px;left:4px;font-size:7pt;color:#2f6f3e;
  text-transform:uppercase;letter-spacing:.1em}
.ck-mark{position:absolute;height:0;border-top:1px solid #c0392b}
.ck-mark span{position:absolute;top:-11px;left:0;font-size:6.5pt;color:#c0392b;white-space:nowrap}
.ck-rx{position:absolute;top:0;bottom:0;width:0;border-left:1px dotted #ccd}
.ck-rx b{position:absolute;top:2px;left:2px;font-size:6.5pt;color:#99a}
.ck-ry{position:absolute;left:0;right:0;height:0;border-top:1px dotted #ccd}
.ck-ry b{position:absolute;left:2px;top:2px;font-size:6.5pt;color:#99a}

.previewwrap{background:#8f9691;padding:14px;overflow:auto;margin-top:12px;border-radius:var(--radius)}
.previewwrap .form,.previewwrap .ck-sheet{box-shadow:0 2px 12px rgba(0,0,0,.35)}

@media print{
  /* Paper is white and ink is black whatever theme the screen is wearing.
     theme.js sets color-scheme on <html> as an inline style, which beats a
     plain rule here: without !important a dark theme left the scheme dark,
     and with "Background graphics" ticked Chrome painted every page's
     margins near black. */
  :root{color-scheme:light !important}
  /* The page margins show the html element's own background: white, never the theme's. */
  html{background:#fff !important}
  body{background:#fff;color:#121212}
  #printroot{background:#fff;color:#121212}
  body>*{display:none !important}
  #printroot{display:block !important}
  /* The navy band and the table headers are the design, not decoration.
     Without this most browsers drop the fill and print white on white. */
  .rep,.rep *,.ovr,.ovr *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rep{max-width:none}
  /* The dashboard report is the one landscape sheet. */
  .ovr{page:ovr}
  @page ovr{size:letter landscape;margin:.35in .4in}
  /* The financial overview (portrait) and the quarterly report (landscape)
     set their paper with an ordinary @page rule that print.js adds for the
     one sheet being printed (pageFor), not a named page: the desktop app's
     print engine laid a named page out over three sheets. */
  .rep-card,.rep-stat,.rep-band,.rep-pc{break-inside:avoid;page-break-inside:avoid}
  .previewwrap{background:none;padding:0}
  .form{max-width:none}
  .credit,#toast,.veil{display:none !important}
  .ck-sheet{box-shadow:none;margin:0}
  @page{size:letter portrait;margin:0.5in}
  /* A check sheet owns the whole page: no margin, or nothing lines up. */
  @page checkpage{size:letter portrait;margin:0}
  .ck-sheet{page-break-after:always}
}

/* What this copy of the app may do, in the rail's masthead. Free says so
   plainly, and opens the same explanation the locked buttons give. */
.plan-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 11px;min-height:28px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.03em;
  background:rgba(224,178,90,.16);color:#F3D59A;border:1px solid rgba(224,178,90,.4);
  border-radius:999px;cursor:pointer}
.plan-badge:hover{background:rgba(224,178,90,.26)}
.plan-badge.trial{background:rgba(52,198,168,.14);color:#9DEBD6;border-color:rgba(52,198,168,.4)}
.plan-badge:focus-visible{outline:2px solid var(--rail-mark);outline-offset:2px}

/* ---------- invoice designs (invoice-templates.js) ----------
   One sheet for the preview, the paper and the PDF, in points because it is a
   printed document. The page's own half-inch margin frames it on paper; on
   screen .ivt-paper stands in for the page. .ivt-essential is Modern
   Essential; .ivt-split is Accent Edge, the same page with a stripe down its
   left edge and the accent on the title, the labels, the table header and
   the total. The accent comes from the design's entry, as --ivt-accent.
   The sheet is a column at least one page tall (--ivt-page, set by the
   renderer from CONFIG.print), so the signature and footer (.ivt-end,
   margin-top:auto) sit at the foot of a short invoice's page and follow the
   last row of a longer one; thead repeats on every printed page and no row
   or block is split between two. */
.ivt{--ivt-accent:#127867;--ivt-ink:#26333a;--ivt-soft:#5d6b72;--ivt-line:#dce3e6;
  display:flex;flex-direction:column;box-sizing:border-box;min-height:var(--ivt-page,9.85in);
  background:#fff;color:var(--ivt-ink);font:10pt/1.45 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;text-align:left;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.ivt *{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ivt p{margin:0 0 3pt}
.ivt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18pt;padding-bottom:16pt;border-bottom:1.5pt solid var(--ivt-accent);break-inside:avoid}
.ivt-biz{display:flex;gap:10pt;align-items:flex-start;min-width:0}
.ivt-logo{display:block;max-height:46pt;max-width:110pt;object-fit:contain}
.ivt-name{font-size:16pt;font-weight:700;line-height:1.2;margin-bottom:3pt}
.ivt-contact{font-size:9pt;line-height:1.5;color:var(--ivt-soft)}
.ivt-title{flex:none;text-align:right}
.ivt-title h1{margin:0;font-family:inherit;font-size:24pt;line-height:1.05;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ivt-ink)}
.ivt-no{margin-top:5pt;font-size:11pt;font-weight:600}
.ivt-state{display:inline-block;margin-top:6pt;padding:1pt 7pt;border:1pt solid currentColor;border-radius:3pt;
  font-size:8pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ivt-soft)}
.ivt-state.ivt-paid{color:#2D5A27}
.ivt-state.ivt-void{color:#A64D5D}
.ivt-parties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24pt;margin:20pt 0 22pt;break-inside:avoid}
.ivt-cap{margin-bottom:5pt;font-size:7.5pt;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ivt-soft)}
.ivt-client{margin-bottom:2pt;font-size:11.5pt;font-weight:700}
.ivt-details{justify-self:end;width:100%;max-width:230pt}
.ivt-meta{margin:0}
.ivt-meta div{display:flex;justify-content:space-between;gap:18pt;padding:1.5pt 0}
.ivt-meta dt{color:var(--ivt-soft)}
.ivt-meta dd{margin:0;font-weight:600;text-align:right}
.ivt-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ivt-c-qty{width:13%}
.ivt-c-money{width:18%}
.ivt-table thead{display:table-header-group}
.ivt-table th{padding:7pt 8pt;border:0;background:var(--ivt-accent);color:#fff;font-size:8pt;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.ivt-table td{padding:7pt 8pt;border-bottom:.75pt solid var(--ivt-line);vertical-align:top;overflow-wrap:anywhere}
.ivt-table th+th,.ivt-table td+td{text-align:right;font-variant-numeric:tabular-nums}
/* a shadow the colour of the header, reaching into the cell before, covers the hairline seam a PDF viewer draws between two filled cells */
.ivt-table th+th{box-shadow:-1.5pt 0 0 0 var(--ivt-accent)}
.ivt-table tr{break-inside:avoid;page-break-inside:avoid}
.ivt-summary{display:grid;grid-template-columns:minmax(0,1fr) 200pt;gap:24pt;margin-top:16pt;break-inside:avoid;page-break-inside:avoid}
.ivt-pay{font-size:9.5pt}
.ivt-row{display:flex;justify-content:space-between;gap:12pt;padding:3pt 0;font-variant-numeric:tabular-nums}
.ivt-row span:first-child{color:var(--ivt-soft)}
.ivt-row.ivt-grand{margin-top:4pt;padding-top:7pt;border-top:1.5pt solid var(--ivt-ink);font-size:13pt;font-weight:700}
.ivt-row.ivt-grand span:first-child{color:inherit}
.ivt-notes{margin-top:18pt;font-size:9.5pt;break-inside:avoid;page-break-inside:avoid}
.ivt-end{margin-top:auto;padding-top:30pt;break-inside:avoid;page-break-inside:avoid}
.ivt-sign{width:190pt;margin-bottom:14pt;padding-top:4pt;border-top:.75pt solid var(--ivt-ink);font-size:8.5pt;color:var(--ivt-soft)}
.ivt-foot{display:flex;justify-content:space-between;gap:12pt;padding-top:7pt;border-top:.75pt solid var(--ivt-line);font-size:8pt;color:var(--ivt-soft)}
.ivt-split{padding-left:16pt;border-left:10pt solid var(--ivt-accent)}
.ivt-split .ivt-title h1,.ivt-split .ivt-cap,.ivt-split .ivt-row.ivt-grand{color:var(--ivt-accent)}
.ivt-split .ivt-row.ivt-grand{border-top-color:var(--ivt-accent)}

/* On screen: the preview window, the page as it will print. */
.ivt-preview{max-height:72vh;overflow:auto;padding:16px;background:#8f9691;border-radius:var(--radius)}
.ivt-paper{width:8.5in;margin:0 auto;padding:.5in;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.card.iv-pv{max-width:960px}
.iv-pv-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.iv-pv-hd h2{margin:0}

/* The design picker, on the invoice screens: two buttons, each with a tiny page. */
.iv-design{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 0}
.iv-design-k{font-size:13px;font-weight:700;color:var(--text-soft)}
.iv-design-opts{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.iv-design-b{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--text-soft);cursor:pointer}
.iv-design-b + .iv-design-b{border-left:1px solid var(--line)}
.iv-design-b[aria-pressed="true"]{background:color-mix(in srgb,var(--c-navy) 13%,var(--surface));color:var(--heading)}
.iv-design-b:disabled{cursor:default}
.iv-design-b:focus-visible{outline:2px solid var(--c-navy);outline-offset:-3px}
.iv-design-sw{flex:none;width:17px;height:22px;border:1px solid #c9d2d6;border-radius:2px;
  background:linear-gradient(var(--sw) 0 0) 3px 7px/9px 1.5px no-repeat,linear-gradient(var(--sw) 0 0) 3px 11px/9px 3px no-repeat,#fff}
.iv-design-sw.split{border-left:4px solid var(--sw);background:linear-gradient(#b9c4c8 0 0) 2px 7px/8px 1.5px no-repeat,linear-gradient(var(--sw) 0 0) 2px 11px/8px 3px no-repeat,#fff}

/* Help and support (support.js): the header button and its window */
.help-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--heading);font:600 14px var(--sans);cursor:pointer}
.help-btn svg{width:18px;height:18px}
.help-btn:hover{border-color:var(--c-navy)}
.help-btn:focus-visible{outline:2px solid var(--c-navy);outline-offset:2px}
.help-card #hp-done{margin:8px 0 4px;padding:12px 14px;border-radius:var(--radius);background:color-mix(in srgb,var(--good) 12%,var(--surface));color:var(--heading);font-weight:600}
@media (max-width:760px){.help-btn span{display:none}.help-btn{padding:0 9px}}
@media print{.help-btn{display:none}}

/* Printable visitor flyers (js/flyers.js): the design library beside a
   preview made from the same layout as the PDF and the printed page. */
.fly-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.fly-lib{display:grid;gap:10px}
.fly-tpl{display:flex;gap:14px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.fly-tpl.on{border-color:var(--c-navy);box-shadow:0 0 0 1px var(--c-navy) inset}
.fly-tpl img{width:96px;height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.12);flex:0 0 auto}
.fly-page{position:relative;width:100%;max-width:440px;border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(11,53,88,.16),0 1px 3px rgba(0,0,0,.08)}
.fly-art img{display:block}
@media (max-width:900px){.fly-wrap{grid-template-columns:1fr}.fly-page{max-width:none}}