/* Church Ledger — 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{
  /* ---- 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;
  --radius:4px;

  --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 Sanctuary look ---- */
  --bg:#F9F7F2;
  --rail:#ffffff;
  --surface:#ffffff;
  --surface-2:#F4F1EA;     /* quiet fills: hover, empty states, chips */
  --input:#ffffff;
  --line:#E2E4E7;
  --line-soft:#edeef0;
  --text:#121212;
  --text-soft:#4b4f56;
  --muted:#8a8d93;
  --heading:#1A2B44;
  --brand:#1A2B44;         /* primary buttons, selected sub tabs */
  --brand-hover:#04162e;
  --on-brand:#ffffff;
  --accent:#8C6A42;        /* secondary buttons, links, the rail marker */
  --accent-wash:rgba(140,106,66,.08);
  --good:#2D5A27;
  --bad:#A64D5D;
  --overlay:rgba(20,30,40,.55);
  --tip:#121212;
  --shadow:0 4px 20px rgba(26,43,68,.08);
  --shadow-lg:0 18px 50px rgba(0,0,0,.25);

  /* Section colours. Each screen's header bars take one, the way the Giving
     screen's fund boxes do. A dark theme lifts them so they still read. */
  --c-navy:#1A2B44;
  --c-oak:#8C6A42;
  --c-green:#2D5A27;
  --c-rose:#A64D5D;
  --c-slate:#374762;
  --c-plum:#6E5A7A;
}

/* ---- the themes ---- */
:root[data-theme="dark"]{
  --bg:#121417; --rail:#181b1f; --surface:#1b1e23; --surface-2:#23272d; --input:#15181c;
  --line:#2f343b; --line-soft:#262a30; --text:#e9e7e2; --text-soft:#a9aeb6; --muted:#7c828b;
  --heading:#e3e9f2; --brand:#3d5f91; --brand-hover:#4d72a8; --on-brand:#fff;
  --accent:#c9a06a; --accent-wash:rgba(201,160,106,.12); --good:#6fb766; --bad:#e08594;
  --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);
  --c-navy:#3d5f91; --c-oak:#a47d4f; --c-green:#3f7a37; --c-rose:#b2596a; --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; --text:#ece8f6; --text-soft:#b3aac8; --muted:#8a82a0;
  --heading:#e2d6ff; --brand:#7657d0; --brand-hover:#8a6de0; --on-brand:#fff;
  --accent:#c4a7ff; --accent-wash:rgba(196,167,255,.12); --good:#79c98a; --bad:#f08da4;
  --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);
  --c-navy:#6247b8; --c-oak:#9a6fc9; --c-green:#3f8a63; --c-rose:#b4507a; --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; --text:#e7eaee; --text-soft:#aeb6c0; --muted:#8a939e;
  --heading:#e4ebf2; --brand:#5d7488; --brand-hover:#6e869b; --on-brand:#fff;
  --accent:#a9bccd; --accent-wash:rgba(169,188,205,.12); --good:#8cc281; --bad:#e2939f;
  --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);
  --c-navy:#4d6275; --c-oak:#7c6a58; --c-green:#4d7555; --c-rose:#8f5c66; --c-slate:#5b6674; --c-plum:#6d6078;
}
:root[data-theme="ocean"]{
  --bg:#eef5f9; --rail:#ffffff; --surface:#ffffff; --surface-2:#f2f8fb; --input:#ffffff;
  --line:#d3e2eb; --line-soft:#e5eef4; --text:#0f2433; --text-soft:#48626f; --muted:#7b93a0;
  --heading:#0b4f7c; --brand:#0e6ba8; --brand-hover:#0a5689; --on-brand:#fff;
  --accent:#12879e; --accent-wash:rgba(18,135,158,.09); --good:#2a7a4b; --bad:#b5485d;
  --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);
  --c-navy:#0e6ba8; --c-oak:#12879e; --c-green:#2a7a4b; --c-rose:#b5485d; --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; --text:#e6ecf5; --text-soft:#a1b1c9; --muted:#7587a3;
  --heading:#d4e3ff; --brand:#2f6fd6; --brand-hover:#4381e6; --on-brand:#fff;
  --accent:#d4a95c; --accent-wash:rgba(212,169,92,.12); --good:#6fc28f; --bad:#ee8b9b;
  --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);
  --c-navy:#2659b3; --c-oak:#a8813f; --c-green:#2f7d58; --c-rose:#b3506a; --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)}

