*, *::before, *::after { box-sizing: border-box; }
html { font-size: 125%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.55;
}
h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: 1.5625rem; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--action); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 10;
  background: var(--paper); color: var(--ink); padding: 0 16px; min-height: 44px;
  display: inline-flex; align-items: center; font-family: var(--font-ui); font-weight: 700;
  border: 2px solid var(--ink); border-radius: var(--radius-control);
}
.skip-link:focus { top: 8px; }

/* Shell */
.shell { min-height: 100vh; }
.nav-bar { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.nav-list {
  list-style: none; margin: 0 auto; padding: 0 8px; max-width: 56rem;
  display: flex; flex-wrap: wrap; gap: 0 4px; font-family: var(--font-ui);
}
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--ink); text-decoration: none; font-weight: 400; font-size: 1rem; line-height: 1.4;
  border-bottom: 4px solid transparent;
}
.nav-link[aria-current='page'] { font-weight: 700; border-bottom-color: var(--ink); }
.nav-link:not([aria-current]) { text-decoration: underline; text-decoration-color: var(--hairline); }
.sheet-wrap { max-width: 56rem; margin: 0 auto; padding: 16px 8px 48px; }
.sheet {
  background: var(--paper); border-radius: var(--radius-sheet);
  border: 1px solid var(--hairline); padding: 0 16px 24px;
}
.season-band { height: 16px; background: var(--season); margin: 0 -16px 24px; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
@media (min-width: 640px) { .sheet { padding: 0 32px 32px; } .season-band { margin: 0 -32px 24px; height: 20px; } .sheet-wrap { padding: 24px 16px 64px; } .nav-list { padding: 0 16px; } }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: var(--radius-control);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; line-height: 1; /* 17px at the 20px root */
  border: 2px solid var(--action); cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--action); color: var(--action-ink); }
.btn-outline { background: transparent; color: var(--action); }
.btn:active { transform: translateY(1px); }
.btn-icon { width: 20px; height: 20px; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* Tag */
.tag {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 8px;
  border-radius: var(--radius-tag); font-family: var(--font-ui); font-weight: 700;
  font-size: 0.7rem; line-height: 1.4; border: 2px solid transparent; /* 14px at the 20px root */
}
.tag-updated { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.tag-soon { color: var(--ink-soft); border-color: var(--ink-soft); }

/* Forms (sign-in, admin): visible labels above 44px+ inputs */
.form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 28rem; margin: 0 0 24px; }
.field-label { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; line-height: 1.4; }
.field {
  width: 100%; min-height: 48px; padding: 0 12px; font: inherit; font-family: var(--font-ui); font-size: 1rem;
  color: var(--ink); background: var(--paper); border: 2px solid var(--rule); border-radius: var(--radius-control);
}
.field-code { max-width: 10rem; font-size: 1.5625rem; letter-spacing: 0.15em; }
.field-error { color: var(--ink); font-family: var(--font-ui); font-weight: 700; border-left: 4px solid var(--focus); padding-left: 8px; margin: 0; }
.form .btn { margin-top: 8px; }
.signin-alt { font-family: var(--font-ui); }
.signin .sheet { max-width: 36rem; margin: 0 auto; }

/* Admin: singers */
.notice { font-family: var(--font-ui); font-weight: 700; border-left: 4px solid var(--season-line, var(--season)); background: var(--surface); padding: 12px 16px; margin: 0 0 16px; max-width: 40rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin: 0 0 24px; }
.seg { display: flex; gap: 8px; font-family: var(--font-ui); }
.seg-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--action); border-radius: var(--radius-control); color: var(--action); font-weight: 700; text-decoration: none; }
.seg-link[aria-current='page'] { background: var(--action); color: var(--action-ink); }
a.btn { text-decoration: none; }
.vp-group { margin: 0 0 24px; }
.vp-group h2 { font-family: var(--font-ui); font-size: 1.25rem; border-bottom: 2px solid var(--rule); padding-bottom: 4px; }
.singer-list { list-style: none; margin: 0; padding: 0; }
.singer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-ui); }
.singer-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.05rem; }
.singer-meta { color: var(--ink-soft); }
.inline-form { display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; max-width: none; }
.inline-form .btn { margin-top: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.field-area { padding: 8px 12px; resize: vertical; }
.field-file { padding: 8px 12px; }
.hint { color: var(--ink-soft); font-family: var(--font-ui); margin: 0; }
.portrait { display: block; border-radius: var(--radius-control); border: 2px solid var(--rule); object-fit: cover; margin: 0 0 12px; }
.danger { border: 2px solid var(--focus); border-radius: var(--radius-control); padding: 16px; max-width: 40rem; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.6; cursor: progress; }
h2 { font-size: 1.25rem; }
section[aria-labelledby] h2 { margin-top: 1.5em; }

/* Roster import review */
.import-scroll { overflow-x: auto; margin: 16px 0; border: 1px solid var(--rule); }
.import-table { border-collapse: collapse; min-width: 70rem; font-family: var(--font-ui); }
.import-table th, .import-table td { padding: 8px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--rule); }
.import-cell { min-height: 44px; width: 100%; min-width: 9rem; box-sizing: border-box; }
.import-note { display: block; margin-top: 4px; font-size: 0.9375rem; }
.import-note-bad { font-weight: 700; border-left: 4px solid var(--focus); padding-left: 6px; }
.import-bad { background: var(--surface); }

/* Admin: songs */
.search { max-width: 28rem; margin-bottom: 16px; }
.file-list { list-style: none; margin: 0 0 16px; padding: 0; }
.file-row { border-bottom: 1px solid var(--hairline); padding: 8px 0 12px; font-family: var(--font-ui); display: grid; gap: 8px; }
.file-head { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.file-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.file-row .form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; }
.file-row .form .btn { margin-top: 0; }

/* Admin: order-of-service editor */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.editor { display: grid; gap: 8px; }
.editor-fields { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0 0 12px; }
.editor-fields .field-label { display: block; margin-bottom: 4px; }
.editor-head .field-area { display: block; margin-bottom: 12px; }
.visibility { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--font-ui); font-size: 1rem; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--action); flex: none; }
.items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.item { border: 0; border-bottom: 1px solid var(--hairline); border-left: 6px solid var(--season-line, var(--season)); margin: 0; padding: 12px 0 20px 12px; display: grid; gap: 12px; min-width: 0; }
.item-legend { font-family: var(--font-ui); font-weight: 700; font-size: 1.25rem; padding: 0 4px; }
.item-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.item-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .item-grid { grid-template-columns: 12rem 1fr 8rem 10rem; } }
.item-cell .field-label { display: block; margin-bottom: 4px; }
.item-song, .item-files { display: grid; gap: 8px; justify-items: start; font-family: var(--font-ui); }
.item-song-name { font-weight: 700; font-size: 1.05rem; }
.song-hits { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 32rem; border: 2px solid var(--rule); border-radius: var(--radius-control); background: var(--paper); }
.song-hits li + li { border-top: 1px solid var(--hairline); }
.song-hit { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; width: 100%; min-height: 44px; padding: 6px 12px; background: none; border: 0; text-align: left; font: inherit; font-family: var(--font-ui); font-size: 1rem; color: var(--ink); cursor: pointer; }
.song-hit:hover, .song-hit:focus-visible { background: var(--surface); }
.item-file { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.item-attach { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.item-attach .field { width: auto; min-width: 12rem; }
.file-btn { position: relative; }
.file-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.vn { display: grid; gap: 8px; }
.vn-entry { display: flex; flex-wrap: wrap; gap: 8px; max-width: 40rem; }
.vn-entry .field { flex: 1 1 16rem; width: auto; }
.vn-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vn-shape { font-size: 1.25rem; width: 1.5rem; text-align: center; color: var(--ink-soft); }
.vn-verses { width: 8rem; }
.vn-part { width: 11rem; }
.vn-text { flex: 1 1 14rem; width: auto; }
.vn-add { display: flex; flex-wrap: wrap; gap: 8px; }
.add-item { display: grid; gap: 4px; margin: 0 0 24px; }
.add-item-row { display: flex; flex-wrap: wrap; gap: 8px; max-width: 36rem; }
.add-item-row .field { flex: 1 1 14rem; width: auto; }
.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--paper); border-top: 2px solid var(--rule); padding: 12px 0; margin-top: 8px; }
.save-bar .field-error { margin: 0; }
.save-msg { font-family: var(--font-ui); font-weight: 700; margin: 0; }
.editor-delete { margin-top: 32px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-ui); }

/* Singer home and schedule */
.home-date { font-size: 1.95rem; line-height: 1.2; font-weight: 600; margin: 0 0 0.25em; }
.home-title { font-size: 1.5625rem; font-weight: 600; margin: 0 0 0.5em; }
.home-status { font-family: var(--font-ui); font-weight: 700; font-size: 1.5625rem; line-height: 1.3; margin: 0 0 0.5em; padding-left: 12px; border-left: 6px solid var(--season-line, var(--season)); }
.home-status-quiet { font-weight: 400; border-left-color: var(--rule); }
.home-note { font-size: 1.25rem; padding: 12px 16px; background: var(--surface); border-radius: var(--radius-control); max-width: 40rem; }
.home-rehearsal { font-family: var(--font-ui); font-size: 1.25rem; margin: 0 0 1.25em; }
.home-cta { height: 56px; padding: 0 28px; font-size: 1.1rem; }
.home-following { margin-top: 2em; border-top: 1px solid var(--hairline); }
.sched, .sched-earlier .sched { list-style: none; margin: 0 0 16px; padding: 0; }
.sched-row { border-bottom: 1px solid var(--hairline); padding: 12px 0; font-family: var(--font-ui); }
.sched-row p { margin: 0 0 4px; }
.sched-date { color: var(--ink-soft); }
.sched-main { font-size: 1.25rem; font-weight: 700; }
.sched-service .sched-main { font-family: var(--font-text); }
.sched-detail { font-weight: 400; }
.sched-off .sched-main { font-weight: 400; }
.sched-note { border-left: 4px solid var(--season-line, var(--season)); padding-left: 8px; }
.sched-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-earlier { margin-top: 24px; }
.sched-earlier summary { display: flex; align-items: center; min-height: 44px; font-family: var(--font-ui); font-weight: 700; font-size: 1.25rem; cursor: pointer; }
.sched-main a { display: inline-flex; align-items: center; min-height: 44px; }

/* Singer Sunday page */
.scards { list-style: none; margin: 0 0 16px; padding: 0; }
.scard { border-bottom: 1px solid var(--hairline); border-left: 6px solid var(--season-line, var(--season)); padding: 12px 0 16px 12px; margin: 0 0 8px; font-family: var(--font-ui); display: grid; gap: 8px; justify-items: start; }
.scard-title { font-size: 1.25rem; margin: 0; }
.scard-quiet { margin: 0; color: var(--ink-soft); font-weight: 700; }
.scard-verses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 1.05rem; }
.scard-file { display: grid; gap: 8px; justify-items: start; }
.scard-file-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.scard-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.scard-plain { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8rem; text-decoration: underline; }
.scard-line { margin: 0; font-size: 1.1rem; }
.scard-label { margin: 0; font-weight: 700; color: var(--ink-soft); }
.scard-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.scard-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.scard-tracks, .scard-other { display: grid; gap: 12px; justify-items: start; width: 100%; }
.scard-track { padding: 4px 0; }
.scard-track audio { width: 100%; max-width: 28rem; }
.scard-mine { display: grid; gap: 8px; justify-items: start; border-left: 6px solid var(--action); background: var(--surface); padding: 8px 12px; width: 100%; box-sizing: border-box; }
.scard-part { margin: 0; font-weight: 700; }
.scard-other summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.svc + .svc { margin-top: 24px; }

/* Admin tools line, calendar link, notify and absence pages */
.admin-tools { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 8px; font-family: var(--font-ui); }
.admin-tools a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.cal-url { font-size: 0.85rem; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 16px; }
.cal-help { font-family: var(--font-ui); max-width: 40rem; }
.cal-help summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.sched-absent { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-ui); }
.home-absent { font-family: var(--font-ui); margin: 0 0 1.25em; }
.home-absent a { display: inline-flex; align-items: center; min-height: 44px; }
.notify-preview { white-space: pre-wrap; border-left: 4px solid var(--season-line, var(--season)); background: var(--surface); padding: 12px 16px; max-width: 40rem; font-family: var(--font-ui); }
.history-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); }
.history-list li { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.abs-group h2 { font-family: var(--font-ui); font-size: 1.25rem; border-bottom: 2px solid var(--rule); padding-bottom: 4px; }
.abs-list { list-style: none; margin: 0 0 16px; padding: 0; font-family: var(--font-ui); }
.abs-list li { padding: 6px 0; }

/* General files area */
.shared-file .file-name { font-size: 1.25rem; margin: 0; }
.file-thumb { display: block; max-width: 100%; max-height: 200px; width: auto; height: auto; border: 2px solid var(--rule); border-radius: var(--radius-control); background: var(--surface); }
.vis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-family: var(--font-ui); }
.vis-state { color: var(--ink-soft); font-weight: 700; }
.vis-on { color: var(--ink); }

/* Shell footer: sign out */
.shell-foot { padding: 8px 0 0; font-family: var(--font-ui); }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; background: none; border: 0;
  font: inherit; font-family: var(--font-ui); font-size: 1rem; color: var(--action); text-decoration: underline;
  text-underline-offset: 0.2em; cursor: pointer;
}

/* Order of worship: type at the left, the rest beside it, from 640px up (stacked on phones). */
@media (min-width: 640px) {
  .scard { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 24px; }
  .scard > * { grid-column: 2; }
  .scard > .scard-title { grid-column: 1; grid-row: 1; }
}

