@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --navy: #0a0a26;
  --navy-2: #0d0d33;
  --gold: #d3a94e;
  --gold-dim: #9c8146;
  --white: #ffffff;
  --danger: #e2726b;
  --success: #6fbf8f;
}

* { box-sizing: border-box; }

/* The whole page is a fixed-height frame that never scrolls itself — only
   the #content pane inside it scrolls. That way every page of the passport
   presents the exact same outer size (the full screen), no matter how long
   or short that page's content is; a long page just scrolls internally. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--navy);
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  height: 100%;
  overflow: hidden;
}

#shell {
  max-width: 524px;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  display: flex;
  background: var(--navy);
}

#content {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  touch-action: pan-y;
}

#app {
  position: relative;
  min-height: 100%;
}

.page {
  display: none;
  flex-direction: column;
  padding: 36px 24px 110px;
  min-height: 100%;
}
.page.active { display: flex; }

.title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  color: var(--gold);
  font-size: 26px;
  margin: 4px 0 20px;
}

.emblem {
  width: 230px;
  margin: 0 auto 18px;
  display: block;
  border-radius: 50%;
}

/* Home (sign-in) page title, sitting above the big emblem */
.home-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  color: var(--gold);
  font-size: 30px;
  margin: 6px 0 18px;
}

.emblem-sm {
  width: 74px;
  margin: 0 auto 16px;
  display: block;
  border-radius: 50%;
}

.motto {
  font-family: 'Cinzel', serif;
  text-align: center;
  letter-spacing: 2px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--gold);
  margin-bottom: 6px;
}

.level-icon {
  display: block;
  margin: 10px auto 22px;
  width: 60px;
  opacity: 0.9;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: var(--gold);
}

.field input, .field textarea, .field select {
  width: 100%;
  background: var(--white);
  border: none;
  border-radius: 2px;
  padding: 10px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  color: #14142b;
}

.field textarea {
  min-height: 70px;
  resize: vertical;
  line-height: 1.4;
}
/* The CHAPTER NAME field on the Exaltation certificate reuses .cert-lodgename
   (see .cert-row textarea.cert-lodgename below) to auto-grow instead of
   behaving like a normal multi-line textarea — looks like a single-line
   field until a long name actually needs the extra room. */
.field textarea.cert-lodgename {
  min-height: unset;
  resize: none;
  overflow: hidden;
}

.field-checkbox {
  display: flex;
  align-items: center;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--gold);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--gold);
  cursor: pointer;
}

.field input:disabled, .field select:disabled {
  background: #ddd;
  color: #888;
}

.field small.hint {
  display: block;
  color: var(--gold-dim);
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.field.dashed input {
  background: transparent;
  border: 1px dashed var(--gold);
  color: var(--gold);
  text-align: center;
  letter-spacing: 1px;
}

.field.dashed .dashed-display {
  background: transparent;
  border: 1px dashed var(--gold);
  color: var(--gold);
  text-align: center;
  letter-spacing: 1px;
  padding: 10px 12px;
  border-radius: 2px;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
}

.link.milestone-next {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 10px;
  margin-top: 14px;
}

.photo-box {
  width: 150px;
  height: 190px;
  background: #fdfdfd;
  background-size: cover;
  background-position: center;
  margin: 0 auto 22px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.photo-box::after {
  content: '+ ADD PHOTO';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #999;
  padding: 8px;
}
.photo-box.has-photo::after { content: ''; }

.card {
  border: 1px dashed var(--gold);
  border-radius: 4px;
  padding: 26px 22px;
  position: relative;
}

.brother-name {
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
  margin: 4px 0 18px;
}

.star-counts-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 10px;
}
.star-count-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.star-count-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}
.star-count-label.hidden { display: none; }

.solomon-star-count {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: #6a8f9a;
}
.solomon-star-count.attendance-star { color: var(--gold); }
.solomon-star-count.hidden { display: none; }

.donated-badge {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--gold);
  text-align: center;
  margin-top: 10px;
}
.donated-badge.hidden { display: none; }

.aairo-credit {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin-top: 18px;
}
.aairo-credit a {
  color: var(--gold-dim);
  text-decoration: underline;
}

/* --- Logo badge tap → AAIRO splash popup --- */
.emblem, .emblem-sm {
  cursor: pointer;
}
.overlay-card.aairo-splash-card {
  max-height: 90vh;
  overflow-y: auto;
  padding: 16px;
}
.aairo-splash-img {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 4px;
}
.link-white {
  color: var(--white) !important;
}

