/* Lefela2Okuthile Group Funding — palette per validated reference */
:root{
  --page:#f9f9f7; --surface:#fcfcfb;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --ring:rgba(11,11,11,.10);
  --accent:#2a78d6; --accent-deep:#1c5cab; --accent-wash:#cde2fb;
  --good:#0ca30c; --good-text:#006300; --warn-bg:#fdf3e0; --warn-ink:#7a5200;
  --ok-bg:#e7f6e7; --ok-ink:#006300;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#0d0d0d; --surface:#1a1a19;
    --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --baseline:#383835; --ring:rgba(255,255,255,.10);
    --accent:#3987e5; --accent-deep:#86b6ef; --accent-wash:#0d366b;
    --good:#0ca30c; --good-text:#0ca30c; --warn-bg:#3a2f14; --warn-ink:#fab219;
    --ok-bg:#12300f; --ok-ink:#7ed07e;
  }
}
*{box-sizing:border-box}
.certificate-download:disabled{
  background:#777;color:#eee;border-color:#777;opacity:.65;cursor:not-allowed}
.member-admin-chat .chat-thread{
  max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.member-admin-chat .chat-msg{padding:10px;border:1px solid var(--grid);border-radius:8px}
.member-admin-chat .chat-msg.admin{border-left:3px solid var(--accent)}
.member-admin-chat .chat-message-text{white-space:pre-wrap;overflow-wrap:anywhere}
.member-admin-chat form{margin-top:12px}
.member-admin-chat .chat-msg .muted{font-size:12px}

/* floating chat widget — fixed to the bottom-right of the viewport */
.chat-widget{position:fixed;right:18px;bottom:18px;z-index:500}
.chat-toggle{display:flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font:600 14px/1.3 "Open Sans",sans-serif;
  padding:12px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.chat-toggle:hover{background:var(--accent-deep)}
.chat-widget[data-open="true"] .chat-toggle{display:none}
.chat-unread-badge{background:#d6342a;color:#fff;border-radius:999px;
  min-width:20px;height:20px;padding:0 6px;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.chat-panel{position:fixed;right:18px;bottom:18px;z-index:500;
  width:360px;max-width:calc(100vw - 32px);max-height:min(520px,calc(100vh - 32px));
  display:flex;flex-direction:column;overflow:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.28)}
.chat-panel[hidden]{display:none}
.chat-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-panel-head h3{margin:0}
.chat-close{border:none;background:transparent;font-size:22px;line-height:1;
  cursor:pointer;color:var(--ink-2);padding:0 4px}
.chat-close:hover{color:var(--ink)}
html{background:var(--page)}
body{margin:0;min-height:100vh;color:var(--ink);
  background:
    radial-gradient(1400px 520px at 50% -10%, rgba(42,120,214,.07) 0%, transparent 55%),
    var(--page);
  font:16px/1.6 "Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{
  font-family:"PT Serif",Georgia,"Times New Roman",serif;
  letter-spacing:0;font-weight:700}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video{max-width:100%;height:auto}
/* fluid container — scales from phone to a wide laptop/PC screen instead of
   capping out at a fixed width and leaving the sides empty on big monitors */
.wrap{max-width:min(1180px,94vw);margin:0 auto;padding:0 20px}
@media (max-width:480px){.wrap{padding:0 14px}}

/* nav */
nav{background:linear-gradient(180deg,var(--surface) 0%,var(--page) 100%);
  border-bottom:1px solid var(--grid);
  position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 var(--accent),0 2px 10px rgba(11,11,11,.07)}
nav .wrap{display:flex;align-items:center;gap:16px;min-height:62px;
  flex-wrap:nowrap}
.nav-collapse{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.nav-links{display:flex;align-items:center;gap:14px;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-auth{display:flex;align-items:center;gap:10px;flex:none;
  margin-left:auto;white-space:nowrap}
.nav-user{font-size:13px;color:var(--muted)}
nav a.nav-link{white-space:nowrap}
.brand{font-weight:700;font-size:18px;color:var(--ink);flex:none;
  display:flex;align-items:center;gap:10px}
.brand-mark{height:38px;width:auto;object-fit:contain;flex:none}
.brand-text{line-height:1.2;display:flex;flex-direction:column;
  justify-content:center}
.brand-line1{font-size:16px;font-weight:700;white-space:nowrap}
.brand-line2{font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;margin-top:1px}
.brand .accent{color:var(--accent)}
nav a.nav-link{color:var(--ink-2);font-size:14.5px;padding:6px 2px;
  border-bottom:2px solid transparent;transition:color .15s;
  display:inline-flex;align-items:center;gap:6px}
.nav-icon{width:15px;height:15px;flex:none;opacity:.8}
.subnav .nav-icon,.nav-dropdown summary .nav-icon{width:14px;height:14px}
.nav-dropdown-menu .nav-icon{width:13px;height:13px;opacity:.65}
nav a.nav-link:hover{color:var(--ink);text-decoration:none}
nav a.nav-link.active{color:var(--ink);font-weight:600;
  border-bottom:2px solid var(--accent)}
nav .spacer{flex:1}
/* Committee subnav — wraps to a second line instead of hiding items behind
   an undiscoverable horizontal scroll (the old overflow-x:auto + hidden
   scrollbar meant several links were invisible unless you knew to swipe) */
.subnav{border-top:1px solid var(--grid);background:var(--page)}
.subnav .wrap{display:flex;align-items:center;gap:5px 8px;min-height:42px;
  flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.subnav-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);flex:none;
  padding-right:4px}
.subnav a.nav-link{font-size:13px;white-space:nowrap;flex:none;
  border-radius:7px;padding:6px 8px;display:inline-flex;align-items:center;gap:6px}
.subnav a.nav-link:hover{background:var(--accent-wash)}
.subnav a.nav-link.active{border-bottom:none;background:var(--accent-wash);
  color:var(--accent-deep)}

@media (min-width:761px){
  .subnav .wrap{max-width:1440px;width:100%}
}

/* subnav dropdown groups (Members, Finance) — plain <details>, no JS */
.nav-dropdown{position:relative;flex:none}
.nav-dropdown summary{list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);
  font-size:13px;padding:6px 8px;border-radius:7px;white-space:nowrap}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown summary::marker{content:""}
.nav-dropdown summary:hover{background:var(--accent-wash);color:var(--ink)}
.nav-dropdown[open] summary{background:var(--accent-wash)}
.nav-dropdown.group-active summary{color:var(--ink);font-weight:600}
.nav-dropdown .chev{width:12px;height:12px;flex:none;opacity:.7;
  transition:transform .15s}
.nav-dropdown[open] .chev{transform:rotate(180deg)}
.nav-dropdown-menu{display:flex;flex-direction:column;gap:2px;
  margin:6px 0 2px;padding:6px;background:var(--surface);
  border:1px solid var(--ring);border-radius:10px;
  box-shadow:0 10px 26px rgba(11,11,11,.16);min-width:190px}
.nav-dropdown-menu a{padding:8px 10px;border-radius:6px;font-size:13.5px;
  color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:8px}
.nav-dropdown-menu a:hover{background:var(--accent-wash);color:var(--accent-deep);
  text-decoration:none}
.nav-dropdown-menu a.active{background:var(--accent-wash);
  color:var(--accent-deep);font-weight:600}
@media (min-width:761px){
  .nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30}
}
@media (max-width:760px){
  /* an open dropdown takes the full subnav row width so its menu can't
     run past the right edge of a narrow screen */
  .nav-dropdown{flex:1 1 100%}
  .nav-dropdown-menu{width:100%;box-sizing:border-box}
}

/* mobile nav toggle (pure CSS, no JS) */
/* explicit width/height stop the generic input{width:100%} rule below from
   stretching this invisible checkbox to the full page width, which was
   silently forcing a horizontal scrollbar on every page at every size */
.nav-toggle-input{position:absolute;opacity:0;pointer-events:none;
  width:36px;height:36px;margin:0}
.nav-toggle-btn{display:none;flex-direction:column;justify-content:center;
  align-items:center;gap:4px;width:36px;height:36px;flex:none;
  margin-left:auto;border-radius:8px;cursor:pointer}
.nav-toggle-btn:hover{background:var(--accent-wash)}
.nav-toggle-btn span{display:block;width:18px;height:2px;background:var(--ink);
  border-radius:1px;transition:transform .15s, opacity .15s}
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(1){
  transform:translateY(6px) rotate(45deg)}
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(2){opacity:0}
.nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg)}
.nav-toggle-input:focus-visible ~ .nav-toggle-btn{outline:2px solid var(--accent)}

