/* LodgeWorks: the lodge-level product. It shares its look with LodgeWorks Community
   (the Hunter Freemasons Association app): white paper, #f5f5f5 stone panels, navy
   #003068 as the primary colour, gold #b68d55 as decoration only (#7f5f30 when gold
   carries text), Libre Baskerville headings and Poppins body text, both self-hosted.
   Text sizes are rem so the A / A+ / A++ control in the profile menu can scale them.

   LAYOUT RULE, and the reason for most of what follows: form controls are
   width:100% so that stacked forms line up, but a control inside an inline row
   must size to its content instead -- otherwise it claims the whole line and
   pushes the button beside it onto the next one. Every inline row here uses
   .row (or .navsearch), and direct control children of those are width:auto. */

@font-face { font-family: "Libre Baskerville"; src: url("fonts/LibreBaskerville-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/LibreBaskerville-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-normal-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-normal-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-normal-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --navy: #003068;
  --navy-deep: #00224a;
  --navy-soft: #e9eef6;
  --gold: #b68d55;
  --gold-ink: #7f5f30;
  --gold-soft: #f5eee3;
  --stone: #f5f5f5;
  --stone-deep: #ebebeb;
  --edge: #b9b9b9;
  /* the older names still used throughout this file */
  --lodge-blue: var(--navy);
  --lodge-blue-dark: var(--navy-deep);
  --ink: #222222;
  --ink-soft: #595959;
  --paper: #ffffff;
  --card: var(--stone);
  --line: #e0e0e0;
  /* The edge of anything you type into or tick: 3:1 against white, so it is drawn 1px. */
  --line-strong: #8f8f8f;
  --navy-faint: #f3f6fb;
  /* One raised surface and one floating surface; the working modal keeps its own. */
  --shadow-raised: 0 1px 2px rgba(0, 24, 56, 0.06), 0 6px 18px rgba(0, 24, 56, 0.08);
  --shadow-pop: 0 12px 28px rgba(0, 24, 56, 0.18), 0 0 0 1px rgba(0, 24, 56, 0.08);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --good: #1c6532;
  --good-bg: #e7f3ea;
  --bad: #a3241f;
  --bad-bg: #fbeceb;
  --warn: #7a4a00;
  --warn-bg: #fdf3e2;
  --radius: 10px;
  --radius-card: 16px;
  --font: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;
}

html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 125%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--lodge-blue); }
a:hover { color: var(--lodge-blue-dark); }

h1 {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.25;
}
h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--navy);
  margin: 26px 0 10px;
}
h3 {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 18px 0 7px;
}
/* Libre Baskerville is set wide; its headings and the product name are drawn a little tighter. */
h1, h2, .brand-name, .nav-home-name { letter-spacing: -0.02em; }
p.lead { font-size: 1rem; color: var(--ink-soft); margin: 0 0 18px; }
strong, b { font-weight: 700; }

/* ---------- Header: white top bar (emblem, name, profile) over a solid navy nav ---------- */

.topbar { background: var(--paper); position: relative; z-index: 25; }
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 18px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--navy); text-decoration: none; min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.375rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.brand small { font-size: 0.8125rem; font-weight: 500; color: var(--gold-ink); letter-spacing: 0.02em; white-space: nowrap; }
.topbar-spacer { flex: 1; }