.btn {
  font-family: 'Cinzel', serif;
  letter-spacing: 2px;
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--gold); color: var(--navy); font-weight: 700; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-row { display: flex; gap: 10px; margin-top: 8px; }
.btn-row .btn { flex: 1; }

/* MEETING FREQUENCY button — flashes red/white as a nudge until at least
   one meeting rule has actually been saved for that lodge/order, then
   reverts to the normal btn-ghost look on its own (see
   meetingFreqNeedsAttention() in app.js). */
@keyframes meetingfreq-flash {
  0%, 100% { background: var(--danger); color: var(--white); border-color: var(--danger); }
  50% { background: var(--white); color: var(--danger); border-color: var(--danger); }
}
.btn.meetingfreq-needed {
  animation: meetingfreq-flash 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn.meetingfreq-needed {
    animation: none;
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
  }
}

.stack { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

.link {
  text-align: center;
  font-size: 12px;
  color: var(--gold-dim);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 14px;
}

.msg {
  text-align: center;
  font-size: 12px;
  min-height: 16px;
  margin-top: 10px;
}
.msg.error { color: var(--danger); }
.msg.success { color: var(--success); }

/* --- Certificate pages --- */
.cert-page {
  background-size: cover;
  background-position: center;
  background-color: var(--navy);
  justify-content: center;
}
#page-cert-initiation.cert-page { background-image: url('assets/board-initiation.jpg'); }
#page-cert-passing.cert-page { background-image: url('assets/board-passing.jpg'); }
#page-cert-raising.cert-page { background-image: url('assets/board-raising.jpg'); }

/* --- Chapter ribbon edging: a decorative border down both sides, across
   the whole Royal Arch journey — the Mother Chapter certificate, its own
   Dues/Attendance/Dining pages, every additional Chapter Lodge's pages, and
   all the other Chapter pages (Positions, Visits, LOI, Ritual Log, Visiting
   Officer, Other Activities). Class-based (rather than an id list) so any
   page created dynamically at runtime picks it up automatically just by
   getting the class added in JS — see applyChapterRibbon() in app.js. --- */
.chapter-ribbon {
  position: relative;
  padding-left: 46px;
  padding-right: 46px;
}
.chapter-ribbon::before,
.chapter-ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  background-image: url('assets/chapter-ribbon.png');
  background-repeat: repeat-y;
  background-size: 26px auto;
  z-index: 1;
}
.chapter-ribbon::before { left: 0; }
.chapter-ribbon::after { right: 0; }