@media (max-width:760px){
  nav .wrap{flex-wrap:wrap}
  .nav-toggle-btn{display:flex}
  .nav-collapse{display:none;flex-basis:100%;flex-direction:column;
    align-items:stretch;gap:2px;order:5;padding:6px 0 14px}
  .nav-toggle-input:checked ~ .nav-collapse{display:flex}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;
    flex:none;width:100%;overflow-x:visible}
  nav .nav-links a.nav-link{padding:11px 4px;border-bottom:1px solid var(--grid);
    border-left:3px solid transparent}
  nav .nav-links a.nav-link.active{border-bottom:1px solid var(--grid);
    border-left:3px solid var(--accent);padding-left:9px}
  .nav-auth{width:100%;margin:10px 0 0;flex-wrap:wrap}
  .nav-user{padding:6px 0}
  .subnav .wrap{gap:10px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  color:#fff;border:0;
  border-radius:8px;padding:9px 16px;font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:filter .15s, transform .1s, box-shadow .15s;
  box-shadow:0 1px 2px rgba(11,11,11,.14),0 2px 8px rgba(28,92,171,.18)}
.btn .nav-icon{flex:none}
.btn:hover{filter:brightness(1.08);text-decoration:none;
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(28,92,171,.28)}
.btn:active{transform:translateY(0);filter:brightness(.98)}
.btn.ghost{background:transparent;color:var(--accent);
  border:1px solid var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--accent-wash);color:var(--accent-deep);
  box-shadow:0 2px 6px rgba(11,11,11,.08)}
.btn.small{padding:5px 12px;font-size:13px}
.btn.danger{background:transparent;color:#d03b3b;border:1px solid #d03b3b;
  box-shadow:none}
.btn.danger:hover{background:rgba(208,59,59,.08)}

/* layout */
main{padding:clamp(20px,4vw,34px) 0 70px}
main.wide-admin-page > .wrap{max-width:min(1440px,96vw)}
h1{font-size:clamp(24px,2vw + 18px,30px);line-height:1.2;margin:0 0 8px;
  max-width:100%;overflow-wrap:anywhere}
h2{font-size:clamp(18px,.6vw + 17px,21px);margin:34px 0 10px;max-width:100%;
  overflow-wrap:anywhere}
h3{font-size:16.5px;margin:0 0 6px}
p.lead{color:var(--ink-2);font-size:17.5px;max-width:640px;margin-top:0}
.card{background:linear-gradient(180deg,var(--surface) 0%,var(--page) 100%);
  border:1px solid var(--ring);
  border-radius:14px;padding:20px 22px;margin:14px 0;
  box-shadow:0 1px 3px rgba(11,11,11,.05);
  transition:box-shadow .15s, transform .15s}
.card:hover{box-shadow:0 6px 18px rgba(11,11,11,.09);transform:translateY(-1px)}
/* align-items:start stops a short card from being stretched to match a much
   taller sibling in the same grid row (was leaving large dead white space
   inside short cards, e.g. the financials chart card next to the taller
   loan-portfolio/top-members column) */
.grid{display:grid;gap:14px;align-items:start}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Stat-tile rows (cols-4 is only ever used for .tile score cards, never
   the chart/list .card layouts the align-items:start comment above is
   about) should line up as a uniform grid of equal-height boxes. */
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  align-items:stretch}
.grid.cols-4 .tile{display:flex;flex-direction:column;justify-content:center;
  height:100%}
