/* ===== 6th Ward — app styles ===== */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #1f2733;
  --ink-soft: #5b6675;
  --line: #e3e7ec;
  --brand: #1f4e79;
  --brand-soft: #eaf1f8;
  --accent: #b98a2f;
  --danger: #b3402f;
  --ok: #2e7d4f;
  --warn: #a8720d;
  --violet: #5b4b9e;
  --violet-soft: #ece7f7;
  --pending: #9a7b1f;
  --pending-soft: #fbf1d6;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20,30,45,.08), 0 4px 16px rgba(20,30,45,.06);
  font-size: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.hidden { display: none !important; }

/* ===== Login / pending ===== */
.screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1f4e79 0%, #163a5c 60%, #102c47 100%);
  padding: 1rem;
}
.login-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 2.5rem 2.75rem;
  text-align: center;
  max-width: 24rem;
  width: 100%;
}
.login-logo { font-size: 3rem; }
.login-card h1 { margin: .5rem 0 .25rem; font-size: 1.6rem; }
.login-sub { color: var(--ink-soft); margin: 0 0 1.5rem; line-height: 1.45; }
.login-error { color: var(--danger); margin-top: 1rem; font-size: .9rem; }

/* ===== Top bar ===== */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem;
  position: sticky; top: 0; z-index: 40;
  flex-wrap: wrap;
}
.topbar-title { font-weight: 700; font-size: 1.05rem; color: var(--brand); padding: .7rem 0; white-space: nowrap; }
.tabs { display: flex; gap: .15rem; flex: 1; overflow-x: auto; }
.tab {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--ink-soft);
  padding: .85rem .8rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab-confidential.active { color: var(--accent); border-bottom-color: var(--accent); }
.topbar-user { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-soft); }
.user-photo { width: 28px; height: 28px; border-radius: 50%; }

/* ===== Panels ===== */
main { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 1rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 1.25rem; }
.panel-sub { color: var(--ink-soft); font-size: .88rem; margin: .2rem 0 0; }

