/* Ministering interview signup. Quiet and plain — this is a quorum errand, not
   a product. Mobile first; most people will open it from a text message. */

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1b2430;
  --ink-soft: #5d6a7a;
  --line: #dde3ea;
  --accent: #1f3a5f;
  --accent-ink: #ffffff;
  --accent-soft: #eaf0f7;
  --ok: #2c6e49;
  --ok-soft: #e8f3ec;
  --shadow: 0 1px 2px rgba(20,32,48,.05), 0 8px 24px rgba(20,32,48,.07);
}

  :root[data-theme="dark"] {
    --bg: #11151b; --panel: #1a2029; --ink: #e9eef4; --ink-soft: #9aa7b6;
    --line: #2b3541; --accent: #7aa7d9; --accent-ink: #0f1319;
    --accent-soft: #1d2836; --ok: #79c69a; --ok-soft: #17291f;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  }


* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 0 18px 64px; }

header.hero {
  background: var(--accent); color: var(--accent-ink);
  padding: 30px 18px 26px; text-align: center;
}
header.hero h1 { margin: 0; font-size: clamp(23px, 6vw, 30px); letter-spacing: -.015em; }
header.hero .sub { margin: 8px 0 0; font-size: 14px; opacity: .88; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; margin-top: 18px; box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 8px; font-size: 18px; }
.lead { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; }
.lead:last-child { margin-bottom: 0; }
.lead strong { color: var(--ink); }