.committee-account-grid{grid-template-columns:minmax(0,1fr)}
.committee-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.committee-forms>.card,.committee-current{min-width:0}
.committee-current{scroll-margin-top:24px}
@media (max-width:900px){
  .committee-forms{grid-template-columns:minmax(0,1fr)}
}
.group-financial-scorecards{grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;align-items:stretch}
.group-financial-scorecards .tile{min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:center}
.unit-ownership-scorecards{grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:1fr;align-items:stretch}
.unit-ownership-scorecards .tile{grid-column:span 3;min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:center}
.unit-ownership-scorecards .tile:nth-child(n+5){grid-column:span 4}
.unit-ownership-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
form.stack .unit-ownership-fields>label{display:flex;flex-direction:column;
  gap:6px;min-width:0;margin:0}
.unit-ownership-fields>label>span{flex:1}
.unit-ownership-fields input,.unit-ownership-fields select{min-width:0}
@media (max-width:900px){
  .group-financial-scorecards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-ownership-scorecards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .unit-ownership-scorecards .tile{grid-column:span 1}
  .unit-ownership-scorecards .tile:nth-child(n+5){grid-column:span 1}
  .unit-ownership-scorecards .tile:last-child{grid-column:1 / -1}
}
@media (max-width:480px){
  .group-financial-scorecards{grid-template-columns:minmax(0,1fr)}
  .unit-ownership-scorecards,.unit-ownership-fields{grid-template-columns:minmax(0,1fr)}
}

/* left-aligned title + right-aligned action button(s), replacing the old
   pattern of a button squeezed inside the lead paragraph */
.page-header{display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px 16px;flex-wrap:wrap;margin-bottom:2px}
.page-header h1{margin-bottom:0}
.page-header .page-actions{display:flex;gap:8px;flex-wrap:wrap;
  flex:none;padding-top:2px;margin-top:-15px}

/* small "which section am I in" label, left-aligned above every page's
   title — e.g. "FINANCE" above "Transactions" — so a page always shows
   which subnav group it belongs to, matching the grouped nav */
.page-eyebrow{display:flex;align-items:center;gap:6px;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px}
.page-eyebrow .nav-icon{width:13px;height:13px;opacity:.9}

/* member dashboard hero — the one number a member actually opens the page
   for (current worth) gets its own prominent card instead of sitting as
   just another tile in a wall of ten identical boxes */
.hero-stat{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  border-radius:16px;padding:24px 26px;color:#fff;margin:18px 0 4px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px 22px;
  box-shadow:0 10px 26px rgba(28,92,171,.28)}
.hs-label{display:flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.88}
.hs-label .nav-icon{width:14px;height:14px}
.hs-value{font-size:clamp(26px,3vw + 16px,38px);font-weight:700;line-height:1.15;margin-top:3px}
.hs-sub{font-size:12.5px;opacity:.85;margin-top:3px;max-width:420px}
.hs-badge{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  border-radius:12px;padding:12px 18px;text-align:right;flex:none}
.hb-label{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.hb-value{font-size:21px;font-weight:700;margin-top:2px}
.hs-badge.loss .hb-value{color:#ffd9d9}

/* groups a row of tiles under a small section label instead of one long
   undifferentiated wall of identical boxes */
.tile-section{margin:22px 0 0}
.tile-section h4{font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}

/* stat tiles */
.tile{background:linear-gradient(165deg,var(--surface) 0%,var(--page) 100%);
  border:1px solid var(--ring);
  border-radius:14px;padding:16px 18px;position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(11,11,11,.05);
  transition:box-shadow .15s, transform .15s}
.tile:hover{box-shadow:0 6px 16px rgba(11,11,11,.09);transform:translateY(-1px)}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);
  opacity:.9}
.tile .label{font-size:13px;color:var(--muted);margin-bottom:4px}
.tile .value{font-size:clamp(19px,1.6vw + 15px,28px);font-weight:600;
  overflow-wrap:anywhere;line-height:1.15}
.tile .sub{font-size:12.5px;color:var(--ink-2);margin-top:3px}
@media (max-width:900px){
  /* a 4-column stat-tile row at tablet width squeezed numbers like
     R1,207,510 past their card edge at the old fixed 28px size */
  .grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:600px){
  .hs-badge{text-align:left;width:100%}
}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14.5px}
/* fallback for the few tables not wrapped in .table-wrap — scrolls instead
   of forcing the whole page to scroll sideways on phones/tablets */
@media (max-width:760px){
  table{display:block;overflow-x:auto;white-space:nowrap}
}
th{color:var(--muted);font-weight:500;text-align:left;font-size:13px;
  padding:8px 10px;border-bottom:1px solid var(--grid)}
td{padding:9px 10px;border-bottom:1px solid var(--grid);
  font-variant-numeric:tabular-nums}
.committee-table{table-layout:fixed}
.committee-table th:nth-child(1){width:16%}
.committee-table th:nth-child(2){width:12%}
.committee-table th:nth-child(3){width:19%}
.committee-table th:nth-child(4){width:23%}
.committee-table th:nth-child(5){width:10%}
.committee-table th:nth-child(6){width:20%}
.committee-table td{overflow-wrap:anywhere;vertical-align:top}
.committee-table .inline-form{display:block;margin:0 0 6px}
.committee-table .inline-form:last-child{margin-bottom:0}
.committee-group-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.committee-table input,.committee-table select{min-width:0;max-width:100%}
.committee-table .btn{max-width:100%;white-space:normal}
.committee-actions details{margin-bottom:12px}
@media (max-width:900px){
  .committee-table{display:table;white-space:normal}
  .committee-table thead{display:none}
  .committee-table tbody{display:block}
  .committee-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--grid)}
  .committee-table td{display:block;padding:6px 0;border-bottom:0}
  .committee-table td::before{content:attr(data-label);display:block;
    margin-bottom:3px;font-size:13px;font-weight:600;color:var(--muted)}
  .committee-table td[colspan]::before{content:none}
}
.referrals-layout{grid-template-columns:minmax(0,1fr)}
.referrals-layout>.card{min-width:0}
.referrals-table{table-layout:fixed}
.referrals-table td{overflow-wrap:anywhere;vertical-align:top}
.referrals-table th:last-child{width:30%}
.referral-actions .inline-form{display:flex;flex-direction:column;gap:6px;
  align-items:stretch;margin:0 0 8px}
