/* hushri members + admin — shared stylesheet.
   Tokens mirror the live site styles.css. Jost is self-hosted in production
   (drop the woff2 into /assets/fonts and swap the @font-face in); the CDN link
   in each page is a build-time convenience only. */
:root{
  --ivory:#F6F1E8; --oat:#ECE3D2; --mushroom:#BFB3A3; --clay:#A88871; --clay-deep:#7E6450;
  --onyx:#2A2723; --onyx-lt:#3A3530; --moss:#6E7560; --moss-deep:#586049; --mid:#5E5952; --warm-div:#E0D6C5;
  --ok:#586049; --err:#8C4A3C;
  --bg:var(--ivory); --surface:var(--oat); --surface-soft:#FBF8F2;
  --text:var(--onyx); --text-soft:var(--mid); --border:var(--warm-div); --link:var(--clay-deep);
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Jost",var(--body);
  --r:10px; --r-sm:7px; --r-btn:6px;
  --shadow-soft:0 1px 2px rgba(42,39,35,.04), 0 8px 24px rgba(42,39,35,.05);
}
[data-theme="dark"]{
  --bg:#1B1916; --surface:#262320; --surface-soft:#2F2B27;
  --text:#F2ECE0; --text-soft:#B5ABA0; --border:#3A352F; --link:#D2AE91; --mushroom:#A89C8D;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease;}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.015em;margin:0;line-height:1.14;color:var(--text);}
h2{font-size:1.9rem;} h3{font-size:1.3rem;font-weight:400;} h4{font-size:1.02rem;font-weight:500;letter-spacing:0;}
p{margin:0;}
a{color:var(--link);text-decoration:none;} a:hover{color:var(--text);}
:focus-visible{outline:3px solid var(--moss);outline-offset:2px;border-radius:4px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--text-soft);display:inline-flex;align-items:center;gap:.55rem;}
.eyebrow::before{content:"";width:1.4rem;height:2px;background:var(--clay);}
.muted{color:var(--text-soft);}
.btn{font-family:var(--display);font-weight:500;font-size:.9rem;padding:.6rem 1.15rem;border-radius:var(--r-btn);
  border:1.5px solid var(--moss-deep);background:var(--moss-deep);color:#F6F1E8;cursor:pointer;transition:opacity .2s ease;}
.btn:hover{opacity:.9;} .btn:disabled{opacity:.5;cursor:default;}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--text);}
.btn--sm{font-size:.8rem;padding:.4rem .8rem;}
.btn--danger{background:var(--err);border-color:var(--err);}
.card{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-soft);}
.field{font:inherit;font-size:.95rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);padding:.6rem .8rem;width:100%;}
.field:focus{outline:none;border-color:var(--moss);}
.err{color:var(--err);font-size:.85rem;} .ok{color:var(--ok);font-size:.85rem;}

/* top bar */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.2rem;padding:.7rem clamp(1rem,3vw,1.6rem);
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(120%) blur(12px);border-bottom:1px solid var(--border);}
.brand{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;}
.brand small{font-family:var(--body);font-weight:400;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);display:block;margin-top:-4px;}
.top__right{margin-left:auto;display:flex;align-items:center;gap:.7rem;}
.icobtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.icobtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* app shell */
.app{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 56px);}
@media(max-width:820px){.app{grid-template-columns:1fr;}.side{display:none;}}
.side{background:var(--surface);border-right:1px solid var(--border);padding:1.1rem .8rem;display:flex;flex-direction:column;gap:.3rem;}
.side__me{display:flex;align-items:center;gap:.6rem;padding:.6rem;border-radius:var(--r-sm);margin-bottom:.6rem;background:var(--surface-soft);}
.side__me .name{font-weight:500;font-size:.92rem;line-height:1.1;}
.navitem{display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--text-soft);
  padding:.6rem .7rem;border-radius:var(--r-sm);cursor:pointer;border:0;background:transparent;width:100%;text-align:left;}
