/* Pa Bawo · Pothera Nkhani — site styles.
   "Bawo board": dark mahogany for the strong moments, gold seeds, wine for actions on light ground,
   leaf green only for progress, red only for Help now. Bricolage Grotesque for headings, Atkinson Hyperlegible for reading.
   Website on a computer (top bar, footer), app on a phone (app bar, bottom tabs, Kondwani button). */
:root{
  --bg:#EFEEEC; --surface:#FFFFFF; --sunk:#E8E5E1; --line:#DEDAD5; --line-2:#CFC9C2;
  --fg:#1F1A17; --muted:#5E5550;
  --mahogany:#33160F; --wood:#5A2A1C; --pit:#24100B; --gold:#E6B643; --gold-ink:#33160F; --gold-soft:#F7EDD2;
  --on-dark:#FFFFFF; --on-dark-2:#E9DCD6;
  --wine:#7A1F2E; --wine-ink:#FFFFFF; --wine-soft:#F3E3E5; --wine-deep:#561520;
  --green:#2F6B4F; --green-soft:#E2EEE7; --ochre:#8A5A00; --ochre-soft:#F6ECD3;
  --crisis:#B42318; --crisis-on-dark:#E0452F; --crisis-soft:#FBE4E0;
  --f-d:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-b:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  --r:16px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#17110E; --surface:#221915; --sunk:#120C0A; --line:#3A2C26; --line-2:#4A3A33; --fg:#F1EAE4; --muted:#B8AAA1;
  --mahogany:#2A120C; --wood:#4A2217; --gold-soft:#3A2E12; --on-dark-2:#E2D3CC;
  --wine:#EE9AA8; --wine-ink:#2A0A10; --wine-soft:#3A1B21; --wine-deep:#2A0E14;
  --green:#7BCBA2; --green-soft:#16301F; --ochre:#E7B75B; --ochre-soft:#382A10;
  --crisis:#F2766C; --crisis-soft:#3A1715; color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:17px/1.6 var(--f-b);margin:0}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--f-d)}
h1{font-weight:800;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em}
h2{font-weight:800;font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.1;letter-spacing:-.02em}
h3{font-weight:700;font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
h4{font-weight:700;font-size:1.02rem;line-height:1.3;margin:20px 0 6px}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:8px 14px;z-index:99}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:.9rem}.nowrap{white-space:nowrap}
/* A short line above a heading that says what the section is: sentence case, never shouty. */
.kick{font-size:.95rem;font-weight:700;color:var(--wine)}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.narrow{max-width:820px}
.stack{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.row-flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.app{display:none}

/* buttons, chips, links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;min-height:46px;padding:0 22px;font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;line-height:1.2;font-family:var(--f-b)}
.b-wine{background:var(--wine);color:var(--wine-ink)}
.b-wine:hover{background:var(--wine-deep);color:#fff}
.b-line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.b-line:hover{box-shadow:inset 0 0 0 1.5px var(--wine)}
.b-white,.b-gold{background:var(--gold);color:var(--gold-ink)}
.b-ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.b-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.b-sos{background:var(--crisis);color:#fff}
.b-sm{min-height:40px;padding:0 16px;font-size:.92rem}
.btn[disabled]{opacity:.6;cursor:default}
.chip{display:inline-flex;max-width:100%;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
@media (max-width:640px){.chip{white-space:normal}}
.c-wine{background:var(--wine-soft);color:var(--wine)}
.c-green{background:var(--green-soft);color:var(--green)}
.c-ochre{background:var(--ochre-soft);color:var(--ochre)}
.c-sos{background:var(--crisis-soft);color:var(--crisis)}
.c-grey{background:var(--sunk);color:var(--muted)}
.link{background:none;border:0;padding:0;color:var(--wine);font-weight:700;cursor:pointer;text-align:left;text-decoration:none}
.link:hover{text-decoration:underline}

/* brand: the logo mark is one pit of the bawo board with four seeds, men around one matter */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo svg,.logo img{width:38px;height:38px;flex:none;border-radius:50%}
.logo b{font:800 1.35rem/1 var(--f-d);letter-spacing:-.025em;display:block}
.logo small{display:block;font-size:.82rem;color:var(--gold);margin-top:3px}

/* desktop header: mahogany bar */
.top{position:sticky;top:0;z-index:30;background:var(--mahogany);color:var(--on-dark)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:74px}
.nav{display:flex;gap:2px;align-items:center}
.nav>a,.more>summary{padding:9px 12px;border-radius:10px;font-weight:700;font-size:.95rem;color:var(--on-dark-2);text-decoration:none;white-space:nowrap;cursor:pointer}
.nav>a:hover,.more>summary:hover{background:rgba(255,255,255,.08);color:#fff}
.nav>a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
.more{position:relative}
.more>summary{list-style:none;display:flex;align-items:center;gap:6px}
.more>summary::-webkit-details-marker{display:none}
.more>summary svg{transition:transform .15s}
.more[open]>summary svg{transform:rotate(180deg)}
.more[open]>summary{background:rgba(255,255,255,.12);color:#fff}
.more .menu{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(31,26,23,.18);padding:8px;display:grid}
.more .menu a{padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:600}
.more .menu a small{display:block;font-weight:400;color:var(--muted);font-size:.84rem}
.more .menu a:hover,.more .menu a[aria-current="page"]{background:var(--sunk)}
.top-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.top .me-link{color:#fff;font-weight:700;text-decoration:none;padding:9px 12px;border-radius:10px;white-space:nowrap}
.top .me-link:hover{background:rgba(255,255,255,.08)}
.top .b-sos,.appbar .b-sos{background:var(--crisis-on-dark)}
@media (max-width:1180px){.nav>a[data-opt]{display:none}}

/* phone app bar + tabs */
.appbar{position:sticky;top:0;z-index:30;background:var(--mahogany);color:var(--on-dark);padding-block:10px;padding-left:var(--gl);padding-right:var(--gr);align-items:center;gap:10px;min-height:60px}
.appbar .t{font:800 1.2rem var(--f-d);margin-right:auto;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-decoration:none;color:#fff}
.appbar .btn{white-space:nowrap;flex:none}
.appbar .back{display:grid;place-items:center;padding:6px;color:#fff;margin-left:-6px}
.appbar .logo svg{width:32px;height:32px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px var(--gr) calc(6px + env(safe-area-inset-bottom,0px)) var(--gl);justify-content:space-around}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.72rem;font-weight:700;color:var(--muted);text-decoration:none;padding:5px 0;position:relative;min-height:48px}
.tabs a[aria-current="page"]{color:var(--wine)}
.tabs .dot{position:absolute;top:2px;left:calc(50% + 6px);width:9px;height:9px;border-radius:50%;background:var(--crisis)}
.fab{position:fixed;z-index:31;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font:800 1.35rem/1 var(--f-d);box-shadow:0 8px 24px rgba(31,26,23,.28);text-decoration:none;align-items:center;justify-content:center}
@media (max-width:900px){
  .desk{display:none!important}
  .app{display:flex}
  main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  body{font-size:16.5px}
}

/* page pieces */
.page{padding-block:40px 64px}
@media (max-width:900px){.page{padding-block:20px 28px}}
.head{display:grid;gap:10px;margin-bottom:24px;max-width:68ch}
.head .muted{font-size:1.08rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card.soft{background:var(--sunk);border-color:transparent}
.card.wine{background:var(--wine-soft);border-color:transparent}
.card.green{background:var(--green-soft);border-color:transparent}
.card.ochre{background:var(--gold-soft);border-color:transparent}
.card.dark{background:var(--mahogany);color:var(--on-dark);border-color:transparent}
a.card,.card.click{display:block;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--wine)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr;gap:10px}}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.crumb{margin-bottom:16px;font-size:.92rem}
.crumb a{color:var(--wine);font-weight:700;text-decoration:none}

/* flash */
.flash{border-radius:12px;padding:12px 16px;font-weight:700;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.flash.ok{background:var(--green-soft);color:var(--green)}
.flash.info{background:var(--gold-soft);color:var(--fg)}
.flash.err{background:var(--crisis-soft);color:var(--crisis)}

/* ---------- home ---------- */
.home-hero{background:var(--mahogany);color:var(--on-dark)}
.home-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:56px 88px}
.home-hero h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:.98;letter-spacing:-.035em;max-width:11ch}
.home-hero .lead{color:var(--on-dark-2);font-size:1.18rem;line-height:1.6;max-width:46ch;margin-top:22px}
.home-hero .greet{color:var(--gold);font-weight:700;margin-bottom:10px}
.home-hero .row-flex{margin-top:30px}
.bawo{background:var(--wood);border-radius:28px;padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.35);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.bawo i{aspect-ratio:1;border-radius:50%;background:var(--pit);box-shadow:inset 0 3px 6px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;gap:6%;padding:16%}
.bawo b{width:30%;aspect-ratio:1;border-radius:50%;background:var(--gold)}
@media (prefers-reduced-motion:no-preference){.bawo b{animation:seed .5s cubic-bezier(.3,1.4,.6,1) both;animation-delay:calc(var(--d,0) * 25ms + 200ms)}}
@keyframes seed{from{transform:scale(0)}to{transform:scale(1)}}
.home-topics{padding-top:56px}
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.topic{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:0 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:1.06rem}
.topic svg{color:var(--wine);flex:none}
.topic:hover{border-color:var(--wine)}
.th-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 32px;margin-top:48px}
.th-band .day{display:block;text-align:center;padding:0 32px 0 0;border:0;border-right:1px solid var(--line);background:none;border-radius:0;cursor:default}
.th-band .day b{display:block;font:800 4rem/.9 var(--f-d);color:var(--wine)}
.th-band .day span{font-weight:700}
.th-band h2{font-size:1.6rem}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding-block:56px}
.ways>div{display:grid;gap:10px;align-content:start}
.ways svg{color:var(--wine)}
.ways h3{font-size:1.45rem;font-weight:800}
.home-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding-bottom:64px;align-items:start}
.promise{background:var(--mahogany);color:var(--on-dark);border-radius:20px;padding:34px;display:grid;gap:16px}
.promise q{font:800 1.75rem/1.2 var(--f-d);letter-spacing:-.01em;quotes:"“" "”"}
.promise p{color:var(--on-dark-2)}
.thread-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none}
.thread-list a:hover b{color:var(--wine)}
.thread-list b{display:block;font-size:1.1rem;line-height:1.35}
@media (max-width:980px){.home-hero .wrap{grid-template-columns:1fr;gap:28px;padding-block:24px 36px}.topics{grid-template-columns:repeat(2,minmax(0,1fr))}.ways{grid-template-columns:1fr;gap:28px;padding-block:40px}.home-split{grid-template-columns:1fr}.th-band{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:20px}.th-band .btn{grid-column:1/-1;justify-self:start}.th-band .day{padding-right:18px}.th-band .day b{font-size:2.8rem}}
@media (max-width:640px){.topics{grid-template-columns:1fr}.bawo{gap:6px;padding:12px;border-radius:18px}.bawo i:nth-child(n+17){display:none}.home-topics{padding-top:28px}.th-band{margin-top:28px}.promise q{font-size:1.4rem}}