.referral-actions .inline-form:last-child{margin-bottom:0}
.referral-actions input:not([type="hidden"]){width:100%;min-width:0;max-width:100%}
.referral-actions .btn{width:100%;max-width:100%;white-space:normal}
@media (max-width:760px){
  .referrals-table{display:block;white-space:normal}
  .referrals-table thead{display:none}
  .referrals-table tbody{display:block}
  .referrals-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--grid)}
  .referrals-table tr:last-child{border-bottom:0}
  .referrals-table td{display:block;padding:6px 0;border-bottom:0}
  .referrals-table td::before{content:attr(data-label);display:block;
    margin-bottom:3px;font-size:13px;
    font-weight:600;color:var(--muted)}
  .referrals-table td[colspan]{display:block}
  .referrals-table td[colspan]::before{content:none}
  .referrals-table td.referral-actions{display:block}
  .referral-actions::before{display:block;margin-bottom:6px}
}
tr:last-child td{border-bottom:0}
tbody tr:hover td, table tr:hover td{background:rgba(42,120,214,.045)}

/* forms */
form.stack label{display:block;font-size:13.5px;color:var(--ink-2);
  margin:14px 0 4px;font-weight:500}
input,select,textarea{width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--baseline);border-radius:8px;padding:9px 11px;
  font:inherit;font-size:14.5px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);
  outline-offset:-1px;border-color:var(--accent)}
form .hint{font-size:12.5px;color:var(--muted);margin-top:3px}
.inline-form{display:inline}

/* flash */
.flash{border-radius:8px;padding:10px 14px;margin:0 0 14px;font-size:14.5px}
.flash.ok{background:var(--ok-bg);color:var(--ok-ink)}
.flash.warn{background:var(--warn-bg);color:var(--warn-ink)}

/* badges */
.badge{display:inline-block;font-size:12px;border-radius:20px;
  padding:2px 10px;font-weight:600}
.badge.public{background:var(--accent-wash);color:var(--accent-deep)}
.badge.members{background:var(--warn-bg);color:var(--warn-ink)}
.badge.pending{background:var(--warn-bg);color:var(--warn-ink)}
.badge.approved,.badge.active{background:var(--ok-bg);color:var(--ok-ink)}
.badge.declined,.badge.rejected,.badge.danger{background:rgba(208,59,59,.12);color:#d03b3b}
.badge.settled{background:var(--accent-wash);color:var(--accent-deep)}
.badge.chairperson{background:var(--accent-wash);color:var(--accent-deep)}
.badge.secretary{background:var(--warn-bg);color:var(--warn-ink)}
.badge.treasurer{background:var(--ok-bg);color:var(--ok-ink)}

/* news */
.post{border-bottom:1px solid var(--grid);padding:18px 0}
.post:last-child{border-bottom:0}
.post-heading{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.post-title{min-width:0;overflow-wrap:anywhere}
.post-heading .badge{flex:none;margin-top:2px}
.post .meta{font-size:12.5px;color:var(--muted);margin-top:6px}
.post p{color:var(--ink-2);margin:6px 0 0}

/* chart */
.chart{margin-top:6px}
.chart .row{display:flex;align-items:flex-end;gap:6px;height:120px;
  border-bottom:1px solid var(--baseline);padding:0 2px}
.chart .bar{flex:1;max-width:24px;background:var(--accent);
  border-radius:4px 4px 0 0;position:relative;min-height:2px}
.chart .bar.zero{background:var(--grid)}
.chart .bar:hover{background:var(--accent-deep)}
.chart .bar.compare{background:var(--muted);opacity:.55}
.chart .bar.compare:hover{background:var(--ink-2);opacity:.85}
.chart .bar.compare.zero{background:var(--grid)}
.chart .bar .tip{display:none;position:absolute;bottom:calc(100% + 6px);
  left:50%;transform:translateX(-50%);background:var(--ink);color:var(--page);
  font-size:12px;border-radius:6px;padding:4px 8px;white-space:nowrap;z-index:2}
.chart .bar:hover .tip{display:block}
.chart .labels{display:flex;gap:6px;padding:4px 2px 0}
.chart .labels span{flex:1;max-width:24px;text-align:center;font-size:10.5px;
  color:var(--muted)}

/* hero */
.hero{padding:48px 34px 40px;margin:22px 0 20px;border-radius:18px;
  position:relative;overflow:hidden;
  background:
    url("hero.svg") no-repeat right bottom / auto 82%,
    radial-gradient(1100px 420px at 85% -60%, var(--accent-wash), transparent 70%),
    linear-gradient(155deg,var(--surface) 0%,var(--page) 100%);
  border:1px solid var(--ring);
  box-shadow:0 2px 16px rgba(11,11,11,.07)}
.hero::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 50%,var(--accent) 100%)}
.hero h1{font-size:clamp(26px,4vw + 14px,40px);max-width:660px;letter-spacing:0}
.hero p.lead{max-width:560px}
.hero .tag{color:var(--accent);font-weight:600;font-size:13.5px;
  letter-spacing:.08em;text-transform:uppercase}
.hero .actions{margin:24px 0 4px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:900px){
  .hero{background-size:auto 40%,auto,auto;padding-bottom:150px}}
@media (max-width:640px){
  .hero{padding:32px 20px 140px}
}


/* tiers */
.tier{border:1px solid var(--ring);border-radius:14px;padding:18px;
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--surface) 0%,var(--page) 100%);
  box-shadow:0 1px 3px rgba(11,11,11,.05);
  transition:transform .12s, box-shadow .12s}
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-deep) 100%)}
.tier:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(11,11,11,.12)}
.tier .price{font-size:26px;font-weight:600;margin:2px 0}
.tier .price small{font-size:13px;color:var(--muted);font-weight:400}
.tier ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:14px}

/* section headings get a small accent tick */
h2{position:relative;padding-left:14px}
h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.18em;
  width:4px;border-radius:2px;background:var(--accent)}

/* meters & horizontal bars */
.meter{height:10px;border-radius:5px;background:var(--accent-wash);
  margin-top:10px;overflow:hidden}
.meter-fill{height:100%;border-radius:5px;background:var(--accent);
  min-width:2px}
