/* The Hood: CHIHUAHOOD community forum */

:root{
  --lime:#C6FF00;--ink:#101211;--tan:#DFA46B;--cream:#F5EEDC;--olive:#25301B;
  --orange:#FF7A3D;--sun:#FFD23F;--sky:#7FD1FF;--mint:#3DDC97;--lilac:#B69CFF;--red:#E8462A;
  --bg:#F5EEDC;--surface:#FFFCF3;--surface-2:#EFE5CC;--surface-3:#E6D9B8;
  --text:#101211;--muted:#5F5B4C;--faint:#8C8670;
  --line:#101211;--rule:#D9C9A3;--shadow:#101211;
  --head-bg:#C6FF00;--head-text:#101211;
  --link:#101211;--focus:#101211;
  --r-lg:22px;--r:16px;--r-sm:12px;
  --bw:2.5px;--sh:4px;
  --font:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --marker:"Permanent Marker","Rubik",cursive;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    --bg:#101211;--surface:#191C1A;--surface-2:#222622;--surface-3:#2C312B;
    --text:#F5EEDC;--muted:#B3AE9A;--faint:#7E7A6B;
    --line:#3C4238;--rule:#323830;--shadow:#000;
    --head-bg:#151816;--head-text:#F5EEDC;--link:#C6FF00;--focus:#C6FF00;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101211;--surface:#191C1A;--surface-2:#222622;--surface-3:#2C312B;
  --text:#F5EEDC;--muted:#B3AE9A;--faint:#7E7A6B;
  --line:#3C4238;--rule:#323830;--shadow:#000;
  --head-bg:#151816;--head-text:#F5EEDC;--link:#C6FF00;--focus:#C6FF00;color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--lime)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{line-height:1.12;letter-spacing:-.015em;margin:0}
p{margin:0 0 .8em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--lime);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.muted{color:var(--muted)}
.small{font-size:14px}
.i{flex:none;display:inline-block;vertical-align:middle}
[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 18px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:700;font-size:16px;line-height:1.1;text-decoration:none;white-space:nowrap;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background-color .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{color:var(--lime)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--text);box-shadow:none}
.btn-ghost:hover{background:var(--surface-2);box-shadow:none;transform:none}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{min-height:36px;padding:6px 14px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.btn-lg{min-height:52px;padding:12px 24px;font-size:17px}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
.btn-ghost.is-joined{background:var(--lime);color:var(--ink);border-color:var(--ink)}
:root[data-theme="dark"] .btn-ink{background:var(--lime);color:var(--ink);border-color:var(--lime)}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .btn-ink{background:var(--lime);color:var(--ink);border-color:var(--lime)}}
.link-btn{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;font-weight:600}

/* ---------- brand, search, menus ---------- */
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none}
.brand img{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ink);background:var(--lime)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-word{font:400 25px/1 var(--marker);letter-spacing:.01em}
.brand-by{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:3px}
.search{position:relative;display:flex;align-items:center}
.search .i{position:absolute;left:15px;pointer-events:none;opacity:.7}
.search input{width:100%;height:46px;padding:0 16px 0 44px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--surface);color:var(--text);font-size:16px}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;box-shadow:3px 3px 0 var(--ink)}
.search--big{margin:0 0 14px}
.search--big input{height:54px;font-size:18px}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--surface);color:var(--text);text-decoration:none}
.icon-btn:hover{background:var(--ink);color:var(--lime)}
.count{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--orange);color:var(--ink);border:2px solid var(--ink);font:800 11px/18px var(--font);font-style:normal;text-align:center}
.menu{position:relative}
.menu>summary{list-style:none;display:block}
.menu>summary::-webkit-details-marker{display:none}
.av{border-radius:50%;border:2px solid var(--ink);background:var(--lime);object-fit:cover;flex:none;vertical-align:middle}
.av--me{width:40px;height:40px;border-width:2.5px}
.menu-pop{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:var(--surface);color:var(--text);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--shadow);padding:8px;z-index:60;display:flex;flex-direction:column;gap:2px}
.menu--up .menu-pop{top:auto;bottom:calc(100% + 10px);left:0;right:0}
.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;border:0;background:none;color:inherit;text-decoration:none;font-weight:600;font-size:15px;text-align:left}
.menu-pop a:hover,.menu-pop button:hover{background:var(--surface-2)}
.menu-pop form{margin:0}
.menu-pop input{width:100%;margin:4px 0;padding:9px 11px;border:2px solid var(--line);border-radius:10px;background:var(--bg);font-size:14px}
.menu-pop--right{right:0;left:auto}
.only-sm{display:none!important}

/* ---------- app shell: side nav | feed column | rail ---------- */
.app{--gut:16px;flex:1;width:100%;max-width:1800px;margin:0 auto;padding:0 calc(var(--gut) - 6px) 0 var(--gut);display:grid;grid-template-columns:250px minmax(0,1fr) 330px;align-items:start}
.app--norail{grid-template-columns:250px minmax(0,1fr);padding-right:var(--gut)}
.app--bare{grid-template-columns:minmax(0,1060px);justify-content:center}
.main{min-width:0;min-height:100vh;outline:none;background:var(--surface);border-left:var(--bw) solid var(--line);border-right:var(--bw) solid var(--line);padding-bottom:60px}
.app--bare .main{background:transparent;border:0}
.app>.main>*{margin-left:22px;margin-right:22px}
.app>.main>:is(.mtop,.tabs,.compose-row,.tlist){margin-left:0;margin-right:0}
.app>.main>.mtop+*:not(.tabs),.app>.main>.mtop+.notice+*{margin-top:22px}
.mtop{display:none}