/* older pieces still used on some pages */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--wine)}
.tile .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.ic-wine{background:var(--wine-soft);color:var(--wine)}.ic-green{background:var(--green);color:#fff}.ic-ochre{background:var(--gold-soft);color:var(--ochre)}.ic-grey{background:var(--sunk);color:var(--fg)}
.cd{display:flex;gap:18px;font-variant-numeric:tabular-nums}
.cd div{line-height:1}.cd b{display:block;font:800 2rem var(--f-d)}.cd small{font-size:.82rem;color:inherit;opacity:.8}

/* lists */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rowi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px 20px;border-top:1px solid var(--line);text-decoration:none;color:inherit;align-items:center}
.rowi:first-child{border-top:0}a.rowi:hover{background:var(--sunk)}
.rowi h3{font-size:1.06rem}
.meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.86rem;color:var(--muted);margin-top:4px;align-items:center}
.num{text-align:right;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}.num b{display:block;font-size:1.1rem;color:var(--fg)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{flex:none;border:1.5px solid var(--line-2);background:var(--surface);border-radius:999px;padding:7px 15px;font-weight:700;font-size:.92rem;text-decoration:none;color:inherit;cursor:pointer}
.pill[aria-current="true"],.pill[aria-pressed="true"]{background:var(--mahogany);color:#fff;border-color:var(--mahogany)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:16px}
.pager a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none}
.pager a[aria-current="page"]{background:var(--mahogany);color:#fff}
.search-in{flex:1 1 220px;min-width:0}

/* posts */
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:10px}
.post.cs{border-color:var(--green);box-shadow:inset 4px 0 0 var(--green)}
.post .body{white-space:pre-line;overflow-wrap:anywhere}
.who{display:flex;gap:10px;align-items:center;font-size:.9rem;flex-wrap:wrap}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.82rem;background:var(--sunk);flex:none}
.av.cs{background:var(--green-soft);color:var(--green)}
.acts{display:flex;gap:16px;font-size:.88rem;color:var(--muted);align-items:center;flex-wrap:wrap}
.acts button,.acts summary{background:none;border:0;padding:4px 0;cursor:pointer;color:inherit;font-weight:700}
.acts button[aria-pressed="true"]{color:var(--wine)}
.acts details{position:relative}
.acts details form{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.replies{display:grid;gap:12px;padding-left:16px;border-left:2px solid var(--line)}

/* progress + days */
.bar{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden}.bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .3s}
.bar.wine i{background:var(--wine)}.bar.green i{background:var(--green)}
.daylist{display:grid;gap:8px}
.day{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:start;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.day input{width:22px;height:22px;margin-top:1px;accent-color:var(--green)}
.day .d{font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted);min-width:50px;font-size:.88rem;padding-top:2px}
.day.done{background:var(--green-soft);border-color:transparent}
.day.done span:last-child{color:var(--muted)}
.day.locked{cursor:default;opacity:.85}
.months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.months div{background:var(--sunk);border-radius:10px;padding:10px}
@media (max-width:640px){.months{grid-template-columns:1fr 1fr}}