/* ---------- shell ----------
   A fixed left rail on desktop, as in the design. Below 900px it lies down
   into a scrolling strip across the top, because ten destinations will not
   fit in a narrow window any other way. */
.shell{display:flex;min-height:100vh;align-items:stretch}
.masthead{flex:0 0 248px;background:var(--rail);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:28px 0 16px;position:sticky;top:0;height:100vh}
.mh-top{padding:0 20px 24px}
.mh-id{display:flex;align-items:flex-start;gap:11px;min-width:0}
.mh-logo{width:36px;height:36px;flex:0 0 auto;margin-top:1px;object-fit:contain;border-radius:6px}
/* A long church name has to fit a 248px rail without becoming a paragraph. */
.masthead h1{margin:0;font-family:var(--serif);font-size:20px;line-height:25px;
  font-weight:600;color:var(--heading);letter-spacing:-.01em;overflow-wrap:break-word}
.masthead .sub{margin:4px 0 0;font-size:13px;line-height:18px;color:var(--text-soft)}
.tabs{display:flex;flex-direction:column;gap:2px;padding:0 12px;overflow-y:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:none;
  color:var(--text-soft);padding:11px 14px;font-family:var(--sans);font-size:15px;font-weight:400;
  border-radius:var(--radius);cursor:pointer;white-space:nowrap;position:relative}
.tab:hover{background:var(--surface-2);color:var(--heading)}
.tab[aria-selected="true"]{background:var(--surface-2);color:var(--heading);font-weight:600}
.tab[aria-selected="true"]::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;
  width:3px;background:var(--accent);border-radius:0 2px 2px 0}
.tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tab .ic{width:20px;height:20px;flex:0 0 auto;opacity:.8}
.tab[aria-selected="true"] .ic{opacity:1;color:var(--accent)}
.rq-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--bad);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:16px 20px 0}
.whoami{border-top:1px solid var(--line);padding-top:14px}
.whoami b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--heading)}
.whoami>span{font-size:13px;color:var(--text-soft)}
.whoami-act{margin-top:6px;font-size:13px}
.whoami-act button{background:none;border:0;color:var(--accent);text-decoration:underline;
  cursor:pointer;padding:2px 0;font-size:13px}
.whoami-act .sep{margin:0 6px;color:var(--line)}

/* 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}

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

main{flex:1;min-width:0;overflow-x:hidden}
.sheet{max-width:1200px;margin:0 auto;padding:28px 32px 32px}
.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 sidebar on desktop, under the content on mobile. */
.mobile-credit{display:none}

@media(max-width:900px){
  .shell{flex-direction:column}
  .masthead{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--line);padding:18px 0 0;
    position:static;height:auto}
  .mh-top{padding:0 16px 14px}
  .tabs{flex-direction:row;gap:4px;padding:0 12px 12px;overflow-x:auto}
  .tab{width:auto;padding:9px 13px;font-size:14px}
  .tab[aria-selected="true"]::before{left:6px;right:6px;top:auto;bottom:-12px;width:auto;height:3px;
    border-radius:2px 2px 0 0}
  .tab .ic{display:none}
  .mh-foot{display:none}
  .mobile-credit{display:block}
  .sheet{padding:20px 16px 26px}
}

/* ---------- the page heading ----------
   Every screen opens with its name, an icon in its own colour, and one line
   saying what it is for. Before this the screens began with a paragraph and
   nothing to tell one from another at a glance. */
.page-head{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.page-head .ph-badge{--pc:var(--c-navy);width:46px;height:46px;border-radius:10px;flex:0 0 auto;
  background:var(--pc);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow)}
.page-head .ph-badge svg{width:24px;height:24px}
.page-head h1{margin:0;font-family:var(--serif);font-size:30px;line-height:36px;font-weight:600;
  color:var(--heading);letter-spacing:-.01em}
.page-head p{margin:2px 0 0;font-size:14px;color:var(--text-soft)}
.page-head .ph-aside{margin-left:auto;text-align:right;font-size:14px;color:var(--text-soft)}
@media(max-width:640px){.page-head h1{font-size:24px;line-height:30px}.page-head .ph-aside{display:none}}