.side{position:sticky;top:0;height:100vh;height:100dvh}
.side-in{height:100%;display:flex;flex-direction:column;gap:6px;padding:18px 16px 18px 0;overflow-y:auto;scrollbar-width:none}
.side-in::-webkit-scrollbar{display:none}
.side .brand{padding:4px 10px 16px}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.side-list a{position:relative;display:flex;align-items:center;gap:16px;padding:11px 16px;border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:18px;border:2px solid transparent}
.side-list a:hover{background:var(--surface-2)}
.side-list a.is-on{background:var(--surface);border-color:var(--ink);box-shadow:3px 3px 0 var(--shadow);font-weight:800}
.side-list .count{position:static;margin-left:auto}
.side-new{width:100%;margin-top:14px;font-size:18px}
.side-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
.me-chip{display:flex!important;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:999px;border:2px solid transparent;cursor:pointer}
.me-chip:hover,.menu[open] .me-chip{background:var(--surface-2);border-color:var(--ink)}
.me-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.me-txt b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-txt small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-dot{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--c);color:var(--ci);border:2px solid var(--ink);font:800 10px/1 var(--font);letter-spacing:.02em;flex:none}

.rail{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-in{display:flex;flex-direction:column;gap:18px;padding:14px 6px 30px 18px}
.search--rail{position:sticky;top:0;z-index:5;padding:4px 0 6px;background:var(--bg)}
.search--rail input{height:48px}
.rail-box-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 12px;border-bottom:2px solid var(--rule)}
.rail-box-h h2{font-size:17px!important;margin:0!important}
.rail-box-h a{font-weight:700;font-size:14px}
.rail-nbs{list-style:none;margin:0;padding:6px 8px 8px}
.rail-nbs a{display:grid;grid-template-columns:18px auto 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--text);text-decoration:none}
.rail-nbs a:hover{background:var(--surface-2)}
.rail-nbs b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-nbs small{font-size:13px;color:var(--muted)}
.rail-n{font-size:13px;font-weight:800;color:var(--faint);text-align:center}
.rail-foot{padding:0 6px;font-size:13px;color:var(--muted)}
.rail-foot nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}
.rail-foot a{color:var(--muted);font-weight:600;text-decoration:none}
.rail-foot a:hover{color:var(--text);text-decoration:underline}