label { display: block; font-weight: 700; font-size: 15px; }
.hint { margin: 3px 0 8px; font-size: 13.5px; color: var(--ink-soft); }
input[type=text] {
  width: 100%; padding: 13px 12px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input.needed { border-color: #c0392b; background: #fdeeec; }
 :root[data-theme="dark"] input.needed { background: #2c1b19; } 

.pick { margin: 24px 0 0; font-weight: 700; font-size: 15px; text-align: center; }

/* --- slot blocks --- */
.block { margin-top: 18px; }
.block h2 {
  margin: 0; font-size: 16px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.block .also {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.block .avail { margin: 3px 0 10px; font-size: 13px; color: var(--ink-soft); }
.block.sec { opacity: .92; }

.slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; border-radius: 11px; border: 1.5px solid var(--line);
  background: var(--panel); text-align: left; font: inherit; width: 100%;
}
.slot .t { font-size: 17px; font-weight: 700; }
.slot .tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
button.slot.free { cursor: pointer; border-color: var(--accent); }
button.slot.free .tag { color: var(--accent); }
button.slot.free:hover { background: var(--accent-soft); }
button.slot.free:active { transform: translateY(1px); }
.slot.gone { opacity: .5; }
.slot.gone .t { text-decoration: line-through; }
.slot.yours { border-color: var(--ok); background: var(--ok-soft); }
.slot.yours .tag, .slot.yours .t { color: var(--ok); }

/* --- your appointment --- */
.mine {
  margin-top: 18px; padding: 20px; text-align: center;
  background: var(--ok-soft); border: 1.5px solid var(--ok); border-radius: 14px;
}
.mine .lbl {
  margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ok);
}
.mine .big { margin: 6px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.mine .day { margin: 2px 0 0; color: var(--ink-soft); font-size: 15px; }
.mine .cancel {
  margin-top: 14px; padding: 9px 16px; font: 600 14px/1 inherit; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 8px;
}
.mine .cancel:hover { color: var(--ink); border-color: var(--ink-soft); }

.hint-box {
  margin-top: 18px; padding: 13px 15px; border-radius: 11px;
  background: var(--accent-soft); border: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft);
}

/* --- tabs (LAN only) --- */
.tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 2px solid var(--line); }
.tab {
  padding: 10px 15px; margin-bottom: -2px; font-size: 14.5px; font-weight: 700;
  text-decoration: none; color: var(--accent);
  border-bottom: 2px solid var(--accent); border-radius: 8px 8px 0 0;
}

footer.foot {
  margin-top: 28px; text-align: center; font-size: 13px; color: var(--ink-soft);
}

/* --- admin --- */
.count { text-align: center; margin: 20px 0 4px; font-size: 15px; color: var(--ink-soft); }
/* One number = the big stacked stat on the signups page. Several numbers in
   one line = the ministering summary, which must stay inline; ":only-child"
   tells them apart (text nodes are not element children). */
.count b { font-size: 17px; color: var(--ink); }
.count > b:only-child { font-size: 30px; display: block; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr.filled { background: var(--panel); }
td.when b { display: block; font-size: 16px; }
td.when span { display: block; font-size: 12.5px; color: var(--ink-soft); }
td.who .nm { display: block; font-weight: 700; }
td.who .at { display: block; font-size: 12.5px; color: var(--ink-soft); }
td.who .open { color: var(--ink-soft); font-style: italic; }
td.act { width: 90px; text-align: right; }
td.act form { margin: 0; }
.btn-small {
  padding: 5px 11px; font: 600 12.5px/1.4 inherit; cursor: pointer;
  color: var(--ink-soft); background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px;
}
.btn-small:hover { color: var(--ink); border-color: var(--ink-soft); }

/* --- youth designation on the ministering roster ---
   Three things had to be told apart at a glance: the green "email" coverage
   tags, the youth badge, and the button. Earlier the badge and its button were
   both pale purple pills of the same size and blurred together, so now the
   badge is solid and the button is deliberately plain. The row is tinted as
   well, because scanning 125 names for a small pill is the actual task. */
.min.is-youth {
  background: #f3ecfd; border-left: 3px solid #7c3fc4;
  border-radius: 0 6px 6px 0; padding: 2px 6px 2px 8px; margin: 2px 0;
}

  :root[data-theme="dark"] .min.is-youth { background: #241b33; border-left-color: #a97ae0; }


.min .youth {
  display: inline-block; margin-left: 6px; padding: 2px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  border-radius: 999px; background: #6b2fb3; color: #ffffff; border: 0;
}

  :root[data-theme="dark"] .min .youth { background: #a97ae0; color: #1a1226; }


.min .ok.dim { opacity: .55; }

/* The two buttons are colour-coded by the action they perform, because they sit
   125 times down one page and "which one is this?" is the question being asked.
   Purple = will make this person a youth. Red = will undo that. The colours do
   not clash with the coverage tags: green "email", amber "no email", red "no
   contact" are all on the LEFT of the row, the buttons on the right. */
.min form.yf { display: inline; margin-left: 6px; }
.min form.yf button {
  padding: 2px 9px; font: 700 11px/1.6 inherit; cursor: pointer;
  border-radius: 999px; white-space: nowrap; border: 1.5px solid;
}
/* "Mark as youth" — the action leads to the purple state, so it is purple. */
.min form.yf button {
  color: #6b2fb3; border-color: #c9a9ee; background: #f7f1fe;
}
.min form.yf button:hover { background: #ecdcfb; border-color: #6b2fb3; }
/* "Unmark youth" — a removal, so it reads as one. */
.min form.yf.on button {
  color: #a3302b; border-color: #e8b3b0; background: #fdf2f1;
}
.min form.yf.on button:hover { background: #f8ddda; border-color: #a3302b; }

  :root[data-theme="dark"] .min form.yf button {
    color: #c5a6f0; border-color: #5a4080; background: #241b33;
  }
  :root[data-theme="dark"] .min form.yf button:hover { background: #32254a; border-color: #c5a6f0; }
  :root[data-theme="dark"] .min form.yf.on button {
    color: #f0a9a4; border-color: #7a3c38; background: #331f1e;
  }
  :root[data-theme="dark"] .min form.yf.on button:hover { background: #452725; border-color: #f0a9a4; }


/* --- BCC toolbar on the ministering roster --- */
.bcc {
  margin: 18px 0 6px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.bcc-head { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.bcc-head b { font-size: 17px; color: var(--ink); }
.bcc-btn {
  display: inline-block; margin: 0 6px 6px 0; padding: 8px 14px;
  font: 700 13.5px/1.4 inherit; cursor: pointer; text-decoration: none;
  border-radius: 8px; border: 1.5px solid;
}
.bcc-btn.go { color: #fff; background: #1f6b3a; border-color: #1f6b3a; }
.bcc-btn.go:hover { filter: brightness(1.12); }
.bcc-btn.copy, .bcc-btn.show {
  color: var(--accent); background: transparent; border-color: var(--accent);
}
.bcc-btn.copy:hover, .bcc-btn.show:hover { background: var(--accent-soft); }
.bcc-list {
  width: 100%; margin-top: 8px; padding: 10px; font: 12.5px/1.5 ui-monospace,
  Menlo, Consolas, monospace; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
.bcc-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
/* The anchor lands the row under the sticky-ish header rather than flush to
   the viewport edge. */
.min { scroll-margin-top: 90px; }

/* --- notes from the quorum --- */
button.notebtn {
  margin-top: 16px; padding: 12px 20px; font: 700 15px/1 inherit; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px;
}
button.notebtn:hover { filter: brightness(1.1); }
label .opt { font-weight: 400; color: var(--ink-soft); }
.done {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 9px;
  background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ok);
  font-size: 14.5px; font-weight: 600;
}
.note {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 14px 16px; margin-top: 12px; box-shadow: var(--shadow);
}
.note.done { opacity: .5; border-left-color: var(--line); }
.note-head {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: baseline; justify-content: space-between;
}
.note-who { font-weight: 700; }
.note-actions { display: flex; align-items: center; gap: 8px; }
.note-actions form { margin: 0; }
.note-when { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.note-body { margin: 9px 0 0; white-space: pre-wrap; }
.tab .badge {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 7px;
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  font-size: 12px; font-weight: 700; text-align: center;
}

/* Add to my calendar. */
.addcal{margin:10px auto 6px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:14px;color:var(--ink-soft)}
.addcal a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--accent);font-weight:600;text-decoration:none}
.addcal a:hover{border-color:var(--accent)}

/* theme-kit: light by default; dark only when chosen */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* theme-kit toggle (~/theme-kit). Uses the site's own surface/ink/line variables; fallbacks if it has none. */
.theme-toggle{position:fixed;top:10px;right:10px;z-index:9999;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font:16px/1 system-ui,sans-serif;
  background:var(--tk-bg,#ffffff);color:var(--tk-fg,#222222);border:1px solid var(--tk-line,rgba(0,0,0,.18));
  box-shadow:0 1px 4px rgba(0,0,0,.18);opacity:.9}
.theme-toggle:hover,.theme-toggle:focus-visible{opacity:1}
.theme-toggle.inline{position:static;box-shadow:none}
:root[data-theme="dark"] .theme-toggle{--tk-bg:#26262b;--tk-fg:#f0efec;--tk-line:rgba(255,255,255,.22)}
@media print{.theme-toggle{display:none}}
.theme-toggle,:root[data-theme="dark"] .theme-toggle{--tk-bg:var(--panel);--tk-fg:var(--ink);--tk-line:var(--line)}