:root {
  --navy: #13285c;
  --navy-2: #1d3a7d;
  --navy-soft: #e8edf7;
  --gold: #b8892b;
  --gold-2: #d9b65c;
  --gold-soft: #f7efd9;
  --ink: #1b2233;
  --muted: #5d6578;
  --line: #dfe3ec;
  --bg: #f7f6f2;
  --card: #ffffff;
  --danger: #b3261e;
  --ok: #1f7a46;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(19,40,92,.06), 0 6px 20px rgba(19,40,92,.06);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: var(--navy-2); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: var(--serif); color: var(--navy); line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.35rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 8px; background: #fff; object-fit: cover; }
.brand strong { font-family: var(--serif); font-size: 1.35rem; display: block; line-height: 1; letter-spacing: .02em; }
.brand small { color: var(--gold-2); font-size: .78rem; letter-spacing: .04em; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a { color: #dfe6f5; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: .95rem; font-weight: 600; }
nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
nav a.active { color: var(--navy); background: var(--gold-2); }
.menu-btn { display: none; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 1.2rem; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.editbar { background: var(--gold-soft); color: var(--ink); border-bottom: 1px solid var(--gold-2); font-size: .92rem; }
.editbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.editbar-actions { display: flex; gap: 10px; align-items: center; }
.brand { min-width: 0; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .header-inner { gap: 8px; }
  .brand strong { font-size: 1.12rem; }
  .brand small { display: none; }
  #authBtn { padding: 6px 10px; }
  .editbar-inner { font-size: .82rem; }
}
@media (max-width: 1120px) {
  .menu-btn { display: block; order: 2; }
  #authBtn { order: 1; }
  nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--navy); flex-direction: column; padding: 8px 16px 16px; }
  nav.open { display: flex; }
}

/* buttons */
.btn { font: 600 .95rem var(--sans); border-radius: 8px; padding: 9px 16px; border: 1px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--navy-2); }
.btn-gold { background: var(--gold); border-color: var(--gold); }
.btn-gold:hover { background: #a37721; }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { background: var(--navy-soft); }
.btn-danger { background: #fff; color: var(--danger); border-color: #e9c3c0; }
.btn-danger:hover { background: #fbeceb; }
.btn-small { padding: 5px 10px; font-size: .85rem; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: .82rem; color: var(--navy); }
.icon-btn:hover { background: var(--navy-soft); }
.icon-btn.del { color: var(--danger); }
.admin-only { display: none !important; }
body.is-admin .admin-only { display: inline-flex !important; }
body.is-admin .admin-only.block { display: block !important; }
body.is-admin th.admin-only { display: table-cell !important; }

main { padding-top: 28px; padding-bottom: 56px; min-height: 70vh; outline: none; }
section + section { margin-top: 40px; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; background: linear-gradient(135deg, var(--navy) 0%, #0d1d44 100%); color: #fff; border-radius: 18px; padding: 36px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold)); }
.hero h1 { color: #fff; margin-bottom: 4px; }
.hero .no { font-family: var(--serif); color: var(--gold-2); font-size: 1.6rem; }
.hero .motto { font-style: italic; color: #c8d3ee; margin: 12px 0 22px; font-family: var(--serif); font-size: 1.25rem; }
.hero-emblem { justify-self: center; background: #fff; border-radius: 22px; padding: 10px; max-width: 280px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; font-size: .9rem; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: 24px; } .hero-emblem { max-width: 200px; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat b { display: block; font-family: var(--serif); font-size: 2.1rem; color: var(--navy); line-height: 1; }
.stat span { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.info-list li:last-child { border-bottom: 0; }
.info-list b { color: var(--muted); font-weight: 600; font-size: .9rem; }
@media (max-width: 480px) { .info-list li { grid-template-columns: 1fr; gap: 0; } }
.next-meeting { border-left: 4px solid var(--gold); }
.next-meeting .date { font-family: var(--serif); font-size: 1.8rem; color: var(--navy); }

/* history */
.history { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.history figure { margin: 0; position: sticky; top: 90px; }
.history figure img { border-radius: var(--radius); border: 4px solid #fff; box-shadow: var(--shadow); width: 100%; }
.history figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; text-align: center; }
.prose p { margin: 0 0 1em; font-size: 1.05rem; }
.prose p:first-child::first-letter { font-family: var(--serif); font-size: 3.4rem; float: left; line-height: .8; padding: 6px 8px 0 0; color: var(--gold); }
.signoff { font-style: italic; color: var(--muted); }
@media (max-width: 760px) { .history { grid-template-columns: 1fr; } .history figure { position: static; max-width: 220px; } }

/* tables */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: var(--navy-soft); color: var(--navy); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfaf6; }
td.actions { white-space: nowrap; text-align: right; width: 1%; }
td.year { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 1.15rem; white-space: nowrap; width: 1%; }

/* past masters */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.pm { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; position: relative; box-shadow: var(--shadow); }
.pm .yr { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 1.3rem; }
.pm .ph { width: 76px; height: 88px; margin: 6px auto; border-radius: 8px; overflow: hidden; background: var(--navy-soft); display: grid; place-items: center; color: var(--navy); font-family: var(--serif); font-size: 1.6rem; }
.pm .ph img { width: 100%; height: 100%; object-fit: cover; }
.pm .nm { font-weight: 600; font-size: .95rem; }
.pm .tt { color: var(--muted); font-size: .82rem; }
.pm .row-actions { margin-top: 8px; justify-content: center; gap: 4px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 7px 12px; font: 600 .88rem var(--sans); color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--navy); color: #fff; }

/* members */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.search { flex: 1 1 260px; position: relative; }
.search input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.member { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: var(--shadow); transition: transform .12s, border-color .12s; }
.member:hover { transform: translateY(-2px); border-color: var(--gold-2); }
.member .ph { flex: 0 0 64px; height: 74px; border-radius: 8px; overflow: hidden; background: var(--navy-soft); display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; color: var(--navy); }
.member .ph img { width: 100%; height: 100%; object-fit: cover; }
.member .t { font-size: .78rem; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.member .n { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.member .p { color: var(--muted); font-size: .86rem; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.count { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.notice { background: var(--navy-soft); border: 1px solid #cdd6ea; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: .95rem; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* profile modal */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10,20,45,.55); }
.modal-head { background: var(--navy); color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; }
.modal-head h3 { color: #fff; margin: 0; }
.modal-close { background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; line-height: 1; }
.modal-content { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: #fff; flex-wrap: wrap; }
.modal-foot .spacer { margin-right: auto; }
.profile { display: grid; grid-template-columns: 150px 1fr; gap: 20px; }
.profile .ph { border-radius: 10px; overflow: hidden; background: var(--navy-soft); aspect-ratio: 179/208; display: grid; place-items: center; font-family: var(--serif); font-size: 3rem; color: var(--navy); }
.profile .ph img { width: 100%; height: 100%; object-fit: cover; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.badge { background: var(--gold-soft); color: #7a5a14; border: 1px solid #ecd9a6; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
@media (max-width: 520px) { .profile { grid-template-columns: 1fr; } .profile .ph { max-width: 150px; } }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.form input, .form select, .form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; color: var(--ink); }
.form textarea { min-height: 80px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .search input:focus { outline: 2px solid var(--gold-2); border-color: var(--gold); }
.form .hint { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.photo-field { display: flex; gap: 12px; align-items: center; }
.photo-field .ph { width: 70px; height: 82px; border-radius: 8px; background: var(--navy-soft); overflow: hidden; flex: 0 0 auto; }
.photo-field .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

/* celebrations */
.celebrations { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .celebrations { grid-template-columns: 1fr; } }
.cel-list { list-style: none; margin: 0; padding: 0; }
.cel-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cel-list li:last-child { border-bottom: 0; }
.cel-list .day { flex: 0 0 46px; height: 46px; border-radius: 10px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }
.cel-list .today .day { background: var(--gold); color: #fff; }
.month-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.month-pick button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; font: 600 .85rem var(--sans); cursor: pointer; color: var(--muted); }
.month-pick button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

.row-actions { display: inline-flex; gap: 6px; }
.empty { color: var(--muted); padding: 24px; text-align: center; }

.site-footer { background: var(--navy); color: #c8d3ee; padding: 28px 0; font-size: .9rem; }
.site-footer b { color: #fff; }
.site-footer a { color: var(--gold-2); }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; transition: transform .25s; z-index: 50; font-size: .95rem; max-width: calc(100vw - 32px); }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--danger); }

@media print {
  .site-header, .site-footer, .toolbar, .admin-only, .notice { display: none !important; }
  body { background: #fff; }
  .member, .card, .pm { box-shadow: none; break-inside: avoid; }
}

/* v2: personal logins, change history, exports */
a.btn { text-decoration: none; display: inline-block; }
.btn-outline.btn-small { color: var(--navy); }
.login-panel { margin-top: 18px; padding: 14px 16px; background: var(--gold-soft); border: 1px solid #ecd9a6; border-radius: 10px; }
.login-panel h4 { margin: 0 0 4px; color: var(--navy); font-size: 1rem; }
.login-panel p { margin: 0 0 10px; }
.select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.nowrap { white-space: nowrap; }
table.audit td { vertical-align: top; font-size: .92rem; }
.chg { margin: 2px 0; line-height: 1.4; word-break: break-word; }
.chg del { color: var(--danger); background: #fbeceb; text-decoration: line-through; padding: 0 3px; border-radius: 3px; }
.chg ins { color: var(--ok); background: #e7f4ec; text-decoration: none; padding: 0 3px; border-radius: 3px; }
.act { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); white-space: nowrap; }
.act-add { background: #e7f4ec; color: var(--ok); }
.act-delete { background: #fbeceb; color: var(--danger); }
.act-update { background: var(--gold-soft); color: #7a5a14; }
code { font-family: ui-monospace, Menlo, monospace; background: var(--navy-soft); padding: 2px 6px; border-radius: 6px; }

/* v3: roles, users, sign-in links */
.announce { background: var(--gold-soft); border: 1px solid #ecd9a6; border-left: 4px solid var(--gold); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; white-space: pre-line; }
.pill { border: 0; border-radius: 999px; padding: 3px 10px; font: 700 .8rem var(--sans); cursor: pointer; white-space: nowrap; display: inline-block; }
.pill.on { background: #e7f4ec; color: var(--ok); }
.pill.off { background: #fbeceb; color: var(--danger); }
table.users td { vertical-align: middle; }
.who { display: flex; gap: 10px; align-items: center; min-width: 200px; }
.who img, .who .noph { width: 36px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--navy-soft); flex: 0 0 auto; }
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.role-card { display: flex; flex-direction: column; gap: 10px; }
.role-card.new { border-style: dashed; }
.role-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.role-head input { font: 700 1.15rem var(--serif); color: var(--navy); border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; flex: 1; min-width: 0; background: transparent; }
.role-head input:not([readonly]):hover, .role-head input:focus { border-color: var(--line); background: #fff; }
.role-card .desc { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: .9rem; }
.perm-list { display: grid; gap: 6px; font-size: .92rem; }
.perm-list label, label.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.perm-list input, label.check input { margin-top: 4px; }
.linkbox { background: var(--navy-soft); border-radius: 8px; padding: 10px 12px; margin: 10px 0; word-break: break-all; }
.linkbox code { background: none; padding: 0; font-size: .85rem; }
.share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.btn-wa { background: #1f8f4e; border-color: #1f8f4e; }
.btn-wa:hover { background: #18753f; }
.bulk-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 12px; display: grid; gap: 6px; }
.pw-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pw-details summary { cursor: pointer; color: var(--navy-2); font-weight: 600; font-size: .92rem; }
pre { background: var(--ink); color: #fff; padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: .88rem; }
.icon-btn[disabled] { opacity: .45; cursor: not-allowed; }
a.icon-btn { text-decoration: none; display: inline-block; }
.editbar-actions { flex-wrap: wrap; }
@media (max-width: 760px) { #editHint { display: none; } .editbar-inner { padding-top: 4px; padding-bottom: 6px; } }

/* v4: on-page (WYSIWYG) editing */
body.editing { padding-bottom: 96px; }
.ed { outline: 1.5px dashed var(--gold-2); outline-offset: 3px; border-radius: 3px; cursor: text; min-width: 2ch; display: inline-block; transition: background .15s, outline-color .15s; }
div.ed, p.ed, h1.ed, h2.ed, figcaption.ed { display: block; }
.ed:hover { background: rgba(217, 182, 92, .12); }
.ed:focus { outline: 2px solid var(--gold); background: rgba(255, 255, 255, .9); color: var(--ink); }
.hero .ed:focus { background: rgba(255, 255, 255, .12); color: #fff; }
.ed:empty::before { content: attr(data-ph); color: var(--muted); font-style: italic; opacity: .8; }
.hero .ed:empty::before { color: #c8d3ee; }
.ed-rich { min-height: 3em; padding: 4px 6px; }
.prose-rich h3 { margin: 1em 0 .4em; }
.prose-rich blockquote { margin: 1em 0; padding: 4px 16px; border-left: 3px solid var(--gold-2); color: var(--muted); font-style: italic; }
.prose-rich ul, .prose-rich ol { padding-left: 1.4em; }
.prose-rich p:last-child { margin-bottom: 0; }
.prose .prose-rich > p:first-child::first-letter { font-family: var(--serif); font-size: 3.4rem; float: left; line-height: .8; padding: 6px 8px 0 0; color: var(--gold); }
.prose p:first-child::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; font-family: inherit; }
.prose .prose-rich > p:first-child::first-letter { font-family: var(--serif); font-size: 3.4rem; float: left; line-height: .8; padding: 6px 8px 0 0; color: var(--gold); }
.announce.prose-rich p { margin: 0 0 .4em; }
.intro { margin-top: 20px; font-size: 1.05rem; }
.ed-img-wrap { position: relative; display: inline-block; justify-self: center; }
.ed-img-wrap img { outline: 2px dashed var(--gold-2); outline-offset: 4px; cursor: pointer; }
.ed-img-btn { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--navy); color: #fff; border: 1px solid var(--gold-2); border-radius: 999px; padding: 5px 12px; font: 600 .82rem var(--sans); cursor: pointer; white-space: nowrap; }
.edit-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 3px solid var(--gold); box-shadow: 0 -6px 24px rgba(19, 40, 92, .15); }
.dock-inner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.dock-tools { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.dock-tools button { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font: 600 .86rem var(--sans); color: var(--navy); }
.dock-tools button:hover { background: var(--navy-soft); }
.dock-tools .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.dock-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#dockCount { color: var(--muted); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
@media print { .edit-dock { display: none !important; } }

/* v5: searchable member picker */
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(19, 40, 92, .18); max-height: 290px; overflow-y: auto; padding: 4px; }
.combo-opt { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; line-height: 1.25; }
.combo-opt.on, .combo-opt:hover { background: var(--navy-soft); }
.combo-opt .ph { flex: 0 0 34px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--navy-soft); display: grid; place-items: center; font: 600 .8rem var(--serif); color: var(--navy); }
.combo-opt .ph img { width: 100%; height: 100%; object-fit: cover; }
.combo-empty { padding: 10px; color: var(--muted); font-size: .9rem; }
.combo-status { font-size: .82rem; color: var(--muted); margin-top: 5px; }
.combo-status .pill { cursor: default; margin-right: 4px; }

/* v6: Lodge officers and system settings */
table.board td.office { font-weight: 700; color: var(--navy); white-space: nowrap; width: 32%; }
table.board tr.vacant td { background: #fcfbf7; }
.cell-input { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
.cell-input:focus { outline: 2px solid var(--gold-2); border-color: var(--gold); }
table.offices td { vertical-align: middle; }
table.offices tr.new-office td { background: var(--gold-soft); }

/* v7: multiple phone numbers and e-mails */
.multi { display: grid; gap: 6px; margin-bottom: 6px; }
.multi-row { display: grid; gap: 6px; align-items: center; }
.phone-row { grid-template-columns: 130px 86px 1fr 34px; }
.email-row { grid-template-columns: 1fr 34px; }
.multi-row input, .multi-row select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.multi-row .cc { text-align: center; font-variant-numeric: tabular-nums; }
.multi-row .icon-btn { height: 36px; font-size: 1.1rem; }
@media (max-width: 520px) { .phone-row { grid-template-columns: 1fr 80px; } .phone-row [data-p=number] { grid-column: 1; } }
.ptype { display: inline-block; min-width: 3.2em; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.wa-link { font-size: .78rem; color: #1f8f4e; margin-left: 4px; }
/* v8: On WhatsApp tick */
.phone-row { grid-template-columns: 120px 80px 1fr auto 34px; }
.wa-tick { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: #1f8f4e; font-weight: 600; white-space: nowrap; cursor: pointer; }
.wa-tick input { width: auto !important; accent-color: #1f8f4e; }
@media (max-width: 520px) { .phone-row { grid-template-columns: 1fr 76px; } .phone-row [data-p=number] { grid-column: 1; } }
.warn-text { color: var(--danger); }

/* v9: the WhatsApp tick shows only for Cell numbers; keep the row's columns lined up when it's hidden */
.wa-tick[hidden] { display: flex !important; visibility: hidden; }

/* v10: name link on the home page Master card */
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }

/* v11: Users list grouped by role, with columns sized so each row fits on two lines */
table.users { table-layout: auto; }
table.users col.c-role { width: 150px; }
table.users col.c-status { width: 90px; }
table.users col.c-last { width: 115px; }
table.users col.c-link { width: 120px; }
table.users td:nth-child(3), table.users td:nth-child(4), table.users td:nth-child(5) { white-space: nowrap; }
table.users col.c-act { width: 190px; }
table.users td:last-child { min-width: 200px; }
table.users td:last-child .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; width: 200px; margin-left: auto; }
table.users .who { min-width: 230px; }
table.users tr.ugroup-head th { background: var(--gold-soft); color: #7a5a14; text-align: left; font-size: .8rem; padding-top: 7px; padding-bottom: 7px; }
table.users .ucount { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #fff; color: #7a5a14; font-size: .75rem; letter-spacing: 0; }
table.users thead th { white-space: nowrap; }
table.users select.select { max-width: 160px; }
table.users td, table.users th { padding-left: 9px; padding-right: 9px; }

/* v12: filters on Users & invite list, Contact report */
.pill.warn { background: var(--gold-soft); color: #7a5a14; }
.linkish { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; cursor: pointer; font: inherit; }
.toolbar .spacer { flex: 1; }
.toolbar select.select { width: auto; min-width: 150px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.stat { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--ink, inherit); }
.stat b { display: block; font-size: 1.5rem; color: var(--navy); line-height: 1.1; }
.stat span { font-size: .85rem; color: var(--muted); }
.stat.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-soft); }
.wa-dot, .mail-dot { display: inline-block; font-size: .68rem; font-weight: 700; padding: 0 5px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; }
.wa-dot { background: #e2f5ea; color: #1f8f4e; }
.mail-dot { background: var(--navy-soft); color: var(--navy); }
table.contacts td { vertical-align: top; }
.bulk-filter { display: grid; gap: 8px; margin-top: 12px; }
.bulk-filter input[type=search] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.seg-small { flex-wrap: wrap; }
.seg-small button { padding: 5px 9px; font-size: .8rem; }
.bulk-list label[hidden] { display: none; }
.year-steps { display: grid; gap: 10px; margin: 14px 0; }
.year-steps label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.year-steps input[type=checkbox] { margin-top: 4px; width: auto; flex: 0 0 auto; }

/* v13: Page access grid */
table.page-access th[scope=row] { background: #fff; text-align: left; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: .95rem; }
table.page-access td { vertical-align: middle; }
table.page-access .pa-sel { width: auto; min-width: 110px; padding: 5px 8px; font-size: .88rem; }
.pa-sel.pa-none { background: #fbeceb; color: var(--danger); }
.pa-sel.pa-view { background: #eef3fb; color: var(--navy); }
.pa-sel.pa-edit { background: #e7f4ec; color: var(--ok); }
.pa-fixed { display: inline-block; padding: 5px 10px; border-radius: 6px; background: #e7f4ec; color: var(--ok); font-size: .88rem; font-weight: 600; }

/* v14: extra pages and page on/off */
table.custom-table td.num, table.custom-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.custom-table .num-col { width: 44px; text-align: right; }
table.custom-table tfoot td { border-top: 2px solid var(--line); background: #fbfaf6; }
.sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.notice { padding: 10px 14px; border-radius: 8px; margin: 10px 0 16px; background: var(--navy-soft); }
.notice.warn { background: var(--gold-soft); color: #7a5a14; }
.btn-danger-outline { color: var(--danger); border-color: #e7b9b5; }
.switch { display: inline-flex; gap: 6px; align-items: center; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.switch input { width: auto; }
tr.pa-off th[scope=row], tr.pa-off td { opacity: .55; }
tr.pa-off td:nth-child(2) { opacity: 1; }

/* v15: meetings */
.pill.emergency { background: #fdeee0; color: #a34b00; }
table.meetings td { vertical-align: top; }
tr.mt-cancelled td:first-child b { text-decoration: line-through; color: var(--muted); }
tr.mt-past td { opacity: .75; }
.meet-time { font-size: .7em; color: var(--muted); }

/* v16: notify brethren */
.notify-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.notify-way { padding: 14px; }
.notify-way p { margin: 6px 0 10px; }
@media (max-width: 640px) { .notify-ways { grid-template-columns: 1fr; } }
.act-notify { background: #fdeee0; color: #a34b00; }

/* v17: outstation meetings */
.pill.outstation { background: #e8eefb; color: #2c4a8a; }
.mt-place { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.mt-place[hidden] { display: none; }
@media (max-width: 640px) { .mt-place { grid-template-columns: 1fr; } }