/* ---------- cards ---------- */
.card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh) var(--sh) 0 var(--shadow);padding:20px}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .tcard,:root[data-theme="dark"] .post{border-color:var(--line)}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .card,:root[data-theme="system"] .tcard,:root[data-theme="system"] .post{border-color:var(--line)}}
.card h2{font-size:20px;font-weight:800;margin-bottom:10px}
.card-h{display:flex;align-items:center;gap:8px;font-size:17px!important}
.card--lime{background:var(--lime);color:var(--ink);border-color:var(--ink)!important}
.card--lime .muted{color:#3c4a12}
.card--ink{background:var(--ink);color:var(--cream);border-color:var(--ink)!important}
.card--ink .muted{color:#b9b4a1}
.card--flush{padding:0;overflow:hidden}
.card--form{padding:24px}
.more{display:inline-block;margin-top:6px;font-weight:700;font-size:15px}
.ticks{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:5px;background:var(--lime);border:2px solid var(--ink);box-shadow:inset 0 0 0 2px var(--lime)}
.ticks--x li::before{background:var(--orange)}
.rail-join{position:relative;overflow:hidden;padding:20px 20px 18px}
.rail-kick{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lime);margin:0 0 6px}
.rail-kick i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.rail-join h2{font-size:25px;font-weight:900;max-width:170px;margin-bottom:8px}
.rail-join p{font-size:15px;color:#d8d2bd}
.rail-join .btn{margin-top:8px}
.rail-join .btn-ghost{border-color:var(--cream);color:var(--cream)}
.rail-join .btn-ghost:hover{background:rgba(245,238,220,.1)}
.rail-dog{position:absolute;right:-6px;top:-2px;width:96px;transform:rotate(6deg)}
.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.board li{display:flex;align-items:center;gap:10px}
.board-n{width:24px;font:900 18px/1 var(--font);color:var(--muted);text-align:center}
.board-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.ranks{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ranks li{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}
.ranks--row{flex-direction:row;flex-wrap:wrap;gap:10px}
.ranks--row li{gap:8px;background:var(--surface-2);padding:6px 10px 6px 6px;border-radius:999px}
.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.rules li::marker{font-weight:800}

/* ---------- pills, chips ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;border:2px solid var(--ink);font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1.35;white-space:nowrap;background:var(--surface-2);color:var(--ink)}
.pill--pup{background:var(--cream)}
.pill--regular{background:#E8FF9A}
.pill--barker{background:var(--orange)}
.pill--veteran{background:var(--olive);color:var(--lime)}
.pill--legend{background:var(--ink);color:var(--lime)}
.pill--team{background:var(--lime)}
.pill--mod{background:var(--sky)}
.pill--op{background:var(--tan)}
.pill--bad{background:var(--orange)}
:root[data-theme="dark"] .pill--legend{border-color:var(--lime)}
.nb-chip{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:8px;background:var(--c);color:var(--ci);border:2px solid var(--ink);font:800 11px/1 var(--font);letter-spacing:.04em;text-decoration:none;position:relative;z-index:2}
.nb-chip--sm{height:22px;min-width:30px;font-size:10px}
.nb-chip,.nb-badge,.nb-dot{padding:0;overflow:hidden}
.nb-chip{width:28px;min-width:28px;height:28px}
.nb-chip--sm{width:24px;min-width:24px;height:24px;border-radius:7px}
.nb-badge{width:52px}
.nb-badge--lg{width:84px}
.nb-pic{display:block;width:100%;height:100%;object-fit:cover}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600;text-decoration:none;position:relative;z-index:2}
.tag:hover{background:var(--lime);color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.flag{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.flag--pin{color:var(--text);background:var(--lime);padding:1px 8px 1px 6px;border-radius:999px;border:2px solid var(--ink);color:var(--ink)}
.flag--bad{color:var(--red)}
.dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;display:inline-block}
.who{font-weight:700;color:var(--text);text-decoration:none;position:relative;z-index:2}
.who:hover{text-decoration:underline}
time{white-space:nowrap}

/* ---------- headings, tabs ---------- */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.page-h{font-size:clamp(28px,3.2vw,40px);font-weight:900}
.kicker{font:400 17px/1 var(--marker);color:var(--muted);margin:0 0 8px;letter-spacing:.01em}
.lede{font-size:18px;color:var(--muted);max-width:640px;margin-bottom:20px}
.sec-h{font-size:20px;font-weight:800;margin:26px 0 12px}
.tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;padding:2px 4px 6px 2px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;border:2px solid transparent;color:var(--text);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.tab:hover{background:var(--surface-2)}
.tab.is-on{background:var(--lime);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
/* feed column: tabs become a sticky bar across the top */
.main>.tabs{position:sticky;top:0;z-index:20;display:flex;gap:0;padding:0;margin-bottom:0;background:var(--surface);border-bottom:var(--bw) solid var(--line)}
.main>.tabs .tab{flex:1;justify-content:center;position:relative;border:0;border-radius:0;padding:17px 12px 15px;color:var(--muted);box-shadow:none;background:none}
.main>.tabs .tab:hover{background:var(--surface-2);color:var(--text)}
.main>.tabs .tab.is-on{color:var(--text);font-weight:800;background:none}
.main>.tabs .tab.is-on::after{content:"";position:absolute;left:50%;bottom:-2.5px;width:min(84px,70%);height:7px;transform:translateX(-50%);background:var(--lime);border:2px solid var(--ink);border-bottom:0;border-radius:7px 7px 0 0}
.main>.subtabs{margin:12px 22px 4px}
.subtabs{display:flex;gap:14px;margin:-6px 0 16px 6px;font-size:14px;font-weight:600}
.subtabs a{color:var(--muted);text-decoration:none}
.subtabs a.is-on{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}

/* "what's barking" row */
.compose-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:var(--bw) solid var(--line);color:var(--faint);text-decoration:none;font-size:19px}
.compose-row:hover{background:var(--bg)}
.compose-ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose-row .btn{box-shadow:2px 2px 0 var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:1fr 210px;align-items:center;gap:16px;background:var(--lime);color:var(--ink);border:3px solid var(--ink);border-radius:28px;box-shadow:6px 6px 0 var(--ink);padding:30px 30px 28px;margin-bottom:26px;overflow:hidden}
.hero h1{font-size:clamp(32px,3.7vw,50px);font-weight:900;letter-spacing:-.03em;margin-bottom:12px}
.hero .hl{font:400 .86em/1.05 var(--marker);letter-spacing:0;display:inline-block;transform:rotate(-1.5deg);margin-top:4px}
.hero p{font-size:18px;max-width:520px}
.hero .kicker{color:#3c4a12}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.hero .btn-ghost{border-color:var(--ink);color:var(--ink)}
.hero .btn-ghost:hover{background:rgba(16,18,17,.08)}
.hero-dog{width:220px;margin:-10px -10px -30px -10px;filter:drop-shadow(5px 5px 0 rgba(16,18,17,.9))}

/* ---------- thread list ---------- */
.tlist{display:flex;flex-direction:column;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh) var(--sh) 0 var(--shadow);overflow:hidden}
.main>.tlist{border:0;border-radius:0;box-shadow:none;background:none}
.trow{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 22px 12px;border-bottom:2px solid var(--rule);transition:background .12s}
.tlist>.trow:last-child{border-bottom:0}
.main>.tlist>.trow:last-child{border-bottom:2px solid var(--rule)}
.trow:hover{background:var(--bg)}
.trow.is-pinned{box-shadow:inset 6px 0 0 var(--lime)}
.trow-av{position:relative;z-index:2;align-self:start}
.trow-av .av{width:44px;height:44px}
.trow-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:15px;color:var(--muted);margin-bottom:2px}
.trow-meta a{position:relative;z-index:2}
.trow-in{color:var(--faint)}
.trow-nb{color:var(--text);font-weight:700;text-decoration:none}
.trow-nb:hover{text-decoration:underline}
.trow-title{font-size:20px;font-weight:800;margin:2px 0 4px;letter-spacing:-.01em}
.trow-title a{color:var(--text);text-decoration:none}
.trow-title a::after{content:"";position:absolute;inset:0;z-index:1}
.trow:hover .trow-title a{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}
.trow-ex{color:var(--muted);font-size:16px;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trow .tags{margin:4px 0 8px}
.trow-act{display:flex;gap:28px;color:var(--muted);font-size:14px;font-weight:700;margin-top:2px}
.tcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:6px}
.tcard-top a{position:relative;z-index:2}
.stats{display:flex;gap:14px;color:var(--muted);font-size:14px;font-weight:700}
.stat{display:inline-flex;align-items:center;gap:6px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0}
.pager-n{font-weight:700;color:var(--muted)}
.pager--nums{justify-content:flex-start;flex-wrap:wrap;gap:6px;margin:14px 0}
.pager--nums a,.pager--nums span{display:inline-grid;place-items:center;min-width:38px;height:38px;border-radius:12px;border:2px solid var(--line);text-decoration:none;color:var(--text);font-weight:700}
.pager--nums .is-on{background:var(--lime);color:var(--ink);border-color:var(--ink)}

/* ---------- empty / lost ---------- */
.empty{text-align:center;padding:40px 20px 30px;border:2.5px dashed var(--rule);border-radius:var(--r-lg)}
.empty img{width:160px;height:auto;margin-bottom:6px}
.empty h3{font-size:24px;font-weight:900;margin-bottom:6px}
.empty p{color:var(--muted);max-width:420px;margin:0 auto 16px}
.row-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.row-btns--left{justify-content:flex-start}
.row-btns form{margin:0}
.lost{text-align:center;padding:30px 10px 40px}
.lost img{width:240px;transform:rotate(-4deg)}
.lost h1{font-size:clamp(28px,4vw,44px);font-weight:900;margin:6px auto 12px;max-width:640px}
.lost .row-btns{margin-top:18px}

/* ---------- notices, toast ---------- */
.notice{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:2.5px solid var(--ink);margin-bottom:18px;font-weight:600;background:var(--surface);color:var(--text)}
.notice--ok{background:var(--lime);color:var(--ink)}
.notice--error{background:#FFD9C7;color:var(--ink)}
.notice--info{background:var(--surface-2)}
.notice a{color:inherit}
.toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,20px);opacity:0;transition:transform .2s,opacity .2s;background:var(--ink);color:var(--lime);border:2.5px solid var(--lime);border-radius:999px;padding:11px 20px;font-weight:700;box-shadow:4px 4px 0 rgba(0,0,0,.35);max-width:calc(100vw - 32px)}
.toast.is-on{transform:translate(-50%,0);opacity:1}
.toast.is-bad{color:var(--cream);border-color:var(--orange)}

/* ---------- neighborhoods ---------- */
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.nb-card{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh) var(--sh) 0 var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.nb-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--c);border-bottom:2px solid var(--ink)}
.nb-card-link{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;margin-top:8px}
.nb-card-link:hover h2{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px}
.nb-card h2{font-size:21px;font-weight:800;margin:0}
.nb-card p{color:var(--muted);font-size:15px;margin:0;flex:1}
.nb-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.nb-card-foot form{margin:0}
.nb-badge{display:inline-grid;place-items:center;min-width:52px;height:52px;padding:0;border-radius:15px;background:var(--c);color:var(--ci);border:2.5px solid var(--ink);font:800 15px/1 var(--font);letter-spacing:.03em;box-shadow:2px 2px 0 var(--ink);flex:none}
.nb-badge--lg{min-width:84px;height:84px;font-size:22px;border-radius:22px;border-width:3px;box-shadow:4px 4px 0 var(--ink)}
.nb-head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--surface);border:3px solid var(--ink);border-radius:26px;box-shadow:5px 5px 0 var(--shadow);padding:22px;margin-bottom:22px;position:relative;overflow:hidden}
.nb-head::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:var(--c);opacity:.22;pointer-events:none}
.nb-head h1{font-size:clamp(28px,3.4vw,40px);font-weight:900;margin-bottom:4px}
.nb-head p{margin:0 0 4px}
.nb-head-act{display:flex;flex-direction:column;gap:10px;align-items:stretch;position:relative;z-index:1}
.nb-head-act form{margin:0}
.nb-head-act .btn{width:100%}
.nb-mini{border-top:10px solid var(--c)!important}
.nb-mini-h{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:18px;margin-bottom:12px}
.nb-mini .nb-badge{width:40px;min-width:40px;height:40px;border-radius:12px}