.loan-item{border-bottom:1px solid var(--grid);padding:14px 0}
.loan-item:last-child{border-bottom:0}
.hbar-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.hbar-row .hbar-label{width:150px;flex:none;font-size:13px;color:var(--ink-2)}
.hbar-row .hbar-track{flex:1;display:flex;align-items:center;gap:8px}
.hbar-row .hbar{height:16px;border-radius:0 4px 4px 0;background:var(--accent);
  min-width:2px}
.hbar-row .hbar-val{font-size:12.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--grid);color:var(--muted);font-size:13px;
  padding:22px 0 40px;
  background:linear-gradient(180deg,transparent 0%,rgba(11,11,11,.012) 100%)}
.footer-inner{display:flex;align-items:center;gap:12px}
.footer-mark{height:26px;width:auto;object-fit:contain;flex:none;opacity:.9}
@media (max-width:520px){.footer-inner{align-items:flex-start}}
.muted{color:var(--muted)} .ink2{color:var(--ink-2)}
.right{text-align:right}
.mt0{margin-top:0}

/* member area shell + topline (dashboard/loans header row) */
.member-shell{width:100%}
.member-topline{display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;width:100%}

/* scrollable table wrapper for narrow screens */
.table-wrap{overflow-x:auto}
.members-wrap{overflow-x:auto}
.members-table{white-space:nowrap}

/* filter/search bar (admin members) */
.filters-card{padding:16px 18px}
.controls-bar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;
  color:var(--ink-2);font-weight:500}
.field input,.field select{width:auto;min-width:150px}
.field-search{flex:1 1 240px;min-width:200px}
.field-search input{width:100%}
.controls-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.results-meta{font-size:12.5px;color:var(--muted);margin:12px 0 0}

/* soft inline sub-panel (property workflow steps, used inside cards) */
.panel-soft{background:var(--page);border:1px solid var(--grid);
  border-radius:10px;padding:14px 16px;margin-top:10px}

/* property agreement register (collapsible rows) */
.property-item{border:1px solid var(--ring);border-radius:12px;
  margin:10px 0;overflow:hidden;background:var(--surface)}
.property-item[open]{box-shadow:0 2px 10px rgba(11,11,11,.06)}
.property-summary{cursor:pointer;list-style:none;padding:14px 16px;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap}
.property-summary::-webkit-details-marker{display:none}
.property-summary::marker{content:""}
.property-summary::before{content:"▸";color:var(--accent);
  margin-right:8px;transition:transform .15s;display:inline-block}
.property-item[open] .property-summary::before{transform:rotate(90deg)}
.property-main{display:flex;flex-direction:column;gap:2px}
.property-sub{font-size:12.5px;color:var(--muted)}
.property-meta{display:flex;align-items:center;gap:10px}
.property-price{font-weight:700;font-size:16px}
.property-detail{padding:0 16px 16px}

/* committee/member chat thread */
.chat-thread{display:flex;flex-direction:column;gap:8px;
  max-height:280px;overflow:auto;margin-top:4px}
.chat-msg{padding:8px 10px;border-radius:8px;background:var(--page);
  border:1px solid var(--grid)}
.chat-msg.admin{background:var(--accent-wash);border-color:var(--accent-wash)}
.chat-msg.member{background:var(--page)}