.cert-body {
  /* Lighter + blurred rather than a near-solid panel, so the tracing board
     behind the certificate text actually shows through — text-shadow on the
     text itself (below) keeps everything legible either way. */
  background: rgba(8, 8, 30, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 26px 24px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}
.cert-eyebrow {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 4px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.cert-name {
  font-family: 'Cinzel', serif;
  color: var(--white);
  font-size: 24px;
  text-align: center;
  margin: 10px 0 20px;
  letter-spacing: 1px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.cert-sentence {
  font-size: 13px;
  line-height: 2;
  color: var(--gold);
  margin-bottom: 18px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.cert-body .field label {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
.cert-sentence .fill {
  color: var(--white);
  font-weight: 700;
  border-bottom: 1px dotted var(--gold-dim);
  padding: 0 4px;
}
.cert-sentence input,
.cert-eyebrow input {
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--gold-dim);
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  padding: 2px 4px;
  width: 140px;
}
.cert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.cert-row label { font-size: 12px; letter-spacing: 1px; }
.cert-row input {
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--gold-dim);
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  text-align: right;
  width: 55%;
}
/* LODGE/CHAPTER NAME fields use a <textarea> instead of <input> so a long
   name wraps onto a second line rather than overflowing — auto-grows via
   JS (see autoGrowTextarea in app.js) so a short name still looks like a
   single-line field. */
.cert-row textarea.cert-lodgename {
  background: transparent;
  border: none;
  border-bottom: 1px dotted var(--gold-dim);
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  text-align: right;
  width: 55%;
  resize: none;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  min-height: 22px;
}
/* Date Initiated/Passed/Raised, Lodge Name & Number, Worshipful Master and
   Secretary stay WHITE even once the certificate locks (disabled) — kept
   legible against the tracing board artwork rather than fading to dim gold. */
.cert-sentence input:disabled,
.cert-eyebrow input:disabled,
.cert-row input:disabled,
.cert-row textarea.cert-lodgename:disabled {
  color: var(--white);
  opacity: 1;
  -webkit-text-fill-color: var(--white);
}

/* Photo zoom overlay — reuses the standard overlay-card look, just wider so
   a photographed certificate/summons page is actually legible. */
.overlay-card.photo-zoom-card {
  max-width: 92vw;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
}
.overlay-card.photo-zoom-card img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}
.zoom-link {
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
  margin: -8px 0 14px;
}

/* --- Coloured section tabs, split evenly across a left nav and a right
   nav (each section appears on exactly one side) --- */
.side-tabs {
  flex: 0 0 46px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100%;
  background: var(--navy-2);
  z-index: 10;
}
.side-tabs.hidden { display: none; }
.side-tabs-right { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.side-tabs-left { border-right: 1px solid rgba(255, 255, 255, 0.08); }

.side-tab {
  flex: 1;
  min-height: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  padding: 3px 0;
  color: #ffffff;
}
.side-tab.active {
  opacity: 1;
  font-weight: 700;
}

/* --- Pager row: prev/next swipe buttons flanking the position dots --- */
.pager-row {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 6;
}
.pager-row.hidden { display: none; }

/* Page-number badge (e.g. "D2") — sits just to the right of the swipe-right
   (›) button, updated in updateDots(); see computePageCodes() in app.js. */
.pager-page-code {
  color: var(--gold-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
  min-width: 24px;
}

.pager-btn {
  pointer-events: auto;
  background: #ff2d2d;
  color: #fff;
  border: 2px solid #ff6b6b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 8px 2px rgba(255, 45, 45, 0.85), 0 0 18px 6px rgba(255, 45, 45, 0.45);
  transition: box-shadow 0.15s, transform 0.1s;
}
.pager-btn:active { transform: scale(0.9); box-shadow: 0 0 4px 1px rgba(255, 45, 45, 0.85); }
.pager-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-dim);
  border-color: var(--gold-dim);
  box-shadow: none;
  cursor: default;
  opacity: 0.45;
}

.pager-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.pager-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-dim);
  opacity: 0.5;
}
.pager-dots .dot.active {
  background: var(--gold);
  opacity: 1;
}

.hidden { display: none !important; }

.btn-signout-float {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-settings-float {
  position: absolute;
  top: 10px;
  right: 56px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* Fixed (not absolute) so it stays reachable at the top of the viewport
   even on long, scrolling pages like Details or the Ritual Log. */
.btn-home-float {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: rgba(10, 10, 38, 0.85);
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* --- Generic record-list pages (Chapter, Dues, Visits, Dining, Ritual, etc.) --- */
.page-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: var(--gold);
  font-size: 17px;
  margin: 4px 0 18px;
}
.page-title.compact {
  font-size: 12px;
  letter-spacing: 1px;
  margin: 14px 0 8px;
  text-align: left;
}

.record-form { margin-bottom: 22px; }
.record-form.compact .field { margin-bottom: 10px; }
.record-form.compact .field label { font-size: 10px; }
.record-form.compact .btn { font-size: 11px; padding: 9px 14px; }

.record-list { display: flex; flex-direction: column; gap: 10px; }

.record-empty {
  font-size: 12px;
  color: var(--gold-dim);
  text-align: center;
  padding: 10px 0 4px;
}

.record-card {
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 13px;
}

.rc-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.rc-label {
  color: var(--gold-dim);
  letter-spacing: 0.5px;
  font-size: 11px;
  white-space: nowrap;
}
.rc-val {
  color: var(--white);
  text-align: right;
  word-break: break-word;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.record-actions button,
.record-actions a {
  flex: 1;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-dim);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 7px 4px;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.record-actions button:hover,
.record-actions a:hover { color: var(--gold); border-color: var(--gold); }

.solomon-card { border-color: #6a8f9a; }
.solomon-card .checkbox-label {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.solomon-progress {
  font-size: 12px;
  color: var(--gold-dim);
  text-align: center;
  margin: 4px 0 10px;
}
.solomon-heading {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #6a8f9a;
  margin: 14px 0 6px;
}
.solomon-heading:first-child { margin-top: 4px; }
.solomon-item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.solomon-item-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.solomon-item-row a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.solomon-note {
  font-size: 12px;
  color: var(--gold-dim);
  font-style: italic;
  margin-top: 8px;
}

.learning-index-row {
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.learning-index-row:hover,
.learning-index-row:active {
  border-color: var(--gold);
}
.learning-open-hint {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--gold-dim);
  text-align: right;
  margin-top: 8px;
}

.record-group-header {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--gold);
  text-align: center;
  margin: 4px 0 -2px;
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--gold-dim);
}

/* --- My Lodges overview (first page after PIN) — a badge per lodge/order --- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 14px;
  margin-top: 6px;
}
.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.badge-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #fdfdfd;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dim);
  transition: transform 0.08s ease;
}
.badge-label {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--white);
  line-height: 1.4;
}
.badge-tile.clickable {
  cursor: pointer;
}
.badge-tile.clickable:active .badge-img {
  transform: scale(0.95);
}
.badge-tile.clickable:focus-visible .badge-img {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --- Lodge Badges (Settings) — one upload row per lodge/order -------------- */
.badge-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--gold-dim);
}
.badge-settings-row:last-child { border-bottom: none; }
.badge-settings-thumb {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #fdfdfd;
  border: 1px solid var(--gold-dim);
  cursor: pointer;
  position: relative;
}
.badge-settings-thumb::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #999;
}
.badge-settings-thumb.has-custom::after { content: ''; }
.badge-settings-label {
  flex: 1;
  font-size: 12px;
  color: var(--white);
  letter-spacing: 0.3px;
}
.badge-settings-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.badge-settings-actions button {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-dim);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.badge-settings-actions button:hover { color: var(--gold); border-color: var(--gold); }