/* ---------- thread ---------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a.nb-chip{color:var(--ci);text-decoration:none}
.thread-head{margin-bottom:16px}
.thread-head h1{font-size:clamp(28px,3.6vw,42px);font-weight:900;letter-spacing:-.025em;margin-bottom:10px;overflow-wrap:anywhere}
.thread-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.thread-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px;padding:10px 4px;border-bottom:2.5px solid var(--ink);flex-wrap:wrap}
.thread-bar-act{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.thread-bar-act form{margin:0}
.reply-sort{display:flex;gap:16px;font-size:14px;font-weight:600;margin:6px 4px 10px}
.reply-sort a{color:var(--muted);text-decoration:none}
.reply-sort a.is-on{color:var(--text);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}
.posts{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.post{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--shadow);padding:14px 18px 10px;scroll-margin-top:80px}
.post--op{border-width:3px;border-radius:var(--r-lg);box-shadow:5px 5px 0 var(--shadow);padding:20px 24px 14px}
.post--op .post-body{font-size:18px}
.post.is-gone{background:transparent;box-shadow:none;border-style:dashed}
.post.is-target{animation:target 1.8s ease-out}
@keyframes target{0%,30%{box-shadow:0 0 0 5px var(--lime),3px 3px 0 var(--shadow)}100%{box-shadow:3px 3px 0 var(--shadow)}}
.post-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.post-av{flex:none;line-height:0}
.post-who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.post-name{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.post-sub{font-size:13px;color:var(--muted)}
.post-time{color:inherit;text-decoration:none}
.post-time:hover{text-decoration:underline}
.post-n{font:800 14px/1 var(--font);color:var(--faint);align-self:flex-start}
.post-body{overflow-wrap:anywhere}
.post-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:8px;border-top:2px dashed var(--rule)}
.post-tools{display:flex;align-items:center;gap:2px;margin-left:auto}
.gone{color:var(--muted);font-style:italic}
.replies{margin-left:22px;padding-left:16px;border-left:3px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.replies .post{box-shadow:2px 2px 0 var(--shadow)}
.act{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 11px;border-radius:999px;border:0;background:none;color:var(--muted);font-weight:700;font-size:14px;text-decoration:none;list-style:none}
.act::-webkit-details-marker{display:none}
.act:hover{background:var(--surface-2);color:var(--text)}
.act.is-on{color:var(--text);background:var(--lime);color:var(--ink)}
.more-menu{position:relative}
.more-menu .menu-pop{top:calc(100% + 6px);min-width:220px}
.reply-zone{margin-top:24px}
.join-reply{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.join-reply>div{flex:1;min-width:200px}
.join-reply p{margin:2px 0 0;font-size:15px}
.join-reply img{width:72px;height:auto}

/* votes */
.vote{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;background:var(--bg);margin:0}
.vote-b{display:inline-grid;place-items:center;width:36px;height:34px;border:0;background:none;color:var(--muted);border-radius:999px;text-decoration:none}
.vote-b:hover{color:var(--ink);background:var(--lime)}
.vote-n{min-width:26px;text-align:center;font-weight:800;font-size:15px}
.vote.is-up .vote-up{background:var(--lime);color:var(--ink)}
.vote.is-down .vote-down{background:var(--tan);color:var(--ink)}

