/* Wildroot Social prototype: app shell on top of wr.css (design tokens + components). */
@font-face{font-family:Figtree;src:url(../fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

html.wr{overflow:visible;position:static;min-height:100%;--blur:10px;--barh:56px;--navh:64px;--safe-b:env(safe-area-inset-bottom,0px);
  --ease-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1)}
body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%}
button{touch-action:manipulation}
.wr button:active{opacity:.85}

/* ---- extra fictional avatars / scenes (same recipe as wr.css) ---- */
.a11{background:radial-gradient(circle at 65% 30%,oklch(88% .07 160),transparent 55%),linear-gradient(200deg,oklch(60% .1 170),oklch(40% .07 190))}
.a12{background:radial-gradient(circle at 30% 30%,oklch(85% .1 100),transparent 60%),oklch(55% .09 110)}
.a13{background:radial-gradient(circle at 70% 70%,oklch(80% .1 350),transparent 55%),linear-gradient(160deg,oklch(64% .12 10),oklch(46% .1 340))}
.a14{background:conic-gradient(from 90deg at 40% 40%,oklch(62% .08 280),oklch(80% .06 240),oklch(55% .08 300),oklch(62% .08 280))}
.a15{background:radial-gradient(circle at 40% 35%,oklch(86% .03 250),transparent 55%),linear-gradient(180deg,oklch(58% .03 250),oklch(40% .03 260))}
.a16{background:radial-gradient(circle at 30% 70%,oklch(78% .12 60),transparent 60%),linear-gradient(135deg,oklch(52% .12 40),oklch(40% .08 30))}
.a17{background:radial-gradient(circle at 60% 30%,oklch(90% .06 90),transparent 50%),linear-gradient(200deg,oklch(70% .12 90),oklch(55% .12 120))}
.a18{background:linear-gradient(135deg,oklch(42% .06 220) 0 50%,oklch(66% .08 200) 50% 100%)}
.a19{background:repeating-linear-gradient(45deg,oklch(70% .15 30) 0 6px,oklch(80% .15 90) 6px 12px)}
.sc-sky{background:radial-gradient(30% 22% at 70% 30%,oklch(97% .03 90),transparent 70%),linear-gradient(180deg,oklch(72% .08 240),oklch(88% .04 220))}
.sc-field{background:linear-gradient(180deg,oklch(86% .05 230) 0 40%,transparent 40%),repeating-linear-gradient(170deg,oklch(74% .12 100) 0 10px,oklch(66% .12 110) 10px 20px)}
.sc-rust{background:radial-gradient(50% 50% at 40% 45%,oklch(62% .12 45),transparent 70%),radial-gradient(40% 40% at 75% 70%,oklch(45% .08 35),transparent 70%),oklch(78% .05 70)}
.sc-night{background:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 45% 55%,#fff,transparent),radial-gradient(40% 30% at 80% 90%,oklch(40% .08 280),transparent 70%),linear-gradient(180deg,oklch(22% .05 270),oklch(34% .07 280))}
html.noimg .img{background:var(--sunken)!important}

/* ---- fixed chrome ---- */
#bar{position:fixed;top:0;left:0;right:0;z-index:20;transition:transform .22s var(--ease-out);-webkit-user-select:none;user-select:none}
#bar.hide{transform:translateY(-100%)}
.topbar,.nav{-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);backdrop-filter:blur(var(--blur)) saturate(1.4)}
html.noblur .topbar,html.noblur .nav{background:var(--bar);-webkit-backdrop-filter:none;backdrop-filter:none}
.topbar.tall .moods{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding-right:12px}
.topbar.tall .moods::-webkit-scrollbar{display:none}
.moods .calm{margin-left:4px}
.mood,.calm{transition:background-color .15s,color .15s}
.nav{position:fixed;height:calc(64px + var(--safe-b));padding-bottom:var(--safe-b);-webkit-user-select:none;user-select:none}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-3);font-size:11.5px;letter-spacing:-.01em;font-weight:500;line-height:16px;position:relative}
.nav button.on{color:var(--text)}
.nav button.on .pill{background:var(--accent-soft);color:var(--accent)}
.nav .pill{transition:background-color .2s}
.fab{position:fixed;bottom:calc(var(--navh) + 16px + var(--safe-b));z-index:15;transition:transform .2s var(--ease-out)}
.fab:active{transform:scale(.94)}
html.v-thread .nav,html.v-thread .fab,html.v-user .fab,html.v-action .nav,html.v-action .fab,html.v-user .nav{display:none}
html:not(.v-home) .fab{display:none}
.bar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.newpill{position:fixed;top:calc(var(--barh) + 8px);z-index:18;opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:transform .32s var(--ease-spring),opacity .2s}
.newpill.in{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.newpill.up{transform:translate(-50%,calc(-1 * var(--barh)))}

/* ---- views ---- */
.view{padding-top:var(--barh);padding-bottom:calc(var(--navh) + var(--safe-b) + 24px);min-height:100vh}
.view[hidden]{display:none}
html.v-thread .view{padding-bottom:calc(84px + var(--safe-b))}
.view.enter{animation:venter .22s var(--ease-out)}
@keyframes venter{from{opacity:.4;transform:translateX(16px)}to{opacity:1;transform:none}}
.vl{position:relative;overflow-anchor:none}
.vi{position:absolute;left:0;right:0;top:0;contain:layout paint style}
.measurer{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none;contain:strict;height:0;overflow:hidden}
.measurer .vi{position:relative}
.post{cursor:default}
.post.rp .gut{grid-row:2 / span 20}
.post .body,.post .media,.post .lc,.post .qt{cursor:pointer}
.post .qt.gated{cursor:default}
.actions{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.chiprow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.lc,.qt{text-decoration:none}
.post .ctx.lead span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carousel .track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-right:16px}
.carousel .track::-webkit-scrollbar{display:none}
.cc{scroll-snap-align:start;cursor:pointer;text-align:left}
.mlt{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.mlt::-webkit-scrollbar{display:none}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 32px}
.empty .i{color:var(--accent)}
.flash{animation:flash 1.6s var(--ease-out)}
@keyframes flash{0%,30%{background:var(--accent-soft)}100%{background:var(--bg)}}
.skl .b{animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.homeband{position:relative}

/* ---- action micro-interactions (transform/opacity only) ---- */
.act{position:relative}
.act .i{transform-origin:50% 55%}
.act .i.boing{animation:boing .5s var(--ease-spring)}
@keyframes boing{0%{transform:scale(.62)}100%{transform:scale(1)}}
.act .i.spin{animation:spin .55s var(--ease-spring)}
@keyframes spin{0%{transform:rotate(-180deg) scale(.8)}100%{transform:none}}
.act .n{display:inline-block}
.act .n.roll{animation:roll .3s var(--ease-out)}
@keyframes roll{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
.burst{position:absolute;left:21px;top:22px;width:0;height:0;pointer-events:none}
.burst i{position:absolute;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--like);animation:burst .5s var(--ease-out) forwards}
@keyframes burst{0%{transform:rotate(var(--r)) translateY(-6px) scale(1);opacity:1}100%{transform:rotate(var(--r)) translateY(-17px) scale(.3);opacity:0}}
.pulse{animation:pulse .6s var(--ease-out)}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---- sheets / overlays (solid, never blurred) ---- */
.scrim{position:fixed;z-index:30;opacity:0;transition:opacity .25s}
.scrim.in{opacity:1}
.sheet{position:fixed;z-index:31;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .34s var(--ease-out);padding-bottom:calc(16px + var(--safe-b))}
.sheet.in{transform:none}
.pop{position:fixed;z-index:31;opacity:0;transform:scale(.96) translateY(-4px);transform-origin:top right;transition:opacity .15s,transform .2s var(--ease-out)}
.pop.in{opacity:1;transform:none}
.sheet .mi{text-align:left}
.bd{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px}
.bd+.bd{border-top:1px solid var(--line)}
.bd .grow{font-size:15px;line-height:20px}
.bd .grow span{display:block;font-size:13px;color:var(--text-3)}
.toast{position:fixed;left:50%;bottom:calc(var(--navh) + 20px + var(--safe-b));z-index:50;max-width:calc(100% - 32px);transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);border-radius:14px;padding:10px 16px;font-size:14px;line-height:20px;font-weight:500;box-shadow:var(--shadow-2);transition:transform .3s var(--ease-spring),opacity .2s}
.toast.in{opacity:1;transform:translate(-50%,0)}
html.v-thread .toast{bottom:calc(88px + var(--safe-b))}

/* ---- thread ---- */
.post.n2{padding-left:104px;grid-template-columns:32px minmax(0,1fr);column-gap:10px}
.post.n2::after{left:146px}
.post.n2 .av{width:32px;height:32px}
.post.n2 .tl-elbow{left:81px}
.post.n1 .tl-down2{position:absolute;left:75px;top:48px;bottom:0;width:2px;border-radius:2px;background:var(--line-strong)}
.cont.n2{padding-left:104px}
.replybar{position:fixed;z-index:15;padding-bottom:calc(12px + var(--safe-b))}
.replybox{width:100%;text-align:left}
.replybox.lock{color:var(--text-3);background:transparent;box-shadow:inset 0 0 0 1px var(--line);border-style:dashed}
.focus-post .name{font-size:16px;line-height:22px;font-weight:600}

/* ---- compose ---- */
#compose{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s var(--ease-out);contain:layout paint}
#compose.in{transform:none}
#compose .topbar{position:relative;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;flex:none}
#compose .cbody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
#compose footer{flex:none;height:56px;border-top:1px solid var(--line);background:var(--bar);display:flex;align-items:center;padding:0 8px 0 4px}
.edwrap{position:relative;margin:12px 16px 0}
.edwrap textarea,.edwrap .mirror{font:inherit;font-size:17px;line-height:26px;padding:0;margin:0;border:0;width:100%;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;letter-spacing:normal}
.edwrap textarea{position:relative;z-index:1;display:block;background:transparent;color:var(--text);resize:none;outline:none;min-height:130px;overflow:hidden}
.edwrap textarea::placeholder{color:var(--text-3)}
.edwrap .mirror{position:absolute;inset:0;color:transparent;pointer-events:none}
.edwrap .mirror mark{color:transparent;background:color-mix(in oklch,var(--net-bsky) 14%,transparent);border-radius:3px}
.edwrap .mirror mark.alt{background:color-mix(in oklch,var(--net-bsky) 26%,transparent)}
.edwrap .mirror mark.fover{background:color-mix(in oklch,var(--danger) 22%,transparent)}
.visbtn{gap:8px;min-height:44px;padding:0 12px;border-radius:12px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);width:100%;text-align:left}
.vispop{position:relative;margin:6px 0 0;z-index:1;display:none;opacity:1;transform:none}
.vispop.open{display:block}
.cwfield{margin:12px 16px 0}
.cwfield input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:15px;color:var(--text)}
.cnt.over{color:var(--danger)}
.cnt.over .ring .f,.cnt.over .ring .b{stroke:var(--danger)}
.cnt.warn{color:var(--warn)}
.nchip{transition:background-color .15s,box-shadow .15s}
.replyparent{display:flex;gap:10px;margin:0 16px;padding:8px 12px;border-radius:12px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);align-items:flex-start}