/* Admin navigation (second row, admins only) and the /admin landing page */
.admin-nav { border-top: 1px solid var(--hairline); background: var(--surface); }
.admin-nav .nav-link { font-size: 0.95rem; }
.admin-nav .nav-link[aria-current='page'] { border-bottom-color: var(--action); }
.admin-grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; font-family: var(--font-ui); }
@media (min-width: 640px) { .admin-grid { grid-template-columns: 1fr 1fr; } }
.admin-card {
  display: block; box-sizing: border-box; min-height: 44px; height: 100%; padding: 12px 16px; color: var(--ink);
  text-decoration: none; border: 1px solid var(--hairline); border-left: 6px solid var(--action); border-radius: var(--radius-control);
}
.admin-card strong { display: block; font-size: 1.1rem; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.admin-card span { display: block; margin-top: 4px; }

/* ===== Look: light, compact, calm. Season color is an accent only (never text). ===== */
html { font-size: 112.5%; background: var(--surface); }          /* 18px for singers */
:root:has(.shell-admin) { font-size: 100%; }                      /* 16px for the admin work area */
body { background: transparent; font-family: var(--font-ui); line-height: 1.5; }
h1, h2, h3, .home-date, .home-title, .scard-line { font-family: var(--font-text); font-weight: 600; font-variant-numeric: lining-nums; letter-spacing: -0.005em; line-height: 1.2; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
p { max-width: 62ch; }

.shell {
  background:
    radial-gradient(50rem 16rem at 92% -4rem, color-mix(in srgb, var(--season) 20%, transparent), transparent 70%),
    linear-gradient(#cfe1ed, #e6eff6 7rem, var(--surface) 15rem) top / 100% 16rem no-repeat,
    var(--surface);
}
:root[data-theme='dark'] .shell { background: linear-gradient(#222a40, var(--surface) 14rem) top / 100% 16rem no-repeat, var(--surface); }

/* Menus: one pill pattern everywhere. Active = filled. */
.nav-bar { background: transparent; border: 0; }
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 60rem; margin: 0 auto; padding: 10px 12px 0; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; max-width: none; }
.nav-link, .seg-link, .theme-toggle, .admin-tools a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; line-height: 1.3; text-decoration: none !important; color: var(--action);
}
.nav-link:hover, .theme-toggle:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.nav-link[aria-current='page'], .seg-link[aria-current='page'] { background: var(--action); color: var(--action-ink); }
.theme-toggle { background: color-mix(in srgb, var(--paper) 55%, transparent); cursor: pointer; }
.theme-toggle .pref { display: none; align-items: center; justify-content: center; }
html:not([data-theme-pref]) .pref-system, html[data-theme-pref='system'] .pref-system, html[data-theme-pref='light'] .pref-light, html[data-theme-pref='dark'] .pref-dark { display: inline-flex; }
.seg-link { background: var(--surface); }
.admin-tools a, .back-link { background: var(--surface); border-radius: 999px; padding: 0 14px; text-decoration: none; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; font-weight: 700; color: var(--action); }

/* Page card */
.sheet-wrap { max-width: 60rem; margin: 0 auto; padding: 18px 12px 32px; }
.sheet { background: var(--paper); border: 0; border-top: 4px solid var(--season-line, var(--season)); border-radius: var(--radius-sheet); box-shadow: var(--shadow); padding: 22px 18px 24px; }
.season-band { display: none; }
.shell-foot { padding: 8px 8px 24px; }
@media (min-width: 640px) { .sheet-wrap { padding: 24px 20px 40px; } .sheet { padding: 30px 36px 32px; } .nav-top { padding: 12px 20px 0; } }

/* Buttons: 44px tall (a rule), lighter looking. Secondary = soft tint, no outline. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; line-height: 1; border: 0; cursor: pointer; text-decoration: none; transition: background-color .15s; }
.btn-primary { background: var(--action); color: var(--action-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--action) 86%, black); }
.btn-outline { background: color-mix(in srgb, var(--action) 11%, var(--paper)); color: var(--action); }
.btn-outline:hover { background: color-mix(in srgb, var(--action) 20%, var(--paper)); }
.btn-icon { width: 18px; height: 18px; }
.home-cta { height: 48px; padding: 0 26px; font-size: 1rem; }
.tag { border-radius: 999px; padding: 0 10px; font-size: 0.75rem; min-height: 1.4rem; }
.link-btn { font-size: 0.9rem; }

/* Fields */
.field { min-height: 44px; border: 1px solid var(--rule); border-radius: var(--radius-control); padding: 0 12px; font-size: 0.95rem; }
.field:focus { border-color: var(--action); }
.field-label { font-size: 0.85rem; }
.form { gap: 6px; }
.hint { font-size: 0.85rem; }
.check { font-size: 0.95rem; }

/* Singer home */
.sheet > h1 { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 2px; letter-spacing: 0; }
.home-date { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.1; margin: 0 0 0.25em; }
.home-title { font-size: 1.2rem; font-weight: 400; color: var(--ink-soft); margin: 0 0 0.6em; }
.home-status { display: inline-block; border: 0; padding: 4px 14px; border-radius: 999px; background: color-mix(in srgb, var(--season) 14%, var(--paper)); color: var(--ink); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; margin: 0 0 0.8em; }
.home-status-quiet { background: var(--surface); font-weight: 400; }
.home-note { background: transparent; border-left: 3px solid var(--season-line, var(--season)); border-radius: 0; padding: 2px 0 2px 14px; font-size: 1rem; font-style: italic; max-width: 40rem; }
.home-rehearsal { font-size: 1rem; margin: 0 0 0.8em; }
.home-absent { margin: 0 0 1em; font-size: 0.9rem; }
.home-following { margin-top: 1.4em; border-top: 1px solid var(--hairline); padding-top: 4px; }
.home-following h2 { font-size: 1.05rem; margin-top: 0.8em; }

/* Sunday: order of worship. Type at the left, the rest beside it from 640px. */
.scards { list-style: none; margin: 18px 0 0; padding: 0; }
.scard { display: grid; gap: 6px; justify-items: start; border: 0; border-top: 1px solid var(--hairline); padding: 14px 0; margin: 0; }
.scard:first-child { border-top: 0; }
.scard-title { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin: 2px 0 0; }
.scard-line { font-size: 1.2rem; margin: 0; font-weight: 600; }
.scard-quiet { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.scard-verses { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.9rem; color: var(--ink-soft); }
.scard-label { margin: 6px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.scard-file { display: grid; gap: 4px; justify-items: start; }
.scard-file-name { margin: 0; font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; }
.scard-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scard-plain { min-height: 44px; font-size: 0.75rem; color: var(--ink-soft); }
.scard-links { gap: 2px 14px; }
.scard-link { font-size: 0.9rem; min-height: 44px; }
.scard-tracks, .scard-other { gap: 8px; }
.scard-mine { border: 0; border-radius: 12px; background: color-mix(in srgb, var(--action) 9%, var(--paper)); padding: 10px 14px; gap: 6px; }
.scard-part { font-size: 0.85rem; }
.scard-track audio { height: 40px; border-radius: 999px; }
.svc + .svc { margin-top: 20px; }
@media (min-width: 640px) {
  .scard { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 20px; padding: 16px 0; }
  .scard > * { grid-column: 2; }
  .scard > .scard-title { grid-column: 1; grid-row: 1; padding-top: 6px; }
}

/* Schedule: date at the left, what is happening beside it. */
.sched, .sched-earlier .sched { margin: 0 0 12px; }
.sched-row { display: grid; gap: 2px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent; padding: 12px 0; margin: 0; }
.sched-row:first-child { border-top: 0; }
.sched-service { background: transparent; }
.sched-service .sched-main { font-family: var(--font-ui); }
.sched-date { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.sched-main { font-size: 1.05rem; margin: 0; }
.sched-detail { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.sched-note { font-size: 0.9rem; }
.sched-main a, .sched-absent { font-size: 0.95rem; }
.sched-absent { min-height: 44px; font-size: 0.85rem; }
.sched-earlier summary { font-size: 1rem; }
@media (min-width: 640px) {
  .sched-row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 20px; }
  .sched-row > * { grid-column: 2; }
  .sched-row > .sched-date { grid-column: 1; grid-row: 1; }
}

/* Directory: compact, two columns on wide screens */

/* Sign-in */
.signin .sheet { max-width: 30rem; }

/* ===== Admin: a work area. Wider, denser, sidebar menu. ===== */
.shell-admin .nav-top, .shell-admin .sheet-wrap { max-width: 82rem; }
.admin-nav { margin: 0 0 12px; }
.admin-nav .nav-list { background: color-mix(in srgb, var(--paper) 65%, transparent); border-radius: 999px; padding: 3px; width: fit-content; max-width: 100%; }
.admin-nav .nav-link { font-size: 0.85rem; padding: 0 12px; }
.shell-admin .sheet { padding: 20px 18px 24px; border-top-width: 3px; border-radius: 14px; }
.shell-admin .sheet > h1 { font-family: var(--font-text); font-size: 1.6rem; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.shell-admin .sheet > h1 + p { color: var(--ink-soft); }
.shell-admin h2 { font-size: 1.15rem; }
.shell-admin .field, .shell-admin .btn, .shell-admin .nav-link, .shell-admin .seg-link { font-size: 0.85rem; }
.shell-admin .field-label { font-size: 0.8rem; }
@media (min-width: 64rem) {
  .shell-admin .sheet-wrap { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 24px; align-items: start; }
  .shell-admin .admin-nav { position: sticky; top: 16px; margin: 0; }
  .shell-admin .admin-nav .nav-list { flex-direction: column; border-radius: 16px; padding: 6px; width: auto; gap: 2px; background: var(--paper); box-shadow: var(--shadow); }
  .shell-admin .admin-nav .nav-link { border-radius: 10px; }
  .shell-admin .sheet { padding: 26px 30px 30px; }
}
.toolbar { margin: 0 0 16px; gap: 8px 12px; }
.vp-group h2, .abs-group h2 { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; border-bottom: 1px solid var(--hairline); padding-bottom: 4px; }
.singer-row { min-height: 44px; gap: 2px 14px; font-size: 0.9rem; padding: 2px 0; }
.singer-link { font-size: 0.95rem; }
.file-row { padding: 6px 0 10px; font-size: 0.9rem; }
.file-name { font-size: 0.95rem; }
.notice { border-radius: 10px; border-left-width: 3px; font-size: 0.9rem; padding: 10px 14px; }
.danger { border: 1px solid var(--focus); border-radius: 12px; padding: 14px; }
.admin-grid { gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .admin-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .admin-grid { grid-template-columns: repeat(3, 1fr); } }
.admin-card { border: 1px solid var(--hairline); border-radius: 12px; background: transparent; padding: 14px 16px; }
.admin-card:hover { background: color-mix(in srgb, var(--action) 7%, var(--paper)); }
.admin-card strong { font-size: 1rem; text-decoration: none; }
.admin-card span { font-size: 0.85rem; color: var(--ink-soft); }

/* Order-of-service editor: each item is a card */
.items { gap: 10px; margin-bottom: 14px; }
.item { border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 16px 16px; gap: 10px; background: var(--paper); }
.item-legend { font-family: var(--font-ui); font-size: 0.95rem; padding: 0 6px; }
.item-tools { gap: 6px; }
.item-grid { gap: 10px 12px; }
@media (min-width: 640px) { .item-grid { grid-template-columns: 10rem 1fr 7rem 9rem; } }
.item-song-name, .item-file .file-name { font-size: 0.95rem; }
.save-bar { border-top: 1px solid var(--hairline); box-shadow: 0 -8px 16px -12px rgb(20 30 45 / 0.25); padding: 10px 0; }
.editor-fields { gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.import-table { font-size: 0.85rem; }
.import-scroll { border-radius: 10px; border: 1px solid var(--hairline); }

/* Icons and color */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.nav-link .ico, .seg-link .ico, .theme-toggle .ico { margin-right: 6px; }
.nav-link .ico { color: var(--rehearsal-ico); }
.nav-link[aria-current='page'] .ico { color: inherit; }
.admin-nav .nav-link .ico { width: 1.1em; height: 1.1em; }
.ico-kind { margin-right: 8px; color: var(--rehearsal-ico); }
.sched-service .ico-kind { color: var(--service-ico); }
.sched-off .ico-kind { color: var(--off-ink); }
.view-switch { margin: 0 0 16px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.home-absent { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; }
.home-absent a { background: var(--surface); border-radius: 999px; padding: 0 14px; text-decoration: none; font-weight: 700; color: var(--action); }
.admin-card { display: flex; gap: 12px; align-items: flex-start; }
.admin-card-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--rehearsal-bg); color: var(--rehearsal-ico); }
.admin-card-ico .ico { width: 20px; height: 20px; }
.admin-card-text { display: block; }
.admin-grid li:nth-child(3n+2) .admin-card-ico { background: var(--service-bg); color: var(--service-ico); }
.admin-grid li:nth-child(3n) .admin-card-ico { background: color-mix(in srgb, var(--season) 16%, var(--paper)); color: var(--season-text, var(--season)); }

/* Calendar */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.cal-head h2 { margin: 0; font-size: 1.5rem; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav .btn { padding: 0 14px; }
.cal-nav .btn:disabled { opacity: 0.4; cursor: default; }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-grid th { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); padding: 4px 0; text-align: center; }
.cal-grid abbr { text-decoration: none; }
.cal-grid td { padding: 0; vertical-align: top; height: 3.6rem; border-radius: 10px; }
.cal-pad { background: transparent; }
.cal-cell { background: var(--surface); }
.cal-empty { padding: 6px 7px !important; }
.cal-num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.cal-today .cal-num, .cal-today.cal-empty .cal-num { background: var(--action); color: var(--action-ink); font-weight: 700; }
.cal-empty .cal-num { color: var(--ink-soft); font-weight: 400; }
.cal-day { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; height: 100%; min-height: 3.6rem; padding: 5px 5px 6px; background: none; border: 0; border-radius: 10px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.cal-day:hover { background: color-mix(in srgb, var(--action) 8%, transparent); }
.cal-picked { outline: 2px solid var(--action); outline-offset: -2px; }
.cal-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; border-radius: 6px; padding: 2px 5px; font-size: 0.7rem; font-weight: 700; line-height: 1.25; }
.cal-chip .ico { width: 13px; height: 13px; }
.cal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-rehearsal { background: var(--rehearsal-bg); color: var(--rehearsal-ink); }
.cal-rehearsal .ico, .cal-rehearsal .cal-event-ico { color: var(--rehearsal-ico); }
.cal-service { background: var(--service-bg); color: var(--service-ink); }
.cal-service .ico, .cal-service .cal-event-ico { color: var(--service-ico); }
.cal-off { background: var(--off-bg); color: var(--off-ink); }
.cal-off .ico, .cal-off .cal-event-ico { color: var(--off-ink); }
.cal-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 0.8rem; color: var(--ink-soft); }
.cal-key li { display: inline-flex; align-items: center; gap: 6px; }
.cal-detail { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.cal-detail h3 { font-size: 1.15rem; margin: 0 0 10px; }
.cal-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-event { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; }
.cal-event-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.cal-event-ico .ico { width: 20px; height: 20px; }
.cal-event-body p { margin: 0 0 4px; }
.cal-event-title { font-weight: 700; }
.cal-event-title a { color: inherit; }
.cal-event .sched-detail { color: inherit; opacity: 0.85; }
.cal-event-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.cal-event-actions .back-link { background: color-mix(in srgb, var(--paper) 75%, transparent); }
@media (max-width: 639px) {
  .cal-grid { border-spacing: 2px; }
  .cal-grid td { height: 3.1rem; }
  .cal-day { align-items: center; padding: 4px 2px; min-height: 3.1rem; }
  .cal-empty { text-align: center; padding: 6px 0 !important; }
  .cal-chip { padding: 2px 4px; }
  .cal-chip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-link .ico { margin-right: 4px; }
}
@media (min-width: 640px) { .cal-grid td { height: 5.4rem; } .cal-day { min-height: 5.4rem; } .cal-head h2 { font-size: 1.7rem; } }
@media (max-width: 400px) { .nav-link .ico { display: none; } }
@media (max-width: 639px) { .tt-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .theme-toggle .ico { margin-right: 0; } .theme-toggle { padding: 0 12px; } }

/* Dark theme details */
:root[data-theme='dark'] .nav-link:hover, :root[data-theme='dark'] .theme-toggle { background: rgb(255 255 255 / 0.1); }
:root[data-theme='dark'] .theme-toggle:hover { background: rgb(255 255 255 / 0.18); }
:root[data-theme='dark'] .sheet { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px -14px rgb(0 0 0 / 0.7); }
@media (max-width: 480px) { .nav-link, .theme-toggle { padding: 0 10px; font-size: 0.85rem; } .nav-top { padding-left: 6px; padding-right: 6px; } }
@media print { .shell { background: none; } }
.admin-card .admin-card-ico { display: grid; margin-top: 0; color: var(--rehearsal-ico); }
.admin-grid li:nth-child(3n+2) .admin-card .admin-card-ico, .admin-grid li:nth-child(3n+2) .admin-card-ico { color: var(--service-ico); }
.admin-grid li:nth-child(3n) .admin-card .admin-card-ico, .admin-grid li:nth-child(3n) .admin-card-ico { color: var(--season-text, var(--season)); }
.admin-card .admin-card-text > span { margin-top: 2px; }

/* ===== Layout v3: compact, app-like bar, uses the width of a laptop, thumb-friendly on a phone ===== */
html { font-size: 106.25%; scroll-padding-top: 4.5rem; scroll-padding-bottom: 5rem; }  /* 17px for singers */
:root:has(.shell-admin) { font-size: 93.75%; }                                         /* 15px in the admin work area */
body { font-family: var(--font-ui); font-variant-numeric: normal; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }

.shell { background: linear-gradient(color-mix(in srgb, var(--season) 12%, var(--surface)), var(--surface) 18rem) top / 100% 20rem no-repeat, var(--surface); }
:root[data-theme='dark'] .shell { background: linear-gradient(color-mix(in srgb, var(--season) 14%, var(--surface)), var(--surface) 18rem) top / 100% 20rem no-repeat, var(--surface); }

/* The site bar */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: inset 0 -3px 0 var(--season-line, var(--season)), 0 1px 0 var(--hairline); }
.topbar-in { display: flex; align-items: center; gap: 8px 20px; max-width: 1224px; margin: 0 auto; padding: 0 20px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-text); font-weight: 600; font-size: 20.4px; color: var(--ink); text-decoration: none; }
.brand .ico { width: 1.25em; height: 1.25em; color: var(--action); margin: 0; }
.topbar nav { flex: 1; min-width: 0; }
.topbar .nav-list { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; }
.topbar .nav-link { min-height: 44px; padding: 0 14px; border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 15.3px; font-weight: 600; opacity: 1; }
.topbar .nav-link .ico { color: inherit; margin-right: 8px; }
.topbar .nav-link:hover { background: color-mix(in srgb, var(--action) 8%, transparent); color: var(--ink); }
.topbar .nav-link[aria-current='page'] { background: color-mix(in srgb, var(--action) 12%, transparent); color: var(--action); }
.theme-toggle { margin-left: auto; background: transparent; border: 1px solid var(--hairline); border-radius: 10px; padding: 0 12px; font-size: 14.45px; color: var(--ink-soft); }
.theme-toggle:hover { background: color-mix(in srgb, var(--action) 8%, transparent); }
.theme-toggle .ico { margin-right: 6px; }

/* Page */
.sheet-wrap { max-width: 72rem; padding: 20px 20px 40px; }
.shell-admin .sheet-wrap { max-width: 84rem; }
.sheet { border: 1px solid var(--hairline); border-top: 1px solid var(--hairline); border-radius: 16px; box-shadow: none; padding: 20px 18px 24px; }
.shell-admin .sheet { border-top-width: 1px; border-radius: 14px; }
@media (min-width: 900px) { .sheet { padding: 28px 36px 32px; } .shell-admin .sheet { padding: 24px 28px 28px; } }
.sheet > h1 { font-size: 0.8rem; }
.home-date { font-size: clamp(1.55rem, 4.2vw, 2.15rem); }
.home-title { font-size: 1.1rem; }
.home-status { font-size: 0.85rem; padding: 3px 12px; }
.home-note { font-size: 0.95rem; }
.home-rehearsal { font-size: 0.95rem; font-weight: 600; margin: 0; }
.btn, .seg-link, .nav-link, .back-link, .admin-tools a, .link-btn { font-size: 0.88rem; }
.home-cta { height: 44px; font-size: 0.95rem; padding: 0 22px; }

/* Home: this week's news at the left, the quick actions in a panel at the right */
.home-grid { display: grid; gap: 18px; margin-top: 6px; }
.home-side { display: grid; gap: 10px; align-content: start; background: var(--surface); border-radius: 14px; padding: 16px 18px; }
.home-side > * { margin: 0; }
.home-absent { flex-direction: column; align-items: flex-start; }
.home-following { margin: 0; border-top: 1px solid var(--hairline); padding-top: 10px; }
@media (min-width: 800px) { .home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: 40px; } }

/* Sunday: who/what at the left, the order of worship at the right */
.svc-extras { display: block; }
@media (min-width: 900px) {
  .svc:not(.svc-extras) { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: 40px; align-items: start; grid-auto-rows: min-content; }
  .svc:not(.svc-extras) > * { grid-column: 1; }
  .svc:not(.svc-extras) > .scards { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; }
  .scard { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; }
}
.scard-line { font-size: 1.1rem; }
.scard-title { font-size: 0.8rem; }

/* Schedule: calendar at the left, the chosen day at the right */
.cal-head h2 { font-size: 1.35rem; }
@media (min-width: 900px) {
  .cal { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); column-gap: 32px; align-items: start; }
  .cal-head, .cal-grid, .cal-key { grid-column: 1; }
  .cal-detail { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; position: sticky; top: 76px; }
  .cal-grid td { height: 4.6rem; } .cal-day { min-height: 4.6rem; }
}
.cal-event { padding: 10px 12px; }

/* Directory: three columns on a laptop */

/* Admin sub-menu: one scrolling row on small screens */
.admin-nav { max-width: none; margin: 0 0 12px; }
@media (max-width: 63.99rem) {
  .admin-nav .nav-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .admin-nav .nav-link { flex: none; white-space: nowrap; }
}
.shell-admin .admin-nav { padding: 0; }

/* Phones: the pages fold into a Menu (hamburger) button that opens a list under the bar */
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: 14.96px; font-weight: 700; cursor: pointer; }
.menu-btn .ico { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  .topbar-in { min-height: 56px; padding: 0 12px; gap: 8px; }
  .brand { margin-right: auto; }
  .menu-btn { display: inline-flex; order: 3; }
  .theme-toggle { order: 2; margin-left: 0; }
  .site-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 25; background: var(--paper); border-bottom: 1px solid var(--hairline); box-shadow: 0 18px 30px -18px rgb(20 30 45 / 0.35); padding: 6px 12px 12px; }
  .site-menu.is-open { display: block; }
  .topbar .nav-list { display: grid; gap: 2px; }
  .topbar .nav-link { min-height: 48px; padding: 0 12px; font-size: 17px; border-radius: 10px; }
  .topbar .nav-link .ico { display: block; width: 20px; height: 20px; margin-right: 12px; }
  .sheet-wrap { padding: 14px 12px 24px; }
}
@media print { .topbar { display: none; } }
.home-side .home-absent a { background: var(--paper); border: 1px solid var(--hairline); }
@media (min-width: 640px) { .cal-chip-text { white-space: normal; } }

/* One button family: 44px tall, 10px corners, filled for the main action, soft tint for the rest */
.btn, .seg-link, .back-link, .admin-tools a, .home-absent a, .theme-toggle, .menu-btn, .link-btn { border-radius: 10px; }
.btn { padding: 0 16px; font-size: 0.88rem; }
.btn-primary, .seg-link[aria-current='page'] { background: var(--action); color: var(--action-ink); box-shadow: none; }
.btn-outline, .seg-link, .back-link, .admin-tools a { background: color-mix(in srgb, var(--action) 10%, var(--paper)); color: var(--action); border: 0; }
.btn-outline:hover, .seg-link:hover, .back-link:hover, .admin-tools a:hover { background: color-mix(in srgb, var(--action) 18%, var(--paper)); }
.home-cta { height: 44px; padding: 0 20px; font-size: 0.88rem; }
.home-side .home-absent a { background: var(--paper); border: 1px solid var(--hairline); color: var(--action); }
.cal-nav .btn { width: 44px; padding: 0; }
.cal-nav .btn:nth-child(2) { width: auto; padding: 0 16px; }
.tag, .cal-chip { border-radius: 6px; }
.home-status { border-radius: 8px; }
.nav-link, .admin-nav .nav-list { border-radius: 10px; }
.admin-nav .nav-list { border-radius: 12px; }

/* "I can't make it": tick the days, or a stretch */
.absent-form { max-width: 46rem; gap: 14px; align-items: stretch; }
.absent-month, .absent-range { border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 14px 14px; margin: 0; min-width: 0; }
.absent-month legend, .absent-range legend { padding: 0 6px; font-weight: 700; font-size: 0.95rem; }
.absent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 6px; }
.absent-opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; }
.absent-opt:has(input:checked) { background: color-mix(in srgb, var(--action) 10%, var(--paper)); border-color: var(--action); }
.absent-opt.is-filed { opacity: 0.6; cursor: default; }
.absent-opt input { width: 22px; height: 22px; margin: 0; accent-color: var(--action); flex: none; }
.absent-opt-text { display: grid; line-height: 1.25; }
.absent-opt-date { font-weight: 700; font-size: 0.9rem; }
.absent-opt-what { color: var(--ink-soft); font-size: 0.8rem; }
.absent-opt-what .ico { width: 0.95em; height: 0.95em; vertical-align: -0.12em; }
.absent-range-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.absent-range-row .field { min-width: 10rem; }
.absent-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Who is out (admins) */
.out-panel { background: color-mix(in srgb, var(--off-bg) 70%, var(--paper)); border-left: 3px solid var(--service-ico); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.out-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; font-size: 0.9rem; max-width: none; }
.out-title .ico { color: var(--service-ico); }
.out-count { background: var(--service-bg); color: var(--service-ink); border-radius: 6px; padding: 0 7px; font-size: 0.8rem; }
.out-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.9rem; }
.out-msg { color: var(--ink-soft); }
.out-soon { margin: 0 0 18px; }
.cal-out { background: var(--service-bg); color: var(--service-ink); }
.cal-out .ico { color: var(--service-ico); }