/* reactions: sticker chips */
.rxs{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.rx{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:2px solid var(--ink);border-radius:10px;background:var(--surface-2);color:var(--ink);font:400 14px/1 var(--marker);letter-spacing:.02em;transition:transform .12s,box-shadow .12s}
.rx b{font:800 13px/1 var(--font)}
.rx .rx-i{width:36px;height:36px;margin:-8px -2px -8px -9px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));transition:transform .15s}
button.rx:hover .rx-i{transform:rotate(-8deg)}
.rx-pop .rx .rx-i{width:40px;height:40px}
.rx-legend .rx .rx-i{width:40px;height:40px}
button.rx:hover{transform:rotate(-3deg) translateY(-1px);box-shadow:2px 2px 0 var(--ink)}
.rx.is-on{box-shadow:2px 2px 0 var(--ink);transform:rotate(-2deg)}
.rx.is-pop{animation:pop .4s ease-out}
@keyframes pop{0%{transform:scale(1) rotate(-2deg)}40%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(1) rotate(-2deg)}}
.rx--bark{background:var(--lime)}
.rx--sus{background:var(--orange)}
.rx--based{background:var(--tan)}
.rx--lol{background:var(--sun)}
.rx--receipts{background:var(--sky)}
.rx.is-static{cursor:default}
.rx-pick{position:relative}
.rx-pick>summary{cursor:pointer}
.rx-pop{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;gap:6px;padding:10px;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--shadow);z-index:30;flex-wrap:nowrap}
.rx-pop .rx{height:36px;font-size:15px}
.rx-legend{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.rx-legend li{display:flex;align-items:center;gap:10px}
.rx-legend .rx{min-width:124px;justify-content:flex-start;height:36px}
.rx-legend--big{font-size:16px}

/* rendered markdown */
.md p{margin:0 0 .75em}
.md>:last-child{margin-bottom:.3em}
.md a{color:var(--link);font-weight:600}
.md code{font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);padding:.12em .4em;border-radius:6px}
.md pre{background:var(--ink);color:var(--cream);border-radius:14px;padding:14px 16px;overflow:auto;font-size:14px;line-height:1.5;margin:0 0 .9em;border:2px solid var(--ink)}
.md pre code{background:none;padding:0;color:inherit}
.md blockquote{margin:0 0 .9em;padding:6px 0 6px 16px;border-left:4px solid var(--lime);color:var(--muted)}
:root[data-theme="light"] .md blockquote,:root[data-theme="system"] .md blockquote{border-left-color:var(--tan)}
.md ul,.md ol{margin:0 0 .9em;padding-left:1.4em}
.md li{margin:.2em 0}
.md li::marker{color:var(--muted);font-weight:700}
.md .md-h{font-weight:800;font-size:1.08em}
.md hr{border:0;border-top:2px dashed var(--rule);margin:1em 0}
.md del{opacity:.7}
.mention{background:var(--surface-2);padding:0 .3em;border-radius:6px;text-decoration:none}
.addr{display:inline-flex;align-items:center;gap:0;vertical-align:baseline;border:2px solid var(--ink);border-radius:9px;overflow:hidden;font:600 .84em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);white-space:nowrap}
.addr>a,.addr>span{padding:4px 7px;color:var(--text);text-decoration:none}
.addr>a:hover{background:var(--lime);color:var(--ink)}
.addr-copy{border:0;border-left:2px solid var(--ink);background:var(--lime);color:var(--ink);font:800 10px/1 var(--font);text-transform:uppercase;letter-spacing:.06em;padding:6px 7px;align-self:stretch}
.addr-copy.is-done{background:var(--ink);color:var(--lime)}
.addr--tx>span{color:var(--muted)}

/* composer */
.composer{display:flex;flex-direction:column;gap:10px;margin:0}
.composer.is-inline{margin:4px 0 6px 22px;padding-left:16px;border-left:3px solid var(--lime)}
.composer-to{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}
.composer-box{background:var(--surface);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--shadow);overflow:hidden}
.composer-box:focus-within{box-shadow:4px 4px 0 var(--shadow),0 0 0 3px var(--lime)}
.composer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:2px solid var(--rule);background:var(--surface-2);flex-wrap:wrap}
.seg{display:inline-flex;background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:2px}
.seg-b{border:0;background:none;padding:5px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted)}
.seg-b.is-on{background:var(--ink);color:var(--lime)}
:root[data-theme="dark"] .seg-b.is-on{background:var(--lime);color:var(--ink)}
.tools{display:flex;gap:2px}
.tools button{display:inline-grid;place-items:center;width:34px;height:34px;border:0;background:none;border-radius:9px;color:var(--muted)}
.tools button:hover{background:var(--bg);color:var(--text)}
.is-preview .tools{visibility:hidden}
.composer textarea{display:block;width:100%;border:0;background:transparent;padding:14px 16px;resize:vertical;min-height:120px;font-size:17px;line-height:1.55;outline:none}
.composer .preview{padding:14px 16px;min-height:120px}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hint{font-size:13px;color:var(--faint)}