/* ---- screens ---- */
.searchbar{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 16px;height:56px}
.searchbar .input{height:44px;border-radius:999px;flex:1}
mark.hl{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px}
.profile-top{position:relative}
.cu-more[hidden]{display:none}

/* ---- debug + fps ---- */
.dbg .row2{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px}
.dbg .row2 .grow{font-size:15px}
.dbg .seg{flex:none}
.dbg .seg button{padding:0 10px}
.dbg table{width:calc(100% - 32px);margin:8px 16px 0;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.dbg th,.dbg td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
.dbg th{color:var(--text-3);font-weight:600;font-size:12px}
.dbg .note{font-size:12px;line-height:17px;color:var(--text-3);padding:6px 16px 0}
button.tg{cursor:pointer;transition:background-color .15s}
button.tg::after{transition:left .3s var(--ease-spring)}
#fps{position:fixed;left:8px;bottom:calc(var(--navh) + 8px + var(--safe-b));z-index:60;background:oklch(0% 0 0 / .72);color:#fff;font:600 12px/16px ui-monospace,Menlo,monospace;padding:6px 8px;border-radius:8px;pointer-events:none;contain:layout paint;white-space:pre}
#fps[hidden]{display:none}
.testing{position:fixed;left:50%;top:calc(var(--barh) + 8px);transform:translateX(-50%);z-index:60;background:var(--text);color:var(--bg);font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}
.scrim:not(.in){pointer-events:none}
.edwrap textarea:focus,.edwrap textarea:focus-visible,.input input:focus,.input input:focus-visible,.cwfield input:focus-visible{outline:none}
.input input{-webkit-appearance:none;appearance:none}
.input input::-webkit-search-cancel-button,.input input::-webkit-search-decoration{-webkit-appearance:none;display:none}
#bar[hidden]{display:none}

/* =================== desktop (>= 700 px) =================== */
.rail,#side{display:none}
html.dk{--navh:0px}
html.dk .nav,html.dk .fab{display:none!important}
html.dk #bar{left:var(--cx);right:auto;width:var(--colw);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
html.dk .dkbar .ftabs{height:52px;padding:0 8px 0 4px;gap:0}
html.dk .dkbar .moods{padding:2px 12px 10px 16px;gap:5px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
html.dk .dkbar .moods::-webkit-scrollbar{display:none}
html.dk .dkbar .mood{height:32px;padding:0 10px 0 8px;gap:5px;font-size:13.5px}
html.dk .dkbar .calm{height:32px;font-size:13.5px;padding:0 5px 0 9px;gap:5px}
html.dk .view{margin-left:var(--cx);width:var(--colw);border-right:1px solid var(--line);padding-bottom:48px}
html.dk .replybar{left:var(--cx);right:auto;width:var(--colw)}
html.dk .newpill{left:calc(var(--cx) + var(--colw) / 2)}
html.dk .toast{left:calc(var(--cx) + var(--colw) / 2);bottom:24px}
html.dk #fps{left:calc(var(--cx) + 8px);bottom:8px}
html.dk .testing{left:calc(var(--cx) + var(--colw) / 2)}
html.dk .post[data-id]{cursor:pointer}
html.dk .post.sel{background:color-mix(in oklch,var(--accent-soft) 45%,var(--bg));box-shadow:inset 0 0 0 2px var(--focus)}

.rail{position:fixed;top:0;bottom:0;left:var(--dkx);width:var(--railw);z-index:21;flex-direction:column;gap:4px;padding:16px 12px;border-right:1px solid var(--line);background:var(--bg);overflow-y:auto;scrollbar-width:none}
html.dk .rail{display:flex}
.rail .brand{display:flex;align-items:center;gap:10px;height:48px;padding:0 10px;margin-bottom:8px;border-radius:12px;-webkit-user-select:none;user-select:none}
.rail .brand .lbl{font-size:21px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.rail .ni{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-radius:999px;font-size:16px;color:var(--text-2);font-weight:500;width:100%;text-align:left;position:relative}
.rail .ni.on{background:var(--accent-soft);color:var(--text);font-weight:600}
.rail .ni.on .i{color:var(--accent)}
.rail .nbadge{background:var(--like);color:#fff}
.rail .newbtn{margin-top:16px;height:48px;width:100%}
.rail .newbtn .kbd{color:var(--on-accent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--on-accent) 40%,transparent)}
.rail .acctbtn{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;width:100%}
/* icon-only rail (700-1279 px) */
html.dk:not(.dkw) .rail{padding:16px 12px;align-items:center}
html.dk:not(.dkw) .rail .lbl{display:none}
html.dk:not(.dkw) .rail .brand{padding:0;width:48px;justify-content:center}
html.dk:not(.dkw) .rail .brand .nm{width:30px!important;height:20px!important}
html.dk:not(.dkw) .rail .ni{width:48px;padding:0;justify-content:center}
html.dk:not(.dkw) .rail .nbadge{position:absolute;top:4px;right:2px;height:16px;min-width:16px;padding:0 4px;font-size:11px;font-weight:700;justify-content:center}
html.dk:not(.dkw) .rail .newbtn{width:48px;padding:0;border-radius:16px}
html.dk:not(.dkw) .rail .acctbtn{width:auto;padding:4px}

/* side panel (>= 1100 px) */
html.dk3 #side{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:var(--sx);width:var(--sidew);z-index:19;background:var(--bg);overflow:hidden}
.sidehd{flex:none;height:56px;display:flex;align-items:center;gap:4px;padding:0 12px 0 20px;border-bottom:1px solid var(--line)}
.sidehd .ibtn:first-child{margin-left:-12px}
.sidescroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sidefoot{flex:none;border-top:1px solid var(--line);padding:12px 20px 14px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.kbdhints{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--text-3)}
.kbdhints>*{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.preply textarea{width:100%;resize:none;border:0;border-radius:12px;padding:10px 12px;background:var(--sunken);box-shadow:inset 0 0 0 2px var(--accent);font:inherit;font-size:15px;line-height:22px;color:var(--text);outline:none;min-height:66px}
.qrow{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;padding:10px 20px;cursor:pointer;position:relative}
.qrow::after{content:"";position:absolute;left:62px;right:0;bottom:0;height:1px;background:var(--line)}
.qrow .q{font-size:14px;line-height:20px;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#side .lrow{padding-left:20px;padding-right:16px}
#side .lrow.div::after{left:20px}

/* dialogs instead of bottom sheets */
html.dk .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(480px,calc(100vw - 32px));max-height:86vh;border-radius:20px;padding-top:16px;opacity:0;transform:translate(-50%,-47%);transition:transform .25s var(--ease-out),opacity .18s}
html.dk .sheet.in{opacity:1;transform:translate(-50%,-50%)}
html.dk .sheet .grab{display:none}
.cscrim{display:none}
html.dk .cscrim{display:block;z-index:39}
html.dk #compose{inset:auto;left:50%;top:50%;width:min(600px,calc(100vw - 32px));height:auto;max-height:min(88vh,860px);border-radius:20px;box-shadow:var(--shadow-3);opacity:0;transform:translate(-50%,-47%);transition:transform .25s var(--ease-out),opacity .18s}
html.dk #compose.in{opacity:1;transform:translate(-50%,-50%)}
html.dk #compose .cbody{min-height:0}
html.dk #compose .topbar{border-radius:20px 20px 0 0}
html.dk #compose footer{border-radius:0 0 20px 20px}

/* hover + tooltips (mouse) */
#tip{position:fixed;z-index:70;max-width:260px;padding:6px 10px;border-radius:8px;background:var(--text);color:var(--bg);font-size:12.5px;line-height:17px;font-weight:500;pointer-events:none;box-shadow:var(--shadow-2)}
#tip[hidden]{display:none}
.bdpop{width:260px;padding:6px}
@media (hover:hover) and (pointer:fine){
  .post[data-id]:hover,.cc:hover,.cpost:hover,.qcard:hover,.qrow:hover,.lrow[data-a]:hover,.nt:hover{background:color-mix(in oklch,var(--sunken) 60%,var(--bg))}
  html.dk .post.sel:hover{background:color-mix(in oklch,var(--accent-soft) 60%,var(--bg))}
  .act:hover{background:color-mix(in oklch,var(--text) 7%,transparent);color:var(--text-2)}
  .act[data-a="like"]:hover,.act.liked:hover{color:var(--like);background:color-mix(in oklch,var(--like) 10%,transparent)}
  .act[data-a="rp"]:hover,.act.reposted:hover{color:var(--repost);background:color-mix(in oklch,var(--repost) 10%,transparent)}
  .ibtn:hover,.tool:hover,.rail .brand:hover,.rail .acctbtn:hover{background:color-mix(in oklch,var(--text) 7%,transparent)}
  .rail .ni:not(.on):hover{background:color-mix(in oklch,var(--text) 6%,transparent);color:var(--text)}
  .tab:not(.on):hover,.seg button:not(.on):hover{color:var(--text)}
  .chip:not(.on):hover,.mood:not(.on):hover,.btn.out:hover,.btn.sec:hover{background:color-mix(in oklch,var(--text) 5%,transparent)}
  .btn.pri:hover{background:var(--accent-hover)}
  .mi:hover:not(.on){background:color-mix(in oklch,var(--text) 5%,transparent)}
  .replybox:not(.lock):hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
  .lc:hover .ttl,.qt:hover .qb{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
  .kbdhints button:hover{color:var(--text)}
}
#v-home{position:relative} /* containing block for the hidden row measurer = the list column width */

/* ---------- real client (phase 1) ---------- */
.av>img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av:has(>img){background:var(--sunken)}
.img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.banner{position:relative;overflow:hidden}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lc .dom .i{color:var(--text-3)}
.body p{overflow-wrap:anywhere}
.demonote{display:flex;align-items:center;gap:10px;margin:10px 12px 2px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--accent-soft);font-size:14px;line-height:20px;color:var(--text)}
.demonote>.i{color:var(--accent);flex:none}
.demonote.warn{background:color-mix(in oklch,var(--danger) 10%,var(--bg))}
.demonote.warn>.i{color:var(--danger)}
.homefoot{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:8px 16px;font-size:14px;color:var(--text-3);text-align:center}
.homefoot:empty{display:none}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:wrspin .8s linear infinite;flex:none;display:inline-block}
.spin.lg{width:32px;height:32px;border-width:3px}
@keyframes wrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.ob{max-width:560px;margin:0 auto;padding:8px 16px 32px}
.ob-hero{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 0 8px}
.ob-hero h1{font-size:28px;line-height:34px;font-weight:500;letter-spacing:-.01em}
.ob-hero p{font-size:15px;line-height:22px;color:var(--text-2)}
.ob-h{display:flex;align-items:center;gap:8px;font-size:16px;line-height:22px;margin:22px 0 8px}
.ob-p{padding:6px 2px 0}
.ob-p .i{display:inline;vertical-align:-2px}
.ob-card{border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ob-card.pad{padding:14px}
.ob-err{font-size:14px;line-height:20px;color:var(--danger)}
.ob-more{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.ob-more summary{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-2);list-style:none}
.ob-more summary::-webkit-details-marker{display:none}
.input .pre{color:var(--text-3)}
.acct{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px;flex-wrap:wrap}
.acct+.acct{border-top:1px solid var(--line)}
.acct .tt{font-size:15px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .st{font-size:13px;line-height:18px;color:var(--text-3);min-width:0}
.sheet .acct{border-radius:10px}
.cfiles{display:flex;flex-direction:column;gap:8px;padding:12px 16px 0}
.cfile{display:flex;align-items:center;gap:10px}
.cfile>img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;box-shadow:inset 0 0 0 1px var(--img-edge)}
/* link cards without a picture, quoted links, in-place video, deleted posts */
.lc .lcico{display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.qt .qlink{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:18px;color:var(--text-3);min-width:0}
.qt .qlink span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media.vid{cursor:pointer}
.media.vid .play:hover{background:oklch(0% 0 0 / .72)}
.media.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;border-radius:inherit}
.media.vid.on{cursor:auto}
.media.vid.on .img>:not(video):not(.vidnote){display:none}
.vidnote{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 12px;background:oklch(0% 0 0 / .72);color:#fff;font-size:13px;line-height:18px}
.vidnote a{color:#fff;text-decoration:underline}
.filtered.gone{color:var(--text-2)}
/* compose: language button + picker (above the footer), Bluesky link card preview */
#compose .langbtn{width:auto;min-width:44px;padding:0 8px;font-size:13px;line-height:16px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}
#compose .langbtn[aria-expanded="true"]{background:var(--accent-soft)}
.langpop{position:absolute;z-index:3;right:8px;bottom:64px;width:min(340px,calc(100% - 16px));max-height:min(58vh,460px);display:none;flex-direction:column;gap:6px;opacity:1;transform:none;padding:8px}
.langpop.open{display:flex}
.langpop .input{flex:none}
.langpop .langlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.langpop .sect{padding:8px 12px 4px;font-size:12px;line-height:16px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.langpop .mi{min-height:44px}
.langpop .lcode{font-size:12px;font-weight:600;color:var(--text-3);letter-spacing:.04em}
.ccard{margin:12px 16px 0}
.ccard .hdr{gap:6px;min-height:36px;font-size:13px;line-height:18px;font-weight:600;color:var(--text-2)}
.ccard .lc{margin-top:4px;pointer-events:none}
/* ---- your wildroot.io name and page (js/wrpage.js) ---- */
.claim{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 22%,transparent)}
.claim.compact{margin:6px 0 2px}
.claim-ic{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent)}
.claim-t{gap:4px;min-width:0}
.claim-h{font-size:17px;line-height:22px;font-weight:600}
.claim-t p{font-size:14px;line-height:20px;color:var(--text-2)}
.claim-t p b{color:var(--text);font-weight:600}
.claim-acts{gap:8px;flex-wrap:wrap;margin-top:6px}
.ob .claim{margin:4px 0 8px}
.rail .railclaim{margin-top:10px;height:44px;width:100%}
html.dk:not(.dkw) .rail .railclaim{width:48px;height:48px;padding:0;border-radius:16px}
.wp-cardwrap{padding:12px 16px 0}
.wp-card{margin:12px 16px 0;padding:14px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.wp-top{gap:10px;align-items:center}.wp-top>.i{color:var(--accent);flex:none}
.wp-h{font-size:16px;line-height:22px;font-weight:600}
.wp-host{display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere;min-height:24px}
.wp-st{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--sunken);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.wp-st.live{background:var(--accent-soft);color:var(--text);box-shadow:none}.wp-st.live .i{color:var(--accent)}
.wp-st.draft{background:var(--warn-soft);color:var(--text);box-shadow:none}.wp-st.draft .i{color:var(--warn)}
.wp-line{margin-top:8px}
.wp-card .wp-acts{gap:8px;flex-wrap:wrap;margin-top:10px}
.wp{max-width:560px;margin:0 auto;padding:12px 16px 32px}
.wp-status{padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:6px}
.wp-status.draft{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--warn) 45%,transparent)}
.wp-chk{color:var(--text-3)}
.wp-pv{border-radius:16px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);padding:20px 16px 16px}
.wp-pv-av{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700}
.wp-pv-h{font-size:24px;line-height:30px;font-weight:700;margin-top:10px;overflow-wrap:anywhere}
.wp-pv-n{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:18px;color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}
.wp-pv-b{font-size:15px;line-height:22px;margin-top:10px;overflow-wrap:anywhere}
.wp-pv ul{list-style:none;margin:12px 0 0;padding:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.wp-pv li{padding:10px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;overflow-wrap:anywhere}.wp-pv li:first-child{border-top:0}
.wp-pv .k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.wp-pv .v{font-size:15px;line-height:20px;color:var(--accent);font-weight:500}
.wp-pv-note{font-size:13px;line-height:18px;color:var(--text-3)}
.wp-lbl{font-size:14px;line-height:20px;font-weight:600}
.wp-ta{font:inherit;font-size:16px;line-height:22px;width:100%;resize:vertical;border:0;border-radius:12px;padding:12px 14px;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);outline:none}
.wp-ta:focus-visible,.wp .input:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.wp-cnt{align-self:flex-end}
.wp-link{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) 44px;gap:8px;align-items:center}
.wp-link .input{padding:0 12px}
.wp .input.bad{box-shadow:inset 0 0 0 2px var(--danger)}
.wp-lerr{grid-column:1/-1}
@media (max-width:420px){.wp-link{grid-template-columns:minmax(0,1fr) 44px}.wp-link .input:first-child{grid-column:1/-1}}
.wp-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);min-height:56px}.wp-row:first-child{border-top:0}
.wp-acts.col{gap:12px;margin-top:22px}
.wp-unlock{padding:4px 16px 12px}.wp-unlock h2{font-size:20px;line-height:26px;margin-bottom:6px}
/* ---- Home: Wildroot picks for an empty or thin network timeline (js/picks.js) ---- */
.picks{margin:10px 0 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--accent-soft) 45%,var(--bg))}
.picks-hd{display:flex;align-items:center;gap:8px;padding:14px 16px 0}
.picks-hd h2{font-size:16px;line-height:22px;font-weight:600}
.picks-p{padding:4px 16px 8px}
.picks-follow{margin:4px 16px 8px;padding:6px 12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.picks-follow h3{font-size:13px;line-height:18px;font-weight:600;color:var(--text-2);padding:6px 0 2px}
.picks-who{display:flex;align-items:center;gap:10px;min-height:56px}
.picks-who .nm1{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picks-who .nm2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picks-more{display:flex;justify-content:center;padding:6px 16px 10px}