/* article */
.prose{max-width:68ch}
.prose p,.prose li{margin-bottom:10px;line-height:1.65}
.prose ul,.prose ol{padding-left:22px;margin:6px 0 12px}
.prose h2{font-size:1.4rem;margin:26px 0 8px}
.prose h3{margin:20px 0 6px}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:8px 0;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose a{color:var(--wine)}
pre.tpl{white-space:pre-wrap;background:var(--sunk);border-radius:12px;padding:16px;font:400 .98rem/1.6 var(--f-b);margin:0;overflow-wrap:anywhere}

/* forms */
form,.form{display:grid;gap:14px}
form.inline{display:inline}
label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
label small,.hint{font-weight:400;color:var(--muted);font-size:.88rem}
input,select,textarea{padding:12px 14px;min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--wine);outline:none;box-shadow:0 0 0 3px var(--wine-soft)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
textarea{min-height:110px;resize:vertical}
[aria-invalid="true"]{border-color:var(--crisis)}
.err{color:var(--crisis);font-size:.88rem;font-weight:700}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}.chk input{margin-top:5px;width:18px;height:18px;accent-color:var(--wine)}
.ok{background:var(--green-soft);color:var(--green);border-radius:12px;padding:12px 14px;font-weight:700}
.warn{background:var(--crisis-soft);border-radius:14px;padding:16px;display:grid;gap:10px}
.warn b{color:var(--crisis)}
.res{background:var(--sunk);border-radius:12px;padding:16px;display:grid;gap:6px}
.big{font:800 1.9rem var(--f-d);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.q{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--line)}.q:first-child{border-top:0;padding-top:0}
.opts{display:flex;gap:6px;flex-wrap:wrap;border:0;padding:0;margin:0}
.opts label{display:flex;align-items:center;gap:6px;font-weight:600;border:1.5px solid var(--line-2);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:.92rem}
.opts input{accent-color:var(--wine)}
.opts label:has(input:checked){border-color:var(--wine);background:var(--wine-soft)}
.lines{display:grid;gap:8px}
.line3{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.line2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px;align-items:center}
@media (max-width:640px){.line3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.line3>:first-child{grid-column:1/-1}.line3.hd{display:none}.line2{grid-template-columns:minmax(0,1fr) 120px}}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.2rem;padding:4px 8px}
.breathe{width:180px;height:180px;border-radius:50%;margin:10px auto;display:grid;place-items:center;background:var(--gold-soft);border:3px solid var(--gold);transition:transform 4s ease-in-out;font-weight:800;color:var(--gold-ink);text-align:center}
.checks{display:grid;gap:6px}
.checks label{display:flex;gap:10px;font-weight:400;align-items:flex-start}
.checks input{margin-top:5px;accent-color:var(--green)}
.wk{font-weight:800;margin-top:12px;font-size:.92rem;color:var(--muted)}
.hp{position:absolute;left:-5000px}