/* news attachment thumbnails */
.news-images{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.news-image{width:140px;height:100px;object-fit:cover;border-radius:8px;
  border:1px solid var(--grid);display:block}
.news-video{width:100%;max-width:420px;max-height:280px;border-radius:8px;
  border:1px solid var(--grid);display:block;background:#000}

/* dark theme toggle — an explicit data-theme attribute always overrides the
   @media (prefers-color-scheme) block above, since an attribute selector
   outranks a bare :root; with no explicit choice the site still just
   follows the OS/browser setting exactly as before this toggle existed */
:root[data-theme="dark"]{
  --page:#0d0d0d; --surface:#1a1a19;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --baseline:#383835; --ring:rgba(255,255,255,.10);
  --accent:#3987e5; --accent-deep:#86b6ef; --accent-wash:#0d366b;
  --good:#0ca30c; --good-text:#0ca30c; --warn-bg:#3a2f14; --warn-ink:#fab219;
  --ok-bg:#12300f; --ok-ink:#7ed07e;
}
:root[data-theme="light"]{
  --page:#f9f9f7; --surface:#fcfcfb;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --ring:rgba(11,11,11,.10);
  --accent:#2a78d6; --accent-deep:#1c5cab; --accent-wash:#cde2fb;
  --good:#0ca30c; --good-text:#006300; --warn-bg:#fdf3e0; --warn-ink:#7a5200;
  --ok-bg:#e7f6e7; --ok-ink:#006300;
}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;border:1px solid var(--baseline);
  background:transparent;color:var(--ink-2);cursor:pointer;flex:none;
  padding:0;transition:background .15s,color .15s}
.theme-toggle:hover{background:var(--accent-wash);color:var(--accent-deep)}
.theme-toggle-sun{display:none}
.theme-toggle-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle-sun{display:block}
:root[data-theme="dark"] .theme-toggle-moon{display:none}
:root[data-theme="light"] .theme-toggle-sun{display:none}
:root[data-theme="light"] .theme-toggle-moon{display:block}

/* =====================================================================
   Responsive layer (Oct 2026) — phones, tablets, laptops and desktops.
   Fixes found by testing every page at 375px, 768px and 1366px wide.
   ===================================================================== */

/* Any grid/flex child that holds a table or long text may shrink instead
   of pushing the page wider than the screen */
.card,.tile,.grid>*,.panel-soft{min-width:0}

/* Tables: base.html wraps every bare <table> in .table-scroll so a wide
   table scrolls inside its own card instead of bursting out of it (was
   happening on Loans and Member detail at tablet AND laptop widths) */
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.table-scroll>table{min-width:100%}

/* Title-row action buttons wrap onto their own line on narrow screens
   (they used to run off the right edge of the dashboard on phones) */
.page-header .page-actions{flex:0 1 auto;max-width:100%}
@media (max-width:760px){
  .page-header .page-actions{flex:1 1 100%;margin-top:4px}
  .page-header .page-actions .btn{white-space:normal;text-align:left}
}

/* Bar charts squeeze to fit, and scroll if they still cannot */
.chart{overflow-x:auto}
.chart .row,.chart .labels{gap:clamp(2px,.8vw,6px)}
.chart .bar,.chart .labels span{min-width:0}

/* Committee menu on phones: folded behind one "Committee menu" button
   instead of permanently filling a third of the screen */
.subnav-toggle-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.subnav-toggle{display:none}
@media (max-width:760px){
  .subnav .wrap{padding-top:4px;padding-bottom:4px}
  .subnav-toggle{display:flex;align-items:center;justify-content:space-between;
    gap:8px;width:100%;min-height:44px;cursor:pointer;font-size:14px;
    font-weight:600;color:var(--ink)}
  .subnav-toggle .chev{width:14px;height:14px;transition:transform .15s}
  .subnav-toggle-input:checked + .subnav-toggle .chev{transform:rotate(180deg)}
  .subnav-toggle-input:focus-visible + .subnav-toggle{outline:2px solid var(--accent);border-radius:8px}
  .subnav-label{display:none}
  .subnav .wrap>a.nav-link,.subnav .wrap>.nav-dropdown{display:none}
  .subnav-toggle-input:checked ~ a.nav-link,
  .subnav-toggle-input:checked ~ .nav-dropdown{display:flex}
  .subnav-toggle-input:checked ~ a.nav-link{flex:1 1 100%}
  /* the open menu scrolls on its own if it is taller than the screen */
  nav{max-height:100vh;max-height:100dvh;overflow-y:auto}
}

/* Bottom tab bar for members on phones — Dashboard, Loans, News, Account
   always one tap away, like a phone app */
.tabbar{display:none}
@media (max-width:760px){
  body.has-tabbar .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:none;overflow:visible;
    z-index:40;background:var(--surface);border-top:1px solid var(--grid);
    box-shadow:0 -2px 12px rgba(11,11,11,.06);
    padding:4px max(6px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:2px;min-height:54px;font-size:11.5px;
    font-weight:600;color:var(--muted);text-decoration:none;border-radius:10px}
  .tabbar a .nav-icon{width:22px;height:22px;opacity:1;padding:3px;
    box-sizing:content-box;border-radius:12px;width:22px}
  .tabbar a.active{color:var(--accent-deep)}
  .tabbar a.active .nav-icon{background:var(--accent-wash)}
  .tabbar a:hover{text-decoration:none;color:var(--ink)}
  body.has-tabbar main{padding-bottom:110px}
  body.has-tabbar footer{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  /* floating chat sits above the tab bar, and shrinks to a round button */
  body.has-tabbar .chat-widget,body.has-tabbar .chat-panel{
    bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:760px){
  .chat-widget{right:max(12px,env(safe-area-inset-right,0px))}
  .chat-toggle{padding:12px 14px}
  .chat-toggle-label{max-width:0;overflow:hidden;white-space:nowrap}
  .chat-toggle::before{content:"";width:22px;height:22px;flex:none;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat}
  .chat-panel{left:12px;right:12px;width:auto;max-width:none;
    max-height:calc(100dvh - 120px)}
}

/* Phones: tighter cards, text inputs at 16px so iPhones do not zoom in */
@media (max-width:760px){
  .card{padding:16px}
  .hero-stat{padding:20px}
  input,select,textarea{font-size:16px}
  .field input,.field select{min-width:0;width:100%}
  .field{flex:1 1 140px}
  .controls-actions{margin-left:0;width:100%}
  .hbar-row .hbar-label{width:96px}
  .footer-inner{flex-wrap:wrap}
  .footer-inner a{margin-left:0!important}
}
@media (max-width:420px){
  .tile{padding:14px}
  .tile .value{font-size:19px}
}

/* Touch screens (phones, tablets, touch laptops): buttons big enough to
   tap without hitting the neighbour */
@media (pointer:coarse){
  .btn.small{min-height:40px;padding:8px 14px}
  .btn{min-height:44px}
  .subnav a.nav-link,.nav-dropdown summary,.nav-dropdown-menu a{min-height:42px}
  .theme-toggle{width:42px;height:42px}
  .nav-toggle-btn{width:44px;height:44px}
  input,select,textarea{min-height:44px}
  input[type=checkbox],input[type=radio]{min-height:0}
}

/* Wide desktop monitors: use more of the screen for data-heavy pages */
@media (min-width:1600px){
  .wrap{max-width:1280px}
  main.wide-admin-page>.wrap{max-width:1560px}
}

/* Keyboard users can always see where they are */
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Committee header on laptops/small desktops: the long "Switch to Member
   view" label and committee title shrink so the main links are not cut off */
@media (min-width:761px) and (max-width:1280px){
  .nav-auth .switch-label{display:none}
  .nav-user .nav-user-title{display:none}
}

/* =====================================================================
   Member-app design (Oct 2026) — matches the Lefela2Okuthile member app
   design: DM Sans type, warm off-white ground, deep blue accent, flat
   white cards with soft corners, a blue "current worth" card, a left
   sidebar on laptops/desktops and a bottom tab bar on phones.
   Everything above stays as the base; this layer only restyles.
   ===================================================================== */
:root{
  --page:#f4f1eb; --surface:#ffffff; --surface-2:#efebe3;
  --ink:#1d1b18; --ink-2:#4a463f; --muted:#6b665d;
  --grid:#e4ded3; --baseline:#d3ccbe; --ring:#e4ded3;
  --accent:#2257b3; --accent-deep:#183f8a; --accent-wash:#e3ebf8;
  --hero:#2257b3; --on-accent:#ffffff;
  --warn-bg:#fbeee2; --warn-ink:#9a4a12; --ok-bg:#e1f2e8; --ok-ink:#1f7a4d;
  --danger:#b3261e; --danger-bg:#fbe7e5;
  --shadow:0 1px 2px rgba(40,32,18,.05),0 6px 20px rgba(40,32,18,.05);
  --r-lg:22px; --r-md:16px; --r-sm:12px; --side-w:256px;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#12110e; --surface:#1c1a16; --surface-2:#26231e;
    --ink:#f1ede5; --ink-2:#cfc9be; --muted:#a8a196;
    --grid:#2f2b25; --baseline:#3e3a32; --ring:#2f2b25;
    --accent:#7aa4ee; --accent-deep:#a9c4f5; --accent-wash:#1f2c44;
    --hero:#24529f; --on-accent:#0f1625;
    --warn-bg:#3a2616; --warn-ink:#f0a46a; --ok-bg:#173126; --ok-ink:#6fd3a0;
    --danger:#f2867e; --danger-bg:#3a1a18;
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --page:#12110e; --surface:#1c1a16; --surface-2:#26231e;
  --ink:#f1ede5; --ink-2:#cfc9be; --muted:#a8a196;
  --grid:#2f2b25; --baseline:#3e3a32; --ring:#2f2b25;
  --accent:#7aa4ee; --accent-deep:#a9c4f5; --accent-wash:#1f2c44;
  --hero:#24529f; --on-accent:#0f1625;
  --warn-bg:#3a2616; --warn-ink:#f0a46a; --ok-bg:#173126; --ok-ink:#6fd3a0;
  --danger:#f2867e; --danger-bg:#3a1a18;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --page:#f4f1eb; --surface:#ffffff; --surface-2:#efebe3;
  --ink:#1d1b18; --ink-2:#4a463f; --muted:#6b665d;
  --grid:#e4ded3; --baseline:#d3ccbe; --ring:#e4ded3;
  --accent:#2257b3; --accent-deep:#183f8a; --accent-wash:#e3ebf8;
  --hero:#2257b3; --on-accent:#ffffff;
  --warn-bg:#fbeee2; --warn-ink:#9a4a12; --ok-bg:#e1f2e8; --ok-ink:#1f7a4d;
  --danger:#b3261e; --danger-bg:#fbe7e5;
}

/* ---- type & ground ---- */
html{background:var(--page)}
body{background:var(--page);color:var(--ink);font-family:var(--font-body);
  font-size:15.5px;line-height:1.55}
h1,h2,h3,h4,.brand{font-family:var(--font-body);letter-spacing:-.02em}
h1{font-size:clamp(26px,1.2vw + 21px,34px);font-weight:700;letter-spacing:-.025em;
  line-height:1.1;text-wrap:balance}
h2{font-size:clamp(18px,.4vw + 16px,21px);font-weight:700;padding-left:0;
  margin:30px 0 12px;text-wrap:balance}
h2::before{content:none}
h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
p.lead{color:var(--muted);font-size:16px}
td,.tile .value,.hs-value,.hb-value,.tier .price,.property-price{font-variant-numeric:tabular-nums}
.page-eyebrow,.subnav-label,.tile-section h4,.hs-label,.hb-label{
  font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.08em}
.page-eyebrow{color:var(--muted)}

/* ---- cards & tiles: flat white, soft corners, no lift on hover ---- */
.card{background:var(--surface);border:1px solid var(--grid);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow)}
.card:hover{transform:none;box-shadow:var(--shadow)}
.tile{background:var(--surface);border:1px solid var(--grid);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:16px 18px}
.tile:hover{transform:none;box-shadow:var(--shadow)}
.tile::before{content:none}
.tile .label{font-size:13px;color:var(--muted)}
.tile .value{font-weight:700;letter-spacing:-.015em;font-size:clamp(19px,1vw + 15px,24px)}
.tile .sub{color:var(--muted)}
.panel-soft{background:var(--surface-2);border:0;border-radius:var(--r-sm)}
.tier{background:var(--surface);border:1px solid var(--grid);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.tier::before{content:none}
.tier:hover{transform:none;box-shadow:var(--shadow);border-color:var(--accent)}
.property-item{border-color:var(--grid);border-radius:var(--r-md)}

/* ---- the blue "current worth" card ---- */
.hero-stat{background:var(--hero);border-radius:var(--r-lg);box-shadow:none;
  padding:clamp(20px,3vw,28px);position:relative;overflow:hidden;color:#fff}
.hero-stat::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  border-radius:50%;border:38px solid rgba(255,255,255,.07);pointer-events:none}
.hero-stat>*{position:relative;z-index:1}
.hs-label{opacity:.9}
.hs-value{font-size:clamp(32px,2.2vw + 24px,50px);letter-spacing:-.035em;line-height:1.05;margin:6px 0 8px}
.hs-badge{background:#fff;color:#183f8a;border:0;border-radius:var(--r-md)}
.hs-badge .hb-label{opacity:.75}
.hs-badge.loss .hb-value{color:#9a2b22}

/* ---- buttons, inputs, badges ---- */
.btn{background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);
  font-weight:600;box-shadow:none;padding:10px 18px}
.btn:hover{background:var(--accent-deep);filter:none;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--baseline)}
.btn.ghost:hover{border-color:var(--accent);background:transparent;color:var(--accent)}
.btn.small{border-radius:999px;padding:6px 14px}
.btn.danger{color:var(--danger);border:1.5px solid var(--danger);background:transparent}
.btn.danger:hover{background:var(--danger-bg)}
input,select,textarea{background:var(--surface);border:1.5px solid var(--baseline);
  border-radius:var(--r-sm);padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash)}
input[type=range]{accent-color:var(--accent);border:0;box-shadow:none;padding:0}
form.stack label{color:var(--muted);font-weight:500}
.badge{border-radius:999px;padding:2px 10px;font-weight:600}
.badge.declined,.badge.rejected,.badge.danger{background:var(--danger-bg);color:var(--danger)}
.flash{border-radius:var(--r-sm)}
.certificate-download:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--grid)}

