:root {
  /* Taken from the parish crest: the blue of Our Lady's heart. */
  --bg: #f3f6f9;
  --surface: #ffffff;
  --ink: #14202b;
  --ink-soft: #55677a;
  --line: #dbe3ea;
  --brand: #04537c;
  --brand-dark: #033d5c;
  --brand-soft: #e7f0f6;
  --accent: #0d6ea8;
  --ok: #2f6b47;
  --warn: #8a5a00;
  --warn-soft: #fdf3dd;
  --danger: #9b2226;
  --radius: 10px;
  --tint: #f5f8fb;
  --shadow: 0 1px 2px rgba(4, 45, 70, .06), 0 4px 16px rgba(4, 45, 70, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---------- layout ---------- */

.masthead {
  background: var(--brand);
  color: #fff;
  padding: 14px 24px;
}
.masthead-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
/* The crest and the title are one link back to where you started. */
.masthead .brand {
  display: flex; align-items: center; gap: 16px;
  color: #fff; text-decoration: none;
  padding: 4px 10px 4px 4px; margin-left: -4px; border-radius: 8px;
  border: 1px solid transparent;
}
.masthead .brand:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.masthead .brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.masthead h1 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: .01em; }
.masthead .sub { font-size: .8rem; opacity: .8; margin: 2px 0 0; }
.masthead .spacer { flex: 1; }
.masthead select {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px; padding: 5px 8px; font-size: .85rem;
  width: auto; flex: 0 0 auto;
}
.masthead select option { color: var(--ink); }
.masthead .who { font-size: .82rem; opacity: .9; }
.masthead button.link { color: #fff; opacity: .9; }

nav.tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
nav.tabs .inner {
  max-width: 1180px; margin: 0 auto; display: flex; gap: 2px; overflow-x: auto; padding: 0 16px;
}
nav.tabs a {
  padding: 12px 14px; text-decoration: none; color: var(--ink-soft);
  font-size: .92rem; font-weight: 500; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
nav.tabs a:hover { color: var(--ink); }
nav.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 72px; }

h2 { font-size: 1.35rem; margin: 0 0 4px; }
h3 { font-size: 1.02rem; margin: 0 0 12px; color: var(--ink); }
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .spacer { flex: 1; }
.muted { color: var(--ink-soft); font-size: .88rem; }

/* ---------- cards ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.card > h3 {
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px;
  color: var(--brand); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
}
.note {
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  padding: 10px 14px; border-radius: 4px; font-size: .88rem; margin-bottom: 18px;
}
.legal { font-size: .85rem; color: var(--ink-soft); background: var(--tint);
  border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .n { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.stat .l { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.stat.warn { background: var(--warn-soft); border-color: #ecd9a8; }
.stat.warn .n { color: var(--warn); }

/* ---------- forms ---------- */

.grid { display: grid; gap: 14px 18px; grid-template-columns: repeat(12, 1fr); }
.f { display: flex; flex-direction: column; gap: 5px; }
.f.c2 { grid-column: span 2; } .f.c3 { grid-column: span 3; }
.f.c4 { grid-column: span 4; } .f.c5 { grid-column: span 5; }
.f.c6 { grid-column: span 6; } .f.c8 { grid-column: span 8; }
.f.c9 { grid-column: span 9; } .f.c12 { grid-column: span 12; }

label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
label .req { color: var(--danger); }
.hint { font-size: .78rem; color: var(--ink-soft); font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], select, textarea {
  font: inherit; font-size: .93rem; padding: 8px 10px; border: 1px solid #c3cedb;
  border-radius: 6px; background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
textarea { min-height: 70px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--brand); }

.check { flex-direction: row; align-items: flex-start; gap: 9px; }
.check label { font-weight: 500; font-size: .9rem; color: var(--ink); cursor: pointer; }
.radios { display: flex; gap: 20px; flex-wrap: wrap; }
.radios span { display: flex; align-items: center; gap: 7px; }
.radios label { font-weight: 500; color: var(--ink); font-size: .9rem; }

/* ---------- buttons ---------- */

button {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  border-radius: 6px; border: 1px solid transparent; padding: 8px 16px;
}
button.primary { background: var(--brand); color: #fff; }
button.primary:hover { background: var(--brand-dark); }
button.ghost { background: #fff; border-color: #c3cedb; color: var(--ink); }
button.ghost:hover { border-color: var(--ink-soft); }
button.danger { background: #fff; border-color: #e0b6b6; color: var(--danger); }
button.danger:hover { background: #fdf1f1; }
button.link { background: none; border: none; color: var(--accent); padding: 2px 4px; text-decoration: underline; }
button:disabled { opacity: .55; cursor: default; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); background: var(--tint); }
tbody tr:hover { background: var(--tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

.pill {
  display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: #eee; color: var(--ink-soft); white-space: nowrap;
}
.pill.received { background: #e2f0e7; color: var(--ok); }
.pill.prep { background: #e3edf3; color: var(--accent); }
.pill.none { background: #eef2f6; color: var(--ink-soft); }
.pill.na { background: #eef2f6; color: #9a9a9a; }
.pill.community { background: var(--brand-soft); color: var(--brand); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=text] { max-width: 320px; }
.toolbar select { width: auto; }

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(31,36,48,.45); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal { background: var(--surface); border-radius: var(--radius); max-width: 720px; width: 100%; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal h3 { color: var(--brand); }

/* ---------- login ---------- */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; width: 100%; max-width: 420px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 1.15rem; margin: 0 0 2px; color: var(--brand); }
.login-card .parish { font-size: .85rem; color: var(--ink-soft); margin: 0 0 22px; }
.login-card .lang { display: flex; gap: 6px; margin-bottom: 20px; }
.login-card .lang button { flex: 1; font-size: .8rem; padding: 6px; }
.login-card .lang button.on { background: var(--brand); color: #fff; border-color: var(--brand); }

.alert { padding: 10px 12px; border-radius: 6px; font-size: .88rem; margin-bottom: 14px; }
.alert.error { background: #fdf1f1; color: var(--danger); border: 1px solid #e8c4c4; }
.alert.ok { background: #eaf4ee; color: var(--ok); border: 1px solid #bfdcc9; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: .88rem; z-index: 100; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ---------- translations editor ---------- */

.tr-row { display: grid; grid-template-columns: 1.1fr 1.4fr 1.4fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.tr-row .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; color: var(--ink-soft); word-break: break-all; }
.tr-row .k .def { display: block; font-family: inherit; font-size: .84rem; color: var(--ink); margin-top: 3px; }

@media (max-width: 760px) {
  .f.c2, .f.c3, .f.c4, .f.c5, .f.c6, .f.c8, .f.c9 { grid-column: span 12; }
  .tr-row { grid-template-columns: 1fr; }
  main { padding: 16px 12px 60px; }
}

/* ----------------------------------------------------------------- setup */

/* The sub-tabs are styled further down, as underlined tabs. An older pill
   style used to live here; between them the selected tab ended up with the
   brand colour as its background AND as its text colour, which is to say
   invisible. Only one definition now. */

.card.sub { padding: 16px 18px; margin-bottom: 12px; }

/* .grid-table itself is defined further down, with the rest of the tables.
   An earlier copy here set border-top on every cell, which survived the later
   definition's border-bottom and drew two lines between every row. */
.grid-table td input[type="text"], .grid-table td input[type="number"] { width: 100%; }
.grid-table code { font-size: .8rem; color: var(--ink-soft); }

button.small { padding: 5px 12px; font-size: .82rem; }
.right { text-align: right; }
.muted.small { font-size: .8rem; margin-right: 10px; }
.danger-link { color: var(--danger); }

/* .inline-check is also defined further down; only the input rule is unique
   to here, and the whitespace behaviour the earlier copy set is folded in. */
.inline-check { white-space: nowrap; }
.inline-check input { width: auto; margin: 0; }

.alert.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #ecd9a8; }
.alert.banner { display: flex; align-items: center; gap: 14px; }
.alert.banner > div { flex: 1; }
.pill.warn { background: var(--warn-soft); color: var(--warn); }

@media print {
  nav.tabs, .toolbar, .subtabs, button, .masthead select { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ------------------------------------------------------------ parish crest */

/* The crest is blue on blue, so it sits on a white disc to read at all. */
.masthead .crest {
  height: 40px; width: 40px; flex: 0 0 auto;
  object-fit: contain; background: #fff; border-radius: 50%;
  padding: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.login-crest { display: block; height: 110px; width: auto; margin: 0 auto 14px; }
.portal-crest { height: 76px; width: auto; flex: 0 0 auto; }
.card.centred { text-align: center; }
.card.centred .portal-crest { margin: 0 auto 12px; }

@media (max-width: 640px) {
  .masthead .crest { height: 34px; width: 34px; padding: 4px; }
  .login-crest { height: 84px; }
  .portal-crest { height: 60px; }
}
@media print {
  .masthead .crest { height: 36px; width: 36px; box-shadow: none; }
}

/* The name in the header is the way to your own account. */
.masthead .who {
  display: flex; flex-direction: column; line-height: 1.25;
  color: #fff; text-decoration: none; padding: 4px 10px; border-radius: 6px;
  border: 1px solid transparent;
}
.masthead .who:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.masthead .who-name { font-size: .85rem; font-weight: 600; }
.masthead .who-role { font-size: .74rem; opacity: .8; }

/* ---------------------------------------------------------- signing in */

.sso-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; margin-bottom: 4px;
  border: 1px solid #c3cedb; border-radius: 6px; background: #fff;
  color: var(--ink); font-size: .93rem; font-weight: 600; text-decoration: none;
}
.sso-button:hover { border-color: var(--ink-soft); background: var(--tint); }

.or-line { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-soft); font-size: .8rem; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.grouplist { list-style: none; margin: 0; padding: 0; }
.grouplist li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: .84rem; }
.grouplist code { font-size: .8rem; }

/* --------------------------------------------------- the permissions grid */

.perm-table th.num, .perm-table td.num { text-align: center; width: 108px; }
.perm-table td.perm-name { max-width: 460px; }
.perm-table td.perm-name .muted { font-size: .82rem; margin-top: 2px; }
.perm-table input[type=checkbox] { width: 18px; height: 18px; }
.perm-table input[type=checkbox]:disabled { opacity: .45; }

.perm-group td {
  background: var(--tint); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}

/* =========================================================================
   Appointments: the parts that are this application's own
   ========================================================================= */

/* ---------------------------------------------------------- small pieces */

.pill.pending    { background: var(--warn-soft); color: var(--warn); }
.pill.confirmed  { background: #e2f0e7; color: var(--ok); }
.pill.declined   { background: #fdf1f1; color: var(--danger); }
.pill.cancelled  { background: #eef2f6; color: var(--ink-soft); text-decoration: line-through; }
.pill.completed  { background: #e3edf3; color: var(--accent); }
.pill.no_show    { background: #f3ece4; color: #7a5230; }
.pill.ok         { background: #e2f0e7; color: var(--ok); }
.pill.error      { background: #fdf1f1; color: var(--danger); }
.pill.new        { background: #eef2f6; color: var(--ink-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; background: var(--tint);
  border: 1px solid var(--line); font-size: .8rem; color: var(--ink-soft);
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.empty {
  text-align: center; padding: 34px 20px; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.empty p { margin: 0 0 12px; }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.nowrap { white-space: nowrap; }
h4 { margin: 0 0 6px; font-size: .95rem; }

/* -------------------------------------------------------- the week, edited */

.weekday-block {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
}
.weekday-block.is-empty { background: var(--tint); }
.weekday-block > header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.weekday-block > header .name { font-weight: 600; font-size: .92rem; min-width: 108px; }
.weekday-block > header .spacer { flex: 1; }
.weekday-block .none { color: var(--ink-soft); font-size: .86rem; }

.hours-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hours-row input[type=time] {
  font: inherit; font-size: .9rem; padding: 6px 8px; width: auto;
  border: 1px solid #c3cedb; border-radius: 6px; background: #fff; color: var(--ink);
}
.hours-row select { width: auto; font-size: .85rem; padding: 5px 8px; }
.hours-row .dash { color: var(--ink-soft); }

/* ------------------------------------------------------------ month grid */

.month {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.month .head {
  text-align: center; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft); padding: 6px 0; font-weight: 600;
}
.month-day {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: .92rem; color: var(--ink); cursor: pointer; padding: 0;
}
.month-day .n { line-height: 1; }
.month-day .count { font-size: .66rem; color: var(--ink-soft); }
.month-day:hover:not(:disabled) { border-color: var(--brand); }
.month-day:disabled { background: var(--tint); color: #b6c2ce; cursor: default; }
.month-day.blank { border: none; background: transparent; cursor: default; }
.month-day.has { border-color: #a9cdb8; background: #f2f9f4; font-weight: 600; }
.month-day.has .count { color: var(--ok); }
.month-day.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.month-day.on .count { color: rgba(255,255,255,.85); }
.month-day.today { box-shadow: inset 0 0 0 2px var(--brand-soft); }

.month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.month-nav .label { font-weight: 600; flex: 1; text-align: center; }
.month-nav button { padding: 6px 12px; }

/* -------------------------------------------------------------- the slots */

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.slot {
  padding: 10px 8px; border: 1px solid #c3cedb; border-radius: 8px;
  background: #fff; font-size: .92rem; font-variant-numeric: tabular-nums;
  color: var(--ink); cursor: pointer; text-align: center;
}
.slot:hover { border-color: var(--brand); color: var(--brand); }
.slot.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.slot-day-head {
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px;
}

/* --------------------------------------------------------------- the diary */

.diary-day {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px; margin-bottom: 10px;
}
.diary-day > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.diary-day > header .d { font-weight: 600; }
.diary-day > header .free { margin-left: auto; font-size: .82rem; color: var(--ok); }
.diary-day.closed { background: var(--tint); }
.diary-day.closed > header .free { color: var(--ink-soft); }

.taken {
  display: flex; align-items: baseline; gap: 10px; font-size: .86rem;
  padding: 5px 0; border-top: 1px dashed var(--line);
}
.taken .t { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 118px; }
.taken .why { color: var(--ink-soft); font-size: .8rem; }
.taken.booking .t { color: var(--brand); }

.slot-preview { display: flex; flex-wrap: wrap; gap: 5px; }
.slot-preview span {
  font-size: .78rem; padding: 2px 7px; border-radius: 5px;
  background: #f2f9f4; color: var(--ok); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- rule building */

.rule-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.rule-card.off { opacity: .62; }
.rule-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rule-card > header .name { font-weight: 600; }
.rule-card > header .spacer { flex: 1; }
.rule-card .sentence {
  font-size: .9rem; color: var(--ink); background: var(--tint);
  border-left: 3px solid var(--brand); padding: 8px 12px; border-radius: 4px; margin: 8px 0;
}

.condition-row {
  display: grid; grid-template-columns: 1.1fr 1.2fr 1.6fr auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.condition-row select, .condition-row input { width: 100%; font-size: .88rem; padding: 6px 8px; }
.condition-row button.small { padding: 5px 9px; }
@media (max-width: 700px) {
  .condition-row { grid-template-columns: 1fr 1fr; }
  .condition-row button { grid-column: span 2; justify-self: start; }
}

.preview-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.preview-list li {
  list-style: none; display: flex; gap: 12px; align-items: baseline;
  padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: .86rem;
}
.preview-list li:last-child { border-bottom: none; }
.preview-list .t { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----------------------------------------------------------- appointments */

.booking-row { cursor: pointer; }
.booking-row td .who { font-weight: 600; }
.booking-row td .sub { font-size: .8rem; color: var(--ink-soft); }

.agenda-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.agenda-item:first-child { border-top: none; }
.agenda-item .when {
  min-width: 148px; font-size: .85rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.agenda-item .when strong { display: block; color: var(--ink); font-size: .92rem; }
.agenda-item .what { flex: 1; }
.agenda-item .what .name { font-weight: 600; }
.agenda-item .what .sub { font-size: .84rem; color: var(--ink-soft); }

.kv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 24px; }
.kv-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.kv-line span { color: var(--ink-soft); }

/* =========================================================================
   The public booking pages
   ========================================================================= */

body.site { background: var(--bg); }

.site-head { background: var(--brand); color: #fff; padding: 16px 20px; }
.site-head-inner {
  max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.site-head .crest {
  height: 46px; width: 46px; flex: 0 0 auto; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 5px;
}
.site-head h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.site-head p { margin: 2px 0 0; font-size: .82rem; opacity: .85; }
.site-head .spacer { flex: 1; }
.site-head .lang { display: flex; gap: 5px; }
.site-head .lang button {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32);
  color: #fff; font-size: .78rem; padding: 5px 11px;
}
.site-head .lang button.on { background: #fff; color: var(--brand); border-color: #fff; font-weight: 600; }

.site-main { max-width: 900px; margin: 0 auto; padding: 26px 18px 70px; }
.site-foot {
  max-width: 900px; margin: 0 auto; padding: 0 18px 40px;
  font-size: .8rem; color: var(--ink-soft); text-align: center;
}

.steps { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.steps .s {
  display: flex; align-items: center; gap: 7px; font-size: .82rem;
  color: var(--ink-soft); padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
}
.steps .s .n {
  width: 20px; height: 20px; border-radius: 50%; background: var(--line);
  color: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.steps .s.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.steps .s.on .n { background: var(--brand); }
.steps .s.done .n { background: var(--ok); }

.person-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.person-card {
  display: block; text-decoration: none; color: inherit; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); cursor: pointer; width: 100%; font: inherit;
}
.person-card:hover { border-color: var(--brand); }
.person-card .name { font-weight: 600; font-size: 1rem; }
.person-card .role { font-size: .85rem; color: var(--brand); margin-top: 1px; }
.person-card .bio { font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.person-card .count { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; }
.person-card.closed { opacity: .65; }

.type-list { display: grid; gap: 10px; }
.type-card {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; font: inherit;
  background: var(--surface); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius); padding: 16px 18px; cursor: pointer;
}
.type-card:hover { border-color: var(--brand); border-left-color: var(--brand); }
.type-card .body { flex: 1; }
.type-card .name { font-weight: 600; }
.type-card .meta { font-size: .84rem; color: var(--ink-soft); margin-top: 4px; }
.type-card .desc { font-size: .87rem; color: var(--ink-soft); margin-top: 8px; }

.summary-box {
  background: var(--brand-soft); border: 1px solid #cfe0ec; border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 18px;
}
.summary-box .line { display: flex; gap: 10px; font-size: .92rem; padding: 3px 0; }
.summary-box .line b { min-width: 92px; color: var(--brand); font-weight: 600; }

.big-ok {
  text-align: center; padding: 10px 0 4px;
}
.big-ok .tick {
  width: 56px; height: 56px; border-radius: 50%; background: #e2f0e7; color: var(--ok);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
  font-size: 1.7rem; font-weight: 700;
}
.big-ok h2 { margin-bottom: 8px; }
.reference-badge {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; letter-spacing: .08em; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 18px; margin: 10px 0 4px;
}

@media (max-width: 560px) {
  .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .agenda-item { flex-direction: column; gap: 4px; }
  .agenda-item .when { min-width: 0; }
  .summary-box .line { flex-direction: column; gap: 0; }
}
/* ---------- student block ---------- */

.student-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; background: #fbfdfe; }
.student-block > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.student-block > header .name { font-weight: 600; }
.student-block > header .spacer { flex: 1; }
.sac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.sac-tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.sac-tile .t { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
.sac-tile .d { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.sac-tile button { margin-top: 8px; }
/* ------------------------------------------------- portal, files, queue */

body.portal { background: var(--bg); }
.portal-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }
.portal-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.portal-head h1 { font-size: 1.4rem; margin: 0 0 4px; }
.portal-head .lang { display: flex; gap: 6px; margin-left: auto; }
.portal-head .lang button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.student-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.student-head h4 { margin: 0; font-size: .95rem; }
.fee-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 16px; background: var(--brand-soft); border-radius: var(--radius); margin-bottom: 10px;
}
.fee-total strong { font-size: 1.4rem; color: var(--brand); }
/* The honeypot: off-screen for robots, invisible and unreachable for people. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.filelist { list-style: none; margin: 10px 0 0; padding: 0; }
.filelist li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem;
}
.attachments { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; }
.att-add { display: flex; align-items: center; gap: 8px; }
.att-add select { width: auto; font-size: .82rem; padding: 4px 8px; }
.file-pick { cursor: pointer; }
.badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 600; text-align: center;
}
.kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 24px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.kv span { color: var(--ink-soft); }
.copybox { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.copybox code { font-size: .88rem; }
.radios.col { flex-direction: column; align-items: flex-start; gap: 8px; }
.alert.info { background: var(--brand-soft); color: var(--brand); border: 1px solid #cfe0ec; }
/* ------------------------------------------------ classes and the gradebook */

.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.class-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.class-card:hover { border-color: var(--brand); }
.class-card.closed { opacity: .6; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--ink-soft); margin: 8px 0; }
.cc-foot { display: flex; gap: 18px; font-size: .84rem; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--line); }
.picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 16px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
}
.pick { display: flex; align-items: center; gap: 8px; font-size: .89rem; font-weight: 400; color: var(--ink); cursor: pointer; }
.pick input { flex: 0 0 auto; }
/* Attendance: big, obvious targets, because this gets used on a phone in a
   classroom doorway. */
.mark { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; cursor: pointer; }
.mark span {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft); background: #fff;
}
.mark input { position: absolute; opacity: 0; width: 0; height: 0; }
.mark input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.mark.present input:checked + span { background: #e2f0e7; border-color: #a9cdb8; color: var(--ok); font-weight: 600; }
.mark.absent  input:checked + span { background: #fdf1f1; border-color: #e0b6b6; color: var(--danger); font-weight: 600; }
.mark.excused input:checked + span { background: var(--warn-soft); border-color: #ecd9a8; color: var(--warn); font-weight: 600; }
.gradebook table { font-size: .86rem; }
.gradebook th.rot { min-width: 118px; vertical-align: bottom; }
.gradebook th.rot span { display: block; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.gradebook td.na { color: #b6c2ce; text-align: center; }
.gradebook .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 170px; }
.gradebook thead .sticky { background: var(--tint); }
.mark-select { width: auto; min-width: 104px; font-size: .84rem; padding: 5px 8px; }
.mark-select.pass { background: #e2f0e7; border-color: #a9cdb8; color: var(--ok); }
.mark-select.fail { background: #fdf1f1; border-color: #e0b6b6; color: var(--danger); }
.mark-select.missing { background: var(--warn-soft); border-color: #ecd9a8; color: var(--warn); }
.mark { display: flex; margin: 0 0 6px; }
.mark span { width: 100%; text-align: center; }
/* ------------------------------------------------------- message editor */

.editor { border: 1px solid #c3cedb; border-radius: 6px; background: #fff; overflow: hidden; }
.editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30, 78, 140, .12); }
.editor-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 5px 6px; background: var(--tint); border-bottom: 1px solid var(--line);
}
.editor-btn {
  min-width: 30px; height: 28px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: var(--ink); font-size: .86rem; line-height: 1; cursor: pointer;
}
.editor-btn:hover { background: #fff; border-color: #c3cedb; }
.editor-btn:active { background: var(--brand); color: #fff; border-color: var(--brand); }
.editor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.editor-body {
  min-height: 220px; max-height: 460px; overflow-y: auto;
  padding: 12px 14px; font-size: .95rem; line-height: 1.55; outline: none;
}
.editor-body.is-empty::before {
  content: attr(data-placeholder); color: var(--ink-soft); pointer-events: none;
}
.editor-body > *:first-child { margin-top: 0; }
.editor-body > *:last-child { margin-bottom: 0; }
.editor-body h2 { font-size: 1.15rem; margin: .8em 0 .4em; }
.editor-body h3 { font-size: 1rem; margin: .8em 0 .4em; }
.editor-body ul, .editor-body ol { margin: .5em 0; padding-left: 1.5em; }
.editor-body blockquote {
  margin: .6em 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line); color: var(--ink-soft);
}
.editor-body a { color: var(--brand); }
/* ------------------------------------------------ a term of dates at once */

.bulk-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.bulk-date {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 6px; font-size: .9rem; cursor: pointer;
}
.bulk-date:hover { background: var(--tint); }
.bulk-date input { width: 17px; height: 17px; flex: 0 0 auto; }
.bulk-date.is-taken { color: var(--ink-soft); cursor: default; }
.bulk-date.is-taken:hover { background: transparent; }
.bulk-date em { font-size: .78rem; font-style: normal; margin-left: auto; }
/* =========================================================================
   The parish system: what the merged application added

   Two navigation rows, the census screens, the counting screen, and the
   review queue. Everything here follows the palette and the spacing that
   were already in use — a system that reads as one thing matters more when
   somebody moves between five parts of it in a morning.
   ========================================================================= */

/* ---------------------------------------------------------- navigation */

/* There used to be a second row here listing the modules. It said exactly what
   the switcher under the parish name says, so it was two ways to do one thing
   and a band of colour across every page for no reason. The switcher is now
   the only way between modules, at every screen size. */

.masthead-inner { max-width: 1400px; }
.tabs .inner { max-width: 1400px; }

/* ------------------------------------------------------- the app switcher */

.brand-wrap { position: relative; }
.masthead .brand {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.masthead .brand .chev { opacity: .7; flex: 0 0 auto; transition: transform .15s; }
.masthead .brand[aria-expanded="true"] .chev { transform: rotate(180deg); }

.switcher {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 250px; padding: 6px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(4, 45, 70, .22);
}
.switcher-head {
  margin: 0; padding: 8px 12px 6px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
}
.switcher a, .switcher-out {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border-radius: 6px; text-decoration: none;
  color: var(--ink); font-size: .95rem; font-weight: 600;
  background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.switcher a span:first-child { flex: 1; }
.switcher a:hover, .switcher-out:hover { background: var(--tint); }
.switcher a.on { color: var(--brand); background: var(--tint); }
.switcher a:focus-visible, .switcher-out:focus-visible {
  outline: 2px solid var(--brand); outline-offset: -2px;
}
.switcher .badge { background: var(--brand); color: #fff; }
.switcher-rule { height: 1px; background: var(--line); margin: 6px 4px; }
.switcher-out { color: var(--ink-soft); font-weight: 500; }

/* ------------------------------------------------------ the header on a phone */
/* None of this existed, and the masthead is a flex row of things that do not
   shrink, so on a narrow screen it ran off the side. What stays on a phone is
   the parish name -- which is also the way between modules -- and who you are. */

@media (max-width: 860px) {
  .masthead { padding: 10px 14px; }
  /* One row, not two: the name would otherwise wrap under the title and leave
     a band of empty colour above the page. */
  .masthead-inner { gap: 8px; flex-wrap: nowrap; }
  .masthead .brand { gap: 10px; min-width: 0; }
  .masthead .sub { display: none; }
  .masthead .who {
    min-width: 0; max-width: 42vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .quick-search, .masthead select, .masthead button.link { display: none; }
  .masthead .who { padding: 6px 8px; }
  .masthead .who-role { display: none; }

  /* The page's own tabs stay, but they scroll sideways instead of overflowing. */
  nav.tabs .inner {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0 14px;
  }
  nav.tabs .inner::-webkit-scrollbar { display: none; }
  nav.tabs a { white-space: nowrap; }

  .switcher { min-width: min(84vw, 320px); }
}

/* ------------------------------------------------------- search in the bar */

.quick-search { position: relative; margin-right: 12px; }
.quick-search input {
  width: 240px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12);
  color: #fff; font-size: .9rem;
}
.quick-search input::placeholder { color: rgba(255,255,255,.6); }
.quick-search input:focus { outline: none; background: #fff; color: var(--ink); border-color: #fff; }
.quick-results {
  position: absolute; top: 110%; right: 0; width: 380px; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); z-index: 60; padding: 6px;
}
.qr { display: grid; grid-template-columns: 84px 1fr; gap: 4px 10px; padding: 8px 10px;
  border-radius: 8px; text-decoration: none; color: var(--ink); align-items: baseline; }
.qr:hover { background: var(--bg); }
.qr-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.qr-name { font-weight: 600; }
.qr-note { grid-column: 2; font-size: .8rem; color: var(--ink-soft); }
.qr.empty { color: var(--ink-soft); grid-template-columns: 1fr; }

/* -------------------------------------------------------------- page head */

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h2 { margin: 0; }
.page-head .muted { margin: 2px 0 0; }
.page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* ----------------------------------------------------------- the stat row */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-l { font-size: .82rem; color: var(--ink-soft); margin-top: 4px; }
.stat-note { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }
.stat.warn { border-color: #e0b96a; background: #fffaf0; }
.stat.good { border-color: #9fc8a6; background: #f6fbf7; }

/* ------------------------------------------------------------- the tables */

.grid-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.grid-table th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--line);
}
.grid-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid-table tbody tr:last-child td { border-bottom: none; }
.grid-table.linked tbody tr:hover { background: var(--bg); }
.grid-table td.num, .grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table td.center { text-align: center; }
.grid-table tr.muted td { opacity: .6; }
.grid-table td.owing, .owing { color: #a4462c; font-weight: 600; }
.warn-text { color: #a4462c; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters input[type="search"] { min-width: 240px; }
.filters input, .filters select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  /* Form controls are 100% wide everywhere else, which is right in a form and
     quite wrong in a filter bar: in a wrapping flex row each one claims a
     line of its own and four filters become four rows. */
  width: auto;
}
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }

/* ----------------------------------------------------------- the columns */

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cols.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .cols, .cols.three { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: 42% 1fr; gap: 6px 14px; margin: 0; font-size: .92rem; }
.facts dt { color: var(--ink-soft); font-size: .82rem; }
.facts dd { margin: 0; }
.facts dt.warn-dt { color: #a4462c; font-weight: 600; }
.facts dd.warn-dd { color: #a4462c; }

.note-box {
  margin-top: 14px; padding: 10px 12px; background: #fbfaf5; border: 1px solid #ece4cf;
  border-radius: 8px; font-size: .88rem; white-space: pre-wrap;
}
.task-list { list-style: none; margin: 8px 0 0; padding: 0; }
.task-list li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.task-list li:last-child { border-bottom: none; }
.count { font-size: .8rem; color: var(--ink-soft); font-weight: 400; }
.tiny { font-size: .78rem; }
.empty-state { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 40px 20px; text-align: center; color: var(--ink-soft); }

/* --------------------------------------------------------- a child's card */

.child-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.child-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.child-body { display: flex; gap: 14px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-soft); margin-top: 6px; }
.child-sacs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sac-chip {
  font-size: .72rem; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); background: #fff;
}
.sac-chip.done { border-color: #9fc8a6; background: #f0f7f1; color: #2f6b3c; }
.child-match { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-size: .86rem; }
.child-match select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* --------------------------------------------------- choosing a household */

.match-list { display: flex; flex-direction: column; gap: 8px; }
.match {
  display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; background: #fff;
}
.match:hover { border-color: var(--brand); }
.match.on { border-color: var(--brand); background: #f2f8fb; box-shadow: inset 0 0 0 1px var(--brand); }
.match div { display: flex; flex-direction: column; gap: 2px; }
.match .why { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }

/* ------------------------------------------------------- counting the bag */

.entry-card { background: #fbfdfe; }
.entry-row { align-items: end; }
.entry-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-start; }
.donor-box {
  padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px;
  min-height: 38px; display: flex; align-items: center; font-size: .92rem;
}
.donor-box.found { border-style: solid; border-color: #9fc8a6; background: #f6fbf7; font-weight: 600; }
.donor-box.unknown { border-color: #e0b96a; background: #fffaf0; }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 90px; gap: 10px; align-items: center; font-size: .85rem; }
.bar-label { color: var(--ink-soft); }
.bar { display: block; height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ setup tabs */

.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
  border-bottom: 1px solid var(--line); }
.subtab {
  background: none; border: none; border-bottom: 3px solid transparent; padding: 9px 14px;
  font-size: .92rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.subtab:hover { color: var(--ink); }
.subtab.on { color: var(--brand); border-bottom-color: var(--brand); }

.perm-table td:first-child { width: 46%; }
.perm-table input { transform: scale(1.15); }
.word-table input { width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; font-size: .85rem; }
.word-table input.overridden { border-color: var(--brand); background: #f6fbfd; }
.word-table td:first-child { width: 24%; }

.pill.deceased, .pill.moved, .pill.inactive { background: #eceff1; color: #52616b; }

.page-sub { margin: -10px 0 18px; font-size: .95rem; }

/* --------------------------------------------------------- the giving page */

.give-fund-single { font-size: 1.05rem; font-weight: 600; margin: 0 0 2px; }

.freq-row, .amount-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.amount-row button { min-width: 82px; }
.freq-row button, .amount-row button {
  flex: 0 0 auto; padding: 10px 18px; font: inherit; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.freq-row button:hover, .amount-row button:hover { border-color: var(--brand); }
/* The chosen one has to be obvious at a glance — this is the step people get
   wrong, and a gift given monthly by mistake is a phone call to the office. */
.freq-row button.on, .amount-row button.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.custom-amount { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.custom-amount span { font-size: 1.1rem; color: var(--ink-soft); }
.custom-amount input { flex: 1; padding: 11px 12px; font-size: 1.05rem; }

.give-total { font-size: 1.05rem; margin: 0 0 12px; }
.give-total strong { font-size: 1.25rem; }

.cover-fee {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin: 0 0 20px;
  background: var(--tint); border: 1px solid var(--line); border-radius: 8px;
  font-size: .92rem; cursor: pointer;
}
.cover-fee input { margin: 2px 0 0; flex: 0 0 auto; width: auto; }

.give-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 18px; }
.give-who .f { grid-column: auto; }
@media (max-width: 560px) { .give-who { grid-template-columns: 1fr; } }

button.wide { width: 100%; padding: 14px; font-size: 1rem; }
.secure-note { font-size: .84rem; margin-top: 12px; }
.err-note {
  background: #fdf1f1; color: #9b2226; border: 1px solid #e8c4c4;
  border-radius: 6px; padding: 10px 12px; font-size: .9rem; margin: 0 0 14px;
}
.ok-note {
  background: #eaf4ee; color: #2f6b47; border: 1px solid #bfdcc9;
  border-radius: 6px; padding: 10px 12px; font-size: .9rem;
}
.reference strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }

dl.summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 16px 0 20px; }
dl.summary dt { color: var(--ink-soft); font-size: .88rem; }
dl.summary dd { margin: 0; font-weight: 600; }

.small.block { display: block; }
/* .pill and .pill.warn are defined with the tables, above. Only the one state
   missing there is added — redefining .pill would leave its earlier background
   standing under a new colour, which is how the invisible sub-tab happened. */
.pill.good { background: #e2f0e7; color: var(--ok); }

/* -------------------------------------------------------- Mass intentions

   Only states .pill does not already carry, for the same reason as above:
   redefining .pill itself would leave the earlier background standing under
   a new colour. */
.pill.locked { background: #f3ece4; color: #7a5230; }
.pill.full   { background: #eef2f6; color: var(--ink-soft); }

/* An empty row in the diary is still worth clicking, but it is not news.
   Only the state button.link does not already carry. */
button.link.quiet { color: var(--ink-soft); text-decoration: none; }
button.link.quiet:hover { text-decoration: underline; }

/* Choosing a Mass from a long list, in a modal. A row wide enough to hit
   with a thumb, which is where most of these get booked. */
.row-button {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 8px;
  font-size: .93rem; color: var(--ink); cursor: pointer; border-radius: 0;
}
.row-button:hover { background: var(--brand-soft); }
.row-button:last-child { border-bottom: none; }
.row-button .muted { float: right; font-size: .85rem; }

/* The week as the bulletin prints it. */
.bulletin-day { margin-bottom: 16px; }
.bulletin-day h3 { margin: 0 0 6px; font-size: .95rem; }
.bulletin-day:last-child { margin-bottom: 0; }
.bulletin-mass { display: flex; gap: 12px; padding: 4px 0; font-size: .92rem; }
.bulletin-time { flex: 0 0 4.5em; font-variant-numeric: tabular-nums; font-weight: 600; }
.bulletin-what { flex: 1; }

@media print {
  .page-head .page-actions, .filters { display: none !important; }
  .print-area { box-shadow: none; border: 0; padding: 0; }
}

@media (max-width: 640px) {
  .bulletin-mass { flex-direction: column; gap: 0; }
  .bulletin-time { flex: none; }
}