/* ---------- blocks ----------
   The Giving screen's look, used everywhere: a card with a coloured header
   bar. --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-top:3px solid var(--hl);border-radius:var(--radius);box-shadow:var(--shadow);
  margin:0 0 20px;overflow:visible}
.block-hd{display:flex;align-items:center;gap:9px;background:var(--hl);color:#fff;
  font-family:var(--sans);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:600;padding:9px 16px;margin-top:-1px}
.block-hd svg{width:17px;height:17px;flex:0 0 auto;opacity:.95}
.block-hd .aside{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;opacity:.9}
.block-bd{padding:16px 18px 4px}
.block-bd.flush{padding: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;margin:0}
.block-bd > .btnrow:last-child{margin-bottom:12px}
.block-bd > .hint:first-child{margin-top:0;margin-bottom:12px}
.block-foot{padding:10px 18px;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)}}

/* ---------- stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 20px}
/* Two across on a phone rather than one tall column. */
@media(max-width:640px){.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px 8px}
  .stat .st-v{font-size:28px;line-height:34px}.stat .st-v.money{font-size:18px}.stat .st-n{font-size:12px}}
/* Centred: icon, then the short label, then the figure. */
.stat{--sc:var(--c-navy);background:var(--surface);border:1px solid var(--line);text-align:center;
  border-top:3px solid var(--sc);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 12px 13px}
.stat .st-top{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px}
.stat .st-ic{width:30px;height:30px;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:16px;height:16px}
.stat .st-k{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  color:var(--text-soft);line-height:17px;white-space:nowrap}
.stat .st-v{font-family:var(--serif);font-size:32px;line-height:38px;font-weight:600;color:var(--heading)}
.stat .st-v.money{font-family:var(--mono);font-size:24px;letter-spacing:-.02em}
.stat .st-n{font-size:13px;color:var(--text-soft);margin-top:2px}
.stat[data-go]{cursor:pointer}
.stat[data-go]:hover{border-color:var(--sc)}
.glance{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--text-soft);margin:-6px 0 20px}
.glance b{color:var(--heading);font-weight:600}

/* ---------- type ---------- */
.eyebrow{font-family:var(--sans);font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--heading);font-weight:600;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 solid var(--line);border-radius:var(--radius);font-size:15px}

/* ---------- forms ---------- */
.fld{display:block;margin:0 0 16px}
.fld>span{display:block;font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:.05em;
  font-weight:600;color:var(--heading);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 12px;border:1px solid var(--line);
  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:inset 0 0 0 1px var(--brand)}
.fld textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
@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:8px;margin:14px 0}
/* Primary is the theme's brand colour. Secondary is an accent outline.
   Destructive actions are a quiet text link, so nobody deletes by reflex. */
.btn{border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);padding:11px 20px;
  border-radius:var(--radius);font-family:var(--sans);font-size:14px;letter-spacing:.05em;
  font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.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:none;color:var(--accent);border-color:var(--accent)}
.btn.ghost:hover{background:var(--accent-wash)}
.btn.danger{background:none;border-color:transparent;color:var(--bad);text-decoration:underline;
  padding-left:8px;padding-right:8px}
.btn.danger:hover{background:rgba(166,77,93,.08)}
.btn.tiny{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.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}
.check input{width:17px;height:17px;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}
.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}
/* 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}
table.led tbody tr:hover td{background:var(--surface-2)}
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:1px solid var(--heading);border-bottom:0;font-weight:600;
  background:var(--surface)}
table.led tr.total:hover td{background:var(--surface-2)}
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(45,90,39,.10);border-left-color:var(--good)}
.flag.bad{background:rgba(166,77,93,.10);border-left-color:var(--bad)}
.flag.info{background:var(--surface-2);border-left-color:var(--heading)}

/* ---------- 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}
.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:16px;text-align:center;
  color:var(--text-soft);font-size:13px;cursor:pointer;background:var(--surface-2)}
.drop:hover,.drop.over{border-color:var(--brand);color:var(--heading)}

/* ---------- 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 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)}

/* ---------- theme picker ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.theme-opt{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);cursor:pointer;text-align:left}
.theme-opt:hover{border-color:var(--accent)}
.theme-opt[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.theme-sw{display:flex;height:34px;border-radius:5px;overflow:hidden;border:1px solid rgba(128,128,128,.25)}
.theme-sw i{flex:1}
.theme-sw i:first-child{flex:2}
.theme-nm{font-size:14px;font-weight:600;color:var(--heading)}

/* ---------- 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:hover{background:var(--surface-2)}
.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}
@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)}
.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}
.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}}

/* ═══════════════ 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. */
#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-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}

/* 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}
.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}
.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. */
  :root{color-scheme:light}
  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 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rep{max-width:none}
  .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}
}