/* Baptizo components: plain HTML, every class prefixed bz-. Load after tokens.css. */
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:24px;background:var(--surface);color:var(--ink)}
.bz-pad{padding:var(--space-5)}
.bz-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.bz-stack{display:flex;flex-direction:column;gap:var(--space-3)}
.bz-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* the mark: fills come from these four, set by context */
.bz-mark{--m1:var(--water-sky);--m2:var(--water-mid);--m3:var(--water-deep);--mr:var(--water-mid);--mg:var(--surface)}
.bz-card .bz-mark,.bz-mark.on-raised{--mg:var(--surface-raised)}
.bz-mark-rev,.bz-sidebar .bz-mark{--m1:var(--mark-rev-sky);--m2:var(--mark-rev-mid);--m3:var(--mark-rev-deep);--mr:var(--mark-rev-ring);--mg:var(--sidebar)}

/* Lockup */
.bz-lockup{display:inline-block;white-space:nowrap;line-height:1;font-family:var(--font-serif);font-weight:600;font-size:40px;color:var(--wordmark)}
.bz-lockup>svg{display:inline-block;width:1.52cap;height:1.52cap;vertical-align:-0.26cap;margin-right:.2em}
.bz-lockup-rev{color:var(--on-sidebar)}
.bz-lockup-stacked{display:inline-flex;flex-direction:column;align-items:center;gap:.22em}
.bz-lockup-stacked>svg{width:1.7em;height:1.7em;margin:0;vertical-align:0}
.bz-tagline{font-family:var(--font-serif);font-style:italic;font-size:18px;line-height:26px;color:var(--ink-muted)}

/* Button */
.bz-btn{font:700 15px/20px var(--font-sans);min-height:var(--touch-min);padding:0 var(--space-5);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;text-decoration:none;box-sizing:border-box}
.bz-btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.bz-btn-quiet{background:transparent;border-color:transparent;color:var(--brand);padding:0 var(--space-3)}
.bz-btn-block{width:100%;min-height:56px;font-size:18px}
.bz-btn:hover{filter:brightness(.94)}
.bz-btn:active{transform:scale(.98)}
.bz-btn:focus-visible,.bz-input:focus-visible,.bz-nav-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* StatusPill */
.bz-pill{display:inline-flex;align-items:center;gap:var(--space-1);font:600 13px/18px var(--font-sans);padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-muted);border:1px solid var(--line);white-space:nowrap}
.bz-pill .bz-icon{width:14px;height:14px;stroke-width:2}
.bz-pill-brand{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.bz-pill-attention{background:var(--attention-soft);color:var(--attention);border-color:transparent}
.bz-pill-done{background:var(--done-soft);color:var(--done);border-color:transparent}
.bz-pill-private{background:var(--attention-soft);color:var(--attention);border:1px dashed var(--attention)}

/* Card */
.bz-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5)}
.bz-card-glow{background:var(--glow-soft);border-color:var(--glow);color:var(--ink)}
.bz-overline{font:700 12px/16px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.bz-card-glow .bz-overline{color:var(--ink)}
.bz-card-title{font:600 22px/28px var(--font-serif);margin:var(--space-1) 0 2px}
.bz-meta{color:var(--ink-muted)}

/* Sidebar */
.bz-sidebar{width:var(--sidebar-width);box-sizing:border-box;background:var(--sidebar);color:var(--on-sidebar);padding:var(--space-5) 14px;display:flex;flex-direction:column;gap:2px}
.bz-sidebar .bz-lockup{font-size:26px;color:var(--on-sidebar);padding:0 var(--space-3)}
.bz-sidebar-church{font-size:14px;line-height:20px;color:var(--on-sidebar-muted);padding:6px var(--space-3) var(--space-4)}
.bz-sidebar-label{font:700 12px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-sidebar-muted);padding:var(--space-5) var(--space-3) var(--space-2)}
.bz-nav-item{display:flex;align-items:center;gap:11px;min-height:var(--touch-min);padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--on-sidebar);text-decoration:none;font:600 15px/20px var(--font-sans)}
.bz-nav-count{margin-left:auto;font-size:13px;color:var(--on-sidebar-muted)}
.bz-nav-item[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.bz-nav-item[aria-current="page"] .bz-icon{color:var(--brand)}
.bz-nav-item[aria-current="page"] .bz-nav-count{color:var(--ink-muted)}
.bz-sidebar :focus-visible{outline-color:var(--on-sidebar)}
.bz-sidebar .bz-card-glow{padding:14px;font-size:14px;line-height:20px;border-radius:var(--radius-md)}

/* TextField */
.bz-field{display:flex;flex-direction:column;gap:6px;max-width:360px}
.bz-label{font:700 15px/20px var(--font-sans);color:var(--ink)}
.bz-input{font:400 16px/24px var(--font-sans);min-height:var(--touch-min);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink);box-sizing:border-box;width:100%}
.bz-input::placeholder{color:var(--ink-muted)}
.bz-hint{font:600 13px/18px var(--font-sans);color:var(--ink-muted)}
.bz-field-error .bz-input{border-color:var(--attention)}
.bz-field-error .bz-hint{color:var(--attention)}