/* The one rule in the system, used once under the header. */
.brand-rule { height: 2px; background: #3f444a; }

/* Section navigation: sticky and solid navy. No transparency, blur or image, so the colour stays vivid. */
.nav-wrap { position: sticky; top: 0; z-index: 20; background: var(--navy); }
.nav { max-width: 1180px; margin: 0 auto; padding: 0 8px; display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px;
  color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.nav-link[aria-current] { color: #fff; font-weight: 600; }
.nav-link:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--gold); transform: scaleX(0); opacity: 0.6; transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current]::after { transform: scaleX(1); opacity: 1; }

/* Member search: input and button stay on one line, always. Solid colours, no see-through white. */
.navsearch { margin-left: auto; display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; flex: 0 0 auto; padding: 6px 0; }
.navsearch input[type="text"] {
  width: 220px; flex: 0 0 220px; min-width: 0; min-height: 38px; padding: 6px 12px;
  font-family: var(--font); font-size: 0.875rem; color: #fff;
  background: var(--navy-deep); border: 1px solid #3a679f; border-radius: var(--radius);
}
.navsearch input::placeholder { color: #b9c9de; }
.navsearch input:focus { outline: none; background: #fff; color: var(--ink); border-color: #fff; }
.navsearch button {
  flex: 0 0 auto; width: auto; min-height: 38px; padding: 6px 14px; font-size: 0.875rem;
  background: var(--navy-deep); border: 1px solid #3a679f;
}
.navsearch button:hover { background: #0a3a75; border-color: #5a86bd; }

@media (max-width: 720px) {
  .navsearch { margin-left: 0; width: 100%; padding: 0 8px 10px; }
  .navsearch input[type="text"] { flex: 1 1 auto; width: auto; }
}
@media (max-width: 520px) {
  .brand img { width: 36px; height: 36px; }
  .brand-name { font-size: 1.1875rem; }
}

/* Text size control (A / A+ / A++), shown in the profile menu and on the sign-in page. */
.text-size { display: flex; border: 1.5px solid var(--edge); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.text-size button {
  min-width: 44px; min-height: 40px; border: 0; border-radius: 0; background: var(--paper); color: var(--navy);
  font-family: var(--serif); font-size: 1rem; font-weight: 400; cursor: pointer; padding: 0 8px;
}
.text-size button + button { border-left: 1.5px solid var(--edge); }
.text-size button:hover { background: var(--stone); }
.text-size button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* Profile menu, top right: name and avatar (a placeholder: initials), then the account links. */
.profile { position: relative; }
.profile > summary { list-style: none; }
.profile-button {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px 4px 16px; border-radius: 999px;
  cursor: pointer; user-select: none; color: var(--navy); font-weight: 500;
}
.profile-button::-webkit-details-marker { display: none; }
.profile-button:hover, .profile[open] > .profile-button { background: var(--stone); }
.profile-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: var(--serif); font-size: 0.9375rem; letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold);
}
.avatar-large { width: 52px; height: 52px; font-size: 1.125rem; }
.nav-caret {
  width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); opacity: 0.85;
}
.profile[open] .nav-caret { transform: rotate(225deg); margin-top: 3px; }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 8px;
  background: var(--paper); color: var(--ink); border-radius: 14px;
  box-shadow: var(--shadow-pop);
}
.profile-who { display: flex; align-items: center; gap: 14px; padding: 10px 12px 14px; }
.profile-who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.profile-who-text strong, .profile-who-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-who-text span { color: var(--ink-soft); font-size: 0.875rem; }
.profile-menu > a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--radius); color: var(--navy);
  font-weight: 600; text-decoration: none;
}
.profile-menu > a:hover { background: var(--stone); }
.profile-menu > a[aria-current="page"] { background: var(--navy-soft); }
.profile-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 14px; }
.profile-size-label { font-weight: 600; color: var(--navy); }
.profile-menu hr { border: 0; border-top: 1px solid var(--edge); margin: 6px; }
.profile-menu > a.profile-signout { color: var(--bad); }
.profile-menu > a.profile-signout:hover { background: var(--bad-bg); }
@media (max-width: 520px) { .profile-name { display: none; } .profile-button { padding-left: 8px; } }
@media (prefers-reduced-motion: no-preference) {
  .profile[open] .profile-menu { animation: menu-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top right; }
  .nav-caret { transition: transform 200ms ease-out, margin 200ms ease-out; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

main { max-width: 1180px; margin: 0 auto; padding: 20px 18px 60px; }

/* ---------- Cards and grids ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  margin-bottom: 15px;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.tight { gap: 6px; }
.spacer { flex: 1 1 auto; }

/* The layout rule. A control placed directly in an inline row sizes to its
   content; only controls inside a stacked form block fill the width. */
.row > input, .row > select, .row > textarea, .row > button, .row > .btn,
.row > form > input, .row > form > select, .row > form > button,
.row form.row > input, .row form.row > select, .row form.row > button,
form.row > input, form.row > select, form.row > textarea,
form.row > button, form.row > .btn {
  width: auto;
  flex: 0 0 auto;
}
/* A labelled field inside a row still stacks its label above its control. */
.row > div { flex: 1 1 auto; min-width: 0; }
.row > div.fixed { flex: 0 0 auto; }
.row form { margin: 0; }

/* ---------- Buttons ---------- */

.btn, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-height: 38px;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius);
  border: 2px solid var(--lodge-blue);
  background: var(--lodge-blue);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover, button:hover {
  background: var(--lodge-blue-dark);
  border-color: var(--lodge-blue-dark);
  color: #fff;
}
.btn.secondary, button.secondary { background: #fff; color: var(--lodge-blue); }
.btn.secondary:hover, button.secondary:hover {
  background: var(--navy-soft);
  color: var(--lodge-blue-dark);
}
.btn.danger, button.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger:hover, button.danger:hover { background: #7d1a15; border-color: #7d1a15; }
.btn.big {
  min-height: 52px;
  font-size: 1rem;
  padding: 12px 24px;
  width: 100%;
}
.btn.quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
  min-height: 32px;
  padding: 5px 11px;
  font-weight: 500;
  font-size: 0.8125rem;
}
.btn.quiet:hover { background: var(--stone-deep); color: var(--ink); }
.btn[disabled], button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* A button directly under a field, a choice, or a grid of fields needs air
   above it or it reads as touching the control before it. Rows and choices
   already carry their own gap, so a button placed *inside* one is left alone. */
input + button, input + .btn,
select + button, select + .btn,
textarea + button, textarea + .btn,
.choice + button, .choice + .btn,
.grid + button, .grid + .btn,
label + button, label + .btn,
input + .row, select + .row, textarea + .row, .choice + .row, .grid + .row,
table + button, table + .btn, .table-wrap + button, .table-wrap + .btn {
  margin-top: 14px;
}
.row > button, .row > .btn { margin-top: 0; }

/* A pill-shaped balance, sized to sit next to a button rather than fill a
   whole card -- red/white in arrears, green/white in credit, white with a
   border at exactly zero so it still reads against the page. */
.pill-balance {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.3;
}
.pill-balance.arrears { background: var(--bad); color: #fff; }
.pill-balance.credit { background: var(--good); color: #fff; }
.pill-balance.zero { background: #fff; color: var(--ink); border: 1px solid var(--edge); }

/* ---------- Forms ---------- */

label { display: block; font-weight: 600; font-size: 0.875rem; margin: 12px 0 4px; }
label:first-child { margin-top: 0; }
label .hint {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
/* A hint that stands on its own (after a field, not inside its label) --
   used whenever putting the hint inside the label would make that label taller
   than its neighbour in the same row and throw the two fields out of line. */
p.hint {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 4px 0 0;
}

input[type="text"], input[type="email"], input[type="date"], input[type="number"],
input[type="tel"], input[type="time"], input[type="file"], select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
textarea { min-height: 95px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
fieldset { border: 1px solid var(--edge); border-radius: var(--radius); padding: 4px 14px 14px; margin: 14px 0; }
legend { font-weight: 700; font-size: 0.875rem; padding: 0 5px; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  margin: 8px 0;
  background: #fff;
  cursor: pointer;
}
.choice:hover { border-color: var(--lodge-blue); }
.choice input { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 auto; }
.choice strong { display: block; font-size: 0.9375rem; }
.choice .hint { display: block; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.45; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.875rem; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Column headings are quiet words over one firmer rule, not a grey band of capitals. */
th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom-color: var(--edge);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color 120ms ease-out; }
tbody tr:hover { background: var(--navy-faint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tight, th.tight { white-space: nowrap; }
tr.voided td { color: #8a8a8a; text-decoration: line-through; }
table.plain th { font-size: 0.875rem; color: var(--ink); }

/* The rank above the name in the members list. */
.rank {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- Status ---------- */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
}
.pill.arrears { background: var(--bad-bg); color: var(--bad); }
.pill.credit { background: var(--good-bg); color: var(--good); }
.pill.post { background: var(--warn-bg); color: var(--warn); }
.pill.email { background: var(--navy-soft); color: var(--lodge-blue); }
.pill.former { background: var(--stone-deep); color: var(--ink-soft); }

.note {
  border-left: 4px solid var(--lodge-blue);
  background: var(--navy-soft);
  padding: 12px 15px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 14px 0;
}
.note.warn { border-color: var(--warn); background: var(--warn-bg); }
.note.bad { border-color: var(--bad); background: var(--bad-bg); }
.note.good { border-color: var(--good); background: var(--good-bg); }
.note h3 { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
.note p { margin: 0 0 8px; }
/* Which month a run step is for -- big enough not to be skimmed past. */
.note.run-banner { font-size: 1rem; }
.note.run-banner a { margin-left: 6px; font-size: 0.875rem; }
/* The out-of-order warning on the send step, and its override. */
.note.hang-on h3 { font-size: 1.25rem; }
fieldset.hang-on { border-color: var(--bad); }

/* Notice papers started and not sent, on the front page. */
.on-the-go { list-style: none; padding: 0; margin: 10px 0 0; }
.on-the-go li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.on-the-go li { background: var(--paper); }
.on-the-go li.due { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.on-the-go .which { flex: 1 1 260px; }
.on-the-go .month { font-size: 1.125rem; margin-right: 8px; }
.on-the-go .hint { display: block; color: var(--ink-soft); font-size: 0.875rem; margin-top: 4px; }

/* The card a page leads with (the monthly job on the front page): white and raised, so it is
   the first thing the eye lands on among the stone cards. */
.card.lead-card { background: var(--paper); box-shadow: var(--shadow-raised), 0 0 0 1px var(--line); border-top: 3px solid var(--gold); }

/* The figures strip: one quiet card, the figures side by side, and only the one that matters
   most (.stat.key) is big. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 14px; padding: 14px 22px; }
.stats .stat { display: flex; flex-direction: column; justify-content: flex-end; text-align: left; padding: 6px 0; }
.stats .stat .value { font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats .stat.key .value { font-size: 1.6875rem; font-weight: 700; line-height: 1.15; color: var(--lodge-blue); }

.stat { text-align: center; padding: 12px; }
.stat .value {
  display: block;
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--lodge-blue);
}
.stat .label { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.4; }

/* ---------- Wizard ---------- */

.steps { display: flex; gap: 5px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 18px; }
.steps li {
  flex: 1 1 125px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: var(--stone-deep);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.35;
  border: 2px solid transparent;
}
.steps li .n { font-weight: 700; display: block; font-size: 0.6875rem; letter-spacing: 0.5px; }
.steps li.now { background: #fff; border-color: var(--lodge-blue); color: var(--ink); font-weight: 600; }
.steps li.done { background: var(--good-bg); color: var(--good); }

.mono { font-family: Consolas, "Courier New", monospace; font-size: 0.8125rem; word-break: break-all; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.8125rem; }
.preview { border: 1px solid var(--edge); border-radius: var(--radius); padding: 14px; background: #fff; }
summary { cursor: pointer; }

/* ---------- Bar charts (Member Insights) ----------

   Bars, not meters: a count grows from a baseline on the card surface. There is
   deliberately no track behind the bar -- a track means "this much out of a
   fixed limit", which is not what a headcount is.

   The bar is a BLOCK. A span left at display:inline silently ignores width and
   height, renders 0x0, and leaves you looking at whatever is behind it.

   One hue for every bar (#2a78d6, validated: lightness band, chroma floor and
   3:1 against the card). The rows are already ordered and the length already
   shows the magnitude, so colour is not asked to restate either. */

.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  --bar-colour: #2a78d6;
}
.bars li {
  display: grid;
  grid-template-columns: minmax(74px, 33%) 1fr 30px;
  gap: 10px;
  align-items: center;
  /* The surface gap that keeps touching bars distinct. Line-height is pulled in
     to match the bar, or the label's leading makes the rows twice as airy as
     the bars need. */
  padding: 2px 0;
  line-height: 1.2;
  font-size: 0.8125rem;
  min-width: 0;
}
.bars .bar-label {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The plot area. Its left edge is the baseline the bars grow from. */
.bars .bar-plot {
  position: relative;
  height: 14px;                 /* well under the 24px cap; leaves air */
  min-width: 0;
  box-shadow: inset 1px 0 0 var(--line);
}
.bars .bar {
  display: block;               /* the whole bug: inline ignores width/height */
  height: 100%;
  min-width: 3px;               /* a count of 1 is still visible */
  background: var(--bar-colour);
  /* Rounded at the data end, square against the baseline. */
  border-radius: 0 4px 4px 0;
}
/* Values wear text tokens, never the series colour. */
.bars .bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .bars li { grid-template-columns: minmax(64px, 42%) 1fr 26px; gap: 7px; }
}

footer.foot {
  background: var(--stone);
  padding: 14px 18px;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  text-align: center;
}

@media print {
  .topbar, .nav-wrap, footer.foot, .btn, button, .steps { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Drop zones ----------
   A real file input inside a label, so clicking opens the picker and the whole
   thing still works with no JavaScript. drop.js adds dragging on top. */

.dropzone {
  display: block;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 18px;
  margin: 10px 0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dropzone:hover { border-color: var(--lodge-blue); background: var(--navy-faint); }
.dropzone.over {
  border-color: var(--lodge-blue);
  border-style: solid;
  background: var(--navy-soft);
}
.dropzone .dropzone-main {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--lodge-blue);
  margin-bottom: 2px;
}
.dropzone .dropzone-hint {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.dropzone input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: none;
  background: none;
  padding: 0;
  min-height: 0;
  font-size: 0.8125rem;
  cursor: pointer;
}
.dropzone .dropzone-status {
  display: block;
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--good);
}
.dropzone .dropzone-status.bad { color: var(--bad); }
.dropzone .dropzone-status:empty { display: none; }

/* ---------- Login ---------- */

body.login-page {
  min-height: 100vh;
  margin: 0;
  background: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  padding: 24px;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 34px 32px 26px;
  box-shadow: 0 18px 44px rgba(0, 24, 56, 0.16), 0 0 0 1px rgba(0, 24, 56, 0.06);
  text-align: center;
  animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.login-emblem { width: 80px; height: 80px; margin: 0 auto 14px; }
.login-emblem img { width: 100%; height: 100%; display: block; }
.login-size { display: flex; justify-content: center; margin-top: 18px; }

.login-card h1 {
  font-size: 1.625rem;
  margin: 0 0 2px;
}
.login-sub {
  margin: 0 0 22px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
}

.login-card label { text-align: left; font-size: 0.8125rem; }
.login-card input[type="password"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  letter-spacing: 3px;
  font-size: 1rem;
  min-height: 46px;
}
.login-card .btn.big { margin-top: 16px; min-height: 48px; font-size: 0.9375rem; }

.login-note {
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-radius: var(--radius);
  padding: 11px 13px;
  margin-bottom: 16px;
  background: var(--navy-soft);
  color: var(--ink);
}
.login-note.bad { background: var(--bad-bg); color: var(--bad); }

/* A support session: the platform administrator inside this lodge. Never subtle. */
.support-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  padding: 8px 18px; background: var(--warn-bg); color: var(--warn); border-bottom: 2px solid var(--warn);
  font-size: 0.9375rem;
}
.support-banner form { margin: 0; }

/* The bare domain's "your lodge's address" box: the lodge name, then the domain. */
.lodge-address { display: flex; align-items: center; gap: 6px; }
.lodge-address input[type="text"] { flex: 1 1 auto; min-width: 0; min-height: 46px; font-size: 1rem; text-align: right; }
.lodge-address-domain { flex: none; font-weight: 600; color: var(--navy); }
.login-card .hint { text-align: left; }

.login-foot {
  margin: 20px 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* ---------- Working modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 22, 48, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal {
  background: #fff;
  border-radius: 14px;
  padding: 28px 30px 22px;
  width: 100%;
  max-width: 430px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 12, 30, 0.4);
}
.modal h2 { margin: 0 0 2px; font-size: 1.125rem; color: var(--lodge-blue); }
.modal .modal-sub {
  margin: 0 0 16px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  min-height: 18px;
}
.modal .modal-foot {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid #dfe4ea;
  border-top-color: var(--lodge-blue);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal .track {
  height: 10px;
  border-radius: 999px;
  background: var(--stone-deep);
  overflow: hidden;
}
.modal .fill {
  height: 100%;
  border-radius: 999px;
  background: var(--lodge-blue);
  width: 2%;
  transition: width 0.4s ease;
}

/* The skeleton pulse: a highlight sweeping along the filled part, so the bar
   reads as "still working" even while the number has not moved. */
.modal .fill.pulse {
  background-image: linear-gradient(
    90deg,
    var(--lodge-blue) 0%,
    #2f74bd 40%,
    #4f92d8 50%,
    #2f74bd 60%,
    var(--lodge-blue) 100%
  );
  background-size: 220% 100%;
  animation: sweep 1.35s ease-in-out infinite;
}
@keyframes sweep {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  .modal .fill.pulse { animation: none; }
}

/* ---------- Moving between pages ----------
   The header and the navy bar hold still while the page under them changes: the old page fades
   out and the new one fades in and rises a little. This replaces cards cascading in on every
   load, which made each click feel like a wait. In the monthly job the "now" marker slides
   from one step to the next. A browser without cross-page view transitions just shows the page.

   Windows' own "Animation effects" setting (Settings > Accessibility > Visual effects) is what
   feeds prefers-reduced-motion on this machine, and it's off by default for plenty of people
   who never touched it on purpose. So under "reduce" the rise is dropped and the quick fade is
   kept -- the travel is the part reduced-motion guidance actually objects to. */

@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.nav-wrap { view-transition-name: nav; }
.steps li.now { view-transition-name: step-now; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

::view-transition-old(root) { animation: fade-out 120ms ease-out both; }
::view-transition-new(root) { animation: fade-in 200ms ease-out both; }
::view-transition-group(step-now) { animation-duration: 320ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-new(root) { animation: page-in 240ms var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(step-now) { animation-duration: 1ms; }
}

/* ---------- Things that open ----------
   A list of suggestions eases in under its box; a member card or a fold opens to its height
   instead of snapping (where the browser can animate to "auto"; elsewhere it opens at once). */
.picker-results:not([hidden]) { animation: fade-in 140ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .profile[open] .profile-menu { animation: fade-in 140ms ease-out both; }
}
@media (prefers-reduced-motion: no-preference) {
  .picker-results:not([hidden]) { animation: menu-in 160ms var(--ease) both; }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details.form-card::details-content, details.fold::details-content {
      block-size: 0; overflow: clip;
      transition: block-size 260ms var(--ease), content-visibility 260ms allow-discrete;
    }
    details.form-card[open]::details-content, details.fold[open]::details-content { block-size: auto; }
  }
}

/* ---------- Small icon buttons (e.g. the CSV download on Members) ---------- */
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- Member cards (view and edit) ----------
   Roughly forty-five fields are grouped into cards so the member screens never
   read as one long form. The view page shows only what is recorded; the edit page
   folds each card into a <details> so nothing is hidden without a count saying
   how much is inside. */

.grid > .wide { grid-column: 1 / -1; }

.card-head { display: flex; align-items: baseline; gap: 10px; }
.card-head h2 { margin: 0 0 6px; }
.card-head .edit-link { margin-left: auto; font-size: 0.8125rem; font-weight: 500; }

table.facts { width: 100%; }
table.facts td { padding: 5px 0; border-bottom: 1px solid var(--line); }
table.facts tr:last-child td { border-bottom: none; }
table.facts td.k { color: var(--ink-soft); width: 38%; padding-right: 12px; }
table.facts td.num { padding-left: 8px; }
.multiline { white-space: pre-line; }

.card.card-quiet { background: transparent; border-style: dashed; }

ul.offices { list-style: none; margin: 0 0 8px; padding: 0; }
ul.offices li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line);
}
ul.offices li form { margin: 0; }
details.add-office { margin-top: 6px; }
details.add-office summary { color: var(--lodge-blue); font-weight: 500; }
details.add-office form { margin-top: 8px; }

/* Edit page */
.card-tools { margin: 0 0 12px; gap: 6px 14px; }
details.form-card { padding: 0; }
details.form-card > summary {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 18px; cursor: pointer; list-style: none;
}
details.form-card > summary::-webkit-details-marker { display: none; }
details.form-card > summary::before {
  content: "\25B8"; color: var(--ink-soft); font-size: 0.75rem; width: 10px;
}
details.form-card[open] > summary::before { content: "\25BE"; }
details.form-card > summary:hover { background: var(--stone-deep); }
details.form-card .card-title { font-size: 1.0625rem; font-weight: 600; }
details.form-card .card-blurb { flex: 1; color: var(--ink-soft); font-size: 0.8125rem; }
details.form-card .card-count {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-soft);
  background: var(--stone-deep); border-radius: 999px; padding: 1px 10px;
  white-space: nowrap;
}
details.form-card > .card-body { padding: 0 18px 16px; }
details.form-card[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }

/* Save stays in reach however many cards are open. */
.form-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 0; margin-top: 4px;
  background: linear-gradient(to top, var(--paper) 70%, transparent);
}
@media (max-width: 560px) {
  details.form-card .card-blurb { display: none; }
  table.facts td.k { width: 42%; }
}

/* Two cards across on a desktop (three left Finance stranded on its own row),
   one on a phone. min() stops a 420px track overflowing a narrow screen. */
.grid.member-cards { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* A fold inside an edit card: the fields most people never touch. */
details.fold { margin-top: 14px; }
details.fold > summary { cursor: pointer; color: var(--lodge-blue); font-weight: 500; font-size: 0.875rem; }
details.fold[open] > summary { margin-bottom: 10px; }


/* ---------- Logo slides into the nav once the header scrolls away ---------- */
.nav-home {
  display: inline-flex; flex-direction: column; justify-content: center; max-width: 0; padding: 0; overflow: hidden;
  opacity: 0; color: #fff; text-decoration: none; white-space: nowrap; line-height: 1.15;
  transition: max-width 340ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease-out, padding 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-home-name { font-family: var(--serif); font-weight: 700; font-size: 1rem; color: #fff; }
.nav-home-lodge { font-size: 0.75rem; font-weight: 500; color: #fff; opacity: 0.85; }
.nav-wrap.is-stuck .nav-home { max-width: 220px; opacity: 1; padding: 0 16px 0 8px; }
.nav-wrap { transition: box-shadow 240ms ease-out; }
.nav-wrap.is-stuck { box-shadow: 0 8px 20px rgba(0, 24, 56, 0.22); }
@media (max-width: 720px) { .nav-home { display: none; } }

/* ---------- Pick-a-member box ---------- */
.picker { position: relative; }
.picker-results {
  list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; z-index: 15; max-height: 320px;
  overflow-y: auto; background: var(--paper); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.picker-results li { padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.picker-results li:hover, .picker-results li[aria-selected="true"] { background: var(--navy-soft); }
.picker-results li.picker-none { cursor: default; color: var(--ink-soft); }
.picker-results li.picker-none:hover { background: transparent; }

/* ---------- Pager ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.pager-count { color: var(--ink-soft); font-size: 0.875rem; }
.pager-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0 12px;
  border-radius: var(--radius); background: var(--stone); color: var(--navy); font-weight: 600; font-size: 0.875rem; text-decoration: none;
}
a.pager-link:hover { background: var(--navy-soft); }
.pager-link.current { background: var(--navy); color: #fff; }

/* ---------- Buttons: feedback ----------
   A button answers the pointer at once: one step of its own colour in 150ms, and a small press.
   Nothing grows, so a button in a table row never nudges its neighbours.

   The holographic sheen (a diagonal band of gold light, and a glow) is kept for the one big
   button a page leads with. Under "reduce motion" the band does not travel; the sheen and glow
   simply fade in (Windows' animation switch is off on some machines, and the effect would
   otherwise never be seen). */
.btn, button, input[type="submit"] {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, box-shadow 300ms ease-out;
}
.btn:focus-visible, button:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.navsearch button:focus-visible { outline-color: #fff; }
.btn[disabled], button[disabled] { box-shadow: none; }

.btn.big { --sheen: rgba(182, 141, 85, 0.6); --glow: rgba(182, 141, 85, 0.45); }
.btn.big::before {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, transparent, transparent 30%, var(--sheen));
  transform: rotate(-45deg); opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.btn.big:hover, .btn.big:focus-visible { box-shadow: 0 0 18px var(--glow); }
.btn.big:hover::before, .btn.big:focus-visible::before { opacity: 1; transform: rotate(-45deg) translateY(100%); }
.btn.big[disabled] { box-shadow: none; }
.btn.big[disabled]::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn:active, button:active { transform: scale(0.98); }
  .btn[disabled]:active, button[disabled]:active, .text-size button:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.big::before { transition: opacity 0.3s ease; }
}

/* Every button, on hover or keyboard focus: it glows and pops up a little (3%; a transform, so
   nothing beside it moves). Each kind sets its own glow: gold under navy, navy under white and
   the quiet ones, red under red. Under "reduce motion" the glow fades in and nothing grows. */
.btn, button, input[type="submit"] { --glow: rgba(182, 141, 85, 0.6); }
.btn.secondary, button.secondary { --glow: rgba(0, 48, 104, 0.3); }
.btn.danger, button.danger { --glow: rgba(163, 36, 31, 0.5); }
.btn.quiet { --glow: rgba(0, 48, 104, 0.2); }

.btn:hover, button:hover, .btn:focus-visible, button:focus-visible { box-shadow: 0 0 18px var(--glow); }
.btn[disabled], button[disabled], .text-size button { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn, button, input[type="submit"] {
    transition: transform 180ms var(--ease), background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, box-shadow 300ms ease-out;
  }
  .btn:hover, button:hover, .btn:focus-visible, button:focus-visible { transform: scale(1.03); }
  .btn.big:hover, .btn.big:focus-visible { transform: scale(1.01); }
  .btn:active, button:active { transform: scale(0.98); }
  .btn[disabled], button[disabled], .text-size button,
  .btn[disabled]:active, button[disabled]:active, .text-size button:active { transform: none; }
}
.pager-gap { color: var(--ink-soft); padding: 0 2px; }


/* The member search in the nav is the same pick-a-member box as the ledger's, dressed for the navy bar. */
.navsearch .picker { width: 220px; flex: 0 0 220px; }
.navsearch .picker-input { width: 100%; }
.navsearch .picker-results { left: auto; right: 0; width: 340px; max-width: calc(100vw - 24px); }
@media (max-width: 720px) {
  .navsearch .picker { flex: 1 1 auto; width: auto; }
  .navsearch .picker-results { left: 0; right: auto; width: 100%; }
}