/* Kindred — Family Life Ministry, House on the Rock (The Refuge, Abuja).
   ---------------------------------------------------------------------------
   The palette and the type are taken from the ministry's own live site,
   familylife.hotrrefuge.org: navy #172B4D, brand blue #0A48B3, the green
   #2DCE89 it uses for every action, slate #525F7F body text, Roboto throughout.
   Nothing here is invented.

   LIGHT FIRST. Every value below is designed for the light theme, on white
   surfaces over a soft grey page. The dark block near the bottom is derived from
   it afterwards and never drives a decision.
   --------------------------------------------------------------------------- */

:root {
  /* brand, straight from the ministry's site */
  --navy: #172B4D;
  --navy-deep: #101E36;
  --navy-soft: #EDF1F7;
  --brand: #0A48B3;
  --brand-deep: #083A93;
  --brand-soft: #E7EEFB;
  --green: #2DCE89;
  --green-deep: #1E9E68;
  --green-soft: #E4F8EF;

  /* surfaces — white cards on a soft grey page */
  --bg: #F4F6FA;
  --bg-tint: #EDF1F7;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-3: #EDF1F7;
  --border: #E1E7F0;
  --border-strong: #C7D2E2;

  /* type */
  --text: #101E36;
  --text-soft: #525F7F;
  --muted: #7E8CA8;
  --on-brand: #FFFFFF;
  --on-green: #FFFFFF;
  --on-navy: #FFFFFF;

  --ok: #1E9E68;
  --ok-soft: #E4F8EF;
  --warn: #9A6206;
  --warn-soft: #FDF3E2;
  --bad: #C02B3F;
  --bad-soft: #FCE9EC;
  --info: #0A48B3;
  --info-soft: #E7EEFB;

  --ring: rgba(10, 72, 179, .28);
  --shadow-sm: 0 1px 2px rgba(16, 30, 54, .05), 0 1px 3px rgba(16, 30, 54, .04);
  --shadow: 0 1px 3px rgba(16, 30, 54, .06), 0 8px 24px rgba(16, 30, 54, .08);
  --shadow-lg: 0 2px 6px rgba(16, 30, 54, .07), 0 18px 48px rgba(16, 30, 54, .12);

  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --sans: Roboto, "Segoe UI", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --serif: "Roboto Slab", Georgia, "Times New Roman", serif;

  --shell: #172B4D;
  --on-shell: #FFFFFF;
  --shell-muted: #9AADC2;
}

