/* Layout: lodge ledger — category index on the left, the open entry on the right; stacks on phones. */
:root{
  --bg:#f4f5f8; --surface:#ffffff; --ink:#15203a; --muted:#5b6478; --line:#d9dce6;
  --navy:#1b2a4e; --on-navy:#f4f5f8; --brass:#a87a1f; --brass-soft:#f3ead6;
  --ok:#2f7a4f; --ok-soft:#e3f1e8; --warn:#9a5a00; --warn-soft:#fbefd9; --bad:#a63a32;
  --sorrow:#4a2a5e; --on-sorrow:#f7f2fa; --sorrow-soft:#efe7f4;
  --f-display:"Cinzel","Trajan Pro",Georgia,serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
/* Dark: black and gold, to match the gold-and-black logo. Follows the device until the
   brother picks a theme with the switch (data-theme on <html>, remembered on that device). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0e10; --surface:#18181b; --ink:#ece8df; --muted:#a39e93; --line:#2e2c2a;
  --navy:#e2c588; --on-navy:#141210; --brass:#c9a86a; --brass-soft:#2e2717;
  --ok:#7cc79a; --ok-soft:#16281d; --warn:#e7b25c; --warn-soft:#33270f; --bad:#ec8a80; --sorrow:#c3a6d9; --on-sorrow:#16101b; --sorrow-soft:#241a2c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0e10; --surface:#18181b; --ink:#ece8df; --muted:#a39e93; --line:#2e2c2a;
  --navy:#e2c588; --on-navy:#141210; --brass:#c9a86a; --brass-soft:#2e2717;
  --ok:#7cc79a; --ok-soft:#16281d; --warn:#e7b25c; --warn-soft:#33270f; --bad:#ec8a80; --sorrow:#c3a6d9; --on-sorrow:#16101b; --sorrow-soft:#241a2c; color-scheme:dark}
.logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none} :root:not([data-theme="light"]) .logo-dark{display:block}}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--f-body);padding:0 max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.wrap{max-width:1120px;margin:0 auto}
a{color:var(--brass)}
header.top{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:28px 0 18px;border-bottom:2px solid var(--brass)}
.mark{display:flex;gap:14px;align-items:center}
.logo{height:76px;width:auto;flex:none}
@media (max-width:520px){.logo{height:52px}}
h1{font:600 26px/1.15 var(--f-display);letter-spacing:.04em;margin:0;color:var(--navy);text-wrap:balance}
.sub{margin:2px 0 0;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
nav.tabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
nav.tabs a,.linkbtn{font:500 14px var(--f-body);color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:6px;background:none;border:0;cursor:pointer}
nav.tabs a[aria-current="page"]{color:var(--navy);background:var(--brass-soft)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.count{font:500 11px var(--f-mono);padding:1px 6px;border-radius:10px;background:var(--warn-soft);color:var(--warn)}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;margin-top:24px}
.layout>*{min-width:0}
@media (max-width:760px){.layout{grid-template-columns:1fr;gap:16px}}
.label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.search{width:100%;margin-bottom:18px}
.cats{display:flex;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0}
@media (max-width:760px){.cats{flex-direction:row;flex-wrap:wrap;gap:6px}}
.cats button{width:100%;display:flex;justify-content:space-between;gap:8px;text-align:left;background:none;border:0;padding:7px 10px;border-radius:6px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
@media (max-width:760px){.cats button{width:auto;border:1px solid var(--line);background:var(--surface)}}
.cats button:hover{background:var(--surface)}
.cats button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.cats .n{font:12px var(--f-mono);opacity:.7;font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 4px;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:none;text-align:left;font:inherit;color:inherit}
.row:hover .rt{color:var(--brass)}
.rt{font-weight:600;font-size:16px;color:var(--navy)}
.rs{grid-column:1;color:var(--muted);font-size:14px}
.meta{font:12px var(--f-mono);color:var(--muted)}
.pill{display:inline-block;font:500 11px var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:10px;white-space:nowrap;align-self:start}
.pill.verified,.pill.approved,.pill.member,.pill.reviewer,.pill.admin{background:var(--ok-soft);color:var(--ok)}
.pill.review,.pill.pending{background:var(--warn-soft);color:var(--warn)}
.pill.declined{color:var(--bad);border:1px solid var(--bad)}
article.doc{max-width:70ch}
.back{background:none;border:0;padding:0;color:var(--brass);font:inherit;font-size:14px;cursor:pointer;margin-bottom:12px}
h2.t{font:600 24px/1.25 var(--f-display);color:var(--navy);margin:6px 0;letter-spacing:.02em;text-wrap:balance}
.docmeta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.body h3{font:600 17px var(--f-body);color:var(--navy);margin:24px 0 6px}
.body p,.body ul,.body ol{margin:8px 0}
.body code{font:13.5px var(--f-mono);background:var(--brass-soft);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.body blockquote{margin:14px 0;padding:10px 14px;border-left:3px solid var(--brass);background:var(--surface)}
.fill{background:var(--warn-soft);color:var(--warn);padding:0 4px;border-radius:3px;font-weight:500}
.tw{overflow-x:auto}
.body table{border-collapse:collapse;font-size:14px;margin:10px 0}
.body td,.body th{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.body th{background:var(--surface)}
.panel{display:flex;flex-direction:column;gap:14px;max-width:70ch}
.panel h2{font:600 20px var(--f-display);color:var(--navy);margin:0;letter-spacing:.02em}
.narrow{max-width:420px;margin:48px auto 0}
.hint{color:var(--muted);font-size:14px;margin:0}
label{display:flex;flex-direction:column;gap:5px;font-weight:500;font-size:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
input,select,textarea{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%}
textarea{min-height:200px;resize:vertical;font-family:var(--f-mono);font-size:13.5px;line-height:1.55}
textarea.tall{min-height:360px}
.code{font:500 24px var(--f-mono);letter-spacing:.4em;text-align:center}
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{font:500 14px var(--f-body);padding:9px 16px;border-radius:6px;border:1px solid var(--navy);background:var(--navy);color:var(--on-navy);cursor:pointer}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.small{padding:4px 12px}
.btn:disabled{opacity:.5;cursor:default}
.msg{font-size:14px;color:var(--ok)}
.msg.err{color:var(--bad)}
.card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:10px}
.cardhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.empty{padding:28px 4px;color:var(--muted)}
.copy{font:12px var(--f-body);border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:4px;padding:1px 7px;margin-left:6px;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ritual practice + tests */
.gap{margin-top:18px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{font:500 13px var(--f-body);padding:5px 14px;border:0;background:var(--surface);color:var(--muted);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--navy);color:var(--on-navy)}
.ritual{max-width:72ch;display:flex;flex-direction:column;gap:12px}
.cipher{font:15px/1.7 var(--f-mono);letter-spacing:.08em;overflow-wrap:anywhere}
.cipher.big{font-size:18px}
.script{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.script li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 14px;padding:10px 6px;border-bottom:1px solid var(--line)}
@media (max-width:520px){.script li{grid-template-columns:1fr}}
.script li.mine{background:var(--brass-soft)}
.who{font:500 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:10px}
.script li.mine .who{color:var(--brass)}
.cues{border-left:3px solid var(--line);padding:4px 14px;display:flex;flex-direction:column;gap:4px}
.cues p{margin:0}
textarea.recite{min-height:140px;font-family:var(--f-body);font-size:16px}
.score{font:600 18px var(--f-body);margin:0}
.score.ok{color:var(--ok)} .score.warn{color:var(--warn)} .score.bad{color:var(--bad)}
.hit{color:var(--ok)}
.miss{color:var(--bad);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
h2.q{font:600 19px/1.4 var(--f-body);color:var(--navy);text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{text-align:left;font:inherit;padding:11px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--brass)}
.opt.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.opt.wrong{border-color:var(--bad);color:var(--bad)}
.hist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.hist li{display:flex;flex-direction:column}
.choices{margin:0;padding-left:20px;font-size:14px}
.choices .right{color:var(--ok);font-weight:600}
.choice{flex-direction:row;align-items:center;gap:8px}
.choice input[type=radio]{width:auto}
.ptable{border-collapse:collapse;font-size:13px}
.ptable td,.ptable th{border:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top}
/* officers */
.officer{border-bottom:1px solid var(--line);padding-bottom:10px;display:flex;flex-direction:column;gap:8px}
.officer .row{border-bottom:0}
.duty{padding:0 4px 8px;max-width:70ch}
.assign{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:0 4px}
.assign select{width:auto;min-width:200px;max-width:100%}
.inline{flex-direction:row;align-items:center;gap:6px;font-weight:400}
.inline input{width:auto}
.full{flex-basis:100%;margin:0}
.addr{display:flex;align-items:center;gap:6px}
.meta.err{color:var(--bad)}
.approvals{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.approval{border-color:var(--warn)}
.lock{color:var(--warn);font-weight:500}
input[readonly]{opacity:.7}
.emq{border:1px solid var(--warn);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.emq .qtitle{margin:0;font-weight:600;color:var(--navy)}
.emdetail{display:flex;flex-direction:column;gap:10px}
textarea.short{min-height:90px;font-family:var(--f-body)}
.emwhy blockquote{margin:4px 0 8px;padding:8px 12px;border-left:3px solid var(--bad);background:var(--bg)}
.approvers{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.approvers li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}
/* ---- Compass pages + workstation ---- */
header.top{align-items:center}
nav.tabs#nav{padding:10px 0 0}
nav.tabs.ws{margin-top:8px;padding:6px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.wslabel{font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brass);padding:0 10px 0 4px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:620px){.three{grid-template-columns:1fr}}
textarea.mid{min-height:150px;font-family:var(--f-body);font-size:15px}
textarea.short{font-family:var(--f-body);font-size:15px}
.links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.card.mini{padding:12px;gap:4px}
.kind{border:1px solid var(--line);border-radius:6px;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.kind legend{font-weight:500;font-size:14px;padding:0 4px}
.degrees{list-style:none;padding:0;margin:4px 0;display:flex;flex-direction:column;gap:0}
.degrees li{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:6px 0;position:relative}
.degrees li span:last-child{display:flex;flex-direction:column}
.degrees .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--bg);margin-top:5px;z-index:1}
.degrees li:not(:last-child)::before{content:"";position:absolute;left:5px;top:20px;bottom:-6px;width:2px;background:var(--line)}
.degrees li.done .dot{background:var(--ok);border-color:var(--ok)}
.degrees li.now .dot{background:var(--brass);border-color:var(--brass)}
.degrees li.now strong{color:var(--brass)}
.degrees li:not(.done):not(.now) strong{color:var(--muted);font-weight:500}
.notes{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.notes li{border-top:1px solid var(--line);padding-top:8px}
.notes p{margin:4px 0 0;white-space:pre-wrap}
.pq{margin:0;padding:10px 14px;border-left:3px solid var(--brass);background:var(--bg);white-space:pre-wrap}
/* trestle board */
.trestle{max-width:72ch;display:flex;flex-direction:column;gap:6px}
.tb-head{border-bottom:3px solid var(--brass);padding-bottom:10px;margin-bottom:6px}
.tb-kicker{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tb-title{font:600 26px/1.2 var(--f-display);color:var(--navy);margin:4px 0;text-wrap:balance}
.tb-month{margin:0;color:var(--muted)}
.tb-revised{margin:6px 0;padding:10px 14px;border:1px solid var(--warn);background:var(--warn-soft);color:var(--warn);border-radius:6px;font-size:14px}
.tb-h{font:600 18px var(--f-display);color:var(--navy);margin:18px 0 4px;letter-spacing:.02em}
.tb-cal{border-collapse:collapse;width:100%;font-size:14px}
.tb-cal td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tb-cal td span{display:block}
.tb-cal td span.pill{display:inline-block;margin-top:4px}
.tb-date{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;width:1%}
.tb-date span{font-weight:400;color:var(--muted)}
/* builder */
.builder{display:flex;flex-direction:column;gap:14px;max-width:80ch}
.bar{justify-content:flex-start}
.evtable{border-collapse:collapse;font-size:13px;min-width:640px}
.evtable th{text-align:left;font-weight:500;color:var(--muted);padding:2px 4px}
.evtable td{padding:3px 4px}
.evtable input{padding:6px 8px;font-size:13px}
.evtable input[type=checkbox]{width:auto}
.sech{font-weight:600;flex:1;min-width:0}
.sec .cardhead{flex-wrap:nowrap;align-items:center}
.sec .cardhead .btns{flex-wrap:nowrap;gap:4px}
.publish{border-color:var(--brass)}
/* calendar + reminders */
.reminders{border-color:var(--warn);background:var(--warn-soft)}
.reminders ul{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.reminders .btn{margin-left:6px;padding:2px 10px;font-size:13px;background:var(--surface)}
.evtable{min-width:760px}
.evtable tr.auto td{background:var(--brass-soft)}
.evtable tr.auto td:first-child{border-radius:6px 0 0 6px}
.evtable tr.auto td:last-child{border-radius:0 6px 6px 0}
.evtable select{padding:6px 6px;font-size:13px}
.calrow{display:flex;flex-direction:column;gap:8px;padding:14px 4px;border-bottom:1px solid var(--line)}
.calrow .hint{margin:0}
.bday{border:1px solid var(--line);border-radius:6px;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.bday legend{font-weight:500;font-size:14px;padding:0 4px}
.bdcard{border-color:var(--brass);margin-bottom:6px}
.bdcard .two{gap:8px}
/* social */
.posts{display:flex;flex-direction:column;gap:14px}
.post{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:14px}
@media (max-width:620px){.post{grid-template-columns:1fr}}
.post.is-posted{opacity:.6}
.pimg img{width:100%;max-width:200px;aspect-ratio:1;border-radius:6px;display:block;background:var(--navy)}
.pbody{display:flex;flex-direction:column;gap:8px;min-width:0}
textarea.cap{min-height:110px}
a.btn{text-decoration:none;display:inline-block}
.steps{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.inline.small{font-size:13px;color:var(--muted)}
.socpref{margin:6px 0 4px}

.tb-head{display:flex;gap:16px;align-items:center}
.tb-logo{height:76px;width:auto;flex:none}
@media (max-width:520px){.tb-logo{height:56px}}

/* header actions + theme switch */
.hdr-actions{display:flex;align-items:center;gap:6px;flex:none;align-self:flex-start}
.mark{min-width:0}
.mark h1{overflow-wrap:anywhere}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;cursor:pointer}
.theme-toggle .knob{width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .2s}
.theme-toggle .knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
.theme-toggle[aria-checked="true"] .knob{background:var(--brass)}
.theme-toggle[aria-checked="true"] .knob::after{transform:translateX(14px)}
@media (prefers-reduced-motion:reduce){.theme-toggle .knob,.theme-toggle .knob::after{transition:none}}
@media (max-width:520px){.theme-toggle .tlabel{display:none}.theme-toggle{padding:5px 6px}}

/* ================================================================ PHONES ==
   Mobile-first rules for Compass (keep when adding screens):
   - Navigation on phones is the bottom bar + Menu sheet (mobile.js); desktop tabs hide.
   - Page content comes first; a sidebar marked <aside class="lead"> (a picker such as
     categories or issues) stays above the content as a swipeable chip strip.
   - Inputs are 16px (no iPhone zoom), buttons at least 44px tall, nothing wider than the
     screen; wide tables become stacked cards. */
.mbar,.msheet{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body.sheet-open{overflow:hidden}
  header.top{padding:12px 0 10px;gap:10px;align-items:center}
  .logo{height:46px}
  h1{font-size:19px}
  .sub{display:block;font-size:10.5px;letter-spacing:.05em;margin-top:1px}
  .sub-x{display:none}
  body.signed-in .hdr-actions{display:none}
  body.signed-in nav.tabs{display:none!important}
  .layout{margin-top:16px;gap:20px}
  .layout>aside{order:2;border-top:1px solid var(--line);padding-top:16px}
  .layout>aside.lead{order:0;border-top:0;padding-top:0}
  .layout>aside.lead .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;scroll-snap-type:x proximity}
  .layout>aside.lead .cats::-webkit-scrollbar{display:none}
  .layout>aside.lead .cats li{flex:none;scroll-snap-align:start}
  .layout>aside.lead .cats button{white-space:nowrap}
  input,select,textarea{font-size:16px}
  .btn{min-height:44px;padding:10px 16px}
  .btn.small{min-height:38px;padding:7px 12px}
  .cats button,.row{min-height:44px}
  .panel h2,h2.t,.tb-title{font-size:22px}
  .two,.three{grid-template-columns:1fr}
  .btns{gap:8px}
  /* bottom tab bar */
  .mbar:not([hidden]){display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .mtab{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:52px;border:0;background:none;color:var(--muted);font:500 11px var(--f-body);text-decoration:none;border-radius:10px;cursor:pointer}
  .mtab svg{width:24px;height:24px}
  .mtab[aria-current="page"]{color:var(--brass);background:var(--brass-soft)}
  .mcount{position:absolute;top:2px;right:calc(50% - 22px);font:600 10px var(--f-mono);background:var(--bad);color:#fff;border-radius:10px;padding:0 5px;line-height:16px}
  .mdot{position:absolute;top:6px;right:calc(50% - 16px);width:9px;height:9px;border-radius:50%;background:var(--bad)}
  /* menu sheet */
  .msheet:not([hidden]){display:flex;align-items:flex-end;position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45)}
  .mpanel{width:100%;max-height:86vh;overflow-y:auto;background:var(--bg);border-radius:16px 16px 0 0;padding:8px max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .mhead{display:flex;justify-content:space-between;align-items:center;padding:8px 0;position:sticky;top:0;background:var(--bg)}
  .mhead strong{font:600 17px var(--f-display);color:var(--navy)}
  .mclose{width:44px;height:44px;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}
  .mgroup{margin:14px 0 6px;font:600 11px var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
  .mlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
  .mlist li+li{border-top:1px solid var(--line)}
  .mlist a,.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 16px;color:var(--ink);text-decoration:none;font:500 16px var(--f-body);background:none;border:0;cursor:pointer;text-align:left}
  .mlist a[aria-current="page"]{color:var(--brass)}
  .mlist .mcount{position:static}
  .mrow .knob{width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;flex:none}
  .mrow .knob::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
  .mrow[aria-checked="true"] .knob{background:var(--brass)}
  .mrow[aria-checked="true"] .knob::after{transform:translateX(18px)}
}
@media (max-width:620px){
  /* trestle builder: each date becomes a card */
  .evtable{min-width:0;width:100%;display:block}
  .evtable tbody{display:block}
  .evtable tr:first-child{display:none}
  .evtable tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:var(--surface)}
  .evtable tr.auto{background:var(--brass-soft)}
  .evtable tr.auto td{background:none}
  .evtable td{display:block;padding:0}
  .evtable td:nth-child(3),.evtable td:nth-child(5){grid-column:1/-1}
  .evtable td:nth-child(6){display:flex;align-items:center;gap:8px;font-size:14px}
  .evtable td:nth-child(6)::after{content:"Open to the public"}
  .evtable td:nth-child(7){justify-self:end;align-self:center}
  .evtable input,.evtable select{font-size:16px;padding:9px 10px}
  .evtable input[type=checkbox]{width:22px;height:22px}
  .sec .cardhead{flex-wrap:wrap}
  .pimg img{max-width:100%}
  .post{padding:12px}
  .tb-cal td{padding:8px 4px}
}
header.top{padding-top:max(28px,calc(env(safe-area-inset-top) + 12px))}
@media (max-width:760px){header.top{padding-top:max(12px,calc(env(safe-area-inset-top) + 6px))}}
@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:4px}
  .row .pill{justify-self:start}
  .layout>aside.lead>.hint{display:none}
  #newIss{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:12px}
  #newIss strong{flex-basis:100%}
  #newIss label{flex:1;min-width:150px}
  #newIss .btns{flex:none}
}
/* minutes */
.panel.wide{max-width:76ch;margin-inline:auto;width:100%}
.panel.wide>.back{align-self:flex-start}
.minbody{min-height:420px;font-family:var(--f-body);font-size:15px}
.approvedline{border-color:var(--ok);background:var(--ok-soft);margin:0}
.votewait{border-color:var(--warn);background:var(--warn-soft);margin:0}
.tasks{border-color:var(--brass);background:var(--brass-soft)}
.tasks ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.gap-b{margin-bottom:16px}
.minform{display:flex;flex-direction:column;gap:12px}
@media (max-width:760px){.minbody{min-height:45vh}}
.votewait,.approvedline{display:block;line-height:1.6}
/* principal officers' emblems (emblems.js) */
.emblem{flex:none;display:block}
.emblem .e-ring{fill:var(--surface);stroke:var(--brass);stroke-width:2.5}
.emblem .e-ring2{fill:none;stroke:var(--brass);stroke-width:1;opacity:.55}
.emblem .e-line{fill:none;stroke:var(--navy);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.emblem .e-thin{stroke-width:1.4;stroke-dasharray:2 2.5}
.emblem .e-gold{fill:var(--brass);stroke:var(--brass);stroke-width:1;stroke-linejoin:round}
.emblem .e-dot{fill:var(--brass)}
.stationcard{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--brass);border-radius:10px;background:linear-gradient(135deg,var(--brass-soft),var(--surface) 70%);margin-bottom:16px}
.stationcard .st-t{font:600 18px/1.2 var(--f-display);color:var(--navy);margin:0;text-wrap:balance}
.stationcard .st-f{font-size:13.5px;color:var(--ink);margin:3px 0 0}
.stationcard .st-m{font:11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brass);margin:6px 0 0}
.stationcard.plain{gap:0}
.stationlist{margin:-6px 0 14px}
@media (max-width:760px){.stationcard{margin-bottom:12px}.stationcard .emblem{width:72px;height:72px}}
/* titles next to names (Past Master, Honorary Past Master, Grand Lodge officers) */
.honors{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:1px;margin-left:2px}
.honor{font:600 10.5px/1.5 var(--f-display);letter-spacing:.08em;color:var(--brass);border:1px solid var(--brass);border-radius:3px;padding:0 5px;white-space:nowrap;background:var(--brass-soft);font-variant:small-caps}
.honor.gl{color:var(--surface);background:var(--brass)}
.honor.mini{font-size:9.5px;padding:0 4px}
.hometitles{margin:-4px 0 6px}
.pname{font:600 20px/1.3 var(--f-display);color:var(--navy);margin:0;text-wrap:balance}
.ptitle{font:600 20px var(--f-display);color:var(--navy);margin:0 0 10px}
.sec-t{font:600 18px var(--f-display);color:var(--navy);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;padding:2px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.chip.elect{border-style:dashed;border-color:var(--brass);background:var(--brass-soft)}
.titles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.titles li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0;border-bottom:1px solid var(--line)}
.titles .fix{flex-basis:100%;display:flex;flex-direction:column;gap:8px}
.addh{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px;max-width:none}
.glrow{display:flex;flex-direction:column;gap:8px}
/* officers: groups, elect, installation */
h3.group{font:600 13px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.electline{display:block;margin-top:2px;color:var(--brass);font-weight:500}
.electf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 4px 12px;font-size:13.5px}
.electf label{font-weight:500;font-size:13.5px}
.electf select{width:auto;flex:1 1 200px;max-width:340px}
.access{padding:0 4px 8px}
.install{border-color:var(--brass);background:linear-gradient(135deg,var(--brass-soft),var(--surface) 60%)}
.changes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.changes li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.changes li .err{grid-column:1/-1}
.changes .ct{font-weight:600;color:var(--navy)}
@media (max-width:620px){.changes li{grid-template-columns:minmax(0,1fr) auto}.changes .ct{grid-column:1/-1}}
.instdate{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;max-width:none}
.instdate label{flex:0 1 220px}
.instgo{max-width:none;gap:10px}
.warnbox{border:1px solid var(--warn);background:var(--warn-soft);border-radius:8px;padding:8px 12px;font-size:14px}
.warnbox p{margin:2px 0}
.okbox{border-color:var(--ok);background:var(--ok-soft)}
.stationcard.elect{border-style:dashed;background:var(--surface)}
.stationcard.elect .emblem{opacity:.75}
/* data tables and audit rows */
table.data{border-collapse:collapse;font-size:14px;width:100%;min-width:560px}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
table.data th{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.evtable.view td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.arow{border-bottom:1px solid var(--line);padding:10px 4px}
.arow summary{cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;list-style:none}
.arow summary::-webkit-details-marker{display:none}
.arow summary .rs{grid-column:1/-1;color:var(--muted);font-size:14px}
.arow .body{padding:8px 0}
.kitem{gap:8px}
.cats.people .n{font-size:11px}
.slate{display:flex;flex-direction:column;gap:6px;max-width:none}
.slrow{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px;align-items:center;font-weight:500}
.slrow select{width:100%}
@media (max-width:620px){.slrow{grid-template-columns:1fr;gap:4px}}
/* visiting brethren */
.visitors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.visitors li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 0;border-top:1px solid var(--line)}
.visitors li:first-child{border-top:0}
.visitors .vtx{display:flex;flex-direction:column;gap:1px;flex:1 1 220px;min-width:0}
.visitors.compact li{padding:6px 0}
.seg{display:inline-flex;gap:6px}
.walkin{display:flex;flex-direction:column;gap:8px;max-width:none;border-top:1px solid var(--line);padding-top:10px}
.otherdate{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:12px;max-width:none}
.honor.ltitle{color:var(--navy);border-color:var(--line);background:var(--bg)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{font:500 13.5px var(--f-body);padding:6px 12px;border:0;background:var(--surface);color:var(--ink);cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
input[readonly]{background:var(--bg);color:var(--muted)}
/* Lodge work: meeting confirmation, sit-in, degree work (lodgework.js) */
.tasks.due{border-color:var(--warn);background:var(--warn-soft)}
.cancelrow{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
details.card.sitin,details.card.comm{padding:12px 16px}
details.card summary{cursor:pointer;font-weight:500;color:var(--navy)}
details.card[open] summary{margin-bottom:8px}
details.card form{display:flex;flex-direction:column;gap:10px}
.degrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;padding:6px 0;border-top:1px solid var(--line)}
.degrow:first-of-type{border-top:0}
.deggroup{display:flex;flex-direction:column;gap:8px}
.deggroup + .deggroup{border-top:1px solid var(--line);padding-top:12px}
.pick{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0}
.pick legend{font-size:13px;color:var(--muted);padding:0 4px}
.seg.wrap{flex-wrap:wrap}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.btns.end{align-self:end}
/* Knights of Pythagoras (kop.js) */
.kplan{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.kplan li span:first-child{display:inline-flex;flex-direction:column;margin-right:8px}
.kplan li{display:list-item}
.kplan li .pill{vertical-align:top}
.kplan li.done strong{color:var(--ok)}
.contacts ul.hist li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px;border-top:1px solid var(--line)}
.contacts ul.hist li:first-child{border-top:0;padding-top:0}
.contacts ul.hist li > span:first-child{display:flex;flex-direction:column}
.contacts .contact{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.contacts .sel{user-select:all;font:13px var(--f-mono);overflow-wrap:anywhere}
.kthread{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.kmsg{max-width:85%;padding:8px 12px;border-radius:10px;border:1px solid var(--line)}
.kmsg p{margin:0 0 2px;white-space:pre-wrap}
.kmsg.p{align-self:flex-end;background:var(--brass-soft)}
.kmsg.l{align-self:flex-start;background:var(--surface)}
.kreply{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kgrid th{font-size:12px;font-weight:500;color:var(--muted);text-align:left;white-space:nowrap}
.kgrid td{white-space:nowrap}
/* Lodge overview (Worshipful Master) */
.ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ovcard{gap:4px}
.ovcard a{margin-top:4px;font-size:14px}
/* Lodge of Sorrow (sorrow.js): its own mourning color */
#nav a.sorrow-link, #ws a.sorrow-link, .mlist a.sorrow-link{color:var(--sorrow);font-weight:600}
#nav a.sorrow-link[aria-current="page"], #ws a.sorrow-link[aria-current="page"]{background:var(--sorrow);color:var(--on-sorrow)}
.sorrowbar{background:var(--sorrow);color:var(--on-sorrow);padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));text-align:center;font-size:14px}
.sorrowbar a{color:inherit;text-decoration:underline;margin-left:6px}
.card.sorrow{border-color:var(--sorrow);background:var(--sorrow-soft)}
.card.sorrow strong, .sorrow-t{color:var(--sorrow)}
.btn.mourn{background:var(--sorrow);color:var(--on-sorrow);border-color:var(--sorrow)}
.sorrowwarn{border-left:4px solid var(--sorrow);background:var(--sorrow-soft);padding:10px 14px;border-radius:6px}
.sorrowwarn ul{margin:6px 0 0;padding-left:18px}
dialog.sorrowdlg{border:0;border-radius:12px;padding:0;max-width:min(480px,calc(100vw - 32px));background:var(--surface);color:var(--ink)}
dialog.sorrowdlg::backdrop{background:rgb(20 10 28 / .6)}
dialog.sorrowdlg .in{padding:24px;display:flex;flex-direction:column;gap:10px;text-align:center}
dialog.sorrowdlg h2{font-family:var(--f-display);color:var(--sorrow);margin:0}
.trestlecover{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 20px;border-radius:12px;background:var(--sorrow-soft);border:1px solid var(--sorrow)}
.trestlecover h2{font-family:var(--f-display);color:var(--sorrow);margin:0}
.honor.memoriam{background:var(--sorrow-soft);color:var(--sorrow);border-color:var(--sorrow)}
/* Lodge budget (budget.js) */
.btotals{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:6px}
.btotals > span{display:flex;flex-direction:column;gap:2px}
.btotals strong{font-size:20px}
.btotals strong.ok{color:var(--ok)} .btotals strong.bad{color:var(--bad)}
table.budget td{vertical-align:top}
table.budget .num{text-align:right;white-space:nowrap}
table.budget input[name="amount"]{width:8.5em;text-align:right}
table.budget input[name="name"]{width:100%;min-width:12em}
table.budget input.lnote{width:100%;margin-top:4px;font-size:13px}

/* Officers' navigation: the everyday links stay, the rest wait under More (markSecondary in app.js). */
nav.tabs:not(.showmore) a.navsec{display:none}
.navmore{font:500 14px var(--f-body);color:var(--brass);padding:6px 12px;border-radius:6px;background:none;border:1px dashed var(--line);cursor:pointer}
.navmore:hover{background:var(--brass-soft)}
/* Your tasks, at the top of Home (fillTasks in home.js). */
.hometasks .tasklist{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.hometasks .tasklist a{font-weight:600}
.hometasks .tasklist .hint,.hometasks .tasklist .meta{display:block;margin-top:2px}
.layout.home .card{scroll-margin-top:12px}
.card.flash{animation:taskflash 1.6s ease-out}
@keyframes taskflash{0%{box-shadow:0 0 0 4px var(--brass)}100%{box-shadow:0 0 0 0 var(--brass-soft)}}
@media (prefers-reduced-motion:reduce){.card.flash{animation:none;outline:3px solid var(--brass)}}
@media (max-width:760px){
  /* Brethren on a phone: a short list going down the page (with the search above it), not a long sideways strip. */
  .layout.brethren>aside.lead .cats{flex-direction:column;flex-wrap:nowrap;overflow-x:visible;overflow-y:auto;max-height:42vh;margin:0;padding:0 0 4px;gap:6px;scroll-snap-type:none}
  .layout.brethren>aside.lead .cats li{flex:none}
  .layout.brethren>aside.lead .cats button{width:100%;white-space:normal}
  /* The budget on a phone: each line stacks (name and note, then amount and remove), so nothing sits off-screen. */
  table.budget,table.budget tbody{display:block;width:100%;min-width:0}
  table.budget tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
  table.budget tr:first-child{border-top:0}
  table.budget td,table.budget th{display:block;padding:0;border:0}
  table.budget th:nth-child(3){display:none}
  table.budget tr[data-l] td:first-child,table.budget td[colspan],table.budget tr:not([data-l]) td.meta{grid-column:1/-1}
  table.budget tr[data-l] td.num{justify-self:start}
  table.budget td{min-width:0}
  table.budget input[name="name"],table.budget input.lnote{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
}
/* Small labels in side lists (new, MM, draft, v2, counts): one quiet rounded tag on the center line,
   the same family as the status pills. */
.cats button{align-items:center}
.cats .n{flex:none;font:600 10.5px var(--f-body);letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:10px;border:1px solid var(--line);color:var(--muted);opacity:1;line-height:1.5;font-variant-numeric:tabular-nums}
.cats button[aria-pressed="true"] .n{border-color:currentColor;color:inherit}
/* The Lodge overview's summary is a dashboard: it uses the full width. */
.panel.dash{max-width:none}
/* Boxes that were too narrow for what's typed in them. */
.evtable input[data-k="title"]{min-width:14em}
input.sech{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:760px){.seg button{min-height:38px;padding:7px 16px}}
.emblem .e-sun{stroke:var(--brass)}
/* Small emblems beside a title (Officers page rows, the KOP page heading). */
.rt .emblem,.ptitle .emblem{display:inline-block;vertical-align:middle;margin-right:8px}
.emblem .e-apron{fill:var(--surface);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
/* Lodge of Sorrow: black and purple for everyone while it lasts (sorrow.js sets data-mourning on
   <html>). It comes last so it wins over the light and dark themes; the theme switch is hidden. */
:root[data-mourning]{
  --bg:#0c0a10; --surface:#16121d; --ink:#ece6f3; --muted:#a59cb5; --line:#2d2639;
  --navy:#d4bff2; --on-navy:#120e18; --brass:#a77fd8; --brass-soft:#261c33;
  --ok:#8fc7a6; --ok-soft:#16241c; --warn:#e0b878; --warn-soft:#2e2414; --bad:#ec8a80;
  --sorrow:#b996e6; --on-sorrow:#130e19; --sorrow-soft:#241a30; color-scheme:dark}
:root[data-mourning] .logo-light{display:none}
:root[data-mourning] .logo-dark{display:block}
:root[data-mourning] #themeBtn,:root[data-mourning] .mlist li:has([data-theme-btn]){display:none}
/* Visitor form: his Blue Lodge titles. */
.vtitles{border:1px solid var(--line);border-radius:8px;padding:8px 12px 10px;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
.vtitles legend{font-size:13px;color:var(--muted);padding:0 4px}
.vtitles > label:not(.inline){flex-basis:100%}
/* The offline page (offline.html, shown by the service worker without a connection). */
main.offline{max-width:28rem;margin:12vh auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
main.offline h1{font:600 24px var(--f-display);color:var(--navy);margin:8px 0 0}
.offlinebar{background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--warn);padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-size:14px;text-align:center}