@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fraunces-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); }
/* Layout concept: a linocut print run. Ink on paper, hard offset "press" shadows, one red for the Sacred Heart. Phone first, bottom tab bar. */
/* Layout concept: a bright parish newsletter. White paper, soft rounded cards, Marian blue with a touch of gold; the logo's ink drawing does the character work. Always light. */
:root {
  --paper: #ffffff;
  --paper-2: #f3f6fb;
  --ink: #1e2a3b;
  --ink-2: #5b6779;
  --rule: #dfe5ee;
  --line: #c9d3e1;
  --red: #2f5d9b;          /* primary accent: Marian blue */
  --red-ink: #ffffff;
  --gold: #c8962e;
  --heart: #b8322a;        /* used only for Prayer & a Pint markers */
  --green: #2c7a4b;
  --shadow: rgba(30, 42, 59, 0.08);
  --logo-filter: none;
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "Nunito Sans", system-ui, sans-serif;
  --r: 12px;
  --tabbar-h: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--f-body);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
body.locked { overflow: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
img { max-width: 100%; }
.inkimg { filter: var(--logo-filter); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.selectable { user-select: all; }
.grow { flex: 1; }

/* top bar */
.demo-bar { background: var(--paper-2); color: var(--ink-2); text-align: center; font-size: 0.8rem; padding-block: 6px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper);
  display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(200, 150, 46, 0.35);
  padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand span { display: flex; flex-direction: column; min-width: 0; }
.brand strong { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; line-height: 1.05; letter-spacing: 0.005em; white-space: nowrap; }
.brand small { margin-top: 3px; font-size: 0.62rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.18em; color: #a87b1f; white-space: nowrap; }
.team-btn { white-space: nowrap; flex: none; }
@media (max-width: 430px) {
  .brand { gap: 9px; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 1.2rem; }
  .brand small { font-size: 0.55rem; letter-spacing: 0.14em; }
  .team-btn { padding-inline: 12px; font-size: 0.85rem; }
}
@media (max-width: 365px) {
  .brand strong { font-size: 1.1rem; }
  .brand small { font-size: 0.5rem; letter-spacing: 0.13em; }
}
.topnav { display: none; gap: 4px; margin-left: auto; }
.topnav a { text-decoration: none; padding: 6px 12px; border-radius: var(--r); font-weight: 500; position: relative; }
.topnav a.on { background: var(--paper-2); color: var(--red); }
.team-btn, .who { margin-left: auto; }
.who { font-weight: 600; font-size: 0.9rem; }
@media (min-width: 760px) {
  .topnav { display: flex; }
  .team-btn, .who { margin-left: 0; }
  .tabbar { display: none !important; }
  body { padding-bottom: 0; }
}

/* bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; text-decoration: none; font-size: 0.72rem; font-weight: 500; color: var(--ink-2); position: relative; min-height: var(--tabbar-h); justify-content: center; }
.tabbar a.on { color: var(--ink); }
.tabbar a.on svg { stroke: var(--red); }
.tabbar svg, .topnav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.count { position: absolute; top: 4px; left: calc(50% + 6px); background: var(--heart); color: #ffffff; font-size: 0.68rem; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; font-style: normal; }
.topnav .count { position: static; display: inline-grid; margin-left: 6px; }

/* pages */
main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.page { max-width: 880px; margin: 0 auto; padding-block: 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.page.narrow { max-width: 520px; }
.page-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 6vw, 2.4rem); line-height: 1.1; }
.section-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lede { font-size: 1.05rem; max-width: 60ch; color: var(--ink-2); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--gold); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px;
  background: var(--red); color: var(--red-ink); border: 1px solid var(--red); border-radius: 999px;
  font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 2px 6px rgba(47, 93, 155, 0.25);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { background: var(--paper); color: var(--red); border-color: var(--line); box-shadow: 0 1px 3px var(--shadow); }
.btn.ghost:active { box-shadow: none; }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 0.9rem; }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--red-ink); box-shadow: 0 1px 3px var(--shadow); }
.btn.danger-text { color: var(--red); }
.btn:disabled { opacity: 0.6; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; color: var(--red); text-underline-offset: 3px; cursor: pointer; font-weight: 500; }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.chip { border: 1px solid var(--line); background: var(--paper-2); border-radius: 999px; padding: 4px 10px; font-size: 0.85rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 0.75rem; border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 2px 8px; }

/* home */
.hero { display: grid; gap: 20px; align-items: center; padding-top: 8px; }
.hero .badge { width: min(230px, 62vw); justify-self: center; }
.hero h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.1rem, 8vw, 3.2rem); line-height: 1.05; margin-block: 8px 12px; }
.hero-text { display: flex; flex-direction: column; gap: 4px; }
.hero .row { margin-top: 16px; flex-wrap: wrap; }
@media (min-width: 760px) { .hero { grid-template-columns: 300px 1fr; gap: 40px; } .hero .badge { width: 100%; } }
.next { display: flex; flex-direction: column; gap: 10px; }

/* event cards */
.event-card {
  display: flex; gap: 14px; align-items: stretch; text-align: left; width: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; cursor: pointer;
  box-shadow: 0 2px 10px var(--shadow); transition: transform .08s, box-shadow .08s;
}
.event-card:active { transform: translateY(1px); box-shadow: 0 1px 4px var(--shadow); }
.date-stamp { flex: none; width: 58px; border: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 0; background: var(--paper-2); }
.ds-mon { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--red); }
.ds-day { font-family: var(--f-display); font-weight: 600; font-size: 1.7rem; line-height: 1.05; color: var(--ink); }
.ds-wd { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.ec-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--ink-2); }
.ec-title { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.ec-meta { color: var(--ink-2); font-size: 0.9rem; }
.ec-repeat { font-size: 0.82rem; color: var(--red); font-weight: 600; }
.event-card.big { padding: 16px; box-shadow: 0 4px 16px rgba(47, 93, 155, 0.15); }
.event-card.big .date-stamp { width: 72px; }
.event-card.big .ds-day { font-size: 2.2rem; }
.event-card.big .ec-title { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; }
.event-card.big { border-top: 4px solid var(--gold); }
.empty { color: var(--ink-2); }
.empty-box { border: 2px dashed var(--rule); border-radius: var(--r); padding: 28px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.empty-box strong { color: var(--ink); }

/* calendar */
.cal { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: 0 2px 10px var(--shadow); background: var(--paper); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-nav h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--ink-2); padding-bottom: 4px; }
.cal-day { aspect-ratio: 1; max-width: 100%; border: 1.5px solid transparent; background: none; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 500; padding: 0; }
.cal-day.past { color: var(--ink-2); }
.cal-day.has { background: var(--paper-2); }
.cal-day.today span { background: var(--red); color: var(--red-ink); border-radius: 999px; width: 28px; height: 28px; display: grid; place-items: center; }
.cal-day.picked { border-color: var(--red); }
.dots { display: flex; gap: 3px; height: 6px; }
.dots b { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.dots b.pint { background: var(--gold); }
.today-link { margin-top: 10px; }

/* sheet */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(30, 42, 59, 0.35); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  background: var(--paper); width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; animation: up .18s ease-out;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 760px) { .scrim { align-items: center; } .sheet { border-radius: 10px; border-bottom: 1px solid var(--rule); box-shadow: 0 10px 40px rgba(30, 42, 59, 0.2); } }
@keyframes up { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .btn, .event-card { transition: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.sheet-head h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; min-width: 0; }
.sheet-head .icon-btn { width: 38px; height: 38px; font-size: 1rem; flex: none; }
.sheet-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sheet-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--rule); }
.poster { width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--ink-2); padding-top: 3px; }
.facts dd { margin: 0; }
.desc { white-space: pre-wrap; }

/* forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.card { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--paper); box-shadow: 0 2px 10px var(--shadow); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.hint { font-size: 0.85rem; color: var(--ink-2); }
.error { color: var(--red); font-weight: 600; }
input:not([type=checkbox]):not([type=file]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); font-size: 16px;
}
textarea { resize: vertical; }
input[type=file] { font-size: 0.9rem; max-width: 100%; }
select.mini { width: auto; min-height: 36px; padding: 4px 8px; font-size: 0.9rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.check { display: flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 500; }
.check input { width: 20px; height: 20px; accent-color: var(--red); }
.skips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.skips .label { width: 100%; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { min-height: 44px; border: 0; background: var(--paper); font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on.in { background: var(--green); color: #ffffff; }
.seg button.on.out { background: var(--red); color: var(--red-ink); }
.notice { border: 1px solid var(--line); border-left-width: 4px; border-left-color: var(--gold); border-radius: var(--r); padding: 12px 14px; background: var(--paper-2); }
.login-mark { width: 84px; }

/* posters */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; box-shadow: 0 1px 3px var(--shadow); }
.tile img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-bottom: 1px solid var(--rule); }
.file-icon { aspect-ratio: 3/4; display: grid; place-items: center; font-family: var(--f-num); font-weight: 700; font-size: 1.2rem; border-bottom: 1px solid var(--rule); }
.tile-name { padding: 8px; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* money */
.balance-card { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: 0 4px 16px rgba(47, 93, 155, 0.15); display: flex; flex-direction: column; gap: 4px; background: var(--paper); }
.balance { font-size: clamp(2.2rem, 10vw, 3rem); font-weight: 600; line-height: 1.1; }
.balance.neg { color: var(--red); }
.inout { display: flex; gap: 24px; margin-top: 10px; flex-wrap: wrap; }
.inout > span { display: flex; flex-direction: column; }
.num.in { color: var(--green); }
.num.out { color: var(--ink); }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; gap: 10px; align-items: center; font-size: 0.9rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: var(--paper-2); border-radius: 999px !important; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.ledger-month h3 { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger li { border-bottom: 1px solid var(--rule); }
.ledger button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; background: none; border: 0; text-align: left; cursor: pointer; }
.lg-main { display: flex; flex-direction: column; min-width: 0; }
.lg-desc { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.lg-meta { font-size: 0.82rem; color: var(--ink-2); }
.lg-amt { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.lg-bal { font-size: 0.78rem; color: var(--ink-2); }

/* inbox / team */
.msg { display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px var(--shadow); }
.msg.done { opacity: 0.6; box-shadow: none; }
.msg header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.msg-body { white-space: pre-wrap; }
.people { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; background: var(--paper-2); flex: none; }

/* bits */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--ink); color: #ffffff; padding: 10px 16px; border-radius: var(--r); font-weight: 600; box-shadow: 0 2px 6px rgba(47, 93, 155, 0.25); max-width: calc(100vw - 32px); }
@media (min-width: 760px) { .toast { bottom: 24px; } }
.error-bar { background: var(--red); color: var(--red-ink); padding-block: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-weight: 600; }
.foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 24px 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.85rem; text-align: center; }
.foot img { width: 36px; }
.card form.row input { flex: 1; min-width: 0; }
.form > .btn.small { align-self: flex-start; }

.fab { position: fixed; z-index: 25; right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--red); color: var(--red-ink); font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 18px rgba(47, 93, 155, 0.35); }
.fab span { font-size: 1.5rem; line-height: 1; }
@media (min-width: 760px) { .fab { bottom: 24px; } }
.templates { display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.templates .chip { background: var(--paper-2); color: var(--red); font-weight: 600; padding: 6px 12px; }

/* Minutes */
.min-card { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.min-date { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; background: var(--paper-2); border-radius: var(--r); padding: 8px 0; line-height: 1.1; }
.min-date .m { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); }
.min-date .d { font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; }
.min-date .y { font-size: 0.72rem; color: var(--ink-2); }
.min-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.min-snip { color: var(--ink-2); font-size: 0.9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#min-search { width: 100%; }
@media (max-width: 380px) { .tabbar a { font-size: 0.66rem; } }

.person { display: flex; flex-direction: column; min-width: 0; }
.person .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 340px) {
  .brand img { width: 34px; height: 34px; }
  .brand strong { font-size: 1rem; }
  .brand small { font-size: 0.46rem; letter-spacing: 0.12em; }
}

/* Mail */
.mail-tabs { margin-top: 4px; }
.mail-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mail-list li { border-bottom: 1px solid var(--rule); }
.mail-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 4px; cursor: pointer; font: inherit; color: inherit; }
.mail-row:hover { background: var(--paper-2); }
.mr-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mr-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-count { font-size: 0.75rem; color: var(--ink-2); }
.mr-when { flex: none; font-size: 0.8rem; color: var(--ink-2); }
.mr-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-snip { color: var(--ink-2); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.unread .mr-who, .mail-row.unread .mr-subj { font-weight: 700; color: var(--ink); }
.mail-row.unread .mr-when { color: var(--red); font-weight: 700; }
.mail-row.unread { box-shadow: inset 3px 0 0 var(--red); padding-left: 10px; }
.tag { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #a87b1f; border: 1px solid rgba(200, 150, 46, 0.5); border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
.thread { display: flex; flex-direction: column; gap: 14px; }
.mail-msg { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.mail-msg.out { background: var(--paper-2); }
.mail-msg header { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mail-msg header .small { overflow-wrap: anywhere; }
.mail-text { overflow-wrap: anywhere; }
.mail-html iframe { width: 100%; min-height: 40px; border: 0; background: #fff; display: block; }
.mail-tools { gap: 16px; margin-top: 6px; }
.mm-head { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; }
.mm-who { display: flex; flex-direction: column; min-width: 0; }
.mm-who .small { overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip b { font-size: 0.68rem; color: var(--red); margin-right: 4px; }
.seg.mail-tabs { grid-template-columns: repeat(3, 1fr); }
.seg.mail-tabs button + button { border-left: 1px solid var(--line); }

/* Password show/hide eye */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 52px !important; }
.pw-eye { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--ink); }
.pw-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye[aria-pressed="true"] { color: var(--red); }

/* Privacy page + contact spam check */
.prose ul { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.prose .section-title { margin-top: 18px; }
.turnstile:empty { display: none; }

/* Month groups in event lists */
.month-group { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.month-head { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: #a87b1f; margin: 0; }
.month-head::after { content: ""; flex: 1; height: 1px; background: rgba(200, 150, 46, 0.45); }
.more-link { margin-top: 14px; text-align: right; }

/* Poster grid, picker and viewer */
.sheet.wide { max-width: 980px; }
@media (min-width: 760px) { .sheet.wide { width: 90vw; } }
.pgrid-wrap { display: flex; flex-direction: column; gap: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ptile { display: flex; flex-direction: column; gap: 2px; padding: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: 0 1px 3px var(--shadow); }
.ptile.on { outline: 3px solid var(--red); outline-offset: 1px; }
.ptile-img { aspect-ratio: 3 / 4; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.ptile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile-name { padding: 0 8px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile-date { padding: 0 8px; font-size: 0.75rem; color: var(--ink-2); }
.ptile.upload { border-style: dashed; box-shadow: none; }
.ptile.upload .ptile-img { background: var(--paper); }
.ptile .plus { font-size: 2.4rem; color: var(--red); line-height: 1; }
.file-icon { font-weight: 800; letter-spacing: 0.08em; color: var(--red); border: 2px solid currentColor; border-radius: 6px; padding: 6px 8px; font-size: 0.8rem; }
#poster-search { width: 100%; }
.poster-field { display: flex; gap: 12px; align-items: flex-end; }
.pf-thumb { width: 96px; aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; background: var(--paper-2); cursor: pointer; flex: none; }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-thumb.empty { border: 2px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.78rem; color: var(--ink-2); font-family: inherit; }
.pf-thumb.empty span { font-size: 1.6rem; color: var(--red); line-height: 1; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(12, 16, 24, 0.94); display: flex; flex-direction: column; }
.lb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 56px 12px 12px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-file { color: #fff; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.lb-file .file-icon { color: #fff; font-size: 1.2rem; padding: 14px 18px; }
.lb-close, .ev-close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 2; }
.lb-arrow.prev { left: 10px; } .lb-arrow.next { right: 10px; }
.lb-bar { background: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.lb-info { display: flex; flex-direction: column; min-width: 0; font-size: 0.85rem; color: var(--ink-2); }
.lb-info strong { color: var(--ink); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Event pop-up with a poster */
.ev-poster-sheet { position: relative; max-width: 980px; overflow: hidden; }
.ev-layout { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.ev-art { position: relative; height: 280px; flex: none; overflow: hidden; background: #1e2a3b; }
.ev-art-blur { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(24px) brightness(0.65); transform: scale(1.1); }
.ev-art-img { position: absolute; inset: 16px; border: 0; padding: 0; background: none; cursor: zoom-in; display: grid; place-items: center; }
.ev-art-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.ev-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ev-title { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; line-height: 1.15; padding-right: 8px; }
.ev-main .eyebrow { margin-top: -8px; }
@media (min-width: 760px) {
  .ev-poster-sheet { width: 90vw; }
  .ev-layout { flex-direction: row; overflow: hidden; }
  .ev-art { width: 42%; height: auto; min-height: 520px; position: sticky; top: 0; }
  .ev-art-img { inset: 24px; }
  .ev-main { flex: 1; overflow-y: auto; padding: 28px 28px 20px; max-height: calc(92vh - 70px); }
  .ev-title { font-size: 2rem; padding-right: 48px; }
}

/* Account menu */
.who { position: relative; }
.who-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 10px 4px 4px; min-height: 44px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); }
.avatar.sm { width: 32px; height: 32px; font-size: 0.85rem; }
.caret { font-size: 0.7rem; color: var(--ink-2); }
.who-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(30, 42, 59, 0.18); min-width: 180px; padding: 6px; display: flex; flex-direction: column; z-index: 40; }
.who-menu a, .who-menu button { text-align: left; padding: 12px 12px; border-radius: 8px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer; }
.who-menu a:hover, .who-menu button:hover { background: var(--paper-2); }
.who-menu button { color: #b8322a; }
@media (max-width: 430px) { .who-name { display: none; } .who-btn { padding-right: 8px; } }
.ev-art-img { display: flex; align-items: center; justify-content: center; }
.ev-art-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
@media (max-width: 759px) { .ev-art-img img { max-height: 248px; } .ev-poster-sheet { max-height: 92vh; display: flex; flex-direction: column; } }

/* My profile */
a.who-btn { text-decoration: none; }
a.who-btn.on { border-color: var(--red); }
.prof-top { display: flex; gap: 14px; align-items: center; }
.prof-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 2px dashed var(--line); display: grid; place-items: center; cursor: pointer; background: var(--paper-2); flex: none; font-size: 2rem; font-weight: 700; color: var(--ink-2); }
.prof-photo img { width: 100%; height: 100%; object-fit: cover; }
.prof-id { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.prof-id .small { overflow-wrap: anywhere; }
.signout-btn { width: 100%; margin-top: 8px; }
.btn.signout-btn:not(.ghost) { background: #fff; color: #b8322a; border: 1px solid #e3b3ae; }

/* Footer stays at the bottom on short pages */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; }

/* Photo band (home + about) */
.photo-band { position: relative; height: 260px; overflow: hidden; color: #fff; isolation: isolate; }
.photo-band.small { height: 200px; }
@media (min-width: 760px) { .photo-band { height: 340px; } .photo-band.small { height: 240px; } }
.pb-img { position: absolute; inset: 0; background: url("assets/church-bg.jpg?v=3") center 32% / cover no-repeat; filter: blur(1.5px); transform: scale(1.03); z-index: -2; }
.pb-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(20, 12, 4, 0.55) 0%, rgba(20, 12, 4, 0.25) 60%, rgba(20, 12, 4, 0) 100%), linear-gradient(180deg, rgba(20, 12, 4, 0.15) 0%, rgba(255, 255, 255, 0) 80%, #ffffff 100%); }
.pb-content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 0 16px 36px; }
.band-mark { width: 54px; height: 54px; filter: invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.band-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.1rem, 8vw, 3.2rem); line-height: 1.05; text-shadow: 0 2px 14px rgba(0,0,0,.45); margin: 0; }
.band-sub { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.band-overlap { margin-top: -56px; position: relative; z-index: 1; }
.band-overlap .section-title { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.1; margin-block: 8px 12px; }

/* Team extras */
.link-cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .link-cards { grid-template-columns: repeat(3, 1fr); } }
.link-card { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.link-card:hover { border-color: var(--red); }
.who-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
.who-card { display: flex; flex-direction: column; gap: 8px; }
.who-head { display: flex; gap: 12px; align-items: center; }
.who-photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; flex: none; }
.who-photo img { width: 100%; height: 100%; object-fit: cover; }
.who-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.who-role { color: #a87b1f; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.who-contact { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.notes { display: flex; flex-direction: column; gap: 10px; }
.note-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.note-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 4px 0; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 36px; }
.note-toggle span { font-size: 1.3rem; color: var(--red); }
.about .notes + .notes { margin-top: 18px; }

/* Sign-ups */
.form-card { display: flex; flex-direction: column; gap: 8px; }
.pill-on { border-color: #2c7a4b; color: #2c7a4b; }
.q-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--paper-2); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.resp-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.resp-table th, .resp-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; white-space: pre-wrap; }
.resp-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); white-space: nowrap; }
.icon-btn.small-x { width: 32px; height: 32px; font-size: 0.8rem; }
fieldset.field { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.band-overlap .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.band-overlap { margin-top: -44px; }

/* Mail app */
.main-full { display: flex; flex-direction: column; min-height: 0; }
.mailapp { display: grid; grid-template-columns: 1fr; flex: 1; min-height: 0; background: var(--paper); }
.mail-rail { display: none; }
.mail-listpane { display: flex; flex-direction: column; min-height: 0; }
.mail-listhead { position: sticky; top: 68px; z-index: 5; background: var(--paper); padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--rule); }
.mail-chips { display: flex; gap: 6px; overflow-x: auto; }
.chip.on { background: var(--red); color: #fff; border-color: var(--red); }
#mail-search { width: 100%; }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list li { border-bottom: 1px solid var(--rule); }
.mail-row { display: flex; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 16px; cursor: pointer; font: inherit; color: inherit; align-items: flex-start; }
.mail-row:hover { background: var(--paper-2); }
.mail-row.sel { background: #e7eef8; box-shadow: inset 3px 0 0 var(--red); }
.mail-row.unread { box-shadow: none; padding-left: 16px; }
.mail-row.unread.sel { box-shadow: inset 3px 0 0 var(--red); }
.mr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: 2px; }
.mr-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tag-blue { color: var(--red); border-color: rgba(47, 93, 155, 0.4); }
.tag-done { color: #2c7a4b; border-color: rgba(44, 122, 75, 0.4); }
.mail-reader { display: none; flex-direction: column; min-height: 0; }
.mailapp.reading .mail-listpane { display: none; }
.mailapp.reading .mail-reader { display: flex; }
.mail-toolbar { position: sticky; top: 68px; z-index: 5; background: var(--paper); display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.mail-toolbar .btn { white-space: nowrap; flex: none; }
.mail-back { flex: none; font-size: 1.5rem; }
.mail-subject { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2; padding: 16px 16px 4px; }
.mail-reader .thread { padding: 8px 16px 96px; }
.mail-empty { padding: 40px 16px; text-align: center; }
.mail-empty.big { flex: 1; display: grid; place-items: center; }
.assign-wrap { position: relative; flex: none; }
.assign-wrap .who-menu { left: 0; right: auto; }
.mail-fab { display: inline-flex; }
.mailapp.reading .mail-fab { display: none; }
@media (min-width: 900px) {
  .mailapp { grid-template-columns: 210px 380px 1fr; height: calc(100dvh - 69px); overflow: hidden; }
  .mail-rail { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; border-right: 1px solid var(--rule); overflow-y: auto; background: var(--paper-2); }
  .mail-compose { width: 100%; }
  .mail-folders, .mail-addrs { display: flex; flex-direction: column; gap: 2px; }
  .mail-folders button, .mail-addrs button { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font: inherit; cursor: pointer; color: var(--ink); }
  .mail-folders button:hover, .mail-addrs button:hover { background: #e7eef8; }
  .mail-folders button.on, .mail-addrs button.on { background: #dbe6f5; color: var(--red); font-weight: 700; }
  .mail-addrs button { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mail-addrs .label { padding: 6px 10px 2px; }
  .mf-count { font-size: 0.75rem; background: var(--red); color: #fff; border-radius: 999px; padding: 0 7px; }
  .mail-me { margin-top: auto; padding: 0 10px; overflow-wrap: anywhere; }
  .mail-listpane { border-right: 1px solid var(--rule); overflow-y: auto; }
  .mail-listhead { top: 0; }
  .mail-chips, .mail-addr-select { display: none; }
  .mail-reader { display: flex; overflow-y: auto; }
  .mailapp.reading .mail-listpane { display: flex; }
  .mail-toolbar { top: 0; }
  .mail-back { display: none; }
  .mail-fab { display: none !important; }
  .mail-reader .thread { padding-bottom: 32px; }
}
.foot[hidden] { display: none !important; }
.mailapp { grid-template-columns: minmax(0, 1fr); }
.mailapp > * { min-width: 0; }
.mail-row { flex-direction: row; }
.mail-msg { min-width: 0; }
@media (min-width: 900px) { .mailapp { grid-template-columns: 210px 380px minmax(0, 1fr); } }

.use-card { display: flex; flex-direction: column; gap: 8px; }
.use-row { display: flex; flex-direction: column; gap: 4px; }
.use-bar { display: block; height: 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
.use-bar i { display: block; height: 100%; background: var(--red); }
.use-bar.warn i { background: #c8962e; }

/* Shared edit footer */
.sheet-foot:has(.edit-foot) { display: block; }
.edit-foot { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.edit-foot .btn { min-height: 44px; }
.btn.danger-outline { color: #b8322a; border-color: #e3b3ae; }
@media (max-width: 420px) { .edit-foot { gap: 8px; } .edit-foot .btn { padding-inline: 14px; } }

/* Mail rail address */
.mail-me { display: flex; flex-direction: column; gap: 2px; }
.mail-me-addr { font-size: 0.78rem; overflow-wrap: anywhere; }

/* Calendar: event chips on larger screens */
.cal-chips { display: none; }
@media (min-width: 900px) {
  .page.cal-page { max-width: 1400px; padding-inline: 24px; }
  .cal-page .cal-grid { grid-auto-rows: minmax(78px, calc((100dvh - 400px) / 6)); }
  .cal-page .cal-day { aspect-ratio: auto; align-items: stretch; justify-content: flex-start; padding: 6px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; gap: 4px; }
  .cal-page .cal-day > span:first-child { align-self: flex-end; font-size: 0.85rem; }
  .cal-page .cal-day.today > span:first-child { width: 26px; height: 26px; }
  .cal-page .cal-day .dots { display: none; }
  .cal-page .cal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .cal-chip { display: block; font-size: 0.74rem; line-height: 1.25; text-align: left; background: #e7eef8; color: var(--ink); border-left: 3px solid var(--red); border-radius: 4px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .cal-chip.pint { background: #f7eedc; border-left-color: var(--gold); }
  .cal-chip:hover { filter: brightness(0.96); }
  .cal-more { font-size: 0.72rem; color: var(--ink-2); padding-left: 4px; }
}

/* Mail address help */
.mail-addrs .addr-btn { flex-direction: column; align-items: flex-start !important; gap: 1px; white-space: normal !important; }
.mail-addrs .addr-btn small { font-size: 0.72rem; font-weight: 400; color: var(--ink-2); line-height: 1.3; }
.addr-help-btn { margin-top: 6px; font-size: 0.82rem !important; color: var(--red) !important; }
.addr-help-mobile { align-self: flex-start; }
@media (min-width: 900px) { .addr-help-mobile { display: none; } }
.addr-guide dd { margin-bottom: 8px; }

/* Keep the same plain "&" in every heading: fix Fraunces to one optical size so big headings don't switch to the curly ampersand */
h1, h2, h3, .brand strong, .band-title, .page-title, .hero h1, .hero-h, .ec-title, .ev-title, .mail-subject, .sheet-head h2, .cal-nav h2, .ds-day, .min-date .d, .balance, .notice strong {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}

/* Full-bleed photo bands */
html, body { overflow-x: clip; }
.photo-band { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.pb-shade { background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(20, 12, 4, 0.55) 0%, rgba(20, 12, 4, 0.22) 60%, rgba(20, 12, 4, 0) 100%), linear-gradient(180deg, rgba(20, 12, 4, 0.12) 0%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.55) 86%, #ffffff 100%) !important; }

/* Containers */
.page.wide { max-width: 1240px; }
.page.narrow { max-width: 760px; }
@media (min-width: 900px) { .page { padding-inline: 8px; } }

/* Team + Admin */
.tile-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.tile-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; min-height: 84px; }
.tile-link:hover { border-color: var(--red); }
.tile-link > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.tile-ic { width: 44px; height: 44px; border-radius: 12px; background: #e7eef8; display: grid; place-items: center; flex: none; }
.tile-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.two-col { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .who-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .who-grid { grid-template-columns: repeat(4, 1fr); } }
.narrow-btn { max-width: 360px; align-self: center; }
.admin-people { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { display: flex; flex-direction: column; gap: 8px; }
.people li .person .small { overflow-wrap: anywhere; }

/* Mail polish */
@media (min-width: 900px) { .mailapp { grid-template-columns: 240px 380px minmax(0, 1fr) !important; } }
.mail-me-dom { font-size: 0.74rem; white-space: nowrap; }
.mail-contacts-link { padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.mail-contacts-link:hover { background: #e7eef8; }
.clear-filter { margin-left: 6px; text-transform: none; letter-spacing: 0; }
.empty-ic { width: 56px; height: 56px; fill: none; stroke: var(--line); stroke-width: 1.4; display: block; margin: 0 auto 8px; }
.mail-empty.big > div { text-align: center; }

/* Compose */
.rcpt-field { position: relative; }
.rcpt-head { display: flex; justify-content: space-between; align-items: baseline; }
.rcpt-toggles { display: flex; gap: 12px; }
.rcpt-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; min-height: 48px; background: var(--paper); cursor: text; }
.rcpt-box.focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.rcpt-box input { border: 0 !important; outline: none !important; box-shadow: none !important; flex: 1 1 140px; min-width: 120px; padding: 6px 4px !important; background: transparent; }
.rcpt-chip { display: inline-flex; align-items: center; gap: 4px; background: #e7eef8; border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 0.85rem; max-width: 100%; overflow-wrap: anywhere; }
.rcpt-chip button, .chip-x { border: 0; background: none; cursor: pointer; color: var(--ink-2); width: 24px; height: 24px; border-radius: 50%; }
.rcpt-sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(30,42,59,.18); }
.rcpt-sugg li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.rcpt-sugg li.on, .rcpt-sugg li:hover { background: #e7eef8; }
.attach-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Mail rail: Sending as never breaks inside the address */
.mail-rail { min-height: 0; overflow-y: auto; }
.mail-me { overflow: hidden; }
.mail-me strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-me-dom { display: block; font-size: clamp(0.66rem, 0.9vw, 0.74rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tear-off calendar date badges */
.date-stamp { width: 72px !important; padding: 0 0 6px !important; border: 1px solid var(--line) !important; background: #fff !important; overflow: hidden; justify-content: flex-start !important; gap: 2px; align-self: flex-start; }
.ds-mon { display: block; width: 100%; text-align: center; background: var(--red); color: #fff !important; padding: 3px 0; font-size: 0.72rem !important; letter-spacing: 0.14em !important; }
.event-card.soon .ds-mon { background: var(--gold); }
.ds-day { font-size: 2.1rem !important; font-weight: 700 !important; line-height: 1 !important; margin-top: 4px; }
.ds-wd { font-size: 0.76rem !important; color: #3f4b5c !important; font-weight: 700; }
.event-card.big .date-stamp { width: 80px !important; }
.event-card.big .ds-day { font-size: 2.5rem !important; }
.form-hint { display: block; text-decoration: none; color: inherit; border-left: 3px solid var(--gold); }

/* Planner v2 */
.plan2 .plan-head { position: sticky; top: 68px; z-index: 4; background: var(--paper); padding-block: 8px; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 760px) { .plan2 .plan-head { position: static; } }
.plan-progress { display: flex; flex-direction: column; gap: 4px; }
.plan-start .center { justify-content: center; }
.task-card, .pay-card { display: flex; flex-direction: column; gap: 10px; }
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--rule); min-height: 52px; }
.task.dragging { opacity: 0.4; }
.task[draggable="true"] { cursor: grab; }
.task-check { width: 24px; height: 24px; flex: none; accent-color: var(--red); }
.task-title { flex: 1; text-align: left; background: none; border: 0; font: inherit; font-weight: 600; padding: 8px 0; cursor: text; color: inherit; min-width: 0; overflow-wrap: anywhere; }
.task.done .task-title { text-decoration: line-through; color: var(--ink-2); font-weight: 400; }
.task-edit { flex: 1; min-width: 0; }
.task-meta { display: flex; align-items: center; gap: 6px; flex: none; }
.task-owner { width: 84px; min-height: 36px; font-size: 0.85rem; padding: 4px 6px; }
.due-chip { position: relative; display: inline-flex; align-items: center; border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.due-chip.set { border-style: solid; color: var(--ink); }
.due-chip.overdue { border-color: #b8322a; color: #b8322a; font-weight: 700; background: #fbeceb; }
.due-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 520px) { .task { flex-wrap: wrap; } .task-meta { width: 100%; padding-left: 34px; } }
.pay-card summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; cursor: pointer; list-style: none; }
.pay-card summary::-webkit-details-marker { display: none; }
.pay-table tr.paid td:first-child { color: #2c7a4b; }
.plan-row { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }

/* Month colours (white text passes AA on each) */
.event-card.m1 { --mc: #4a5d7e; } .event-card.m2 { --mc: #6e3d6b; } .event-card.m3 { --mc: #1f6b6b; } .event-card.m4 { --mc: #4f6b45; }
.event-card.m5 { --mc: #2f5d9b; } .event-card.m6 { --mc: #a33a2f; } .event-card.m7 { --mc: #2e5e3e; } .event-card.m8 { --mc: #8a5a12; }
.event-card.m9 { --mc: #9a4a24; } .event-card.m10 { --mc: #7a2638; } .event-card.m11 { --mc: #2f5b45; } .event-card.m12 { --mc: #5b3a87; }
.event-card .ds-mon, .event-card.soon .ds-mon { background: var(--mc, var(--red)) !important; }
.event-card.soon .date-stamp { border: 2px solid var(--gold) !important; }
.tag-week { color: #8a6418; border-color: rgba(200, 150, 46, 0.6); background: #fbf3df; letter-spacing: 0.04em; }
.month-head.m1 { --mc: #4a5d7e; } .month-head.m2 { --mc: #6e3d6b; } .month-head.m3 { --mc: #1f6b6b; } .month-head.m4 { --mc: #4f6b45; }
.month-head.m5 { --mc: #2f5d9b; } .month-head.m6 { --mc: #a33a2f; } .month-head.m7 { --mc: #2e5e3e; } .month-head.m8 { --mc: #8a5a12; }
.month-head.m9 { --mc: #9a4a24; } .month-head.m10 { --mc: #7a2638; } .month-head.m11 { --mc: #2f5b45; } .month-head.m12 { --mc: #5b3a87; }
.month-head[class*=" m"] { color: var(--mc); }
.month-head[class*=" m"]::after { background: var(--mc); opacity: 0.45; }
.ds-mon { font-size: 0.94rem !important; font-weight: 800 !important; }
.ds-wd { font-size: 0.86rem !important; font-weight: 700 !important; color: #2c3746 !important; }

/* Taller banner, fade only at the bottom */
.photo-band { height: 300px; }
@media (min-width: 760px) { .photo-band { height: 420px; } .photo-band.small { height: 280px; } }
.pb-img { background-position: center 40% !important; }
.pb-shade { background: radial-gradient(ellipse 55% 40% at 50% 45%, rgba(20, 12, 4, 0.55) 0%, rgba(20, 12, 4, 0.2) 65%, rgba(20, 12, 4, 0) 100%), linear-gradient(180deg, rgba(20, 12, 4, 0.1) 0%, rgba(20, 12, 4, 0) 70%, rgba(255, 255, 255, 0.6) 90%, #ffffff 100%) !important; }
.band-overlap { margin-top: -64px !important; }

.warn-text { color: #8a5a12; background: #fbf3df; border-radius: 8px; padding: 8px 10px; }

/* Full-screen viewer always fits */
.lb-stage { display: flex !important; align-items: center; justify-content: center; min-height: 0; overflow: hidden; padding: 64px 12px 12px !important; }
.lb-stage img { max-width: 100%; max-height: calc(100dvh - 88px); width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.lb-stage.has-bar img { max-height: calc(100dvh - 88px - 120px); }
@media (min-width: 700px) { .lb-stage.has-bar img { max-height: calc(100dvh - 88px - 76px); } }
.lb-stage.zoomed { overflow: auto; display: block !important; text-align: center; }
.lb-stage.zoomed img { max-width: none; max-height: none; cursor: zoom-out; }

/* Attendance, feedback, progress (restored) */
.ev-extras { gap: 8px; }
.ec-prog { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink-2); margin-top: 4px; }
.ec-prog.big { font-size: 0.9rem; }
.ec-prog-bar { flex: 0 0 90px; height: 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
.ec-prog.big .ec-prog-bar { flex: 1; height: 10px; }
.ec-prog-bar i { display: block; height: 100%; background: var(--red); }
.attend { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.attend .row input { min-width: 0; }
#att-n { max-width: 90px; }
.stars { display: flex; gap: 6px; }
.stars button { font-size: 2rem; line-height: 1; background: none; border: 0; color: var(--line); cursor: pointer; padding: 4px; min-width: 44px; min-height: 44px; }
.stars button.on { color: var(--gold); }
.stars-show { color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.month-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 180px; align-items: end; margin-top: 12px; position: relative;
  background-image: linear-gradient(to top, var(--rule) 1px, transparent 1px); background-size: 100% 25%; padding-bottom: 20px; }
.mc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; position: relative; }
.mc-bar { display: block; width: 70%; max-width: 32px; background: var(--red); border-radius: 4px 4px 0 0; min-height: 0; }
.mc-col.now .mc-bar { background: var(--gold); }
.mc-val { font-size: 0.72rem; font-weight: 700; color: var(--ink-2); min-height: 1em; }
.mc-lab { position: absolute; bottom: -20px; font-size: 0.72rem; font-weight: 700; color: var(--ink-2); }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 16px; color: var(--ink-2); font-size: 0.9rem; }

/* WhatsApp + About */
.wa-join { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; align-items: flex-start; }
.wa-join.compact { align-items: center; margin: 4px 0; }
.btn.wa-btn { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.btn.wa-btn:hover { background: #18663f; }
.photo-band.small { height: 260px !important; }
.about-intro { display: flex; flex-direction: column; gap: 12px; }

.pray-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; border-left: 4px solid var(--gold); }
.pray-card > span:last-child { display: flex; flex-direction: column; }
.tile-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; }

/* New church photo: altar band, sharp, separate phone crop */
.pb-img { background-image: url("assets/church-phone.jpg?v=6") !important; background-position: center 55% !important; filter: blur(0.6px) !important; transform: scale(1.02) !important; }
@media (min-width: 760px) { .pb-img { background-image: url("assets/church-wide.jpg?v=6") !important; background-position: center 55% !important; } }
.pb-shade { background: radial-gradient(ellipse 50% 38% at 50% 44%, rgba(15, 9, 3, 0.62) 0%, rgba(15, 9, 3, 0.25) 65%, rgba(15, 9, 3, 0) 100%), linear-gradient(180deg, rgba(15, 9, 3, 0.18) 0%, rgba(15, 9, 3, 0) 78%, rgba(255, 255, 255, 0.65) 92%, #ffffff 100%) !important; }

/* Contrast fixes (WCAG AA) */
.eyebrow { color: #8a6418 !important; }
.brand small { color: #8a6418 !important; }
/* Reserve space so the page doesn't jump while events load */
.home .stack:empty { min-height: 120px; }

/* WebP banners */
.pb-img { background-image: url("assets/church-phone.jpg?v=6") !important; background-image: image-set(url("assets/church-phone-640.webp?v=6") type("image/webp") 1x, url("assets/church-phone.webp?v=6") type("image/webp") 2x, url("assets/church-phone.jpg?v=6") type("image/jpeg") 1x) !important; }
@media (min-width: 760px) { .pb-img { background-image: url("assets/church-wide.jpg?v=6") !important; background-image: image-set(url("assets/church-wide.webp?v=6") type("image/webp"), url("assets/church-wide.jpg?v=6") type("image/jpeg")) !important; filter: none !important; } }

.consent { align-items: flex-start; line-height: 1.4; }
.consent input { margin-top: 3px; flex: none; }

.mfa-qr { width: 180px; height: 180px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }

/* Shared form styles */
.form.card, form.card { max-width: 640px; width: 100%; }
.page.narrow .form.card, .page .form.card { margin-inline: 0; }
.form { gap: 16px; }
.field .label, legend.label { margin-bottom: 0; }
.hint { margin-top: 2px; }
.error { margin: 0; }
.check { display: flex !important; align-items: flex-start !important; gap: 10px !important; min-height: 0 !important; padding: 4px 0; font-weight: 500; line-height: 1.45; cursor: pointer; }
.check input[type=checkbox], .check input[type=radio] { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.check > span, .check { overflow-wrap: anywhere; }
.consent { margin-top: 0; }
.form > .btn:not(.small):not(.ghost) { margin-top: 4px; }
@media (min-width: 600px) {
  .form > .btn:not(.small), .form > button.btn:not(.small) { align-self: flex-start; width: auto; min-width: 160px; }
}
.form-note { margin-top: -6px; }
.turnstile { margin: 0; }
fieldset.field { gap: 4px; }

/* Taller hero: photo runs behind the next-event card, fade only at the very bottom */
.home-band.photo-band { height: clamp(380px, 55vh, 620px) !important; }
@media (min-width: 760px) { .home-band.photo-band { height: clamp(560px, 70vh, 820px) !important; } }
.photo-band.small { height: clamp(260px, 38vh, 380px) !important; }
@media (min-width: 760px) { .photo-band.small { height: clamp(320px, 45vh, 480px) !important; } }
.pb-img { background-position: center 70% !important; }
.pb-shade { background: radial-gradient(ellipse 48% 30% at 50% 40%, rgba(12, 7, 2, 0.6) 0%, rgba(12, 7, 2, 0.22) 65%, rgba(12, 7, 2, 0) 100%), linear-gradient(180deg, rgba(12, 7, 2, 0.15) 0%, rgba(12, 7, 2, 0) 30%, rgba(12, 7, 2, 0) 86%, rgba(255, 255, 255, 0.7) 95%, #ffffff 100%) !important; }
.home-band .pb-content { justify-content: flex-start; padding-top: clamp(48px, 12vh, 140px); }
.band-overlap { margin-top: clamp(-170px, -16vh, -110px) !important; }

.sugg-x { margin-left: auto; border: 0; background: none; color: var(--ink-2); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; opacity: 0.6; }
.rcpt-sugg li:hover .sugg-x { opacity: 1; background: #fff; }
.undo-toast { display: flex; gap: 12px; align-items: center; }
.undo-toast .link { color: #fff; text-decoration-color: var(--gold); }

@media (min-width: 1000px) { .team-page .tile-grid { grid-template-columns: repeat(6, 1fr); } .team-page .tile-grid > .tile-link { grid-column: span 2; } .team-page .tile-grid > .tile-link:nth-child(4) { grid-column: 2 / span 2; } }

/* ===== One button system (10 Nov) ===== */
.btn { min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; line-height: 1.15; gap: 8px; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 0.88rem; }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn.ghost { box-shadow: none; }
.btn.danger-outline, .btn.ghost.danger-text { background: var(--paper); color: #b8322a; border-color: #e3b3ae; box-shadow: none; }
.btn.danger { background: #b8322a; border-color: #b8322a; color: #fff; }
.card-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.card-foot .btn { min-width: 120px; }
@media (max-width: 599px) { .card-foot .btn { flex: 1 1 auto; } }
.card > .form > .btn.small:last-child, .card > form > .btn.small:last-child { align-self: flex-end; min-width: 120px; margin-top: 8px; }

/* Cards: one inner rhythm */
.card > .section-title { margin: 0 0 8px; }
.card > .section-title + p { margin-top: 0; }
.card > p { margin: 0 0 10px; }
.card > p:last-child { margin-bottom: 0; }
.card > .form { margin-top: 6px; }

/* Admin: cards flow into two balanced columns */
.admin-cols { columns: 1; column-gap: 20px; }
.admin-cols > *, .admin-people > * { break-inside: avoid; }
.admin-cols > * { margin: 0 0 20px; width: 100%; display: block; }
.admin-cols > .admin-people { display: flex; }
@media (min-width: 900px) { .admin-cols { columns: 2; } }

/* Same-day events: first keeps the full badge; each further one gets a companion badge */
.event-card { position: relative; }
.event-card .date-stamp.companion, .event-card.soon .date-stamp.companion { border: 1.5px solid var(--mc, var(--red)) !important; background: color-mix(in srgb, var(--mc, var(--red)) 16%, #fff) !important; color: var(--mc, var(--red)); justify-content: center !important; padding: 10px 0 !important; min-height: 64px; gap: 4px; }
.date-stamp.companion .ds-time { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.date-stamp.companion .ds-same { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ds-col { display: flex; flex-direction: column; align-items: center; flex: none; }
.ds-link { flex: 1 0 0; width: 2px; background: var(--mc, var(--red)); margin-bottom: -21px; min-height: 21px; }
.event-card.big .ds-link { margin-bottom: -25px; }
.event-card.same-day::before { content: ""; position: absolute; top: -1px; left: 47px; width: 2px; height: 13px; background: var(--mc, var(--red)); pointer-events: none; }
.home .stack, .cal-page .stack { gap: 16px; }
.event-card.same-day { margin-top: -8px; }
.cal-page .stack, .cal-list { max-width: 960px; }

/* ===== Text: one measure, one colour, one rhythm ===== */
main p, main li, main dd { text-wrap: pretty; }
h1, h2, h3, .page-title, .section-title, .band-title, .hero-h, .ec-title, .ev-title { text-wrap: balance; }
.lede { font-size: 1.08rem; color: var(--ink) !important; max-width: 68ch; }
.about-intro { display: flex; flex-direction: column; gap: 1em; }
.about-intro p { margin: 0; max-width: 68ch; line-height: 1.6; color: var(--ink); }
.about > * + * { margin-top: 28px; }
.about > p.muted { max-width: 68ch; }
.about .notes + .notes { margin-top: 28px; }
.page > p, .page > section > p:not(.small), .hero-text p { max-width: 68ch; line-height: 1.6; }
.section-title { margin-top: 0; }

/* About banner: title fully inside, altar in view */
.photo-band.small .pb-content { padding: 12px 16px 48px; justify-content: center; }
.photo-band.small .pb-img { background-position: center 28% !important; }
@media (min-width: 760px) { .photo-band.small .pb-img { background-position: center 34% !important; } }
/* About: every paragraph one size, one colour, one measure */
.page.about { --measure: 42rem; }
.about-intro p, .about-intro p.lede, .about .wa-join p, .about > p, .about > p.muted { font-size: 1rem !important; line-height: 1.6; color: var(--ink) !important; max-width: var(--measure); margin: 0; }
.about-intro { gap: 1em; }
.about > *, .about .notes { margin-top: 0; margin-bottom: 0; }
.about { display: flex; flex-direction: column; gap: 32px; }
.about .wa-join { margin: 0; gap: 10px; }
.about .notes .section-title { margin-bottom: 4px; }

/* Home hero (R): taller, title block higher and easier to read; the next-event card sits inside the photo, the fade ends just below it */
:root { --pt: clamp(36px, 7vh, 80px); --card-gap: clamp(40px, 6vh, 56px); --fade: 60px; }
@media (min-width: 760px) { :root { --pt: clamp(48px, 8vh, 96px); --card-gap: clamp(70px, 9vh, 90px); --fade: 84px; } }
.home-band.photo-band { height: auto !important; min-height: 0; }
.home-band .pb-content { height: auto; min-height: inherit; justify-content: flex-start; padding: var(--pt) 16px var(--fade); background: radial-gradient(ellipse min(560px, 92vw) 190px at 50% calc(var(--pt) + 84px), rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 75%); }
.home-band .band-title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.home-band .band-sub { font-size: 0.86rem; font-weight: 800; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
.band-next { width: 100%; max-width: 880px; margin: var(--card-gap) auto 0; text-align: left; color: var(--ink); }
@media (min-width: 900px) { .band-next { padding-inline: 0; } }
.band-next-space { height: 150px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home > .hero:first-child { margin-top: 0; }

/* Navigation polish (S) */
body.locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
main h1[tabindex="-1"]:focus { outline: none; }
[id] { scroll-margin-top: 84px; }
.scrim { overscroll-behavior: contain; }
.sheet { max-height: calc(100dvh - 24px - env(safe-area-inset-top)); }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheet-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
button[data-wait] { opacity: 0.7; pointer-events: none; }
@media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; } }

/* Sharper banner: AVIF first, 2800px only on wide or high-resolution screens */
@media (min-width: 760px) { .pb-img { background-image: url("assets/church-wide.jpg?v=6") !important; background-image: image-set(url("assets/church-wide.avif?v=7") type("image/avif"), url("assets/church-wide.webp?v=6") type("image/webp"), url("assets/church-wide.jpg?v=6") type("image/jpeg")) !important; filter: none !important; } }
@media (min-width: 1500px), (min-width: 1000px) and (min-resolution: 1.5dppx) { .pb-img { background-image: image-set(url("assets/church-wide-2800.avif?v=7") type("image/avif"), url("assets/church-wide-2800.webp?v=7") type("image/webp"), url("assets/church-wide.jpg?v=6") type("image/jpeg")) !important; filter: none !important; } }

/* Invite card: names and emails wrap rather than being cut off on phones */
.invite-card .people li { flex-wrap: wrap; }
.invite-card .person { flex: 1 1 180px; overflow-wrap: anywhere; }
.invite-card .inv-actions { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }
@media (min-width: 760px) { .home-band .pb-img { background-position: center 38% !important; } }

/* Shared file viewer: PDFs inline, other files as a card */
.lb-pdf { width: min(100%, 980px); height: calc(100dvh - 150px); border: 0; border-radius: 8px; background: #fff; }
.lb-file { text-align: center; max-width: 340px; }
.lb-file .btn { margin-top: 6px; }

/* About (X): intro centred on the page, same centre line as the questions */
.page.about { align-items: center; }
.page.about > * { width: 100%; max-width: 760px; margin-inline: auto; }
.about-intro { align-items: center; text-align: center; }
.about-intro p, .about > p.muted { margin-inline: auto !important; text-align: center; text-wrap: balance; max-width: 68ch !important; }
.about .wa-join { align-items: center; text-align: center; }
.about .wa-join p { margin-inline: auto; text-wrap: balance; }
.about .notes > .section-head { justify-content: center; text-align: center; }
.about .notes .note-card, .about .notes .note-card * { text-align: left; }
/* Small banners (About): title always sits fully inside the photo */
.photo-band.small .pb-content { padding: 40px 16px 56px !important; justify-content: center; box-sizing: border-box; }
/* Contact + Prayer: heading and intro centred above a centred form; fields stay left-aligned */
.centred-intro > .eyebrow, .centred-intro > .page-title, .centred-intro > p { text-align: center; margin-inline: auto; max-width: 68ch; text-wrap: balance; }
.centred-intro > .wa-join { align-items: center; text-align: center; }
.centred-intro > .form.card, .centred-intro > .notice { margin-inline: auto !important; }
.inv-ok { color: #2c7a4b; font-weight: 600; } .inv-fail { color: #b8322a; font-weight: 600; }
.invite-card .inv-actions { flex-wrap: wrap; justify-content: flex-end; }
.key-card { cursor: pointer; } .key-card:hover { border-color: var(--red); }

/* Mail storage meter + sort */
.mail-meter { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; border-top: 1px solid var(--rule); margin-top: 8px; }
.mail-meter .use-bar { height: 6px; }
.mail-meter.amber .use-bar i { background: #c8962e; } .mail-meter.red .use-bar i { background: #b8322a; }
.mail-meter .link { text-align: left; }
.mail-searchrow { display: flex; gap: 8px; align-items: center; }
.mail-searchrow #mail-search { flex: 1; min-width: 0; }
.mail-searchrow select.mini { width: auto; min-height: 46px; }
.mail-meter-m .mail-meter { border-top: 0; padding: 2px 0 0; margin: 0; }
@media (min-width: 900px) { .mail-meter-m { display: none; } }

/* Shared accounts */
.acct-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .acct-grid { grid-template-columns: repeat(2, 1fr); } }
.acct-card { cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.acct-card:hover { border-color: var(--red); }
.acct-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; flex: none; }
.acct-card .facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.acct-card .facts dt { color: var(--ink-2); font-weight: 700; } .acct-card .facts dd { margin: 0; overflow-wrap: anywhere; }
.acct-card .facts dd.acct-login { overflow-wrap: normal; word-break: normal; }

/* Files */
.file-tabs { max-width: 560px; }
.pgrid.checker .ptile-img, .checker .ptile-img { background: repeating-conic-gradient(#e9edf3 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.pgrid.checker .ptile-img img { object-fit: contain; }
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.docs li { display: flex; gap: 8px; align-items: center; }
.doc-row { flex: 1; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.doc-row:hover { border-color: var(--red); }
.doc-row .grow { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.doc-row .file-icon { flex: none; }
.doc-list, .brand-set { display: flex; flex-direction: column; gap: 10px; }
.small-seg { margin-bottom: 4px; }
.seg.file-tabs, .seg.small-seg { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap; }
.seg.file-tabs > button, .seg.small-seg > button { flex: 1 1 0; min-width: 0; padding-inline: 6px; }

/* Simple formatted text (minutes, how-tos, event descriptions) */
.md { display: flex; flex-direction: column; gap: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.md p { margin: 0; }
.md h4 { margin: 10px 0 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.md h4:first-child { margin-top: 0; }
.md ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.md li::marker { color: var(--red); }

/* Finance categories */
.new-cat input { flex: 1; min-width: 0; }
.cat-group { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cat-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cat-list li { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.cat-list li.archived .grow { color: var(--ink-2); }
.cat-list li input { flex: 1; min-width: 0; }
.cat-group > .row input { flex: 1; min-width: 0; }

/* Finances: clear money in / out */
:root { --out: #a8382d; }
.num.out { color: var(--out) !important; }
.num.in { color: #1f7a45 !important; }
.ledger li > button { display: flex; align-items: center; gap: 12px; }
.lg-dir { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; }
.lg-dir.in { background: #e3f3ea; color: #1f6b3d; }
.lg-dir.out { background: #f8e5e2; color: #8f2e25; }
.lg-amt .num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.lg-bal { font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; }
.dir-filter { display: flex !important; max-width: 420px; }
.dir-filter > button { flex: 1 1 0; }
@media (max-width: 420px) { .lg-dir { width: 34px; height: 34px; font-size: 0.6rem; } .ledger li > button { gap: 10px; } }
.ledger li > button { text-align: left; justify-content: flex-start; }
.ledger li > button .lg-main { flex: 1 1 auto; align-items: flex-start; text-align: left; }
.ledger li > button .lg-amt { margin-left: auto; text-align: right; }
/* Tabs/filters: the selected one is filled (Files tabs, Finances filter, poster picker) */
.seg button.on:not(.in):not(.out) { background: var(--red); color: var(--red-ink); }
.dir-filter { max-width: 360px; margin: 0; }
.dir-filter > button { min-height: 38px; font-size: 0.92rem; }
/* Any list row built from a button keeps its text left-aligned */
.ledger button, .doc-row, .plan-row, .note-toggle, .mail-list button, .min-list button, .people button { text-align: left; }

/* ===== Optional dark mode (only when the viewer chooses it) ===== */
.theme-mini { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin-top: 6px; }
.theme-mini button { border: 0; background: none; width: 34px; height: 30px; border-radius: 999px; cursor: pointer; font-size: 0.95rem; line-height: 1; }
.theme-mini button.on { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }

:root[data-theme="dark"] {
  --paper: #161d2b; --paper-2: #1d2636; --ink: #e8edf5; --ink-2: #a9b4c4; --rule: #2a3446; --line: #364257;
  --red: #7fa8e6; --red-ink: #0f1522; --gold: #d9ab4a; --heart: #e0675c; --green: #5ccb8a;
  --shadow: rgba(0, 0, 0, 0.35); --logo-filter: invert(1) brightness(0.95); --out: #f08a7e;
  color-scheme: dark;
}
:root[data-theme="dark"] body, :root[data-theme="dark"] #app { background: #0f1522; color: var(--ink); }
:root[data-theme="dark"] .topbar, :root[data-theme="dark"] .tabbar, :root[data-theme="dark"] .foot { background: #0f1522; border-color: var(--rule); }
:root[data-theme="dark"] .num.in { color: #6fd39a !important; }
:root[data-theme="dark"] .lg-dir.in { background: #173a28; color: #8ee0b0; }
:root[data-theme="dark"] .lg-dir.out { background: #47201c; color: #f6aaa1; }
:root[data-theme="dark"] .date-stamp { background: var(--paper) !important; }
:root[data-theme="dark"] .ds-wd { color: var(--ink-2) !important; }
:root[data-theme="dark"] .date-stamp.companion { background: color-mix(in srgb, var(--mc, var(--red)) 30%, #161d2b) !important; color: #e8edf5; border-color: color-mix(in srgb, var(--mc, var(--red)) 70%, #fff) !important; }
:root[data-theme="dark"] .ds-link, :root[data-theme="dark"] .event-card.same-day::before { background: color-mix(in srgb, var(--mc, var(--red)) 70%, #fff); }
:root[data-theme="dark"] .month-head[class*=" m"] { color: color-mix(in srgb, var(--mc) 55%, #fff); }
:root[data-theme="dark"] .lb-bar, :root[data-theme="dark"] .rcpt-sugg li:hover .sugg-x { background: var(--paper); }
:root[data-theme="dark"] .btn.signout-btn:not(.ghost), :root[data-theme="dark"] .btn.danger-outline, :root[data-theme="dark"] .btn.ghost.danger-text { background: transparent; color: #f6aaa1 !important; border-color: #6b3a35; }
:root[data-theme="dark"] .btn.danger { background: #c0453a; border-color: #c0453a; color: #fff; }
:root[data-theme="dark"] .tag-week { background: #3a2f16; color: #f0c674; border-color: #6b5520; }
:root[data-theme="dark"] .notice, :root[data-theme="dark"] .empty-box { background: var(--paper-2); color: var(--ink); }
:root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]), :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #0f1522; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .scrim { background: rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .toast { background: #e8edf5; color: #0f1522; }
:root[data-theme="dark"] .undo-toast .link { color: #0f1522; }
:root[data-theme="dark"] .checker .ptile-img, :root[data-theme="dark"] .pgrid.checker .ptile-img { background: repeating-conic-gradient(#2a3446 0% 25%, #1d2636 0% 50%) 50% / 16px 16px; }
:root[data-theme="dark"] .acct-ic, :root[data-theme="dark"] .avatar, :root[data-theme="dark"] .who-photo { background: var(--paper-2); color: var(--ink); }
:root[data-theme="dark"] .use-bar { background: #0f1522; }
:root[data-theme="dark"] .md li::marker { color: var(--gold); }
/* Banner photos stay as they are; the fade goes to the dark page colour */
:root[data-theme="dark"] .pb-shade { background: radial-gradient(ellipse 48% 30% at 50% 40%, rgba(12, 7, 2, 0.6) 0%, rgba(12, 7, 2, 0.22) 65%, rgba(12, 7, 2, 0) 100%), linear-gradient(180deg, rgba(12, 7, 2, 0.15) 0%, rgba(12, 7, 2, 0) 30%, rgba(12, 7, 2, 0) 82%, rgba(15, 21, 34, 0.75) 94%, #0f1522 100%) !important; }
:root[data-theme="dark"] .photo-band .band-mark { filter: invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
/* Posters, photos and emails are shown as they are */
:root[data-theme="dark"] .mail-html iframe { background: #fff; border-radius: 8px; }
/* Dark mode: pale highlights become deep blue tints with light text */
:root[data-theme="dark"] .mail-row.sel, :root[data-theme="dark"] .mail-folders button:hover, :root[data-theme="dark"] .mail-addrs button:hover,
:root[data-theme="dark"] .mail-contacts-link:hover, :root[data-theme="dark"] .rcpt-chip, :root[data-theme="dark"] .rcpt-sugg li.on, :root[data-theme="dark"] .rcpt-sugg li:hover,
:root[data-theme="dark"] .tile-ic, :root[data-theme="dark"] .cal-chip { background: #24324a; color: var(--ink); }
:root[data-theme="dark"] .mail-folders button.on, :root[data-theme="dark"] .mail-addrs button.on { background: #2b4166; color: #ffffff; }
:root[data-theme="dark"] .cal-chip.pint { background: #3a2f16; }
:root[data-theme="dark"] .due-chip.overdue { background: #47201c; color: #f6aaa1; border-color: #8f2e25; }
:root[data-theme="dark"] .warn-text { background: #3a2f16; color: #f0c674; }
:root[data-theme="dark"] .ec-repeat, :root[data-theme="dark"] .link { color: var(--red); }

/* Share menu + share button on event rows */
.ec-wrap { position: relative; }
.ec-wrap > .event-card { padding-right: 52px; }
.ec-share { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--red); }
.ec-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ec-share:hover { border-color: var(--red); }
.same-day-wrap { margin-top: -8px; }
.same-day-wrap > .event-card.same-day { margin-top: 0; }
.share-menu { display: flex; flex-direction: column; gap: 6px; }
.share-menu > button, .share-menu > a { display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; min-height: 56px; }
.share-menu > button:hover, .share-menu > a:hover { border-color: var(--red); }
.share-menu > * > span:first-child { font-size: 1.3rem; width: 28px; text-align: center; flex: none; }
.share-menu > * > span:last-child { display: flex; flex-direction: column; }
.scrim:has(.share-menu) { z-index: 65; }

/* Mail fits one screen on computers: the page never scrolls; each column scrolls on its own if it must */
@media (min-width: 900px) {
  body:has(main.main-full) #app { height: 100dvh; min-height: 0; overflow: hidden; }
  main.main-full { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .mailapp { height: auto !important; flex: 1 1 auto; min-height: 0; }
  .mailapp > * { min-height: 0; }
  .mail-rail { gap: 8px !important; padding: 12px 10px !important; overflow-y: auto; }
  .mail-folders, .mail-addrs { gap: 1px !important; }
  .mail-folders button, .mail-addrs button { min-height: 34px !important; padding: 5px 10px !important; }
  .mail-addrs .addr-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .mail-addrs .label { margin-top: 4px; }
  .mail-compose { min-height: 40px; }
  .rail-spacer { flex: 1 1 auto; min-height: 4px; }
  .mail-contacts-link { padding: 6px 10px !important; }
  .mail-meter { padding-top: 8px !important; margin-top: 0 !important; gap: 4px !important; }
  .mail-me { margin: 0; }
}

/* Minutes: who was there */
.attendee-picker { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; }
.attendee-picker .small-row { gap: 14px; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pick-chip.on { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.pick-chip.guest { background: var(--paper-2); color: var(--ink); border-style: dashed; border-color: var(--line); cursor: default; padding-right: 6px; }
.pick-chip.guest small { color: var(--ink-2); font-weight: 600; }
.pick-chip .chip-x { border: 0; background: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-2); }
.attendee-picker .row input { flex: 1; min-width: 0; }
.guest-note { color: var(--ink-2); }
.note-empty { padding: 10px 14px; } .note-empty .row, .note-open > .row { align-items: center; }
.pgrid.checker .ptile.on-dark .ptile-img { background: repeating-conic-gradient(#1e2a3b 0% 25%, #2a3850 0% 50%) 50% / 16px 16px; }
:root[data-theme="dark"] .brand small, :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .tag, :root[data-theme="dark"] .who-role, :root[data-theme="dark"] .month-head:not([class*=" m"]) { color: #ecc777 !important; border-color: rgba(236, 199, 119, 0.5); }
:root:not([data-theme="dark"]) .tag:not(.tag-week), :root:not([data-theme="dark"]) .who-role { color: #7f5a12; }

/* Mail: sort and filter menu, address counts */
.sort-wrap { position: relative; flex: none; }
.sort-btn.active { border-color: var(--red); color: var(--red); }
.sort-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 240px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sort-pop .label { margin: 6px 4px 2px; }
.sort-opt { text-align: left; border: 0; background: none; font: inherit; color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sort-opt:hover { background: var(--paper-2); } .sort-opt.on { font-weight: 700; color: var(--red); }
.small-chip { min-height: 34px; padding: 0 12px; font-size: 0.86rem; }
.mail-view-line { margin: 0; min-height: 1.2em; }
.mail-addrs .addr-btn { display: flex; align-items: center; gap: 6px; } .mail-addrs .addr-btn span { flex: 1; }

/* ===== Calendar redesign ===== */
:root { --k-mass: #3d6fb6; --k-mass-bg: #e6eef9; --k-pint: #b07d1c; --k-pint-bg: #fbf1dc; --k-sunday: #2f7d52; --k-sunday-bg: #e3f3ea; --k-special: #b4436a; --k-special-bg: #fbe6ee; --k-other: #5b6779; --k-other-bg: #eef1f6; }
:root[data-theme="dark"] { --k-mass: #8db4ee; --k-mass-bg: #1f3352; --k-pint: #ecc777; --k-pint-bg: #3a2f16; --k-sunday: #7fd6a3; --k-sunday-bg: #173a28; --k-special: #f2a0bd; --k-special-bg: #45202f; --k-other: #a9b4c4; --k-other-bg: #24324a; }
.cal2 .cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal2 .cal-top .page-title { margin: 0; }
.cal-viewseg { min-width: 160px; }
.cal2-body { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.cal2-body > .next-up { order: -1; }
@media (min-width: 1000px) { .cal2-body { grid-template-columns: minmax(0, 1fr) 300px; } .cal2-body > .next-up { order: 0; position: sticky; top: 84px; } .fab { display: none; } }
.cal2-nav { display: flex; align-items: center; gap: 8px; }
.cal2-nav h2 { flex: 1; text-align: center; margin: 0; }
.today-btn.is-now { opacity: 0.55; }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); margin: 8px 0; }
.cal-key > span { display: inline-flex; align-items: center; gap: 6px; }
.kind-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--k-other); }
.kind-dot.k-mass, .dots b.k-mass { background: var(--k-mass); } .kind-dot.k-pint, .dots b.k-pint { background: var(--k-pint); }
.kind-dot.k-sunday, .dots b.k-sunday { background: var(--k-sunday); } .kind-dot.k-special, .dots b.k-special { background: var(--k-special); }
.cal2-grid .cal-wd .wd-short { display: none; }
@media (max-width: 759px) { .cal2-grid .cal-wd .wd-long { display: none; } .cal2-grid .cal-wd .wd-short { display: inline; } }
.cal2-grid .cal-wd.thu, .cal2-grid .cal-day.thu { background: color-mix(in srgb, var(--k-mass) 5%, transparent); }
.cal2-grid .cal-day.other .dnum { color: var(--ink-2); opacity: 0.5; }
.cal2-grid .cal-day.other .cal-chip { opacity: 0.55; }
.cal2-grid .cal-day.past:not(.other) .dnum { color: var(--ink-2); }
.cal2-grid .cal-day.past .cal-chip { opacity: 0.6; }
.cal2-grid .cal-day.today .dnum { background: var(--red); color: var(--red-ink); border-radius: 50%; width: 26px; height: 26px; display: inline-grid; place-items: center; font-weight: 700; opacity: 1; }
.cal2-grid .dots b { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 0 1px; }
.cal2-grid .cal-chip { border-left: 3px solid var(--k-other); background: var(--k-other-bg); color: var(--ink); }
.cal2-grid .cal-chip.k-mass { border-left-color: var(--k-mass); background: var(--k-mass-bg); }
.cal2-grid .cal-chip.k-pint { border-left-color: var(--k-pint); background: var(--k-pint-bg); }
.cal2-grid .cal-chip.k-sunday { border-left-color: var(--k-sunday); background: var(--k-sunday-bg); }
.cal2-grid .cal-chip.k-special { border-left-color: var(--k-special); background: var(--k-special-bg); }
.cal2-grid { touch-action: pan-y; overscroll-behavior-x: contain; }
html.no-hswipe, html.no-hswipe body { overscroll-behavior-x: none; }
.cal2-grid.from-right { animation: calIn 0.2s cubic-bezier(.2,.7,.3,1); } .cal2-grid.from-left { animation: calInL 0.2s cubic-bezier(.2,.7,.3,1); }
@keyframes calIn { from { opacity: 0.3; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes calInL { from { opacity: 0.3; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes calFade { from { opacity: 0.3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal2-grid.from-right, .cal2-grid.from-left { animation: calFade 0.2s ease-out; } }
.next-up { display: flex; flex-direction: column; gap: 6px; }
.nu-poster { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; }
.nu-poster img { width: 100%; max-height: 360px; object-fit: cover; display: block; }
@media (max-width: 999px) { .nu-poster img { max-height: 200px; } }
.nu-title { font-family: var(--f-display); font-size: 1.2rem; }
.nu-list { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; }
.nu-list button { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--ink); padding: 8px 2px; cursor: pointer; border-radius: 8px; }
.nu-list button:hover { background: var(--paper-2); }
.cal-page .cal2-grid { grid-template-rows: 30px; }
.cal2-grid .cal-wd { align-self: end; padding-bottom: 4px; font-weight: 700; color: var(--ink-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cal2-grid .cal-wd.thu { border-radius: 8px 8px 0 0; }
.brand-tile { cursor: default; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 10px; }
.tiny-seg { display: inline-flex !important; } .tiny-seg button { min-height: 28px; padding: 0 10px; font-size: 0.8rem; }
/* 7 tabs for the team on phones: a little tighter */
@media (max-width: 420px) { .tabbar a { font-size: 0.66rem; padding-inline: 0; min-width: 0; } .tabbar a svg { width: 22px; height: 22px; } }

/* Highlights */
.hl-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hl-grid { grid-template-columns: repeat(3, 1fr); } }
.hl-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.hl-card.pinned { border-color: var(--gold); }
.hl-cover { position: relative; border: 0; padding: 0; background: var(--paper-2); aspect-ratio: 4 / 3; cursor: pointer; display: block; width: 100%; }
.hl-cover:disabled { cursor: default; }
.hl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-nocover { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ink-2); gap: 2px; background: linear-gradient(135deg, var(--paper-2), color-mix(in srgb, var(--red) 12%, var(--paper-2))); }
.hl-date-big { font-family: var(--f-display); font-size: 3rem; font-weight: 700; color: var(--ink); line-height: 1; }
.hl-pin { position: absolute; top: 10px; left: 10px; background: var(--gold); color: #1e2a3b; font-weight: 800; font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; }
.hl-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.hl-title { font-family: var(--f-display); font-size: 1.2rem; }
.hl-body p { margin: 0; }
.hl-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hl-pick li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.hl-pick .icon-btn.on { color: var(--gold); }
.hl-grid { align-items: start; }
/* the last calendar row is never hidden behind the phone tab bar */
@media (max-width: 759px) { .cal2 { padding-bottom: 24px; } }

/* Highlights, redesigned (preview) */
.photo-band.mini { height: 170px !important; }
@media (min-width: 760px) { .photo-band.mini { height: 200px !important; } }
.photo-band.mini h1 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 2.8rem); margin: 0; color: #fff; }
.photo-band.mini p { margin: 4px 0 0; color: rgba(255,255,255,0.88); font-size: 1.02rem; }
.hl2 { display: flex; flex-direction: column; gap: 22px; }
.hl2-team { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.hl2-filter { align-self: flex-start; }
.hl2-date { font-variant: small-caps; letter-spacing: 0.06em; text-transform: lowercase; font-weight: 700; font-size: 0.92rem; color: #9a7020; }
.hl2-feature { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 30, 50, 0.16); background: #1e2a3b; }
.hl2-feature-img { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; aspect-ratio: 4 / 3; background: #1e2a3b; }
@media (min-width: 760px) { .hl2-feature-img { aspect-ratio: 16 / 9; } }
.hl2-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl2-feature-text { position: static; padding: 16px 22px 20px; color: #fff; display: flex; flex-direction: column; gap: 4px; background: #1e2a3b; }
.hl2-feature-text > * { pointer-events: auto; }
.hl2-feature-text h2 { font-family: var(--f-display); font-size: clamp(1.5rem, 3.6vw, 2.3rem); margin: 0; color: #fff; line-height: 1.1; }
.hl2-feature-text p { margin: 0; max-width: 62ch; color: rgba(255,255,255,0.9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl2-date.on-dark { color: #f0c96a; }
.hl2-tag { align-self: flex-start; background: var(--gold); color: #1e2a3b; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 4px; }
.hl2-feature-foot { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.link.on-dark { color: #fff; font-weight: 700; }
.hl2-feature-foot .btn.ghost { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }
.hl2-grid { display: grid; grid-template-columns: 1fr; gap: 28px 24px; }
@media (min-width: 700px) { .hl2-grid { grid-template-columns: repeat(2, 1fr); } }
.hl2-card { display: flex; flex-direction: column; background: var(--paper); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 18px rgba(20, 30, 50, 0.09); }
.hl2-img { display: block; border: 0; padding: 0; width: 100%; aspect-ratio: 4 / 3; cursor: pointer; background: var(--paper-2); overflow: hidden; }
.hl2-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
@media (hover: hover) { .hl2-img:hover img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .hl2-img img { transition: none; } .hl2-img:hover img { transform: none; } }
.hl2-text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hl2-title { font-family: var(--f-display); font-size: 1.3rem; margin: 0; line-height: 1.2; }
.hl2-blurb { margin: 2px 0 0; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.hl2-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.hl2-more { font-weight: 700; }
.hl2-empty { text-align: center; padding: 34px 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hl2-empty-line { font-family: var(--f-display); font-size: 1.35rem; margin: 0; max-width: 30ch; line-height: 1.3; }
.hl2-waiting ul { list-style: none; margin: 0; padding: 0; }
.hl2-waiting li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.hl2-strip { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; flex: 1 1 100%; order: 3; padding: 2px 0; scrollbar-width: none; }
.hl2-strip button { flex: none; width: 54px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; opacity: 0.65; }
.hl2-strip button.on { border-color: var(--gold); opacity: 1; }
.hl2-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] .hl2-card { background: var(--paper-2); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .hl2-date:not(.on-dark) { color: #e0b55a; }
:root[data-theme="dark"] .hl2-feature { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.photo-band.mini .pb-img { filter: blur(2.5px) brightness(0.72) !important; }
.photo-band.mini h1, .photo-band.mini p { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.photo-band.mini p { font-weight: 600; color: #fff; }
.hl2-preview-note { margin: 0; align-self: center; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 16%, var(--paper)); color: var(--ink); font-size: 0.88rem; text-align: center; }
/* Logo cards: the tile behind follows the chosen colour, not the site theme; photos fill their tile */
.pgrid.checker .brand-tile.on-light .ptile-img { background: repeating-conic-gradient(#e9edf3 0% 25%, #fff 0% 50%) 50% / 16px 16px !important; }
.pgrid.checker .brand-tile.on-dark .ptile-img { background: repeating-conic-gradient(#1e2a3b 0% 25%, #2a3850 0% 50%) 50% / 16px 16px !important; }
.pgrid.checker .brand-tile.photo-tile .ptile-img { background: var(--paper-2) !important; }
.pgrid.checker .brand-tile.photo-tile .ptile-img img { object-fit: contain; width: 100%; height: 100%; }

/* Side-by-side form fields line up at the top: labels on one line, inputs the same height */
.form .two { align-items: start !important; }
.form .two > .field { margin: 0; }
.form .two > .field input, .form .two > .field select { min-height: 46px; }
.row-hint { margin: -6px 0 0; }
@media (max-width: 480px) { .form .two { grid-template-columns: 1fr !important; } }

/* Event editor: a roomier window, Details grows with its text, header and buttons always visible */
.sheet.wide:has(#event-form) { width: min(860px, 100%); max-height: 90vh; display: flex; flex-direction: column; }
.sheet:has(#event-form) .sheet-body { overflow-y: auto; flex: 1 1 auto; }
textarea.autogrow { min-height: 12em; max-height: 60vh; resize: vertical; line-height: 1.5; }
@media (max-width: 599px) { .sheet:has(#event-form) { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; } }

/* Header never moves between pages: fixed height, fixed logo size, fixed line heights, scrollbar space kept */
html { scrollbar-gutter: stable; }
.topbar { height: 69px; min-height: 69px; box-sizing: border-box; }
@media (max-width: 759px) { .topbar { height: 65px; min-height: 65px; } }
.topbar .brand img { width: 44px; height: 44px; aspect-ratio: 1; flex: none; }
@media (max-width: 759px) { .topbar .brand img { width: 40px; height: 40px; } }
.topbar .brand strong { line-height: 22px; height: 22px; }
.topbar .brand small { line-height: 12px; height: 12px; display: block; }

/* Mail toolbar wraps instead of scrolling sideways, so the Assign menu is never clipped */
.mail-toolbar { flex-wrap: wrap; overflow: visible !important; row-gap: 6px; z-index: 20; }
.assign-wrap .who-menu { z-index: 70; top: calc(100% + 6px); min-width: 200px; box-shadow: 0 12px 30px var(--shadow); }
/* The round logo on Home never moves: fixed shape, no transforms or transitions */
.hero .badge { aspect-ratio: 949 / 1200; height: auto; transform: none !important; transition: none !important; animation: none !important; align-self: start; }

/* Home: the whole evening in one card */
.day-card { cursor: default; }
.day-card .day-title { all: unset; cursor: pointer; display: block; }
.day-card .day-title:focus-visible { outline: 2px solid var(--blue, #2f5ea8); outline-offset: 2px; border-radius: 4px; }
.day-line { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid color-mix(in srgb, var(--gold) 70%, transparent); display: flex; flex-direction: column; gap: 4px; }
.day-line button { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; line-height: 1.35; width: 100%; box-sizing: border-box; padding: 2px 0; }
.day-line button:focus-visible { outline: 2px solid var(--blue, #2f5ea8); outline-offset: 2px; border-radius: 4px; }
.day-line button:hover strong { text-decoration: underline; }
.dl-time { flex: none; min-width: 4.6em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.dl-what strong { font-weight: 600; }
.dl-where { color: var(--ink-2); }
@media (max-width: 520px) { .day-line button { flex-direction: column; gap: 0; } .dl-time { min-width: 0; font-size: 0.85rem; color: var(--gold-ink, #9a7020); } :root[data-theme="dark"] .dl-time { color: #e0b55a; } }

/* This week's message */
.wm-top { align-items: center; justify-content: space-between; }
.wm-text { width: 100%; font: inherit; font-size: 0.95rem; line-height: 1.45; min-height: 320px; }
/* Open actions (Team) and minutes */
.open-actions .count-pill { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #1e2a3b; font-size: 0.8rem; font-weight: 800; vertical-align: middle; }
.act-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; margin-bottom: 12px; }
.act-add #act-who { width: 120px; } .act-add #act-what { min-width: 200px; flex: 1; } .act-add #act-due { width: 150px; }
.act-groups { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .act-groups { grid-template-columns: repeat(2, 1fr); } }
.act-group { padding: 12px 14px; }
.act-who { font-family: var(--f-display); font-size: 1.1rem; margin: 0 0 4px; }
.acts { list-style: none; margin: 0; padding: 0; }
.act-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.act-row:last-child { border-bottom: 0; }
.act-row .task-check { margin-top: 3px; flex: none; }
.act-row .grow { display: flex; flex-direction: column; min-width: 0; }
.act-row.done .act-what { text-decoration: line-through; color: var(--ink-2); }
.act-count { color: #9a7020; font-weight: 700; } .act-count.all-done { color: var(--ink-2); font-weight: 600; }
/* Sign-up payments */
.money-in { display: flex; align-items: center; gap: 6px; } .money-in input { max-width: 140px; }
.pay-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; border-radius: 12px; background: var(--paper-2); margin-bottom: 10px; font-size: 0.95rem; }
.pay-summary .owed strong { color: #b3261e; } :root[data-theme="dark"] .pay-summary .owed strong { color: #ff8a80; }
.pay-cell { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.pay-cell select.pay-paid { border-color: #2e7d4f; color: #2e7d4f; font-weight: 700; }
.pay-cell select.pay-waived { color: var(--ink-2); }
/* Headcount */
.hc-row { align-items: center; gap: 12px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: var(--paper); }
.stepper input { width: 64px; text-align: center; border: 0 !important; font-size: 1.25rem; font-weight: 700; background: transparent; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { width: 44px; height: 44px; border: 0; background: var(--paper-2); font-size: 1.4rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.step-btn:active { background: color-mix(in srgb, var(--gold) 25%, var(--paper-2)); }
.attend { display: flex; flex-direction: column; gap: 8px; }
/* Attendance by type */
.att-type-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .att-type-grid { grid-template-columns: repeat(3, 1fr); } }
.att-type { display: flex; flex-direction: column; gap: 4px; }
.trend { font-weight: 800; font-size: 0.85rem; color: var(--ink-2); } .trend.up { color: #2e7d4f; } .trend.down { color: #b3261e; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 6px; }
.spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.spark-bar { width: 100%; max-width: 26px; background: var(--blue, #2f5ea8); border-radius: 4px 4px 0 0; }
.spark-val { font-size: 0.72rem; font-weight: 700; } .spark-lab { font-size: 0.65rem; color: var(--ink-2); margin-top: 2px; white-space: nowrap; }
/* Plan templates */
.tpl-ed { margin-top: 12px; }
.tpl-steps { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tpl-steps li { display: flex; gap: 8px; align-items: center; } .tpl-steps select { width: 150px; flex: none; }
.chip.on { background: var(--blue, #2f5ea8); color: #fff; border-color: transparent; }
:root[data-theme="dark"] .act-count { color: #e0b55a; }
:root[data-theme="dark"] .pay-cell select.pay-paid { border-color: #6fcf97; color: #6fcf97; }
:root[data-theme="dark"] .trend.up { color: #6fcf97; } :root[data-theme="dark"] .trend.down { color: #ff8a80; }
.pay-cell select { width: auto; max-width: 130px; }
.wm-top .seg button { white-space: nowrap; }
/* Event editor: more room to read and write the details */
.sheet.wide:has(#event-form) { width: min(1040px, 100%) !important; max-height: 94vh !important; }
#event-form #ev-desc { min-height: 300px; font-size: 1rem; line-height: 1.5; }
@media (max-width: 759px) { #event-form #ev-desc { min-height: 220px; } }
.band-next-space { height: 155px; }
@media (max-width: 520px) { .band-next-space { height: 321px; } }
.assign-wrap .who-menu button { color: var(--ink); }
.plan-row-wrap { align-items: center; gap: 6px; flex-wrap: nowrap; }
.plan-row-wrap .plan-row { min-width: 0; }
.plan-del { margin-top: 24px; text-align: center; }
.hl-focus-pick { position: relative; cursor: crosshair; border-radius: 10px; overflow: hidden; line-height: 0; }
.hl-focus-pick img { width: 100%; height: auto; display: block; }
.hl-focus-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.hl2-count-dark { color: rgba(255,255,255,0.75); }
/* Calendar month view fits the screen (row height set from the space available) */
.cal-page.cal-month .cal2-grid { grid-auto-rows: var(--cal-row, minmax(78px, calc((100dvh - 400px) / 6))); }
.cal-page.cal-month .cal-day { min-height: 0; }
@media (max-width: 899px) {
  .cal-page.cal-month .cal2-grid .cal-day { aspect-ratio: auto; }
  .cal-page.cal-month .cal2-body > .next-up { order: 1; }
}
/* List view: page header and the month heading stay put under the site header */
.cal-page.cal-listview .cal-top { position: sticky; top: var(--top-h, 69px); z-index: 6; background: var(--paper); padding-block: 8px; margin-inline: -4px; padding-inline: 4px; }
.cal-page.cal-listview .cal2-nav { position: sticky; top: calc(var(--top-h, 69px) + var(--caltop-h, 56px)); z-index: 5; background: var(--paper); padding-block: 6px; }
@media (max-width: 759px) { .cal-page.cal-listview .cal-top { top: var(--top-h, 65px); } }
@media (min-width: 1000px) { .cal-page.cal-listview .cal2-body > .next-up { top: calc(var(--top-h, 69px) + var(--caltop-h, 66px) + 12px); } }
/* Date tiles also show the start time */
.ds-at { display: block; width: calc(100% - 12px); margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line, var(--rule)); text-align: center; font-size: 0.74rem; font-weight: 800; color: var(--ink); letter-spacing: 0.01em; white-space: nowrap; }
/* Phones: the church photo carries on behind the round "Every Thursday" logo (white version, darkened behind it) */
.band-badge { display: none; }
@media (max-width: 759px) {
  .band-badge { display: grid; place-items: center; position: relative; margin: 34px auto 0; width: min(210px, 56vw); aspect-ratio: 949 / 1200; }
  .band-badge::before { content: ""; position: absolute; inset: -22% -40%; z-index: -1; background: radial-gradient(closest-side, rgba(10, 6, 2, 0.55), rgba(10, 6, 2, 0.32) 60%, rgba(10, 6, 2, 0) 100%); }
  .band-badge img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }
  .page.home .hero .badge { display: none; }
  .page.home .hero { padding-top: 0; }
}
/* Footer: one compact centred block */
.foot { gap: 6px !important; padding-block: 22px 26px !important; }
.foot > p { margin: 0; }
.foot .foot-name { font-weight: 600; color: var(--ink); }
.foot .foot-note { max-width: 34ch; color: var(--ink-2); line-height: 1.4; }
.foot .foot-links { margin-top: 2px; }
.foot img { margin-bottom: 2px; }
/* Team page: jump menu and even section spacing */
.team-jump { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.team-jump::-webkit-scrollbar { display: none; }
.team-jump a { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 600; background: var(--paper); white-space: nowrap; }
.team-jump a:hover { border-color: var(--ink-2); }
.team-page .team-sec { scroll-margin-top: calc(var(--top-h, 69px) + 12px); margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.team-page .team-sec > section, .team-page .team-sec > div > section { margin: 0; }
.team-page #tj-tools { margin-top: 8px; }
.team-page .section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inv-toggle { margin-top: 4px; }
.team-page .team-sec.two-col { display: grid; }
.team-page #tj-tools .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1000px) { .team-page #tj-tools .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .team-page #tj-tools .tile-grid > .tile-link { grid-column: auto !important; } }
.team-page #tj-tools .tile-link { min-height: 64px; padding: 12px; gap: 10px; }
@media (max-width: 599px) { .team-page #tj-tools .tile-link .muted.small { display: none; } .team-page #tj-tools .tile-link { min-height: 0; padding: 10px; gap: 8px; align-items: center; } .team-page #tj-tools .tile-link strong { font-size: 0.9rem; line-height: 1.2; } .team-page #tj-tools .tile-ic { width: 34px; height: 34px; flex: none; } .team-page #tj-tools .tile-ic svg { width: 18px; height: 18px; } }
/* Finances: bars line up (fixed amount column), switch full width on phones, log tools as small buttons */
.bars .bar-row { grid-template-columns: minmax(0, 1fr) minmax(80px, 34%) 5.4em; }
.bars .bar-row .num { text-align: right; }
.bars .bar-track { display: block; width: 100%; }
@media (max-width: 759px) { .dir-filter { max-width: none !important; width: 100%; } .log-tools { width: 100%; } }
.log-tools { gap: 8px; flex-wrap: wrap; }
/* Mobile review (Nov 2026): bigger tap areas, tidier rows */
@media (max-width: 759px) {
  /* text links get a taller invisible tap area without moving anything */
  a.link, button.link { padding-block: 10px; margin-block: -10px; }
  .theme-mini button { min-width: 44px; min-height: 40px; }
  .mail-chips .chip { min-height: 38px; padding-inline: 13px; }
  .team-jump a { padding: 9px 14px; }
  .tiny-seg button { min-height: 36px !important; padding: 0 12px !important; }
  .brand-row { flex-wrap: wrap; row-gap: 8px; }
  .brand-row .link { margin-left: auto; }
  /* Contacts: unsaved addresses from mail, buttons under the name instead of squeezing it */
  .recent-list li { flex-wrap: wrap; }
  .recent-list li > .person { flex: 1 1 100%; min-width: 0; }
  .recent-list li > .btn { flex: 1 1 0; }
}
.lg-dir { font-size: 0.7rem; }
/* File pickers look like our buttons */
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--red); background: var(--paper); border: 1px solid var(--line, var(--rule)); border-radius: 999px; padding: 8px 14px; margin-right: 10px; cursor: pointer; }
/* Home: Highlights */
.home-hl { display: flex; flex-direction: column; gap: 12px; }
.home-hl-feature { display: block; border-radius: 16px; overflow: hidden; background: #1e2a3b; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(20, 30, 50, 0.14); }
.home-hl-feature img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 760px) { .home-hl-feature img { aspect-ratio: 21 / 9; } }
.home-hl-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 18px; }
.home-hl-text strong { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; }
.home-hl-text .hl2-tag { align-self: flex-start; }
.home-hl-blurb { color: rgba(255,255,255,0.85); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-hl-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.home-hl-small { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; color: inherit; }
.home-hl-small img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.home-hl-small > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; font-size: 0.9rem; }
:root[data-theme="dark"] .home-hl-small { background: var(--paper-2); }