/* ===== Buttons ===== */
.btn {
  font: inherit; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 8px;
  padding: .5rem .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn:hover { background: #f0f3f6; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: #17415f; }
.btn-danger { color: var(--danger); }
.btn-ghost { border: none; background: none; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); background: #eef1f4; }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-lg { padding: .7rem 1.2rem; font-size: 1rem; justify-content: center; width: 100%; }

/* ===== Cards / lists ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
}
.card h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.list-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .35rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: #f8fafb; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-size: .95rem; }
.row-title.done-title { text-decoration: line-through; color: var(--ink-soft); font-weight: 400; }
.row-sub { color: var(--ink-soft); font-size: .82rem; margin-top: .1rem; }
.empty-note { color: var(--ink-soft); text-align: center; padding: 1.5rem; font-size: .92rem; }

/* ===== Pills / badges ===== */
.pill {
  font-size: .72rem; font-weight: 600;
  padding: .18rem .55rem; border-radius: 99px;
  white-space: nowrap;
}
.pill-open { background: #e8eef5; color: var(--brand); }
.pill-inprogress { background: #fdf3dd; color: var(--warn); }
.pill-fast { background: var(--violet-soft); color: var(--violet); }
.pill-done { background: #e3f2e8; color: var(--ok); }
.pill-overdue { background: #fbe7e3; color: var(--danger); }
.pill-role-bishop { background: #f6ecd7; color: #7a5a14; }
.pill-role-bishopric { background: #e8eef5; color: var(--brand); }
.pill-role-member { background: #e9ecef; color: var(--ink-soft); }
.pill-role-pending { background: #fbe7e3; color: var(--danger); }
.pill-considering { background: #e9ecef; color: var(--ink-soft); }
.pill-approved { background: #e8eef5; color: var(--brand); }
.pill-extended { background: #fdf3dd; color: var(--warn); }
.pill-accepted { background: #e3f2e8; color: var(--ok); }
.pill-sustained { background: #e3f2e8; color: var(--ok); }
.pill-setapart { background: #f6ecd7; color: #7a5a14; }
.pill-declined { background: #fbe7e3; color: var(--danger); }

/* ===== Forms / modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,25,40,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(10,20,35,.3);
  width: 100%; max-width: 34rem;
  padding: 1.4rem 1.5rem;
}
.modal h3 { margin: 0 0 1rem; }
.form-grid { display: grid; gap: .8rem; }
.form-grid.two-col { grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
label.field { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
label.field input, label.field select, label.field textarea {
  display: block; width: 100%; margin-top: .3rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .6rem; background: #fff;
}
label.field textarea { resize: vertical; min-height: 4.2rem; }
label.field input:focus, label.field select:focus, label.field textarea:focus {
  outline: 2px solid var(--brand-soft); border-color: var(--brand);
}
.modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; }
.modal-actions .right { display: flex; gap: .5rem; margin-left: auto; }

/* ===== Filter chips ===== */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  font: inherit; font-size: .82rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 99px; padding: .28rem .8rem; color: var(--ink-soft);
}
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ===== Calendar ===== */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal-head h3 { margin: 0; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--line); gap: 1px;
}
.cal-dow { background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 700; text-align: center; padding: .4rem 0; }
.cal-cell { background: var(--surface); min-height: 5.2rem; padding: .3rem .35rem; cursor: pointer; position: relative; }
.cal-cell:hover { background: #f6f9fc; }
.cal-cell.other-month { background: #fafbfc; color: #b3bcc7; }
.cal-cell.today .cal-daynum { background: var(--brand); color: #fff; }
.cal-daynum {
  font-size: .78rem; font-weight: 600;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-event {
  font-size: .7rem; line-height: 1.25;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 4px; padding: .1rem .3rem; margin-top: .15rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal-event.ev-sunday { background: #f6ecd7; color: #7a5a14; }

/* ===== Sacrament planner ===== */
.mtg-grid { display: grid; gap: .8rem; }
.mtg-sec { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .9rem; }
.mtg-sec-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: .5rem; }
.speaker-row { display: flex; gap: .5rem; margin-bottom: .5rem; align-items: center; }
.speaker-row input { flex: 1; font: inherit; font-size: .92rem; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem; }
.agenda-view { line-height: 1.65; font-size: .93rem; }
.agenda-view .ag-label { color: var(--ink-soft); display: inline-block; min-width: 10.5rem; flex: none; }
.agenda-view .ag-row { display: flex; gap: .5rem; align-items: baseline; }
.agenda-view .ag-val { flex: 1; min-width: 0; }
.agenda-view .ag-time { color: var(--ink-soft); font-size: .82rem; white-space: nowrap; margin-left: auto; }
/* the sacrament administration row stands apart: bold, centered.
   The blue boxes bleed outward (negative margins matching their padding)
   so their clock/min columns line up exactly with the plain rows. */
.agenda-view .ag-sacrament { margin: .25rem -.4rem; padding: .2rem .4rem; background: var(--brand-soft); border-radius: 6px; }
/* sacrament hymn joins the band above it as one grouped blue block */
.agenda-view .ag-sac-hymn { background: var(--brand-soft); border-radius: 6px; margin: .25rem -.4rem 0; padding: .2rem .4rem; }
.agenda-view .ag-sac-hymn:has(+ .ag-sacrament) { border-radius: 6px 6px 0 0; padding-bottom: .1rem; }
.agenda-view .ag-sac-hymn + .ag-sacrament { border-radius: 0 0 6px 6px; margin-top: 0; }
/* label centers on the full row width — the time columns overlay at the right */
.agenda-view .ag-sacrament { position: relative; justify-content: flex-end; align-items: center; }
.agenda-view .ag-sac-label {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center; font-weight: 700; color: var(--brand);
  pointer-events: none;
}
/* bearing of testimonies: its own extra-tall violet band */
.agenda-view .ag-testimonies { background: var(--violet-soft); padding-top: 1.1rem; padding-bottom: 1.1rem; }
.agenda-view .ag-testimonies .ag-sac-label { color: var(--violet); }
.agenda-view .ag-sacrament .ag-time { margin-left: 0; padding-right: .4rem; }
.agenda-view .ag-sac-who { font-weight: 500; color: var(--ink-soft); }
/* wall-clock chip before the minutes; minutes are click-to-edit for bishopric */
.agenda-view .ag-clock { margin-left: auto; color: var(--ink-soft); font-size: .8rem; white-space: nowrap; min-width: 3.2rem; text-align: right; }
.agenda-view .ag-clock + .ag-time { margin-left: .6rem; min-width: 3.4rem; text-align: right; }
.agenda-view .ag-tclick { cursor: pointer; }
.agenda-view .ag-tclick:hover { text-decoration: underline; color: var(--ink); }
.agenda-view .ag-total { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .3rem; font-weight: 700; }
/* divider grouping the people rows (conducting / music / organist) above the agenda */
.agenda-view .ag-head-break { border-bottom: 1px solid var(--line); margin: .4rem 0 .45rem; }

/* print/PDF export of the View agenda: only #print-agenda renders on paper */
#print-agenda { display: none; }
@media print {
  body.printing > *:not(#print-agenda) { display: none !important; }
  #print-agenda {
    display: block;
    padding: 1.5rem;
    font-size: 1rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-agenda .agenda-view .ag-row { break-inside: avoid; }
}

/* announcements / ward business content sits in a soft grey box with bullets */
.agenda-view .ag-detail-box {
  display: inline-block; vertical-align: top;
  background: #edf0f3;
  border-radius: 8px;
  padding: .35rem .65rem;
  margin: .12rem 0 .25rem;
  font-size: .84rem;
  line-height: 1.55;
}
/* full-width variant: sits on its own line under the row so text doesn't wrap early */
.agenda-view .ag-detail-full { display: block; width: 100%; margin: .1rem 0 .4rem; }

/* ===== Sacrament: cards, status chips, table ===== */
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: #c9d4e0; }
.conf-card { background: #eceef1; color: var(--ink-soft); box-shadow: none; }
.conf-card h3 { color: var(--ink-soft); }
.pill-conf { background: #dde1e6; color: var(--ink-soft); }
.theme-tag {
  font-size: .88rem; font-weight: 600; font-style: italic;
  color: var(--violet);
  vertical-align: middle;
}

.pill-baby { background: #fde7f0; color: #b0407a; }
/* matches the 5th-Sunday pill height so the subtitle row stays one clean line */
.pill-baby-bold {
  display: inline-block;
  background: #f7dbe6; color: #a34a6e; /* soft baby pink, calmer than before */
  font-weight: 600; font-size: .72rem;
  padding: .1rem .55rem; border-radius: 99px;
  line-height: 1.3;
  vertical-align: middle;
}
.megaphone-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; flex: none;
  border: none; border-radius: 6px; padding: 0;
  background: #e9ecef; color: #aab1ba;
  cursor: pointer;
  vertical-align: middle; /* icons sit inline on the date headline */
}
.megaphone-btn:hover { background: #dfe3e7; }
/* pills that ride the date headline (5th Sunday, Blessing) match the icon-button height */
.head-pill {
  display: inline-flex; align-items: center;
  height: 1.6rem;
  vertical-align: middle;
  line-height: 1;
}
.megaphone-btn.has-announce { background: #cddff1; color: var(--brand); }
.megaphone-btn.has-announce:hover { background: #bed5ec; }
.megaphone-btn.has-announce svg { stroke-width: 2.5; }
.megaphone-btn.has-wb { background: #e3f2e8; color: var(--ok); }
.megaphone-btn.has-wb:hover { background: #d5ecdd; }
.pill-choir-bold {
  display: inline-block;
  background: #4c3fa8; color: #fff;
  font-weight: 700; font-size: .72rem;
  padding: .1rem .55rem; border-radius: 99px;
  line-height: 1.3;
  vertical-align: middle;
}

/* pills share one row at full width; labels may wrap to two lines.
   Each pill is a column: header line, name, then (for prayers) the org
   badge pinned to the bottom so it sits in a uniform spot across pills. */
/* fixed 9-column grid: pills stay a uniform size and line up vertically
   across cards, even when a Sunday (e.g. Fast) has fewer of them */
/* columns: Prayers · Hymns · Music Number · Youth Speakers · Speakers —
   Hymns gets extra width (long titles), Music Number needs the least */
.st-row { display: grid; grid-template-columns: 1fr 1.45fr .7fr .925fr .925fr; gap: .3rem; margin-top: .55rem; }
.st {
  font-size: .74rem; font-weight: 600;
  padding: 0 .3rem .3rem; border-radius: 6px;
  white-space: normal;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden; /* keeps the header band inside the rounded corners */
}
@media (max-width: 900px) {
  .st-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.st-ok { background: #e3f2e8; color: var(--ok); }
.st-pending { background: var(--pending-soft); color: var(--pending); }
.st-miss { background: #fbe7e3; color: var(--danger); }
.st-off { background: #edf0f3; color: var(--ink-soft); }
.st-click { cursor: pointer; }
.st-click:hover { filter: brightness(.95); text-decoration: underline; }
/* pending outline circle: click to confirm without opening the editor —
   kept faint so it doesn't compete with the names; wakes up on hover */
.st-confirm-dot { cursor: pointer; font-weight: 400; }
.st-confirm-dot:hover { opacity: 1 !important; transform: scale(1.2); display: inline-block; }
/* icon + name carry the state color (red/amber/green); the label itself
   stays a neutral dark so "Conducting" doesn't visually fight the name */
.st-icon { color: inherit; opacity: .25; font-weight: 400; font-size: .85em; }
/* title row reads as a header band: full-width darker strip across the pill top */
.st-head {
  color: var(--ink); font-weight: 700; font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  align-self: stretch;
  margin: 0 -.3rem .2rem;
  padding: .2rem .35rem;
  background: rgba(31, 39, 51, .07);
  border-bottom: 1px solid rgba(31, 39, 51, .05);
  text-align: center;
}
.st-off .st-head { color: var(--ink-soft); }
.st-name {
  display: block;
  font-weight: 700; font-size: .8rem;
  color: inherit; /* matches the pill's state color: green when confirmed, amber when pending */
  margin-top: .1rem;
  white-space: normal;
}
.st-org {
  display: inline-block;
  margin-top: auto;      /* pin to the bottom of the pill */
  padding: .1rem .55rem;
  border-radius: 99px;
  font-weight: 600; font-size: .66rem;
  white-space: normal;
  color: #fff; /* solid badges stay readable on any pill background */
}
/* hymn approvals manager */
.ha-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .28rem .1rem;
  border-bottom: 1px solid var(--line);
  font-size: .87rem;
}
.ha-row:last-child { border-bottom: none; }
.ha-name { flex: 1; min-width: 0; }
.ha-blocked .ha-name { opacity: .45; text-decoration: line-through; }
.ha-row .chip { font-size: .74rem; padding: .18rem .6rem; }

/* Conducting as a quiet subtitle under the date — no bold, no pill */
.cond-inline {
  display: inline-block;
  font-size: .82rem; font-weight: 400;
  color: var(--ink-soft);
  vertical-align: middle;
  white-space: nowrap;
}
.cond-inline.cond-empty { color: var(--ink-soft); }

/* drag-to-reorder in the group editors */
.spk-drag {
  cursor: grab;
  color: var(--ink-soft);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  font-size: .85rem;
  padding: 0 .1rem;
}
.spk-drag:active { cursor: grabbing; }
.spk-row.dragging { opacity: .45; }
.qe-prayer-head { cursor: grab; }
.qe-prayer-sect.drop-target {
  outline: 2px dashed #6b96c9;
  outline-offset: 2px;
  border-radius: 6px;
}

/* combined pills (Prayers / Youth / Speakers): one line per slot inside the pill */
.st-group { align-items: stretch; }
/* the Sunday date: larger than the headline pills, with breathing room after it */
.card-date {
  font-size: 1.28rem;
  margin-right: .25rem;
  vertical-align: middle;
}
/* even spacing between everything riding the date headline */
#sunday-list .card h3 .megaphone-btn,
#sunday-list .card h3 .head-pill,
#sunday-list .card h3 .theme-tag { margin-left: .35rem; }

/* inline hymn editing right in the pill line */
.st-line[data-hymned] .st-li-name { cursor: pointer; }
.st-line .st-in-num, .st-line .st-in-title {
  font: inherit; font-size: .72rem;
  border: 1px solid var(--line); border-radius: 4px;
  padding: .08rem .3rem;
  min-width: 0;
  background: #fff; color: var(--ink);
}
.st-line .st-in-num { width: 2.7rem; flex: none; }
.st-line .st-in-title { flex: 1; }

/* content below the header band centers vertically in the pill */
.st .st-head + * { margin-top: auto; }
.st > :last-child { margin-bottom: auto; }

/* Bishopric board: the calling flow reads left → right on desktop */
/* columns stretch together — the tallest sets the height for all four */
.bishopric-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: stretch; }
@media (max-width: 1100px) { .bishopric-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .bishopric-board { grid-template-columns: 1fr; } }
.bb-col { margin-top: .8rem; }
.bb-drop { min-height: 3.5rem; border-radius: 8px; }
.bb-drop .list-row { cursor: grab; flex-wrap: wrap; }
.bb-drop.bb-over { outline: 2px dashed var(--brand); outline-offset: 3px; background: var(--brand-soft); }

/* each calling is one large tinted capsule — title in the calling's color,
   candidate names grouped inside it */
.call-card {
  border-radius: 12px;
  border-bottom: none !important;
  padding: .6rem .75rem;
  margin-bottom: .7rem;
  align-items: center;
}
.call-card:hover { filter: brightness(.97); background-clip: padding-box; }
/* flow-column cards stack: title spans the pill, name under it, action bottom-right */
.call-card-v { display: block; }
.call-card-v .row-title { margin-top: .15rem; }
.call-card-actions { margin-top: .45rem; display: flex; justify-content: flex-end; }
.call-card-actions .btn { padding: .22rem .6rem; font-size: .78rem; }
/* candidate lines on fill cards: quiet ✕ to drop a name from consideration */
.cand-line { display: flex; align-items: center; gap: .35rem; }
.cand-x { cursor: pointer; color: var(--ink-soft); opacity: .55; font-size: .78rem; padding: 0 .15rem; }
.cand-x:hover { opacity: 1; color: var(--danger); }
.call-card-title { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.call-card-org { font-weight: 500; font-size: .78rem; opacity: .75; }
.call-card .row-sub { color: var(--ink); opacity: .8; }

/* callings: candidate star — grey until it's the settled-on name */
.cand-star { color: #c9cfd6; padding: .3rem .45rem; }
.cand-star.cand-decided { color: var(--accent); border-color: var(--accent); }

/* homebound rows: click the name to toggle "Not needed"; those rows wash
   out and sink to the bottom of the list */
.hb-row .hb-nm { font-weight: 600; cursor: pointer; }
.hb-row .hb-nm:hover { text-decoration: underline; }
.hb-row .hb-flag { display: none; font-weight: 500; font-style: italic; font-size: .78rem; color: var(--ink-soft); margin-left: .25rem; }
.hb-row.hb-off { opacity: .45; }
.hb-row.hb-off .hb-flag { display: inline; }
.hb-row input:not([type="checkbox"]), .hb-set-row input {
  font: inherit; font-size: .88rem;
  border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem .5rem; width: 100%;
}
.hb-set-tag { flex: 0 0 3.9rem; font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.hb-row .chips { flex: none; }
/* members nest under their group's brethren when split */
.hb-inset { margin-left: 1rem; border-left: 2px solid var(--line); padding-left: .6rem; }
.hb-group-members { margin-bottom: .5rem; }

/* a "none this week" line reads quiet — it isn't missing, it's decided */
.st-line .st-none { font-style: italic; font-weight: 500; opacity: .6; }
/* hymn lines: the tag is a fixed-width column so every title starts (and
   wraps) at the same x position */
.st-line-light { align-items: baseline; }
.st-line-light .st-li-tag { flex: 0 0 4.6rem; text-align: left; }
/* hymn titles: unbolded, tighter tracking, and allowed to wrap onto a
   second line before clipping — all in service of fitting long names */
.st-line .st-li-name.st-li-light {
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.2;
  white-space: normal;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* organist / conductor inline editing on the Hymns subhead */
.st-subhead[data-musiced] { cursor: pointer; }
.st-subhead.st-sh-editing {
  white-space: normal; overflow: visible;
  display: flex; flex-direction: column; gap: .15rem;
  align-self: stretch;
}
.st-music-row { display: flex; align-items: center; gap: .25rem; width: 100%; }
.st-music-row input {
  flex: 1; min-width: 0;
  font: inherit; font-size: .68rem;
  border: 1px solid var(--line); border-radius: 4px;
  padding: .08rem .3rem;
  background: #fff; color: var(--ink);
}

/* quick-add "+" under the last line of a group pill (Speakers): plain glyph,
   left-aligned with the line labels */
.st-add {
  align-self: flex-start;
  margin-top: .12rem;
  padding-left: 1.05rem;
  color: var(--ink-soft);
  font-weight: 700; font-size: .85rem; line-height: 1;
  cursor: pointer;
}
.st-add:hover { color: var(--ink); }

/* small centered note under a group-pill headline (e.g. Organ / Conduct on Hymns) */
.st-subhead {
  align-self: center;
  font-size: .64rem; font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.st-line {
  display: flex; align-items: baseline; gap: .25rem;
  width: 100%; min-width: 0;
  text-align: left;
  font-size: .74rem; font-weight: 600;
  margin-top: .12rem;
}
.st-line .st-li-ic { flex: 0 0 .8rem; text-align: center; opacity: .25; font-size: .85em; align-self: center; }
.st-line .st-li-tag { color: var(--ink); font-weight: 600; font-size: .68rem; white-space: nowrap; }
.st-off .st-li-tag { color: var(--ink-soft); }
.st-line .st-li-name {
  color: inherit; font-weight: 700;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-line .st-li-org {
  margin-left: auto;
  font-weight: 600; font-size: .62rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* speaker topic / musical piece under the name */
.st-sub {
  display: block;
  font-weight: 500; font-style: italic; font-size: .68rem;
  color: inherit; opacity: .8;
  white-space: normal;
}
/* one distinct solid color per organization — muted so they don't shout */
.org-relief-society { background: #cf6d96; }
.org-elders-quorum  { background: #6b96c9; }
.org-primary        { background: #dd9257; }
.org-young-men      { background: #74a67f; }
.org-young-women    { background: #a37fc0; }

/* Ward Business pill inside the table's Conducting cell */
.wb-pill {
  display: inline-block; margin-top: .35rem;
  font-size: .7rem; font-weight: 600;
  padding: .12rem .5rem; border-radius: 6px;
  background: #edf0f3; color: var(--ink-soft);
}
.wb-pill.wb-has { background: #e3f2e8; color: var(--ok); }
.wb-pill.ann-has { background: var(--brand-soft); color: var(--brand); }

/* Confirmed checkbox in quick-edit / editor modals */
.confirm-field { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.confirm-field span:first-child { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); }
.confirm-field input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.confirm-by { font-style: italic; }

/* table breaks out of the centered column to use the full window width */
.table-card {
  padding: .8rem;
  width: calc(100vw - 2rem);
  max-width: calc(100vw - 2rem);
  margin-left: calc(50% - (100vw - 2rem) / 2);
}
.table-scroll { overflow-x: auto; }
table.sheet { border-collapse: collapse; font-size: .82rem; min-width: 74rem; width: 100%; }
.cell-theme { font-style: italic; color: var(--violet); }
table.sheet th {
  background: var(--brand-soft); color: var(--brand);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .45rem .45rem; text-align: left;
  border: 1px solid var(--line); position: sticky; top: 0;
  min-width: 6.5rem;
}
table.sheet th:first-child { min-width: 3.5rem; }
/* Type/Theme: no wider than the dropdown itself needs */
table.sheet th:nth-child(2) { min-width: 5.6rem; }
table.sheet td.cell-type select { width: 100%; min-width: 0; max-width: 5.6rem; font-size: .78rem; }
table.sheet td.cell-type.has-type select { font-weight: 700; color: var(--violet); }
/* Conducting: compact select, names wrap under it rather than forcing the column wide */
table.sheet th:nth-child(3) { min-width: 6.2rem; }
table.sheet td.cell-conducting select { width: 100%; min-width: 0; font-size: .78rem; white-space: normal; }
table.sheet td {
  border: 1px solid var(--line);
  padding: .3rem .35rem; vertical-align: top;
  background: #fff;
}
table.sheet .row-past td { background: #f6f7f9; opacity: .75; }
table.sheet .row-unplanned td { background: #fcfdfe; }
table.sheet .row-conf td { background: #eceef1; color: var(--ink-soft); }
table.sheet .conf-cell { background: #eceef1; }
table.sheet .row-fast td { background: var(--violet-soft); }
table.sheet .row-fast.row-past td { background: #f1eef8; }
.nth-pill {
  font-size: .7rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 99px;
  background: #e9ecef; color: var(--ink-soft);
}
.nth-5 { background: #ede4f7; color: #6a3fa8; }
.spk-washed { color: #b9c2cc; font-style: italic; font-size: .78rem; line-height: 1.4; }
.hymn-cell { display: flex; gap: .2rem; }
.cell-num { min-width: 2.6rem !important; width: 2.6rem; flex: none; }
.cell-label {
  display: block; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-soft); margin-top: .25rem;
}
.cell-label:first-child { margin-top: 0; }
.cell-label .cell-in { margin-top: .05rem; }
.cell-date { cursor: pointer; white-space: nowrap; }
.cell-date:hover b { color: var(--brand); text-decoration: underline; }
.cell-spk.clickable:hover { background: #f2f6fa; }
.cell-in {
  width: 100%; min-width: 0; font: inherit; font-size: .82rem;
  border: 1px solid transparent; border-radius: 4px; padding: .2rem .25rem;
  background: transparent;
}
.cell-in:hover { border-color: var(--line); background: #fff; }
.cell-in:focus { outline: none; border-color: var(--brand); background: #fff; }
.cell-sel {
  width: 100%; font: inherit; font-size: .8rem;
  border: 1px solid transparent; border-radius: 4px; padding: .15rem;
  background: transparent;
}
.cell-sel:hover, .cell-sel:focus { border-color: var(--line); background: #fff; }

/* ===== Agenda item editor ===== */
.modal.modal-wide { max-width: 44rem; }
.item-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: .45rem .55rem;
  margin-bottom: .45rem;
}
.item-card.dragging { opacity: .45; }
.item-head { display: flex; align-items: center; gap: .4rem; }
.drag-handle {
  cursor: grab; color: var(--ink-soft);
  font-size: 1.1rem; padding: 0 .25rem; user-select: none;
}
.item-label { font-weight: 600; font-size: .88rem; flex: 1; }
.item-time { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.item-time input {
  width: 3.2rem; font: inherit; font-size: .85rem;
  border: 1px solid var(--line); border-radius: 6px; padding: .2rem .3rem;
  text-align: right;
}
.item-body { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.item-body input, .item-body select {
  font: inherit; font-size: .88rem;
  border: 1px solid var(--line); border-radius: 6px;
  padding: .35rem .45rem; min-width: 0;
}

/* ===== Table (admin) ===== */
table.simple { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.simple th { text-align: left; color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .5rem .4rem; border-bottom: 2px solid var(--line); }
table.simple td { padding: .55rem .4rem; border-bottom: 1px solid var(--line); }
table.simple select { font: inherit; font-size: .88rem; border: 1px solid var(--line); border-radius: 6px; padding: .25rem .4rem; }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: .6rem 1.1rem; border-radius: 8px;
  font-size: .9rem; z-index: 200;
  box-shadow: var(--shadow);
}

/* ===== Confidential banner ===== */
.conf-banner {
  background: #fbf6ea; border: 1px solid #ecd9ac; color: #7a5a14;
  border-radius: var(--radius);
  padding: .6rem .9rem; font-size: .85rem; margin-bottom: 1rem;
}

@media (max-width: 720px) {
  .topbar { padding: 0 .5rem; }
  .topbar-user span { display: none; }
  main { padding: .9rem .6rem 4rem; }
  .form-grid.two-col { grid-template-columns: 1fr; }
  .cal-cell { min-height: 3.6rem; }
  .agenda-view .ag-label { min-width: 8rem; }
}

/* ===== PIN sign-in + People permissions (2026-09-13) ===== */
.pin-label { display:block; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin:0 0 .4rem; }
.pin-row { display:flex; gap:.5rem; justify-content:center; }
.pin-input {
  width: 11rem; font: inherit; font-size: 1.7rem; letter-spacing: .45rem; text-align: center;
  padding: .55rem .6rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pin-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pin-input::placeholder { letter-spacing: .3rem; color: #c3cad3; }
.login-or { display:flex; align-items:center; gap:.7rem; color:var(--ink-soft); font-size:.8rem; margin:1.2rem 0 .8rem; }
.login-or::before, .login-or::after { content:""; flex:1; height:1px; background:var(--line); }
.card-title { margin:0 0 .3rem; font-size:1rem; }
.pill-ok { background:#e3f2e8; color:var(--ok); }
.pill-muted { background:#eef0f3; color:#9aa4b1; }
.pin-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1rem; letter-spacing:.15rem; background:var(--brand-soft); color:var(--brand); padding:.15rem .45rem; border-radius:6px; }
.pin-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1.25rem; letter-spacing:.3rem; width:9.5rem; text-align:center; padding:.45rem .5rem; border:1.5px solid var(--line); border-radius:8px; }
.pin-code-input[readonly] { background:#f4f5f7; color:var(--ink-soft); }
.perm-grid th:not(:first-child), .perm-grid td.perm-cell { text-align:center; width:4.5rem; }
.perm-grid td.perm-cell input { width:1.1rem; height:1.1rem; cursor:pointer; }

/* inline add-a-name box on Calling-to-Fill cards (2026-09-13) */
.cand-add { display:block; width:100%; margin-top:.35rem; padding:.3rem .5rem; font: inherit; font-size:.85rem; color:var(--ink); background:rgba(255,255,255,.75); border:1px dashed rgba(31,39,51,.25); border-radius:7px; }
.cand-add::placeholder { color:var(--ink-soft); }
.cand-add:focus { outline:none; background:#fff; border-style:solid; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

/* drop marker while re-ordering cards inside a column (2026-09-13) */
.bb-drop .list-row.bb-before { box-shadow: 0 -3px 0 0 var(--brand) !important; }
.bb-drop .list-row { cursor: grab; }

/* cards drag as a whole — no accidental text-selection drags (2026-09-13) */
.bb-drop .list-row { user-select: none; -webkit-user-select: none; }
.bb-drop .list-row input { user-select: text; -webkit-user-select: text; }
.bb-drop .list-row:active { cursor: grabbing; }

/* Member Board (2026-09-13) */
.member-board .board-card { padding: .6rem .75rem; }
.member-board .board-note { white-space: pre-wrap; margin-top: .15rem; }
.board-col-label.st-click { cursor: pointer; }
.board-col-label.st-click:hover { text-decoration: underline dotted; }
@media (max-width: 1100px) { .member-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 650px)  { .member-board { grid-template-columns: 1fr !important; } }

/* ===== Agenda readout on phones (2026-09-13): each line stacks —
   small label + time on top, the answer full-width and larger below ===== */
@media (max-width: 650px) {
  .modal-backdrop { padding: .5rem; align-items: flex-start; }
  .modal { padding: 1rem .9rem 1.1rem; border-radius: 10px; }
  .agenda-view { font-size: 1rem; }
  .agenda-view .ag-row { flex-wrap: wrap; row-gap: .05rem; padding: .45rem 0; border-bottom: 1px solid var(--line); align-items: center; }
  .agenda-view .ag-row:last-child { border-bottom: none; }
  .agenda-view .ag-label { min-width: 0; flex: 1 1 auto; order: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
  .agenda-view .ag-clock { order: 1; margin-left: auto; min-width: 0; font-size: .8rem; }
  .agenda-view .ag-clock + .ag-time { order: 1; margin-left: .5rem; min-width: 0; font-size: .8rem; }
  .agenda-view .ag-val { order: 2; flex: 1 1 100%; font-size: 1.08rem; line-height: 1.35; color: var(--ink); }
  .agenda-view .ag-detail-full, .agenda-view .ag-detail-box { order: 3; font-size: .95rem; }
  .agenda-view .ag-head-break { display: none; }
  .agenda-view .ag-sacrament, .agenda-view .ag-sac-hymn { margin-left: 0; margin-right: 0; padding-left: .5rem; padding-right: .5rem; }
  .agenda-view .ag-sacrament { flex-wrap: nowrap; border-bottom: none; }
  .agenda-view .ag-sac-label { position: static; transform: none; left: auto; flex: 1 1 auto; text-align: left; font-size: 1rem; padding-right: .5rem; }
  .agenda-view .ag-sacrament { justify-content: flex-start; }
  .agenda-view .ag-sacrament .ag-clock { margin-left: auto; }
  .agenda-view .ag-total { font-size: 1rem; }
}