/* Account menu and the "My account" page */
.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: 14.96px; font-weight: 700; cursor: pointer; }
.acct-btn:hover { background: color-mix(in srgb, var(--action) 8%, transparent); }
.acct-btn .ico { width: 20px; height: 20px; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 255px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 18px 40px -16px rgb(20 30 45 / 0.4); padding: 6px; display: grid; gap: 2px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: 15.64px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.acct-item:hover, .acct-item:focus-visible { background: color-mix(in srgb, var(--action) 10%, var(--paper)); }
.acct-item .ico { width: 20px; height: 20px; color: var(--action); }
.acct-menu form { margin: 0; }
.topbar-in { position: relative; }
.theme-toggle { margin-left: auto; }
.me-grid { display: grid; gap: 16px; margin-top: 12px; }
.me-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.me-card { border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.me-card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.me-dl { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 6px 12px; margin: 0 0 10px; }
.me-dl dt { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.me-dl dd { margin: 0; overflow-wrap: anywhere; }
.me-abs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.me-abs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.me-abs form { margin: 0; }
.me-earlier { margin-top: 12px; }
.me-earlier summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
@media (min-width: 900px) { .me-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; } }
@media (max-width: 639px) {
  .acct-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .acct-btn { padding: 0 12px; }
  .acct-menu { right: -4px; }
}

/* Directory: sort bar, flat list, directions, address fields */
.address-fields { border: 1px solid var(--hairline); border-radius: 12px; padding: 8px 14px 14px; width: 100%; margin: 4px 0 0; display: grid; gap: 6px; }
.address-fields legend { font-weight: 700; padding: 0 6px; }
.address-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 0.7fr) minmax(0, 1fr); gap: 8px; }
.address-row .field { width: 100%; }

/* ===== Bar v4: glyph buttons at the right, admin inside the main menu ===== */
.bar-rest { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.bar-rest .site-menu { flex: 1; min-width: 0; }
.bar-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.acct-btn, .theme-toggle, .menu-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; margin: 0; }
.acct-btn .ico, .theme-toggle .ico, .menu-btn .ico { width: 22px; height: 22px; margin: 0; }
.theme-toggle { margin-left: 0; }
.menu-btn { display: none; }
.nav-group { position: relative; }
.nav-group-btn { border: 0; cursor: pointer; font-family: var(--font-ui); }
.nav-group-btn .chev { width: 16px; height: 16px; margin: 0 0 0 4px; transition: transform .15s; }
.nav-group-btn[aria-expanded='true'] .chev { transform: rotate(180deg); }
.topbar .nav-link.is-here { background: color-mix(in srgb, var(--action) 12%, transparent); color: var(--action); }
.admin-menu { display: none; list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 246.5px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 18px 40px -16px rgb(20 30 45 / 0.4); }
.admin-menu.is-open { display: grid; gap: 2px; }
.admin-menu .nav-link { width: 100%; }
.shell-admin .sheet-wrap { display: block; max-width: 84rem; }
@media (max-width: 1023px) {
  .topbar-in { gap: 8px; }
  .brand { margin-right: auto; }
  .bar-rest { flex: none; }
  .bar-tools { margin-left: 0; gap: 4px; }
  .menu-btn { display: inline-flex; order: 0; }
  .theme-toggle, .acct-btn { order: 0; }
  .site-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 64px); overflow-y: auto; }
  .admin-menu { position: static; display: none; border: 0; box-shadow: none; padding: 0 0 0 20px; background: transparent; min-width: 0; }
  .admin-menu.is-open { display: grid; }
  .nav-group-btn { width: 100%; }
  .acct-menu { right: 0; }
}

/* Glyph-only action buttons (print, export, add, import): square, at the right edge of their toolbar */
.btn-glyph { width: 44px; padding: 0; flex: none; }
.btn-glyph .ico { width: 22px; height: 22px; margin: 0; }
.toolbar-actions { display: flex; gap: 8px; margin-left: auto; }
.toolbar { flex-wrap: wrap; }

