/* Shared header navigation for the Elders Quorum tools pages (uses the page's color tokens). */
.suite-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.suite-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.suite-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.suite-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.suite-nav a.suite-home { color: var(--ink); margin-right: 6px; }
.suite-nav a.suite-home.active { color: var(--accent); }
.suite-nav .ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 720px) {
  .suite-nav a { padding: 6px 8px; }
  .suite-nav a:not(.suite-home) span { display: none; }
  .suite-nav a.suite-home { margin-right: 0; }
}

/* ---------- signed-in person's menu (end of the header nav) ---------- */
.suite-user { position: relative; margin-left: 6px; }
.suite-user-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-weight: 600; color: var(--ink); }
.suite-user-btn .ico { width: 18px; height: 18px; }
.suite-user-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 6px; display: flex; flex-direction: column; }
.suite-user-menu[hidden] { display: none; }
.suite-user-head { display: flex; flex-direction: column; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.suite-user-head span { color: var(--muted); font-size: 12px; }
.suite-user-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; justify-content: flex-start; }
.suite-user-menu button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 720px) { .suite-user-btn span { display: none; } .suite-user { margin-left: 2px; } }

/* ---------- sign-in screen: covers the page until a presidency member is confirmed ---------- */
.auth-gate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.75)), url("../img/landing-1200.jpg") center / cover no-repeat, var(--bg); }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(420px, 100%); background: var(--panel); color: var(--ink); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.auth-card h1 { margin: 0; font-size: 24px; }
.auth-card p { margin: 0; }
.auth-eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.auth-muted, .auth-env { color: var(--muted); font-size: 13px; }
.auth-env { border-top: 1px dashed var(--line); padding-top: 10px; color: var(--warn, #b45309); }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.auth-form input { font: inherit; font-size: 16px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.auth-form input[inputmode=numeric] { letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.auth-form button { justify-content: center; padding: 9px 12px; font-size: 15px; }
.auth-msg { color: var(--error, #b91c1c); font-size: 13px; min-height: 1em; }
.auth-msg:empty { display: none; }
.auth-note { font-size: 15px; }
.auth-alt { font-size: 13px; }
.auth-qr { align-self: center; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
.auth-key code { display: block; word-break: break-all; font-size: 13px; background: var(--bg); padding: 6px 8px; border-radius: 6px; margin-top: 4px; }
.auth-key summary { cursor: pointer; font-size: 13px; color: var(--accent); }

/* ---------- sync notices and questions (every page) ---------- */
.sync-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; width: min(640px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.2); padding: 10px 12px; font-size: 14px; }
.sync-banner span { flex: 1; }
.sync-banner .x { border: 0; background: none; font-size: 18px; line-height: 1; padding: 2px 6px; color: var(--muted); }
.sync-dialog form, .access-dialog .dlg { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
dialog.sync-dialog, dialog.access-dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.sync-dialog { width: min(460px, calc(100vw - 24px)); }
dialog.access-dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.sync-dialog::backdrop, dialog.access-dialog::backdrop { background: rgba(15,23,42,.45); }
.sync-dialog p, .access-dialog p, .access-dialog h2, .access-dialog h3 { margin: 0; }
.sync-dialog .row, .access-dialog .row { display: flex; gap: 8px; align-items: center; }
.sync-dialog .row.end, .access-dialog .row.end { justify-content: flex-end; }
.access-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.access-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 6px 8px; }
.access-table td { border-bottom: 1px solid var(--line); padding: 7px 8px; vertical-align: middle; }
.access-table .pill { font-size: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 999px; padding: 1px 7px; }
.access-add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.access-add h3, .access-add .row { grid-column: 1 / -1; font-size: 15px; }
.access-add label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.access-add label.row { flex-direction: row; font-size: 13px; color: var(--ink); }
.access-msg:empty { display: none; }
@media (max-width: 560px) {
  .access-add { grid-template-columns: 1fr; }
  .access-table th:nth-child(3), .access-table td:nth-child(3) { display: none; }
}