/* chat */
.chat{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.chat .h{display:flex;gap:12px;align-items:center;padding:14px 18px;background:var(--mahogany);color:#fff}
.chat .h .muted{color:var(--on-dark-2)}
.kav{width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font:800 1.1rem var(--f-d);flex:none}
.disc{font-size:.86rem;padding:10px 18px;background:var(--sunk);color:var(--muted)}
.stream{padding:18px;display:grid;gap:10px;align-content:start;overflow-y:auto;min-height:320px;max-height:58vh}
.m{display:grid;gap:3px;max-width:86%}.m small{font-size:.78rem;color:var(--muted)}
.m .b{padding:11px 15px;border-radius:4px 16px 16px 16px;background:var(--sunk);white-space:pre-line;overflow-wrap:anywhere}
.m.me{justify-self:end}.m.me .b{background:var(--wine);color:var(--wine-ink);border-radius:16px 4px 16px 16px}
.sug{display:flex;gap:8px;overflow-x:auto;padding:0 18px 10px}
.sug button{flex:none;border:1.5px solid var(--line-2);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:600;cursor:pointer}
.comp{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.dots{display:inline-flex;gap:4px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bl 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.25}}
.thread-msg{display:grid;gap:8px}

/* town hall */
.event-card{background:var(--mahogany);color:var(--on-dark);border:0;display:grid;gap:12px}
.event-card .when{font-weight:800;font-size:1.25rem;font-family:var(--f-d)}
.event-card .sub{color:var(--on-dark-2)}
.event-card .kick{color:var(--gold)}
.agenda{display:grid;border-left:2px solid var(--line);margin-left:6px}
.ag{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:10px 0 10px 18px;position:relative}
.ag::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--wood)}
.ag time{font-weight:800;color:var(--wine);font-variant-numeric:tabular-nums;font-size:.95rem}
.vq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.vq:first-child{border-top:0}
.vote{border:1.5px solid var(--line-2);background:none;border-radius:12px;padding:5px 10px;min-width:56px;cursor:pointer;display:grid;justify-items:center;font-variant-numeric:tabular-nums}
.vote b{font-size:1.05rem}.vote small{font-size:.7rem;font-weight:700;color:var(--muted)}
.vote[aria-pressed="true"]{border-color:var(--wine);color:var(--wine)}