/* Settings page and the home announcement */
.settings-form { max-width: 46rem; gap: 14px; align-items: stretch; }
.settings-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 8px 16px 16px; margin: 0; display: grid; gap: 6px; min-width: 0; }
.settings-card legend { padding: 0 6px; font-weight: 700; }
.settings-card h3 { margin: 10px 0 0; font-size: 1rem; font-family: var(--font-ui); }
.settings-words summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.settings-words ul { margin: 0 0 8px; padding-left: 1.2rem; font-size: 0.9rem; }
.settings-words code { background: var(--surface); border-radius: 4px; padding: 0 4px; }
.settings-preview { background: var(--surface); border-radius: 10px; padding: 10px 14px; }
.settings-preview p { margin: 0 0 4px; }
.settings-preview pre { margin: 0; white-space: pre-wrap; font-family: var(--font-ui); font-size: 0.9rem; }
.announcement { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--service-bg); color: var(--service-ink); border-left: 4px solid var(--service-ico); }
.announcement .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--service-ico); }
.announcement p { margin: 0; max-width: none; font-weight: 600; }

/* File picker, drag and drop, bulk add, song page */
.file-pick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; max-width: 100%; border-radius: 12px; }
.file-pick.is-over { outline: 2px dashed var(--action); outline-offset: 4px; background: color-mix(in srgb, var(--action) 8%, transparent); }
.file-pick-name { color: var(--ink-soft); font-size: 0.85rem; overflow-wrap: anywhere; min-width: 0; }
.upload-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.upload-part { display: grid; gap: 2px; }
.upload-part .field { min-width: 9rem; }
.upload-form { max-width: none; gap: 4px; }
.replace-box { margin-top: 4px; }
.replace-box summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--action); font-size: 0.9rem; }
.song-layout { display: grid; gap: 16px; margin-top: 8px; }
.song-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.song-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.song-fields { display: grid; gap: 8px 12px; grid-template-columns: 1fr; width: 100%; }
.song-fields .field { width: 100%; }
.song-danger { margin: 20px 0 0; }
.file-row { display: grid; gap: 4px; padding: 10px 0; }
@media (min-width: 900px) { .song-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; } .song-fields { grid-template-columns: 1fr 1fr; } }
.bulk-add { border: 2px dashed var(--rule); border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; background: color-mix(in srgb, var(--action) 4%, var(--paper)); transition: background-color .15s, border-color .15s; }
.bulk-add.is-over { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--paper)); }
.bulk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bulk-head > .ico { width: 30px; height: 30px; color: var(--action); flex: none; }
.bulk-head h2 { margin: 0; font-size: 1.1rem; }
.bulk-head .hint { margin: 2px 0 0; max-width: 40rem; }
.bulk-head > div { flex: 1 1 16rem; min-width: 0; }
.bulk-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 10px; }
.bulk-row.is-done { border-color: color-mix(in srgb, var(--season) 50%, var(--hairline)); }
.bulk-title { display: grid; gap: 2px; min-width: 0; }
.bulk-file { margin: 0; overflow-wrap: anywhere; }
.bulk-status { grid-column: 1; font-size: 0.85rem; }
.bulk-row .btn-glyph { grid-column: 2; grid-row: 1; }
.bulk-status .ico { width: 1em; height: 1em; color: var(--season-text, var(--season)); }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Settings: accent, seasons, links, logo; brand logo; home links */
.accent-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.accent-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; font-size: 0.9rem; }
.accent-opt:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 8%, var(--paper)); font-weight: 700; }
.accent-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--action); }
.accent-swatch { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.season-table { display: grid; gap: 8px; }
.season-row { display: grid; gap: 2px 12px; grid-template-columns: 1fr; align-items: center; }
.season-row .hint { margin: 0; }
@media (min-width: 760px) { .season-row { grid-template-columns: 9rem 12rem minmax(0, 1fr); } .season-row .field-label { margin: 0; } }
.link-row { display: grid; gap: 6px 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .link-row { grid-template-columns: 1fr 1.6fr; } }
.logo-preview { margin: 0 0 8px; } .logo-preview img { max-width: 100%; height: 48px; width: auto; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); padding: 4px; }
.brand-logo { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.home-links h2 { font-size: 1rem; margin: 0 0 6px; }
.home-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 0.92rem; color: var(--action); text-decoration: none; }
.home-links a:hover span { text-decoration: underline; }
.home-links .ico { width: 18px; height: 18px; }
.settings-form .save-bar { position: sticky; bottom: 0; background: var(--paper); }

/* Notify: saved messages */
.saved-messages ul { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.saved-messages li { display: inline-flex; gap: 4px; }
.save-message { margin-top: 12px; width: 100%; }

/* Song search inside "Add an item"; services a song is used in */
.song-search { margin: 6px 0 0; max-width: 40rem; }
.song-search-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 4px; }
.song-search-head .field-label { margin: 0; }
.song-type { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; }
.song-type .field { min-height: 38px; width: auto; }
.song-hit { position: relative; }
.song-hit-add { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--action); font-size: 0.85rem; }
.song-hit-add .ico { width: 1em; height: 1em; }
.used-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.used-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; border-bottom: 1px solid var(--hairline); }
.used-list a { font-weight: 700; }
.add-to-service { max-width: none; }

/* Church-year palette */
.palette-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.palette-row { display: flex; align-items: center; gap: 8px; }
.palette-row .field { flex: 1; min-width: 0; }
.color-swatch { width: 52px; height: 44px; padding: 2px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); cursor: pointer; flex: none; }

/* List controls: label above field, aligned on one row; A to Z bar; pager; song rows */
.list-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0 0 12px; }
.list-control { display: flex; flex-direction: column; gap: 4px; min-width: 12rem; }
.list-control-grow { flex: 1 1 16rem; }
.list-control .field { width: 100%; margin: 0; max-width: none; }
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; font-family: var(--font-ui); }
.az-btn { min-width: 36px; min-height: 36px; padding: 0 8px; border: 1px solid var(--hairline); border-radius: var(--radius-control); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.az-btn[aria-pressed='true'] { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.az-btn:disabled { color: var(--ink-soft); opacity: 0.45; cursor: default; }
.az-all { padding: 0 12px; }
a.az-btn, span.az-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.az-btn:hover { border-color: var(--action); }
.az-btn[aria-current='true'] { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.az-btn[aria-disabled='true'] { color: var(--ink-soft); opacity: 0.4; background: transparent; cursor: default; }
.song-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.song-actions .btn .ico { width: 18px; height: 18px; margin: 0 6px 0 0; }
.file-btn { cursor: pointer; position: relative; }
.file-btn:focus-within { outline: 3px solid var(--action); outline-offset: 2px; }
.list-controls { align-items: center; margin: 0 0 14px; }
.pager { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: center; margin: 20px 0 0; font-family: var(--font-ui); }
.song-table { list-style: none; margin: 0; padding: 0; }
.song-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 14px 4px; border-bottom: 1px solid var(--hairline); font-family: var(--font-ui); }
.song-row:hover { background: color-mix(in srgb, var(--action) 5%, transparent); }
.song-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 18rem; }
.song-main .singer-link { min-height: 0; justify-self: start; font-size: 1.1rem; }
.song-by { color: var(--ink-soft); font-size: 0.9rem; }
.song-facts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fact { padding: 3px 11px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 12%, var(--paper)); white-space: nowrap; }
.fact-date { color: var(--action); background: color-mix(in srgb, var(--action) 14%, var(--paper)); }
.fact-warn { color: var(--ink); background: color-mix(in srgb, #e0a030 28%, var(--paper)); }
.drop-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border: 2px dashed var(--rule); border-radius: 14px; color: var(--ink-soft); font-family: var(--font-ui); font-size: 0.9rem; transition: background-color .15s, border-color .15s; }
.drop-strip p { margin: 0; } .drop-strip strong { color: var(--ink); }
.drop-strip .ico { width: 24px; height: 24px; flex: none; color: var(--action); }
.drop-strip.is-over { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--paper)); color: var(--ink); }
.song-next { font-weight: 700; }

/* Services overview: one card per service, date at the left, what is still needed in the middle, one action at the right */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.svc-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 14px; background: var(--paper); border: 1px solid var(--hairline); border-left: 5px solid var(--season-line, var(--action)); border-radius: var(--radius-control); font-family: var(--font-ui); }
.svc-empty { border-left-color: var(--hairline); background: transparent; border-style: dashed; border-left-style: dashed; }
.svc-date { display: flex; flex-direction: column; line-height: 1.2; }
.svc-weekday { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; }
.svc-day { font-size: 1.1rem; font-weight: 700; }
.svc-body { min-width: 0; }
.svc-body p { margin: 0 0 2px; }
.svc-name { font-weight: 700; }
.svc-sub { color: var(--ink-soft); font-size: 0.9rem; }
.svc-progress { margin: 4px 0 !important; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1px solid transparent; }
.chip-ok { background: var(--rehearsal-bg); color: var(--rehearsal-ink); }
.chip-ok::before { content: '\2713'; }
.chip-miss { background: var(--service-bg); color: var(--service-ink); }
.chip-miss::before { content: '!'; font-weight: 900; }
@media (max-width: 560px) { .svc-card { grid-template-columns: 4.5rem minmax(0, 1fr); } .svc-action { grid-column: 1 / -1; } }

/* Order-of-service editor v2: each item is its own card, with a status you can see at a glance */
.items { gap: 14px; }
.item { border: 1px solid var(--hairline); border-left-width: 6px; border-radius: var(--radius-control); background: var(--paper); padding: 8px 14px 16px; box-shadow: var(--shadow); }
.item-missing { border-left-color: var(--service-ico); }
.item-ready { border-left-color: var(--rehearsal-ico); }
.item-not_choir { border-left-color: var(--hairline); background: var(--surface); }
.item-legend { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.item-num-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.9rem; }
.chip-off { background: var(--off-bg); color: var(--off-ink); }
.item-flags { display: flex; flex-wrap: wrap; gap: 0 24px; }
.item-more { border-top: 1px solid var(--hairline); padding-top: 8px; }
.item-more > summary { cursor: pointer; font-family: var(--font-ui); font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.item-more[open] > summary { margin-bottom: 8px; }
.item-more > :not(summary) { margin-bottom: 12px; }
.item-files { width: 100%; justify-items: stretch; border-radius: var(--radius-control); }
.item-files.is-over .drop-zone, .drop-zone.is-over { border-color: var(--action); background: var(--surface); }
.drop-zone { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 2px dashed var(--rule); border-radius: var(--radius-control); font-family: var(--font-ui); font-weight: 700; color: var(--action); cursor: pointer; text-align: center; }
.drop-zone:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop-zone-big { min-height: 84px; }
.bulk { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-control); padding: 12px 14px 16px; margin: 0 0 16px; display: grid; gap: 10px; }
.bulk h3 { margin: 0; font-family: var(--font-ui); font-size: 1.05rem; }
.bulk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bulk-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.bulk-row .file-name { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.bulk-row .field { flex: 1 1 14rem; width: auto; }
.bulk-row .field-error { flex-basis: 100%; margin: 0; }
.checklist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-ui); }
.checklist a { text-decoration: none; }
.checklist .chip { border-color: transparent; }

/* Singer Music page */
.music-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.music-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-control); font-family: var(--font-ui); }
.music-main { min-width: 0; flex: 1 1 18rem; }
.music-main p { margin: 0; }
.music-name { font-weight: 700; overflow-wrap: anywhere; }
.music-meta { color: var(--ink-soft); font-size: 0.9rem; }
.music-filters { margin: 0 0 16px; }
@media (max-width: 640px) { .az-btn { min-width: 44px; min-height: 44px; } }
.checklist a.chip { min-height: 44px; padding: 0 14px; font-size: 0.9rem; }
.suggest { display: grid; gap: 12px; margin: 8px 0; padding: 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-control); max-width: 36rem; }
.suggest-head { margin: 0 0 6px; font-family: var(--font-ui); font-weight: 700; }
.starter { display: grid; gap: 8px; justify-items: start; margin: 0 0 16px; }