.navitem svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.navitem:hover{background:var(--surface-soft);color:var(--text);}
.navitem.on{background:var(--moss-deep);color:#F6F1E8;}
.side__label{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;color:var(--text-soft);padding:.7rem .7rem .3rem;}
.main{padding:clamp(1.2rem,3vw,2.2rem);overflow:auto;}
.view{display:none;} .view.on{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.pagehead{margin-bottom:1.4rem;} .pagehead h2{margin-top:.3rem;}

/* avatars + chips */
.av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:500;color:#F6F1E8;flex:0 0 auto;}
.av--s{width:34px;height:34px;font-size:.8rem;} .av--m{width:44px;height:44px;font-size:.95rem;} .av--l{width:76px;height:76px;font-size:1.5rem;}
.av1{background:var(--moss);} .av2{background:var(--clay);} .av3{background:var(--clay-deep);} .av4{background:var(--onyx);} .av5{background:var(--moss-deep);} .av6{background:var(--mushroom);color:var(--onyx);}
.tier{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;padding:.22rem .55rem;border-radius:999px;border:1px solid transparent;display:inline-block;}
.tier--free{background:rgba(94,89,82,.14);color:var(--text-soft);border-color:var(--border);}
.tier--supporter{background:rgba(191,179,163,.28);color:var(--clay-deep);border-color:var(--mushroom);}
.tier--friend{background:rgba(110,117,96,.2);color:var(--moss-deep);border-color:var(--moss);}
.tier--champion{background:rgba(168,136,113,.22);color:var(--clay-deep);border-color:var(--clay);}
.tier--ambassador{background:var(--onyx);color:var(--ivory);border-color:var(--onyx);}
.chip{font-family:var(--display);font-weight:500;font-size:.78rem;padding:.35rem .8rem;border-radius:999px;border:1.5px solid var(--border);background:transparent;color:var(--text-soft);cursor:pointer;}
.chip.on{border-color:var(--clay);color:var(--clay-deep);background:rgba(168,136,113,.1);}

/* grids + spaces */
.grid{display:grid;gap:1rem;} .g-3{grid-template-columns:repeat(3,1fr);} .g-2{grid-template-columns:repeat(2,1fr);} .g-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
@media(max-width:900px){.g-3,.g-2{grid-template-columns:1fr;}}
.space{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;cursor:pointer;}
.space:hover{border-color:var(--clay);}
.space .ic{width:38px;height:38px;border-radius:var(--r-sm);background:rgba(110,117,96,.15);display:inline-flex;align-items:center;justify-content:center;color:var(--moss-deep);}
.space .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.space .meta{font-size:.76rem;color:var(--text-soft);display:flex;gap:.9rem;margin-top:auto;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--moss);display:inline-block;margin-right:.3rem;vertical-align:middle;}

/* posts */
.composer{padding:.9rem;display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.1rem;}
.composer textarea{flex:1;font:inherit;font-size:.92rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);padding:.6rem .8rem;resize:vertical;min-height:44px;}
.post{padding:1.05rem 1.15rem;margin-bottom:.9rem;}
.post__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;}
.post__head .name{font-weight:500;font-size:.92rem;} .post__head .time{font-size:.72rem;color:var(--text-soft);margin-left:auto;}
.post__body{font-size:.95rem;line-height:1.62;margin:.2rem 0 .7rem;white-space:pre-wrap;overflow-wrap:anywhere;}
.react{display:flex;gap:1.1rem;font-size:.78rem;color:var(--text-soft);align-items:center;}
.react button{border:0;background:transparent;color:var(--text-soft);cursor:pointer;font-size:.78rem;display:inline-flex;gap:.35rem;align-items:center;font-family:var(--body);}
.react button:hover,.react button.on{color:var(--clay-deep);}
.react svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;} .react button.on svg{fill:var(--clay);stroke:var(--clay);}
.comment{display:flex;gap:.55rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--border);}
.comment .body{font-size:.86rem;overflow-wrap:anywhere;} .comment .body .name{font-weight:500;}
.commentbox{display:flex;gap:.5rem;margin-top:.7rem;}
.commentbox input{flex:1;font:inherit;font-size:.85rem;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);padding:.45rem .8rem;}

/* stats + bars + table */
.stat{padding:1rem 1.1rem;} .stat .n{font-family:var(--display);font-weight:300;font-size:2.1rem;line-height:1;letter-spacing:-.02em;}
.stat .l{font-size:.75rem;color:var(--text-soft);margin-top:.35rem;text-transform:uppercase;letter-spacing:.08em;} .stat .d{font-size:.72rem;color:var(--moss-deep);margin-top:.3rem;}
.bar{height:8px;border-radius:999px;background:var(--surface);overflow:hidden;} .bar span{display:block;height:100%;background:var(--moss);}
.tierrow{display:flex;align-items:center;gap:.7rem;margin:.55rem 0;font-size:.85rem;} .tierrow .lab{width:120px;flex:0 0 auto;} .tierrow .bar{flex:1;} .tierrow .v{width:34px;text-align:right;color:var(--text-soft);}
table{width:100%;border-collapse:collapse;font-size:.86rem;}
th{text-align:left;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;color:var(--text-soft);padding:.7rem .6rem;border-bottom:1px solid var(--border);}
td{padding:.7rem .6rem;border-bottom:1px solid var(--border);vertical-align:middle;} tr:hover td{background:var(--surface-soft);}
.rowuser{display:flex;align-items:center;gap:.55rem;}
.status{font-size:.72rem;} .status.act{color:var(--ok);} .status.new{color:var(--clay-deep);}

/* badges */
.badge{padding:1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.badge .disc{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,var(--clay),var(--clay-deep));color:var(--ivory);border:2px solid rgba(246,241,232,.5);}
.badge .disc svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.badge.locked .disc{background:var(--surface);color:var(--mushroom);border-color:var(--border);} .badge.locked{opacity:.72;}
.badge .bn{font-family:var(--display);font-weight:500;font-size:.85rem;} .badge .bc{font-size:.72rem;color:var(--text-soft);line-height:1.35;}
.mod{padding:.9rem 1rem;display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.7rem;} .mod .acts{margin-left:auto;display:flex;gap:.4rem;flex:0 0 auto;}
.pill{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .5rem;border-radius:999px;font-family:var(--display);font-weight:600;}
.pill--warn{background:rgba(140,74,60,.12);color:var(--err);} .pill--new{background:rgba(110,117,96,.16);color:var(--moss-deep);}
.perk{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin:.5rem 0;} .perk svg{width:16px;height:16px;stroke:var(--moss-deep);fill:none;stroke-width:2;flex:0 0 auto;margin-top:.2rem;}
.note{font-size:.82rem;color:var(--text-soft);background:var(--surface);border:1px dashed var(--border);border-radius:var(--r-sm);padding:.7rem .9rem;}
.hr{height:1px;background:var(--border);border:0;margin:1.4rem 0;} .sectlabel{margin:1.6rem 0 .8rem;}
.center-wrap{max-width:420px;margin:8vh auto;padding:0 1.2rem;}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--moss);animation:sp .8s linear infinite;margin:2rem auto;}
@keyframes sp{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.view.on,.spin{animation:none;}}


/* brand logo — replaces the text wordmark in the community + admin shell */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1;}
.brand__logo{height:26px;width:auto;display:block;}
.brand__logo--white{display:none;}
[data-theme="dark"] .brand__logo--onyx{display:none;}
[data-theme="dark"] .brand__logo--white{display:block;}
.brand small{margin-top:0;}