/* ---------- forms ---------- */
.stack{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend,.field-label{font-weight:800;font-size:15px;padding:0}
.field-label{display:block;margin:4px 0 -2px}
.field small{font-size:13px}
.field input,.field textarea,.field select,.mod-user select,.mod-user input,.report-act input{width:100%;padding:12px 14px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--bg);color:var(--text);font-size:16px}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea{border-color:var(--line)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:3px 3px 0 var(--ink),0 0 0 3px var(--lime)}
.field textarea{resize:vertical;line-height:1.5}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.choice{display:flex;align-items:center;gap:10px;padding:11px 14px;border:2px solid var(--line);border-radius:14px;background:var(--bg);font-weight:600;font-size:15px;cursor:pointer}
.choice:has(input:checked){background:var(--lime);color:var(--ink);border-color:var(--ink)}
.choice input{accent-color:var(--ink)}
.nb-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nb-opt{cursor:pointer;position:relative}
.nb-opt input,.av-opt input,.seg--lg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:0;top:0;margin:0}
.nb-opt-in{display:flex;align-items:center;gap:10px;padding:9px 12px;border:2px solid var(--line);border-radius:14px;background:var(--bg);font-weight:700;font-size:15px;transition:transform .1s}
.nb-opt input:checked+.nb-opt-in{border-color:var(--ink);background:var(--c);color:var(--ci);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.nb-opt input:checked+.nb-opt-in .nb-dot{box-shadow:0 0 0 2px var(--surface)}
.nb-opt input:focus-visible+.nb-opt-in{outline:3px solid var(--focus);outline-offset:2px}
.av-pick{display:flex;flex-wrap:wrap;gap:10px}
.av-opt{cursor:pointer;position:relative}
.av-opt input{position:absolute;opacity:0}
.av-opt img{width:72px;height:72px;border-radius:50%;border:3px solid var(--line);background:var(--lime);transition:transform .12s}
.av-opt input:checked+img{border-color:var(--ink);box-shadow:0 0 0 4px var(--lime),4px 4px 0 6px var(--ink);transform:scale(1.04)}
.av-opt input:focus-visible+img{outline:3px solid var(--focus);outline-offset:4px}
.seg--lg{flex-wrap:wrap;width:fit-content}
.seg--lg .seg-b{position:relative;padding:8px 16px;cursor:pointer}
.seg--lg input{position:absolute;opacity:0}
.seg--lg .seg-b:has(input:checked){background:var(--ink);color:var(--lime)}
:root[data-theme="dark"] .seg--lg .seg-b:has(input:checked){background:var(--lime);color:var(--ink)}
.seg--lg .seg-b:has(input:focus-visible){outline:3px solid var(--focus)}
.card--form+.card--form{margin-top:18px}
.card--form .card-h{margin-bottom:0}
.wallet-msg{min-height:1em;margin:6px 0 0}
.wallet-msg.is-bad{color:var(--red)}

/* auth */
.auth{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:28px;align-items:stretch;max-width:960px;margin:10px auto 0}
.auth-card{padding:30px}
.auth-card h1{font-size:34px;font-weight:900;margin-bottom:6px}
.auth-card>p.muted{margin-bottom:20px}
.auth-side{background:var(--olive);color:var(--cream);border:3px solid var(--ink);border-radius:28px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;gap:10px;overflow:hidden}
.auth-side img{width:min(300px,80%);filter:drop-shadow(5px 5px 0 #000)}
.auth-quote{font:400 28px/1.15 var(--marker);color:var(--lime);margin:8px 0 0}
.auth-perks{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px;font:400 22px/1.2 var(--marker);color:var(--lime)}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-weight:700;font-size:14px}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--rule)}
.auth-alt{margin:20px 0 0;text-align:center;font-weight:600}

/* profile */
.profile{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;margin-bottom:20px}
.profile-av{width:132px;height:132px;border-radius:50%;border:3px solid var(--ink);background:var(--lime);box-shadow:5px 5px 0 var(--shadow)}
.profile h1{font-size:clamp(28px,3.5vw,40px);font-weight:900}
.profile-handle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-weight:600;margin:6px 0 10px}
.profile-bio{font-size:17px;max-width:560px}
.profile-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:12px 0 0}
.badge{font:400 14px/1 var(--marker);padding:7px 12px;border-radius:10px;border:2px solid var(--ink);background:var(--sun);color:var(--ink);transform:rotate(-1.5deg)}
.badge:nth-child(2n){transform:rotate(1.5deg);background:var(--sky)}
.badge:nth-child(3n){background:var(--tan)}
.badge--team,.badge--wallet{background:var(--lime)!important}
.badge--admin,.badge--mod{background:var(--sky)!important}
.cred{margin-bottom:20px}
.cred-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:700}
.cred-n{font:400 34px/1 var(--marker);margin-right:6px}
.cred-bar{height:16px;border:2.5px solid var(--ink);border-radius:999px;background:var(--surface-2);overflow:hidden;margin:10px 0 14px}
.cred-bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--lime) 0 10px,#B3E600 10px 20px);border-right:2.5px solid var(--ink)}
.cred-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0}
.cred-stats div{background:var(--surface-2);border-radius:14px;padding:10px 12px}
.cred-stats dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cred-stats dd{margin:0;font-size:24px;font-weight:900}
.mod-user{margin-bottom:20px;padding:14px 18px}
.mod-user summary{font-weight:800;display:flex;gap:8px;align-items:center;cursor:pointer}
.mod-user-in{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.mod-user-in form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mod-user select,.mod-user input{width:auto;flex:1;min-width:140px;padding:8px 12px}

/* reply list, notifications, users */
.rlist{display:flex;flex-direction:column;gap:12px}
.rcard{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--shadow);padding:14px 18px}
:root[data-theme="dark"] .rcard{border-color:var(--line)}
.rcard-body{font-size:15px;color:var(--text);margin:8px 0 4px;max-height:220px;overflow:hidden}
.report-detail{font-style:italic;color:var(--muted);margin:6px 0}
.report-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.report-act form{display:flex;gap:8px;flex:1;min-width:240px;margin:0}
.report-act input{padding:8px 12px;font-size:14px}
.nlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nlist a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none}
.nlist a:hover{border-color:var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.nlist .is-new a{background:var(--surface);border-color:var(--ink);box-shadow:3px 3px 0 var(--shadow);position:relative}
.nlist .is-new a::after{content:"";position:absolute;right:16px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--lime);border:2px solid var(--ink)}
.nlist-txt{display:flex;flex-direction:column;gap:2px;font-size:15px;padding-right:20px}
.nlist-txt small{color:var(--muted)}
.nlist-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink);border:2px solid var(--ink);flex:none}
.ulist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ulist a{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text);text-decoration:none}
.ulist a:hover{border-color:var(--ink)}
.ulist span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.ulist small{color:var(--muted)}