/* Portrait: photo or initials, ringed in the voice family's colour */
.portrait { --fam: var(--ink-soft); --fam-ink: var(--ink); --fam-tint: color-mix(in srgb, var(--fam) 14%, var(--paper)); display: inline-flex; flex: none; border-radius: 26%; padding: 3px; background: var(--paper); box-shadow: 0 0 0 2px var(--fam), var(--shadow); overflow: hidden; }
.portrait-img { width: 100%; height: 100%; border-radius: 22%; object-fit: cover; display: block; }
.portrait-initials { width: 100%; height: 100%; border-radius: 22%; display: inline-flex; align-items: center; justify-content: center; background: var(--fam-tint); color: var(--fam-ink); font-family: var(--font-ui); font-weight: 800; font-style: normal; letter-spacing: 0.03em; }
.fam-soprano { --fam: #b4506a; --fam-ink: #8f2f4c; }
.fam-alto { --fam: #b7791f; --fam-ink: #7a4f05; }
.fam-tenor { --fam: #2a8a7a; --fam-ink: #17695c; }
.fam-bass { --fam: #4a5aa8; --fam-ink: #35428a; }
:root[data-theme='dark'] .fam-soprano { --fam: #e58aa5; --fam-ink: #f5b8cb; }
:root[data-theme='dark'] .fam-alto { --fam: #dba94a; --fam-ink: #f0cf8a; }
:root[data-theme='dark'] .fam-tenor { --fam: #5fc4b0; --fam-ink: #9be0d1; }
:root[data-theme='dark'] .fam-bass { --fam: #8f9de6; --fam-ink: #b9c3f5; }
.me-who { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.me-name { font-family: var(--font-text); font-size: 1.4rem; font-weight: 700; margin: 0; }
.me-sub { margin: 2px 0 0; color: var(--ink-soft); font-family: var(--font-ui); }

/* Shared controls: pill search and glyph groups */
.search-field { position: relative; flex: 1 1 14rem; min-width: 0; }
.search-field > .ico { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; color: var(--ink-soft); pointer-events: none; }
.search-input { width: 100%; min-height: 48px; padding: 0 14px 0 44px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 1rem; }
.search-input::placeholder { color: var(--ink-soft); opacity: 0.85; }
.glyph-group { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); flex: none; }
.glyph-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.glyph-btn .ico { width: 24px; height: 24px; margin: 0; }
.glyph-btn:hover { background: color-mix(in srgb, var(--action) 8%, transparent); color: var(--ink); }
.glyph-btn[aria-pressed='true'], .glyph-btn[aria-current='page'] { background: var(--action); color: var(--action-ink); }
.glyph-btn { position: relative; text-decoration: none; }
.glyph-badge { position: absolute; right: 2px; top: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: var(--paper); font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; }
.glyph-btn[aria-pressed='true'] .glyph-badge, .glyph-btn[aria-current='page'] .glyph-badge { background: var(--action-ink); color: var(--action); }
.glyph-group { align-items: center; }

/* Site standards: one page title, one card */
:root { --card-radius: 20px; }
.sheet > h1, .shell-admin .sheet > h1 { font-family: var(--font-text); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; line-height: 1.2; }
.me-card, .svc-card, .music-row, .item, .bulk, .suggest { border-radius: var(--card-radius); }
.me-card, .svc-card, .music-row { box-shadow: var(--shadow); }
.dir-entry { border-radius: var(--card-radius); }
.toolbar-end { justify-content: flex-end; }

/* Drop-down fields: our own arrow, set well in from the edge (the browser's sits right against it) */
select.field, select.field-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5270' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
}
:root[data-theme='dark'] select.field, :root[data-theme='dark'] select.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c0d4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.sched-month { margin: 0 0 8px; }
.sched-month-h { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; font-size: 1.3rem; color: var(--action); font-style: italic; }
.sched-month-h::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* Site standards, continued: every grouped box (absence months, notices, warnings, settings groups) shares the card shape */
.absent-month, .settings-card, .danger, .accent-opt, .absent-opt { border-radius: var(--card-radius); }
.absent-opt, .accent-opt { border-radius: 14px; }
.notice { border-radius: 14px; }
.absent-month { box-shadow: var(--shadow); background: var(--paper); }
.settings-card { box-shadow: var(--shadow); background: var(--paper); }

/* Quick links, group headings and section tags: shared by the Directory and Admin > Singers */
/* Quick links: stay under the top bar while scrolling, so any letter or section is one tap away */
.dir-jump { position: sticky; top: 60px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 8px 0; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.dir-jump-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; color: var(--action); font-family: var(--font-ui); font-weight: 700; text-decoration: none; background: color-mix(in srgb, var(--action) 9%, var(--paper)); }
.dir-jump-link:hover { background: color-mix(in srgb, var(--action) 18%, var(--paper)); }
.dir-heading { scroll-margin-top: 130px; }
@media (max-width: 480px) { .dir-jump { top: 56px; } .dir-jump-link { min-width: 40px; padding: 0 6px; } }
.dir-heading { line-height: 1; display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; font-family: var(--font-text); font-weight: 700; color: var(--ink); border: 0; padding: 0; }
.dir-letter-row { grid-column: 1 / -1; list-style: none; }
.dir-letter { font-size: 1.7rem; font-family: var(--font-ui); font-style: normal; font-weight: 800; color: var(--action); }
.dir-letter::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.dir-section:not([class*='fam-']) .dir-heading:not(.dir-letter) { font-size: 1.4rem; }
.dir-heading:not(.dir-letter) { font-size: 1.4rem; }
.dir-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--fam, var(--rule)); flex: none; }
.dir-n { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; color: var(--fam-ink, var(--ink-soft)); background: color-mix(in srgb, var(--fam, var(--ink-soft)) 14%, var(--paper)); border-radius: 999px; padding: 1px 10px; }
.dir-chip { padding: 1px 10px; border-radius: 999px; font-weight: 700; color: var(--fam-ink, var(--ink)); background: color-mix(in srgb, var(--fam, var(--ink-soft)) 14%, var(--paper)); }
.dir-chip { display: inline-block; }
.sg-letter-row { list-style: none; border-bottom: 0; }
.singer-flat .sg-letter-row .dir-heading { margin: 14px 0 4px; }
.singer-row .dir-chip { font-size: 0.8rem; }

/* Fields: breathing room on all four sides (the earlier rule only had left and right, so text boxes and menus looked cramped) */
.field { padding: 10px 14px; line-height: 1.4; }
textarea.field, .field-area { padding: 12px 14px; line-height: 1.5; min-height: 6.5rem; }
select.field { padding: 10px 44px 10px 14px; }
input.field[type='date'], input.field[type='time'] { padding-top: 8px; padding-bottom: 8px; }
.bulk-lead { margin: 0; font-family: var(--font-text); font-weight: 700; font-size: 1.1rem; }
.bulk-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.bulk-folder .field { width: auto; min-width: 14rem; }

/* My account: every card spaces its contents the same way (a steady gap, no one-off margins) */
.me-grid { gap: 20px; margin-top: 4px; }
.me-col { gap: 20px; }
.me-card.me-card { display: grid; gap: 14px; align-content: start; padding: 22px 24px; background: var(--paper); }
.me-card.me-card > * { margin: 0; }
.me-card .me-dl { gap: 10px 16px; grid-template-columns: 6.5rem minmax(0, 1fr); }
.me-card .me-abs li { padding: 10px 0; }
.me-card .cal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.me-card .hint { color: var(--ink-soft); }
.me-who { margin: 0 0 20px; }
.dir-addr-line { display: block; }

/* Admin Settings: every group is the same card, the same width, the same gaps, with its title inside it */
.settings-form { gap: 16px; }
.settings-card.settings-card, .settings-logo.settings-logo { max-width: 46rem; margin: 0; padding: 20px 22px 22px; gap: 6px; }
.settings-logo.settings-logo { margin-bottom: 16px; }
.settings-card legend, .settings-logo > h2 { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-family: var(--font-text); font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.settings-card legend + *, .settings-logo > h2 + * { clear: both; }
.settings-card > .field-label { margin-top: 12px; }
.settings-card > .hint, .settings-logo > .hint { margin: 0 0 2px; }
.settings-card h3 { margin: 18px 0 2px; font-size: 1.05rem; }

/* Expandable sections: a chevron at the start says "there is more under here"; it turns down when open */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-ui); font-weight: 700; color: var(--action); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ''; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition: none; } }
.settings-logo.settings-logo > h2 { float: none; margin: 0; align-self: start; }
.settings-logo.settings-logo { align-content: start; }
.me-card.me-card p { font-size: 0.95rem; line-height: 1.5; }
.me-card.me-card .hint { font-size: 0.88rem; }

/* A count sits beside its glyph, never on top of it */
.glyph-btn.has-badge { width: auto; min-width: 44px; padding: 0 12px 0 10px; gap: 7px; }
.glyph-btn.has-badge .glyph-badge { position: static; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: 0.95rem; line-height: 1; }
.glyph-btn[aria-pressed='true'].has-badge .glyph-badge, .glyph-btn[aria-current='page'].has-badge .glyph-badge { background: none; color: inherit; }
.topbar .nav-link, .brand { white-space: nowrap; }

/* Schedule on phones: keep the month grid but make it tight, and print a short label (time, "Off", "Service") in each day. */
.cal-chip-short { display: none; }
@media (max-width: 639px) {
  .cal-grid { border-spacing: 1px; }
  .cal-grid td { height: 3.3rem; border-radius: 6px; }
  .cal-day { align-items: stretch; gap: 1px; padding: 2px 1px; min-height: 3.3rem; }
  .cal-num { align-self: center; min-width: 1.3rem; height: 1.3rem; font-size: 0.78rem; }
  .cal-chip { padding: 1px 2px; gap: 2px; font-size: 0.64rem; justify-content: center; border-radius: 4px; }
  .cal-chip .ico { display: none; }
  .cal-chip-text { display: none; }
  .cal-chip-short { display: block; overflow: hidden; text-overflow: clip; white-space: nowrap; }
  .cal-key .cal-chip .ico { display: inline-block; }
  .cal-detail { margin-top: 12px; padding-top: 8px; }
  .cal-detail h3 { font-size: 1.05rem; margin-bottom: 6px; }
  .cal-events { gap: 0; }
  .cal-event { padding: 8px 0 8px 10px; border-radius: 0; border-left: 4px solid currentColor; background: none !important; border-bottom: 1px solid var(--hairline); }
  .cal-event-ico { width: 26px; height: 26px; }
  .cal-event-ico .ico { width: 16px; height: 16px; }
}

/* Schedule on phones, tighter: the tapped day's details stay pinned to the bottom of the screen so there is no scrolling to read them. */
@media (max-width: 639px) {
  .cal-head { margin: 0 0 4px; gap: 4px; }
  .cal-head h2 { font-size: 1.15rem; }
  .cal-nav { gap: 6px; }
  .cal-nav .btn { min-height: 44px; padding: 0 12px; }
  .cal-grid th { padding: 2px 0; font-size: 0.7rem; }
  .cal-grid td { height: 2.9rem; }
  .cal-day { min-height: 2.9rem; }
  .cal-key { margin: 6px 0 0; gap: 4px 12px; font-size: 0.75rem; }
  .cal-detail { position: sticky; bottom: 0; z-index: 5; max-height: 38vh; overflow-y: auto; margin: 8px -8px 0; padding: 8px 12px 10px; background: var(--paper); border-top: 2px solid var(--action); box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.12); }
  .cal-detail h3 { font-size: 1rem; margin: 0 0 4px; }
  .cal-event { padding: 6px 0 6px 10px; }
  .cal-event-body p { margin: 0 0 2px; }
}

/* Schedule on phones: the two actions share one row (equal halves) instead of stacking as separate wide pills. */
@media (max-width: 639px) {
  .cal-event-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 6px; margin-top: 6px !important; }
  .cal-event-actions .back-link { justify-content: center; text-align: center; padding: 0 8px; line-height: 1.15; font-size: 0.85rem; }
}

/* Schedule on phones, redesigned: "Next up" first, then a month strip of dots; a tapped day opens inline under its week. */
.nextup, .cal-dots, .cal-week-detail { display: none; }
@media (max-width: 639px) {
  .nextup { display: block; margin: 0 0 14px; }
  .nextup h2 { font-size: 1.15rem; margin: 0 0 4px; }
  .nextup-list { list-style: none; margin: 0; padding: 0; }
  .nextup-row { background: none; padding: 8px 0 8px 10px; border-left: 4px solid currentColor; border-bottom: 1px solid var(--hairline); }
  .nextup-row p { margin: 0 0 3px; }
  .nextup-when { font-size: 0.85rem; color: var(--ink-soft); }
  .nextup-title { display: flex; gap: 8px; align-items: flex-start; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
  .nextup-title .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; }
  .nextup-row.cal-rehearsal .ico { color: var(--rehearsal-ico); }
  .nextup-row.cal-service .ico { color: var(--service-ico); }
  .nextup-row.cal-off .ico { color: var(--off-ink); }
  .nextup-row.cal-rehearsal { color: var(--rehearsal-ico); }
  .nextup-row.cal-service { color: var(--service-ico); }
  .nextup-row.cal-off { color: var(--off-ink); }
  .nextup-row > * { color: var(--ink); }
  .nextup-row .nextup-when { color: var(--ink-soft); }
  .nextup-row .cal-event-actions { margin-top: 4px !important; }

  /* The month strip: dots instead of labels, and no pinned panel. */
  .cal-day .cal-chip { display: none; }
  .cal-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .cal-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--rehearsal-ico); }
  .cal-dot.cal-service { background: var(--service-ico); }
  .cal-dot.cal-off { background: transparent; border: 2px solid var(--off-ink); }
  .cal-dot.cal-out { background: var(--ink-soft); }
  .cal-grid td { height: 2.6rem; }
  .cal-day { min-height: 2.6rem; align-items: center; justify-content: flex-start; gap: 2px; }
  .cal-detail { display: none; }
  .cal-week-detail { display: table-row; }
  .cal-week-detail td { height: auto; border-radius: 0; padding: 0; }
  .cal-inline { margin: 2px 0 6px; padding: 6px 4px 8px; border-top: 2px solid var(--action); border-bottom: 1px solid var(--hairline); background: var(--paper); }
  .cal-inline h3 { font-size: 1rem; margin: 0 0 4px; }
}

/* Home, redesigned: rehearsal first, then Sunday with the music itself, then links. Desktop puts Sunday on the left and the rest on the right. */
.home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rehearse" "main" "more"; gap: 16px; }
.home-rehearse { grid-area: rehearse; }
.home-main { grid-area: main; min-width: 0; }
.home-more { grid-area: more; display: grid; gap: 14px; align-content: start; }
.home-rehearse { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 0 10px 12px; border-left: 4px solid var(--rehearsal-ico); background: none; }
.home-rehearse .home-rehearsal { margin: 0; font-size: 1.1rem; font-weight: 700; }
.home-rehearse .home-absent { margin: 0; }
.home-rehearse .home-absent a, .home-absent-link { background: transparent; border: 1px solid var(--hairline); }
.home-side { display: none; }
.hm { margin: 14px 0 6px; }
.hm h2 { font-size: 1.15rem; margin: 0 0 4px; }
.hm-list { list-style: none; margin: 0; padding: 0; }
.hm-song { padding: 10px 0 10px 12px; border-left: 4px solid var(--season-line, var(--season)); border-bottom: 1px solid var(--hairline); font-family: var(--font-ui); }
.hm-song p { margin: 0 0 3px; }
.hm-line { font-family: var(--font-text); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.hm-type { color: var(--ink-soft); font-size: 0.9rem; }
.hm-type:empty { display: none; }
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.hm-file { flex: 1 0 100%; font-weight: 700; font-size: 0.9rem; }
.hm-tracks { margin-top: 2px !important; }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; }
.home-absent-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; color: var(--action); text-decoration: none; }
@media (min-width: 800px) {
  .home-grid { grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); grid-template-areas: "main rehearse" "main more"; align-items: start; gap: 18px 40px; }
  .home-rehearse { flex-direction: column; align-items: flex-start; background: var(--surface); border-left: 0; border-radius: 14px; padding: 14px 18px; gap: 6px; }
  .home-rehearse .home-rehearsal { font-size: 1.05rem; }
}

/* Home, tidied: one filled button (Download), everything else the same pale style; buttons in a row share the width and the same 44px height. */
.home-grid { grid-template-rows: auto 1fr; }
.hm { margin: 10px 0 4px; }
.hm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 24rem; margin-top: 8px; }
.hm-actions > .btn { width: 100%; min-height: 44px; justify-content: center; }
.hm-actions > :only-child, .hm-actions > p, .hm-file { grid-column: 1 / -1; }
.home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 28rem; margin-top: 12px; }
.home-actions > a { width: 100%; min-height: 44px; height: auto; padding: 4px 10px; justify-content: center; text-align: center; line-height: 1.15; }
.home-actions > :only-child { grid-column: 1 / -1; }
.home-absent-link { background: color-mix(in srgb, var(--action) 10%, var(--paper)); border: 0; border-radius: 10px; font-size: 0.88rem; }
.home-absent-link:hover { background: color-mix(in srgb, var(--action) 18%, var(--paper)); }
.home-rehearse .home-absent a { background: color-mix(in srgb, var(--action) 10%, var(--paper)); border: 0; border-radius: 10px; }
@media (max-width: 639px) {
  .home-status { margin-bottom: 0.4em; }
  .hm-line { font-size: 1.1rem; }
  .hm-song { padding-top: 8px; padding-bottom: 10px; }
}

/* Home on phones: the two Sunday buttons each get a full-width row so neither label wraps. */
@media (max-width: 639px) {
  .home-actions { grid-template-columns: 1fr; max-width: none; }
}