/* ---- tables & charts ---- */
th{color:var(--muted);font-weight:500;font-size:12.5px;border-bottom:1px solid var(--grid)}
td{border-bottom:1px solid var(--grid)}
tbody tr:hover td,table tr:hover td{background:var(--surface-2)}
.chart .row{border-bottom:1px solid var(--grid);
  background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 50%}
.chart .bar{border-radius:4px 4px 0 0}
.chart .bar.compare{background:var(--baseline);opacity:1}
.meter{background:var(--surface-2);height:8px}
.hbar-row .hbar{border-radius:0 4px 4px 0}

/* ---- top bar (public pages, and phones/tablets when signed in) ---- */
nav{background:color-mix(in srgb,var(--page) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:none;border-bottom:1px solid var(--grid)}
nav a.nav-link{color:var(--muted);font-weight:600;font-size:14.5px;border-radius:10px;
  padding:7px 10px;border-bottom:0}
nav a.nav-link:hover{color:var(--ink);background:var(--surface-2)}
nav a.nav-link.active{color:var(--accent-deep);background:var(--accent-wash);border-bottom:0}
.brand-line1{font-weight:700;letter-spacing:-.01em}
.brand-line2{font-family:var(--font-mono);font-weight:500;letter-spacing:.06em;color:var(--muted)!important}
.subnav{background:transparent;border-top:1px solid var(--grid)}
.subnav a.nav-link:hover,.nav-dropdown summary:hover{background:var(--surface-2)}
.subnav a.nav-link.active,.nav-dropdown[open] summary{background:var(--accent-wash);color:var(--accent-deep)}
.nav-dropdown-menu{border:1px solid var(--grid);border-radius:var(--r-md);box-shadow:var(--shadow)}
.theme-toggle{border-radius:50%;border:0}
.theme-toggle:hover{background:var(--surface-2)}
.nav-user{color:var(--muted)}
footer{background:transparent;border-top:1px solid var(--grid)}
@media (max-width:760px){
  nav .nav-links a.nav-link{border-radius:10px;border-bottom:0;border-left:0;padding:12px}
  nav .nav-links a.nav-link.active{border:0;padding-left:12px}
}

/* ---- bottom tab bar (phones) ---- */
@media (max-width:760px){
  body.has-tabbar .tabbar{background:color-mix(in srgb,var(--surface) 94%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none;
    border-top:1px solid var(--grid)}
  .tabbar a .nav-icon{width:22px;height:22px;padding:4px 15px;border-radius:15px;
    transition:background .15s}
  .tabbar a.active{color:var(--accent-deep)}
}

/* ---- sidebar layout for signed-in users on laptops & desktops ---- */
@media (min-width:1024px){
  body.app-shell{padding-left:var(--side-w)}
  body.app-shell>nav:not(.tabbar){position:fixed;left:0;top:0;bottom:0;
    width:var(--side-w);height:100vh;height:100dvh;max-height:none;z-index:30;
    display:flex;flex-direction:column;gap:2px;overflow-y:auto;
    background:var(--surface);border-bottom:0;border-right:1px solid var(--grid);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding:calc(22px + env(safe-area-inset-top,0px)) 14px 18px max(14px,env(safe-area-inset-left,0px))}
  body.app-shell>nav>.wrap,body.app-shell>nav .nav-collapse{display:contents}
  body.app-shell .nav-toggle-input,body.app-shell .nav-toggle-btn{display:none}
  body.app-shell nav .brand{order:1;padding:0 8px 16px}
  body.app-shell nav .nav-links{order:2;flex-direction:column;align-items:stretch;
    gap:2px;flex:none;overflow:visible}
  body.app-shell nav .nav-links a.nav-link,
  body.app-shell .subnav a.nav-link,
  body.app-shell .nav-dropdown summary{display:flex;align-items:center;gap:12px;
    width:100%;min-height:44px;padding:0 12px;border-radius:12px;font-size:14.5px;
    font-weight:600;color:var(--muted)}
  body.app-shell nav .nav-icon{width:18px;height:18px;opacity:.9}
  body.app-shell nav .nav-links a.nav-link.active,
  body.app-shell .subnav a.nav-link.active{background:var(--accent-wash);color:var(--accent-deep)}
  body.app-shell .nav-dropdown.group-active summary{color:var(--ink)}
  body.app-shell .nav-dropdown .chev{margin-left:auto}
  body.app-shell .subnav{order:3;border-top:1px solid var(--grid);margin-top:12px;padding-top:10px}
  body.app-shell .subnav .wrap{display:flex;flex-direction:column;align-items:stretch;
    gap:2px;padding:0;max-width:none;min-height:0;width:auto}
  body.app-shell .subnav-label{padding:6px 12px 6px;color:var(--muted)}
  body.app-shell .nav-dropdown{width:100%}
  body.app-shell .nav-dropdown-menu{position:static;border:0;box-shadow:none;
    background:transparent;padding:0 0 4px 30px;margin:0;min-width:0}
  body.app-shell .nav-dropdown-menu a{min-height:36px;font-size:14px;border-radius:10px}
  body.app-shell nav .nav-auth{order:4;margin-top:auto;padding-top:14px;
    border-top:1px solid var(--grid);display:flex;flex-direction:column;
    align-items:stretch;gap:8px;white-space:normal}
  body.app-shell nav .nav-auth .inline-form{display:block}
  body.app-shell nav .nav-auth .btn{width:100%}
  body.app-shell nav .nav-auth .switch-label,
  body.app-shell nav .nav-user .nav-user-title{display:inline}
  body.app-shell nav .theme-toggle{align-self:flex-start}
  body.app-shell nav .nav-user{order:-1;display:block;padding:10px 12px;border-radius:14px;
    background:var(--surface-2);color:var(--ink);font-weight:600;font-size:14px;line-height:1.35}
  body.app-shell nav .nav-user:hover{text-decoration:none;background:var(--accent-wash)}
  body.app-shell main{padding-top:28px}
  body.app-shell main>.wrap,body.app-shell main.wide-admin-page>.wrap{
    max-width:1240px;padding-left:clamp(24px,3vw,44px);padding-right:clamp(24px,3vw,44px)}
  body.app-shell footer .wrap{max-width:1240px;padding-left:clamp(24px,3vw,44px)}
}
@media (min-width:1600px){
  body.app-shell main>.wrap,body.app-shell main.wide-admin-page>.wrap{max-width:1440px}
}
@media (min-width:1024px){
  body.app-shell nav .nav-auth{margin-left:0;width:100%}
  body.app-shell nav .nav-auth>*{max-width:100%}
}
.chat-toggle{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px rgba(20,30,60,.22)}
.chat-toggle:hover{background:var(--accent-deep)}
.hero{background:url("hero.svg") no-repeat right bottom / auto 82%,var(--surface);
  border:1px solid var(--grid);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.hero::after{content:none}
.hero .tag{font-family:var(--font-mono);font-weight:500;font-size:12px}
@media (max-width:900px){.hero{background-size:auto 40%,auto}}