* { box-sizing: border-box; }
html { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* Footer sits at the bottom of the window on a short page and at the bottom of
     the content on a long one, instead of riding up under the last card. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 { color: var(--text); font-weight: 700; margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.55rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: .8rem; }
.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
strong, b { color: var(--text); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 560px; }
.reading { max-width: 740px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 14px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---------- the navy shell: masthead + nav ---------- */
.masthead { background: var(--shell); color: var(--on-shell); }
.masthead-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
}
.masthead a { color: inherit; text-decoration: none; }
.brandmark { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brandmark img { height: 34px; width: auto; display: block; }
.brandmark .divider { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); flex: none; }
.brandmark .name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brandmark .name b { font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; color: var(--on-shell); }
.brandmark .name span {
  font-size: .7rem; color: var(--shell-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.whoami { display: flex; align-items: center; gap: 8px; color: var(--shell-muted); font-size: .82rem; }
.whoami .dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex: none;
}
.icon-btn, .theme-btn {
  background: transparent; color: var(--on-shell); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-sm); width: 34px; height: 34px; display: grid; place-items: center;
  cursor: pointer; flex: none;
}
.icon-btn:hover, .theme-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.icon-btn .moon, .theme-btn .moon { display: none; }

.nav { background: var(--shell); border-bottom: 3px solid var(--green); }
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav a {
  padding: 11px 14px; color: var(--shell-muted); font-size: .86rem; font-weight: 500;
  white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.nav a:hover { color: var(--on-shell); text-decoration: none; }
.nav a.on { color: var(--on-shell); border-bottom-color: var(--green); font-weight: 700; }

.more { position: relative; }
.more > summary {
  padding: 11px 14px; color: var(--shell-muted); font-size: .86rem; font-weight: 500;
  cursor: pointer; list-style: none; white-space: nowrap;
}
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary, .more > summary:hover { color: var(--on-shell); }
.more-menu {
  position: absolute; right: 0; top: 100%; z-index: 40; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px;
}
.more-menu a {
  padding: 9px 12px; color: var(--text-soft); border: 0; border-radius: var(--radius-sm);
  font-size: .86rem; white-space: nowrap;
}
.more-menu a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

main { flex: 1 0 auto; padding: 26px 0 60px; }

.page-head { margin-bottom: 20px; }
.page-head .eyebrow {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 5px;
}
.page-head p { color: var(--muted); margin: 0; }

.crumbs { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-body { padding: 18px; }
.panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.accent { border-left: 3px solid var(--brand); }

.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stat .fig { font-size: 1.9rem; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -.02em; }
.stat .cap { font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* ---------- buttons: the ministry's green is the action colour ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: .84rem; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: var(--on-green); }
.btn-primary:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--on-green); }
.btn-blue { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-blue:hover { background: var(--navy); border-color: var(--navy); color: var(--on-brand); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-sm { padding: 6px 12px; font-size: .78rem; }
.btn-lg { padding: 12px 22px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--radius-pill); }

/* ---------- forms ---------- */
label {
  display: block; font-size: .78rem; font-weight: 700; color: var(--text);
  margin-bottom: 6px; letter-spacing: .01em;
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="search"],
input[type="url"], select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .92rem;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brand); margin-right: 8px; }
.field { margin-bottom: 16px; }
.field .help { font-size: .77rem; color: var(--muted); margin-top: 6px; }
.field .err { font-size: .78rem; color: var(--bad); margin-top: 6px; font-weight: 700; }
.check-row { display: flex; align-items: flex-start; gap: 2px; }
.check-row label { font-weight: 400; color: var(--text-soft); margin: 0; font-size: .88rem; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 18px; }
legend { font-weight: 700; color: var(--text); padding: 0 8px; font-size: .9rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data thead th {
  text-align: left; padding: 11px 14px; background: var(--surface-2); color: var(--muted);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data tbody th {
  text-align: left; padding: 11px 14px; color: var(--muted); font-weight: 700;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); vertical-align: top; width: 34%;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-soft); }
table.data tbody tr:last-child td, table.data tbody tr:last-child th { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tfoot td { background: var(--surface-2); font-weight: 700; color: var(--text); }

/* ---------- badges, alerts, empty ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  background: var(--surface-3); color: var(--text-soft);
}
.badge-ok { background: var(--green-soft); color: var(--green-deep); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-info, .badge-plum { background: var(--brand-soft); color: var(--brand); }

.alert {
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 16px; font-size: .88rem;
  border: 1px solid var(--border); border-left: 3px solid var(--muted); background: var(--surface);
  color: var(--text-soft);
}
.alert-success { background: var(--green-soft); border-color: var(--green-soft); border-left-color: var(--green); color: var(--green-deep); }
.alert-warning { background: var(--warn-soft); border-color: var(--warn-soft); border-left-color: var(--warn); color: var(--warn); }
.alert-error { background: var(--bad-soft); border-color: var(--bad-soft); border-left-color: var(--bad); color: var(--bad); }
.alert-info { background: var(--brand-soft); border-color: var(--brand-soft); border-left-color: var(--brand); color: var(--brand); }

.empty { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty h3 { color: var(--text-soft); margin-bottom: 4px; }
.empty p { margin: 0; font-size: .88rem; }

/* ---------- footer ---------- */
.foot {
  margin-top: auto; flex-shrink: 0;
  background: var(--navy-deep); color: var(--shell-muted); padding: 22px 0; font-size: .78rem;
}
.foot a { color: var(--shell-muted); text-decoration: underline; }
.foot a:hover { color: #fff; }

/* ---------- scrollbars, focus ---------- */
* { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

@media (max-width: 680px) {
  h1 { font-size: 1.32rem; }
  .wrap { padding: 0 16px; }
  .card { padding: 15px; }
  .card-body, .card-head { padding: 14px 15px; }
  .masthead-inner { padding: 12px 16px; }
  .brandmark .name span { display: none; }
  .whoami > span { display: none; }
  main { padding: 18px 0 44px; }
}

/* ===========================================================================
   DARK — derived from the light design above, never the other way round.
   =========================================================================== */
:root[data-theme="dark"] {
  --navy: #0E1626;
  --navy-deep: #0A111D;
  --navy-soft: #1B2942;
  --brand: #6BA1F5;
  --brand-deep: #8FBBFF;
  --brand-soft: #16233B;
  --green: #35D896;
  --green-deep: #5FE4AF;
  --green-soft: #12301F;

  --bg: #0B121E;
  --bg-tint: #101A29;
  --surface: #141E2E;
  --surface-2: #1A2537;
  --surface-3: #22304A;
  --border: #253449;
  --border-strong: #3A4C68;

  --text: #EAF0FA;
  --text-soft: #B6C4DA;
  --muted: #8296B3;
  --on-brand: #0B121E;
  --on-green: #08160F;
  --on-navy: #EAF0FA;

  --ok: #35D896;
  --ok-soft: #12301F;
  --warn: #E8B45C;
  --warn-soft: #2E2411;
  --bad: #F2848F;
  --bad-soft: #331A1E;
  --info: #6BA1F5;
  --info-soft: #16233B;

  --ring: rgba(107, 161, 245, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);

  --shell: #0E1626;
  --on-shell: #EAF0FA;
  --shell-muted: #8296B3;
}

:root[data-theme="dark"] .icon-btn .sun,
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .moon,
:root[data-theme="dark"] .theme-btn .moon { display: block; }
:root[data-theme="dark"] .btn-danger { color: #1A0D10; }

/* No-JS floor: a dark device that never ran the toggle still gets the dark set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #0E1626; --navy-deep: #0A111D; --navy-soft: #1B2942;
    --brand: #6BA1F5; --brand-deep: #8FBBFF; --brand-soft: #16233B;
    --green: #35D896; --green-deep: #5FE4AF; --green-soft: #12301F;
    --bg: #0B121E; --bg-tint: #101A29;
    --surface: #141E2E; --surface-2: #1A2537; --surface-3: #22304A;
    --border: #253449; --border-strong: #3A4C68;
    --text: #EAF0FA; --text-soft: #B6C4DA; --muted: #8296B3;
    --on-brand: #0B121E; --on-green: #08160F; --on-navy: #EAF0FA;
    --ok: #35D896; --ok-soft: #12301F;
    --warn: #E8B45C; --warn-soft: #2E2411;
    --bad: #F2848F; --bad-soft: #331A1E;
    --info: #6BA1F5; --info-soft: #16233B;
    --ring: rgba(107, 161, 245, .35);
    --shell: #0E1626; --on-shell: #EAF0FA; --shell-muted: #8296B3;
  }
  :root:not([data-theme="light"]) .icon-btn .sun,
  :root:not([data-theme="light"]) .theme-btn .sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .moon,
  :root:not([data-theme="light"]) .theme-btn .moon { display: block; }
}

/* Print stays light on purpose — registers and certificates are paper. */
@media print {
  .no-print, .nav, .masthead, .foot { display: none !important; }
  body { background: #fff; color: #000; display: block; }
  .card, .panel { border: 1px solid #ccc; box-shadow: none; }
  table.data thead th { background: #eee; color: #000; }
}

/* ---------------------------------------------------------------------------
   Compatibility aliases. The first build used a plum-and-gold palette taken from
   the printed manual, which is not the ministry's brand. Templates written
   against those names keep working and pick up the real colours. New work uses
   the names above.
   --------------------------------------------------------------------------- */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --plum: var(--brand);
  --plum-deep: var(--navy);
  --plum-soft: var(--brand-soft);
  --gold: var(--green);
  --gold-deep: var(--green-deep);
  --gold-soft: var(--green-soft);
  --on-plum: var(--on-brand);
  --on-gold: var(--on-green);
  --masthead: var(--shell);
  --on-masthead: var(--on-shell);
}
.wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.wordmark b { font-size: 1.06rem; font-weight: 700; color: var(--on-shell); }
.wordmark span { font-size: .7rem; color: var(--shell-muted); }
.crest { height: 30px; width: auto; }