/* Home, fuller: practice track in each song row, the order of service, and a short "Coming up" list. */
.hm-track { margin-top: 8px; }
.hm-track .hm-file { margin: 0 0 2px; font-weight: 700; font-size: 0.9rem; }
.hm-track audio { width: 100%; max-width: 24rem; height: 40px; }
.hm-order-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); }
.hm-order-list li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; }
.hm-order-type { flex: 0 0 8.5rem; color: var(--ink-soft); }
.hm-order-line { min-width: 0; }
.hm-order-list .hm-choir .hm-order-line { font-weight: 700; }
.hm-order-list .hm-choir { border-left: 4px solid var(--season-line, var(--season)); padding-left: 8px; }
.home-extras { padding: 12px 0; border-top: 1px solid var(--hairline); }
.home-extras h2, .home-following h2 { font-size: 1.05rem; margin: 0 0 4px; }
.home-extras p { margin: 0 0 6px; font-size: 0.92rem; }
.home-following { margin: 0; padding-top: 10px; }
.hm-coming { list-style: none; margin: 0 0 4px; padding: 0; font-family: var(--font-ui); }
.hm-coming li { display: grid; gap: 1px; padding: 7px 0 7px 10px; border-left: 4px solid var(--rehearsal-ico); border-bottom: 1px solid var(--hairline); font-size: 0.95rem; }
.hm-coming li.hm-coming-service { border-left-color: var(--service-ico); }
.hm-coming-date { color: var(--ink-soft); font-size: 0.85rem; }
@media (max-width: 639px) { .hm-order-type { flex-basis: 6.5rem; } }

/* Home polish: with no rehearsal strip the right column starts level with the date; order-of-service rows share one left edge. */
@media (min-width: 800px) { .home-grid-solo { grid-template-areas: "main more"; grid-template-rows: auto; } }
.hm-order-list li { border-left: 4px solid transparent; padding-left: 8px; }
.hm-order-list .hm-choir { border-left-color: var(--season-line, var(--season)); }
.hm-order-type { flex-basis: 9rem; }
@media (max-width: 639px) {
  .hm-order-list li { flex-direction: column; gap: 0; }
  .hm-order-type { flex-basis: auto; font-size: 0.8rem; }
}

/* Layout polish across pages: readable labels and tags, consistent spacing, no stretched empty cards. */
.field-label { font-size: 0.92rem; }
.tag, .svc-weekday, .cal-grid th, .cal-chip { font-size: max(0.8rem, 12px); }
@media (min-width: 640px) { .cal-chip-text { font-size: 0.78rem; } }
.back-link { margin-bottom: 4px; }

/* Admin schedule: each task is its own section, forms lay out in pairs, exceptions and the preview are tidy rows. */
.adm-sec { padding: 20px 0 8px; border-top: 1px solid var(--hairline); margin: 0; }
.adm-sec h2 { font-size: 1.25rem; margin: 0 0 6px; }
.adm-sec > p { margin: 0 0 12px; max-width: 40rem; color: var(--ink-soft); }
.adm-sec .form { display: grid; grid-template-columns: 1fr; gap: 12px 16px; max-width: 40rem; margin-top: 8px; }
.adm-sec .form .btn { justify-self: start; }
.fld { display: grid; gap: 4px; align-content: start; min-width: 0; }
.fld .field { width: 100%; }
@media (min-width: 640px) { .adm-sec .form { grid-template-columns: 1fr 1fr; } .adm-sec .form > :not(.fld), .fld-wide { grid-column: 1 / -1; } }
.exc-list { list-style: none; margin: 0 0 8px; padding: 0; }
.exc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 0 10px 12px; border-left: 4px solid var(--rehearsal-ico); border-bottom: 1px solid var(--hairline); }
.exc-main { min-width: 0; flex: 1 1 16rem; }
.exc-what { margin: 0; font-weight: 700; }
.exc-why { margin: 2px 0 0; color: var(--ink-soft); }
.prev-row { display: grid; gap: 0; padding: 8px 0 8px 12px; border-left: 4px solid var(--rehearsal-ico); border-bottom: 1px solid var(--hairline); font-family: var(--font-ui); }
.prev-off { border-left-color: var(--off-ink); }
.prev-date { font-weight: 700; }
.prev-detail { color: var(--ink-soft); }
@media (min-width: 640px) { .prev-row { grid-template-columns: 17rem minmax(0, 1fr); gap: 16px; } }

/* Services cards: the date column is wide enough for "November" and "Wednesday". */
.svc-card { grid-template-columns: 6.25rem minmax(0, 1fr) auto; }
.svc-day { font-size: 1rem; }
@media (max-width: 560px) { .svc-card { grid-template-columns: 6rem minmax(0, 1fr); } }

/* Directory cards: equal height only where cards sit side by side. */
@media (max-width: 719px) { .dir-list .dir-entry { min-height: 0; height: auto; } .dir-list .dir-contact { grid-template-rows: none; grid-auto-rows: auto; } .dir-list .dir-contact > li:empty, .dir-list .dir-empty { display: none; } }


/* Admin files: one calm row per file. Name, one status switch, Download and Delete; Replace and Rename fold away. */
.file-row { gap: 6px; padding: 12px 0; }
.file-row .vis { gap: 0; }
.file-row .vis-state { font-weight: 700; }
.file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 22rem; }
.file-actions .btn { justify-content: center; min-height: 44px; }
.file-more summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--action); cursor: pointer; }
.file-more-body { display: grid; gap: 12px; padding: 4px 0 8px 12px; border-left: 3px solid var(--hairline); max-width: 34rem; }
.file-more-body .form { display: grid; gap: 8px; }

/* Safari on iPhone gives date and time inputs their own minimum width and ignores the box they sit in, which pushed forms sideways.
   Drop the native sizing and keep them inside their column. */
input.field[type='date'], input.field[type='time'], input.field[type='datetime-local'] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 44px;
}
input.field[type='date']::-webkit-date-and-time-value, input.field[type='time']::-webkit-date-and-time-value { text-align: left; min-width: 0; }
/* Very narrow phones (320px): let the name give way so the three round buttons fit. */
@media (max-width: 360px) {
  .topbar-in { gap: 4px; }
  .brand { min-width: 0; overflow: hidden; }
  .brand * { min-width: 0; }
  .bar-tools { gap: 2px; }
  .acct-btn, .theme-toggle, .menu-btn { width: 40px; }
}

/* Laravel port: the menu button swaps between two icons with CSS (the React version swapped the element). */
.menu-btn .ico-close { display: none; }
.menu-btn.is-open .ico-menu { display: none; }
.menu-btn.is-open .ico-close { display: inline; }
.acct-menu[hidden] { display: none; }

/* Drop zones: every file field is a dashed target you can drop on or tap to choose */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; width: 100%; padding: 16px; border: 2px dashed var(--rule); border-radius: 14px; background: color-mix(in srgb, var(--action) 4%, var(--paper)); color: var(--ink-soft); font-family: var(--font-ui); text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.dropzone .ico { width: 26px; height: 26px; color: var(--action); }
.dropzone .dz-prompt { color: var(--ink); overflow-wrap: anywhere; }
.dropzone:hover, .dropzone.is-over { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--paper)); }
.dropzone.has-file { border-style: solid; border-color: var(--action); }
.dropzone:focus-within { outline: 3px solid var(--focus, var(--action)); outline-offset: 2px; }

/* Song page: same look as the songs list */
.song-stats { align-items: center; gap: 8px; margin: 0 0 20px; }
.song-stats .song-by { margin-left: 6px; }
.song-layout { gap: 20px; }
.song-col { gap: 20px; }
.song-col .me-card { padding: 22px 24px; }
.song-col .me-card h2 { font-size: 1.2rem; margin-bottom: 4px; }
.song-col .me-card h3 { font-size: 1rem; margin: 10px 0 0; }
.file-list { margin: 0; }
.file-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.file-row:last-child { border-bottom: 0; }
.file-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; flex: 1 1 14rem; }
.file-name { font-weight: 700; overflow-wrap: anywhere; }
.file-row .row-actions { display: flex; gap: 8px; }
.file-row .replace-box { flex: 1 1 100%; }
.file-row .replace-box summary { cursor: pointer; font-weight: 700; color: var(--action); min-height: 36px; display: flex; align-items: center; }
.song-col .form { display: grid; gap: 10px; max-width: none; }
.song-col .form .btn { justify-self: start; }
.used-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.used-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.song-danger { margin-top: 28px; }

/* Files page rows: name, visibility, actions on one line (wrapping on phones), details underneath */
.file-row .vis { gap: 4px 14px; flex: 0 1 auto; }
.file-row .vis .check { display: inline-flex; align-items: center; gap: 10px; }
.file-row .file-actions { display: flex; gap: 8px; }
.file-row .file-more { flex: 1 1 100%; }
.files-upload { display: grid; gap: 12px; max-width: 40rem; margin: 0 0 28px; }
.files-upload .btn { justify-self: start; margin-top: 4px; }
.vp-group { margin: 0 0 32px; }
.vp-group h2 { margin: 0 0 6px; }
.vp-group > p { margin: 12px 0 0; color: var(--ink-soft); }

/* Singer page: details beside the account cards on wide screens, one column on phones and narrow windows */
.singer-layout { display: grid; gap: 20px; margin-top: 8px; }
.singer-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
.singer-col .me-card { padding: 22px 24px; }
.singer-col .me-card h2 { font-size: 1.2rem; margin-bottom: 4px; }
.singer-col .form { max-width: none; }
.singer-col .form .btn { justify-self: start; }
.singer-form { display: grid; gap: 14px 16px; grid-template-columns: 1fr; }
.singer-form .fg { min-width: 0; display: grid; gap: 6px; align-content: start; }
.singer-form .fg .field-label { margin: 0; }
.singer-form .btn { margin-top: 0; }
.address-pair { display: grid; gap: 6px 12px; grid-template-columns: 1fr; }
.address-pair > div { display: grid; gap: 6px; }
.singer-col .portrait { display: block; margin: 0 0 8px; }
@media (min-width: 640px) { .singer-form { grid-template-columns: 1fr 1fr; } .singer-form .fg-wide { grid-column: 1 / -1; } .address-pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .singer-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; } }

/* Drop-down with an "Other" text box */
.choice-field { display: grid; gap: 8px; }
.choice-field [hidden] { display: none; }

/* Fit fixes found in browser checks */
.az { gap: 4px; }
.az-btn { min-width: 34px; }
.sheet > h1 + p.hint, .sheet-wrap h1 + p.hint { margin: 0 0 18px; max-width: 46rem; }
.song-facts { flex: 0 1 auto; }
.fact { flex: none; align-self: center; }
@media (max-width: 639px) {
  .song-row { gap: 6px; }
  .song-facts { justify-content: flex-start; flex: 1 1 100%; }
  .address-row { grid-template-columns: 1fr 1fr; }
  .address-row > div:first-child { grid-column: 1 / -1; }
}

/* Admin landing: a grid of area cards */
.admin-areas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; font-family: var(--font-ui); }
@media (min-width: 640px) { .admin-areas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .admin-areas { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.admin-area { margin: 0; }
.admin-area-link { display: flex; gap: 16px; align-items: flex-start; height: 100%; padding: 22px 22px 20px; border: 1px solid var(--hairline); border-radius: var(--card-radius, 18px); background: var(--paper); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: border-color .15s, background-color .15s, transform .15s; }
.admin-area-link:hover { border-color: var(--action); background: color-mix(in srgb, var(--action) 6%, var(--paper)); }
.admin-area-link:focus-visible { outline: 3px solid var(--focus, var(--action)); outline-offset: 2px; }
.admin-area-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--rehearsal-bg, color-mix(in srgb, var(--action) 14%, var(--paper))); color: var(--rehearsal-ico, var(--action)); }
.tone-1 .admin-area-ico { background: var(--service-bg, color-mix(in srgb, var(--action) 14%, var(--paper))); color: var(--service-ico, var(--action)); }
.tone-2 .admin-area-ico { background: color-mix(in srgb, var(--season, var(--action)) 16%, var(--paper)); color: var(--season-text, var(--season, var(--action))); }
.admin-area-ico .ico { width: 28px; height: 28px; margin: 0; }
.admin-area-text { display: grid; gap: 6px; min-width: 0; align-content: start; }
.admin-area-text strong { font-size: 1.15rem; }
.admin-area-blurb { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; }
.admin-area-text .fact { justify-self: start; margin-top: 4px; }


/* ===== No thick curved edges: status is carried by tinted tiles and full, even borders ===== */
.svc-list { gap: 12px; }
.svc-card, .svc-card.svc-empty { grid-template-columns: 4.25rem minmax(0, 1fr) auto; gap: 8px 20px; padding: 14px 18px 14px 14px; border: 1px solid var(--hairline); border-left: 1px solid var(--hairline); border-radius: var(--card-radius, 16px); background: var(--paper); box-shadow: var(--shadow); transition: border-color .15s, background-color .15s; }
.svc-card:hover { border-color: color-mix(in srgb, var(--action) 55%, var(--hairline)); }
.svc-card.svc-empty { background: transparent; border-style: dashed; box-shadow: none; }
.svc-date { display: grid; place-items: center; align-content: center; width: 4.25rem; height: 4.25rem; border-radius: 14px; line-height: 1; background: var(--surface); color: var(--ink-soft); }
.svc-ok .svc-date { background: var(--rehearsal-bg); color: var(--rehearsal-ink); }
.svc-miss .svc-date { background: var(--service-bg); color: var(--service-ink); }
.svc-draft .svc-date { background: var(--surface); color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.svc-month { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.svc-day { font-size: 1.75rem; font-weight: 800; margin-top: 2px; }
.svc-name { font-size: 1.1rem; margin-bottom: 4px !important; }
.svc-name .singer-link { min-height: 0; text-decoration: none; }
.svc-name .singer-link:hover { text-decoration: underline; }
@media (max-width: 560px) { .svc-card, .svc-card.svc-empty { grid-template-columns: 4.25rem minmax(0, 1fr); } .svc-action { grid-column: 1 / -1; } .svc-action .btn { width: 100%; } }

/* Order-of-service items: even border and a soft tint say whether the item is ready */
.item, .item-missing, .item-ready, .item-not_choir { border: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.item-missing { border-color: color-mix(in srgb, var(--service-ico) 55%, var(--hairline)); background: color-mix(in srgb, var(--service-bg) 14%, var(--paper)); }
.item-ready { border-color: color-mix(in srgb, var(--rehearsal-ico) 50%, var(--hairline)); }
.item-not_choir { border-style: dashed; }

/* Notices and panels with rounded corners: a full soft border instead of a thick left edge */
.notice { border: 1px solid color-mix(in srgb, var(--season-line, var(--season)) 45%, var(--hairline)); border-left-width: 1px; border-radius: 12px; }
.out-panel { border: 1px solid color-mix(in srgb, var(--service-ico) 40%, var(--hairline)); border-left-width: 1px; border-radius: 12px; }
.announcement { border: 1px solid color-mix(in srgb, var(--service-ico) 40%, transparent); border-left-width: 1px; }
.admin-card { border-left: 1px solid var(--hairline); }


/* ===== Settings: jump list beside two columns of cards on wide screens, one column on small ones ===== */
.settings-layout { display: grid; gap: 20px; margin-top: 12px; }
.settings-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; font-family: var(--font-ui); scrollbar-width: thin; }
.settings-nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; text-decoration: none; color: var(--action); background: color-mix(in srgb, var(--action) 10%, var(--paper)); }
.settings-nav a:hover { background: color-mix(in srgb, var(--action) 20%, var(--paper)); }
.settings-nav a[aria-current='true'] { background: var(--action); color: var(--action-ink); }
.settings-main { display: grid; gap: 20px; min-width: 0; align-content: start; }
.settings-form { display: contents; }
.settings-main fieldset.settings-card { min-width: 0; min-inline-size: 0; }
.settings-main .accent-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.settings-main .season-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.settings-main .season-row > .hint { grid-column: 1 / -1; }
.settings-layout .settings-card.settings-card, .settings-layout .settings-logo.settings-logo { max-width: none; margin: 0; scroll-margin-top: 84px; }
.settings-layout .settings-logo.settings-logo { margin-bottom: 0; }
.cy-grid, .email-grid { display: grid; gap: 4px 32px; grid-template-columns: 1fr; }
.cy-col, .email-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.settings-layout .save-bar { position: sticky; bottom: 0; z-index: 3; border-radius: 14px; padding: 12px 16px; border: 1px solid var(--hairline); box-shadow: var(--shadow); }
.settings-layout .link-row { display: grid; gap: 8px 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .settings-main { grid-template-columns: 1fr 1fr; }
  .settings-main .settings-wide, .settings-main .save-bar { grid-column: 1 / -1; }
  .settings-layout .link-row { grid-template-columns: 2fr 3fr; }
  .cy-grid, .email-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .settings-layout { grid-template-columns: 13rem minmax(0, 1fr); gap: 28px; }
  .settings-nav { position: sticky; top: 84px; flex-direction: column; overflow: visible; align-self: start; gap: 2px; padding: 0; }
  .settings-nav a { border-radius: 10px; background: transparent; min-height: 42px; }
  .settings-nav a:hover { background: color-mix(in srgb, var(--action) 10%, var(--paper)); }
}

.settings-main fieldset.settings-card, .settings-main .settings-logo { align-content: start; }

/* A Sunday with no service yet opens like any other (it is set up when you open it) */
.svc-open { display: contents; }
.svc-card.svc-empty { border-style: solid; background: var(--paper); box-shadow: var(--shadow); }
.svc-name .link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--action); cursor: pointer; text-align: left; }
.svc-name .link-btn:hover { text-decoration: underline; }