/* help */
.crisis-line{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.crisis-line .n{font:800 1.4rem var(--f-d);font-variant-numeric:tabular-nums}
.tbc{font-size:.8rem;font-weight:700;color:var(--crisis)}

/* footer */
.foot{background:var(--surface);border-top:1px solid var(--line);margin-top:24px}
.foot .wrap{padding-block:44px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;font-size:.98rem}
.foot b{font-family:var(--f-d)}
.foot a{display:block;padding:4px 0;color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--wine)}
.foot .logo{color:var(--fg)}.foot .logo small{color:var(--wine)}
.foot .base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:.86rem}
.foot .base a{display:inline}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom,0px));background:var(--mahogany);color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;font-size:.95rem;z-index:50;max-width:calc(100% - 32px);text-align:center}
@media (min-width:901px){.toast{bottom:30px}}
.contacts{display:grid;gap:12px}.contacts div{display:grid;gap:2px}.contacts b{font-size:.9rem;color:var(--muted)}
.notfound{padding-block:60px;text-align:center;display:grid;gap:12px;justify-items:center}
.notfound b{font:800 4.5rem var(--f-d);color:var(--wine)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* money, WhatsApp, availability */
.ladder,.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ladder li,.steps>li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.ladder .n,.steps .n{width:46px;height:46px;border-radius:50%;background:var(--wood);color:var(--gold);display:grid;place-items:center;font:800 1.2rem var(--f-d);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.ladder h3,.steps h3{margin-bottom:4px}
.ladder .row-flex,.steps .row-flex{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tile-link{text-decoration:none;color:inherit;display:block}
.tile-link:hover{border-color:var(--wine)}
.card.focus{border:2px solid var(--wine)}
.duty-line{display:flex;align-items:flex-start;gap:8px;font-size:.92rem;color:var(--muted);margin-top:6px}
.duty-line .dd{flex:none;margin-top:.45em;width:10px;height:10px;border-radius:50%;background:#B5ADA3}
.duty-line.on{color:var(--green);font-weight:700}
.duty-line.on .dd{background:var(--green);box-shadow:0 0 0 4px rgba(47,107,79,.18)}
.wa-code{font:800 1.6rem var(--f-d);letter-spacing:.06em;background:var(--sunk);border-radius:12px;padding:10px 14px;text-align:center;user-select:all}
.weeks{display:flex;gap:8px;align-items:flex-end;height:96px}
.wk-m{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.wk-m i{display:block;width:100%;max-width:28px;border-radius:6px 6px 2px 2px;background:var(--green)}
.wk-m.m1 i,.wk-m.m2 i{background:var(--crisis)}.wk-m.m3 i{background:var(--gold)}
.wk-m small{font-size:.74rem;color:var(--muted)}

/* start here, groups, live sessions */
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pk{position:relative;cursor:pointer;margin:0;display:block}
.pk input{position:absolute;opacity:0;width:1px;height:1px}
.pk span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);font-weight:700;font-size:.98rem}
.pk input:checked+span{background:var(--mahogany);border-color:var(--mahogany);color:#fff}
.pk input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.gpost{background:var(--sunk);border-radius:14px;padding:12px 14px;max-width:94%}
.gpost small{display:block;color:var(--muted);margin-bottom:3px}
.gpost.host{background:var(--green-soft)}
.gpost.mine{background:var(--wine-soft);margin-left:auto}
.session{display:grid;grid-template-columns:66px minmax(0,1fr);gap:16px;align-items:start}
.session .when{background:var(--mahogany);color:#fff;border-radius:14px;text-align:center;padding:10px 4px}
.session .when b{display:block;font:800 1.6rem/1 var(--f-d);color:var(--gold)}.session .when small{font-size:.8rem}
.more-only{display:none!important}
@media (max-width:1180px){.more-only{display:block!important}.top .logo small{display:none}}
.more>summary[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
.top .logo b{color:#fff}
.between>*{min-width:0}