/* about, tables */
.about-hero{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:22px;padding:26px 28px;border-radius:28px;border-width:3px}
.about-hero h1{font-size:clamp(30px,4vw,46px);font-weight:900;margin-bottom:8px}
.about-hero img{width:180px;transform:rotate(6deg)}
.about-hero .kicker{color:#3c4a12}
.prose{padding:28px}
.prose h2{font-size:24px;font-weight:900;margin:28px 0 12px}
.prose h2:first-child{margin-top:0}
.big-list{padding-left:22px;display:flex;flex-direction:column;gap:10px;margin:0}
.big-list li::marker{font:400 18px var(--marker)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 16px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:2.5px solid var(--ink)}
.tbl td{padding:10px 12px;border-bottom:2px dashed var(--rule);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl--log{margin:0}
.tbl--log th:first-child,.tbl--log td:first-child{padding-left:18px}

/* ---------- Neighborhood picker ---------- */
.nbs-host{position:relative}
.field .nbs-native{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;font-weight:700}
.nbs-host>.nbs-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.nbs-host.is-enhanced>.nbs-native{position:absolute;inset:auto 0 0 0;height:1px;opacity:0;pointer-events:none}
.nbs-host.is-enhanced>.nbs-chev{display:none}
.nbs-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 14px 8px 10px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--bg);color:var(--text);font-size:16px;font-weight:700;text-align:left;cursor:pointer;transition:box-shadow .12s,transform .12s}
.nbs-btn:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.nbs-btn:focus-visible,.is-open>.nbs-btn{outline:none;box-shadow:3px 3px 0 var(--ink),0 0 0 3px var(--lime)}
.nbs-btn.is-empty{padding-left:16px;color:var(--muted);font-weight:600}
.nbs-val{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.nbs-val span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nbs-btn .nbs-chev{flex:none;margin-left:auto;transition:transform .15s}
.is-open>.nbs-btn .nbs-chev{transform:rotate(180deg)}
.nbs-pic{width:36px;height:36px;flex:none;border-radius:10px;border:2px solid var(--ink);background:var(--c);object-fit:cover}
.nbs-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;max-height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);outline:none;animation:nbs-in .14s ease-out}
@keyframes nbs-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.nbs-list{animation:none}.nbs-btn,.nbs-btn .nbs-chev{transition:none}}
.nbs-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:11px;cursor:pointer;border:2px solid transparent}
.nbs-opt.is-active{background:var(--bg);border-color:var(--ink)}
.nbs-opt[aria-selected="true"]{background:var(--c);color:var(--ci)}
.nbs-opt[aria-selected="true"] small{color:var(--ci);opacity:.75}
.nbs-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.nbs-txt b{font-size:15.5px;line-height:1.25}
.nbs-txt small{font-size:13px;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nbs-opt>.i{flex:none;opacity:0}
.nbs-opt[aria-selected="true"]>.i{opacity:1}
.nbs-host.is-invalid>.nbs-btn{border-color:var(--danger,#D7263D);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger,#D7263D) 30%,transparent)}
.nbs-err{margin:8px 0 0;color:var(--danger,#D7263D);font-size:14px;font-weight:700}
:root[data-theme="dark"] .nbs-btn,:root[data-theme="dark"] .nbs-list{border-color:var(--line)}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .nbs-btn,:root[data-theme="system"] .nbs-list{border-color:var(--line)}}

/* ---------- tab bar ---------- */
.tabbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .app{grid-template-columns:230px minmax(0,1fr) 300px}
  .app--norail{grid-template-columns:230px minmax(0,1fr)}
}
@media (max-width:1100px){
  .app{grid-template-columns:230px minmax(0,1fr);padding-right:var(--gut)}
  .rail{display:none}
}
/* tablets: icon-only side nav */
@media (max-width:1000px){
  .app,.app--norail{grid-template-columns:88px minmax(0,1fr)}
  .side-in{align-items:center;padding:16px 10px}
  .side .brand{padding:4px 0 14px}
  .side .brand-txt,.side-list a>span,.side-new span,.me-txt,.me-chip>.i,.side-foot .btn span{display:none}
  .side-list a{padding:12px;justify-content:center}
  .side-list .count{position:absolute;top:2px;right:0}
  .side-new{width:56px;height:56px;min-height:56px;padding:0;border-radius:50%}
  .side-foot .btn{width:52px;padding:0}
  .me-chip{padding:4px}
  .menu--up .menu-pop{right:auto;width:240px}
}
@media (max-width:860px){
  html{scroll-padding-top:120px}
  body{font-size:16.5px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .app,.app--norail,.app--bare{grid-template-columns:minmax(0,1fr);padding:0}
  .side{display:none}
  .main{border:0;min-height:calc(100vh - 72px)}
  .app>.main>*{margin-left:16px;margin-right:16px}
  .app>.main>:is(.mtop,.tabs,.compose-row,.tlist){margin-left:0;margin-right:0}
  .app>.main>.mtop+*:not(.tabs),.app>.main>.mtop+.notice+*{margin-top:18px}
  .mtop{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;background:var(--surface);border-bottom:var(--bw) solid var(--line)}
  .mtop .brand img{width:38px;height:38px}
  .mtop .brand-word{font-size:22px}
  .mtop .brand-by{display:none}
  .mtop-act{display:flex;align-items:center;gap:8px}
  .mtop-me{display:block;border-radius:50%}
  .main>.tabs{top:58px}
  .main>.subtabs{margin:12px 16px 4px}
  .compose-row{padding:12px 16px;font-size:17px}
  .trow{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 16px 10px}
  .trow-av .av{width:40px;height:40px}
  .trow-title{font-size:18px}
  .trow-act{gap:22px}
  .hide-sm{display:none!important}
  .only-sm{display:inline-flex!important}
  .search--big{display:flex}
  .nb-head{grid-template-columns:auto 1fr;padding:18px}
  .nb-head-act{grid-column:1/-1;flex-direction:row}
  .nb-head-act>*{flex:1}
  .nb-badge--lg{width:64px;min-width:64px;height:64px;border-radius:18px}
  .post{padding:12px 14px 8px}
  .post--op{padding:16px 16px 10px}
  .replies{margin-left:6px;padding-left:10px}
  .composer.is-inline{margin-left:6px;padding-left:10px}
  .post-tools{margin-left:0}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-card{padding:22px}
  .profile{grid-template-columns:auto 1fr}
  .profile-av{width:92px;height:92px}
  .profile-edit{grid-column:1/-1}
  .cred-stats{grid-template-columns:repeat(2,1fr)}
  .about-hero{grid-template-columns:1fr}
  .about-hero img{display:none}
  .prose{padding:20px}
  .tbl--log thead{display:none}
  .tbl--log tr{display:block;padding:10px 16px;border-bottom:2px dashed var(--rule)}
  .tbl--log td{display:block;border:0;padding:2px 0!important}
  .card--form{padding:18px}
  .rxs{position:relative}
  .rx-pick{position:static}
  .rx-pop{flex-wrap:wrap;width:max-content;max-width:calc(100vw - 60px)}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);border-top:3px solid var(--ink);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:#BDB8A6;text-decoration:none;font-size:11px;font-weight:700;border-radius:14px}
  .tabbar a.is-on{color:var(--lime)}
  .tabbar .count{top:0;right:calc(50% - 22px);font-style:normal}
  .tabbar .tab-new{justify-self:center;width:56px;height:56px;margin-top:-22px;border-radius:50%;background:var(--lime);color:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 3px var(--lime);display:grid;place-items:center;padding:0}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}
/* sign-in pages have no side nav, so they keep the header at every size */
.app--bare .mtop{display:flex;align-items:center;justify-content:space-between;padding:14px 0;margin:0 0 10px;background:none;border:0;position:static}
.app--bare .mtop-act{display:none}
.app--bare .main{padding-bottom:40px}
.app--bare>.main>*{margin-left:20px;margin-right:20px}
@media (max-width:560px){
  .main>.tabs .tab{padding:15px 6px 13px;font-size:14.5px}
  .main>.tabs .tab .i{display:none}
  .trow-meta .pill,.trow-in{display:none}
}
@media (max-width:420px){
  .stats{gap:10px}
  .hint{display:none}
  .head-row{align-items:center}
}

/* paw cursor: mouse and trackpad only */
@media (pointer:fine){
  html,body{cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate%28-20 16 16%29" fill="%23C6FF00" stroke="%23101211" stroke-width="2"><path d="M16 15c-3.9 0-7.4 4.1-7.4 7.4 0 2.1 1.7 3.2 3.6 3.2 1.6 0 2.4-.8 3.8-.8s2.2.8 3.8.8c1.9 0 3.6-1.1 3.6-3.2 0-3.3-3.5-7.4-7.4-7.4Z"/><ellipse cx="7" cy="13" rx="2.6" ry="3.2"/><ellipse cx="12.2" cy="7.4" rx="2.7" ry="3.4"/><ellipse cx="19.8" cy="7.4" rx="2.7" ry="3.4"/><ellipse cx="25" cy="13" rx="2.6" ry="3.2"/></g></svg>') 6 6,auto}
  a,button,summary,label,select,[role="button"],.choice,.nb-opt,.av-opt{cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g transform="rotate%28-20 16 16%29" fill="%23101211" stroke="%23C6FF00" stroke-width="2"><path d="M16 15c-3.9 0-7.4 4.1-7.4 7.4 0 2.1 1.7 3.2 3.6 3.2 1.6 0 2.4-.8 3.8-.8s2.2.8 3.8.8c1.9 0 3.6-1.1 3.6-3.2 0-3.3-3.5-7.4-7.4-7.4Z"/><ellipse cx="7" cy="13" rx="2.6" ry="3.2"/><ellipse cx="12.2" cy="7.4" rx="2.7" ry="3.4"/><ellipse cx="19.8" cy="7.4" rx="2.7" ry="3.4"/><ellipse cx="25" cy="13" rx="2.6" ry="3.2"/></g></svg>') 6 6,pointer}
  input[type="text"],input[type="search"],input[type="password"],input:not([type]),textarea{cursor:text}
  .rx.is-static{cursor:default}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* lime surfaces keep ink buttons in every theme */
.card--lime .btn-ink,.hero .btn-ink{background:var(--ink)!important;color:var(--cream)!important;border-color:var(--ink)!important}
.card--lime .btn-ghost{border-color:var(--ink);color:var(--ink)}
:root[data-theme="dark"] .icon-btn{border-color:var(--line)}
:root[data-theme="dark"] .tabbar{border-top-color:#2C312B}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"] .icon-btn{border-color:var(--line)}
  :root[data-theme="system"] .tabbar{border-top-color:#2C312B}
}
@media (max-width:520px){
  .rx-pick .act span{display:none}
  .post-tools{margin-left:auto}
  .post-foot{gap:6px}
  .thread-bar{padding:6px 0}
}
.app--norail .main>.card--form,.app--norail .main>.notice{max-width:780px}
.stack>.btn{align-self:flex-start}