.svc-month-head { list-style: none; margin: 14px 0 0; }
.svc-month-head:first-child { margin-top: 0; }
.svc-month-head h3 { margin: 0; padding: 0 0 2px 2px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 800; color: var(--ink-soft); }

/* Services: slide through the months */
.svc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; }
.svc-nav h2 { margin: 0; font-size: 1.35rem; min-width: 12rem; text-align: center; }
.svc-nav-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
.svc-jump .field { width: auto; min-height: 44px; }
.svc-span { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 12px; }
.svc-span .seg-link { border: 0; min-height: 38px; border-radius: 9px; padding: 0 14px; background: transparent; }
.svc-span .seg-link[aria-current='true'] { background: var(--action); color: var(--action-ink); }
@media (max-width: 639px) { .svc-nav h2 { order: -1; flex: 1 1 100%; text-align: left; min-width: 0; } .svc-nav-tools { margin-left: 0; flex: 1 1 100%; } }
.svc-nav h2#up-h { margin: 0; padding: 0; line-height: 1.2; align-self: center; }

/* ===== Schedule, redesigned =====
   Calendar: month title and arrows on one line, the month on the left and, beside it, the chosen day plus what is coming up.
   List: date tiles, two columns of months on wide screens. Phones keep the dot strip and "Next up". */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 8px; }
.page-head h1 { margin: 0; }
.page-head .view-switch { margin: 0; }

.cal { display: block; }
.cal-main, .cal-side { min-width: 0; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0 12px; }
.cal-head h2 { margin: 0; line-height: 1.1; font-size: 1.7rem; }
.cal-nav .btn { min-height: 44px; }
.cal-side { display: grid; gap: 22px; align-content: start; margin-top: 20px; }
.cal-side .cal-detail { position: static; margin: 0; padding: 0; border: 0; }
.cal-side .cal-detail h3 { font-size: 1.25rem; margin: 0 0 10px; }
.cal-event { border-radius: 14px; }
.cal-soon h3 { margin: 0 0 8px; font-size: 1.05rem; font-family: var(--font-ui); font-weight: 800; color: var(--ink-soft); }
.cal-soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cal-soon-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); font: inherit; font-family: var(--font-ui); color: var(--ink); text-align: left; cursor: pointer; }
.cal-soon-row:hover { border-color: var(--action); }
.cal-soon-tile { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; line-height: 1; background: var(--rehearsal-bg); color: var(--rehearsal-ink); }
.cal-soon-tile span { font-size: 0.7rem; font-weight: 700; } .cal-soon-tile strong { font-size: 1.15rem; margin-top: 1px; }
.cal-service .cal-soon-tile { background: var(--service-bg); color: var(--service-ink); }
.cal-soon-text { display: grid; min-width: 0; } .cal-soon-text strong { font-size: 0.98rem; } .cal-soon-text span { font-size: 0.85rem; color: var(--ink-soft); }

@media (min-width: 640px) {
  .cal-grid { border-spacing: 4px; }
  .cal-grid th { font-size: 0.8rem; padding: 6px 0 4px; }
  .cal-grid td { height: 6.2rem; border-radius: 12px; }
  .cal-cell { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); border: 0; }
  .cal-cell:not(.cal-empty):hover { background: color-mix(in srgb, var(--action) 10%, var(--paper)); }
  .cal-day { min-height: 6.2rem; padding: 8px; gap: 5px; }
  .cal-empty { padding: 8px 9px !important; }
  .cal-num { font-size: 0.95rem; }
  .cal-chip { font-size: 0.8rem; font-weight: 700; padding: 3px 7px; border-radius: 8px; }
  .cal-today { background: color-mix(in srgb, var(--action) 14%, var(--paper)); }
  .cal-key { margin-top: 12px; font-size: 0.85rem; }
}
@media (min-width: 1000px) {
  .cal { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: 36px; align-items: start; }
  .cal-side { margin-top: 0; position: sticky; top: 84px; padding-top: 8px; }
}
@media (max-width: 639px) { .cal-side { display: none; } }

/* List view */
.sched-through { margin: 4px 0 14px; }
.sched-months { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .sched-months { grid-template-columns: 1fr 1fr; gap: 24px; } }
.sched-month { margin: 0; padding: 18px 18px 8px; border: 1px solid var(--hairline); border-radius: var(--card-radius, 18px); background: var(--paper); box-shadow: var(--shadow); }
.sched-month-h { margin: 0 0 6px; font-family: var(--font-ui); font-style: normal; font-size: 1.2rem; font-weight: 800; color: var(--ink); border: 0; padding: 0; }
.sched .sched-row, .sched-earlier .sched .sched-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 11px 0; margin: 0; border: 0; border-top: 1px solid var(--hairline); background: transparent; }
.sched .sched-row:first-child { border-top: 0; }
.sched-row > * { grid-column: auto; }
.sched-tile { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 14px; line-height: 1; background: var(--rehearsal-bg); color: var(--rehearsal-ink); }
.sched-service .sched-tile { background: var(--service-bg); color: var(--service-ink); }
.sched-off .sched-tile { background: var(--off-bg); color: var(--off-ink); }
.sched-past .sched-tile { opacity: 0.6; }
.sched-w { font-size: 0.75rem; font-weight: 700; } .sched-d { font-size: 1.4rem; font-weight: 800; margin-top: 2px; }
.sched-body { display: grid; gap: 3px; min-width: 0; }
.sched-body p { margin: 0; }
.sched-main { font-size: 1.05rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.sched-service .sched-main { font-family: var(--font-ui); }
.sched-main a { min-height: 0; text-decoration: none; } .sched-main a:hover { text-decoration: underline; }
.sched-detail { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.sched-off .sched-main { font-weight: 600; color: var(--ink-soft); }
.sched-note { font-size: 0.88rem; color: var(--ink-soft); border: 0; padding: 0; }
.sched-absent { min-height: 40px; font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 560px) { .sched .sched-row { grid-template-columns: 3.5rem minmax(0, 1fr); } .sched-absent { grid-column: 2; justify-self: start; } .sched-month { padding: 14px 14px 6px; } }
.sched-earlier .sched { padding: 0 4px; }

/* Schedule fixes found in the browser */
.cal-side .cal-detail { grid-column: auto; grid-row: auto; }
@media (min-width: 640px) { .cal-grid .cal-chip .ico { display: none; } .cal-chip { white-space: nowrap; } .cal-chip-text { overflow: hidden; text-overflow: ellipsis; } }
@media (min-width: 1000px) {
  .sched-months { display: block; column-count: 2; column-gap: 24px; }
  .sched-month { break-inside: avoid; margin: 0 0 24px; }
}
.cal-head h2#month-h { margin: 0; }

.cal-far { margin: 0 0 8px; }
.sched-more { margin: 4px 0 20px; }

.pw-form { display: grid; gap: 12px; max-width: 26rem; }
.pw-form .fg { display: grid; gap: 6px; }
.pw-form .btn { justify-self: start; }

/* ===== Files: a gallery of tiles, and the lightbox ===== */
.gal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 8px; }
.gal-search { flex: 1 1 18rem; max-width: 26rem; }
.gal-folders { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-ui); }
.gal-folders a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; text-decoration: none; color: var(--action); background: color-mix(in srgb, var(--action) 10%, var(--paper)); }
.gal-folders a:hover { background: color-mix(in srgb, var(--action) 20%, var(--paper)); }
.gal-n { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 14%, var(--paper)); border-radius: 999px; padding: 1px 9px; }
.gal-folder { margin: 26px 0 0; scroll-margin-top: 84px; }
.gal-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.35rem; }
.gal-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.ftile { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--hairline); border-radius: var(--card-radius, 16px); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.ftile[hidden] { display: none; }
.ftile-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); cursor: pointer; overflow: hidden; }
.ftile-plain { cursor: default; }
.ftile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; transition: transform .25s ease; }
.ftile-media:hover .ftile-img { transform: scale(1.03); }
.ftile-media:focus-visible { outline: 3px solid var(--focus, var(--action)); outline-offset: -3px; }
.ftile-fallback { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-soft); }
.ftile-fallback.is-on, .ftile-plain .ftile-fallback { display: flex; }
.ftile-fallback .ico { width: 40px; height: 40px; } .ftile-fallback b { font-family: var(--font-ui); font-size: 0.9rem; }
.ftile-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; opacity: 0; transition: opacity .15s; }
.ftile-zoom .ico { width: 18px; height: 18px; margin: 0; }
.ftile-media:hover .ftile-zoom, .ftile-media:focus-visible .ftile-zoom { opacity: 1; }
@media (hover: none) { .ftile-zoom { opacity: 1; } }
.ftile-body { display: grid; gap: 8px; padding: 12px 14px 14px; align-content: start; font-family: var(--font-ui); }
.ftile-name { margin: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ftile-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ftile-actions { display: grid; gap: 8px; }
.ftile-actions .btn { width: 100%; min-height: 40px; font-size: 0.85rem; justify-content: center; }
@media (max-width: 520px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ftile-body { padding: 10px 10px 12px; } }

/* Small thumbnail in the admin file rows */
.fthumb { position: relative; flex: none; width: 52px; height: 66px; padding: 0; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); cursor: pointer; display: block; }
.fthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; display: block; }
.fthumb:hover { border-color: var(--action); }
.fthumb-fallback { position: absolute; inset: 0; display: none; place-items: center; color: var(--ink-soft); font: 700 0.7rem var(--font-ui); }
.fthumb-fallback.is-on { display: grid; }
.file-head-media { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Lightbox */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 10 18 / 0.985); color: #fff; display: none; grid-template-rows: auto minmax(0, 1fr) auto; font-family: var(--font-ui); }
.lb[open] { display: grid; }
.lb::backdrop { background: rgb(0 0 0 / 0.6); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.lb-title { display: grid; min-width: 0; } .lb-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; } .lb-title span { font-size: 0.85rem; opacity: 0.75; }
.lb-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; flex: none; }
.lb-btn:hover { background: rgb(255 255 255 / 0.22); }
.lb-btn:focus-visible, .lb .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lb-btn .ico { width: 22px; height: 22px; margin: 0; }
.lb-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 10px; min-height: 0; }
.lb-view { display: grid; grid-template-columns: minmax(0, 100%); place-items: center; height: 100%; min-height: 0; overflow: auto; }
.lb-view.is-zoom .lb-img { max-width: none; max-height: none; width: 190%; cursor: zoom-out; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); cursor: zoom-in; }
.lb-msg { margin: 0; opacity: 0.85; text-align: center; padding: 20px; }
.lb-nav[hidden] { display: none; }
.lb-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 14px 16px; }
.lb .btn-outline { background: rgb(255 255 255 / 0.14); color: #fff; }
.lb .btn-outline:hover { background: rgb(255 255 255 / 0.24); }
.lb .field-error { color: #fff; flex-basis: 100%; text-align: center; }
@media (max-width: 640px) { .lb-stage { grid-template-columns: minmax(0, 1fr); padding: 0 6px; } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgb(0 0 0 / 0.5); } .lb-prev { left: 8px; } .lb-next { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .ftile-img { transition: none; } }
.lb-prev { grid-column: 1; } .lb-view { grid-column: 2; } .lb-next { grid-column: 3; }
@media (max-width: 640px) { .lb-prev, .lb-view, .lb-next { grid-column: 1; grid-row: 1; } }

/* Thumbnails beside file actions and rows */
.scard-actions-thumb, .hm-actions { align-items: center; }
.music-row .fthumb { width: 58px; height: 74px; }
.hm-actions .fthumb, .scard-actions-thumb .fthumb { width: 46px; height: 58px; }
.item-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.item-file .fthumb { width: 40px; height: 52px; }
.portrait-btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; border-radius: inherit; overflow: hidden; cursor: zoom-in; }
.portrait-btn:focus-visible { outline: 3px solid var(--focus, var(--action)); outline-offset: 2px; }
.portrait-btn .portrait-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-foot[hidden] { display: none; }
@media print { .portrait-btn { cursor: default; } .fthumb { display: none; } }
.music-row .music-main { flex: 1 1 14rem; min-width: 0; }

/* Thumbnails: always beside the text, never above it, on phones too */
.music-row:has(.fthumb) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.music-row:has(.fthumb) .music-main { min-width: 0; }
@media (max-width: 639px) {
  .music-row:has(.fthumb) { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .music-row:has(.fthumb) .music-action { grid-column: 1 / -1; }
  .music-row:has(.fthumb) .music-action .btn { width: 100%; justify-content: center; }
  .music-row .fthumb { width: 62px; height: 80px; }
  .hm-actions:has(.fthumb), .scard-actions-thumb:has(.fthumb) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: start; }
  .hm-actions:has(.fthumb) > :not(.fthumb), .scard-actions-thumb:has(.fthumb) > :not(.fthumb) { grid-column: 2; }
  .hm-actions:has(.fthumb) > .fthumb, .scard-actions-thumb:has(.fthumb) > .fthumb { grid-row: 1 / span 4; width: 62px; height: 80px; }
  .hm-actions:has(.fthumb) .btn, .scard-actions-thumb:has(.fthumb) .btn { width: 100%; justify-content: center; }
}
.file-head-media { flex-wrap: nowrap; }
.file-head-media > div, .file-head-media > .file-name { min-width: 0; flex: 1 1 auto; }

/* Schedule actions ("See the order of service", "I can't make it") look like the site's buttons everywhere: Next up, the opened day, the side panel */
.cal-event-actions .back-link, .nextup .cal-event-actions .back-link, .nextup-row .cal-event-actions .back-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0;
  background: color-mix(in srgb, var(--action) 13%, var(--paper)); color: var(--action); font-weight: 700; font-size: 0.92rem; line-height: 1.2; text-align: center; text-decoration: none;
}
.cal-event-actions .back-link:hover, .nextup .cal-event-actions .back-link:hover { background: color-mix(in srgb, var(--action) 22%, var(--paper)); }
.nextup-row .cal-event-actions { margin-top: 8px !important; }
@media (max-width: 639px) {
  .nextup-row .cal-event-actions .back-link { padding: 0 10px; font-size: 0.9rem; }
}
@media (max-width: 639px) {
  .cal-inline .cal-event { border-left: 0; border-bottom: 0; border-radius: 12px; padding: 10px 12px; background: var(--rehearsal-bg) !important; }
  .cal-inline .cal-event.cal-service { background: var(--service-bg) !important; }
  .cal-inline .cal-event.cal-off { background: var(--off-bg) !important; }
  .cal-inline .cal-events { gap: 8px; }
}