.lodge-card { border-color: #4c9a6a; }
.lodge-sub {
  margin-top: 12px;
  border-top: 1px dashed var(--gold-dim);
  padding-top: 4px;
}
.lodge-sub.hidden { display: none; }

.gate-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gold-dim);
  text-align: center;
  margin: -8px 0 18px;
}

/* --- Next Meetings page: the clash banner + flashing clash cards --- */
.next-meeting-clash-banner {
  border: 1px solid #b1544f;
  background: rgba(177, 84, 79, 0.18);
  color: #ffb3ad;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  padding: 10px 12px;
  border-radius: 4px;
  margin: -6px 0 16px;
}
.next-meeting-card { position: relative; }
.next-meeting-card.clash {
  border-color: #b1544f;
  border-width: 2px;
  animation: next-meeting-flash 0.9s ease-in-out 5;
}
.next-meeting-clash-tag {
  position: absolute;
  top: -9px;
  right: 10px;
  background: #b1544f;
  color: var(--white);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 3px;
}
@keyframes next-meeting-flash {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(177, 84, 79, 0.35); box-shadow: 0 0 10px rgba(177, 84, 79, 0.6); }
}

/* --- Full-screen overlays: the randomised house advert + the "what's
   new" version alert. Positioned relative to #shell (not the viewport),
   so they cover exactly the app's own frame, above the side tabs and
   floating buttons. --- */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 4, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}
.overlay.hidden { display: none; }
.overlay-card {
  background: var(--navy-2);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 28px 22px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.overlay-tag {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-dim);
  margin-bottom: 12px;
}
.overlay-title {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1.35;
}
.overlay-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--white);
  margin-bottom: 18px;
  text-align: left;
  white-space: pre-line; /* preserves explicit line breaks, e.g. the donate advert */
}
.overlay-body ul {
  margin: 0;
  padding-left: 18px;
}
.overlay-body li { margin-bottom: 8px; }

/* --- Meeting Frequency popup: taller/wider than the ad/version overlays,
   left-aligned throughout since it's a form, and scrolls internally on
   short screens rather than overflowing the app frame. --- */
.overlay-card.meetingfreq-card {
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}
.meetingfreq-card .overlay-title,
.meetingfreq-card .overlay-tag { text-align: center; }
.meetingfreq-rule-block {
  border-top: 1px dashed var(--gold-dim);
  padding-top: 12px;
  margin-top: 12px;
}
.meetingfreq-rule-heading {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold-dim);
  margin-bottom: 8px;
}
.meetingfreq-preview-year {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  color: var(--gold);
  margin: 18px 0 8px;
}
.meetingfreq-preview-year:first-child { margin-top: 14px; }
#meetingfreq-preview ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--white);
}

.app-version-label {
  text-align: center;
  font-size: 11px;
  color: var(--gold-dim);
  margin-top: 22px;
  letter-spacing: 1px;
}