/* Sunday page (phones): the thumbnail and its buttons fill the card evenly */
@media (max-width: 639px) {
  .scard-file:has(.scard-actions-thumb) { justify-items: stretch; }
  .scard-actions-thumb:has(.fthumb) { width: 100%; }
  .hm-actions:has(.fthumb) > .fthumb, .scard-actions-thumb:has(.fthumb) > .fthumb { grid-row: 1 / span 2; }
  .scard-file:has(.scard-actions-thumb) > .hint { margin: 2px 0 0; }
}
@media (max-width: 639px) { .scard > .scard-file:has(.scard-actions-thumb), .scard-file:has(.scard-actions-thumb) { justify-self: stretch; width: 100%; } }

/* Music rows: title, a kind pill, the Sundays it is for, and when it was added (small) */
.music-name { font-size: 1.1rem; line-height: 1.25; }
.music-main { display: grid; gap: 6px; align-content: start; }
.music-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.music-for { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.music-for .ico { flex: none; margin-top: 2px; width: 1.05em; height: 1.05em; color: var(--action); }
.music-added { color: var(--ink-soft); font-size: 0.8rem; }
@media (max-width: 639px) { .music-row .fthumb { width: 72px; height: 92px; } }

/* Music: songs without uploaded music, links, and the semester list */
.music-lists { margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--hairline); border-radius: var(--card-radius, 16px); background: var(--paper); font-family: var(--font-ui); }
.music-lists-h { margin: 0 0 10px; font-weight: 700; }
.music-lists-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.music-lists-row .btn { min-height: 44px; }
.fthumb-song { display: grid; place-items: center; cursor: default; color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--paper)); }
.fthumb-song .ico { width: 26px; height: 26px; margin: 0; }
.music-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.music-link { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--action); background: color-mix(in srgb, var(--action) 12%, var(--paper)); }
.music-link:hover { background: color-mix(in srgb, var(--action) 22%, var(--paper)); }
.music-link .ico { width: 15px; height: 15px; margin: 0; }
.music-action { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.music-action .btn .ico { width: 18px; height: 18px; margin-right: 6px; }
@media (max-width: 639px) { .music-action { justify-content: stretch; } .music-action .btn { flex: 1 1 100%; } .music-song .fthumb-song { width: 62px; height: 80px; } }

.music-lists-row { margin: 0 0 8px; }
.music-lists-name { font-weight: 800; min-width: 6.5rem; }
@media (max-width: 639px) {
  .music-lists-row { margin: 0 0 12px; }
  .music-lists-name { flex: 1 1 100%; }
  .music-lists-row > .btn, .music-lists-row > button.btn, .music-lists-row > a.btn { flex: 1 1 0; justify-content: center; }
}

.music-action .hint { margin: 0; padding: 0 4px; }
@media (max-width: 639px) { .music-action .hint { text-align: left; } .music-song .music-main { gap: 4px; } }

/* Directory and Admin > Singers: letter headings and list spacing */
.dir-heading { margin: 0 0 12px; }
.directory .dir-section { margin: 0 0 24px; }
.directory .dir-section:first-of-type, .dir-count + .dir-section { margin-top: 18px; }
.dir-count { margin: 0 0 6px; }
.singer-flat .sg-letter-row .dir-heading { margin: 22px 0 6px; }
.singer-flat .sg-letter-row:first-child .dir-heading { margin-top: 12px; }
@media (min-width: 900px) {
  .singer-flat { column-count: 2; column-gap: 48px; }
  .singer-flat > li { break-inside: avoid; }
  .singer-flat .sg-letter-row { break-after: avoid; }
}
@media (min-width: 1200px) { .singer-flat { column-count: 3; column-gap: 40px; } }
@media (max-width: 639px) {
  .singer-toolbar > :first-child { flex: 1 1 100%; }
  .singer-toolbar .toolbar-actions { margin-left: auto; }
}
.dir-heading { margin: 0 0 6px; }
.directory .dir-section { margin: 0 0 32px; }
.directory .dir-section:first-of-type, .dir-count + .dir-section { margin-top: 20px; }
.directory .dir-count { margin: 0 0 18px; }

/* A to Z strip: the letter you are on is marked */
.dir-jump-link.is-here { background: var(--action); color: var(--action-ink); }

/* Phones: the letters are one swipeable row pinned under the top bar, not a grid that fills a third of the screen */
@media (max-width: 639px) {
  .dir-jump { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; margin: 0 -4px 6px; padding: 6px 4px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  .dir-jump::-webkit-scrollbar { display: none; }
  .dir-jump-link { flex: none; scroll-snap-align: start; min-width: 44px; min-height: 44px; }
  .dir-heading { scroll-margin-top: 124px; }
  .dir-tools { gap: 8px; }
  .dir-actions { margin-left: 0; }
}
@media (max-width: 639px) { .dir-jump { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Directory toolbar on phones: search on one row, then sort, name order and (for admins) the exports on a single row; Print is hidden (printing from a phone is rare) */
@media (max-width: 639px) {
  .dir-tools { gap: 8px; }
  .dir-tools .dir-search { flex: 1 1 100%; }
  .dir-actions [data-print] { display: none; }
  .dir-actions:not(:has(a)) { display: none; }
  .dir-actions { margin-left: auto; }
}

/* Church-year colors: pick a color per season (and optional special days), with a dot showing the color */
.cy-toggle { margin: 4px 0 8px; }
.settings-main fieldset:has(.cy-toggle input:not(:checked)) .cy-body { opacity: 0.45; }
.cy-body h3 { margin: 18px 0 2px; }
.palette-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 10px; }
.palette-row { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); }
.color-swatch { flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.palette-row .field { flex: 1; min-width: 0; border-width: 1px; }
.cy-list { display: grid; margin: 6px 0 0; }
.cy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: 6px 14px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--hairline); }
.cy-row:last-child { border-bottom: 0; }
.cy-what { display: grid; gap: 2px; min-width: 0; }
.cy-what > label:not(.check) { font-weight: 700; font-size: 1.02rem; }
.cy-what .hint { margin: 0; font-size: 0.85rem; }
.cy-pick { display: flex; align-items: center; gap: 10px; }
.cy-pick .field { flex: 1; min-width: 0; }
.cy-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule); }
.cy-dot.is-none { background-image: linear-gradient(135deg, transparent 45%, var(--ink-soft) 46%, var(--ink-soft) 54%, transparent 55%); }
.cy-row:has(input[type='checkbox']:not(:checked)) .cy-pick { opacity: 0.5; }
@media (max-width: 520px) { .cy-row { grid-template-columns: 1fr; } }

/* Absence page: events the choir is not part of are shown, greyed out, with the reason */
.absent-opt.is-off { background: transparent; border-style: dashed; cursor: not-allowed; opacity: 0.6; }
.absent-opt.is-off .absent-opt-date { font-weight: 600; color: var(--ink-soft); }
.absent-opt.is-off input { opacity: 0.4; }
.absent-opt.is-off .absent-opt-what { color: var(--ink-soft); }

/* Communion / Handbells pills */
.svc-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.svc-flags-field { display: flex; flex-wrap: wrap; gap: 4px 24px; border: 0; padding: 0; margin: 8px 0; }
.svc-flags-field legend { width: 100%; }

/* Calendar: music in a day's details, and the small 🍷 🔔 marks on a day */
.cal-music { margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.cal-music-h { margin: 0 0 6px !important; font-weight: 800; font-size: 0.85rem; opacity: 0.85; }
.cal-music ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-song { display: block; } .cal-by { font-size: 0.88rem; opacity: 0.8; margin-left: 4px; }
.cal-music .music-links { margin-top: 4px !important; }
.cal-music .music-link { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.cal-marks { display: none; }
@media (max-width: 639px) { .cal-marks { display: block; font-size: 0.62rem; line-height: 1; letter-spacing: 0; } }
.cal-music .music-link { color: var(--action); }

.music-lists-layout { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--font-ui); font-weight: 700; }
.music-lists-layout .field { width: auto; min-height: 40px; }

/* Semester list: two small PDF chips side by side */
.sem-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; font-family: var(--font-ui); }
.sem-chips-h { font-weight: 700; color: var(--ink-soft); font-size: 0.9rem; }
.sem-chip { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 6px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); }
.sem-pdf { position: relative; display: grid; place-items: center; width: 38px; height: 44px; border-radius: 8px; background: color-mix(in srgb, #c0392b 12%, var(--paper)); color: #b03a2e; }
.sem-pdf .ico { width: 22px; height: 22px; margin: 0 0 8px; }
.sem-pdf b { position: absolute; bottom: 4px; font-size: 0.55rem; letter-spacing: 0.04em; }
.sem-chip-name { font-weight: 800; padding: 0 4px; }
.sem-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--action) 12%, var(--paper)); color: var(--action); cursor: pointer; text-decoration: none; }
.sem-btn:hover { background: color-mix(in srgb, var(--action) 22%, var(--paper)); }
.sem-btn .ico { width: 22px; height: 22px; margin: 0; }
.sem-btn[aria-disabled='true'] { opacity: 0.5; }

.admin-edit { margin: 0 0 8px; }
.admin-edit .btn .ico { width: 18px; height: 18px; margin-right: 6px; }
.cal-event-actions .inline-form { display: contents; }
.cal-event-actions button.back-link { border: 0; cursor: pointer; font: inherit; }

.admin-edit .btn-glyph .ico { margin: 0; width: 20px; height: 20px; }
.cal-event-actions .edit-glyph { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; }
.cal-event-actions .edit-glyph .ico { width: 20px; height: 20px; margin: 0; }
@media (max-width: 639px) { .cal-event-actions .inline-form { display: contents; } .cal-event-actions { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)) !important; } .cal-event-actions .edit-glyph { grid-column: auto; } }

/* Pencil beside the title */
.edit-inline { display: inline-grid; place-items: center; vertical-align: middle; width: 34px; height: 34px; margin-left: 8px; padding: 0; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--action) 12%, var(--paper)); color: var(--action); cursor: pointer; text-decoration: none; }
.edit-inline:hover { background: color-mix(in srgb, var(--action) 22%, var(--paper)); }
.edit-inline .ico { width: 18px; height: 18px; margin: 0; }
form.edit-form { display: inline; }

/* Home: the pencil sits at the right of the date line, never on a row of its own */
.home-main { position: relative; }
.home-main .home-date { padding-right: 44px; }
.home-main .home-date .edit-inline { position: absolute; right: 0; top: 4px; margin: 0; }

/* Day details: the buttons share one balanced row (equal widths), wrapping only when there is no room */
.cal-event-actions { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 8px; align-items: stretch; }
.cal-event-actions .back-link { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 10px; line-height: 1.2; margin: 0; }

.sched-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) { .sched .sched-row .sched-actions { grid-column: 2; justify-content: flex-start; } }
.sched-actions:empty { display: none; }

.cal-event-actions .back-link .ico { width: 18px; height: 18px; margin: 0 6px 0 0; flex: none; }
.cal-event-actions { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.sched-absent .ico { width: 18px; height: 18px; margin: 0 6px 0 0; }
.settings-nav a[aria-current='true'], .settings-nav a[aria-current='true']:hover { background: var(--action); color: var(--action-ink); }

.page-actions .back-link .ico, .home-absent a .ico, .home-absent-link .ico { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -0.2em; }
.home-absent-link { display: inline-flex; align-items: center; }

/* Home "What we're singing": thumbnail, then the two buttons side by side on larger screens */
@media (min-width: 640px) {
  .hm-actions:has(.fthumb) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); max-width: 30rem; align-items: center; gap: 10px; }
  .hm-actions:has(.fthumb) > .fthumb { grid-row: auto; width: 52px; height: 66px; }
  .hm-actions:has(.fthumb) > :not(.fthumb) { grid-column: auto; }
  .hm-actions:has(.fthumb) > .hm-file, .hm-actions:has(.fthumb) > p, .hm-actions:has(.fthumb) > .tag { grid-column: 1 / -1; }
}

/* Buttons on the tinted (yellow / blue / grey) day cards: solid white with a clear border and dark text, so they read on any tint */
.cal-event .cal-event-actions .back-link, .nextup-row .cal-event-actions .back-link, .cal-event .edit-inline {
  background: var(--paper); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 38%, transparent); box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
}
.cal-event .cal-event-actions .back-link:hover, .nextup-row .cal-event-actions .back-link:hover, .cal-event .edit-inline:hover { background: color-mix(in srgb, var(--action) 12%, var(--paper)); border-color: var(--action); }
.cal-event .cal-event-actions .back-link .ico, .nextup-row .cal-event-actions .back-link .ico, .cal-event .edit-inline .ico { color: var(--action); }
.cal-event .music-link { background: var(--paper); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.cal-event .music-link .ico { color: var(--action); }

/* Date tiles (weekday above the day number): the two sit close together, centered in the tile */
.sched-tile, .cal-soon-tile, .svc-date, .sem-tile { align-content: center; justify-items: center; row-gap: 0; gap: 0; }
.sched-tile > *, .cal-soon-tile > *, .svc-date > * { margin: 0; line-height: 1; }
.sched-w, .cal-soon-tile > span, .svc-month { margin-bottom: 1px; }
.sched-d, .cal-soon-tile > strong, .svc-day { margin-top: 0; }